final theme

quickshell/popouts/BatteryPopout.qml

@@ -9,7 +9,11 @@ Popout {
     id: root
 
     contentWidth: 310
-    contentHeight: 296
+    // Derived: the charge block is a different height from the dial it
+    // replaced, and the health line comes and goes.
+    contentHeight: header.height + Theme.padM + readout.height + Theme.padM
+        + bar.height + Theme.padM + detailText.implicitHeight + Theme.padL
+        + suspendButton.height + Theme.padM * 2
 
     PopoutSurface {
         anchors.fill: parent
@@ -26,27 +30,42 @@ Popout {
             subtitle: Battery.charging ? "CHARGING" : (Battery.onBattery ? "ON BATTERY" : "AC")
         }
 
-        Row {
+        // The dial that used to sit here duplicated the meter below it and was
+        // the only curve in the shell. The charge is now simply set large, and
+        // the MeterBar underneath is left to carry the level on its own.
+        Item {
             id: readout
             anchors.top: header.bottom
             anchors.topMargin: Theme.padM
             anchors.left: parent.left
             anchors.right: parent.right
-            spacing: Theme.padM
+            height: Math.max(charge.height, detail.height)
 
-            Gauge {
-                width: 92; height: 92
-                value: Battery.percent
-                label: "CHARGE"
-                arcColor: Battery.tint
-                readout: Math.round(Battery.percent) + "%"
+            Column {
+                id: charge
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+                // No "CHARGE" caption under the number. It landed directly on
+                // top of the meter, and between the header and a full-width
+                // charge bar there was nothing left for it to disambiguate.
+                SplitText {
+                    text: Math.round(Battery.percent) + "%"
+                    pixelSize: Theme.fsHuge
+                    color: Battery.tint
+                    split: 2.5
+                    splitOpacity: 0.7
+                }
             }
 
             Column {
+                id: detail
+                anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
                 spacing: Theme.padS
 
                 SplitText {
+                    anchors.right: parent.right
+                    horizontalAlignment: Text.AlignRight
                     text: Battery.timeLabel
                     pixelSize: Theme.fsBody
                     split: 1.1
@@ -57,6 +76,8 @@ Popout {
                     text: Battery.changeRate > 0
                         ? Battery.changeRate.toFixed(1) + " W " + (Battery.charging ? "in" : "draw")
                         : "idle"
+                    anchors.right: parent.right
+                    horizontalAlignment: Text.AlignRight
                     color: Theme.subtext
                     font.family: Theme.fontMono
                     font.pixelSize: Theme.fsSmall
@@ -66,6 +87,8 @@ Popout {
                 Text {
                     visible: Battery.health > 0
                     text: "Health " + Math.round(Battery.health) + "%"
+                    anchors.right: parent.right
+                    horizontalAlignment: Text.AlignRight
                     color: Battery.health < 70 ? Theme.warn : Theme.muted
                     font.family: Theme.fontMono
                     font.pixelSize: Theme.fsMicro
@@ -88,9 +111,26 @@ Popout {
             activeColor: Battery.tint
         }
 
+        Text {
+            id: detailText
+            anchors.top: bar.bottom
+            anchors.topMargin: Theme.padM
+            anchors.left: parent.left
+            anchors.right: parent.right
+            text: Battery.detail
+            wrapMode: Text.WordWrap
+            color: Theme.muted
+            font.family: Theme.fontMono
+            font.pixelSize: Theme.fsMicro
+            renderType: Text.NativeRendering
+        }
+
+        // Follows the detail line rather than being pinned to the bottom of a
+        // fixed-height panel, which is what left a dead band above it.
         P5Button {
             id: suspendButton
-            anchors.bottom: parent.bottom
+            anchors.top: detailText.bottom
+            anchors.topMargin: Theme.padL
             anchors.left: parent.left
             text: "Suspend"
             icon: "󰤄"
@@ -99,21 +139,5 @@ Popout {
                 Actions.suspend();
             }
         }
-
-        Text {
-            anchors.top: bar.bottom
-            anchors.topMargin: Theme.padS
-            anchors.bottom: suspendButton.top
-            anchors.bottomMargin: Theme.padS
-            anchors.left: parent.left
-            anchors.right: parent.right
-            text: Battery.detail
-            wrapMode: Text.WordWrap
-            verticalAlignment: Text.AlignTop
-            color: Theme.muted
-            font.family: Theme.fontMono
-            font.pixelSize: Theme.fsMicro
-            renderType: Text.NativeRendering
-        }
     }
 }