diff --git a/Modules/Bar/Widgets/Clock.qml b/Modules/Bar/Widgets/Clock.qml index ac638d7..b2ee975 100644 --- a/Modules/Bar/Widgets/Clock.qml +++ b/Modules/Bar/Widgets/Clock.qml @@ -34,33 +34,94 @@ Rectangle { readonly property bool showSeconds: widgetSettings.showSeconds !== undefined ? widgetSettings.showSeconds : widgetMetadata.showSeconds readonly property bool reverseDayMonth: widgetSettings.reverseDayMonth !== undefined ? widgetSettings.reverseDayMonth : widgetMetadata.reverseDayMonth + readonly property bool compactMode: widgetSettings.compactMode !== undefined ? widgetSettings.compactMode : widgetMetadata.compactMode + readonly property bool compactDateNumeric: widgetSettings.compactDateNumeric + !== undefined ? widgetSettings.compactDateNumeric : widgetMetadata.compactDateNumeric - implicitWidth: clock.width + Style.marginM * 2 * scaling - implicitHeight: Math.round(Style.capsuleHeight * scaling) + implicitWidth: (compactMode ? Math.max(timeText.implicitWidth, + dateText.implicitWidth) : clock.width) + Style.marginM * 2 * scaling + implicitHeight: compactMode ? (timeText.implicitHeight + dateText.implicitHeight + Math.round( + Style.marginXS * scaling) + Math.round(Style.marginM * 2 * scaling)) : Math.round( + Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant - // Clock Icon with attached calendar - NText { - id: clock - text: { - const now = Time.date - const timeFormat = use12h ? (showSeconds ? "h:mm:ss AP" : "h:mm AP") : (showSeconds ? "HH:mm:ss" : "HH:mm") - const timeString = Qt.formatDateTime(now, timeFormat) + // Clock with optional compact layout & attached calendar + Item { + id: clockContainer + anchors.fill: parent + anchors.margins: Math.round((compactMode ? Style.marginS : Style.marginM) * scaling) - if (showDate) { - let dayName = now.toLocaleDateString(Qt.locale(), "ddd") - dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1) - let day = now.getDate() - let month = now.toLocaleDateString(Qt.locale(), "MMM") - return timeString + " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`) + Column { + id: compactColumn + anchors.centerIn: parent + spacing: Math.round(Style.marginXXS * scaling) + visible: compactMode + + NText { + id: timeText + text: { + const now = Time.date + const timeFormat = use12h ? (showSeconds ? "h:mm:ss AP" : "h:mm AP") : (showSeconds ? "HH:mm:ss" : "HH:mm") + return Qt.formatDateTime(now, timeFormat) + } + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightBold + color: Color.mPrimary + horizontalAlignment: Text.AlignHCenter + anchors.horizontalCenter: parent.horizontalCenter + } + + NText { + id: dateText + visible: compactMode || showDate + text: { + const now = Time.date + if (compactDateNumeric) { + const day = now.getDate() + const month = now.getMonth() + 1 + const dd = (day < 10 ? "0" + day : "" + day) + const mm = (month < 10 ? "0" + month : "" + month) + return reverseDayMonth ? `${mm}/${dd}` : `${dd}/${mm}` + } else { + let dayName = now.toLocaleDateString(Qt.locale(), "ddd") + dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1) + let day = now.getDate() + let month = now.toLocaleDateString(Qt.locale(), "MMM") + return reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}` + } + } + font.pointSize: Math.max(Style.fontSizeXS, Style.fontSizeXS * scaling) + font.weight: Style.fontWeightRegular + color: Color.mPrimary + horizontalAlignment: Text.AlignHCenter + anchors.horizontalCenter: parent.horizontalCenter } - return timeString } - anchors.centerIn: parent - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightBold - color: Color.mPrimary + + // Non-compact single-line text + NText { + id: clock + visible: !compactMode + text: { + const now = Time.date + const timeFormat = use12h ? (showSeconds ? "h:mm:ss AP" : "h:mm AP") : (showSeconds ? "HH:mm:ss" : "HH:mm") + const timeString = Qt.formatDateTime(now, timeFormat) + + if (showDate) { + let dayName = now.toLocaleDateString(Qt.locale(), "ddd") + dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1) + let day = now.getDate() + let month = now.toLocaleDateString(Qt.locale(), "MMM") + return timeString + " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`) + } + return timeString + } + anchors.centerIn: parent + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightBold + color: Color.mPrimary + } } NTooltip { diff --git a/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml b/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml index cef94a8..bf22b92 100644 --- a/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml +++ b/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml @@ -18,6 +18,9 @@ ColumnLayout { property bool valueUse12h: widgetData.use12HourClock !== undefined ? widgetData.use12HourClock : widgetMetadata.use12HourClock property bool valueShowSeconds: widgetData.showSeconds !== undefined ? widgetData.showSeconds : widgetMetadata.showSeconds property bool valueReverseDayMonth: widgetData.reverseDayMonth !== undefined ? widgetData.reverseDayMonth : widgetMetadata.reverseDayMonth + property bool valueCompactMode: widgetData.compactMode !== undefined ? widgetData.compactMode : widgetMetadata.compactMode + property bool valueCompactDateNumeric: widgetData.compactDateNumeric + !== undefined ? widgetData.compactDateNumeric : widgetMetadata.compactDateNumeric function saveSettings() { var settings = Object.assign({}, widgetData || {}) @@ -25,6 +28,8 @@ ColumnLayout { settings.use12HourClock = valueUse12h settings.showSeconds = valueShowSeconds settings.reverseDayMonth = valueReverseDayMonth + settings.compactMode = valueCompactMode + settings.compactDateNumeric = valueCompactDateNumeric return settings } @@ -34,6 +39,20 @@ ColumnLayout { onToggled: checked => valueShowDate = checked } + NToggle { + label: "Compact clock (date under time)" + checked: valueCompactMode + onToggled: checked => valueCompactMode = checked + } + + // Only visible when compact mode is enabled + NToggle { + visible: valueCompactMode + label: "Compact date numeric (DD/MM)" + checked: valueCompactDateNumeric + onToggled: checked => valueCompactDateNumeric = checked + } + NToggle { label: "Use 12-hour clock" checked: valueUse12h diff --git a/Services/BarWidgetRegistry.qml b/Services/BarWidgetRegistry.qml index b9db991..dfab6fa 100644 --- a/Services/BarWidgetRegistry.qml +++ b/Services/BarWidgetRegistry.qml @@ -55,7 +55,9 @@ Singleton { "showDate": false, "use12HourClock": false, "showSeconds": false, - "reverseDayMonth": true + "reverseDayMonth": true, + "compactMode": false, + "compactDateNumeric": true }, "CustomButton": { "allowUserSettings": true,