diff --git a/Panel.qml b/Panel.qml index 0740899..0d063a0 100644 --- a/Panel.qml +++ b/Panel.qml @@ -391,7 +391,17 @@ Panel { Row { id: barContent anchors.fill: parent - spacing: Style.space(4) + spacing: Style.space(1) + + // Bar sections lay their widgets out with spacing: 0, so separation between + // neighbouring widgets comes from whatever slack each one reserves. The + // slot is trimmed tight to the glyph below, which leaves nothing between + // this icon and the Offscale mark to its left — hence an explicit spacer. + Item { + width: Style.space(7) + height: 1 + anchors.verticalCenter: parent.verticalCenter + } BarIconButton { id: button @@ -399,6 +409,18 @@ Panel { bar: root.bar text: "󱚣" active: root.alarming + // Stock draws this glyph at Style.bar.iconFont (26px at base-size 24) + // inside a Style.bar.iconCanvas box (32px), in a Style.bar.iconSlot of + // reserved width (54px). That left the mark small next to the Offscale + // logo, and ~11px of dead slot either side of it — which read as the + // label floating away from the icon. + // + // Sized to match the Offscale mark (32px), with the canvas just big + // enough to hold it and the slot trimmed to the canvas so the label sits + // right beside the glyph rather than beyond its padding. + fontSize: Style.space(20) + opticalSize: Style.space(21) + slotSize: Style.space(21) onPressed: function(buttonCode) { if (buttonCode === Qt.RightButton) root.launchAgent() else if (buttonCode === Qt.MiddleButton) root.selectProvider(root.providerIndex + 1) @@ -419,6 +441,10 @@ Panel { // A step below the icon font: it is a label, not a glyph, and the bar is // crowded. fontSize: Style.font.bodySmall + // WidgetButton defaults horizontalMargin to 8.5, which at this scale is + // ~17px of padding on each side — that, not the Row spacing, was what + // held the label away from the icon. + horizontalMargin: 1 anchors.verticalCenter: parent.verticalCenter onPressed: function(buttonCode) { if (buttonCode === Qt.RightButton) root.launchAgent()