diff --git a/Modules/Bar/Widgets/Clock.qml b/Modules/Bar/Widgets/Clock.qml index d4e8b7e01..546ada420 100644 --- a/Modules/Bar/Widgets/Clock.qml +++ b/Modules/Bar/Widgets/Clock.qml @@ -37,10 +37,8 @@ Rectangle { // Resolve settings: try user settings or defaults from BarWidgetRegistry readonly property bool usePrimaryColor: widgetSettings.usePrimaryColor !== undefined ? widgetSettings.usePrimaryColor : widgetMetadata.usePrimaryColor property bool useMonospacedFont: widgetSettings.useMonospacedFont !== undefined ? widgetSettings.useMonospacedFont : widgetMetadata.useMonospacedFont - readonly property string line1: widgetSettings.line1 !== undefined ? widgetSettings.line1 : widgetMetadata.line1 - readonly property string line2: widgetSettings.line2 !== undefined ? widgetSettings.line2 : widgetMetadata.line2 - readonly property string line3: widgetSettings.line3 !== undefined ? widgetSettings.line3 : widgetMetadata.line3 - readonly property string line4: widgetSettings.line4 !== undefined ? widgetSettings.line4 : widgetMetadata.line4 + readonly property string formatHorizontal: widgetSettings.formatHorizontal !== undefined ? widgetSettings.formatHorizontal : widgetMetadata.formatHorizontal + readonly property string formatVertical: widgetSettings.formatVertical !== undefined ? widgetSettings.formatVertical : widgetMetadata.formatVertical implicitWidth: isBarVertical ? Math.round(Style.capsuleHeight * scaling) : Math.round(layout.implicitWidth + Style.marginM * 2 * scaling) implicitHeight: isBarVertical ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling) // Match BarPill @@ -52,55 +50,43 @@ Rectangle { id: clockContainer anchors.centerIn: parent - // anchors.margins: compact ? 0 : Style.marginXS * scaling - ColumnLayout { + RowLayout { id: layout anchors.centerIn: parent - spacing: isBarVertical ? -2 * scaling : -3 * scaling - NText { - visible: text !== "" - text: Qt.formatDateTime(now, line1.trim()) - font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault - font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeS * scaling - font.weight: Style.fontWeightBold - color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface - wrapMode: Text.WordWrap - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Loader { + active: !isBarVertical + sourceComponent: NText { + anchors.centerIn: parent + visible: text !== "" + text: Qt.formatDateTime(now, formatHorizontal.trim()) + font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault + font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeS * scaling + font.weight: Style.fontWeightBold + color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface + wrapMode: Text.WordWrap + } } - NText { - visible: text !== "" - text: Qt.formatDateTime(now, line2.trim()) - font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault - font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeXS * scaling - font.weight: Style.fontWeightBold - color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface - wrapMode: Text.WordWrap - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - } - - NText { - visible: text !== "" && isBarVertical - text: Qt.formatDateTime(now, line3.trim()) - font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault - font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeS * scaling - font.weight: Style.fontWeightBold - color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface - wrapMode: Text.WordWrap - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - Layout.topMargin: visible ? Style.marginXS * scaling : 0 - } - - NText { - visible: text !== "" && isBarVertical - text: Qt.formatDateTime(now, line4.trim()) - font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault - font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeXS * scaling - font.weight: Style.fontWeightBold - color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface - wrapMode: Text.WordWrap - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Loader { + active: isBarVertical + sourceComponent: ColumnLayout { + anchors.centerIn: parent + spacing: -2 * scaling + Repeater { + model: Qt.formatDateTime(now, formatVertical.trim()).split(" ") + delegate: NText { + visible: text !== "" + text: modelData + font.family: useMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault + font.pointSize: isBarVertical ? Style.fontSizeS * scaling : Style.fontSizeXS * scaling + font.weight: Style.fontWeightBold + color: usePrimaryColor ? Color.mPrimary : Color.mOnSurface + wrapMode: Text.WordWrap + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + } + } + } } } } diff --git a/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml b/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml index a45b60690..960728aac 100644 --- a/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml +++ b/Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml @@ -17,10 +17,8 @@ ColumnLayout { // Local state property bool valueUsePrimaryColor: widgetData.usePrimaryColor !== undefined ? widgetData.usePrimaryColor : widgetMetadata.usePrimaryColor property bool valueUseMonospacedFont: widgetData.useMonospacedFont !== undefined ? widgetData.useMonospacedFont : widgetMetadata.useMonospacedFont - property string valueLine1: widgetData.line1 !== undefined ? widgetData.line1 : widgetMetadata.line1 - property string valueLine2: widgetData.line2 !== undefined ? widgetData.line2 : widgetMetadata.line2 - property string valueLine3: widgetData.line3 !== undefined ? widgetData.line3 : widgetMetadata.line3 - property string valueLine4: widgetData.line4 !== undefined ? widgetData.line4 : widgetMetadata.line4 + property string valueFormatHorizontal: widgetData.formatHorizontal !== undefined ? widgetData.formatHorizontal : widgetMetadata.formatHorizontal + property string valueFormatVertical: widgetData.formatVertical !== undefined ? widgetData.formatVertical : widgetMetadata.formatVertical // Track the currently focused input field property var focusedInput: null @@ -32,21 +30,18 @@ ColumnLayout { var settings = Object.assign({}, widgetData || {}) settings.usePrimaryColor = valueUsePrimaryColor settings.useMonospacedFont = valueUseMonospacedFont - settings.line1 = valueLine1.trim() - settings.line2 = valueLine2.trim() - settings.line3 = valueLine3.trim() - settings.line4 = valueLine4.trim() + settings.formatHorizontal = valueFormatHorizontal.trim() + settings.formatVertical = valueFormatVertical.trim() return settings } // Function to insert token at cursor position in the focused input function insertToken(token) { if (!focusedInput || !focusedInput.inputItem) { - // If no input is focused, default to line 1 - if (inputLine1.inputItem) { - inputLine1.inputItem.focus = true - focusedInput = inputLine1 - focusedLineIndex = 1 + // If no input is focused, default to horiz + if (inputHoriz.inputItem) { + inputHoriz.inputItem.focus = true + focusedInput = inputHoriz } } @@ -67,24 +62,6 @@ ColumnLayout { } } - // Function to update the value property based on which line was edited - function updateLineValue(lineIndex, text) { - switch (lineIndex) { - case 1: - valueLine1 = text - break - case 2: - valueLine2 = text - break - case 3: - valueLine3 = text - break - case 4: - valueLine4 = text - break - } - } - NToggle { Layout.fillWidth: true label: "Use primary color" @@ -121,20 +98,17 @@ ColumnLayout { spacing: Style.marginM * scaling NTextInput { - id: inputLine1 + id: inputHoriz Layout.fillWidth: true - label: "1st line" - placeholderText: "HH:mm" - text: valueLine1 - onTextChanged: updateLineValue(1, text) - - // Track focus state + label: "Horizontal bar" + placeholderText: "HH:mm ddd, MMM dd" + text: valueFormatHorizontal + onTextChanged: valueFormatHorizontal = text Component.onCompleted: { if (inputItem) { inputItem.onActiveFocusChanged.connect(function () { if (inputItem.activeFocus) { - root.focusedInput = inputLine1 - root.focusedLineIndex = 1 + root.focusedInput = inputHoriz } }) } @@ -142,68 +116,17 @@ ColumnLayout { } NTextInput { - id: inputLine2 + id: inputVert Layout.fillWidth: true - label: "2nd line" - placeholderText: "ddd MMM d" - text: valueLine2 - onTextChanged: updateLineValue(2, text) - - // Track focus state + label: "Vertical bar" + placeholderText: "HH mm dd MM" + text: valueFormatVertical + onTextChanged: valueFormatVertical = text Component.onCompleted: { if (inputItem) { inputItem.onActiveFocusChanged.connect(function () { if (inputItem.activeFocus) { - root.focusedInput = inputLine2 - root.focusedLineIndex = 2 - } - }) - } - } - } - } - - ColumnLayout { - Layout.fillWidth: true - Layout.preferredWidth: 1 // Equal sizing hint - spacing: Style.marginM * scaling - - NTextInput { - id: inputLine3 - Layout.fillWidth: true - label: "3rd line" - placeholderText: "" - text: valueLine3 - onTextChanged: updateLineValue(3, text) - - // Track focus state - Component.onCompleted: { - if (inputItem) { - inputItem.onActiveFocusChanged.connect(function () { - if (inputItem.activeFocus) { - root.focusedInput = inputLine3 - root.focusedLineIndex = 3 - } - }) - } - } - } - - NTextInput { - id: inputLine4 - Layout.fillWidth: true - label: "4th line" - placeholderText: "" - text: valueLine4 - onTextChanged: updateLineValue(4, text) - - // Track focus state - Component.onCompleted: { - if (inputItem) { - inputItem.onActiveFocusChanged.connect(function () { - if (inputItem.activeFocus) { - root.focusedInput = inputLine4 - root.focusedLineIndex = 4 + root.focusedInput = inputVert } }) } @@ -223,12 +146,12 @@ ColumnLayout { } Rectangle { - Layout.preferredWidth: 240 * scaling - Layout.preferredHeight: 120 * scaling // Fixed height instead of fillHeight + Layout.preferredWidth: 320 * scaling + Layout.preferredHeight: 140 * scaling // Fixed height instead of fillHeight color: Color.mSurfaceVariant radius: Style.radiusM * scaling - border.color: focusedLineIndex > 0 ? Color.mSecondary : Color.mOutline + border.color: Color.mSecondary border.width: Math.max(1, Style.borderS * scaling) Behavior on border.color { @@ -238,12 +161,13 @@ ColumnLayout { } ColumnLayout { - spacing: -2 * scaling + spacing: Style.marginM * scaling anchors.centerIn: parent + // Horizontal NText { visible: text !== "" - text: Qt.formatDateTime(now, valueLine1.trim()) + text: Qt.formatDateTime(now, valueFormatHorizontal.trim()) font.family: valueUseMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold @@ -258,54 +182,29 @@ ColumnLayout { } } - NText { - visible: text !== "" - text: Qt.formatDateTime(now, valueLine2.trim()) - font.family: valueUseMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault - font.pointSize: Style.fontSizeM * scaling - font.weight: Style.fontWeightBold - color: valueUsePrimaryColor ? Color.mPrimary : Color.mOnSurface - wrapMode: Text.WordWrap - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + // Vertical + ColumnLayout { + spacing: -2 * scaling + Layout.alignment: Qt.AlignHCenter - Behavior on color { - ColorAnimation { - duration: Style.animationFast - } - } - } + Repeater { + Layout.topMargin: Style.marginM * scaling + model: Qt.formatDateTime(now, valueFormatVertical.trim()).split(" ") + delegate: NText { + visible: text !== "" + text: modelData + font.family: valueUseMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault + font.pointSize: Style.fontSizeM * scaling + font.weight: Style.fontWeightBold + color: valueUsePrimaryColor ? Color.mPrimary : Color.mOnSurface + wrapMode: Text.WordWrap + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - NText { - visible: text !== "" - text: Qt.formatDateTime(now, valueLine3.trim()) - font.family: valueUseMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault - font.pointSize: Style.fontSizeM * scaling - font.weight: Style.fontWeightBold - color: valueUsePrimaryColor ? Color.mPrimary : Color.mOnSurface - wrapMode: Text.WordWrap - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - Layout.topMargin: visible ? Style.marginXS * scaling : 0 - - Behavior on color { - ColorAnimation { - duration: Style.animationFast - } - } - } - - NText { - visible: text !== "" - text: Qt.formatDateTime(now, valueLine4.trim()) - font.family: valueUseMonospacedFont ? Settings.data.ui.fontFixed : Settings.data.ui.fontDefault - font.pointSize: Style.fontSizeM * scaling - font.weight: Style.fontWeightBold - color: valueUsePrimaryColor ? Color.mPrimary : Color.mOnSurface - wrapMode: Text.WordWrap - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - - Behavior on color { - ColorAnimation { - duration: Style.animationFast + Behavior on color { + ColorAnimation { + duration: Style.animationFast + } + } } } } diff --git a/Services/BarWidgetRegistry.qml b/Services/BarWidgetRegistry.qml index 38aaea4d3..d8df0bdb9 100644 --- a/Services/BarWidgetRegistry.qml +++ b/Services/BarWidgetRegistry.qml @@ -55,10 +55,8 @@ Singleton { "allowUserSettings": true, "usePrimaryColor": true, "useMonospacedFont": true, - "line1": "HH:mm ddd, MMM dd", - "line2": "", - "line3": "", - "line4": "" + "formatHorizontal": "HH:mm ddd, MMM dd", + "formatVertical": "HH mm - dd MM" }, "CustomButton": { "allowUserSettings": true,