diff --git a/Modules/Bar/Widgets/Clock.qml b/Modules/Bar/Widgets/Clock.qml index 56e786d..b39dade 100644 --- a/Modules/Bar/Widgets/Clock.qml +++ b/Modules/Bar/Widgets/Clock.qml @@ -16,6 +16,7 @@ Rectangle { property string section: "" property int sectionWidgetIndex: -1 property int sectionWidgetsCount: 0 + property string barPosition: "top" property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId] property var widgetSettings: { @@ -32,9 +33,12 @@ Rectangle { readonly property bool use12h: widgetSettings.use12HourClock !== undefined ? widgetSettings.use12HourClock : widgetMetadata.use12HourClock readonly property bool reverseDayMonth: widgetSettings.reverseDayMonth !== undefined ? widgetSettings.reverseDayMonth : widgetMetadata.reverseDayMonth readonly property string displayFormat: widgetSettings.displayFormat !== undefined ? widgetSettings.displayFormat : widgetMetadata.displayFormat + + // Use compact mode for vertical bars + readonly property bool useCompactMode: barPosition === "left" || barPosition === "right" - implicitWidth: Math.round(layout.implicitWidth + Style.marginM * 2 * scaling) - implicitHeight: Math.round(Style.capsuleHeight * scaling) + implicitWidth: useCompactMode ? Math.round(Style.capsuleHeight * scaling) : Math.round(layout.implicitWidth + Style.marginM * 2 * scaling) + implicitHeight: useCompactMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusS * scaling) color: Color.mSurfaceVariant @@ -46,66 +50,129 @@ Rectangle { ColumnLayout { id: layout anchors.centerIn: parent - spacing: -3 * scaling + spacing: useCompactMode ? -2 * scaling : -3 * scaling - // First line - NText { - readonly property bool showSeconds: (displayFormat === "time-seconds") - readonly property bool inlineDate: (displayFormat === "time-date") + // Compact mode for vertical bars - Time section (HH, MM) + Repeater { + model: useCompactMode ? 2 : 1 + NText { + readonly property bool showSeconds: (displayFormat === "time-seconds") + readonly property bool inlineDate: (displayFormat === "time-date") + readonly property var now: Time.date - text: { - const now = Time.date - let timeStr = "" - - if (use12h) { - // 12-hour format with proper padding and consistent spacing - const hours = now.getHours() - const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours) - const paddedHours = displayHours.toString().padStart(2, '0') - const minutes = now.getMinutes().toString().padStart(2, '0') - const ampm = hours < 12 ? 'AM' : 'PM' - - if (showSeconds) { - const seconds = now.getSeconds().toString().padStart(2, '0') - timeStr = `${paddedHours}:${minutes}:${seconds} ${ampm}` + text: { + if (useCompactMode) { + // Compact mode: time section (first 2 lines) + switch (index) { + case 0: // Hours + if (use12h) { + const hours = now.getHours() + const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours) + return displayHours.toString().padStart(2, '0') + } else { + return now.getHours().toString().padStart(2, '0') + } + case 1: // Minutes + return now.getMinutes().toString().padStart(2, '0') + default: + return "" + } } else { - timeStr = `${paddedHours}:${minutes} ${ampm}` - } - } else { - // 24-hour format with padding - const hours = now.getHours().toString().padStart(2, '0') - const minutes = now.getMinutes().toString().padStart(2, '0') + // Normal mode: single line with time + let timeStr = "" - if (showSeconds) { - const seconds = now.getSeconds().toString().padStart(2, '0') - timeStr = `${hours}:${minutes}:${seconds}` - } else { - timeStr = `${hours}:${minutes}` + if (use12h) { + // 12-hour format with proper padding and consistent spacing + const hours = now.getHours() + const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours) + const paddedHours = displayHours.toString().padStart(2, '0') + const minutes = now.getMinutes().toString().padStart(2, '0') + const ampm = hours < 12 ? 'AM' : 'PM' + + if (showSeconds) { + const seconds = now.getSeconds().toString().padStart(2, '0') + timeStr = `${paddedHours}:${minutes}:${seconds} ${ampm}` + } else { + timeStr = `${paddedHours}:${minutes} ${ampm}` + } + } else { + // 24-hour format with padding + const hours = now.getHours().toString().padStart(2, '0') + const minutes = now.getMinutes().toString().padStart(2, '0') + + if (showSeconds) { + const seconds = now.getSeconds().toString().padStart(2, '0') + timeStr = `${hours}:${minutes}:${seconds}` + } else { + timeStr = `${hours}:${minutes}` + } + } + + // Add inline date if needed + if (inlineDate) { + let dayName = now.toLocaleDateString(Qt.locale(), "ddd") + dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1) + const day = now.getDate().toString().padStart(2, '0') + let month = now.toLocaleDateString(Qt.locale(), "MMM") + timeStr += " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`) + } + + return timeStr } } - // Add inline date if needed - if (inlineDate) { - let dayName = now.toLocaleDateString(Qt.locale(), "ddd") - dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1) - const day = now.getDate().toString().padStart(2, '0') - let month = now.toLocaleDateString(Qt.locale(), "MMM") - timeStr += " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`) - } - - return timeStr + //font.family: Settings.data.ui.fontFixed + font.pointSize: useCompactMode ? Style.fontSizeXXS * scaling : Style.fontSizeXS * scaling + font.weight: Style.fontWeightBold + color: Color.mPrimary + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter } - - //font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXS * scaling - font.weight: Style.fontWeightBold - color: Color.mPrimary - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter } - // Second line + // Separator line for compact mode (between time and date) + Rectangle { + visible: useCompactMode + Layout.preferredWidth: 20 * scaling + Layout.preferredHeight: 2 * scaling + Layout.alignment: Qt.AlignHCenter + Layout.topMargin: 3 * scaling + Layout.bottomMargin: 3 * scaling + color: Color.mPrimary + opacity: 0.3 + radius: 1 * scaling + } + + // Compact mode for vertical bars - Date section (DD, MM) + Repeater { + model: useCompactMode ? 2 : 0 + NText { + readonly property var now: Time.date + + text: { + if (useCompactMode) { + // Compact mode: date section (last 2 lines) + switch (index) { + case 0: // Day + return now.getDate().toString().padStart(2, '0') + case 1: // Month + return (now.getMonth() + 1).toString().padStart(2, '0') + default: + return "" + } + } + return "" + } + + font.pointSize: Style.fontSizeXXS * scaling + font.weight: Style.fontWeightBold + color: Color.mPrimary + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + } + } + + // Second line for normal mode (date) NText { - visible: (displayFormat === "time-date-short") + visible: !useCompactMode && (displayFormat === "time-date-short") text: { const now = Time.date const day = now.getDate().toString().padStart(2, '0') diff --git a/Modules/Bar/Widgets/Tray.qml b/Modules/Bar/Widgets/Tray.qml index 5c1b090..b0f0f71 100644 --- a/Modules/Bar/Widgets/Tray.qml +++ b/Modules/Bar/Widgets/Tray.qml @@ -15,6 +15,7 @@ Rectangle { property ShellScreen screen property real scaling: 1.0 + property string barPosition: "top" readonly property real itemSize: 24 * scaling @@ -26,9 +27,20 @@ Rectangle { } } + // React to bar position changes + Connections { + target: BarService + function onBarPositionChanged(newPosition) { + root.barPosition = newPosition + // Force re-evaluation of implicitWidth and implicitHeight + root.implicitWidth = Qt.binding(() => (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (trayLayout.implicitWidth + Style.marginM * scaling * 2)) + root.implicitHeight = Qt.binding(() => (barPosition === "left" || barPosition === "right") ? Math.round(trayLayout.implicitHeight + Style.marginM * scaling * 2) : Math.round(Style.capsuleHeight * scaling)) + } + } + visible: SystemTray.items.values.length > 0 - implicitWidth: trayLayout.implicitWidth + Style.marginM * scaling * 2 - implicitHeight: Math.round(Style.capsuleHeight * scaling) + implicitWidth: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (trayLayout.implicitWidth + Style.marginM * scaling * 2) + implicitHeight: (barPosition === "left" || barPosition === "right") ? Math.round(trayLayout.implicitHeight + Style.marginM * scaling * 2) : Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant @@ -111,9 +123,21 @@ Rectangle { if (modelData.hasMenu && modelData.menu && trayMenu.item) { trayPanel.open() - // Anchor the menu to the tray icon item (parent) and position it below the icon - const menuX = (width / 2) - (trayMenu.item.width / 2) - const menuY = Math.round(Style.barHeight * scaling) + // Position menu based on bar position + let menuX, menuY + if (barPosition === "left") { + // For left bar: position menu to the right of the bar + menuX = width + Style.marginM * scaling + menuY = 0 + } else if (barPosition === "right") { + // For right bar: position menu to the left of the bar + menuX = -trayMenu.item.width - Style.marginM * scaling + menuY = 0 + } else { + // For horizontal bars: center horizontally and position below + menuX = (width / 2) - (trayMenu.item.width / 2) + menuY = Math.round(Style.barHeight * scaling) + } trayMenu.item.menu = modelData.menu trayMenu.item.showAt(parent, menuX, menuY) } else { diff --git a/Modules/Calendar/Calendar.qml b/Modules/Calendar/Calendar.qml index 4c4f99b..80c6fd3 100644 --- a/Modules/Calendar/Calendar.qml +++ b/Modules/Calendar/Calendar.qml @@ -12,7 +12,7 @@ NPanel { preferredWidth: 340 preferredHeight: 320 - panelAnchorRight: true + panelAnchorRight: Settings.data.bar.position === "right" // Main Column panelContent: ColumnLayout { diff --git a/Modules/Notification/NotificationHistoryPanel.qml b/Modules/Notification/NotificationHistoryPanel.qml index c25c25f..a29c2cb 100644 --- a/Modules/Notification/NotificationHistoryPanel.qml +++ b/Modules/Notification/NotificationHistoryPanel.qml @@ -14,7 +14,7 @@ NPanel { preferredWidth: 380 preferredHeight: 500 - panelAnchorRight: true + panelAnchorRight: Settings.data.bar.position === "right" panelKeyboardFocus: true panelContent: Rectangle {