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,178 +103,276 @@ Item {
         }
     }
 
-    QtLayouts.ColumnLayout {
+    QtControls.ScrollView {
-        id: layout
+        id: scrollView
-        anchors.fill: parent
 
         QtLayouts.ColumnLayout {
-            QtLayouts.Layout.fillWidth: true
+            id: layout
-            spacing: 10
+            anchors.fill: parent
+            spacing: 30
 
-            QtControls.Label {
+            QtLayouts.ColumnLayout {
-                text: i18n("Clock Display Settings")
+                QtLayouts.Layout.fillWidth: true
-                font.bold: true
+                spacing: 10
-                font.pixelSize: 17
-            }
-
-            QtControls.CheckBox {
-                id: use24hFormat
-                text: i18n("Use 24-hour clock")
-                tristate: false
-                checked: cfg_clockUse24hFormat
-            }
-
-            QtLayouts.RowLayout {
-                QtControls.Label {
-                    text: i18n("Separator:")
-                }
-
-                QtControls.TextField {
-                    id: clockSeparatorTextField
-                    maximumLength: 1
-                }
-            }
-
-            FontConfig {
-                fontModel: fontsModel
-
-                colorValue: cfg_clockFontColor
-                onColorValueChanged: {
-                    cfg_clockFontColor = colorValue
-                }
-
-                fontValue: cgf_clockFontFamily
-                onFontValueChanged: {
-                    cfg_clockFontFamily = fontValue
-                }
-
-                boldValue: cfg_clockBoldText
-                onBoldValueChanged: {
-                    cfg_clockBoldText = boldValue
-                }
-
-                italicValue: cfg_clockItalicText
-                onItalicValueChanged: {
-                    cfg_clockItalicText = italicValue
-                }
-
-                pxSizeValue: cfg_clockFontSize
-                onPxSizeValueChanged: {
-                    cfg_clockFontSize = pxSizeValue
-                }
-            }
-        }
-
-        QtLayouts.ColumnLayout {
-            QtLayouts.Layout.fillWidth: true
-            spacing: 10
-
-            QtControls.Label {
-                text: i18n("Day Display Settings")
-                font.bold: true
-                font.pixelSize: 17
-            }
-
-            QtControls.CheckBox {
-                id: showDayDisplayCheckBox
-                text: i18n("Show day display")
-            }
-
-            FontConfig {
-                fontModel: fontsModel
-                enabled: showDayDisplayCheckBox.checked
-
-                colorValue: cfg_dayFontColor
-                onColorValueChanged: {
-                    cfg_dayFontColor = colorValue
-                }
-
-                fontValue: cgf_dayFontFamily
-                onFontValueChanged: {
-                    cfg_dayFontFamily = fontValue
-                }
-
-                boldValue: cfg_dayBoldText
-                onBoldValueChanged: {
-                    cfg_dayBoldText = boldValue
-                }
-
-                italicValue: cfg_dayItalicText
-                onItalicValueChanged: {
-                    cfg_dayItalicText = italicValue
-                }
-
-                pxSizeValue: cfg_dayFontSize
-                onPxSizeValueChanged: {
-                    cfg_dayFontSize = pxSizeValue
-                }
-            }
-        }
-
-        QtLayouts.ColumnLayout {
-            QtLayouts.Layout.fillWidth: true
-            spacing: 10
-
-            QtControls.Label {
-                text: i18n("Date Display Settings")
-                font.bold: true
-                font.pixelSize: 17
-            }
-
-            QtControls.CheckBox {
-                id: showDateDisplayCheckBox
-                text: i18n("Show date display")
-            }
-
-            QtLayouts.RowLayout {
-                enabled: showDateDisplayCheckBox.checked
 
                 QtControls.Label {
-                    text: i18n("Date format:")
+                    text: i18n("Clock Display Settings")
-                    opacity: if (enabled) 1
+                    font.bold: true
-                             else 0.4
+                    font.pixelSize: 17
+                }
+
+                QtControls.CheckBox {
+                    id: use24hFormat
+                    text: i18n("Use 24-hour clock")
+                    tristate: false
+                    checked: cfg_clockUse24hFormat
                 }
 
                 QtLayouts.RowLayout {
-                    QtControls.TextField {
+                    QtControls.Label {
-                        id: customDateFormat
+                        text: i18n("Separator:")
-                        QtLayouts.Layout.fillWidth: true
                     }
 
-                    QtControls.Button {
+                    QtControls.TextField {
-                        icon.name: "exifinfo"
+                        id: clockSeparatorTextField
-                        onClicked: Qt.openUrlExternally("https://doc.qt.io/qt-5/qml-qtqml-qt.html#formatDateTime-method")
+                        maximumLength: 1
+                    }
+                }
+
+                FontConfig {
+                    fontModel: fontsModel
+
+                    colorValue: cfg_clockFontColor
+                    onColorValueChanged: {
+                        cfg_clockFontColor = colorValue
+                    }
+
+                    fontValue: cgf_clockFontFamily
+                    onFontValueChanged: {
+                        cfg_clockFontFamily = fontValue
+                    }
+
+                    boldValue: cfg_clockBoldText
+                    onBoldValueChanged: {
+                        cfg_clockBoldText = boldValue
+                    }
+
+                    italicValue: cfg_clockItalicText
+                    onItalicValueChanged: {
+                        cfg_clockItalicText = italicValue
+                    }
+
+                    pxSizeValue: cfg_clockFontSize
+                    onPxSizeValueChanged: {
+                        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
                     }
                 }
             }
 
-            FontConfig {
+            QtLayouts.ColumnLayout {
-                fontModel: fontsModel
+                QtLayouts.Layout.fillWidth: true
-                enabled: showDateDisplayCheckBox.checked
+                spacing: 10
 
-                colorValue: cfg_dateFontColor
+                QtControls.Label {
-                onColorValueChanged: {
+                    text: i18n("Day Display Settings")
-                    cfg_dateFontColor = colorValue
+                    font.bold: true
+                    font.pixelSize: 17
                 }
 
-                fontValue: cgf_dateFontFamily
+                QtControls.CheckBox {
-                onFontValueChanged: {
+                    id: showDayDisplayCheckBox
-                    cfg_dateFontFamily = fontValue
+                    text: i18n("Show day display")
                 }
 
-                boldValue: cfg_dateBoldText
+                FontConfig {
-                onBoldValueChanged: {
+                    fontModel: fontsModel
-                    cfg_dateBoldText = boldValue
+                    enabled: showDayDisplayCheckBox.checked
+
+                    colorValue: cfg_dayFontColor
+                    onColorValueChanged: {
+                        cfg_dayFontColor = colorValue
+                    }
+
+                    fontValue: cgf_dayFontFamily
+                    onFontValueChanged: {
+                        cfg_dayFontFamily = fontValue
+                    }
+
+                    boldValue: cfg_dayBoldText
+                    onBoldValueChanged: {
+                        cfg_dayBoldText = boldValue
+                    }
+
+                    italicValue: cfg_dayItalicText
+                    onItalicValueChanged: {
+                        cfg_dayItalicText = italicValue
+                    }
+
+                    pxSizeValue: cfg_dayFontSize
+                    onPxSizeValueChanged: {
+                        cfg_dayFontSize = pxSizeValue
+                    }
                 }
 
-                italicValue: cfg_dateItalicText
+                QtControls.CheckBox {
-                onItalicValueChanged: {
+                    id: dayShadowCheckBox
-                    cfg_dateItalicText = italicValue
+                    text: i18n("Enable shadow")
+                    tristate: false
+                    checked: cfg_dayShadowEnabled
                 }
 
-                pxSizeValue: cfg_dateFontSize
+                ShadowConfig {
-                onPxSizeValueChanged: {
+                    enabled: dayShadowCheckBox.checked
-                    cfg_dateFontSize = pxSizeValue
+
+                    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 {
+                QtLayouts.Layout.fillWidth: true
+                spacing: 10
+
+                QtControls.Label {
+                    text: i18n("Date Display Settings")
+                    font.bold: true
+                    font.pixelSize: 17
+                }
+
+                QtControls.CheckBox {
+                    id: showDateDisplayCheckBox
+                    text: i18n("Show date display")
+                }
+
+                QtLayouts.RowLayout {
+                    enabled: showDateDisplayCheckBox.checked
+
+                    QtControls.Label {
+                        text: i18n("Date format:")
+                        opacity: if (enabled) 1
+                                 else 0.4
+                    }
+
+                    QtLayouts.RowLayout {
+                        QtControls.TextField {
+                            id: customDateFormat
+                            QtLayouts.Layout.fillWidth: true
+                        }
+
+                        QtControls.Button {
+                            icon.name: "exifinfo"
+                            onClicked: Qt.openUrlExternally("https://doc.qt.io/qt-5/qml-qtqml-qt.html#formatDateTime-method")
+                        }
+                    }
+                }
+
+                FontConfig {
+                    fontModel: fontsModel
+                    enabled: showDateDisplayCheckBox.checked
+
+                    colorValue: cfg_dateFontColor
+                    onColorValueChanged: {
+                        cfg_dateFontColor = colorValue
+                    }
+
+                    fontValue: cgf_dateFontFamily
+                    onFontValueChanged: {
+                        cfg_dateFontFamily = fontValue
+                    }
+
+                    boldValue: cfg_dateBoldText
+                    onBoldValueChanged: {
+                        cfg_dateBoldText = boldValue
+                    }
+
+                    italicValue: cfg_dateItalicText
+                    onItalicValueChanged: {
+                        cfg_dateItalicText = italicValue
+                    }
+
+                    pxSizeValue: cfg_dateFontSize
+                    onPxSizeValueChanged: {
+                        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
+            }
         }
     }
 }