feat: bring back foreground shadow

refs: #69
luisbocanegra · Sep 23, 2024 · 3fd7fce · 3fd7fce
1 parent 4f23428
commit 3fd7fce
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 26 deletions.
diff --git a/package/contents/ui/code/globals.js b/package/contents/ui/code/globals.js
@@ -102,6 +102,11 @@ const baseShadow = {
   "yOffset": 0
 }
 
+const baseShadowConfig = {
+  "background": baseShadow,
+  "foreground": baseShadow
+}
+
 const baseRadius = {
   "enabled": false,
   "corner": {
@@ -158,7 +163,7 @@ const basePanelConfig = {
   "margin": baseMargin,
   "padding": basePadding,
   "border": baseBorder,
-  "shadow": baseShadow,
+  "shadow": baseShadowConfig,
 }
 
 const baseWidgetConfig = {
@@ -170,7 +175,7 @@ const baseWidgetConfig = {
   "margin": baseMargin,
   "spacing": 3,
   "border": baseBorder,
-  "shadow": baseShadow,
+  "shadow": baseShadowConfig,
 }
 
 const baseTrayConfig = {
@@ -181,7 +186,7 @@ const baseTrayConfig = {
   "radius": baseRadius,
   "margin": baseMargin,
   "border": baseBorder,
-  "shadow": baseShadow,
+  "shadow": baseShadowConfig,
 }
 
 const baseOverrideConfig = {
@@ -192,7 +197,7 @@ const baseOverrideConfig = {
   "margin": baseMargin,
   "spacing": 3,
   "border": baseBorder,
-  "shadow": baseShadow,
+  "shadow": baseShadowConfig,
   "enabled": true,
   "disabledFallback": true
 }

diff --git a/package/contents/ui/components/FormShadow.qml b/package/contents/ui/components/FormShadow.qml
@@ -12,6 +12,7 @@ Kirigami.FormLayout {
     twinFormLayouts: parentLayout
     Layout.fillWidth: true
     property bool isSection: true
+    property string sectionName
     // wether read from the string or existing config object
     property bool handleString
     // internal config objects to be sent, both string and json
@@ -24,53 +25,53 @@ Kirigami.FormLayout {
         updateConfigString(configString, config)
     }
 
-    // Kirigami.Separator {
-    //     Kirigami.FormData.isSection: isSection
-    //     Kirigami.FormData.label: i18n("Shadow")
-    // }
+    Kirigami.Separator {
+        Kirigami.FormData.isSection: isSection
+        Kirigami.FormData.label: i18n("Shadow")
+    }
 
     CheckBox {
         Kirigami.FormData.label: i18n("Enabled:")
         id: enabledCheckbox
-        checked: config.shadow.enabled
+        checked: config.enabled
         onCheckedChanged: {
-            config.shadow.enabled = checked
+            config.enabled = checked
             updateConfig()
         }
     }
 
     SpinBox {
         Kirigami.FormData.label: i18n("Size:")
         id: shadowSize
-        value: config.shadow.size
+        value: config.size
         from: 0
         to: 99
         onValueModified: {
-            config.shadow.size = value
+            config.size = value
             updateConfig()
         }
     }
 
     SpinBox {
         Kirigami.FormData.label: i18n("X offset:")
         id: shadowX
-        value: config.shadow.xOffset
+        value: config.xOffset
         from: -99
         to: 99
         onValueModified: {
-            config.shadow.xOffset = value
+            config.xOffset = value
             updateConfig()
         }
     }
 
     SpinBox {
         Kirigami.FormData.label: i18n("Y offset:")
         id: shadowY
-        value: config.shadow.yOffset
+        value: config.yOffset
         from: -99
         to: 99
         onValueModified: {
-            config.shadow.yOffset = value
+            config.yOffset = value
             updateConfig()
         }
     }

diff --git a/package/contents/ui/components/FormWidgetSettings.qml b/package/contents/ui/components/FormWidgetSettings.qml
@@ -307,21 +307,48 @@ ColumnLayout {
     FormShadow {
         enabled: backgroundRoot.isEnabled
         visible: currentTab === 3
-        config: backgroundRoot.configLocal
+        config: backgroundRoot.configLocal.shadow.background
         onUpdateConfigString: (newString, newConfig) => {
-            backgroundRoot.configLocal = newConfig
+            backgroundRoot.configLocal.shadow.background = newConfig
             backgroundRoot.updateConfig()
         }
+        sectionName: i18n("Background Shadow")
     }
 
     FormColors {
         enabled: backgroundRoot.isEnabled
         visible: currentTab === 3
-        config: backgroundRoot.configLocal.shadow.color
+        config: backgroundRoot.configLocal.shadow.background.color
+        onUpdateConfigString: (newString, newConfig) => {
+            backgroundRoot.configLocal.shadow.background.color = newConfig
+            backgroundRoot.updateConfig()
+        }
+        isSection: false
+        followOptions: folllowVisbility.foreground
+        sectionName: i18n("Background Shadow Color")
+    }
+
+    FormShadow {
+        enabled: backgroundRoot.isEnabled
+        visible: currentTab === 3 && keyName !== "panel"
+        config: backgroundRoot.configLocal.shadow.foreground
+        onUpdateConfigString: (newString, newConfig) => {
+            backgroundRoot.configLocal.shadow.foreground = newConfig
+            backgroundRoot.updateConfig()
+        }
+        sectionName: i18n("Foreground Shadow")
+    }
+
+    FormColors {
+        enabled: backgroundRoot.isEnabled
+        visible: currentTab === 3 && keyName !== "panel"
+        config: backgroundRoot.configLocal.shadow.foreground.color
         onUpdateConfigString: (newString, newConfig) => {
-            backgroundRoot.configLocal.shadow.color = newConfig
+            backgroundRoot.configLocal.shadow.foreground.color = newConfig
             backgroundRoot.updateConfig()
         }
+        isSection: false
         followOptions: folllowVisbility.foreground
+        sectionName: i18n("Foreground Shadow Color")
     }
 }
diff --git a/package/contents/ui/main.qml b/package/contents/ui/main.qml
@@ -10,6 +10,7 @@ import org.kde.plasma.plasma5support as P5Support
 import org.kde.plasma.workspace.components as WorkspaceComponents
 import org.kde.taskmanager 0.1 as TaskManager
 import QtQuick.Effects
+import Qt5Compat.GraphicalEffects
 
 import "components" as Components
 import "code/utils.js" as Utils
@@ -220,7 +221,10 @@ PlasmoidItem {
         property bool radiusEnabled: cfg.radius.enabled
         property bool marginEnabled: cfg.margin.enabled
         property bool borderEnabled: cfg.border.enabled
-        property bool shadowEnabled: cfg.shadow.enabled
+        property bool bgShadowEnabled: cfg.shadow.background.enabled
+        property var bgShadow: cfg.shadow.background
+        property bool fgShadowEnabled: cfg.shadow.foreground.enabled
+        property var fgShadow: cfg.shadow.foreground
         Rectangle {
             id: fgColorHolder
             height: 6
@@ -571,15 +575,32 @@ PlasmoidItem {
         }
 
         shadow {
-            property var shadowColorCfg: cfg.shadow.color
+            property var shadowColorCfg: bgShadow.color
             Kirigami.Theme.colorSet: Kirigami.Theme[shadowColorCfg.systemColorSet]
-            Kirigami.Theme.inherit: shadowColorCfg.sourceType === 1
-            size: shadowEnabled ? cfg.shadow.size : 0
+            size: bgShadowEnabled ? bgShadow.size : 0
             color: {
                 return getColor(shadowColorCfg, targetIndex, rect.color, itemType)
             }
-            xOffset: cfg.shadow.xOffset
-            yOffset: cfg.shadow.yOffset
+            xOffset: bgShadow.xOffset
+            yOffset: bgShadow.yOffset
+        }
+
+        DropShadow {
+            height: target.height
+            width: target.width
+            anchors.centerIn: parent
+            property var shadowColorCfg: fgShadow.color
+            Kirigami.Theme.colorSet: Kirigami.Theme[shadowColorCfg.systemColorSet]
+            horizontalOffset: fgShadow.xOffset
+            verticalOffset: fgShadow.yOffset
+            radius: fgShadowEnabled ? fgShadow.size : 0
+            samples: radius * 2 + 1
+            spread: 0.35
+            color: {
+                return getColor(shadowColorCfg, targetIndex, rect.color, itemType)
+            }
+            source: target.applet
+            visible: fgShadowEnabled
         }
     }