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,7 +26,21 @@ 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 {
// very simple shadow for performance
Rectangle {
anchors.top: parent.top
anchors.topMargin: 1
anchors.left: parent.left
anchors.right: parent.right
height: parent.height
radius: PlasmaCore.Units.smallSpacing
color: Qt.rgba(0, 0, 0, 0.075)
}
// background color
Rectangle {
anchors.fill: parent anchors.fill: parent
radius: PlasmaCore.Units.smallSpacing radius: PlasmaCore.Units.smallSpacing
border.width: 1 border.width: 1
@ -39,6 +53,7 @@ QuickSettingsDelegate {
} }
} }
} }
}
contentItem: MouseArea { contentItem: MouseArea {
id: mouseArea id: mouseArea

View file

@ -24,7 +24,22 @@ 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 {
// very simple shadow for performance
Rectangle {
anchors.top: parent.top
anchors.topMargin: 1
anchors.left: parent.left
anchors.right: parent.right
height: parent.height
radius: PlasmaCore.Units.smallSpacing
color: Qt.rgba(0, 0, 0, 0.075)
}
// background
Rectangle {
anchors.fill: parent
radius: PlasmaCore.Units.smallSpacing radius: PlasmaCore.Units.smallSpacing
border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor
color: { color: {
@ -35,6 +50,7 @@ QuickSettingsDelegate {
} }
} }
} }
}
contentItem: MouseArea { contentItem: MouseArea {
id: mouseArea id: mouseArea