From eaa56ff555410829d4cfd74282ab1e182d56f0ba Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Thu, 19 Jun 2025 19:32:31 +0200 Subject: [PATCH] settings: add material palette and transparency --- .../quickshell/modules/common/Appearance.qml | 2 +- .../modules/common/widgets/ConfigSwitch.qml | 29 ++++++++ .../modules/common/widgets/KeyboardKey.qml | 2 +- .../modules/common/widgets/StyledSwitch.qml | 6 +- .config/quickshell/modules/settings/Style.qml | 69 +++++++++++++++++++ 5 files changed, 103 insertions(+), 5 deletions(-) create mode 100644 .config/quickshell/modules/common/widgets/ConfigSwitch.qml diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml index 4fd8aa9b5..9164ed91b 100644 --- a/.config/quickshell/modules/common/Appearance.qml +++ b/.config/quickshell/modules/common/Appearance.qml @@ -130,7 +130,7 @@ Singleton { property color colSecondary: m3colors.m3secondary property color colSecondaryHover: ColorUtils.mix(m3colors.m3secondary, colLayer1Hover, 0.85) property color colSecondaryActive: ColorUtils.mix(m3colors.m3secondary, colLayer1Active, 0.4) - property color colSecondaryContainer: ColorUtils.transparentize(m3colors.m3secondaryContainer, root.contentTransparency) + property color colSecondaryContainer: m3colors.m3secondaryContainer property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Hover, 0.6) property color colSecondaryContainerActive: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Active, 0.54) property color colOnSecondaryContainer: m3colors.m3onSecondaryContainer diff --git a/.config/quickshell/modules/common/widgets/ConfigSwitch.qml b/.config/quickshell/modules/common/widgets/ConfigSwitch.qml new file mode 100644 index 000000000..bbb60f06f --- /dev/null +++ b/.config/quickshell/modules/common/widgets/ConfigSwitch.qml @@ -0,0 +1,29 @@ +import "root:/modules/common/widgets/" +import "root:/modules/common/" +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +RippleButton { + id: root + Layout.fillWidth: true + + contentItem: RowLayout { + spacing: 10 + StyledText { + id: labelWidget + Layout.fillWidth: true + text: root.text + font.pixelSize: Appearance.font.pixelSize.normal + color: Appearance.colors.colOnSecondaryContainer + } + StyledSwitch { + id: switchWidget + down: root.down + scale: 0.75 + Layout.fillWidth: false + checked: root.checked + } + } +} + diff --git a/.config/quickshell/modules/common/widgets/KeyboardKey.qml b/.config/quickshell/modules/common/widgets/KeyboardKey.qml index 0cc80429e..d6ba5ba08 100644 --- a/.config/quickshell/modules/common/widgets/KeyboardKey.qml +++ b/.config/quickshell/modules/common/widgets/KeyboardKey.qml @@ -15,7 +15,7 @@ Rectangle { property real extraBottomBorderWidth: 2 property color borderColor: Appearance.colors.colOnLayer0 property real borderRadius: 5 - property color keyColor: Appearance.colors.colSurfaceContainerLow + property color keyColor: Appearance.m3colors.m3surfaceContainerLow implicitWidth: keyFace.implicitWidth + borderWidth * 2 implicitHeight: keyFace.implicitHeight + borderWidth * 2 + extraBottomBorderWidth radius: borderRadius diff --git a/.config/quickshell/modules/common/widgets/StyledSwitch.qml b/.config/quickshell/modules/common/widgets/StyledSwitch.qml index e980d7f88..453806f31 100644 --- a/.config/quickshell/modules/common/widgets/StyledSwitch.qml +++ b/.config/quickshell/modules/common/widgets/StyledSwitch.qml @@ -36,13 +36,13 @@ Switch { // Custom thumb styling indicator: Rectangle { - width: root.pressed ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale) - height: root.pressed ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale) + width: (root.pressed || root.down) ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale) + height: (root.pressed || root.down) ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale) radius: Appearance.rounding.full color: root.checked ? Appearance.m3colors.m3onPrimary : Appearance.m3colors.m3outline anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left - anchors.leftMargin: root.checked ? (root.pressed ? (22 * root.scale) : 24 * root.scale) : (root.pressed ? (2 * root.scale) : 8 * root.scale) + anchors.leftMargin: root.checked ? ((root.pressed || root.down) ? (22 * root.scale) : 24 * root.scale) : ((root.pressed || root.down) ? (2 * root.scale) : 8 * root.scale) Behavior on anchors.leftMargin { animation: Appearance.animation.elementMove.numberAnimation.createObject(this) diff --git a/.config/quickshell/modules/settings/Style.qml b/.config/quickshell/modules/settings/Style.qml index 9357bfb04..732c62f39 100644 --- a/.config/quickshell/modules/settings/Style.qml +++ b/.config/quickshell/modules/settings/Style.qml @@ -11,6 +11,8 @@ import "root:/modules/common/functions/color_utils.js" as ColorUtils import "root:/modules/common/functions/file_utils.js" as FileUtils ContentPage { + baseWidth: lightDarkButtonGroup.implicitWidth + forceWidth: true Process { id: konachanWallProc @@ -27,7 +29,9 @@ ContentPage { ContentSection { title: "Colors & Wallpaper" + // Light/Dark mode preference ButtonGroup { + id: lightDarkButtonGroup Layout.fillWidth: true LightDarkPreferenceButton { dark: false @@ -37,6 +41,59 @@ ContentPage { } } + // Material palette selection + StyledText { + text: "Material palette" + color: Appearance.colors.colSubtext + } + Flow { + id: paletteFlow + Layout.fillWidth: true + spacing: 2 + property list palettes: [ + {"value": "auto", "displayName": "Auto"}, + {"value": "scheme-content", "displayName": "Content"}, + {"value": "scheme-expressive", "displayName": "Expressive"}, + {"value": "scheme-fidelity", "displayName": "Fidelty"}, + {"value": "scheme-fruit-salad", "displayName": "Fruit Salad"}, + {"value": "scheme-monochrome", "displayName": "Monochrome"}, + {"value": "scheme-neutral", "displayName": "Neutral"}, + {"value": "scheme-rainbow", "displayName": "Rainbow"}, + {"value": "scheme-tonal-spot", "displayName": "Tonal Spot"}, + ] + + Repeater { + model: paletteFlow.palettes + delegate: SelectionGroupButton { + id: paletteButton + required property var modelData + required property int index + onYChanged: { + if (index === 0) { + paletteButton.leftmost = true + } else { + var prev = paletteFlow.children[index - 1] + var thisIsOnNewLine = prev && prev.y !== paletteButton.y + paletteButton.leftmost = thisIsOnNewLine + prev.rightmost = thisIsOnNewLine + } + } + leftmost: index === 0 + rightmost: index === paletteFlow.palettes.length - 1 + buttonText: modelData.displayName; + toggled: ConfigOptions.appearance.palette.type === modelData.value + onClicked: { + ConfigLoader.setConfigValueAndSave("appearance.palette.type", modelData.value); + } + } + } + } + + // Wallpaper selection + StyledText { + text: "Wallpaper" + color: Appearance.colors.colSubtext + } RowLayout { Layout.alignment: Qt.AlignHCenter RippleButtonWithIcon { @@ -139,5 +196,17 @@ ContentPage { } } } + + ConfigSwitch { + text: "Transparency" + checked: ConfigOptions.appearance.transparency + onClicked: checked = !checked; + onCheckedChanged: { + ConfigLoader.setConfigValueAndSave("appearance.transparency", checked); + } + StyledToolTip { + content: "Might look ass. Unsupported." + } + } } } \ No newline at end of file