feat(quickshell): add dense telemetry bar #4

Open
luna wants to merge 18 commits from feat/quickshell-dense-bar into master
2 changed files with 50 additions and 8 deletions
Showing only changes of commit bbe35dd72e - Show all commits
@@ -100,12 +100,15 @@ Scope {
x: window.margin x: window.margin
y: window.margin y: window.margin
width: window.width - window.margin * 2 width: window.width - window.margin * 2
spacing: 8 spacing: 0
HostPanel { HostPanel {
id: hostPanel id: hostPanel
expanded: root.expanded expanded: root.expanded
// Vitals butts against its right edge; the left end of the row is free.
rightChamfer: false
toggleOnClick: false toggleOnClick: false
Layout.preferredWidth: 350 Layout.preferredWidth: 350
Layout.fillHeight: true Layout.fillHeight: true
@@ -115,6 +118,10 @@ Scope {
id: vitalsPanel id: vitalsPanel
expanded: root.expanded expanded: root.expanded
// Host on the left, the spacer on the right — and a spacer is not a
// panel, so that edge keeps its cut.
leftChamfer: false
toggleOnClick: false toggleOnClick: false
Layout.preferredWidth: 500 Layout.preferredWidth: 500
Layout.fillHeight: true Layout.fillHeight: true
@@ -118,6 +118,23 @@ Item {
// which turns the outline inside out for the last frames of a collapse. // which turns the outline inside out for the last frames of a collapse.
readonly property real activeChamfer: Math.max(2, Math.min(panel.chamfer, panel.height / 2 - 1)) readonly property real activeChamfer: Math.max(2, Math.min(panel.chamfer, panel.height / 2 - 1))
// The silhouette has exactly two cut corners: top-right and bottom-left.
// Turn one off where another panel butts against that side, so a row laid
// out with no spacing reads as one continuous strip instead of a line of
// separate tiles. A cut corner costs its side nothing when disabled — the
// edge simply runs square into the neighbour.
property bool rightChamfer: true // top-right cut
property bool leftChamfer: true // bottom-left cut
readonly property real rightCut: panel.rightChamfer ? panel.activeChamfer : 0
readonly property real leftCut: panel.leftChamfer ? panel.activeChamfer : 0
// The seam where two panels meet is drawn a step heavier and in accent, so
// a chamfer-less join reads as a deliberate connector rather than as two
// outlines that happen to touch.
property int outlineWidth: 1
readonly property int connectorWidth: panel.outlineWidth + 2
Shape { Shape {
id: panelShape id: panelShape
anchors.fill: parent anchors.fill: parent
@@ -127,16 +144,34 @@ Item {
ShapePath { ShapePath {
fillColor: Theme.surface fillColor: Theme.surface
strokeColor: Theme.hair strokeColor: Theme.hair
strokeWidth: 1 strokeWidth: panel.outlineWidth
startX: 0; startY: panel.offsetY startX: 0; startY: panel.offsetY
PathLine { x: panelShape.width - panel.activeChamfer; y: panel.offsetY } PathLine { x: panelShape.width - panel.rightCut; y: panel.offsetY }
PathLine { x: panelShape.width; y: panel.activeChamfer } PathLine { x: panelShape.width; y: panel.rightChamfer ? panel.activeChamfer : panel.offsetY }
PathLine { x: panelShape.width; y: panelShape.height } PathLine { x: panelShape.width; y: panelShape.height }
PathLine { x: panel.activeChamfer; y: panelShape.height } PathLine { x: panel.leftCut; y: panelShape.height }
PathLine { x: 0; y: panelShape.height - panel.activeChamfer } PathLine { x: 0; y: panelShape.height - panel.leftCut }
PathLine { x: 0; y: panel.offsetY } PathLine { x: 0; y: panel.offsetY }
} }
// Connecting edges — drawn only on a side whose chamfer is off, which is
// exactly where a neighbour butts against this panel.
ShapePath {
fillColor: "transparent"
strokeColor: Theme.accent
strokeWidth: panel.rightChamfer ? 0 : panel.connectorWidth
startX: panelShape.width; startY: panel.offsetY
PathLine { x: panelShape.width; y: panelShape.height }
}
ShapePath {
fillColor: "transparent"
strokeColor: Theme.accent
strokeWidth: panel.leftChamfer ? 0 : panel.connectorWidth
startX: 0; startY: panel.offsetY
PathLine { x: 0; y: panelShape.height }
}
// Upper left accent line // Upper left accent line
ShapePath { ShapePath {
@@ -154,8 +189,8 @@ Item {
fillColor: Theme.accent fillColor: Theme.accent
strokeWidth: 0 strokeWidth: 0
startX: panelShape.width; startY: panelShape.height startX: panelShape.width; startY: panelShape.height
PathLine { x: panelShape.width - Math.min(49, panelShape.width / 3); y: panelShape.height } PathLine { x: panelShape.width - panel.accentLineWidth; y: panelShape.height }
PathLine { x: panelShape.width - Math.min(49, panelShape.width / 3); y: panelShape.height - panel.accentLineThickness } PathLine { x: panelShape.width - panel.accentLineWidth; y: panelShape.height - panel.accentLineThickness }
PathLine { x: panelShape.width; y: panelShape.height - panel.accentLineThickness } PathLine { x: panelShape.width; y: panelShape.height - panel.accentLineThickness }
PathLine { x: panelShape.width; y: panelShape.height } PathLine { x: panelShape.width; y: panelShape.height }
} }