From f0870e54cdad97fdf006e2e01b84b4987a6506e0 Mon Sep 17 00:00:00 2001 From: Aditya Mehra 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 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