zach/z-bar-qt
1
1
Fork 0
Code Issues 23 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

feat: initial commit for pixel-snapping components and helpers

Browse Source
This commit is contained in:
zach
2026-10-29 17:34:57 +01:00
parent 9d8bde1413
commit 9cbb90f9e1
163 changed files with 2671 additions and 951 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Resources/Cards/BatteryTank.qml
+4 -2
View File
@@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import Quickshell.Services.UPower
import ZShell.Config
import qs.Components
@@ -50,7 +51,8 @@ ClipRect {
}
}
component Contents: ColumnLayout {
component Contents: SnapLayout {
orientation: Qt.Vertical
id: contents
required property color accentColor
@@ -100,7 +102,7 @@ ClipRect {
}
}
RowLayout {
SnapLayout {
Layout.alignment: Qt.AlignRight
Layout.bottomMargin: -Tokens.padding.extraSmall
Layout.rightMargin: -Tokens.padding.extraSmall
Modules/Resources/Cards/HeroCard.qml
+20 -12
View File
@@ -1,5 +1,7 @@
import QtQuick
import QtQuick.Layouts
import ZShell
import ZShell.Components
import ZShell.Config
import qs.Components
import qs.Services
@@ -15,8 +17,8 @@ CustomRect {
required property real usage
color: Colors.tPalette.m3surfaceContainer
implicitHeight: Math.max(tempProg.implicitHeight + detailsRow.implicitHeight + Tokens.spacing.largeIncreased, usageColumn.implicitHeight + usageLabel.implicitHeight) + Tokens.padding.large * 2
implicitWidth: 450
implicitHeight: ZUtils.snap(Math.max(tempProg.implicitHeight + detailsRow.implicitHeight + Tokens.spacing.largeIncreased, usageColumn.implicitHeight + usageLabel.implicitHeight) + Tokens.padding.large * 2, root)
implicitWidth: ZUtils.snapCeil(450, root)
radius: Tokens.rounding.largeIncreased
ClipRect {
@@ -43,7 +45,7 @@ CustomRect {
anchors.margins: Tokens.padding.large
anchors.top: parent.top
fgColor: root.accent
implicitSize: Math.max(icon.implicitWidth, icon.implicitHeight) + Tokens.padding.small * 2
implicitSize: ZUtils.snap(Math.max(icon.implicitWidth, icon.implicitHeight) + Tokens.padding.small * 2, root)
spacing: Tokens.spacing.extraSmall
strokeWidth: Tokens.padding.extraSmall
value: root.usage
@@ -62,12 +64,14 @@ CustomRect {
}
}
ColumnLayout {
SnapLayout {
anchors.left: tempProg.right
anchors.margins: Tokens.spacing.largeIncreased
anchors.right: usageColumn.left
anchors.verticalCenter: tempProg.verticalCenter
spacing: Tokens.spacing.extraSmall
orientation: Qt.Vertical
CustomText {
color: root.accent
@@ -82,15 +86,17 @@ CustomRect {
}
}
ColumnLayout {
SnapLayout {
id: detailsRow
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.margins: Tokens.padding.largeIncreased
spacing: Tokens.spacing.extraSmall
RowLayout {
spacing: Tokens.spacing.extraSmall
orientation: Qt.Vertical
SnapLayout {
Layout.leftMargin: -Tokens.padding.extraSmall
spacing: Tokens.spacing.extraSmall
@@ -108,32 +114,34 @@ CustomRect {
CustomProgressBar {
fgColor: root.accent
implicitHeight: Tokens.padding.extraSmall
implicitHeight: Tokens.padding.small
indeterminate: isNaN(root.usage) || isNaN(root.temperature)
value: root.temperature / 100
}
}
Column {
SnapLayout {
id: usageColumn
anchors.margins: Tokens.padding.large
anchors.right: parent.right
anchors.rightMargin: 32
anchors.rightMargin: Tokens.padding.extraLarge
anchors.verticalCenter: parent.verticalCenter
spacing: 0
orientation: Qt.Vertical
CustomText {
id: usageLabel
anchors.right: parent.right
Layout.alignment: Qt.AlignRight
color: Colors.palette.m3onSurfaceVariant
font: Tokens.font.body.medium
text: qsTr("Usage")
}
CustomText {
anchors.right: parent.right
Layout.alignment: Qt.AlignRight
color: root.accent
font: Tokens.font.headline.builders.small.width(50).build()
text: isNaN(root.usage) ? "...%" : Math.round(root.usage * 100) + "%"
Modules/Resources/Cards/MemoryCard.qml
+24 -17
View File
@@ -1,5 +1,7 @@
import QtQuick
import QtQuick.Layouts
import ZShell
import ZShell.Components
import ZShell.Services
import ZShell.Config
import qs.Components
@@ -10,34 +12,39 @@ CustomRect {
readonly property color accent: Colors.palette.m3tertiary
required property real perc
required property int used
required property int total
required property string label
required property string icon
Layout.fillWidth: true
color: Colors.tPalette.m3surfaceContainer
implicitHeight: layout.implicitHeight + Tokens.padding.large * 2
implicitWidth: layout.implicitWidth + Tokens.padding.extraLargeIncreased * 2
radius: Tokens.rounding.largeIncreased
ServiceRef {
service: Memory
}
ColumnLayout {
SnapLayout {
id: layout
anchors.centerIn: parent
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
orientation: Qt.Vertical
spacing: Tokens.spacing.extraSmall
RowLayout {
Layout.leftMargin: -Tokens.padding.extraSmall
SnapLayout {
Layout.alignment: Qt.AlignHCenter
spacing: Tokens.spacing.small
MaterialIcon {
color: root.accent
fill: 1
text: "memory_alt"
text: root.icon
}
CustomText {
text: qsTr("Memory")
text: root.label
}
}
@@ -45,17 +52,17 @@ CustomRect {
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Tokens.spacing.largeIncreased
fgColor: root.accent
implicitSize: usageColumn.implicitHeight + thickness + Tokens.padding.largeIncreased * 2
implicitSize: ZUtils.snap(usageColumn.implicitHeight + thickness + Tokens.padding.largeIncreased * 2, root)
startAngle: -225
sweepAngle: 270
value: Memory.percentage
value: root.perc
Behavior on clampedVal {
Anim {
}
Anim {}
}
ColumnLayout {
SnapLayout {
orientation: Qt.Vertical
id: usageColumn
anchors.centerIn: parent
@@ -66,7 +73,7 @@ CustomRect {
Layout.alignment: Qt.AlignHCenter
color: root.accent
font: Tokens.font.body.large
text: Math.round(Memory.percentage * 100) + "%"
text: Math.round(root.perc * 100) + "%"
}
CustomText {
@@ -80,7 +87,7 @@ CustomRect {
CustomText {
Layout.alignment: Qt.AlignHCenter
text: {
const fmt = UsageFmt.formatKib(Memory.used, Memory.total);
const fmt = UsageFmt.formatKib(root.used, root.total);
return `${fmt.value.toFixed(1)} / ${Math.floor(fmt.total)} ${fmt.unit}`;
}
}
Modules/Resources/Cards/NetworkCard.qml
+17 -6
View File
@@ -18,15 +18,17 @@ CustomRect {
service: NetworkUsage
}
ColumnLayout {
SnapLayout {
id: layout
anchors.bottomMargin: Tokens.padding.small
anchors.fill: parent
anchors.margins: Tokens.padding.large
spacing: 0
RowLayout {
spacing: 0
orientation: Qt.Vertical
SnapLayout {
spacing: Tokens.spacing.small
MaterialIcon {
@@ -108,8 +110,11 @@ CustomRect {
}
// Download row
RowLayout {
SnapLayout {
Layout.fillWidth: true
Layout.maximumWidth: root.width > root.implicitWidth * 2 ? root.width / 2 : -1
Layout.alignment: Qt.AlignRight
spacing: Tokens.spacing.small
MaterialIcon {
@@ -136,8 +141,11 @@ CustomRect {
}
// Upload row
RowLayout {
SnapLayout {
Layout.fillWidth: true
Layout.maximumWidth: root.width > root.implicitWidth * 2 ? root.width / 2 : -1
Layout.alignment: Qt.AlignRight
spacing: Tokens.spacing.small
MaterialIcon {
@@ -164,8 +172,11 @@ CustomRect {
}
// Session totals
RowLayout {
SnapLayout {
Layout.fillWidth: true
Layout.maximumWidth: root.width > root.implicitWidth * 2 ? root.width / 2 : -1
Layout.alignment: Qt.AlignRight
spacing: Tokens.spacing.small
MaterialIcon {
Modules/Resources/Cards/StorageCard.qml
+13 -6
View File
@@ -1,6 +1,8 @@
import QtQuick
import QtQuick.Layouts
import Quickshell
import ZShell
import ZShell.Components
import ZShell.Services
import ZShell.Config
import qs.Components
@@ -21,23 +23,26 @@ CustomRect {
service: Storage
}
ColumnLayout {
SnapLayout {
id: layout
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
spacing: 0
RowLayout {
spacing: 0
orientation: Qt.Vertical
SnapLayout {
id: row
Layout.alignment: Qt.AlignHCenter
spacing: Tokens.spacing.largeIncreased
CircularProgress {
fgColor: root.accent
implicitSize: usageColumn.implicitHeight + thickness + Tokens.padding.large * 2
implicitSize: ZUtils.snap(usageColumn.implicitHeight + thickness + Tokens.padding.large * 2, root)
startAngle: -225
sweepAngle: 270
value: root.percentage
@@ -46,7 +51,8 @@ CustomRect {
Anim {}
}
ColumnLayout {
SnapLayout {
orientation: Qt.Vertical
id: usageColumn
anchors.centerIn: parent
@@ -74,8 +80,9 @@ CustomRect {
}
}
ColumnLayout {
SnapLayout {
spacing: Tokens.spacing.extraSmall
orientation: Qt.Vertical
CustomText {
text: qsTr("Storage")
Modules/Resources/Cards/VramCard.qml
-89
View File
@@ -1,89 +0,0 @@
import QtQuick
import QtQuick.Layouts
import ZShell.Services
import ZShell.Config
import qs.Components
import qs.Services
CustomRect {
id: root
readonly property color accent: Colors.palette.m3tertiary
Layout.fillWidth: true
color: Colors.tPalette.m3surfaceContainer
implicitHeight: layout.implicitHeight + Tokens.padding.large * 2
implicitWidth: layout.implicitWidth + Tokens.padding.extraLargeIncreased
radius: Tokens.rounding.largeIncreased
ServiceRef {
service: Gpu
}
ColumnLayout {
id: layout
anchors.centerIn: parent
spacing: Tokens.spacing.extraSmall
RowLayout {
Layout.leftMargin: -Tokens.padding.extraSmall
spacing: Tokens.spacing.small
MaterialIcon {
color: root.accent
fill: 1
text: "memory_alt"
}
CustomText {
text: qsTr("Video memory")
}
}
CircularProgress {
id: circularIndicator
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Tokens.spacing.largeIncreased
fgColor: root.accent
implicitSize: usageColumn.implicitHeight + thickness + Tokens.padding.largeIncreased * 2
startAngle: -225
sweepAngle: 270
value: Gpu.memoryUsed / Gpu.memoryTotal
Behavior on clampedVal {
Anim {}
}
ColumnLayout {
id: usageColumn
anchors.centerIn: parent
anchors.verticalCenterOffset: Tokens.padding.extraSmall
spacing: 0
CustomText {
Layout.alignment: Qt.AlignHCenter
color: root.accent
font: Tokens.font.body.large
text: Math.round(circularIndicator.value * 100) + "%"
}
CustomText {
Layout.alignment: Qt.AlignHCenter
color: Colors.palette.m3onSurfaceVariant
text: qsTr("Used")
}
}
}
CustomText {
Layout.alignment: Qt.AlignHCenter
text: {
const fmt = UsageFmt.formatKib(Gpu.memoryUsed, Gpu.memoryTotal);
return `${fmt.value.toFixed(1)} / ${Math.floor(fmt.total)} ${fmt.unit}`;
}
}
}
}
Modules/Resources/Content.qml
+34 -18
View File
@@ -1,7 +1,10 @@
import QtQuick
import QtQuick.Layouts
import ZShell
import ZShell.Components
import ZShell.Services
import ZShell.Config
import qs.Components
import qs.Modules.Resources.Cards
import qs.Helpers
import qs.Services
@@ -11,25 +14,25 @@ Item {
required property Wrapper wrapper
implicitHeight: content.implicitHeight + Tokens.padding.small * 2
implicitWidth: content.implicitWidth
implicitHeight: ZUtils.snap(content.implicitHeight + Tokens.padding.small * 2, root)
implicitWidth: ZUtils.snap(content.implicitWidth, root)
RowLayout {
SnapLayout {
id: content
anchors.left: parent.left
anchors.fill: parent
anchors.margins: Tokens.padding.small
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
spacing: Tokens.spacing.large
ColumnLayout {
SnapLayout {
id: mainColumn
Layout.fillWidth: true
spacing: Tokens.spacing.medium
orientation: Qt.Vertical
RowLayout {
SnapLayout {
id: hero
spacing: Tokens.spacing.medium
visible: cpuCard.active || gpuCard.active
@@ -72,7 +75,10 @@ Item {
}
}
RowLayout {
SnapLayout {
id: card
Layout.fillWidth: true
spacing: Tokens.spacing.medium
visible: storageCard.active || memoryCard.active || vramCard.active || networkCard1.active
@@ -81,8 +87,7 @@ Item {
active: Config.dashboard.performance.showStorage
sourceComponent: StorageCard {
}
sourceComponent: StorageCard {}
}
WrappedLoader {
@@ -91,6 +96,15 @@ Item {
active: Config.dashboard.performance.showMemory
sourceComponent: MemoryCard {
used: Memory.used
total: Memory.total
perc: Memory.percentage
label: qsTr("Memory")
icon: "memory_alt"
ServiceRef {
service: Memory
}
}
}
@@ -99,7 +113,12 @@ Item {
active: Config.dashboard.performance.showVram
sourceComponent: VramCard {
sourceComponent: MemoryCard {
used: Gpu.memoryUsed
total: Gpu.memoryTotal
perc: Gpu.memoryUsed / Gpu.memoryTotal
label: qsTr("Video memory")
icon: "memory_alt"
}
}
@@ -108,8 +127,7 @@ Item {
active: Config.dashboard.performance.showNetwork && !vramCard.active
sourceComponent: NetworkCard {
}
sourceComponent: NetworkCard {}
}
}
@@ -118,8 +136,7 @@ Item {
active: Config.dashboard.performance.showNetwork && vramCard.active
sourceComponent: NetworkCard {
}
sourceComponent: NetworkCard {}
}
}
@@ -127,8 +144,7 @@ Item {
Layout.fillWidth: false
active: Battery.isLaptop && Config.dashboard.performance.showBattery
sourceComponent: BatteryTank {
}
sourceComponent: BatteryTank {}
}
}