From 533b9c01f53b0e1ec7112057d746013ca4147801 Mon Sep 17 00:00:00 2001 From: vaguesyntax Date: Fri, 28 Nov 2025 23:10:33 +0300 Subject: [PATCH] digital clock: several improvements --- .../quickshell/ii/modules/common/Config.qml | 5 + .../modules/common/widgets/ConfigSlider.qml | 42 +++++ .../modules/common/widgets/StyledSlider.qml | 3 +- .../ii/modules/common/widgets/StyledText.qml | 2 +- .../ii/background/widgets/clock/ClockText.qml | 18 +++ .../background/widgets/clock/ClockWidget.qml | 43 +----- .../background/widgets/clock/DigitalClock.qml | 74 +++++++++ .../ii/modules/settings/BackgroundConfig.qml | 146 ++++++++++++------ 8 files changed, 246 insertions(+), 87 deletions(-) create mode 100644 dots/.config/quickshell/ii/modules/common/widgets/ConfigSlider.qml create mode 100644 dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockText.qml create mode 100644 dots/.config/quickshell/ii/modules/ii/background/widgets/clock/DigitalClock.qml diff --git a/dots/.config/quickshell/ii/modules/common/Config.qml b/dots/.config/quickshell/ii/modules/common/Config.qml index 1716aa2ef..eb62d0955 100644 --- a/dots/.config/quickshell/ii/modules/common/Config.qml +++ b/dots/.config/quickshell/ii/modules/common/Config.qml @@ -186,7 +186,12 @@ Singleton { property bool useSineCookie: false } property JsonObject digital: JsonObject { + property bool adaptiveAlignment: true + property bool showDate: true property bool animateChange: true + property bool vertical: false + property real weight: 350 + property real size: 90 } property JsonObject quote: JsonObject { property bool enable: false diff --git a/dots/.config/quickshell/ii/modules/common/widgets/ConfigSlider.qml b/dots/.config/quickshell/ii/modules/common/widgets/ConfigSlider.qml new file mode 100644 index 000000000..b53a5f7c0 --- /dev/null +++ b/dots/.config/quickshell/ii/modules/common/widgets/ConfigSlider.qml @@ -0,0 +1,42 @@ +import qs.modules.common.widgets +import qs.modules.common +import QtQuick +import QtQuick.Layouts + +RowLayout { + id: root + spacing: 10 + Layout.leftMargin: 8 + Layout.rightMargin: 8 + + property string text: "" + property string buttonIcon: "" + property alias value: slider.value + property bool usePercentTooltip: true + property real from: slider.from + property real to: slider.to + + RowLayout { + spacing: 10 + OptionalMaterialSymbol { + id: iconWidget + icon: root.buttonIcon + iconSize: Appearance.font.pixelSize.larger + } + StyledText { + id: labelWidget + text: root.text + color: Appearance.colors.colOnSecondaryContainer + } + } + + StyledSlider { + id: slider + Layout.fillWidth: true + configuration: StyledSlider.Configuration.XS + usePercentTooltip: root.usePercentTooltip + value: root.value + from: root.from + to: root.to + } +} \ No newline at end of file diff --git a/dots/.config/quickshell/ii/modules/common/widgets/StyledSlider.qml b/dots/.config/quickshell/ii/modules/common/widgets/StyledSlider.qml index 98b8eebf3..971a1eb10 100644 --- a/dots/.config/quickshell/ii/modules/common/widgets/StyledSlider.qml +++ b/dots/.config/quickshell/ii/modules/common/widgets/StyledSlider.qml @@ -46,7 +46,8 @@ Slider { property real handleWidth: root.pressed ? handlePressedWidth : handleDefaultWidth property real handleMargins: 4 property real trackDotSize: 3 - property string tooltipContent: `${Math.round(value * 100)}%` + property bool usePercentTooltip: true + property string tooltipContent: usePercentTooltip ? `${Math.round(((value - from) / (to - from)) * 100)}%` : `${Math.round(value)}` property bool wavy: configuration === StyledSlider.Configuration.Wavy // If true, the progress bar will have a wavy fill effect property bool animateWave: true property real waveAmplitudeMultiplier: wavy ? 0.5 : 0 diff --git a/dots/.config/quickshell/ii/modules/common/widgets/StyledText.qml b/dots/.config/quickshell/ii/modules/common/widgets/StyledText.qml index 14f6a9c23..f705fc2a4 100644 --- a/dots/.config/quickshell/ii/modules/common/widgets/StyledText.qml +++ b/dots/.config/quickshell/ii/modules/common/widgets/StyledText.qml @@ -16,7 +16,7 @@ Text { hintingPreference: Font.PreferDefaultHinting family: defaultFont pixelSize: Appearance?.font.pixelSize.small ?? 15 - variableAxes: shouldUseNumberFont ? ({}) : Appearance.font.variableAxes.main + //variableAxes: shouldUseNumberFont ? ({}) : Appearance.font.variableAxes.main } color: Appearance?.m3colors.m3onBackground ?? "black" linkColor: Appearance?.m3colors.m3primary diff --git a/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockText.qml b/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockText.qml new file mode 100644 index 000000000..b3f44fbd8 --- /dev/null +++ b/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockText.qml @@ -0,0 +1,18 @@ +import qs.modules.common +import qs.modules.common.widgets +import QtQuick +import QtQuick.Layouts + +StyledText { + Layout.fillWidth: true + horizontalAlignment: root.textHorizontalAlignment + font { + family: Appearance.font.family.expressive + pixelSize: 20 + weight: 350 + } + color: root.colText + style: Text.Raised + styleColor: Appearance.colors.colShadow + animateChange: Config.options.background.widgets.clock.digital.animateChange +} \ No newline at end of file diff --git a/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockWidget.qml b/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockWidget.qml index 97e1e468a..82556a3ed 100644 --- a/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockWidget.qml +++ b/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockWidget.qml @@ -26,7 +26,7 @@ AbstractBackgroundWidget { visibleWhenLocked: true property var textHorizontalAlignment: { - if (root.forceCenter) + if (!Config.options.background.widgets.clock.digital.adaptiveAlignment || root.forceCenter) return Text.AlignHCenter; if (root.x < root.scaledScreenWidth / 3) return Text.AlignLeft; @@ -63,33 +63,7 @@ AbstractBackgroundWidget { anchors.horizontalCenter: parent.horizontalCenter shown: root.clockStyle === "digital" && (root.shouldShow) fade: false - sourceComponent: ColumnLayout { - id: clockColumn - spacing: 6 - - ClockText { - font.pixelSize: 90 - text: DateTime.time - } - ClockText { - Layout.topMargin: -5 - text: DateTime.longDate - } - StyledText { - // Somehow gets fucked up if made a ClockText??? - visible: Config.options.background.widgets.clock.quote.enable && Config.options.background.widgets.clock.quote.text.length > 0 - Layout.fillWidth: true - horizontalAlignment: root.textHorizontalAlignment - font { - pixelSize: Appearance.font.pixelSize.normal - weight: 350 - } - color: root.colText - style: Text.Raised - styleColor: Appearance.colors.colShadow - text: Config.options.background.widgets.clock.quote.text - } - } + sourceComponent: DigitalClock {} } StatusRow { anchors.horizontalCenter: parent.horizontalCenter @@ -154,19 +128,6 @@ AbstractBackgroundWidget { } } - component ClockText: StyledText { - Layout.fillWidth: true - horizontalAlignment: root.textHorizontalAlignment - font { - family: Appearance.font.family.expressive - pixelSize: 20 - weight: Font.DemiBold - } - color: root.colText - style: Text.Raised - styleColor: Appearance.colors.colShadow - animateChange: Config.options.background.widgets.clock.digital.animateChange - } component ClockStatusText: Row { id: statusTextRow property alias statusIcon: statusIconWidget.text diff --git a/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/DigitalClock.qml b/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/DigitalClock.qml new file mode 100644 index 000000000..1d4e92f21 --- /dev/null +++ b/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/DigitalClock.qml @@ -0,0 +1,74 @@ +pragma ComponentBehavior: Bound + +//TODO: fix imports to only what is necessary +import qs.services +import qs.modules.common +import qs.modules.common.widgets +import qs.modules.common.functions +import QtQuick +import QtQuick.Layouts +import Qt5Compat.GraphicalEffects +import Quickshell.Io + +ColumnLayout { + id: clockColumn + spacing: 6 + + property bool isVertical: Config.options.background.widgets.clock.digital.vertical + + Item { + Layout.fillWidth: true + implicitHeight: timeTextTop.font.pixelSize + (clockColumn.isVertical ? timeTextBottom.font.pixelSize + 10 : 0) + implicitWidth: Math.max(timeTextTop.paintedWidth, timeTextBottom.paintedWidth) + + ClockText { + id: timeTextTop + text: clockColumn.isVertical ? DateTime.time.substring(0, 2) : DateTime.time + anchors { + top: parent.top + horizontalCenter: parent.horizontalCenter + } + font { + pixelSize: Config.options.background.widgets.clock.digital.size + weight: Config.options.background.widgets.clock.digital.weight + } + } + ClockText { + id: timeTextBottom + text: clockColumn.isVertical ? DateTime.time.substring(3, 5) : "" + visible: clockColumn.isVertical + + anchors { + bottom: parent.bottom + horizontalCenter: parent.horizontalCenter + } + font { + pixelSize: Config.options.background.widgets.clock.digital.size + weight: Config.options.background.widgets.clock.digital.weight + } + } + } + + ClockText { + visible: Config.options.background.widgets.clock.digital.showDate + Layout.topMargin: clockColumn.isVertical ? -10 : 0 + text: DateTime.longDate + } + StyledText { + // Somehow gets fucked up if made a ClockText??? + visible: Config.options.background.widgets.clock.quote.enable && Config.options.background.widgets.clock.quote.text.length > 0 + Layout.fillWidth: true + horizontalAlignment: root.textHorizontalAlignment + font { + pixelSize: Appearance.font.pixelSize.normal + weight: 350 + } + color: root.colText + style: Text.Raised + styleColor: Appearance.colors.colShadow + text: Config.options.background.widgets.clock.quote.text + } +} + + + \ No newline at end of file diff --git a/dots/.config/quickshell/ii/modules/settings/BackgroundConfig.qml b/dots/.config/quickshell/ii/modules/settings/BackgroundConfig.qml index 66630cc24..18c30853e 100644 --- a/dots/.config/quickshell/ii/modules/settings/BackgroundConfig.qml +++ b/dots/.config/quickshell/ii/modules/settings/BackgroundConfig.qml @@ -120,48 +120,52 @@ ContentPage { } } - ContentSubsection { - visible: !Config.options.background.widgets.clock.showOnlyWhenLocked - title: Translation.tr("Clock style") - ConfigSelectionArray { - currentValue: Config.options.background.widgets.clock.style - onSelected: newValue => { - Config.options.background.widgets.clock.style = newValue; - } - options: [ - { - displayName: Translation.tr("Digital"), - icon: "timer_10", - value: "digital" - }, - { - displayName: Translation.tr("Cookie"), - icon: "cookie", - value: "cookie" + ConfigRow { + ContentSubsection { + visible: !Config.options.background.widgets.clock.showOnlyWhenLocked + title: Translation.tr("Clock style") + Layout.fillWidth: true + ConfigSelectionArray { + currentValue: Config.options.background.widgets.clock.style + onSelected: newValue => { + Config.options.background.widgets.clock.style = newValue; } - ] + options: [ + { + displayName: Translation.tr("Digital"), + icon: "timer_10", + value: "digital" + }, + { + displayName: Translation.tr("Cookie"), + icon: "cookie", + value: "cookie" + } + ] + } } - } - ContentSubsection { - title: Translation.tr("Clock style (locked)") - ConfigSelectionArray { - currentValue: Config.options.background.widgets.clock.styleLocked - onSelected: newValue => { - Config.options.background.widgets.clock.styleLocked = newValue; - } - options: [ - { - displayName: Translation.tr("Digital"), - icon: "timer_10", - value: "digital" - }, - { - displayName: Translation.tr("Cookie"), - icon: "cookie", - value: "cookie" + ContentSubsection { + title: Translation.tr("Clock style (locked)") + Layout.fillWidth: false + ConfigSelectionArray { + currentValue: Config.options.background.widgets.clock.styleLocked + onSelected: newValue => { + Config.options.background.widgets.clock.styleLocked = newValue; } - ] + options: [ + { + displayName: Translation.tr("Digital"), + icon: "timer_10", + value: "digital" + }, + { + displayName: Translation.tr("Cookie"), + icon: "cookie", + value: "cookie" + } + ] + } } } @@ -169,12 +173,66 @@ ContentPage { visible: settingsClock.digitalPresent title: Translation.tr("Digital clock settings") - ConfigSwitch { - buttonIcon: "animation" - text: Translation.tr("Animate time change") - checked: Config.options.background.widgets.clock.digital.animateChange - onCheckedChanged: { - Config.options.background.widgets.clock.digital.animateChange = checked; + ConfigRow { + ConfigSwitch { + buttonIcon: "vertical_distribute" + text: Translation.tr("Vertical") + checked: Config.options.background.widgets.clock.digital.vertical + onCheckedChanged: { + Config.options.background.widgets.clock.digital.vertical = checked; + } + } + ConfigSwitch { + buttonIcon: "animation" + text: Translation.tr("Animate time change") + checked: Config.options.background.widgets.clock.digital.animateChange + onCheckedChanged: { + Config.options.background.widgets.clock.digital.animateChange = checked; + } + } + } + + ConfigRow { + ConfigSwitch { + buttonIcon: "date_range" + text: Translation.tr("Show date") + checked: Config.options.background.widgets.clock.digital.showDate + onCheckedChanged: { + Config.options.background.widgets.clock.digital.showDate = checked; + } + } + ConfigSwitch { + buttonIcon: "activity_zone" + text: Translation.tr("Use adaptive alignment") + checked: Config.options.background.widgets.clock.digital.adaptiveAlignment + onCheckedChanged: { + Config.options.background.widgets.clock.digital.adaptiveAlignment = checked; + } + StyledToolTip { + text: Translation.tr("Aligns the date and quote to left, center or right depending on its position on the screen.") + } + } + } + ConfigSlider { + text: Translation.tr("Font weight") + value: Config.options.background.widgets.clock.digital.weight + usePercentTooltip: false + buttonIcon: "format_bold" + from: 1 + to: 1000 + onValueChanged: { + Config.options.background.widgets.clock.digital.weight = value; + } + } + ConfigSlider { + text: Translation.tr("Font Size") + value: Config.options.background.widgets.clock.digital.size + usePercentTooltip: false + buttonIcon: "format_size" + from: 70 + to: 150 + onValueChanged: { + Config.options.background.widgets.clock.digital.size = value; } } }