marcoallegretti/shift-shell
1
0
Fork 0
mirror of https://invent.kde.org/marcoa/shift-shell.git synced 2026-06-11 00:47:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Polish quick settings states

Browse source
This commit is contained in:
Marco Allegretti 2026-04-29 08:39:34 +02:00
parent c9f219ad60
commit c469ad49b6
4 changed files with 78 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml
View file

@ -41,11 +41,21 @@ MobileShell.BaseItem {
readonly property color enabledButtonBorderColor: Qt.darker(Kirigami.Theme.highlightColor, 1.25) 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 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 enabledButtonColor: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.25)
readonly property color enabledButtonPressedColor: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.4); readonly property color enabledButtonHoverColor: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.32)
readonly property color disabledButtonColor: Kirigami.Theme.backgroundColor 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) 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) { function separatorColorHelper(bg, fg, baseRatio) {
if (Kirigami.ColorUtils.brightnessForColor(bg) === Kirigami.ColorUtils.Light) { if (Kirigami.ColorUtils.brightnessForColor(bg) === Kirigami.ColorUtils.Light) {
return Kirigami.ColorUtils.linearInterpolation(bg, fg, baseRatio); return Kirigami.ColorUtils.linearInterpolation(bg, fg, baseRatio);

23
components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml
View file

@ -20,6 +20,7 @@ QuickSettingsDelegate {
padding: Kirigami.Units.smallSpacing * 2 padding: Kirigami.Units.smallSpacing * 2
iconItem: icon iconItem: icon
readonly property int tileRadius: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
// scale animation on press // scale animation on press
zoomScale: (ShellSettings.Settings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1 zoomScale: (ShellSettings.Settings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1
@ -33,24 +34,35 @@ QuickSettingsDelegate {
anchors.right: parent.right anchors.right: parent.right
height: parent.height height: parent.height
radius: Kirigami.Units.cornerRadius radius: root.tileRadius
color: Qt.rgba(0, 0, 0, 0.075) color: Qt.rgba(0, 0, 0, root.enabled ? 0.12 : 0.08)
} }
// background color // background color
Rectangle { Rectangle {
id: tileRect
anchors.fill: parent anchors.fill: parent
radius: Kirigami.Units.cornerRadius radius: root.tileRadius
border.pixelAligned: false border.pixelAligned: false
border.width: 1 border.width: 1
border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor
color: { color: {
if (root.enabled) { if (root.enabled) {
return mouseArea.pressed ? root.enabledButtonPressedColor : root.enabledButtonColor if (mouseArea.pressed) {
return root.enabledButtonPressedColor
}
return mouseArea.containsMouse ? root.enabledButtonHoverColor : root.enabledButtonColor
} else { } 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 { contentItem: MouseArea {
id: mouseArea id: mouseArea
hoverEnabled: true
onPressed: haptics.buttonVibrate() onPressed: haptics.buttonVibrate()
onClicked: root.delegateClick() onClicked: root.delegateClick()

15
components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml
View file

@ -45,11 +45,21 @@ QuickSettingsDelegate {
border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor
color: { color: {
if (root.enabled) { if (root.enabled) {
return mouseArea.pressed ? root.enabledButtonPressedColor : root.enabledButtonColor if (mouseArea.pressed) {
return root.enabledButtonPressedColor
}
return mouseArea.containsMouse ? root.enabledButtonHoverColor : root.enabledButtonColor
} else { } 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 { contentItem: MouseArea {
id: mouseArea id: mouseArea
hoverEnabled: true
onPressed: haptics.buttonVibrate(); onPressed: haptics.buttonVibrate();
onClicked: root.delegateClick() onClicked: root.delegateClick()

49
components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml
View file

@ -30,14 +30,14 @@ Item {
Kirigami.Theme.inherit: false Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.Button Kirigami.Theme.colorSet: Kirigami.Theme.Button
// ── Palette (shared with tile delegates) ──────────────────────────── readonly property int rowRadius: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
readonly property color enabledBg: Kirigami.ColorUtils.tintWithAlpha( readonly property color enabledBg: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.25)
Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.6) readonly property color enabledBgHover: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.32)
readonly property color enabledBgPressed: Kirigami.ColorUtils.tintWithAlpha( readonly property color enabledBgPressed: mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.highlightColor, 0.12)
Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.4)
readonly property color enabledBorder: Qt.darker(Kirigami.Theme.highlightColor, 1.25) 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 disabledBgPressed: Qt.darker(disabledBg, 1.1)
readonly property color disabledBorder: { readonly property color disabledBorder: {
let bg = Kirigami.Theme.backgroundColor; 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 } MobileShell.HapticsEffect { id: haptics }
// ── Outer card ────────────────────────────────────────────────────── // ── Outer card ──────────────────────────────────────────────────────
@ -59,8 +67,8 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: parent.height height: parent.height
radius: Kirigami.Units.cornerRadius radius: root.rowRadius
color: Qt.rgba(0, 0, 0, 0.075) color: Qt.rgba(0, 0, 0, root.enabled ? 0.12 : 0.08)
} }
// Card background — always neutral base (the toggle pill carries the // Card background — always neutral base (the toggle pill carries the
@ -68,7 +76,7 @@ Item {
Rectangle { Rectangle {
id: cardBg id: cardBg
anchors.fill: parent anchors.fill: parent
radius: Kirigami.Units.cornerRadius radius: root.rowRadius
border.pixelAligned: false border.pixelAligned: false
border.width: 1 border.width: 1
border.color: root.disabledBorder border.color: root.disabledBorder
@ -96,9 +104,15 @@ Item {
border.color: root.enabled ? root.enabledBorder : root.disabledBorder border.color: root.enabled ? root.enabledBorder : root.disabledBorder
color: { color: {
if (root.enabled) { 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 { Behavior on color {
@ -129,20 +143,25 @@ Item {
source: root.icon source: root.icon
} }
// Indicator dot // Indicator bar
Rectangle { Rectangle {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
width: Kirigami.Units.smallSpacing * 1.5 width: root.enabled ? Kirigami.Units.smallSpacing * 3 : Kirigami.Units.smallSpacing * 1.5
height: width height: Math.max(2, Math.round(Kirigami.Units.devicePixelRatio))
radius: width / 2 radius: height / 2
color: root.enabled ? Kirigami.Theme.highlightColor : Kirigami.Theme.disabledTextColor color: root.enabled ? Kirigami.Theme.highlightColor : Kirigami.Theme.disabledTextColor
opacity: root.enabled ? 1.0 : 0.4 opacity: root.enabled ? 1.0 : 0.4
Behavior on width {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic }
}
} }
} }
MouseArea { MouseArea {
id: toggleMouse id: toggleMouse
anchors.fill: parent anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onPressed: haptics.buttonVibrate() onPressed: haptics.buttonVibrate()
onClicked: { onClicked: {