updated style
This commit is contained in:
+21
-57
@@ -7,10 +7,11 @@ import "root:/services"
|
||||
|
||||
// One bar per monitor.
|
||||
//
|
||||
// Layout is three clusters: identity and system state on the left, the clock
|
||||
// and player dead centre, controls on the right. The centre is genuinely
|
||||
// centred, so the left cluster's window title is capped at whatever space is
|
||||
// actually left over — otherwise the clusters overlap on a 1080p panel.
|
||||
// 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.
|
||||
PanelWindow {
|
||||
id: root
|
||||
|
||||
@@ -36,10 +37,6 @@ PanelWindow {
|
||||
exclusiveZone: Theme.barHeight + Theme.barMargin
|
||||
color: "transparent"
|
||||
|
||||
// Half the space not taken by the centre cluster, minus breathing room.
|
||||
readonly property real sideBudget:
|
||||
(width - centreCluster.width) / 2 - Theme.barGap * 2
|
||||
|
||||
// ------------------------------------------------------------------ left
|
||||
Row {
|
||||
id: leftCluster
|
||||
@@ -55,15 +52,18 @@ PanelWindow {
|
||||
BarPill {
|
||||
id: spacesPill
|
||||
accent: Theme.primary
|
||||
padding: Theme.padS
|
||||
padding: Theme.padM
|
||||
interactive: false
|
||||
lean: Theme.leanFor(1)
|
||||
chop: Theme.chopFor(1)
|
||||
chopCorners: Theme.cornersFor(1)
|
||||
implicitWidth: spacesRow.implicitWidth + contentPad * 2
|
||||
|
||||
Row {
|
||||
id: spacesRow
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
spacing: Theme.padM
|
||||
spacing: Theme.padL
|
||||
|
||||
Workspaces {
|
||||
id: spaces
|
||||
@@ -82,63 +82,27 @@ PanelWindow {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
screenRef: root.modelData
|
||||
|
||||
// Everything else on this side is fixed width, so the title
|
||||
// gets whatever remains.
|
||||
maxWidth: Math.max(70, root.sideBudget
|
||||
// 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
|
||||
- resources.implicitWidth
|
||||
- clock.implicitWidth
|
||||
- spaces.implicitWidth
|
||||
- Theme.barGap * 2
|
||||
- Theme.padM * 3
|
||||
- spacesPill.leanInset)
|
||||
- Theme.barGap * 3
|
||||
- Theme.padL * 2
|
||||
- Theme.padXL
|
||||
- spacesPill.contentPad * 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Resources {
|
||||
id: resources
|
||||
screenRef: root.modelData
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- centre
|
||||
Row {
|
||||
id: centreCluster
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.barGap
|
||||
|
||||
MediaPill {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
|
||||
Clock {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------- right
|
||||
Row {
|
||||
id: rightCluster
|
||||
Clock {
|
||||
id: clock
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.barGap
|
||||
|
||||
Tray {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
|
||||
Status {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
|
||||
NotifButton {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
|
||||
PowerButton {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
screenRef: root.modelData
|
||||
}
|
||||
|
||||
// A hairline of crimson under the whole bar — the Persona 5 underscore.
|
||||
|
||||
@@ -11,10 +11,16 @@ Item {
|
||||
property bool active: false
|
||||
property bool slash: false
|
||||
property real lean: Theme.skew
|
||||
property bool leanLeft: false
|
||||
property real padding: Theme.padM
|
||||
property bool interactive: true
|
||||
property bool halftone: false
|
||||
|
||||
// Chamfer, forwarded so modules can differ from one another instead of all
|
||||
// sharing the panel default.
|
||||
property real chop: Theme.cut
|
||||
property var chopCorners: [1, 3]
|
||||
|
||||
readonly property bool hovered: hover.hovered
|
||||
readonly property real leanInset: panel.leanInset
|
||||
|
||||
@@ -35,6 +41,9 @@ Item {
|
||||
id: panel
|
||||
anchors.fill: parent
|
||||
lean: root.lean
|
||||
leanLeft: root.leanLeft
|
||||
chop: root.chop
|
||||
chopCorners: root.chopCorners
|
||||
padding: root.padding
|
||||
halftone: root.halftone
|
||||
halftoneColor: root.accent
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
import Quickshell
|
||||
import Quickshell.Wayland
|
||||
import "root:/config"
|
||||
import "root:/components"
|
||||
import "root:/services"
|
||||
|
||||
// The floating bottom-left cluster: now playing, plus the CPU/MEM/GPU readout.
|
||||
//
|
||||
// This one reserves no space at all. Windows tile the full height of the screen
|
||||
// underneath it, and the input mask is clipped to the cluster itself so clicks
|
||||
// anywhere else in the corner fall straight through to whatever is below.
|
||||
//
|
||||
// At rest it sits at a quarter opacity — present enough to read at a glance,
|
||||
// faint enough to ignore — and snaps to full weight when the pointer arrives.
|
||||
PanelWindow {
|
||||
id: root
|
||||
|
||||
required property var modelData
|
||||
screen: modelData
|
||||
|
||||
WlrLayershell.layer: WlrLayer.Top
|
||||
WlrLayershell.namespace: "takemi-dock"
|
||||
|
||||
anchors {
|
||||
bottom: true
|
||||
left: true
|
||||
}
|
||||
|
||||
margins {
|
||||
bottom: Theme.dockMargin
|
||||
left: Theme.dockMargin
|
||||
}
|
||||
|
||||
implicitWidth: cluster.implicitWidth
|
||||
implicitHeight: cluster.implicitHeight
|
||||
|
||||
exclusiveZone: 0
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
color: "transparent"
|
||||
|
||||
// Only the cluster takes pointer input; the rest of the surface is
|
||||
// transparent to clicks.
|
||||
mask: Region { item: cluster }
|
||||
|
||||
readonly property bool awake: clusterHover.hovered || Media.playing
|
||||
|
||||
// A crimson wedge pinned to the corner. This is the one part of the dock
|
||||
// that never fades — it marks where the cluster lives so a nearly
|
||||
// invisible idle state is still something you can aim at, and it doubles
|
||||
// as the corner furniture the layout was missing.
|
||||
Shape {
|
||||
anchors.left: parent.left
|
||||
anchors.bottom: parent.bottom
|
||||
width: 26
|
||||
height: 26
|
||||
z: -1
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
opacity: root.awake ? 0.0 : 0.9
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation { duration: Theme.durBase }
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
fillColor: Theme.accent
|
||||
strokeColor: "transparent"
|
||||
PathPolyline {
|
||||
path: [
|
||||
Qt.point(0, 26),
|
||||
Qt.point(0, 6),
|
||||
Qt.point(26, 26),
|
||||
Qt.point(0, 26)
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: cluster
|
||||
spacing: Theme.barGap
|
||||
|
||||
opacity: root.awake ? 1.0 : Theme.dockIdleOpacity
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.durSlow
|
||||
easing.type: Easing.OutExpo
|
||||
}
|
||||
}
|
||||
|
||||
// Lift off the corner as it wakes.
|
||||
transform: Translate {
|
||||
y: root.awake ? 0 : 4
|
||||
|
||||
Behavior on y {
|
||||
NumberAnimation {
|
||||
duration: Theme.durSlow
|
||||
easing.type: Easing.OutBack
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HoverHandler {
|
||||
id: clusterHover
|
||||
}
|
||||
|
||||
MediaPill {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
|
||||
Resources {
|
||||
screenRef: root.modelData
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,273 @@
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
import Quickshell
|
||||
import Quickshell.Wayland
|
||||
import "root:/config"
|
||||
import "root:/components"
|
||||
import "root:/services"
|
||||
import "root:/popouts"
|
||||
|
||||
// The right-hand status rail.
|
||||
//
|
||||
// Everything that used to be crammed into the right third of the top bar lives
|
||||
// here instead: connectivity, audio, power, tray, notifications. On a 1080p
|
||||
// panel this is the cheap edge — 48px of width is 2.5% of the screen, where the
|
||||
// same 48px of height would have been 4.4% on top of what the top bar already
|
||||
// takes.
|
||||
//
|
||||
// Slabs are grouped by what they do rather than spaced evenly, and each pulls a
|
||||
// different lean and chamfer from the shape tables, so the column reads as a
|
||||
// stack of distinct cards instead of a ladder.
|
||||
PanelWindow {
|
||||
id: root
|
||||
|
||||
required property var modelData
|
||||
screen: modelData
|
||||
|
||||
WlrLayershell.layer: WlrLayer.Top
|
||||
WlrLayershell.namespace: "takemi-rail"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
bottom: true
|
||||
right: true
|
||||
}
|
||||
|
||||
margins {
|
||||
top: Theme.barHeight + Theme.barMargin * 2
|
||||
bottom: Theme.barMargin
|
||||
right: Theme.barMargin
|
||||
}
|
||||
|
||||
implicitWidth: Theme.railWidth
|
||||
exclusiveZone: Theme.railWidth + Theme.barMargin
|
||||
color: "transparent"
|
||||
|
||||
// Corner furniture. The dock pins a crimson wedge to the bottom-left; this
|
||||
// is its opposite number, so the desktop is bracketed on the diagonal
|
||||
// rather than merely edged. Decorative only — it sits under the slabs and
|
||||
// takes no input.
|
||||
Shape {
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
width: 30
|
||||
height: 30
|
||||
z: -1
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
opacity: 0.9
|
||||
|
||||
ShapePath {
|
||||
fillColor: Theme.accent
|
||||
strokeColor: "transparent"
|
||||
PathPolyline {
|
||||
path: [
|
||||
Qt.point(30, 30),
|
||||
Qt.point(30, 4),
|
||||
Qt.point(2, 30),
|
||||
Qt.point(30, 30)
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------- top
|
||||
Column {
|
||||
id: upper
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: Theme.railGap
|
||||
|
||||
// Connectivity.
|
||||
RailGroup {
|
||||
variant: 0
|
||||
accent: Sys.netUp ? Theme.primary : Theme.muted
|
||||
implicitHeight: linkCol.implicitHeight + contentPad * 2
|
||||
|
||||
Column {
|
||||
id: linkCol
|
||||
anchors.centerIn: parent
|
||||
spacing: Theme.padS
|
||||
|
||||
RailIcon {
|
||||
id: netIcon
|
||||
icon: Net.icon
|
||||
tint: Theme.primary
|
||||
dim: !Sys.netUp
|
||||
onClicked: netPopout.pinned = !netPopout.pinned
|
||||
onRightClicked: Net.toggleWifi()
|
||||
onMiddleClicked: Actions.openNetworkSettings()
|
||||
}
|
||||
|
||||
RailIcon {
|
||||
id: btIcon
|
||||
icon: Bt.icon
|
||||
tint: Theme.primary
|
||||
dim: !Bt.enabled
|
||||
onClicked: btPopout.pinned = !btPopout.pinned
|
||||
onRightClicked: Bt.toggle()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Audio and backlight.
|
||||
RailGroup {
|
||||
variant: 1
|
||||
accent: Audio.muted || Audio.micMuted ? Theme.accent : Theme.primary
|
||||
implicitHeight: audioCol.implicitHeight + contentPad * 2
|
||||
|
||||
Column {
|
||||
id: audioCol
|
||||
anchors.centerIn: parent
|
||||
spacing: Theme.padS
|
||||
|
||||
RailIcon {
|
||||
id: volIcon
|
||||
icon: Audio.icon
|
||||
readout: Audio.muted ? "" : Audio.volumePercent + "%"
|
||||
alert: Audio.muted
|
||||
onClicked: Audio.toggleMute()
|
||||
onRightClicked: audioPopout.pinned = !audioPopout.pinned
|
||||
onMiddleClicked: Actions.openAudioSettings()
|
||||
onScrolled: delta => Audio.changeVolume(delta > 0 ? 0.05 : -0.05)
|
||||
}
|
||||
|
||||
RailIcon {
|
||||
id: micIcon
|
||||
icon: Audio.micIcon
|
||||
alert: Audio.micMuted
|
||||
onClicked: Audio.toggleMicMute()
|
||||
onRightClicked: audioPopout.pinned = !audioPopout.pinned
|
||||
onScrolled: delta => Audio.setMicVolume(Audio.micVolume + (delta > 0 ? 0.05 : -0.05))
|
||||
}
|
||||
|
||||
RailIcon {
|
||||
id: brightIcon
|
||||
visible: Brightness.available
|
||||
icon: Brightness.icon
|
||||
readout: Math.round(Brightness.percent) + "%"
|
||||
tint: Theme.primary
|
||||
onScrolled: delta => Brightness.change(delta > 0 ? 5 : -5)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Battery.
|
||||
RailGroup {
|
||||
variant: 2
|
||||
visible: Battery.available
|
||||
accent: Battery.critical ? Theme.accent : Theme.primary
|
||||
implicitHeight: battIcon.implicitHeight + contentPad * 2
|
||||
|
||||
RailIcon {
|
||||
id: battIcon
|
||||
anchors.centerIn: parent
|
||||
icon: Battery.icon
|
||||
readout: Math.round(Battery.percent) + "%"
|
||||
tint: Battery.tint
|
||||
alert: Battery.critical
|
||||
pulsing: Battery.critical
|
||||
onClicked: battPopout.pinned = !battPopout.pinned
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- bottom
|
||||
Column {
|
||||
id: lower
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
// Clear of the corner wedge, which would otherwise sit entirely behind
|
||||
// the bottom slab and never be seen.
|
||||
anchors.bottomMargin: 26
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: Theme.railGap
|
||||
|
||||
// Tray.
|
||||
RailGroup {
|
||||
variant: 3
|
||||
visible: tray.visible
|
||||
accent: Theme.primary
|
||||
implicitHeight: tray.implicitHeight + contentPad * 2
|
||||
|
||||
Tray {
|
||||
id: tray
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
|
||||
// Notifications and power — the two that act on the session rather than
|
||||
// report on it, so they sit apart at the foot of the rail.
|
||||
RailGroup {
|
||||
variant: 4
|
||||
accent: Notifs.dnd ? Theme.muted : Theme.primary
|
||||
implicitHeight: actionCol.implicitHeight + contentPad * 2
|
||||
|
||||
Column {
|
||||
id: actionCol
|
||||
anchors.centerIn: parent
|
||||
spacing: Theme.padS
|
||||
|
||||
RailIcon {
|
||||
id: bellIcon
|
||||
icon: Notifs.icon
|
||||
readout: Notifs.unread > 0
|
||||
? (Notifs.unread > 9 ? "9+" : String(Notifs.unread))
|
||||
: ""
|
||||
tint: Notifs.hasUnread ? Theme.accent : Theme.primary
|
||||
dim: Notifs.dnd
|
||||
alert: Notifs.hasUnread && !Notifs.dnd
|
||||
onClicked: {
|
||||
notifPopout.pinned = !notifPopout.pinned;
|
||||
Notifs.markRead();
|
||||
}
|
||||
onRightClicked: Notifs.toggleDnd()
|
||||
}
|
||||
|
||||
RailIcon {
|
||||
id: powerIcon
|
||||
icon: ""
|
||||
tint: Actions.powerMenuOpen ? Theme.accent : Theme.subtext
|
||||
onClicked: Actions.togglePowerMenu()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------- popouts
|
||||
// All of these hang off the left edge of the rail, opening into the screen.
|
||||
NetPopout {
|
||||
id: netPopout
|
||||
anchorItem: netIcon
|
||||
triggerHovered: netIcon.hovered
|
||||
fromEdge: Edges.Left
|
||||
}
|
||||
|
||||
BtPopout {
|
||||
id: btPopout
|
||||
anchorItem: btIcon
|
||||
triggerHovered: btIcon.hovered
|
||||
fromEdge: Edges.Left
|
||||
}
|
||||
|
||||
AudioPopout {
|
||||
id: audioPopout
|
||||
anchorItem: volIcon
|
||||
triggerHovered: volIcon.hovered || micIcon.hovered
|
||||
fromEdge: Edges.Left
|
||||
}
|
||||
|
||||
BatteryPopout {
|
||||
id: battPopout
|
||||
anchorItem: battIcon
|
||||
triggerHovered: battIcon.hovered
|
||||
fromEdge: Edges.Left
|
||||
visible: Battery.available && shown
|
||||
}
|
||||
|
||||
NotifPopout {
|
||||
id: notifPopout
|
||||
anchorItem: bellIcon
|
||||
triggerHovered: bellIcon.hovered
|
||||
fromEdge: Edges.Left
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import QtQuick
|
||||
import "root:/config"
|
||||
import "root:/components"
|
||||
|
||||
// A slab on the right-hand rail. The vertical counterpart to BarPill: it sizes
|
||||
// itself to a stacked column rather than a row, and pulls its lean and chamfer
|
||||
// from the shape-variance tables by `variant`, so no two slabs on the rail are
|
||||
// congruent.
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property color accent: Theme.primary
|
||||
property int variant: 0
|
||||
property bool active: false
|
||||
property real padding: Theme.padS
|
||||
property bool interactive: false
|
||||
property bool halftone: false
|
||||
|
||||
readonly property bool hovered: hover.hovered
|
||||
readonly property real contentPad: panel.contentPad
|
||||
readonly property alias panelItem: panel
|
||||
|
||||
default property alias content: holder.data
|
||||
|
||||
signal clicked()
|
||||
|
||||
implicitWidth: Theme.railWidth
|
||||
|
||||
P5Panel {
|
||||
id: panel
|
||||
anchors.fill: parent
|
||||
vertical: true
|
||||
|
||||
// Scaled down from the horizontal tables: a rail slab leans by a
|
||||
// fraction of its 48px width, so the raw values would be far too steep.
|
||||
lean: Theme.leanFor(root.variant) * 0.6
|
||||
leanLeft: Theme.leanLeftFor(root.variant)
|
||||
chop: Math.min(Theme.chopFor(root.variant), 10)
|
||||
chopCorners: Theme.cornersFor(root.variant)
|
||||
|
||||
padding: root.padding
|
||||
halftone: root.halftone
|
||||
halftoneColor: root.accent
|
||||
sheen: true
|
||||
|
||||
fill: root.active ? Theme.surfaceAlt : Theme.surface
|
||||
fillOpacity: root.hovered ? 0.98 : 0.88
|
||||
border: root.hovered || root.active
|
||||
? Theme.alpha(root.accent, 0.9)
|
||||
: Theme.alpha(Theme.outline, 0.7)
|
||||
borderWidth: root.hovered || root.active ? Theme.stroke : 1
|
||||
|
||||
slash: root.active
|
||||
slashColor: root.accent
|
||||
|
||||
Behavior on fillOpacity {
|
||||
NumberAnimation { duration: Theme.durFast }
|
||||
}
|
||||
Behavior on border {
|
||||
ColorAnimation { duration: Theme.durBase }
|
||||
}
|
||||
|
||||
Item {
|
||||
id: holder
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
|
||||
// Slabs lift toward the pointer, away from the screen edge.
|
||||
transform: Translate {
|
||||
x: root.hovered && root.interactive ? -3 : 0
|
||||
|
||||
Behavior on x {
|
||||
NumberAnimation {
|
||||
duration: Theme.durBase
|
||||
easing.type: Easing.OutBack
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HoverHandler {
|
||||
id: hover
|
||||
enabled: root.interactive
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
enabled: root.interactive
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onTapped: root.clicked()
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import QtQuick
|
||||
import "root:/config"
|
||||
import "root:/components"
|
||||
|
||||
// One slot on the right-hand rail: a glyph with an optional micro readout
|
||||
// stacked beneath it, and a crimson bar that wipes down the leading edge on
|
||||
// hover. The rail is only 48px wide, so unlike StatusIcon the readout sits
|
||||
// under the glyph rather than beside it, and anything longer than a percentage
|
||||
// belongs in the popout instead.
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property string icon: ""
|
||||
property string readout: ""
|
||||
property color tint: Theme.primary
|
||||
property bool alert: false
|
||||
property bool dim: false
|
||||
property bool pulsing: false
|
||||
|
||||
readonly property bool hovered: hover.hovered
|
||||
|
||||
signal clicked()
|
||||
signal rightClicked()
|
||||
signal middleClicked()
|
||||
signal scrolled(real delta)
|
||||
|
||||
implicitWidth: Theme.railWidth
|
||||
implicitHeight: root.readout !== "" ? 42 : 32
|
||||
|
||||
Column {
|
||||
id: layout
|
||||
anchors.centerIn: parent
|
||||
spacing: 1
|
||||
|
||||
Icon {
|
||||
id: glyph
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: root.icon
|
||||
pulsing: root.pulsing
|
||||
font.pixelSize: Theme.fsLarge
|
||||
color: {
|
||||
if (root.alert) return Theme.accent;
|
||||
if (root.dim) return Theme.muted;
|
||||
if (root.hovered) return Theme.glow;
|
||||
return root.tint;
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation { duration: Theme.durBase }
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
visible: root.readout !== ""
|
||||
text: root.readout
|
||||
color: root.dim ? Theme.muted : Theme.subtext
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
font.weight: Font.DemiBold
|
||||
renderType: Text.NativeRendering
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation { duration: Theme.durBase }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Leading-edge wipe. On the rail this runs vertically down the left side,
|
||||
// mirroring the slash P5Panel puts on horizontal modules.
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 2
|
||||
height: root.hovered ? layout.implicitHeight : 0
|
||||
color: root.alert ? Theme.accent : root.tint
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutExpo }
|
||||
}
|
||||
}
|
||||
|
||||
scale: root.hovered ? 1.08 : 1.0
|
||||
Behavior on scale {
|
||||
NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
|
||||
}
|
||||
|
||||
onAlertChanged: if (alert) glyph.bump()
|
||||
|
||||
HoverHandler {
|
||||
id: hover
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onTapped: root.clicked()
|
||||
}
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.RightButton
|
||||
onTapped: root.rightClicked()
|
||||
}
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.MiddleButton
|
||||
onTapped: root.middleClicked()
|
||||
}
|
||||
WheelHandler {
|
||||
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
||||
onWheel: event => root.scrolled(event.angleDelta.y)
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,14 @@ BarPill {
|
||||
required property var screenRef
|
||||
|
||||
accent: Theme.heat(Math.max(Sys.cpuUsage, Sys.memPercent))
|
||||
padding: Theme.padS
|
||||
|
||||
// Roomier than it was on the bar. In the dock there is nothing to compete
|
||||
// with, so the figures get real padding instead of being pushed up against
|
||||
// the slanted edges.
|
||||
padding: Theme.padM
|
||||
lean: Theme.leanFor(2)
|
||||
chop: Theme.chopFor(2)
|
||||
chopCorners: Theme.cornersFor(2)
|
||||
implicitWidth: layout.implicitWidth + contentPad * 2
|
||||
|
||||
onClicked: Actions.openSystemMonitor()
|
||||
@@ -59,6 +66,10 @@ BarPill {
|
||||
}
|
||||
}
|
||||
|
||||
// The CPU/MEM/GPU labels are gone: three characters of chrome per metric,
|
||||
// repeated three times, in the most cramped part of the shell. The number
|
||||
// over its meter is legible on its own, and dropping them buys the room to
|
||||
// set the figure in display italic instead of squeezing it into mono.
|
||||
component Metric: Column {
|
||||
id: metric
|
||||
|
||||
@@ -67,33 +78,20 @@ BarPill {
|
||||
property string readout: ""
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 1
|
||||
spacing: 2
|
||||
|
||||
Row {
|
||||
spacing: 4
|
||||
Text {
|
||||
text: metric.readout
|
||||
color: Theme.heat(metric.value)
|
||||
font.family: Theme.fontDisplay
|
||||
font.pixelSize: Theme.fsBody
|
||||
font.weight: Theme.weightDisplay
|
||||
font.italic: true
|
||||
font.letterSpacing: 0.5
|
||||
renderType: Text.NativeRendering
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: metric.label
|
||||
color: Theme.muted
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
font.letterSpacing: 1.5
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: metric.readout
|
||||
color: Theme.heat(metric.value)
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsSmall
|
||||
font.weight: Font.DemiBold
|
||||
renderType: Text.NativeRendering
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation { duration: Theme.durBase }
|
||||
}
|
||||
Behavior on color {
|
||||
ColorAnimation { duration: Theme.durBase }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+71
-61
@@ -1,92 +1,102 @@
|
||||
import QtQuick
|
||||
import QtQuick.Effects
|
||||
import Quickshell
|
||||
import Quickshell.Services.SystemTray
|
||||
import Quickshell.Widgets
|
||||
import "root:/config"
|
||||
import "root:/components"
|
||||
|
||||
// StatusNotifier tray. Left click activates, right click opens the app's own
|
||||
// menu, middle click is the secondary action.
|
||||
BarPill {
|
||||
// StatusNotifier tray, as a vertical column for the right-hand rail. Left click
|
||||
// activates, right click opens the app's own menu, middle click is the
|
||||
// secondary action. The surrounding slab is the caller's business — this is
|
||||
// just the stack of icons.
|
||||
Column {
|
||||
id: root
|
||||
|
||||
required property var screenRef
|
||||
|
||||
accent: Theme.blue
|
||||
padding: Theme.padS
|
||||
interactive: false
|
||||
spacing: Theme.padS + 2
|
||||
visible: SystemTray.items.values.length > 0
|
||||
implicitWidth: visible ? layout.implicitWidth + contentPad * 2 : 0
|
||||
|
||||
Row {
|
||||
id: layout
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
spacing: Theme.padM
|
||||
Repeater {
|
||||
model: SystemTray.items
|
||||
|
||||
Repeater {
|
||||
model: SystemTray.items
|
||||
Item {
|
||||
id: entry
|
||||
|
||||
Item {
|
||||
id: entry
|
||||
required property SystemTrayItem modelData
|
||||
|
||||
required property SystemTrayItem modelData
|
||||
width: 18
|
||||
height: 18
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
width: 18
|
||||
height: 18
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
// App icons arrive in their own brand colours, which wrecks the
|
||||
// two-hue palette faster than anything else in the shell. Flatten
|
||||
// every one of them to a single-colour silhouette: white at rest,
|
||||
// crimson under the pointer. Detail inside the glyph is lost on
|
||||
// purpose — that flattening *is* the screen-printed look.
|
||||
IconImage {
|
||||
id: img
|
||||
anchors.fill: parent
|
||||
source: entry.modelData.icon
|
||||
asynchronous: true
|
||||
|
||||
IconImage {
|
||||
id: img
|
||||
anchors.fill: parent
|
||||
source: entry.modelData.icon
|
||||
asynchronous: true
|
||||
opacity: itemHover.hovered ? 1.0 : 0.82
|
||||
layer.enabled: true
|
||||
layer.effect: MultiEffect {
|
||||
colorization: 1.0
|
||||
colorizationColor: itemHover.hovered
|
||||
? Theme.accent
|
||||
: Theme.text
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation { duration: Theme.durFast }
|
||||
Behavior on colorizationColor {
|
||||
ColorAnimation { duration: Theme.durFast }
|
||||
}
|
||||
}
|
||||
|
||||
scale: itemHover.hovered ? 1.18 : 1.0
|
||||
Behavior on scale {
|
||||
NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
|
||||
}
|
||||
opacity: itemHover.hovered ? 1.0 : 0.82
|
||||
|
||||
HoverHandler {
|
||||
id: itemHover
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
Behavior on opacity {
|
||||
NumberAnimation { duration: Theme.durFast }
|
||||
}
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onTapped: {
|
||||
if (entry.modelData.onlyMenu) {
|
||||
menuAnchor.open();
|
||||
} else {
|
||||
entry.modelData.activate();
|
||||
}
|
||||
scale: itemHover.hovered ? 1.18 : 1.0
|
||||
Behavior on scale {
|
||||
NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
|
||||
}
|
||||
|
||||
HoverHandler {
|
||||
id: itemHover
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onTapped: {
|
||||
if (entry.modelData.onlyMenu) {
|
||||
menuAnchor.open();
|
||||
} else {
|
||||
entry.modelData.activate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.RightButton
|
||||
onTapped: menuAnchor.open()
|
||||
}
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.RightButton
|
||||
onTapped: menuAnchor.open()
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.MiddleButton
|
||||
onTapped: entry.modelData.secondaryActivate()
|
||||
}
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.MiddleButton
|
||||
onTapped: entry.modelData.secondaryActivate()
|
||||
}
|
||||
|
||||
QsMenuAnchor {
|
||||
id: menuAnchor
|
||||
menu: entry.modelData.menu
|
||||
anchor.item: entry
|
||||
anchor.edges: Edges.Bottom
|
||||
anchor.gravity: Edges.Bottom
|
||||
anchor.margins.top: Theme.popoutGap
|
||||
}
|
||||
// Menus open to the left, into the screen rather than off its edge.
|
||||
QsMenuAnchor {
|
||||
id: menuAnchor
|
||||
menu: entry.modelData.menu
|
||||
anchor.item: entry
|
||||
anchor.edges: Edges.Left
|
||||
anchor.gravity: Edges.Left
|
||||
anchor.margins.right: Theme.popoutGap
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,12 +40,15 @@ Item {
|
||||
}
|
||||
|
||||
implicitWidth: row.implicitWidth
|
||||
implicitHeight: 20
|
||||
implicitHeight: 24
|
||||
|
||||
Row {
|
||||
id: row
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 6
|
||||
|
||||
// Uneven gaps. An evenly spaced row of identical ticks reads as a
|
||||
// progress bar; the whole point here is that it should not.
|
||||
spacing: 5
|
||||
|
||||
Repeater {
|
||||
model: root.slots
|
||||
@@ -54,6 +57,7 @@ Item {
|
||||
id: pip
|
||||
|
||||
required property var modelData
|
||||
required property int index
|
||||
readonly property int wsId: modelData
|
||||
readonly property var info: root.occupancy[wsId]
|
||||
readonly property bool occupied: info !== undefined && info.count > 0
|
||||
@@ -61,8 +65,19 @@ Item {
|
||||
readonly property bool focused: root.focusedId === wsId
|
||||
readonly property bool hovered: pipHover.hovered
|
||||
|
||||
width: focused ? 34 : (occupied ? 16 : 10)
|
||||
height: 18
|
||||
// Each tick pulls its own shear and its own height off the
|
||||
// variance tables, and sits a little off the baseline, so the
|
||||
// row is a ragged run of marks rather than a repeating comb.
|
||||
readonly property real shear: Theme.leanFor(pip.index)
|
||||
readonly property int baseHeight: [18, 14, 20, 16][pip.index % 4]
|
||||
readonly property int drift: [0, 2, -1, 1][pip.index % 4]
|
||||
|
||||
width: focused ? 36 : (occupied ? 16 : 9)
|
||||
|
||||
// The focused tick grows past its neighbours and past the row's
|
||||
// own height, so it breaks the line instead of sitting in it.
|
||||
height: focused ? 24 : pip.baseHeight
|
||||
y: focused ? -2 : pip.drift
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation {
|
||||
@@ -71,6 +86,30 @@ Item {
|
||||
easing.overshoot: 1.6
|
||||
}
|
||||
}
|
||||
Behavior on height {
|
||||
NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
|
||||
}
|
||||
Behavior on y {
|
||||
NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
|
||||
}
|
||||
|
||||
// Black offset copy behind the focused tick — the same
|
||||
// screen-print stack the panels use, at tick scale.
|
||||
Rectangle {
|
||||
visible: pip.focused
|
||||
anchors.fill: parent
|
||||
x: 3
|
||||
y: 3
|
||||
color: Theme.ink
|
||||
|
||||
transform: Matrix4x4 {
|
||||
matrix: Qt.matrix4x4(
|
||||
1, -pip.shear, 0, pip.height * pip.shear,
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1)
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: tick
|
||||
@@ -85,7 +124,7 @@ Item {
|
||||
|
||||
transform: Matrix4x4 {
|
||||
matrix: Qt.matrix4x4(
|
||||
1, -Theme.skew, 0, pip.height * Theme.skew,
|
||||
1, -pip.shear, 0, pip.height * pip.shear,
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1)
|
||||
@@ -104,7 +143,7 @@ Item {
|
||||
text: pip.wsId
|
||||
color: Theme.base
|
||||
font.family: Theme.fontDisplay
|
||||
font.pixelSize: Theme.fsSmall
|
||||
font.pixelSize: Theme.fsBody
|
||||
font.weight: Theme.weightDisplay
|
||||
font.italic: true
|
||||
renderType: Text.NativeRendering
|
||||
|
||||
Reference in New Issue
Block a user