wallpaper selector use Toolbar for name filter

This commit is contained in:
end-4
2025-08-30 09:09:05 +02:00
parent 88355b2504
commit fd3455d3ec
3 changed files with 77 additions and 114 deletions
@@ -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,46 +256,27 @@ 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
property real padding: 6
anchors {
fill: parent
margins: 8
}
color: Appearance.colors.colLayer2
implicitHeight: extraOptionsRowLayout.implicitHeight + padding * 2
implicitWidth: extraOptionsRowLayout.implicitWidth + padding * 2
radius: Appearance.rounding.full
RowLayout {
id: extraOptionsRowLayout
anchors {
fill: parent
margins: extraOptionsBackground.padding
}
RippleButton {
Layout.fillHeight: true
Layout.topMargin: 2
Layout.bottomMargin: 2
implicitWidth: height implicitWidth: height
buttonRadius: Appearance.rounding.full
onClicked: { onClicked: {
Wallpapers.openFallbackPicker(root.useDarkMode); Wallpapers.openFallbackPicker(root.useDarkMode);
GlobalStates.wallpaperSelectorOpen = false; GlobalStates.wallpaperSelectorOpen = false;
@@ -306,12 +290,8 @@ Item {
} }
} }
RippleButton { ToolbarButton {
Layout.fillHeight: true
Layout.topMargin: 2
Layout.bottomMargin: 2
implicitWidth: height implicitWidth: height
buttonRadius: Appearance.rounding.full
onClicked: root.useDarkMode = !root.useDarkMode onClicked: root.useDarkMode = !root.useDarkMode
contentItem: MaterialSymbol { contentItem: MaterialSymbol {
text: root.useDarkMode ? "dark_mode" : "light_mode" text: root.useDarkMode ? "dark_mode" : "light_mode"
@@ -322,25 +302,15 @@ Item {
} }
} }
TextField { ToolbarTextField {
id: filterField id: filterField
Layout.fillHeight: true placeholderText: GlobalStates.screenUnlockFailed ? Translation.tr("Incorrect password") : Translation.tr("Enter password")
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
}
// Style
clip: true
font.pixelSize: Appearance.font.pixelSize.small
// Search
onTextChanged: { onTextChanged: {
Wallpapers.searchQuery = text; Wallpapers.searchQuery = text;
} }
@@ -361,15 +331,10 @@ Item {
} }
} }
RippleButton { ToolbarButton {
Layout.fillHeight: true
Layout.topMargin: 2
Layout.bottomMargin: 2
buttonRadius: Appearance.rounding.full
onClicked: { onClicked: {
GlobalStates.wallpaperSelectorOpen = false; GlobalStates.wallpaperSelectorOpen = false;
} }
contentItem: StyledText { contentItem: StyledText {
text: "Cancel" text: "Cancel"
} }
@@ -379,8 +344,6 @@ Item {
} }
} }
} }
}
}
Connections { Connections {
target: GlobalStates target: GlobalStates