Align vertical bar widgets to the icon grid

2026-07-17 16:03:49 -07:00
parent 0c8c4ea26a
commit 22791803ed
5 changed files with 75 additions and 15 deletions
@@ -1,7 +1,7 @@
 import QtQuick
 import qs.Commons

-WidgetButton {
+BarIconButton {
  id: root

  property string moduleName: ""
@@ -43,7 +43,4 @@ WidgetButton {
  useActiveColor: false
  maintainIndicatorReveal: indicatorBlock === "inactive"
  revealHost: indicatorHost
-  fontSize: Style.font.caption
-  horizontalMargin: 5
-  verticalPadding: 5
 }
@@ -14,6 +14,8 @@ BarWidget {
  readonly property string activeFormat: alt
    ? setting("formatAlt", "d MMMM 'W'ww yyyy")
    : (bar && bar.vertical ? setting("verticalFormat", "HH\n—\nmm") : setting("format", "dddd HH:mm"))
+  readonly property string displayText: formatted(displayDate)
+  readonly property var verticalLines: displayText.split("\n")

  function refresh() {
    displayDate = new Date()
@@ -54,7 +56,10 @@ BarWidget {
    id: button
    anchors.fill: parent
    bar: root.bar
-    text: root.formatted(root.displayDate)
+    text: root.vertical ? "" : root.displayText
+    labelVisible: !root.vertical
+    hasVisualContent: root.vertical ? root.verticalLines.length > 0 : text !== ""
+    fixedHeight: root.vertical ? root.verticalLines.length * Style.bar.iconSlot : -1
    horizontalMargin: 8.75
    verticalPadding: 8.75
    onPressed: function(button) {
@@ -62,5 +67,24 @@ BarWidget {
      if (button === Qt.RightButton) root.bar.run("omarchy-menu-timezone")
      else root.alt = !root.alt
    }
+
+    Column {
+      visible: root.vertical
+      anchors.fill: parent
+
+      Repeater {
+        model: root.verticalLines
+
+        OpticalGlyph {
+          required property string modelData
+          width: button.width
+          height: Style.bar.iconSlot
+          text: modelData
+          fontFamily: button.fontFamily
+          fontSize: button.fontSize
+          color: button.foreground
+        }
+      }
+    }
  }
 }
@@ -37,7 +37,7 @@ BarWidget {
  }

  visible: panelLoader.item && panelLoader.item.label !== ""
-  implicitWidth: bar && bar.vertical ? button.implicitWidth : button.implicitWidth + Style.spacing.labelGap
+  implicitWidth: button.implicitWidth
  implicitHeight: button.implicitHeight

  onBarChanged: injectPanel()
@@ -54,16 +54,12 @@ BarWidget {
    }
  }

-  WidgetButton {
+  BarIconButton {
    id: button
-    anchors.verticalCenter: parent.verticalCenter
-    x: bar && bar.vertical ? Math.round((parent.width - width) / 2) : 0
-    width: implicitWidth
-    height: implicitHeight
+    anchors.fill: parent
    bar: root.bar
    text: panelLoader.item ? panelLoader.item.label : ""
    active: panelLoader.item && panelLoader.item.klass === "active"
-    horizontalMargin: 2.5
    // Tooltip suppressed because the panel is the detail view.
    tooltipText: ""

@@ -65,6 +65,18 @@ ShellRoot {
      fail("vector icon does not share glyph geometry")
      return
    }
+    if (verticalIcon.implicitWidth !== Style.bar.sizeVertical || verticalIcon.implicitHeight !== Style.bar.iconSlot) {
+      fail("vertical icon does not use the shared slot")
+      return
+    }
+    if (verticalIndicator.implicitWidth !== Style.bar.sizeVertical || verticalIndicator.implicitHeight !== Style.bar.iconSlot) {
+      fail("vertical indicator does not use the shared slot")
+      return
+    }
+    if (Math.abs(verticalIndicator.opticalCenterErrorX) > 0.5) {
+      fail("vertical indicator is not optically centered")
+      return
+    }
    console.log("RESULT pass")
    Qt.quit()
  })
@@ -83,6 +95,20 @@ ShellRoot {
    function showTooltip(target, text) {}
  }

+  QtObject {
+    id: verticalBar
+    property bool vertical: true
+    property int barSize: Style.bar.sizeVertical
+    property string fontFamily: Style.font.family
+    property color barForeground: "white"
+    property color urgent: "red"
+    property bool foregroundAnimationEnabled: false
+    function registerClickTarget(target) {}
+    function unregisterClickTarget(target) {}
+    function hideTooltip(target) {}
+    function showTooltip(target, text) {}
+  }
+
  BarIconButton { id: bluetooth; bar: testBar; text: "󰂯" }
  BarIconButton { id: network; bar: testBar; text: "󰖩" }
  BarIconButton { id: audio; bar: testBar; text: "󰖁" }
@@ -93,6 +119,8 @@ ShellRoot {
    bar: testBar
    iconComponent: Component { Rectangle { width: 12; height: 12 } }
  }
+  BarIconButton { id: verticalIcon; bar: verticalBar; text: "\uf021" }
+  BarIndicator { id: verticalIndicator; bar: verticalBar; active: true; activeText: "󰅶" }
 }
 QML

@@ -1,5 +1,6 @@
 import QtQuick
 import Quickshell
+import qs.Commons

 ShellRoot {
  id: root
@@ -167,10 +168,24 @@ ShellRoot {
          var id = root.createdIds[j]
          root.assertTrue(root.finiteDimension(item.implicitWidth), id + " has a finite implicitWidth")
          root.assertTrue(root.finiteDimension(item.implicitHeight), id + " has a finite implicitHeight")
-          if (item && typeof item.destroy === "function") item.destroy()
        }
-        root.assertTrue(root.createdIds.length === entries.length, "all bar widgets instantiate")
-        root.writeResult()
+
+        fakeBar.vertical = true
+        fakeBar.barSize = Style.bar.sizeVertical
+
+        Qt.callLater(function() {
+          for (var k = 0; k < root.createdObjects.length; k++) {
+            var verticalItem = root.createdObjects[k]
+            var verticalId = root.createdIds[k]
+            if (verticalId === "omarchy.clock")
+              root.assertEqual(verticalItem.implicitHeight, Style.bar.iconSlot * 3, verticalId + " uses one slot per line")
+            else if (verticalId === "omarchy.weather" || verticalId === "omarchy.system-update")
+              root.assertEqual(verticalItem.implicitHeight, Style.bar.iconSlot, verticalId + " uses one vertical slot")
+            if (verticalItem && typeof verticalItem.destroy === "function") verticalItem.destroy()
+          }
+          root.assertTrue(root.createdIds.length === entries.length, "all bar widgets instantiate")
+          root.writeResult()
+        })
      })
    }
  }