Align network panel details

This commit is contained in:
David Heinemeier Hansson
2026-06-06 17:08:02 +02:00
parent 166b395203
commit 43e758ed32
+33 -48
View File
@@ -1,5 +1,6 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts
import Quickshell import Quickshell
import Quickshell.Io import Quickshell.Io
import Quickshell.Networking import Quickshell.Networking
@@ -795,51 +796,44 @@ Panel {
width: parent.width width: parent.width
spacing: Style.spacing.labelGap spacing: Style.spacing.labelGap
Row { GridLayout {
visible: root.info.rx_bytes !== undefined
width: parent.width width: parent.width
spacing: Style.space(20) columns: 4
columnSpacing: Style.space(20)
rowSpacing: Style.spacing.labelGap
Column { InfoLabel { visible: root.info.rx_bytes !== undefined; text: "Receiving" }
width: (parent.width - parent.spacing) / 2 DetailValue { visible: root.info.rx_bytes !== undefined; text: root.formatRate(root.downloadRate) }
spacing: Style.spacing.labelGap InfoLabel { visible: root.info.rx_bytes !== undefined; text: "Sending" }
InfoPair { label: "Receiving"; value: root.formatRate(root.downloadRate) } DetailValue { visible: root.info.rx_bytes !== undefined; text: root.formatRate(root.uploadRate) }
InfoPair { label: "Downloaded"; value: root.formatBytes(parseFloat(root.info.rx_bytes || "0")) }
}
Column { InfoLabel { visible: root.info.rx_bytes !== undefined; text: "Downloaded" }
width: (parent.width - parent.spacing) / 2 DetailValue { visible: root.info.rx_bytes !== undefined; text: root.formatBytes(parseFloat(root.info.rx_bytes || "0")) }
spacing: Style.spacing.labelGap InfoLabel { visible: root.info.rx_bytes !== undefined; text: "Uploaded" }
InfoPair { label: "Sending"; value: root.formatRate(root.uploadRate) } DetailValue { visible: root.info.rx_bytes !== undefined; text: root.formatBytes(parseFloat(root.info.tx_bytes || "0")) }
InfoPair { label: "Uploaded"; value: root.formatBytes(parseFloat(root.info.tx_bytes || "0")) }
}
}
Row { InfoLabel {
width: parent.width visible: !!root.info.ip || !!root.info.gateway
spacing: Style.space(20) text: root.info.ip ? "IP Address" : ""
Column { }
width: (parent.width - parent.spacing) / 2 DetailValue {
InfoPair { visible: !!root.info.ip || !!root.info.gateway
visible: !!root.info.ip text: root.info.ip || ""
label: "IP Address" copyable: !!root.info.ip
value: root.info.ip || ""
copyable: true
tooltipText: "Copy IP" tooltipText: "Copy IP"
} }
InfoLabel {
visible: !!root.info.ip || !!root.info.gateway
text: root.info.gateway ? "Gateway" : ""
} }
Column { DetailValue {
width: (parent.width - parent.spacing) / 2 visible: !!root.info.ip || !!root.info.gateway
InfoPair { text: root.info.gateway || ""
visible: !!root.info.gateway copyable: !!root.info.gateway
label: "Gateway"
value: root.info.gateway || ""
copyable: true
tooltipText: "Copy gateway" tooltipText: "Copy gateway"
} }
} }
} }
}
// DNS provider selection. // DNS provider selection.
PanelSeparator { PanelSeparator {
@@ -1314,28 +1308,20 @@ Panel {
onTriggered: if (!networkProc.running) networkProc.running = true onTriggered: if (!networkProc.running) networkProc.running = true
} }
component InfoPair: Row { component DetailValue: InfoValue {
property string label: ""
property string value: ""
property bool copyable: false property bool copyable: false
property string tooltipText: "Copy to clipboard" property string tooltipText: "Copy to clipboard"
width: parent.width Layout.fillWidth: true
spacing: Style.space(8) horizontalAlignment: Text.AlignRight
InfoLabel { text: label }
Item { width: Math.max(0, parent.width - parent.children[0].implicitWidth - valueText.implicitWidth - parent.spacing * 2); height: 1 }
InfoValue {
id: valueText
text: value
MouseArea { MouseArea {
id: valueMouse id: valueMouse
anchors.fill: parent anchors.fill: parent
enabled: copyable && valueText.text !== "" enabled: copyable && parent.text !== ""
hoverEnabled: enabled hoverEnabled: enabled
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
onClicked: root.copyToClipboard(valueText.text) onClicked: root.copyToClipboard(parent.text)
} }
PanelToolTip { PanelToolTip {
@@ -1344,7 +1330,6 @@ Panel {
fontFamily: root.bar.fontFamily fontFamily: root.bar.fontFamily
} }
} }
}
component InfoLabel: Text { component InfoLabel: Text {
color: root.bar.foreground color: root.bar.foreground