rixty/OpenVoiceOS
1
1
Fork 0
mirror of https://github.com/OpenVoiceOS/OpenVoiceOS synced 2024-12-12 17:10:33 +01:00
Code Issues Releases Wiki Activity

Fix the date UI text overflow issue

Browse Source
This commit is contained in:
j1nx 2021-05-01 10:17:13 +02:00
parent a77eac5a1e
commit a3032d219f
1 changed files with 195 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
buildroot-external/package/mycroft-skill-date-time/0001-PR113.patch Normal file
View File

@ -0,0 +1,195 @@
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