updated theme
This commit is contained in:
+78
-66
@@ -5,13 +5,13 @@ import "root:/config"
|
||||
import "root:/components"
|
||||
import "root:/services"
|
||||
|
||||
// One bar per monitor.
|
||||
// One bar per monitor, and one surface.
|
||||
//
|
||||
// Identity, workspaces and the focused window on the left; the clock on the
|
||||
// right. Status moved to the rail and the player and metrics moved to the dock,
|
||||
// which is what buys the room for this to breathe — nothing here is fighting
|
||||
// for horizontal space any more, so the title gets a generous cap and the type
|
||||
// can run large instead of being squeezed to fit between two clusters.
|
||||
// Identity and workspaces on the left, the player, metrics and clock on the
|
||||
// right, all inside a single continuous slab and separated by hairline rules
|
||||
// rather than by gaps. Nothing floats and nothing has its own card. Status
|
||||
// lives on the rail, which is likewise one slab — two surfaces, not a dozen
|
||||
// islands.
|
||||
PanelWindow {
|
||||
id: root
|
||||
|
||||
@@ -37,87 +37,99 @@ PanelWindow {
|
||||
exclusiveZone: Theme.barHeight + Theme.barMargin
|
||||
color: "transparent"
|
||||
|
||||
// The slab. One panel, full width, flat fill, black keyline.
|
||||
P5Panel {
|
||||
id: slab
|
||||
anchors.fill: parent
|
||||
lean: Theme.skew
|
||||
chop: Theme.cut
|
||||
chopCorners: [1, 3]
|
||||
padding: 0
|
||||
fill: Theme.surface
|
||||
fillOpacity: 1.0
|
||||
border: Theme.alpha(Theme.outline, 0.9)
|
||||
borderWidth: 1
|
||||
slash: true
|
||||
slashColor: Theme.accent
|
||||
slashWidth: 5
|
||||
}
|
||||
|
||||
readonly property real edgeInset: Theme.barHeight * Theme.skew + Theme.padM
|
||||
|
||||
// ------------------------------------------------------------------ left
|
||||
Row {
|
||||
id: leftCluster
|
||||
id: leftGroup
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: root.edgeInset
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.barGap
|
||||
spacing: 0
|
||||
|
||||
Sigil {
|
||||
id: sigil
|
||||
screenRef: root.modelData
|
||||
}
|
||||
|
||||
BarPill {
|
||||
id: spacesPill
|
||||
accent: Theme.primary
|
||||
padding: Theme.padM
|
||||
interactive: false
|
||||
lean: Theme.leanFor(1)
|
||||
chop: Theme.chopFor(1)
|
||||
chopCorners: Theme.cornersFor(1)
|
||||
implicitWidth: spacesRow.implicitWidth + contentPad * 2
|
||||
Divider {}
|
||||
|
||||
Row {
|
||||
id: spacesRow
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
spacing: Theme.padL
|
||||
Workspaces {
|
||||
id: spaces
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
screenRef: root.modelData
|
||||
}
|
||||
|
||||
Workspaces {
|
||||
id: spaces
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
screenRef: root.modelData
|
||||
}
|
||||
Divider {}
|
||||
|
||||
Rectangle {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 1
|
||||
height: 18
|
||||
color: Theme.alpha(Theme.outline, 0.8)
|
||||
}
|
||||
|
||||
ActiveWindow {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
screenRef: root.modelData
|
||||
|
||||
// The only thing competing for this row is the clock, so the
|
||||
// title can have most of the bar.
|
||||
maxWidth: Math.max(120, root.width
|
||||
- sigil.implicitWidth
|
||||
- clock.implicitWidth
|
||||
- spaces.implicitWidth
|
||||
- Theme.barGap * 3
|
||||
- Theme.padL * 2
|
||||
- Theme.padXL
|
||||
- spacesPill.contentPad * 2)
|
||||
}
|
||||
}
|
||||
ActiveWindow {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
screenRef: root.modelData
|
||||
maxWidth: Math.max(120, root.width
|
||||
- leftGroup.x - rightGroup.width - sigil.implicitWidth
|
||||
- spaces.implicitWidth - root.edgeInset * 2 - Theme.padXL)
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------- right
|
||||
Clock {
|
||||
id: clock
|
||||
Row {
|
||||
id: rightGroup
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: root.edgeInset
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
screenRef: root.modelData
|
||||
spacing: 0
|
||||
|
||||
MediaPill {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
|
||||
Divider {}
|
||||
|
||||
Resources {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
|
||||
Divider {}
|
||||
|
||||
Clock {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
}
|
||||
|
||||
// A hairline of crimson under the whole bar — the Persona 5 underscore.
|
||||
Rectangle {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: 1
|
||||
gradient: Gradient {
|
||||
orientation: Gradient.Horizontal
|
||||
GradientStop { position: 0.0; color: "transparent" }
|
||||
GradientStop { position: 0.18; color: Theme.alpha(Theme.accent, 0.55) }
|
||||
GradientStop { position: 0.5; color: Theme.alpha(Theme.primary, 0.35) }
|
||||
GradientStop { position: 0.82; color: Theme.alpha(Theme.accent, 0.55) }
|
||||
GradientStop { position: 1.0; color: "transparent" }
|
||||
// A hairline rule between modules, sheared to the house angle. This is what
|
||||
// divides the bar now — gaps between cards are what made it look scattered.
|
||||
component Divider: Item {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
implicitWidth: Theme.padM * 2
|
||||
implicitHeight: Theme.barHeight
|
||||
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
width: 1
|
||||
height: 20
|
||||
color: Theme.alpha(Theme.outline, 0.9)
|
||||
|
||||
transform: Matrix4x4 {
|
||||
matrix: Qt.matrix4x4(1, -Theme.skew, 0, 20 * Theme.skew,
|
||||
0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user