feat(quickshell): add dense telemetry bar #4
@@ -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 }
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user