diff --git a/dots/.config/quickshell/ii/modules/common/Config.qml b/dots/.config/quickshell/ii/modules/common/Config.qml index 9a29c53f3..4b4f54f92 100644 --- a/dots/.config/quickshell/ii/modules/common/Config.qml +++ b/dots/.config/quickshell/ii/modules/common/Config.qml @@ -186,7 +186,17 @@ 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 JsonObject font: JsonObject { + property string family: "Google Sans Flex" + property real weight: 350 + property real width: 100 + property real size: 90 + property real roundness: 0 + } } 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..edc63191a --- /dev/null +++ b/dots/.config/quickshell/ii/modules/common/widgets/ConfigSlider.qml @@ -0,0 +1,47 @@ +import qs.modules.common.widgets +import qs.modules.common +import QtQuick +import QtQuick.Layouts +import qs.services + +RowLayout { + id: root + spacing: 10 + Layout.leftMargin: 8 + Layout.rightMargin: 8 + + property string text: "" + property string buttonIcon: "" + property alias value: slider.value + property alias stopIndicatorValues: slider.stopIndicatorValues + property bool usePercentTooltip: true + property real from: slider.from + property real to: slider.to + property real textWidth: 120 + + RowLayout { + id: row + spacing: 10 + + OptionalMaterialSymbol { + id: iconWidget + icon: root.buttonIcon + iconSize: Appearance.font.pixelSize.larger + } + StyledText { + id: labelWidget + Layout.preferredWidth: root.textWidth + text: root.text + color: Appearance.colors.colOnSecondaryContainer + } + } + + StyledSlider { + id: slider + 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/ii/background/widgets/clock/ClockText.qml b/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockText.qml new file mode 100644 index 000000000..133a2759c --- /dev/null +++ b/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockText.qml @@ -0,0 +1,19 @@ +import qs.modules.common +import qs.modules.common.widgets +import QtQuick +import QtQuick.Layouts + +StyledText { + Layout.fillWidth: true + font { + family: Appearance.font.family.expressive + pixelSize: 20 + weight: 350 + // Set empty to prevent conflicts, not meaningless + styleName: "" + variableAxes: ({}) + } + 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..964755269 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,32 +63,9 @@ 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 { + colText: root.colText + textHorizontalAlignment: root.textHorizontalAlignment } } StatusRow { @@ -154,19 +131,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 @@ -190,6 +154,7 @@ AbstractBackgroundWidget { ClockText { id: statusTextWidget color: statusTextRow.textColor + horizontalAlignment: root.textHorizontalAlignment anchors.verticalCenter: statusTextRow.verticalCenter font { pixelSize: Appearance.font.pixelSize.large 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..d2a6f95d0 --- /dev/null +++ b/dots/.config/quickshell/ii/modules/ii/background/widgets/clock/DigitalClock.qml @@ -0,0 +1,69 @@ +pragma ComponentBehavior: Bound + +import qs.services +import qs.modules.common +import QtQuick +import QtQuick.Layouts + +ColumnLayout { + id: clockColumn + spacing: 4 + + property bool isVertical: Config.options.background.widgets.clock.digital.vertical + property color colText: Appearance.colors.colOnSecondaryContainer + property var textHorizontalAlignment: Text.AlignHCenter + + // Time + ClockText { + id: timeTextTop + text: clockColumn.isVertical ? DateTime.time.split(":")[0].padStart(2, "0") : DateTime.time + color: clockColumn.colText + horizontalAlignment: Text.AlignHCenter + font { + pixelSize: Config.options.background.widgets.clock.digital.font.size + weight: Config.options.background.widgets.clock.digital.font.weight + family: Config.options.background.widgets.clock.digital.font.family + variableAxes: ({ + "wdth": Config.options.background.widgets.clock.digital.font.width, + "ROND": Config.options.background.widgets.clock.digital.font.roundness + }) + } + } + + Loader { + Layout.topMargin: -40 + active: clockColumn.isVertical + visible: active + sourceComponent: ClockText { + id: timeTextBottom + text: DateTime.time.split(":")[1].split(" ")[0].padStart(2, "0") + color: clockColumn.colText + horizontalAlignment: Text.AlignHCenter + font { + pixelSize: timeTextTop.font.pixelSize + weight: timeTextTop.font.weight + family: timeTextTop.font.family + variableAxes: timeTextTop.font.variableAxes + } + } + } + + // Date + ClockText { + visible: Config.options.background.widgets.clock.digital.showDate + Layout.topMargin: -20 + text: DateTime.longDate + color: clockColumn.colText + horizontalAlignment: clockColumn.textHorizontalAlignment + } + + // Quote + ClockText { + visible: Config.options.background.widgets.clock.quote.enable && Config.options.background.widgets.clock.quote.text.length > 0 + font.pixelSize: Appearance.font.pixelSize.normal + text: Config.options.background.widgets.clock.quote.text + animateChange: false + color: clockColumn.colText + horizontalAlignment: clockColumn.textHorizontalAlignment + } +} diff --git a/dots/.config/quickshell/ii/modules/settings/BackgroundConfig.qml b/dots/.config/quickshell/ii/modules/settings/BackgroundConfig.qml index 66630cc24..b67e10409 100644 --- a/dots/.config/quickshell/ii/modules/settings/BackgroundConfig.qml +++ b/dots/.config/quickshell/ii/modules/settings/BackgroundConfig.qml @@ -53,9 +53,9 @@ ContentPage { } ContentSection { + id: settingsClock icon: "clock_loader_40" title: Translation.tr("Widget: Clock") - id: settingsClock function stylePresent(styleName) { if (!Config.options.background.widgets.clock.showOnlyWhenLocked && Config.options.background.widgets.clock.style === styleName) { @@ -120,61 +120,161 @@ 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" + } + ] + } } } ContentSubsection { visible: settingsClock.digitalPresent title: Translation.tr("Digital clock settings") + tooltip: Translation.tr("Font width and roundness settings are only available for some fonts like Google Sans Flex") - 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 { + uniform: true + 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 { + uniform: true + + 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.") + } + } + } + + MaterialTextArea { + Layout.fillWidth: true + placeholderText: Translation.tr("Font family") + text: Config.options.background.widgets.clock.digital.font.family + wrapMode: TextEdit.Wrap + onTextChanged: { + Config.options.background.widgets.clock.digital.font.family = text; + } + } + + ConfigSlider { + text: Translation.tr("Font weight") + value: Config.options.background.widgets.clock.digital.font.weight + usePercentTooltip: false + buttonIcon: "format_bold" + from: 1 + to: 1000 + stopIndicatorValues: [350] + onValueChanged: { + Config.options.background.widgets.clock.digital.font.weight = value; + } + } + + ConfigSlider { + text: Translation.tr("Font size") + value: Config.options.background.widgets.clock.digital.font.size + usePercentTooltip: false + buttonIcon: "format_size" + from: 70 + to: 150 + stopIndicatorValues: [90] + onValueChanged: { + Config.options.background.widgets.clock.digital.font.size = value; + } + } + + ConfigSlider { + text: Translation.tr("Font width") + value: Config.options.background.widgets.clock.digital.font.width + usePercentTooltip: false + buttonIcon: "fit_width" + from: 25 + to: 125 + stopIndicatorValues: [100] + onValueChanged: { + Config.options.background.widgets.clock.digital.font.width = value; + } + } + ConfigSlider { + text: Translation.tr("Font roundness") + value: Config.options.background.widgets.clock.digital.font.roundness + usePercentTooltip: false + buttonIcon: "line_curve" + from: 0 + to: 100 + onValueChanged: { + Config.options.background.widgets.clock.digital.font.roundness = value; } } }