OpenVoiceOS/buildroot-external/package/mycroft-skill-date-time/0001-PR113.patch

From f0870e54cdad97fdf006e2e01b84b4987a6506e0 Mon Sep 17 00:00:00 2001
From: Aditya Mehra <aix.m@outlook.com>
Date: Fri, 30 Apr 2021 14:42:43 +0530
Subject: [PATCH 1/2] refactor to using card delegate and fix graphics

---
 ui/date.qml | 132 +++++++++++++++++++++++++++++++---------------------
 1 file changed, 79 insertions(+), 53 deletions(-)

diff --git a/ui/date.qml b/ui/date.qml
index a405d66..38d172c 100644
--- a/ui/date.qml
+++ b/ui/date.qml
@@ -2,73 +2,99 @@ import QtQuick.Layouts 1.4
 import QtQuick 2.4
 import QtQuick.Controls 2.0
 import org.kde.kirigami 2.4 as Kirigami
-
 import Mycroft 1.0 as Mycroft
+import QtGraphicalEffects 1.0
+
+Mycroft.CardDelegate {
+    id: dateRoot
+    topInset: Mycroft.Units.gridUnit / 2
+    bottomInset: Mycroft.Units.gridUnit / 2
 
-Mycroft.Delegate {
-    skillBackgroundColorOverlay: Qt.rgba(0, 0, 0, 1)
-    
     ColumnLayout {
         id: grid
-        Layout.fillWidth: true
-        anchors.centerIn: parent
+        anchors.fill: parent
+        spacing: 0
 
         /* Put the day of the week at the top of the screen */
-        Label {
-            id: weekday
-            Layout.alignment: Qt.AlignHCenter
-            font.pixelSize: 65
-            wrapMode: Text.WordWrap
-            renderType: Text.NativeRendering
-            font.family: "Noto Sans Display"
-            font.styleName: "Black"
-            font.capitalization: Font.AllUppercase
-            text: sessionData.weekday_string
-            color: "white"
+        Item { 
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.fillWidth: true
+            Layout.preferredHeight: parent.height / 6
+            
+            Label {
+                id: weekday
+                anchors.centerIn: parent
+                font.pixelSize: parent.height
+                wrapMode: Text.WordWrap
+                renderType: Text.NativeRendering
+                font.family: "Noto Sans Display"
+                font.styleName: "Black"
+                font.capitalization: Font.AllUppercase
+                text: sessionData.weekday_string
+                color: "white"
+            }
         }
 
         /* Add some spacing between the day of week and the calendar graphic */
         Item {
-            height: Kirigami.Units.largeSpacing
+            height: Mycroft.Units.gridUnit / 2
         }
-
+        
         /* Calendar graphic */
-        Image {
-            id: image
-            source: Qt.resolvedUrl("img/date-bg.svg")
-
-            /*  The top part of the calendar graphic containing the month */
-            Image {
-                id: calendartop
-                x: 0
-                width: parent.width
-                fillMode: Image.PreserveAspectFit
-                anchors.top: parent.bottom
-                anchors.topMargin: -(parent.height + 1)
-                source: Qt.resolvedUrl("img/date-top.svg")
-                Label {
-                    id: month
-                    anchors.centerIn: parent
-                    font.pixelSize: 60
-                    wrapMode: Text.WordWrap
-                    font.family: "Noto Sans Display"
-                    font.bold: true
-                    text: sessionData.month_string.split(" ")[0]
-                    color: "white"
+        Item {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: Mycroft.Units.gridUnit * 25.5
+            Layout.preferredHeight: Mycroft.Units.gridUnit * 19.25
+            
+            /* Use Rectangles Instead of Graphics For Proper Scaling of Graphics Items*/
+            Rectangle {
+                id: outterRectangle
+                anchors.fill: parent
+                radius: 30
+                Item {
+                    id: date
+                    anchors.fill: parent
+                    anchors.topMargin: Mycroft.Units.gridUnit * 5.5
+                    
+                    /* The day of the month goes in the calendar graphic under the month */
+                    Label {
+                        anchors.centerIn: parent
+                        font.pixelSize: parent.height
+                        wrapMode: Text.WordWrap
+                        font.family: "Noto Sans Display"
+                        font.styleName: "Bold"
+                        text: sessionData.month_string.split(" ")[1]
+                        color: "#2C3E50"
+                    }
                 }
             }
-
-            /* The day of the month goes in the calendar graphic under the month */
-            Label {
-                id: date
-                anchors.centerIn: parent
-                anchors.verticalCenterOffset: calendartop.height / 2
-                font.pixelSize: 230
-                wrapMode: Text.WordWrap
-                font.family: "Noto Sans Display"
-                font.bold: true
-                text: sessionData.month_string.split(" ")[1]
-                color: "#2C3E50"
+            
+            
+            Item {
+                anchors.fill: outterRectangle
+                layer.enabled: true
+                layer.effect: OpacityMask {
+                    maskSource: outterRectangle
+                }            
+                Rectangle {
+                    id: innerRectangle
+                    width: Mycroft.Units.gridUnit * 25.5
+                    height: Mycroft.Units.gridUnit * 5.5
+                    clip: true
+                    color: "#22A7F0"
+                    
+                    /*  The top part of the calendar graphic containing the month */
+                    Label {
+                        id: month
+                        anchors.centerIn: parent
+                        font.pixelSize: parent.height * 0.65
+                        wrapMode: Text.WordWrap
+                        font.family: "Noto Sans Display"
+                        font.styleName: "Bold"
+                        text: sessionData.month_string.split(" ")[0]
+                        color: "white"
+                    }
+                }
             }
         }
     }

From 5c77fd3a3aba5cbbc45845d2c87566737bec2ac8 Mon Sep 17 00:00:00 2001
From: Aditya Mehra <aix.m@outlook.com>
Date: Fri, 30 Apr 2021 14:51:22 +0530
Subject: [PATCH 2/2] Refactor date ui to use card delegate and fix graphics

---
 ui/date.qml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/date.qml b/ui/date.qml
index 38d172c..ad6d70d 100644
--- a/ui/date.qml
+++ b/ui/date.qml
@@ -37,12 +37,12 @@ Mycroft.CardDelegate {
 
         /* Add some spacing between the day of week and the calendar graphic */
         Item {
-            height: Mycroft.Units.gridUnit / 2
+            Layout.preferredHeight: Mycroft.Units.gridUnit / 2
         }
         
         /* Calendar graphic */
         Item {
-            Layout.alignment: Qt.AlignHCenter
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
             Layout.preferredWidth: Mycroft.Units.gridUnit * 25.5
             Layout.preferredHeight: Mycroft.Units.gridUnit * 19.25