Add configurable shadow

package/contents/config/main.xml

@@ -6,6 +6,7 @@
 <kcfgfile name=""/>
 
   <group name="Appearance">
+
       <!-- Clock Display Settings -->
     <entry name="clockUse24hFormat" type="Bool">
       <label>Force the clock to use 12/24 hour time, instead of following the user locale.</label>
@@ -16,7 +17,7 @@
       <default>.</default>
     </entry>
     <entry name="clockFontColor" type="Color">
-      <label>Color of text</label>
+      <label>Color of text.</label>
       <default>#ffffff</default>
     </entry>
     <entry name="clockFontFamily" type="string">
@@ -35,6 +36,27 @@
       <label>Sets the size of the day font in pixels.</label>
       <default>220</default>
     </entry>
+    <entry name="clockShadowEnabled" type="Bool">
+      <label>Whether the drop shadow should be shown behind the clock label.</label>
+      <default>false</default>
+    </entry>
+    <entry name="clockShadowColor" type="Color">
+      <label>Color of shadow.</label>
+      <default>#80000000</default>
+    </entry>
+    <entry name="clockShadowRadius" type="int">
+      <label>Sets the radius of the shadow.</label>
+      <default>10</default>
+    </entry>
+    <entry name="clockShadowXOffset" type="int">
+      <label>Sets the x offset of the shadow.</label>
+      <default>0</default>
+    </entry>
+    <entry name="clockShadowYOffset" type="int">
+      <label>Sets the y offset of the shadow.</label>
+      <default>0</default>
+    </entry>
+
     <!-- Day Display Settings -->
     <entry name="showDayDisplay" type="Bool">
       <label>Whether the day should be shown in the clock.</label>
@@ -60,6 +82,27 @@
       <label>Sets the size of the day font in pixels.</label>
       <default>100</default>
     </entry>
+    <entry name="dayShadowEnabled" type="Bool">
+      <label>Whether the drop shadow should be shown behind the clock label.</label>
+      <default>false</default>
+    </entry>
+    <entry name="dayShadowColor" type="Color">
+      <label>Color of shadow.</label>
+      <default>#80000000</default>
+    </entry>
+    <entry name="dayShadowRadius" type="int">
+      <label>Sets the radius of the shadow.</label>
+      <default>10</default>
+    </entry>
+    <entry name="dayShadowXOffset" type="int">
+      <label>Sets the x offset of the shadow.</label>
+      <default>0</default>
+    </entry>
+    <entry name="dayShadowYOffset" type="int">
+      <label>Sets the y offset of the shadow.</label>
+      <default>0</default>
+    </entry>
+
     <!-- Date Display Settings -->
     <entry name="showDateDisplay" type="Bool">
       <label>Whether the date should be shown below the clock.</label>
@@ -93,5 +136,26 @@
       <label>Sets the letter spacing of the date font.</label>
       <default>2</default>
     </entry>
+    <entry name="dateShadowEnabled" type="Bool">
+      <label>Whether the drop shadow should be shown behind the clock label.</label>
+      <default>false</default>
+    </entry>
+    <entry name="dateShadowColor" type="Color">
+      <label>Color of shadow.</label>
+      <default>#80000000</default>
+    </entry>
+    <entry name="dateShadowRadius" type="int">
+      <label>Sets the radius of the shadow.</label>
+      <default>10</default>
+    </entry>
+    <entry name="dateShadowXOffset" type="int">
+      <label>Sets the x offset of the shadow.</label>
+      <default>0</default>
+    </entry>
+    <entry name="dateShadowYOffset" type="int">
+      <label>Sets the y offset of the shadow.</label>
+      <default>0</default>
+    </entry>
+
   </group>
 </kcfg>

package/contents/ui/config/configAppearance.qml

@@ -26,6 +26,11 @@ Item {
     property bool cfg_clockBoldText
     property bool cfg_clockItalicText
     property int cfg_clockFontSize
+    property alias cfg_clockShadowEnabled: clockShadowCheckBox.checked
+    property color cfg_clockShadowColor
+    property int cfg_clockShadowRadius
+    property int cfg_clockShadowXOffset
+    property int cfg_clockShadowYOffset
 
     property alias cfg_showDayDisplay: showDayDisplayCheckBox.checked
     property string cfg_dayFontColor
@@ -33,6 +38,11 @@ Item {
     property bool cfg_dayBoldText
     property bool cfg_dayItalicText
     property int cfg_dayFontSize
+    property alias cfg_dayShadowEnabled: dayShadowCheckBox.checked
+    property color cfg_dayShadowColor
+    property int cfg_dayShadowRadius
+    property int cfg_dayShadowXOffset
+    property int cfg_dayShadowYOffset
 
     property alias cfg_showDateDisplay: showDateDisplayCheckBox.checked
     property alias cfg_dateCustomDateFormat: customDateFormat.text
@@ -41,6 +51,11 @@ Item {
     property bool cfg_dateBoldText
     property bool cfg_dateItalicText
     property int cfg_dateFontSize
+    property alias cfg_dateShadowEnabled: dateShadowCheckBox.checked
+    property color cfg_dateShadowColor
+    property int cfg_dateShadowRadius
+    property int cfg_dateShadowXOffset
+    property int cfg_dateShadowYOffset
 
 
     function fixFontFamilyChange(id, comboBox) {
@@ -88,9 +103,13 @@ Item {
         }
     }
 
+    QtControls.ScrollView {
+        id: scrollView
+
         QtLayouts.ColumnLayout {
             id: layout
             anchors.fill: parent
+            spacing: 30
 
             QtLayouts.ColumnLayout {
                 QtLayouts.Layout.fillWidth: true
@@ -148,6 +167,37 @@ Item {
                         cfg_clockFontSize = pxSizeValue
                     }
                 }
+
+                QtControls.CheckBox {
+                    id: clockShadowCheckBox
+                    text: i18n("Enable shadow")
+                    tristate: false
+                    checked: cfg_clockShadowEnabled
+                }
+
+                ShadowConfig {
+                    enabled: clockShadowCheckBox.checked
+
+                    colorValue: cfg_clockShadowColor
+                    onColorValueChanged: {
+                        cfg_clockShadowColor = colorValue
+                    }
+
+                    radiusValue: cfg_clockShadowRadius
+                    onRadiusValueChanged: {
+                        cfg_clockShadowRadius = radiusValue
+                    }
+
+                    offsetXValue: cfg_clockShadowXOffset
+                    onOffsetXValueChanged: {
+                        cfg_clockShadowXOffset = offsetXValue
+                    }
+
+                    offsetYValue: cfg_clockShadowYOffset
+                    onOffsetYValueChanged: {
+                        cfg_clockShadowYOffset = offsetYValue
+                    }
+                }
             }
 
             QtLayouts.ColumnLayout {
@@ -194,6 +244,37 @@ Item {
                         cfg_dayFontSize = pxSizeValue
                     }
                 }
+
+                QtControls.CheckBox {
+                    id: dayShadowCheckBox
+                    text: i18n("Enable shadow")
+                    tristate: false
+                    checked: cfg_dayShadowEnabled
+                }
+
+                ShadowConfig {
+                    enabled: dayShadowCheckBox.checked
+
+                    colorValue: cfg_dayShadowColor
+                    onColorValueChanged: {
+                        cfg_dayShadowColor = colorValue
+                    }
+
+                    radiusValue: cfg_dayShadowRadius
+                    onRadiusValueChanged: {
+                        cfg_dayShadowRadius = radiusValue
+                    }
+
+                    offsetXValue: cfg_dayShadowXOffset
+                    onOffsetXValueChanged: {
+                        cfg_dayShadowXOffset = offsetXValue
+                    }
+
+                    offsetYValue: cfg_clockShadowYOffset
+                    onOffsetYValueChanged: {
+                        cfg_dayShadowYOffset = offsetYValue
+                    }
+                }
             }
 
             QtLayouts.ColumnLayout {
@@ -262,6 +343,38 @@ Item {
                         cfg_dateFontSize = pxSizeValue
                     }
                 }
+
+                QtControls.CheckBox {
+                    id: dateShadowCheckBox
+                    text: i18n("Enable shadow")
+                    tristate: false
+                    checked: cfg_dateShadowEnabled
+                }
+
+                ShadowConfig {
+                    enabled: dateShadowCheckBox.checked
+
+                    colorValue: cfg_dateShadowColor
+                    onColorValueChanged: {
+                        cfg_dateShadowColor = colorValue
+                    }
+
+                    radiusValue: cfg_dateShadowRadius
+                    onRadiusValueChanged: {
+                        cfg_dateShadowRadius = radiusValue
+                    }
+
+                    offsetXValue: cfg_dateShadowXOffset
+                    onOffsetXValueChanged: {
+                        cfg_dateShadowXOffset = offsetXValue
+                    }
+
+                    offsetYValue: cfg_dateShadowYOffset
+                    onOffsetYValueChanged: {
+                        cfg_dateShadowYOffset = offsetYValue
+                    }
+                }
+            }
         }
     }
 }

package/contents/ui/lib/ShadowConfig.qml

@@ -0,0 +1,77 @@
+import QtQuick 2.4
+import QtQuick.Controls 2.12 as QtControls
+import QtQuick.Layouts 1.15 as QtLayouts
+import QtLocation 5.12
+import QtQuick.Dialogs 1.2
+
+import "."
+
+QtLayouts.RowLayout {
+
+    property color colorValue
+    property int radiusValue
+    property int offsetXValue
+    property int offsetYValue
+
+
+    QtControls.Label {
+        text: i18n("Shadow style:")
+        opacity: if (enabled) 1
+                 else 0.4
+    }
+
+    ColorButton {
+        id: shadowColorButton
+        value: colorValue
+
+        onValueChanged: {
+            colorValue = value
+        }
+    }
+
+    QtControls.Label {
+        text: i18n("Radius")
+        opacity: if (enabled) 1
+                 else 0.4
+    }
+
+    QtControls.SpinBox {
+        id: radiusSpinBox
+        from: 0
+        to: 25
+        value: radiusValue
+
+        onValueChanged: {
+            radiusValue = value
+        }
+    }
+
+    QtControls.Label {
+        text: i18n("Offset")
+        opacity: if (enabled) 1
+                 else 0.4
+    }
+
+    QtControls.SpinBox {
+        id: offsetXSpinBox
+        from: 0
+        to: 25
+        value: offsetXValue
+
+        onValueChanged: {
+            offsetXValue = value
+        }
+    }
+
+    QtControls.SpinBox {
+        id: offsetYSpinBox
+        from: 0
+        to: 25
+        value: offsetYValue
+
+        onValueChanged: {
+            offsetYValue = value
+        }
+    }
+
+}

package/contents/ui/main.qml

@@ -5,6 +5,7 @@
 
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
+import QtGraphicalEffects 1.12
 
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.plasmoid 2.0
@@ -67,7 +68,7 @@ Item {
             height: Math.max(textMetricsClockLabel.height, textMetricsDayLabel.height)
             Layout.alignment: Qt.AlignCenter
 
-            PlasmaComponents.Label {
+            Text {
                 id: clockLabel
                 anchors.centerIn: parent
 
@@ -80,9 +81,18 @@ Item {
                 font.bold: plasmoid.configuration.clockBoldText
                 font.italic: plasmoid.configuration.clockItalicText
                 font.pixelSize: plasmoid.configuration.clockFontSize
+
+                layer.enabled: plasmoid.configuration.clockShadowEnabled
+                layer.effect: DropShadow {
+                    color: plasmoid.configuration.clockShadowColor
+                    radius: plasmoid.configuration.clockShadowRadius
+                    horizontalOffset: plasmoid.configuration.clockShadowXOffset
+                    verticalOffset: plasmoid.configuration.clockShadowYOffset
+                    samples: 10
+                }
             }
 
-            PlasmaComponents.Label {
+            Text {
                 id: dayLabel
                 visible: plasmoid.configuration.showDayDisplay
                 anchors.centerIn: parent
@@ -95,10 +105,19 @@ Item {
                 font.bold: plasmoid.configuration.daykBoldText
                 font.italic: plasmoid.configuration.dayItalicText
                 font.pixelSize: plasmoid.configuration.dayFontSize
+
+                layer.enabled: plasmoid.configuration.dayShadowEnabled
+                layer.effect: DropShadow {
+                    color: plasmoid.configuration.dayShadowColor
+                    radius: plasmoid.configuration.dayShadowRadius
+                    horizontalOffset: plasmoid.configuration.dayShadowXOffset
+                    verticalOffset: plasmoid.configuration.dayShadowYOffset
+                    samples: 10
+                }
             }
         }
 
-        PlasmaComponents.Label {
+        Text {
             id: dateLabel
             visible: plasmoid.configuration.showDateDisplay
             Layout.alignment: Qt.AlignCenter
@@ -113,6 +132,15 @@ Item {
             font.pixelSize: plasmoid.configuration.dateFontSize
             font.capitalization: Font.AllUppercase
             font.letterSpacing: plasmoid.configuration.dateLetterSpacing
+
+            layer.enabled: plasmoid.configuration.dateShadowEnabled
+            layer.effect: DropShadow {
+                color: plasmoid.configuration.dateShadowColor
+                radius: plasmoid.configuration.dateShadowRadius
+                horizontalOffset: plasmoid.configuration.dateShadowXOffset
+                verticalOffset: plasmoid.configuration.dateShadowYOffset
+                samples: 10
+            }
         }
     }
 }