From 146aeb7e7402755da4c8b2d33f4309c7b5cb603e Mon Sep 17 00:00:00 2001 From: Ezekiel Gonzales <141341590+notsoeazy@users.noreply.github.com> Date: Mon, 19 Jan 2026 12:25:02 +0800 Subject: controlcenter: add desktopClock configurations (#1097) * controlCenter: Added desktopClock configurations * fix dropdown overlay & animation --------- Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> --- components/controls/SplitButtonRow.qml | 62 +++++++ .../controlcenter/appearance/AppearancePane.qml | 18 ++ .../appearance/sections/BackgroundSection.qml | 200 ++++++++++++++++++++- 3 files changed, 276 insertions(+), 4 deletions(-) create mode 100644 components/controls/SplitButtonRow.qml diff --git a/components/controls/SplitButtonRow.qml b/components/controls/SplitButtonRow.qml new file mode 100644 index 0000000..4ecc8bf --- /dev/null +++ b/components/controls/SplitButtonRow.qml @@ -0,0 +1,62 @@ +pragma ComponentBehavior: Bound + +import ".." +import qs.components +import qs.components.effects +import qs.services +import qs.config +import QtQuick +import QtQuick.Layouts + +StyledRect { + id: root + + required property string label + property int expandedZ: 100 + property bool enabled: true + + property alias menuItems: splitButton.menuItems + property alias active: splitButton.active + property alias expanded: splitButton.expanded + property alias type: splitButton.type + + signal selected(item: MenuItem) + + Layout.fillWidth: true + implicitHeight: row.implicitHeight + Appearance.padding.large * 2 + radius: Appearance.rounding.normal + color: Colours.layer(Colours.palette.m3surfaceContainer, 2) + + clip: false + z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1 + opacity: enabled ? 1.0 : 0.5 + + RowLayout { + id: row + anchors.fill: parent + anchors.margins: Appearance.padding.large + spacing: Appearance.spacing.normal + + StyledText { + Layout.fillWidth: true + text: root.label + color: root.enabled ? Colours.palette.m3onSurface : Colours.palette.m3onSurfaceVariant + } + + SplitButton { + id: splitButton + enabled: root.enabled + type: SplitButton.Filled + + menu.z: 1 + + stateLayer.onClicked: { + splitButton.expanded = !splitButton.expanded + } + + menu.onItemSelected: (item) => { + root.selected(item); + } + } + } +} diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml index 257120b..218433b 100644 --- a/modules/controlcenter/appearance/AppearancePane.qml +++ b/modules/controlcenter/appearance/AppearancePane.qml @@ -38,6 +38,15 @@ Item { property real borderThickness: Config.border.thickness ?? 1 property bool desktopClockEnabled: Config.background.desktopClock.enabled ?? false + property real desktopClockScale: Config.background.desktopClock.scale ?? 1 + property string desktopClockPosition: Config.background.desktopClock.position ?? "bottom-right" + property bool desktopClockShadowEnabled: Config.background.desktopClock.shadow.enabled ?? true + property real desktopClockShadowOpacity: Config.background.desktopClock.shadow.opacity ?? 0.7 + property real desktopClockShadowBlur: Config.background.desktopClock.shadow.blur ?? 0.4 + property bool desktopClockBackgroundEnabled: Config.background.desktopClock.background.enabled ?? false + property real desktopClockBackgroundOpacity: Config.background.desktopClock.background.opacity ?? 0.7 + property bool desktopClockBackgroundBlur: Config.background.desktopClock.background.blur ?? false + property bool desktopClockInvertColors: Config.background.desktopClock.invertColors ?? false property bool backgroundEnabled: Config.background.enabled ?? true property bool visualiserEnabled: Config.background.visualiser.enabled ?? false property bool visualiserAutoHide: Config.background.visualiser.autoHide ?? true @@ -64,6 +73,15 @@ Item { Config.background.desktopClock.enabled = root.desktopClockEnabled; Config.background.enabled = root.backgroundEnabled; + Config.background.desktopClock.scale = root.desktopClockScale + Config.background.desktopClock.position = root.desktopClockPosition + Config.background.desktopClock.shadow.enabled = root.desktopClockShadowEnabled + Config.background.desktopClock.shadow.opacity = root.desktopClockShadowOpacity + Config.background.desktopClock.shadow.blur = root.desktopClockShadowBlur + Config.background.desktopClock.background.enabled = root.desktopClockBackgroundEnabled + Config.background.desktopClock.background.opacity = root.desktopClockBackgroundOpacity + Config.background.desktopClock.background.blur = root.desktopClockBackgroundBlur + Config.background.desktopClock.invertColors = root.desktopClockInvertColors Config.background.visualiser.enabled = root.visualiserEnabled; Config.background.visualiser.autoHide = root.visualiserAutoHide; diff --git a/modules/controlcenter/appearance/sections/BackgroundSection.qml b/modules/controlcenter/appearance/sections/BackgroundSection.qml index 8754e73..d5c16d4 100644 --- a/modules/controlcenter/appearance/sections/BackgroundSection.qml +++ b/modules/controlcenter/appearance/sections/BackgroundSection.qml @@ -19,7 +19,23 @@ CollapsibleSection { showBackground: true SwitchRow { - label: qsTr("Desktop clock") + label: qsTr("Background enabled") + checked: rootPane.backgroundEnabled + onToggled: checked => { + rootPane.backgroundEnabled = checked; + rootPane.saveConfig(); + } + } + + StyledText { + Layout.topMargin: Appearance.spacing.normal + text: qsTr("Desktop Clock") + font.pointSize: Appearance.font.size.larger + font.weight: 500 + } + + SwitchRow { + label: qsTr("Desktop Clock enabled") checked: rootPane.desktopClockEnabled onToggled: checked => { rootPane.desktopClockEnabled = checked; @@ -27,15 +43,191 @@ CollapsibleSection { } } + SectionContainer { + id: posContainer + + contentSpacing: Appearance.spacing.small + z: 1 + + readonly property var pos: (rootPane.desktopClockPosition || "top-left").split('-') + readonly property string currentV: pos[0] + readonly property string currentH: pos[1] + + function updateClockPos(v, h) { + rootPane.desktopClockPosition = v + "-" + h; + rootPane.saveConfig(); + } + + StyledText { + text: qsTr("Positioning") + font.pointSize: Appearance.font.size.larger + font.weight: 500 + } + + SplitButtonRow { + label: qsTr("Vertical Position") + enabled: rootPane.desktopClockEnabled + + menuItems: [ + MenuItem { text: qsTr("Top"); icon: "vertical_align_top"; property string val: "top" }, + MenuItem { text: qsTr("Middle"); icon: "vertical_align_center"; property string val: "middle" }, + MenuItem { text: qsTr("Bottom"); icon: "vertical_align_bottom"; property string val: "bottom" } + ] + + Component.onCompleted: { + for(let i=0; i < menuItems.length; i++) { + if(menuItems[i].val === posContainer.currentV) active = menuItems[i]; + } + } + + // The signal from SplitButtonRow + onSelected: item => posContainer.updateClockPos(item.val, posContainer.currentH) + } + + SplitButtonRow { + label: qsTr("Horizontal Position") + enabled: rootPane.desktopClockEnabled + expandedZ: 99 + + menuItems: [ + MenuItem { text: qsTr("Left"); icon: "align_horizontal_left"; property string val: "left" }, + MenuItem { text: qsTr("Center"); icon: "align_horizontal_center"; property string val: "center" }, + MenuItem { text: qsTr("Right"); icon: "align_horizontal_right"; property string val: "right" } + ] + + Component.onCompleted: { + for(let i=0; i < menuItems.length; i++) { + if(menuItems[i].val === posContainer.currentH) active = menuItems[i]; + } + } + + onSelected: item => posContainer.updateClockPos(posContainer.currentV, item.val) + } + } + SwitchRow { - label: qsTr("Background enabled") - checked: rootPane.backgroundEnabled + label: qsTr("Invert colors") + checked: rootPane.desktopClockInvertColors onToggled: checked => { - rootPane.backgroundEnabled = checked; + rootPane.desktopClockInvertColors = checked; rootPane.saveConfig(); } } + SectionContainer { + contentSpacing: Appearance.spacing.small + + StyledText { + text: qsTr("Shadow") + font.pointSize: Appearance.font.size.larger + font.weight: 500 + } + + SwitchRow { + label: qsTr("Enabled") + checked: rootPane.desktopClockShadowEnabled + onToggled: checked => { + rootPane.desktopClockShadowEnabled = checked; + rootPane.saveConfig(); + } + } + + SectionContainer { + contentSpacing: Appearance.spacing.normal + + SliderInput { + Layout.fillWidth: true + + label: qsTr("Opacity") + value: rootPane.desktopClockShadowOpacity * 100 + from: 0 + to: 100 + suffix: "%" + validator: IntValidator { bottom: 0; top: 100 } + formatValueFunction: (val) => Math.round(val).toString() + parseValueFunction: (text) => parseInt(text) + + onValueModified: (newValue) => { + rootPane.desktopClockShadowOpacity = newValue / 100; + rootPane.saveConfig(); + } + } + } + + SectionContainer { + contentSpacing: Appearance.spacing.normal + + SliderInput { + Layout.fillWidth: true + + label: qsTr("Blur") + value: rootPane.desktopClockShadowBlur * 100 + from: 0 + to: 100 + suffix: "%" + validator: IntValidator { bottom: 0; top: 100 } + formatValueFunction: (val) => Math.round(val).toString() + parseValueFunction: (text) => parseInt(text) + + onValueModified: (newValue) => { + rootPane.desktopClockShadowBlur = newValue / 100; + rootPane.saveConfig(); + } + } + } + } + + SectionContainer { + contentSpacing: Appearance.spacing.small + + StyledText { + text: qsTr("Background") + font.pointSize: Appearance.font.size.larger + font.weight: 500 + } + + SwitchRow { + label: qsTr("Enabled") + checked: rootPane.desktopClockBackgroundEnabled + onToggled: checked => { + rootPane.desktopClockBackgroundEnabled = checked; + rootPane.saveConfig(); + } + } + + SwitchRow { + label: qsTr("Blur enabled") + checked: rootPane.desktopClockBackgroundBlur + onToggled: checked => { + rootPane.desktopClockBackgroundBlur = checked; + rootPane.saveConfig(); + } + } + + SectionContainer { + contentSpacing: Appearance.spacing.normal + + SliderInput { + Layout.fillWidth: true + + label: qsTr("Opacity") + value: rootPane.desktopClockBackgroundOpacity * 100 + from: 0 + to: 100 + suffix: "%" + validator: IntValidator { bottom: 0; top: 100 } + formatValueFunction: (val) => Math.round(val).toString() + parseValueFunction: (text) => parseInt(text) + + onValueModified: (newValue) => { + rootPane.desktopClockBackgroundOpacity = newValue / 100; + rootPane.saveConfig(); + } + } + } + } + + StyledText { Layout.topMargin: Appearance.spacing.normal text: qsTr("Visualiser") -- cgit v1.2.3-freya