Cards & Settings refactoring

- All cards now live in Modules/Cards - CalendarPanel is now called ClockPanel - Added a way to ease settings migration in separate QML files
2026-06-03 02:51:46 +00:00 · 2025-11-30 14:26:09 -05:00
parent 087c9b4ced
commit e972e1f7aa
20 changed files with 738 additions and 686 deletions
@@ -0,0 +1,132 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs.Commons
+import qs.Services.Location
+import qs.Widgets
+
+// Calendar header with date, month/year, location, and clock
+Rectangle {
+  id: root
+  Layout.fillWidth: true
+  Layout.minimumHeight: (60 * Style.uiScaleRatio) + (Style.marginM * 2)
+  Layout.preferredHeight: (60 * Style.uiScaleRatio) + (Style.marginM * 2)
+  implicitHeight: (60 * Style.uiScaleRatio) + (Style.marginM * 2)
+  radius: Style.radiusL
+  color: Color.mPrimary
+
+  // Internal state
+  readonly property var now: Time.now
+  readonly property bool weatherReady: Settings.data.location.weatherEnabled && (LocationService.data.weather !== null)
+
+  // Expose current month/year for potential synchronization with CalendarMonthCard
+  readonly property int currentMonth: now.getMonth()
+  readonly property int currentYear: now.getFullYear()
+
+  ColumnLayout {
+    id: capsuleColumn
+    anchors.top: parent.top
+    anchors.left: parent.left
+    anchors.bottom: parent.bottom
+    anchors.topMargin: Style.marginM
+    anchors.bottomMargin: Style.marginM
+    anchors.rightMargin: clockLoader.width + (Style.marginXL * 2)
+    anchors.leftMargin: Style.marginXL
+    spacing: 0
+
+    // Combined layout for date, month year, location and time-zone
+    RowLayout {
+      Layout.fillWidth: true
+      height: 60 * Style.uiScaleRatio
+      clip: true
+      spacing: Style.marginS
+
+      // Today day number
+      NText {
+        Layout.preferredWidth: implicitWidth
+        elide: Text.ElideNone
+        clip: true
+        Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+        text: root.now.getDate()
+        pointSize: Style.fontSizeXXXL * 1.5
+        font.weight: Style.fontWeightBold
+        color: Color.mOnPrimary
+      }
+
+      // Month, year, location
+      ColumnLayout {
+        Layout.fillWidth: true
+        Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+        Layout.bottomMargin: Style.marginXXS
+        Layout.topMargin: -Style.marginXXS
+        spacing: -Style.marginXS
+
+        RowLayout {
+          spacing: Style.marginS
+
+          NText {
+            text: I18n.locale.monthName(root.currentMonth, Locale.LongFormat).toUpperCase()
+            pointSize: Style.fontSizeXL * 1.1
+            font.weight: Style.fontWeightBold
+            color: Color.mOnPrimary
+            Layout.alignment: Qt.AlignBaseline
+            elide: Text.ElideRight
+          }
+
+          NText {
+            text: `${root.currentYear}`
+            pointSize: Style.fontSizeM
+            font.weight: Style.fontWeightBold
+            color: Qt.alpha(Color.mOnPrimary, 0.7)
+            Layout.alignment: Qt.AlignBaseline
+          }
+        }
+
+        RowLayout {
+          spacing: 0
+
+          NText {
+            text: {
+              if (!Settings.data.location.weatherEnabled)
+                return "";
+              if (!root.weatherReady)
+                return I18n.tr("calendar.weather.loading");
+              const chunks = Settings.data.location.name.split(",");
+              return chunks[0];
+            }
+            pointSize: Style.fontSizeM
+            font.weight: Style.fontWeightMedium
+            color: Color.mOnPrimary
+            Layout.maximumWidth: 150
+            elide: Text.ElideRight
+          }
+
+          NText {
+            text: root.weatherReady ? ` (${LocationService.data.weather.timezone_abbreviation})` : ""
+            pointSize: Style.fontSizeXS
+            font.weight: Style.fontWeightMedium
+            color: Qt.alpha(Color.mOnPrimary, 0.7)
+          }
+        }
+      }
+
+      // Spacer
+      Item {
+        Layout.fillWidth: true
+      }
+    }
+  }
+
+  // Analog/Digital clock
+  NClock {
+    id: clockLoader
+    anchors.right: parent.right
+    anchors.rightMargin: Style.marginXL
+    anchors.verticalCenter: parent.verticalCenter
+    clockStyle: Settings.data.location.analogClockInCalendar ? "analog" : "digital"
+    progressColor: Color.mOnPrimary
+    Layout.alignment: Qt.AlignVCenter
+    now: root.now
+  }
+}