From c469ad49b6b1ba9d4a4b3adcab75ebd8711ac3f6 Mon Sep 17 00:00:00 2001 From: Marco Allegretti Date: Wed, 29 Apr 2026 08:39:34 +0200 Subject: [PATCH] Polish quick settings states --- .../private/QuickSettingsDelegate.qml | 16 ++++-- .../private/QuickSettingsFullDelegate.qml | 23 +++++++-- .../QuickSettingsMinimizedDelegate.qml | 15 +++++- .../private/QuickSettingsStatusRow.qml | 49 +++++++++++++------ 4 files changed, 78 insertions(+), 25 deletions(-) diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml index 4cb2879c..6ae49a91 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml @@ -41,11 +41,21 @@ MobileShell.BaseItem { readonly property color enabledButtonBorderColor: Qt.darker(Kirigami.Theme.highlightColor, 1.25) readonly property color disabledButtonBorderColor: separatorColorHelper(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2) - readonly property color enabledButtonColor: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.6) - readonly property color enabledButtonPressedColor: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.4); - readonly property color disabledButtonColor: Kirigami.Theme.backgroundColor + readonly property color enabledButtonColor: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.25) + readonly property color enabledButtonHoverColor: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.32) + readonly property color enabledButtonPressedColor: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.12); + readonly property color disabledButtonColor: Kirigami.Theme.alternateBackgroundColor + readonly property color disabledButtonHoverColor: mixColor(Kirigami.Theme.alternateBackgroundColor, Kirigami.Theme.textColor, 0.06) readonly property color disabledButtonPressedColor: Qt.darker(disabledButtonColor, 1.1) + function mixColor(base, overlay, ratio) { + return Qt.rgba( + base.r + (overlay.r - base.r) * ratio, + base.g + (overlay.g - base.g) * ratio, + base.b + (overlay.b - base.b) * ratio, + base.a + (overlay.a - base.a) * ratio) + } + function separatorColorHelper(bg, fg, baseRatio) { if (Kirigami.ColorUtils.brightnessForColor(bg) === Kirigami.ColorUtils.Light) { return Kirigami.ColorUtils.linearInterpolation(bg, fg, baseRatio); diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml index 2f5e4efe..2b212c3e 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml @@ -20,6 +20,7 @@ QuickSettingsDelegate { padding: Kirigami.Units.smallSpacing * 2 iconItem: icon + readonly property int tileRadius: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing // scale animation on press zoomScale: (ShellSettings.Settings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1 @@ -33,24 +34,35 @@ QuickSettingsDelegate { anchors.right: parent.right height: parent.height - radius: Kirigami.Units.cornerRadius - color: Qt.rgba(0, 0, 0, 0.075) + radius: root.tileRadius + color: Qt.rgba(0, 0, 0, root.enabled ? 0.12 : 0.08) } // background color Rectangle { + id: tileRect anchors.fill: parent - radius: Kirigami.Units.cornerRadius + radius: root.tileRadius border.pixelAligned: false border.width: 1 border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor color: { if (root.enabled) { - return mouseArea.pressed ? root.enabledButtonPressedColor : root.enabledButtonColor + if (mouseArea.pressed) { + return root.enabledButtonPressedColor + } + return mouseArea.containsMouse ? root.enabledButtonHoverColor : root.enabledButtonColor } else { - return mouseArea.pressed ? root.disabledButtonPressedColor : root.disabledButtonColor + if (mouseArea.pressed) { + return root.disabledButtonPressedColor + } + return mouseArea.containsMouse ? root.disabledButtonHoverColor : root.disabledButtonColor } } + + Behavior on color { + ColorAnimation { duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.shortDuration : 0; easing.type: Easing.OutCubic } + } } } @@ -60,6 +72,7 @@ QuickSettingsDelegate { contentItem: MouseArea { id: mouseArea + hoverEnabled: true onPressed: haptics.buttonVibrate() onClicked: root.delegateClick() diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml index d9253311..fbbe8222 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml @@ -45,11 +45,21 @@ QuickSettingsDelegate { border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor color: { if (root.enabled) { - return mouseArea.pressed ? root.enabledButtonPressedColor : root.enabledButtonColor + if (mouseArea.pressed) { + return root.enabledButtonPressedColor + } + return mouseArea.containsMouse ? root.enabledButtonHoverColor : root.enabledButtonColor } else { - return mouseArea.pressed ? root.disabledButtonPressedColor : root.disabledButtonColor + if (mouseArea.pressed) { + return root.disabledButtonPressedColor + } + return mouseArea.containsMouse ? root.disabledButtonHoverColor : root.disabledButtonColor } } + + Behavior on color { + ColorAnimation { duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.shortDuration : 0; easing.type: Easing.OutCubic } + } } } @@ -59,6 +69,7 @@ QuickSettingsDelegate { contentItem: MouseArea { id: mouseArea + hoverEnabled: true onPressed: haptics.buttonVibrate(); onClicked: root.delegateClick() diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml index 9fac35eb..d5313456 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml @@ -30,14 +30,14 @@ Item { Kirigami.Theme.inherit: false Kirigami.Theme.colorSet: Kirigami.Theme.Button - // ── Palette (shared with tile delegates) ──────────────────────────── - readonly property color enabledBg: Kirigami.ColorUtils.tintWithAlpha( - Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.6) - readonly property color enabledBgPressed: Kirigami.ColorUtils.tintWithAlpha( - Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.4) + readonly property int rowRadius: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing + readonly property color enabledBg: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.25) + readonly property color enabledBgHover: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.32) + readonly property color enabledBgPressed: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.12) readonly property color enabledBorder: Qt.darker(Kirigami.Theme.highlightColor, 1.25) - readonly property color disabledBg: Kirigami.Theme.backgroundColor + readonly property color disabledBg: Kirigami.Theme.alternateBackgroundColor + readonly property color disabledBgHover: mixColor(Kirigami.Theme.alternateBackgroundColor, Kirigami.Theme.textColor, 0.06) readonly property color disabledBgPressed: Qt.darker(disabledBg, 1.1) readonly property color disabledBorder: { let bg = Kirigami.Theme.backgroundColor; @@ -49,6 +49,14 @@ Item { } } + function mixColor(base, overlay, ratio) { + return Qt.rgba( + base.r + (overlay.r - base.r) * ratio, + base.g + (overlay.g - base.g) * ratio, + base.b + (overlay.b - base.b) * ratio, + base.a + (overlay.a - base.a) * ratio) + } + MobileShell.HapticsEffect { id: haptics } // ── Outer card ────────────────────────────────────────────────────── @@ -59,8 +67,8 @@ Item { anchors.left: parent.left anchors.right: parent.right height: parent.height - radius: Kirigami.Units.cornerRadius - color: Qt.rgba(0, 0, 0, 0.075) + radius: root.rowRadius + color: Qt.rgba(0, 0, 0, root.enabled ? 0.12 : 0.08) } // Card background — always neutral base (the toggle pill carries the @@ -68,7 +76,7 @@ Item { Rectangle { id: cardBg anchors.fill: parent - radius: Kirigami.Units.cornerRadius + radius: root.rowRadius border.pixelAligned: false border.width: 1 border.color: root.disabledBorder @@ -96,9 +104,15 @@ Item { border.color: root.enabled ? root.enabledBorder : root.disabledBorder color: { if (root.enabled) { - return toggleMouse.pressed ? root.enabledBgPressed : root.enabledBg; + if (toggleMouse.pressed) { + return root.enabledBgPressed; + } + return toggleMouse.containsMouse ? root.enabledBgHover : root.enabledBg; } - return toggleMouse.pressed ? root.disabledBgPressed : root.disabledBg; + if (toggleMouse.pressed) { + return root.disabledBgPressed; + } + return toggleMouse.containsMouse ? root.disabledBgHover : root.disabledBg; } Behavior on color { @@ -129,20 +143,25 @@ Item { source: root.icon } - // Indicator dot + // Indicator bar Rectangle { Layout.alignment: Qt.AlignHCenter - width: Kirigami.Units.smallSpacing * 1.5 - height: width - radius: width / 2 + width: root.enabled ? Kirigami.Units.smallSpacing * 3 : Kirigami.Units.smallSpacing * 1.5 + height: Math.max(2, Math.round(Kirigami.Units.devicePixelRatio)) + radius: height / 2 color: root.enabled ? Kirigami.Theme.highlightColor : Kirigami.Theme.disabledTextColor opacity: root.enabled ? 1.0 : 0.4 + + Behavior on width { + NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } + } } } MouseArea { id: toggleMouse anchors.fill: parent + hoverEnabled: true cursorShape: Qt.PointingHandCursor onPressed: haptics.buttonVibrate() onClicked: {