diff --git a/quickshell/Modules/BuiltinDesktopPlugins/DesktopClockWidget.qml b/quickshell/Modules/BuiltinDesktopPlugins/DesktopClockWidget.qml index 451a55cc..387d9a26 100644 --- a/quickshell/Modules/BuiltinDesktopPlugins/DesktopClockWidget.qml +++ b/quickshell/Modules/BuiltinDesktopPlugins/DesktopClockWidget.qml @@ -22,9 +22,9 @@ Item { case "analog": return 200; case "stacked": - return 160; + return 100; default: - return 280; + return 160; } } property real defaultHeight: { @@ -32,9 +32,9 @@ Item { case "analog": return 200; case "stacked": - return 220; - default: return 160; + default: + return 70; } } property real minWidth: { @@ -42,9 +42,9 @@ Item { case "analog": return 120; case "stacked": - return 100; + return 70; default: - return 140; + return 100; } } property real minHeight: { @@ -52,9 +52,9 @@ Item { case "analog": return 120; case "stacked": - return 140; - default: return 100; + default: + return 45; } } @@ -84,7 +84,8 @@ Item { readonly property color backgroundColor: Theme.withAlpha(Theme.surface, root.transparency) readonly property bool showAnalogSeconds: isInstance ? (cfg.showAnalogSeconds ?? true) : SettingsData.desktopClockShowAnalogSeconds - readonly property bool needsSeconds: clockStyle === "analog" ? showAnalogSeconds : SettingsData.showSeconds + readonly property bool showDigitalSeconds: isInstance ? (cfg.showDigitalSeconds ?? false) : false + readonly property bool needsSeconds: clockStyle === "analog" ? showAnalogSeconds : showDigitalSeconds SystemClock { id: systemClock @@ -298,12 +299,25 @@ Item { Item { id: digitalRoot - property real baseSize: Math.max(28, height * 0.38) - property real smallSize: Math.max(12, baseSize * 0.32) + property bool hasDate: root.showDate + property bool hasAmPm: !SettingsData.use24HourClock + property real verticalScale: hasDate && hasAmPm ? 0.55 : (hasDate || hasAmPm ? 0.65 : 0.8) + property real baseSize: Math.min(height * verticalScale, width * 0.22) + property real digitWidth: baseSize * 0.62 + property real smallSize: baseSize * 0.35 + + property string hoursStr: { + const hours = SettingsData.use24HourClock ? systemClock.date?.getHours() ?? 0 : ((systemClock.date?.getHours() ?? 0) % 12 || 12); + if (SettingsData.use24HourClock || SettingsData.padHours12Hour) + return String(hours).padStart(2, '0'); + return String(hours); + } + property string minutesStr: String(systemClock.date?.getMinutes() ?? 0).padStart(2, '0') + property string secondsStr: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0') Column { anchors.centerIn: parent - spacing: 4 + spacing: 0 StyledText { visible: root.showDate @@ -314,51 +328,86 @@ Item { return systemClock.date?.toLocaleDateString(Qt.locale(), "ddd, MMM d") ?? ""; } font.pixelSize: digitalRoot.smallSize - color: root.accentColor - } - - StyledText { - anchors.horizontalCenter: parent.horizontalCenter - text: { - const hours = SettingsData.use24HourClock ? systemClock.date?.getHours() ?? 0 : ((systemClock.date?.getHours() ?? 0) % 12 || 12); - const minutes = String(systemClock.date?.getMinutes() ?? 0).padStart(2, '0'); - return hours + ":" + minutes; - } - font.pixelSize: digitalRoot.baseSize - font.weight: Font.Normal - color: root.accentColor + color: Theme.withAlpha(root.accentColor, 0.7) } Row { - visible: !SettingsData.use24HourClock || SettingsData.showSeconds anchors.horizontalCenter: parent.horizontalCenter - spacing: Theme.spacingS - - Row { - visible: SettingsData.showSeconds - spacing: Theme.spacingXS - - DankIcon { - name: "timer" - size: Math.max(10, digitalRoot.baseSize * 0.25) - color: root.subtleTextColor - anchors.verticalCenter: parent.verticalCenter - } - - StyledText { - text: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0') - font.pixelSize: digitalRoot.smallSize - color: root.subtleTextColor - } - } + spacing: 0 StyledText { - visible: !SettingsData.use24HourClock - text: (systemClock.date?.getHours() ?? 0) >= 12 ? "PM" : "AM" - font.pixelSize: digitalRoot.smallSize + visible: digitalRoot.hoursStr.length > 1 + width: digitalRoot.digitWidth + text: digitalRoot.hoursStr.charAt(0) + font.pixelSize: digitalRoot.baseSize + font.weight: Font.Medium + color: root.accentColor + horizontalAlignment: Text.AlignHCenter + } + StyledText { + width: digitalRoot.digitWidth + text: digitalRoot.hoursStr.length > 1 ? digitalRoot.hoursStr.charAt(1) : digitalRoot.hoursStr.charAt(0) + font.pixelSize: digitalRoot.baseSize + font.weight: Font.Medium + color: root.accentColor + horizontalAlignment: Text.AlignHCenter + } + StyledText { + text: ":" + font.pixelSize: digitalRoot.baseSize font.weight: Font.Medium color: root.accentColor } + StyledText { + width: digitalRoot.digitWidth + text: digitalRoot.minutesStr.charAt(0) + font.pixelSize: digitalRoot.baseSize + font.weight: Font.Medium + color: root.accentColor + horizontalAlignment: Text.AlignHCenter + } + StyledText { + width: digitalRoot.digitWidth + text: digitalRoot.minutesStr.charAt(1) + font.pixelSize: digitalRoot.baseSize + font.weight: Font.Medium + color: root.accentColor + horizontalAlignment: Text.AlignHCenter + } + StyledText { + visible: root.showDigitalSeconds + text: ":" + font.pixelSize: digitalRoot.baseSize + font.weight: Font.Medium + color: Theme.withAlpha(root.accentColor, 0.7) + } + StyledText { + visible: root.showDigitalSeconds + width: digitalRoot.digitWidth + text: digitalRoot.secondsStr.charAt(0) + font.pixelSize: digitalRoot.baseSize + font.weight: Font.Medium + color: Theme.withAlpha(root.accentColor, 0.7) + horizontalAlignment: Text.AlignHCenter + } + StyledText { + visible: root.showDigitalSeconds + width: digitalRoot.digitWidth + text: digitalRoot.secondsStr.charAt(1) + font.pixelSize: digitalRoot.baseSize + font.weight: Font.Medium + color: Theme.withAlpha(root.accentColor, 0.7) + horizontalAlignment: Text.AlignHCenter + } + } + + StyledText { + visible: !SettingsData.use24HourClock + anchors.horizontalCenter: parent.horizontalCenter + text: (systemClock.date?.getHours() ?? 0) >= 12 ? "PM" : "AM" + font.pixelSize: digitalRoot.smallSize + font.weight: Font.Medium + color: Theme.withAlpha(root.accentColor, 0.7) } } } @@ -370,78 +419,127 @@ Item { Item { id: stackedRoot - property real baseSize: Math.max(32, height * 0.32) - property real smallSize: Math.max(12, baseSize * 0.28) + property bool hasSeconds: root.showDigitalSeconds + property bool hasDate: root.showDate + property bool hasAmPm: !SettingsData.use24HourClock + property real extraContent: (hasSeconds ? 0.12 : 0) + (hasDate ? 0.08 : 0) + (hasAmPm ? 0.08 : 0) + property real baseSize: height * (0.42 - extraContent * 0.5) + property real digitWidth: baseSize * 0.58 + property real smallSize: baseSize * 0.5 + property real rowSpacing: -baseSize * 0.17 Column { anchors.centerIn: parent - spacing: -baseSize * 0.1 + spacing: 0 - StyledText { - visible: root.showDate + Column { + spacing: stackedRoot.rowSpacing anchors.horizontalCenter: parent.horizontalCenter - bottomPadding: Theme.spacingS - text: { - if (SettingsData.clockDateFormat && SettingsData.clockDateFormat.length > 0) - return systemClock.date?.toLocaleDateString(Qt.locale(), SettingsData.clockDateFormat) ?? ""; - return systemClock.date?.toLocaleDateString(Qt.locale(), "ddd, MMM d") ?? ""; - } - font.pixelSize: stackedRoot.smallSize - color: root.accentColor - } - - StyledText { - anchors.horizontalCenter: parent.horizontalCenter - text: { - const hours = SettingsData.use24HourClock ? systemClock.date?.getHours() ?? 0 : ((systemClock.date?.getHours() ?? 0) % 12 || 12); - return String(hours).padStart(2, '0'); - } - font.pixelSize: stackedRoot.baseSize - font.weight: Font.Normal - color: root.accentColor - lineHeight: 0.85 - } - - StyledText { - anchors.horizontalCenter: parent.horizontalCenter - text: String(systemClock.date?.getMinutes() ?? 0).padStart(2, '0') - font.pixelSize: stackedRoot.baseSize - font.weight: Font.Normal - color: root.accentColor - lineHeight: 0.85 - } - - Row { - visible: SettingsData.showSeconds || !SettingsData.use24HourClock - anchors.horizontalCenter: parent.horizontalCenter - topPadding: Theme.spacingXS - spacing: Theme.spacingS Row { - visible: SettingsData.showSeconds - spacing: Theme.spacingXS + spacing: 0 + anchors.horizontalCenter: parent.horizontalCenter - DankIcon { - name: "timer" - size: Math.max(10, stackedRoot.baseSize * 0.28) - color: root.subtleTextColor - anchors.verticalCenter: parent.verticalCenter + StyledText { + text: { + if (SettingsData.use24HourClock) + return String(systemClock.date?.getHours() ?? 0).padStart(2, '0').charAt(0); + const hours = systemClock.date?.getHours() ?? 0; + const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours; + return String(display).padStart(2, '0').charAt(0); + } + font.pixelSize: stackedRoot.baseSize + font.weight: Font.Medium + color: root.accentColor + width: stackedRoot.digitWidth + horizontalAlignment: Text.AlignHCenter } StyledText { - text: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0') - font.pixelSize: stackedRoot.smallSize - color: root.subtleTextColor + text: { + if (SettingsData.use24HourClock) + return String(systemClock.date?.getHours() ?? 0).padStart(2, '0').charAt(1); + const hours = systemClock.date?.getHours() ?? 0; + const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours; + return String(display).padStart(2, '0').charAt(1); + } + font.pixelSize: stackedRoot.baseSize + font.weight: Font.Medium + color: root.accentColor + width: stackedRoot.digitWidth + horizontalAlignment: Text.AlignHCenter } } + Row { + spacing: 0 + anchors.horizontalCenter: parent.horizontalCenter + + StyledText { + text: String(systemClock.date?.getMinutes() ?? 0).padStart(2, '0').charAt(0) + font.pixelSize: stackedRoot.baseSize + font.weight: Font.Medium + color: root.accentColor + width: stackedRoot.digitWidth + horizontalAlignment: Text.AlignHCenter + } + + StyledText { + text: String(systemClock.date?.getMinutes() ?? 0).padStart(2, '0').charAt(1) + font.pixelSize: stackedRoot.baseSize + font.weight: Font.Medium + color: root.accentColor + width: stackedRoot.digitWidth + horizontalAlignment: Text.AlignHCenter + } + } + } + + Row { + visible: stackedRoot.hasSeconds + spacing: 0 + anchors.horizontalCenter: parent.horizontalCenter + StyledText { - visible: !SettingsData.use24HourClock - text: (systemClock.date?.getHours() ?? 0) >= 12 ? "PM" : "AM" + text: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0').charAt(0) font.pixelSize: stackedRoot.smallSize font.weight: Font.Medium - color: root.accentColor + color: Theme.withAlpha(root.accentColor, 0.7) + width: stackedRoot.smallSize * 0.58 + horizontalAlignment: Text.AlignHCenter } + + StyledText { + text: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0').charAt(1) + font.pixelSize: stackedRoot.smallSize + font.weight: Font.Medium + color: Theme.withAlpha(root.accentColor, 0.7) + width: stackedRoot.smallSize * 0.58 + horizontalAlignment: Text.AlignHCenter + } + } + + Item { + width: 1 + height: stackedRoot.baseSize * 0.1 + visible: stackedRoot.hasDate + } + + StyledText { + visible: stackedRoot.hasDate + anchors.horizontalCenter: parent.horizontalCenter + text: systemClock.date?.toLocaleDateString(Qt.locale(), "MMM dd") ?? "" + font.pixelSize: stackedRoot.smallSize * 0.7 + color: Theme.withAlpha(root.accentColor, 0.7) + } + + StyledText { + visible: stackedRoot.hasAmPm + anchors.horizontalCenter: parent.horizontalCenter + text: (systemClock.date?.getHours() ?? 0) >= 12 ? "PM" : "AM" + font.pixelSize: stackedRoot.smallSize * 0.7 + font.weight: Font.Medium + color: Theme.withAlpha(root.accentColor, 0.7) } } } diff --git a/quickshell/Modules/Settings/DesktopWidgetSettings/ClockSettings.qml b/quickshell/Modules/Settings/DesktopWidgetSettings/ClockSettings.qml index d8c760ba..7bd02b48 100644 --- a/quickshell/Modules/Settings/DesktopWidgetSettings/ClockSettings.qml +++ b/quickshell/Modules/Settings/DesktopWidgetSettings/ClockSettings.qml @@ -73,6 +73,17 @@ Column { onToggled: checked => root.updateConfig("showAnalogSeconds", checked) } + SettingsDivider { + visible: cfg.style === "digital" || cfg.style === "stacked" + } + + SettingsToggleRow { + visible: cfg.style === "digital" || cfg.style === "stacked" + text: I18n.tr("Show Seconds") + checked: cfg.showDigitalSeconds ?? false + onToggled: checked => root.updateConfig("showDigitalSeconds", checked) + } + SettingsDivider {} SettingsToggleRow { diff --git a/quickshell/Modules/Settings/ThemeColorsTab.qml b/quickshell/Modules/Settings/ThemeColorsTab.qml index 0e4a6568..1238d944 100644 --- a/quickshell/Modules/Settings/ThemeColorsTab.qml +++ b/quickshell/Modules/Settings/ThemeColorsTab.qml @@ -164,8 +164,7 @@ Item { detection[item.id] = item.detected; } themeColorsTab.templateDetection = detection; - } catch (e) { - } + } catch (e) {} } } } @@ -1028,8 +1027,14 @@ Item { height: 45 anchors.horizontalCenter: parent.horizontalCenter model: [ - { "text": "Time", "icon": "access_time" }, - { "text": "Location", "icon": "place" } + { + "text": "Time", + "icon": "access_time" + }, + { + "text": "Location", + "icon": "place" + } ] Component.onCompleted: { @@ -1104,7 +1109,8 @@ Item { currentValue: SessionData.themeModeStartHour.toString() options: { var hours = []; - for (var i = 0; i < 24; i++) hours.push(i.toString()); + for (var i = 0; i < 24; i++) + hours.push(i.toString()); return hours; } onValueChanged: value => { @@ -1145,7 +1151,8 @@ Item { currentValue: SessionData.themeModeEndHour.toString() options: { var hours = []; - for (var i = 0; i < 24; i++) hours.push(i.toString()); + for (var i = 0; i < 24; i++) + hours.push(i.toString()); return hours; } onValueChanged: value => { @@ -1356,7 +1363,7 @@ Item { DankIcon { name: SessionData.isLightMode ? "light_mode" : "dark_mode" - size: Theme.iconSizeMedium + size: Theme.iconSize color: SessionData.isLightMode ? "#FFA726" : "#7E57C2" anchors.verticalCenter: parent.verticalCenter } @@ -1392,7 +1399,7 @@ Item { DankIcon { name: "schedule" - size: Theme.iconSizeMedium + size: Theme.iconSize color: Theme.primary anchors.verticalCenter: parent.verticalCenter }