quicksettings: Add simple and performant shadow to delegates

components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDelegate.qml

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

components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsFullDelegate.qml

@@ -26,16 +26,31 @@ QuickSettingsDelegate {
     // scale animation on press
     zoomScale: (MobileShell.MobileShellSettings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1
     
-    background: 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
+    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
+            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
+                }
             }
         }
     }

components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsMinimizedDelegate.qml

@@ -24,14 +24,30 @@ QuickSettingsDelegate {
     // scale animation on press
     zoomScale: (MobileShell.MobileShellSettings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1
     
-    background: Rectangle {
-        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
+    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
+            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
+                }
             }
         }
     }