diff --git a/.config/quickshell/ii/modules/common/widgets/Toolbar.qml b/.config/quickshell/ii/modules/common/widgets/Toolbar.qml index 6826802ab..25a2665c4 100644 --- a/.config/quickshell/ii/modules/common/widgets/Toolbar.qml +++ b/.config/quickshell/ii/modules/common/widgets/Toolbar.qml @@ -23,7 +23,7 @@ Item { Rectangle { id: background anchors.centerIn: parent - color: Appearance.colors.colLayer2 + color: Appearance.m3colors.m3surfaceContainer // Needs to be opaque implicitHeight: toolbarLayout.implicitHeight + root.padding * 2 implicitWidth: toolbarLayout.implicitWidth + root.padding * 2 radius: Appearance.rounding.full diff --git a/.config/quickshell/ii/modules/common/widgets/WindowDialog.qml b/.config/quickshell/ii/modules/common/widgets/WindowDialog.qml index d4f9f3285..92f6353e3 100644 --- a/.config/quickshell/ii/modules/common/widgets/WindowDialog.qml +++ b/.config/quickshell/ii/modules/common/widgets/WindowDialog.qml @@ -45,7 +45,7 @@ Rectangle { id: dialogBackground anchors.horizontalCenter: parent.horizontalCenter 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 y: root.show ? targetY : (targetY - root.backgroundAnimationMovementDistance) diff --git a/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelectorContent.qml b/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelectorContent.qml index b55233417..0160f47c4 100644 --- a/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelectorContent.qml +++ b/.config/quickshell/ii/modules/wallpaperSelector/WallpaperSelectorContent.qml @@ -191,13 +191,16 @@ Item { id: gridDisplayRegion Layout.fillWidth: true Layout.fillHeight: true - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: gridDisplayRegion.width - height: gridDisplayRegion.height - radius: wallpaperGridBackground.radius + + StyledProgressBar { + anchors { + bottom: parent.top + left: parent.left + right: parent.right + leftMargin: 4 + rightMargin: 4 } + indeterminate: true } GridView { @@ -253,127 +256,87 @@ Item { filterField.text = ""; } } + + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: gridDisplayRegion.width + height: gridDisplayRegion.height + radius: wallpaperGridBackground.radius + } + } } - Item { + Toolbar { id: extraOptions anchors { bottom: parent.bottom horizontalCenter: parent.horizontalCenter - } - implicitHeight: extraOptionsBackground.implicitHeight + extraOptionsBackground.anchors.margins * 2 - implicitWidth: extraOptionsBackground.implicitWidth + extraOptionsBackground.anchors.margins * 2 - - StyledRectangularShadow { - target: extraOptionsBackground + bottomMargin: 8 } - Rectangle { // Bottom toolbar - id: extraOptionsBackground - property real padding: 6 - anchors { - fill: parent - margins: 8 + ToolbarButton { + implicitWidth: height + onClicked: { + Wallpapers.openFallbackPicker(root.useDarkMode); + GlobalStates.wallpaperSelectorOpen = false; } - color: Appearance.colors.colLayer2 - implicitHeight: extraOptionsRowLayout.implicitHeight + padding * 2 - implicitWidth: extraOptionsRowLayout.implicitWidth + padding * 2 - radius: Appearance.rounding.full + contentItem: MaterialSymbol { + text: "open_in_new" + iconSize: Appearance.font.pixelSize.larger + } + StyledToolTip { + content: Translation.tr("Use the system file picker instead") + } + } - RowLayout { - id: extraOptionsRowLayout - anchors { - fill: parent - margins: extraOptionsBackground.padding - } + ToolbarButton { + implicitWidth: height + 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)") + } + } - RippleButton { - Layout.fillHeight: true - Layout.topMargin: 2 - Layout.bottomMargin: 2 - implicitWidth: height - buttonRadius: Appearance.rounding.full - onClicked: { - Wallpapers.openFallbackPicker(root.useDarkMode); - GlobalStates.wallpaperSelectorOpen = false; + ToolbarTextField { + id: filterField + placeholderText: GlobalStates.screenUnlockFailed ? Translation.tr("Incorrect password") : Translation.tr("Enter password") + + // Style + clip: true + font.pixelSize: Appearance.font.pixelSize.small + + // 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 { - text: "open_in_new" - iconSize: Appearance.font.pixelSize.larger - } - StyledToolTip { - content: Translation.tr("Use the system file picker instead") + 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 - implicitWidth: height - buttonRadius: Appearance.rounding.full - 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" - } - } + ToolbarButton { + onClicked: { + GlobalStates.wallpaperSelectorOpen = false; + } + contentItem: StyledText { + text: "Cancel" } } }