From fd1165f1530b55c0751f8af7475d0c588b11488c Mon Sep 17 00:00:00 2001 From: Ezekiel Gonzales <141341590+notsoeazy@users.noreply.github.com> Date: Sat, 17 Jan 2026 22:19:53 +0800 Subject: background: redesign desktop clock and allow positioning (#1092) * background(desktop clock): Redesigned the Desktop Clock and allow positioning and scaling * desktopClock: initial fix for contrast and added debug tool * fix properties * fix BackgroundConfig.qml for desktopClock * removed debugging tool and applied maintainer suggestions * added invert colors, opacity, and fix positioning * added blur, fix layout, allow invert colors * added implicitWidth behavior and small change --- modules/background/DesktopClock.qml | 165 +++++++++++++++++++++++++++++++++--- 1 file changed, 155 insertions(+), 10 deletions(-) (limited to 'modules/background/DesktopClock.qml') diff --git a/modules/background/DesktopClock.qml b/modules/background/DesktopClock.qml index 2de325c..a6b05c2 100644 --- a/modules/background/DesktopClock.qml +++ b/modules/background/DesktopClock.qml @@ -1,19 +1,164 @@ +pragma ComponentBehavior: Bound + import qs.components import qs.services import qs.config import QtQuick +import QtQuick.Layouts +import QtQuick.Effects Item { - implicitWidth: timeText.implicitWidth + Appearance.padding.large * 2 - implicitHeight: timeText.implicitHeight + Appearance.padding.large * 2 + id: root + + required property Item wallpaper + required property real absX + required property real absY + + property real scale: Config.background.desktopClock.scale + readonly property bool bgEnabled: Config.background.desktopClock.background.enabled + readonly property bool blurEnabled: bgEnabled && Config.background.desktopClock.background.blur + readonly property bool invertColors: Config.background.desktopClock.invertColors + readonly property bool useLightSet: Colours.light ? !invertColors : invertColors + readonly property color safePrimary: useLightSet ? Colours.palette.m3primaryContainer : Colours.palette.m3primary + readonly property color safeSecondary: useLightSet ? Colours.palette.m3secondaryContainer : Colours.palette.m3secondary + readonly property color safeTertiary: useLightSet ? Colours.palette.m3tertiaryContainer : Colours.palette.m3tertiary + + implicitWidth: layout.implicitWidth + (Appearance.padding.large * 4 * root.scale) + implicitHeight: layout.implicitHeight + (Appearance.padding.large * 2 * root.scale) + + Item { + id: clockContainer + + anchors.fill: parent + + layer.enabled: Config.background.desktopClock.shadow.enabled + layer.effect: MultiEffect { + shadowEnabled: true + shadowColor: Colours.palette.m3shadow + shadowOpacity: Config.background.desktopClock.shadow.opacity + shadowBlur: Config.background.desktopClock.shadow.blur + } + + Loader { + anchors.fill: parent + active: root.blurEnabled + + sourceComponent: MultiEffect { + source: ShaderEffectSource { + sourceItem: root.wallpaper + sourceRect: Qt.rect(root.absX, root.absY, root.width, root.height) + } + maskSource: backgroundPlate + maskEnabled: true + blurEnabled: true + blur: 1 + blurMax: 64 + autoPaddingEnabled: false + } + } + + StyledRect { + id: backgroundPlate + + visible: root.bgEnabled + anchors.fill: parent + radius: Appearance.rounding.large * root.scale + opacity: Config.background.desktopClock.background.opacity + color: Colours.palette.m3surface + + layer.enabled: root.blurEnabled + } + + RowLayout { + id: layout - StyledText { - id: timeText + anchors.centerIn: parent + spacing: Appearance.spacing.larger * root.scale - anchors.centerIn: parent - text: Time.format(Config.services.useTwelveHourClock ? "hh:mm:ss A" : "hh:mm:ss") - font.family: Appearance.font.family.clock - font.pointSize: Appearance.font.size.extraLarge - font.bold: true + RowLayout { + spacing: Appearance.spacing.small + + StyledText { + text: Time.format(Config.services.useTwelveHourClock ? "hh" : "HH") + font.pointSize: Appearance.font.size.extraLarge * 3 * root.scale + font.weight: Font.Bold + color: root.safePrimary + } + + StyledText { + text: ":" + font.pointSize: Appearance.font.size.extraLarge * 3 * root.scale + color: root.safeTertiary + opacity: 0.8 + Layout.topMargin: -Appearance.padding.large * 1.5 * root.scale + } + + StyledText { + text: Time.format("mm") + font.pointSize: Appearance.font.size.extraLarge * 3 * root.scale + font.weight: Font.Bold + color: root.safeSecondary + } + + StyledText { + visible: Config.services.useTwelveHourClock + text: Time.format("A") + font.pointSize: Appearance.font.size.large * root.scale + color: root.safeSecondary + Layout.alignment: Qt.AlignTop + Layout.topMargin: Appearance.padding.large * 1.4 * root.scale + } + } + + StyledRect { + Layout.fillHeight: true + Layout.preferredWidth: 4 * root.scale + Layout.topMargin: Appearance.spacing.larger * root.scale + Layout.bottomMargin: Appearance.spacing.larger * root.scale + radius: Appearance.rounding.full + color: root.safePrimary + opacity: 0.8 + } + + ColumnLayout { + spacing: 0 + + StyledText { + text: Time.format("MMMM").toUpperCase() + font.pointSize: Appearance.font.size.large * root.scale + font.letterSpacing: 4 + font.weight: Font.Bold + color: root.safeSecondary + } + + StyledText { + text: Time.format("dd") + font.pointSize: Appearance.font.size.extraLarge * root.scale + font.letterSpacing: 2 + font.weight: Font.Medium + color: root.safePrimary + } + + StyledText { + text: Time.format("dddd") + font.pointSize: Appearance.font.size.larger * root.scale + font.letterSpacing: 2 + color: root.safeSecondary + } + } + } + } + + Behavior on scale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial + } + } + + Behavior on implicitWidth { + Anim { + duration: Appearance.anim.durations.small + } } -} +} \ No newline at end of file -- cgit v1.2.3-freya