updated clock module: added animations and removed redundancies

widgets/bgDate/BgDate.qml

@@ -14,32 +14,93 @@ PanelWindow {
     WlrLayershell.exclusiveZone: -1
     mask: Region {}
 
-    property string dateString: ""
+    property string fullDateString: ""
+    property int    typedChars:     0
+    property string secondsString:  ""
+
+    function startTyping() {
+        typedChars         = 0;
+        secondsText.opacity = 0;
+        typingTimer.start();
+    }
 
     function updateDate() {
         let d = new Date();
-        dateString = d.toLocaleDateString(Qt.locale(), "dddd, d MMMM yyyy"); 
+        fullDateString = d.toLocaleDateString(Qt.locale(), "dddd, d MMMM yyyy");
+        startTyping();
     }
 
-    Component.onCompleted: updateDate()
+    function updateSeconds() {
+        let d = new Date();
+        secondsString = Qt.formatTime(d, "hh:mm:ss");
+    }
 
-    Text {
-        id: dateText
+    Component.onCompleted: {
+        updateSeconds();
+        updateDate();
+    }
+
+    Column {
         anchors.centerIn: parent
-        color:      Cfg.Config.theme.clockText
-        styleColor: Cfg.Config.theme.clockShadow
-        font.pixelSize: 64
-        font.weight: Font.ExtraLight
-        font.letterSpacing: 4
-        opacity: 0.55
-        style: Text.DropShadow
-        text: dateString
+        spacing: 10
+
+        Text {
+            id: dateText
+            anchors.horizontalCenter: parent.horizontalCenter
+            color:          Cfg.Config.theme.bgDateText
+            styleColor:     Cfg.Config.theme.bgDateShadow
+            font.pixelSize: 64
+            font.weight:    Font.ExtraLight
+            font.letterSpacing: 4
+            opacity: 0.55
+            style: Text.DropShadow
+            text: fullDateString.substring(0, typedChars)
+        }
+
+        Text {
+            id: secondsText
+            anchors.horizontalCenter: parent.horizontalCenter
+            color:          Cfg.Config.theme.bgDateSecondsText
+            styleColor:     Cfg.Config.theme.bgDateShadow
+            font.pixelSize: 22
+            font.weight:    Font.ExtraLight
+            font.letterSpacing: 6
+            opacity: 0
+            style: Text.DropShadow
+            text: secondsString
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 700
+                    easing.type: Easing.InOutQuad
+                }
+            }
+        }
     }
 
     Timer {
-        interval: 60000 
+        id: typingTimer
+        interval: 55
+        repeat: true
+        onTriggered: {
+            if (typedChars < fullDateString.length) {
+                typedChars++;
+            } else {
+                stop();
+                secondsText.opacity = 0.55;
+            }
+        }
+    }
+
+    Timer {
+        interval: 1000
         running: true
         repeat: true
-        onTriggered: updateDate()
+        onTriggered: {
+            updateSeconds();
+            let d = new Date();
+            if (d.getSeconds() === 0 && d.getMinutes() === 0 && d.getHours() === 0)
+                updateDate();
+        }
     }
 }