From be052339d88226d6a2e8f9212766230d1220e19f Mon Sep 17 00:00:00 2001 From: Ayaan Hafeez Date: Fri, 9 Oct 2026 02:08:26 -0600 Subject: [PATCH] Fix lopsided cursor highlight on network panel header actions (#8787) * Fix lopsided cursor highlight on network panel header actions The QR and speed-test header buttons used raw Button components with asymmetric horizontal/vertical padding, producing a highlight box wider than tall around their near-square icons. Swap them for PanelActionButton, the canonical square inline-action component already used elsewhere in the kit (e.g. connectPwBtn), which sizes itself symmetrically around the icon. Fixes #8782 Co-Authored-By: Claude Sonnet 5 * Center icons in PanelActionButton on whole pixels A fractional size and anchors.centerIn put the glyph on half-pixel coordinates, so it rounded a pixel off the center of the fill: the speed-test icon sat low in the network header. Round the size, make it odd so odd-width glyphs get even margins, and place the icon on whole pixels. Co-authored-by: Fabian Behrendt <7931874+fabianbehrendt@users.noreply.github.com> --------- Co-authored-by: Claude Sonnet 5 Co-authored-by: Fabian Behrendt <7931874+fabianbehrendt@users.noreply.github.com> --- shell/Ui/PanelActionButton.qml | 8 ++++++-- shell/plugins/panels/network/Panel.qml | 12 ++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/shell/Ui/PanelActionButton.qml b/shell/Ui/PanelActionButton.qml index d93d1be5..ab19391e 100644 --- a/shell/Ui/PanelActionButton.qml +++ b/shell/Ui/PanelActionButton.qml @@ -34,7 +34,9 @@ BorderSurface { property color hoverColor: foreground property string fontFamily: Style.font.family property real fontSize: Style.font.icon - property real size: Math.max(Style.space(22), fontSize + Style.spacing.sm * 2) + // Whole and odd, so an icon glyph (usually an odd number of pixels wide) + // has the same space on both sides instead of one pixel more on one side. + property real size: Math.round(Math.max(Style.space(22), fontSize + Style.spacing.sm * 2)) | 1 property bool focusable: false property bool hasCursor: false @@ -71,7 +73,9 @@ BorderSurface { Text { textFormat: Text.PlainText - anchors.centerIn: parent + // Snap to whole pixels so the glyph doesn't round away from the fill's center. + x: Math.round((root.width - width) / 2) + y: Math.round((root.height - height) / 2) text: root.iconText color: root.enabled ? (root._hot ? root.hoverColor : root.foreground) diff --git a/shell/plugins/panels/network/Panel.qml b/shell/plugins/panels/network/Panel.qml index 3cdec3e5..213031c9 100644 --- a/shell/plugins/panels/network/Panel.qml +++ b/shell/plugins/panels/network/Panel.qml @@ -1246,32 +1246,28 @@ Panel { anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - Button { + PanelActionButton { id: qrAction visible: root.canShareWifi iconText: "󰐲" tooltipText: "Show QR code" foreground: root.bar.foreground fontFamily: root.bar.fontFamily - iconSize: Style.font.subtitle * 1.5 - horizontalPadding: Style.space(5) - verticalPadding: Style.space(2) + fontSize: Style.font.subtitle * 1.5 hasCursor: root.qrHeaderHasCursor Layout.alignment: Qt.AlignVCenter onHovered: function(on) { if (on) root.setHeaderCursor(root.qrHeaderIndex) } onClicked: root.summonWifiQr() } - Button { + PanelActionButton { id: speedAction visible: root.canRunSpeedTest iconText: "󰓅" tooltipText: "Run a speed test" foreground: root.bar.foreground fontFamily: root.bar.fontFamily - iconSize: Style.font.subtitle * 1.5 - horizontalPadding: Style.space(5) - verticalPadding: Style.space(2) + fontSize: Style.font.subtitle * 1.5 hasCursor: root.speedHeaderHasCursor Layout.alignment: Qt.AlignVCenter onHovered: function(on) { if (on) root.setHeaderCursor(root.speedHeaderIndex) }