feat: initial commit for pixel-snapping components and helpers

This commit is contained in:
2026-10-29 17:34:57 +01:00
parent 9d8bde1413
commit 9cbb90f9e1
163 changed files with 2671 additions and 951 deletions
+56 -7
View File
@@ -4,11 +4,12 @@ import Quickshell
import QtQuick
import QtQuick.Layouts
import ZShell.Config
import ZShell.Components
import qs.Components
import qs.Modules.Bar.Components
import qs.Modules.Bar.Popouts
GridLayout {
SnapLayout {
id: root
required property bool fullscreen
@@ -74,9 +75,47 @@ GridLayout {
return ch?.entryId ?? "";
}
columnSpacing: Tokens.spacing.small
columns: horizontal ? -1 : 1
rowSpacing: Tokens.spacing.small
readonly property var sectionRects: {
const count = repeater.count; // dependency: re-run when items are added/removed
const names = ["start", "middle", "end"]; // constant ids by position
const bounds = [null];
let spacers = 0;
for (let i = 0; i < count; i++) {
const it = repeater.itemAt(i) as EntryWrapper;
if (!it)
continue;
if (it.entryId === "spacer") {
bounds.push(null);
spacers++;
continue;
}
const l = it.x, t = it.y, r = it.x + it.width, b = it.y + it.height;
const cur = bounds[spacers];
bounds[spacers] = cur ? {
l: Math.min(cur.l, l),
t: Math.min(cur.t, t),
r: Math.max(cur.r, r),
b: Math.max(cur.b, b)
} : {
l,
t,
r,
b
};
}
return bounds.map((c, n) => ({
id: names[n] ?? `section${n}`,
rect: c ? Qt.rect(c.l, c.t, c.r - c.l, c.b - c.t) : Qt.rect(0, 0, 0, 0)
}));
}
spacing: Tokens.spacing.small
orientation: horizontal ? Qt.Horizontal : Qt.Vertical
Repeater {
id: repeater
@@ -229,16 +268,26 @@ GridLayout {
}
component EntryWrapper: Item {
readonly property int section: {
let n = 0;
for (let i = 0; i < index; i++) {
if (repeater.model.values[i].id === "spacer")
n++;
}
return n;
}
readonly property string entryId: modelData.id
required property int index
default property Item item
required property var modelData
default property Item item
Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
Layout.bottomMargin: !root.horizontal && index === repeater.count - 1 ? root.vPadding : 0
Layout.leftMargin: root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && root.horizontal) ? -root.rowSpacing + Tokens.spacing.extraSmall : 0
Layout.leftMargin: root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && root.horizontal) ? -root.spacing + Tokens.spacing.extraSmall : 0
Layout.rightMargin: root.horizontal && index === repeater.count - 1 ? root.vPadding : 0
Layout.topMargin: !root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && !root.horizontal) ? -root.columnSpacing + Tokens.spacing.extraSmall : 0
Layout.topMargin: !root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && !root.horizontal) ? -root.spacing + Tokens.spacing.extraSmall : 0
children: item
implicitHeight: item?.implicitHeight ?? 0
implicitWidth: item?.implicitWidth ?? 0
+1
View File
@@ -9,6 +9,7 @@ import qs.Components
Item {
id: root
readonly property var sections: (content.item as Bar)?.sectionRects ?? []
readonly property int clampedExtent: Math.max(Config.bar.border, extent)
readonly property int contentThickness: Math.floor(Math.max(Config.bar.height, Tokens.sizes.bar.innerSize * (horizontal ? 1 : 1.5))) + padding * 2
readonly property int exclusiveZone: Config.bar.autoHide ? Config.bar.border : contentThickness
+4 -2
View File
@@ -4,6 +4,7 @@ import Quickshell
import QtQuick
import QtQuick.Layouts
import ZShell.Config
import ZShell.Components
import qs.Modules.Bar.Popouts
import qs.Modules.Bar.Components.Common
import qs.Helpers
@@ -43,7 +44,7 @@ WidgetBase {
timeTokens: timeTokens
};
}
required property GridLayout loader
required property SnapLayout loader
required property Wrapper popouts
readonly property real size: horizontal ? timeText.contentWidth + Tokens.padding.medium * 2 : verticalColumn.implicitHeight + Tokens.padding.medium * 2
required property ScreenState screenState
@@ -67,7 +68,8 @@ WidgetBase {
}
}
ColumnLayout {
SnapLayout {
orientation: Qt.Vertical
id: verticalColumn
anchors.centerIn: parent
+1
View File
@@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import ZShell.Config
import qs.Components
import qs.Modules.Bar.Components.Common
+2 -1
View File
@@ -1,6 +1,7 @@
import Quickshell
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import qs.Components
import qs.Modules
@@ -11,7 +12,7 @@ Item {
anchors.top: parent.top
implicitWidth: layout.implicitWidth
RowLayout {
SnapLayout {
id: layout
anchors.bottom: parent.bottom
+1
View File
@@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import Quickshell
import qs.Components
import ZShell.Config
+1
View File
@@ -3,6 +3,7 @@ pragma ComponentBehavior: Bound
import QtQuick
import Quickshell
import QtQuick.Layouts
import ZShell.Components
import ZShell.Config
import ZShell.Services
import qs.Services
+7 -8
View File
@@ -4,6 +4,7 @@ import Quickshell
import QtQuick
import QtQuick.Layouts
import ZShell.Config
import ZShell.Components
import qs.Helpers
import qs.Modules.Bar.Components.StatusIcons
import qs.Modules.Bar.Components.Common
@@ -51,17 +52,15 @@ WidgetBase {
Behavior on implicitHeight {
enabled: !root.horizontal
Anim {
}
Anim {}
}
Behavior on implicitWidth {
enabled: root.horizontal
Anim {
}
Anim {}
}
GridLayout {
SnapLayout {
id: grid
anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.medium
@@ -69,7 +68,8 @@ WidgetBase {
anchors.leftMargin: root.horizontal ? Tokens.padding.extraSmall : 0
anchors.rightMargin: root.horizontal ? Tokens.padding.extraSmall : 0
anchors.topMargin: root.horizontal ? 0 : Tokens.padding.extraSmall
columns: root.horizontal ? -1 : 1
orientation: root.horizontal ? Qt.Horizontal : Qt.Vertical
spacing: root.horizontal ? Tokens.spacing.extraSmall : -2
Repeater {
model: ScriptModel {
@@ -111,8 +111,7 @@ WidgetBase {
delegate: EntryWrapper {
name: "upower"
UPowerWidget {
}
UPowerWidget {}
}
}
}
@@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import ZShell.Config
import qs.Daemons
import qs.Components
@@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import ZShell.Config
import qs.Daemons
import qs.Components
@@ -1,6 +1,7 @@
import Quickshell.Services.UPower
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import ZShell.Config
import qs.Modules.Bar.Components.Common
import qs.Components
+3 -2
View File
@@ -2,10 +2,11 @@ import QtQuick.Layouts
import QtQuick
import Quickshell
import Quickshell.Services.SystemTray
import ZShell.Config
import ZShell.Components
import qs.Helpers
import qs.Modules.Bar.Popouts
import qs.Components
import ZShell.Config
import qs.Services
Item {
@@ -15,7 +16,7 @@ Item {
readonly property real dpr: Hypr.monitorFor(loader?.screen).scale
required property int ind
required property SystemTrayItem item
required property GridLayout loader
required property SnapLayout loader
required property Wrapper popouts
function resolveIcon(app: string, icon: string): string {
+5 -4
View File
@@ -4,6 +4,7 @@ import QtQuick
import QtQuick.Layouts
import Quickshell.Services.SystemTray
import ZShell.Config
import ZShell.Components
import qs.Components
import qs.Modules.Bar.Components.Common
import qs.Modules.Bar.Components.Tray
@@ -15,7 +16,7 @@ WidgetBase {
readonly property alias items: repeater
readonly property alias layout: sysGrid
required property GridLayout loader
required property SnapLayout loader
readonly property int padding: Tokens.padding.extraSmall
required property Wrapper popouts
readonly property real size: horizontal ? sysGrid.implicitWidth + sysGrid.anchors.leftMargin + sysGrid.anchors.rightMargin : sysGrid.implicitHeight + sysGrid.anchors.topMargin + sysGrid.anchors.bottomMargin
@@ -28,7 +29,7 @@ WidgetBase {
radius: Tokens.rounding.full
topRightRadius: horizontal ? Tokens.rounding.small / 2 : Tokens.rounding.full
GridLayout {
SnapLayout {
id: sysGrid
anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.extraSmall
@@ -36,8 +37,8 @@ WidgetBase {
anchors.leftMargin: root.horizontal ? Tokens.padding.extraSmall : 0
anchors.rightMargin: root.horizontal ? Tokens.padding.extraSmall : 0
anchors.topMargin: root.horizontal ? 0 : Tokens.padding.extraSmall
columns: root.horizontal ? -1 : 1
rowSpacing: -2
orientation: root.horizontal ? Qt.Horizontal : Qt.Vertical
spacing: root.horizontal ? Tokens.spacing.extraSmall : -2
Repeater {
id: repeater
+1
View File
@@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import ZShell.Config
import qs.Components
import qs.Modules.Bar.Components.Common
+1 -1
View File
@@ -17,7 +17,7 @@ Item {
readonly property int maxSize: {
const otherModules = bar.children.filter(c => c.enabled && c.entryId && c.item !== this && c.entryId !== "spacer");
const otherSize = otherModules.reduce((acc, curr) => acc + (horizontal ? (curr.item?.nonAnimWidth ?? curr.width ?? 0) : (curr.item.nonAnimHeight ?? curr.height ?? 0)), 0);
return horizontal ? (bar.width - otherSize - bar.columnSpacing * (bar.children.length - 1) - bar.vPadding * 2) : (bar.height - otherSize - bar.rowSpacing * (bar.children.length - 1) - bar.vPadding * 4);
return horizontal ? (bar.width - otherSize - bar.spacing * (bar.children.length - 1) - bar.vPadding * 2) : (bar.height - otherSize - bar.spacing * (bar.children.length - 1) - bar.vPadding * 4);
}
clip: true
+15 -10
View File
@@ -5,6 +5,7 @@ import Quickshell.Services.Pipewire
import Quickshell.Widgets
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import QtQuick.Controls
import ZShell.Config
import qs.Components
@@ -46,7 +47,8 @@ Item {
anchors.verticalCenter: parent.verticalCenter
}
component VolumesTab: ColumnLayout {
component VolumesTab: SnapLayout {
orientation: Qt.Vertical
spacing: 12
CustomRect {
@@ -56,14 +58,15 @@ Item {
color: Colors.tPalette.m3surfaceContainer
radius: root.rounding - vol.anchors.margins
ColumnLayout {
SnapLayout {
orientation: Qt.Vertical
anchors.bottomMargin: Tokens.padding.small
anchors.fill: parent
anchors.leftMargin: Tokens.padding.small
anchors.rightMargin: Tokens.padding.small
anchors.topMargin: Tokens.padding.small
RowLayout {
SnapLayout {
Layout.fillHeight: true
Layout.fillWidth: true
@@ -81,7 +84,7 @@ Item {
}
}
RowLayout {
SnapLayout {
spacing: Tokens.spacing.largeIncreased
CustomMouseArea {
@@ -153,14 +156,15 @@ Item {
}
}
ColumnLayout {
SnapLayout {
orientation: Qt.Vertical
anchors.bottomMargin: Tokens.padding.small
anchors.fill: parent
anchors.leftMargin: Tokens.padding.small
anchors.rightMargin: Tokens.padding.small
anchors.topMargin: Tokens.padding.small
RowLayout {
SnapLayout {
Layout.fillHeight: true
Layout.fillWidth: true
@@ -178,7 +182,7 @@ Item {
}
}
RowLayout {
SnapLayout {
spacing: Tokens.spacing.largeIncreased
CustomMouseArea {
@@ -276,14 +280,15 @@ Item {
text: Audio.getStreamName(appBox.modelData)
}
ColumnLayout {
SnapLayout {
orientation: Qt.Vertical
anchors.bottomMargin: Tokens.padding.small
anchors.fill: parent
anchors.leftMargin: Tokens.padding.small
anchors.rightMargin: Tokens.padding.small
anchors.topMargin: Tokens.padding.small
RowLayout {
SnapLayout {
Layout.fillHeight: true
Layout.fillWidth: true
@@ -302,7 +307,7 @@ Item {
}
}
RowLayout {
SnapLayout {
spacing: Tokens.spacing.largeIncreased
CustomMouseArea {
+3 -1
View File
@@ -4,6 +4,7 @@ import Quickshell
import Quickshell.Networking
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import qs.Components
import ZShell.Config
import qs.Modules
@@ -14,7 +15,8 @@ Item {
required property var wrapper
ColumnLayout {
SnapLayout {
orientation: Qt.Vertical
id: layout
spacing: 8
+3 -1
View File
@@ -4,6 +4,7 @@ import Quickshell
import Quickshell.Widgets
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import QtQuick.Controls
import QtQuick.Effects
import qs.Components
@@ -47,7 +48,8 @@ StackView {
duration: 0
}
}
component SubMenu: ColumnLayout {
component SubMenu: SnapLayout {
orientation: Qt.Vertical
id: menu
required property QsMenuHandle handle
+2 -1
View File
@@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import Quickshell.Services.UPower
import ZShell.Config
import qs.Modules.Bar.Components.Common
@@ -35,7 +36,7 @@ Column {
Repeater {
model: Battery.allPeripherals
RowLayout {
SnapLayout {
id: layout
required property var modelData
+5 -3
View File
@@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import ZShell.Components
import Quickshell
import ZShell.Config
import qs.Components
@@ -86,7 +87,7 @@ CustomRect {
implicitWidth: 600
radius: root.radius - Tokens.padding.extraSmall
RowLayout {
SnapLayout {
anchors.fill: parent
anchors.leftMargin: Tokens.padding.small
anchors.rightMargin: Tokens.padding.small
@@ -96,7 +97,8 @@ CustomRect {
text: "package_2"
}
ColumnLayout {
SnapLayout {
orientation: Qt.Vertical
Layout.fillWidth: true
CustomText {
@@ -114,7 +116,7 @@ CustomRect {
}
}
RowLayout {
SnapLayout {
Layout.fillHeight: true
Layout.preferredWidth: 300