forked from Shinonome/dots-hyprland
wallpaper selector use Toolbar for name filter
This commit is contained in:
end-4
@@ -23,7 +23,7 @@ Item {
|
|||||||
Rectangle {
|
Rectangle {
|
||||||
id: background
|
id: background
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
color: Appearance.colors.colLayer2
|
color: Appearance.m3colors.m3surfaceContainer // Needs to be opaque
|
||||||
implicitHeight: toolbarLayout.implicitHeight + root.padding * 2
|
implicitHeight: toolbarLayout.implicitHeight + root.padding * 2
|
||||||
implicitWidth: toolbarLayout.implicitWidth + root.padding * 2
|
implicitWidth: toolbarLayout.implicitWidth + root.padding * 2
|
||||||
radius: Appearance.rounding.full
|
radius: Appearance.rounding.full
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ Rectangle {
|
|||||||
id: dialogBackground
|
id: dialogBackground
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
radius: Appearance.rounding.large
|
radius: Appearance.rounding.large
|
||||||
color: Appearance.colors.colLayer3
|
color: Appearance.m3colors.m3surfaceContainerHigh // Use opaque version of layer3
|
||||||
|
|
||||||
property real targetY: root.height / 2 - root.backgroundHeight / 2
|
property real targetY: root.height / 2 - root.backgroundHeight / 2
|
||||||
y: root.show ? targetY : (targetY - root.backgroundAnimationMovementDistance)
|
y: root.show ? targetY : (targetY - root.backgroundAnimationMovementDistance)
|
||||||
|
|||||||
@@ -191,13 +191,16 @@ Item {
|
|||||||
id: gridDisplayRegion
|
id: gridDisplayRegion
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.fillHeight: true
|
Layout.fillHeight: true
|
||||||
layer.enabled: true
|
|
||||||
layer.effect: OpacityMask {
|
StyledProgressBar {
|
||||||
maskSource: Rectangle {
|
anchors {
|
||||||
width: gridDisplayRegion.width
|
bottom: parent.top
|
||||||
height: gridDisplayRegion.height
|
left: parent.left
|
||||||
radius: wallpaperGridBackground.radius
|
right: parent.right
|
||||||
|
leftMargin: 4
|
||||||
|
rightMargin: 4
|
||||||
}
|
}
|
||||||
|
indeterminate: true
|
||||||
}
|
}
|
||||||
|
|
||||||
GridView {
|
GridView {
|
||||||
@@ -253,127 +256,87 @@ Item {
|
|||||||
filterField.text = "";
|
filterField.text = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
layer.enabled: true
|
||||||
|
layer.effect: OpacityMask {
|
||||||
|
maskSource: Rectangle {
|
||||||
|
width: gridDisplayRegion.width
|
||||||
|
height: gridDisplayRegion.height
|
||||||
|
radius: wallpaperGridBackground.radius
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Toolbar {
|
||||||
id: extraOptions
|
id: extraOptions
|
||||||
anchors {
|
anchors {
|
||||||
bottom: parent.bottom
|
bottom: parent.bottom
|
||||||
horizontalCenter: parent.horizontalCenter
|
horizontalCenter: parent.horizontalCenter
|
||||||
}
|
bottomMargin: 8
|
||||||
implicitHeight: extraOptionsBackground.implicitHeight + extraOptionsBackground.anchors.margins * 2
|
|
||||||
implicitWidth: extraOptionsBackground.implicitWidth + extraOptionsBackground.anchors.margins * 2
|
|
||||||
|
|
||||||
StyledRectangularShadow {
|
|
||||||
target: extraOptionsBackground
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle { // Bottom toolbar
|
ToolbarButton {
|
||||||
id: extraOptionsBackground
|
implicitWidth: height
|
||||||
property real padding: 6
|
onClicked: {
|
||||||
anchors {
|
Wallpapers.openFallbackPicker(root.useDarkMode);
|
||||||
fill: parent
|
GlobalStates.wallpaperSelectorOpen = false;
|
||||||
margins: 8
|
|
||||||
}
|
}
|
||||||
color: Appearance.colors.colLayer2
|
contentItem: MaterialSymbol {
|
||||||
implicitHeight: extraOptionsRowLayout.implicitHeight + padding * 2
|
text: "open_in_new"
|
||||||
implicitWidth: extraOptionsRowLayout.implicitWidth + padding * 2
|
iconSize: Appearance.font.pixelSize.larger
|
||||||
radius: Appearance.rounding.full
|
}
|
||||||
|
StyledToolTip {
|
||||||
|
content: Translation.tr("Use the system file picker instead")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
RowLayout {
|
ToolbarButton {
|
||||||
id: extraOptionsRowLayout
|
implicitWidth: height
|
||||||
anchors {
|
onClicked: root.useDarkMode = !root.useDarkMode
|
||||||
fill: parent
|
contentItem: MaterialSymbol {
|
||||||
margins: extraOptionsBackground.padding
|
text: root.useDarkMode ? "dark_mode" : "light_mode"
|
||||||
}
|
iconSize: Appearance.font.pixelSize.larger
|
||||||
|
}
|
||||||
|
StyledToolTip {
|
||||||
|
content: Translation.tr("Click to toggle light/dark mode (applied when wallpaper is chosen)")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
RippleButton {
|
ToolbarTextField {
|
||||||
Layout.fillHeight: true
|
id: filterField
|
||||||
Layout.topMargin: 2
|
placeholderText: GlobalStates.screenUnlockFailed ? Translation.tr("Incorrect password") : Translation.tr("Enter password")
|
||||||
Layout.bottomMargin: 2
|
|
||||||
implicitWidth: height
|
// Style
|
||||||
buttonRadius: Appearance.rounding.full
|
clip: true
|
||||||
onClicked: {
|
font.pixelSize: Appearance.font.pixelSize.small
|
||||||
Wallpapers.openFallbackPicker(root.useDarkMode);
|
|
||||||
GlobalStates.wallpaperSelectorOpen = false;
|
// Search
|
||||||
|
onTextChanged: {
|
||||||
|
Wallpapers.searchQuery = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
Keys.onPressed: event => {
|
||||||
|
if (text.length !== 0) {
|
||||||
|
// No filtering, just navigate grid
|
||||||
|
if (event.key === Qt.Key_Down) {
|
||||||
|
grid.moveSelection(grid.columns);
|
||||||
|
event.accepted = true;
|
||||||
}
|
}
|
||||||
contentItem: MaterialSymbol {
|
if (event.key === Qt.Key_Up) {
|
||||||
text: "open_in_new"
|
grid.moveSelection(-grid.columns);
|
||||||
iconSize: Appearance.font.pixelSize.larger
|
event.accepted = true;
|
||||||
}
|
|
||||||
StyledToolTip {
|
|
||||||
content: Translation.tr("Use the system file picker instead")
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
event.accepted = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
RippleButton {
|
ToolbarButton {
|
||||||
Layout.fillHeight: true
|
onClicked: {
|
||||||
Layout.topMargin: 2
|
GlobalStates.wallpaperSelectorOpen = false;
|
||||||
Layout.bottomMargin: 2
|
}
|
||||||
implicitWidth: height
|
contentItem: StyledText {
|
||||||
buttonRadius: Appearance.rounding.full
|
text: "Cancel"
|
||||||
onClicked: root.useDarkMode = !root.useDarkMode
|
|
||||||
contentItem: MaterialSymbol {
|
|
||||||
text: root.useDarkMode ? "dark_mode" : "light_mode"
|
|
||||||
iconSize: Appearance.font.pixelSize.larger
|
|
||||||
}
|
|
||||||
StyledToolTip {
|
|
||||||
content: Translation.tr("Click to toggle light/dark mode (applied when wallpaper is chosen)")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TextField {
|
|
||||||
id: filterField
|
|
||||||
Layout.fillHeight: true
|
|
||||||
Layout.topMargin: 2
|
|
||||||
Layout.bottomMargin: 2
|
|
||||||
implicitWidth: 200
|
|
||||||
padding: 10
|
|
||||||
placeholderText: focus ? Translation.tr("Search wallpapers") : Translation.tr("Hit \"/\" to search")
|
|
||||||
placeholderTextColor: Appearance.colors.colSubtext
|
|
||||||
color: Appearance.colors.colOnLayer0
|
|
||||||
font.pixelSize: Appearance.font.pixelSize.small
|
|
||||||
renderType: Text.NativeRendering
|
|
||||||
selectedTextColor: Appearance.m3colors.m3onSecondaryContainer
|
|
||||||
selectionColor: Appearance.colors.colSecondaryContainer
|
|
||||||
background: Rectangle {
|
|
||||||
color: Appearance.colors.colLayer1
|
|
||||||
radius: Appearance.rounding.full
|
|
||||||
}
|
|
||||||
|
|
||||||
onTextChanged: {
|
|
||||||
Wallpapers.searchQuery = text;
|
|
||||||
}
|
|
||||||
|
|
||||||
Keys.onPressed: event => {
|
|
||||||
if (text.length !== 0) {
|
|
||||||
// No filtering, just navigate grid
|
|
||||||
if (event.key === Qt.Key_Down) {
|
|
||||||
grid.moveSelection(grid.columns);
|
|
||||||
event.accepted = true;
|
|
||||||
}
|
|
||||||
if (event.key === Qt.Key_Up) {
|
|
||||||
grid.moveSelection(-grid.columns);
|
|
||||||
event.accepted = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
event.accepted = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
RippleButton {
|
|
||||||
Layout.fillHeight: true
|
|
||||||
Layout.topMargin: 2
|
|
||||||
Layout.bottomMargin: 2
|
|
||||||
buttonRadius: Appearance.rounding.full
|
|
||||||
onClicked: {
|
|
||||||
GlobalStates.wallpaperSelectorOpen = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
contentItem: StyledText {
|
|
||||||
text: "Cancel"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user