quicksettings: Add simple and performant shadow to delegates

This commit is contained in:
Devin Lin 2022-06-03 19:29:46 -04:00
parent f1bce20b3e
commit f8049783af
3 changed files with 53 additions and 22 deletions

View file

@ -35,10 +35,10 @@ Components.BaseItem {
// set by children // set by children
property var iconItem property var iconItem
readonly property color enabledButtonBorderColor: Qt.darker(Kirigami.ColorUtils.adjustColor(PlasmaCore.ColorScope.highlightColor, {}), 1.25) readonly property color enabledButtonBorderColor: Qt.darker(PlasmaCore.ColorScope.highlightColor, 1.25)
readonly property color disabledButtonBorderColor: Kirigami.ColorUtils.adjustColor(PlasmaCore.ColorScope.textColor, {"alpha": 0.2*255}) readonly property color disabledButtonBorderColor: Kirigami.ColorUtils.tintWithAlpha(PlasmaCore.ColorScope.textColor, PlasmaCore.ColorScope.backgroundColor, 0.75)
readonly property color enabledButtonColor: Kirigami.ColorUtils.adjustColor(PlasmaCore.ColorScope.highlightColor, {alpha: 0.4*255}) readonly property color enabledButtonColor: Kirigami.ColorUtils.tintWithAlpha(PlasmaCore.ColorScope.highlightColor, PlasmaCore.ColorScope.backgroundColor, 0.6)
readonly property color enabledButtonPressedColor: Kirigami.ColorUtils.adjustColor(PlasmaCore.ColorScope.highlightColor, {alpha: 0.6*255}); readonly property color enabledButtonPressedColor: Kirigami.ColorUtils.tintWithAlpha(PlasmaCore.ColorScope.highlightColor, PlasmaCore.ColorScope.backgroundColor, 0.4);
readonly property color disabledButtonColor: PlasmaCore.Theme.backgroundColor readonly property color disabledButtonColor: PlasmaCore.Theme.backgroundColor
readonly property color disabledButtonPressedColor: Qt.darker(disabledButtonColor, 1.1) readonly property color disabledButtonPressedColor: Qt.darker(disabledButtonColor, 1.1)

View file

@ -26,16 +26,31 @@ QuickSettingsDelegate {
// scale animation on press // scale animation on press
zoomScale: (MobileShell.MobileShellSettings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1 zoomScale: (MobileShell.MobileShellSettings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1
background: Rectangle { background: Item {
anchors.fill: parent // very simple shadow for performance
radius: PlasmaCore.Units.smallSpacing Rectangle {
border.width: 1 anchors.top: parent.top
border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor anchors.topMargin: 1
color: { anchors.left: parent.left
if (root.enabled) { anchors.right: parent.right
return mouseArea.pressed ? root.enabledButtonPressedColor : root.enabledButtonColor height: parent.height
} else {
return mouseArea.pressed ? root.disabledButtonPressedColor : root.disabledButtonColor radius: PlasmaCore.Units.smallSpacing
color: Qt.rgba(0, 0, 0, 0.075)
}
// background color
Rectangle {
anchors.fill: parent
radius: PlasmaCore.Units.smallSpacing
border.width: 1
border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor
color: {
if (root.enabled) {
return mouseArea.pressed ? root.enabledButtonPressedColor : root.enabledButtonColor
} else {
return mouseArea.pressed ? root.disabledButtonPressedColor : root.disabledButtonColor
}
} }
} }
} }

View file

@ -24,14 +24,30 @@ QuickSettingsDelegate {
// scale animation on press // scale animation on press
zoomScale: (MobileShell.MobileShellSettings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1 zoomScale: (MobileShell.MobileShellSettings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1
background: Rectangle { background: Item {
radius: PlasmaCore.Units.smallSpacing // very simple shadow for performance
border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor Rectangle {
color: { anchors.top: parent.top
if (root.enabled) { anchors.topMargin: 1
return mouseArea.pressed ? root.enabledButtonPressedColor : root.enabledButtonColor anchors.left: parent.left
} else { anchors.right: parent.right
return mouseArea.pressed ? root.disabledButtonPressedColor : root.disabledButtonColor height: parent.height
radius: PlasmaCore.Units.smallSpacing
color: Qt.rgba(0, 0, 0, 0.075)
}
// background
Rectangle {
anchors.fill: parent
radius: PlasmaCore.Units.smallSpacing
border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor
color: {
if (root.enabled) {
return mouseArea.pressed ? root.enabledButtonPressedColor : root.enabledButtonColor
} else {
return mouseArea.pressed ? root.disabledButtonPressedColor : root.disabledButtonColor
}
} }
} }
} }