feat(quickshell): add dense telemetry bar #4
@@ -69,11 +69,6 @@ Item {
|
||||
onTriggered: root.now = new Date()
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: root.voidColor
|
||||
}
|
||||
|
||||
// Faint drafting grid; no gradient and deliberately subordinate to data.
|
||||
Repeater {
|
||||
model: Math.ceil(root.width / 40)
|
||||
@@ -115,7 +110,7 @@ Item {
|
||||
anchors.fill: parent
|
||||
spacing: 8
|
||||
|
||||
TelemetryPanel {
|
||||
StatusBarPanel {
|
||||
width: array.identityWidth
|
||||
height: array.height
|
||||
panelId: "001"
|
||||
@@ -198,7 +193,7 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
TelemetryPanel {
|
||||
StatusBarPanel {
|
||||
width: array.flexWidth
|
||||
height: array.height
|
||||
panelId: "02"
|
||||
@@ -245,7 +240,7 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
TelemetryPanel {
|
||||
StatusBarPanel {
|
||||
width: array.radarWidth
|
||||
height: array.height
|
||||
panelId: "03"
|
||||
@@ -259,7 +254,7 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
TelemetryPanel {
|
||||
StatusBarPanel {
|
||||
width: array.flexWidth
|
||||
height: array.height
|
||||
panelId: "04"
|
||||
@@ -306,7 +301,7 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
TelemetryPanel {
|
||||
StatusBarPanel {
|
||||
width: array.stateWidth
|
||||
height: array.height
|
||||
panelId: "05"
|
||||
@@ -362,7 +357,7 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
TelemetryPanel {
|
||||
StatusBarPanel {
|
||||
id: rail
|
||||
x: 12
|
||||
y: 108
|
||||
@@ -555,104 +550,6 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
component TelemetryPanel: Item {
|
||||
id: panel
|
||||
property string panelId: ""
|
||||
property string title: ""
|
||||
property string meta: ""
|
||||
property bool showHeader: true
|
||||
property int chamfer: 13
|
||||
|
||||
Shape {
|
||||
id: panelShape
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
ShapePath {
|
||||
fillColor: root.voidColor
|
||||
strokeColor: root.hairColor
|
||||
strokeWidth: 1
|
||||
startX: 1; startY: 1
|
||||
PathLine { x: panelShape.width - panel.chamfer; y: 1 }
|
||||
PathLine { x: panelShape.width - 1; y: panel.chamfer }
|
||||
PathLine { x: panelShape.width - 1; y: panelShape.height - 8 }
|
||||
PathLine { x: panelShape.width - 8; y: panelShape.height - 1 }
|
||||
PathLine { x: 16; y: panelShape.height - 1 }
|
||||
PathLine { x: 1; y: panelShape.height - 16 }
|
||||
PathLine { x: 1; y: 1 }
|
||||
}
|
||||
ShapePath {
|
||||
fillColor: root.accentColor
|
||||
strokeWidth: 0
|
||||
startX: 1; startY: 1
|
||||
PathLine { x: Math.min(49, panelShape.width / 3); y: 1 }
|
||||
PathLine { x: Math.min(49, panelShape.width / 3); y: 3 }
|
||||
PathLine { x: 1; y: 3 }
|
||||
PathLine { x: 1; y: 1 }
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: panel.showHeader
|
||||
x: 1; y: 20
|
||||
width: parent.width - 2
|
||||
height: 1
|
||||
color: root.inkColor
|
||||
opacity: 0.12
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: panel.showHeader
|
||||
x: 9; y: 5
|
||||
width: panel.panelId.length > 2 ? 29 : 24
|
||||
height: 11
|
||||
color: root.accentColor
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: panel.panelId
|
||||
color: root.voidColor
|
||||
font.family: root.microFont
|
||||
font.pixelSize: 7
|
||||
font.bold: true
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
visible: panel.showHeader
|
||||
x: 40; y: 5
|
||||
width: parent.width - 105
|
||||
text: panel.title
|
||||
color: root.inkColor
|
||||
font.family: root.displayFont
|
||||
font.pixelSize: 9
|
||||
font.bold: true
|
||||
font.letterSpacing: 1.1
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
MicroText {
|
||||
visible: panel.showHeader && panel.meta.length > 0
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
y: 6
|
||||
text: panel.meta
|
||||
width: Math.min(80, parent.width / 4)
|
||||
horizontalAlignment: Text.AlignRight
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
Row {
|
||||
visible: panel.showHeader
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 10
|
||||
y: 14
|
||||
spacing: 2
|
||||
Repeater {
|
||||
model: 5
|
||||
Rectangle { required property int index; width: 3; height: 1; color: root.accentColor }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component MetricBlock: Item {
|
||||
id: metric
|
||||
property string label: ""
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
|
||||
// Chamfered panel chrome for the dense status rail: outline, corner accent
|
||||
// lines, and the optional header strip (id chip / title / meta / tick marks).
|
||||
// Content is supplied as children by the call site.
|
||||
//
|
||||
// Palette and fonts are properties with defaults rather than references to the
|
||||
// parent, because a component in its own file has no access to the enclosing
|
||||
// scope. The defaults match DenseBarContent's, which is the repo's existing
|
||||
// per-component convention (see quickshell/CLAUDE.md) — a shared theme
|
||||
// singleton would be the place to collapse the duplication.
|
||||
Item {
|
||||
id: panel
|
||||
|
||||
property string panelId: ""
|
||||
property string title: ""
|
||||
property string meta: ""
|
||||
property bool showHeader: true
|
||||
property int chamfer: 13
|
||||
property int offsetY: 2
|
||||
property int accentLineThickness: 3
|
||||
|
||||
property color voidColor: "#0a0a0a"
|
||||
property color inkColor: "#dedede"
|
||||
property color mutedColor: "#858585"
|
||||
property color accentColor: "#e8722a"
|
||||
property color hairColor: Qt.rgba(0.87, 0.87, 0.87, 0.28)
|
||||
property string displayFont: "DepartureMono Nerd Font"
|
||||
property string microFont: "DejaVu Sans Mono"
|
||||
|
||||
Shape {
|
||||
id: panelShape
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
fillColor: panel.voidColor
|
||||
strokeColor: panel.hairColor
|
||||
strokeWidth: 1
|
||||
startX: 0; startY: panel.offsetY
|
||||
PathLine { x: panelShape.width - panel.chamfer; y: panel.offsetY }
|
||||
PathLine { x: panelShape.width; y: panel.chamfer }
|
||||
PathLine { x: panelShape.width; y: panelShape.height }
|
||||
PathLine { x: panel.chamfer; y: panelShape.height }
|
||||
PathLine { x: 0; y: panelShape.height - panel.chamfer }
|
||||
PathLine { x: 0; y: panel.offsetY }
|
||||
}
|
||||
|
||||
// Upper left accent line
|
||||
ShapePath {
|
||||
fillColor: panel.accentColor
|
||||
strokeWidth: 0
|
||||
startX: 0; startY: 0
|
||||
PathLine { x: Math.min(49, panelShape.width / 3); y: 0 }
|
||||
PathLine { x: Math.min(49, panelShape.width / 3); y: panel.accentLineThickness }
|
||||
PathLine { x: 0; y: panel.accentLineThickness }
|
||||
PathLine { x: 0; y: 0 }
|
||||
}
|
||||
|
||||
// Lower right accent line
|
||||
ShapePath {
|
||||
fillColor: panel.accentColor
|
||||
strokeWidth: 0
|
||||
startX: panelShape.width; startY: panelShape.height
|
||||
PathLine { x: panelShape.width - Math.min(49, panelShape.width / 3); y: panelShape.height }
|
||||
PathLine { x: panelShape.width - Math.min(49, panelShape.width / 3); y: panelShape.height - panel.accentLineThickness }
|
||||
PathLine { x: panelShape.width; y: panelShape.height - panel.accentLineThickness }
|
||||
PathLine { x: panelShape.width; y: panelShape.height }
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: panel.showHeader
|
||||
x: 1; y: 22
|
||||
width: parent.width - 2
|
||||
height: 1
|
||||
color: panel.inkColor
|
||||
opacity: 0.12
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: panel.showHeader
|
||||
x: 5; y: 7
|
||||
width: panel.panelId.length > 2 ? 29 : 24
|
||||
height: 11
|
||||
color: panel.accentColor
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: panel.panelId
|
||||
color: panel.voidColor
|
||||
font.family: panel.microFont
|
||||
font.pixelSize: 8
|
||||
font.bold: true
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
visible: panel.showHeader
|
||||
x: 40; y: 7
|
||||
width: parent.width - 105
|
||||
text: panel.title
|
||||
color: panel.inkColor
|
||||
font.family: panel.displayFont
|
||||
font.pixelSize: 9
|
||||
font.bold: true
|
||||
font.letterSpacing: 1.1
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
// Inlined rather than reusing DenseBarContent's MicroText, which is an
|
||||
// inline component and therefore not visible from another file.
|
||||
Text {
|
||||
visible: panel.showHeader && panel.meta.length > 0
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
y: 6
|
||||
text: panel.meta
|
||||
width: Math.min(80, parent.width / 4)
|
||||
color: panel.mutedColor
|
||||
font.family: panel.microFont
|
||||
font.pixelSize: 6
|
||||
font.letterSpacing: 0.7
|
||||
horizontalAlignment: Text.AlignRight
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
Row {
|
||||
visible: panel.showHeader
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 10
|
||||
y: 14
|
||||
spacing: 2
|
||||
Repeater {
|
||||
model: 5
|
||||
Rectangle { required property int index; width: 4; height: 2; color: panel.accentColor }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user