mirror of
https://github.com/OpenVoiceOS/OpenVoiceOS
synced 2024-12-13 09:27:30 +01:00
Fix the date UI text overflow issue
This commit is contained in:
j1nx
parent
a77eac5a1e
commit
a3032d219f
@ -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
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user