initial commit for media widget update + anim tokens restructure

Modules/Bar/Popouts/AudioPopout.qml

@@ -15,12 +15,13 @@ import qs.Services
 Item {
 	id: root
 
-	readonly property int rounding: Tokens.rounding.small - Tokens.padding.small
+	readonly property int panelRadius: Tokens.rounding.largeIncreased + Tokens.padding.smaller
+	readonly property int rounding: panelRadius - Tokens.padding.smaller
 	readonly property int topMargin: 0
 	required property var wrapper
 
-	implicitHeight: vol.implicitHeight + Tokens.padding.small * 2
-	implicitWidth: 500 + Tokens.padding.small * 2
+	implicitHeight: vol.implicitHeight + Tokens.padding.smaller * 2
+	implicitWidth: 500 + Tokens.padding.smaller * 2
 
 	CustomRect {
 		anchors.left: parent.left
@@ -28,7 +29,7 @@ Item {
 		anchors.top: parent.top
 		color: Colors.tPalette.m3surfaceContainer
 		implicitHeight: parent.implicitHeight
-		radius: Tokens.rounding.small
+		radius: root.rounding
 		y: parent.y
 
 		Behavior on implicitHeight {
@@ -41,7 +42,7 @@ Item {
 		id: vol
 
 		anchors.left: parent.left
-		anchors.margins: Tokens.padding.small
+		anchors.margins: Tokens.padding.smaller
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
 	}
@@ -51,17 +52,17 @@ Item {
 
 		CustomRect {
 			Layout.fillWidth: true
-			Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
+			Layout.preferredHeight: 65 + Tokens.spacing.small * 2
 			Layout.topMargin: root.topMargin
 			color: Colors.tPalette.m3surfaceContainer
-			radius: root.rounding
+			radius: root.rounding - vol.anchors.margins
 
 			ColumnLayout {
-				anchors.bottomMargin: Tokens.padding.smaller
+				anchors.bottomMargin: Tokens.padding.small
 				anchors.fill: parent
-				anchors.leftMargin: Tokens.padding.larger
-				anchors.rightMargin: Tokens.padding.larger
-				anchors.topMargin: Tokens.padding.smaller
+				anchors.leftMargin: Tokens.padding.small
+				anchors.rightMargin: Tokens.padding.small
+				anchors.topMargin: Tokens.padding.small
 
 				RowLayout {
 					Layout.fillHeight: true
@@ -82,12 +83,12 @@ Item {
 				}
 
 				RowLayout {
-					spacing: Tokens.spacing.large
+					spacing: Tokens.spacing.largeIncreased
 
 					CustomMouseArea {
-						Layout.bottomMargin: Tokens.padding.normal
+						Layout.bottomMargin: Tokens.padding.small
 						Layout.fillWidth: true
-						Layout.preferredHeight: Tokens.padding.larger * 3
+						Layout.preferredHeight: Tokens.padding.medium * 3
 
 						CustomSlider {
 							anchors.left: parent.left
@@ -109,7 +110,7 @@ Item {
 					}
 
 					CustomSwitch {
-						Layout.bottomMargin: Tokens.padding.normal
+						Layout.bottomMargin: Tokens.padding.small
 						checked: !Audio.muted
 
 						onToggled: {
@@ -124,10 +125,10 @@ Item {
 
 		CustomClippingRect {
 			Layout.fillWidth: true
-			Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
+			Layout.preferredHeight: 65 + Tokens.spacing.small * 2
 			Layout.topMargin: root.topMargin
 			color: Colors.tPalette.m3surfaceContainer
-			radius: root.rounding
+			radius: root.rounding - vol.anchors.margins
 
 			PwNodePeakMonitor {
 				id: sourcePeak
@@ -151,11 +152,11 @@ Item {
 			}
 
 			ColumnLayout {
-				anchors.bottomMargin: Tokens.padding.smaller
+				anchors.bottomMargin: Tokens.padding.small
 				anchors.fill: parent
-				anchors.leftMargin: Tokens.padding.larger
-				anchors.rightMargin: Tokens.padding.larger
-				anchors.topMargin: Tokens.padding.smaller
+				anchors.leftMargin: Tokens.padding.small
+				anchors.rightMargin: Tokens.padding.small
+				anchors.topMargin: Tokens.padding.small
 
 				RowLayout {
 					Layout.fillHeight: true
@@ -176,12 +177,12 @@ Item {
 				}
 
 				RowLayout {
-					spacing: Tokens.spacing.large
+					spacing: Tokens.spacing.largeIncreased
 
 					CustomMouseArea {
-						Layout.bottomMargin: Tokens.padding.normal
+						Layout.bottomMargin: Tokens.padding.small
 						Layout.fillWidth: true
-						Layout.preferredHeight: Tokens.padding.larger * 3
+						Layout.preferredHeight: Tokens.padding.medium * 3
 
 						CustomSlider {
 							anchors.left: parent.left
@@ -203,7 +204,7 @@ Item {
 					}
 
 					CustomSwitch {
-						Layout.bottomMargin: Tokens.padding.normal
+						Layout.bottomMargin: Tokens.padding.small
 						checked: !Audio.sourceMuted
 
 						onToggled: {
@@ -236,10 +237,10 @@ Item {
 				required property var modelData
 
 				Layout.fillWidth: true
-				Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
+				Layout.preferredHeight: 65 + Tokens.spacing.small * 2
 				Layout.topMargin: root.topMargin
 				color: Colors.tPalette.m3surfaceContainer
-				radius: root.rounding
+				radius: root.rounding - vol.anchors.margins
 
 				PwNodePeakMonitor {
 					id: peak
@@ -271,11 +272,11 @@ Item {
 				}
 
 				ColumnLayout {
-					anchors.bottomMargin: Tokens.padding.smaller
+					anchors.bottomMargin: Tokens.padding.small
 					anchors.fill: parent
-					anchors.leftMargin: Tokens.padding.larger
-					anchors.rightMargin: Tokens.padding.larger
-					anchors.topMargin: Tokens.padding.smaller
+					anchors.leftMargin: Tokens.padding.small
+					anchors.rightMargin: Tokens.padding.small
+					anchors.topMargin: Tokens.padding.small
 
 					RowLayout {
 						Layout.fillHeight: true
@@ -297,12 +298,12 @@ Item {
 					}
 
 					RowLayout {
-						spacing: Tokens.spacing.large
+						spacing: Tokens.spacing.largeIncreased
 
 						CustomMouseArea {
-							Layout.bottomMargin: Tokens.padding.normal
+							Layout.bottomMargin: Tokens.padding.small
 							Layout.fillWidth: true
-							Layout.preferredHeight: Tokens.padding.larger * 3
+							Layout.preferredHeight: Tokens.padding.medium * 3
 
 							CustomSlider {
 								anchors.left: parent.left
@@ -324,7 +325,7 @@ Item {
 						}
 
 						CustomSwitch {
-							Layout.bottomMargin: Tokens.padding.normal
+							Layout.bottomMargin: Tokens.padding.small
 							checked: !appBox.modelData.audio.muted
 
 							onToggled: {

Modules/Bar/Popouts/ClipWrapper.qml

@@ -58,7 +58,7 @@ Item {
 
 		Anim {
 			duration: content.animLength
-			easing.bezierCurve: content.animCurve
+			easing: content.animCurve
 		}
 	}
 	Behavior on y {
@@ -66,7 +66,7 @@ Item {
 
 		Anim {
 			duration: content.animLength
-			easing.bezierCurve: content.animCurve
+			easing: content.animCurve
 		}
 	}
 
@@ -81,6 +81,7 @@ Item {
 		anchors.top: root.position === "top" ? parent.top : undefined
 		anchors.topMargin: (-implicitHeight - 5) * root.offsetScale
 		anchors.verticalCenter: root.horizontal ? undefined : parent.verticalCenter
+		horizontal: root.horizontal
 		offsetScale: root.offsetScale
 		screen: root.screen
 	}

Modules/Bar/Popouts/Content.qml

@@ -11,10 +11,11 @@ Item {
 
 	readonly property Item current: currentPopout?.item ?? null
 	readonly property Popout currentPopout: content.children.find(c => c.shouldBeActive) ?? null
+	required property bool horizontal
 	required property PopoutState popouts
 
-	implicitHeight: (currentPopout?.implicitHeight ?? 0) + Tokens.padding.small * 2
-	implicitWidth: (currentPopout?.implicitWidth ?? 0) + Tokens.padding.small * 2
+	implicitHeight: (currentPopout?.implicitHeight ?? 0) + Tokens.padding.smaller * 2
+	implicitWidth: (currentPopout?.implicitWidth ?? 0) + Tokens.padding.smaller * 2
 
 	Item {
 		id: content
@@ -69,6 +70,7 @@ Item {
 			name: "upower"
 
 			sourceComponent: UPowerPopout {
+				horizontal: root.horizontal
 			}
 		}
 
@@ -99,7 +101,7 @@ Item {
 		anchors.centerIn: opacity === 1 ? undefined : parent
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: opacity === 1 ? parent.top : undefined
-		anchors.topMargin: 5
+		anchors.topMargin: Tokens.padding.smaller
 		opacity: 0
 		scale: 0.8
 

Modules/Bar/Popouts/TrayMenuPopout.qml

@@ -15,7 +15,7 @@ StackView {
 	id: root
 
 	readonly property int itemHeight: 30
-	readonly property int panelRadius: ((itemHeight / 2) + Tokens.padding.small) * Tokens.rounding.scale
+	readonly property int panelRadius: ((itemHeight / 2) + Tokens.padding.extraSmall) * Tokens.rounding.scale
 	required property PopoutState popouts
 	property int rootWidth: 0
 	required property QsMenuHandle trayItem
@@ -88,10 +88,10 @@ StackView {
 				required property QsMenuEntry modelData
 
 				Layout.fillWidth: true
-				Layout.leftMargin: modelData.isSeparator ? Tokens.padding.normal : 0
-				Layout.rightMargin: modelData.isSeparator ? Tokens.padding.normal : 0
-				color: modelData.isSeparator ? Colors.palette.m3outlineVariant : "transparent"
-				implicitHeight: modelData.isSeparator ? (visible ? 1 : 0) : childrenLoader.item.implicitHeight
+				Layout.leftMargin: modelData?.isSeparator ?? false ? Tokens.padding.small : 0
+				Layout.rightMargin: modelData?.isSeparator ?? false ? Tokens.padding.small : 0
+				color: modelData?.isSeparator ?? false ? Colors.palette.m3outlineVariant : "transparent"
+				implicitHeight: modelData?.isSeparator ?? false ? (visible ? 1 : 0) : childrenLoader.item?.implicitHeight ?? 0
 				implicitWidth: childrenLoader.item?.implicitWidth ?? 0
 				radius: Tokens.rounding.full
 				visible: index !== (menuOpener.children.values.length - 1) ? true : (modelData.isSeparator ? false : true)
@@ -99,18 +99,18 @@ StackView {
 				Loader {
 					id: childrenLoader
 
-					active: !item.modelData.isSeparator
+					active: !item.modelData?.isSeparator ?? false
 					anchors.fill: parent
 					asynchronous: true
 
 					sourceComponent: Item {
-						property int iconWidth: icon.active ? icon.width + Tokens.spacing.normal + icon.anchors.rightMargin : 0
+						property int iconWidth: icon.active ? icon.width + Tokens.spacing.medium + icon.anchors.rightMargin : 0
 
 						implicitHeight: root.itemHeight
 						implicitWidth: label.width + label.anchors.leftMargin * 2 + iconWidth + (expand.item?.width ?? 0)
 
 						StateLayer {
-							enabled: item.modelData.enabled
+							enabled: item.modelData?.enabled ?? false
 							radius: item.radius
 
 							onClicked: {
@@ -130,7 +130,7 @@ StackView {
 						Loader {
 							id: icon
 
-							active: item.modelData.icon !== ""
+							active: item.modelData?.icon ?? "" !== ""
 							anchors.right: parent.right
 							anchors.rightMargin: 10
 							anchors.verticalCenter: parent.verticalCenter
@@ -144,7 +144,7 @@ StackView {
 									id: iconImage
 
 									implicitSize: parent.implicitHeight
-									source: item.modelData.icon
+									source: item.modelData?.icon ?? Qt.url("")
 									visible: false
 								}
 
@@ -163,20 +163,20 @@ StackView {
 							anchors.left: parent.left
 							anchors.leftMargin: 10
 							anchors.verticalCenter: parent.verticalCenter
-							color: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
-							text: item.modelData.text
+							color: item.modelData?.enabled ?? false ? Colors.palette.m3onSurface : Colors.palette.m3outline
+							text: item.modelData?.text ?? ""
 						}
 
 						Loader {
 							id: expand
 
-							active: item.modelData.hasChildren
+							active: item.modelData?.hasChildren ?? false
 							anchors.right: parent.right
 							anchors.verticalCenter: parent.verticalCenter
 							asynchronous: true
 
 							sourceComponent: MaterialIcon {
-								color: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
+								color: item.modelData?.enabled ?? false ? Colors.palette.m3onSurface : Colors.palette.m3outline
 								text: "chevron_right"
 							}
 						}

Modules/Bar/Popouts/UPowerPopout.qml

@@ -12,9 +12,10 @@ import qs.Services
 Column {
 	id: root
 
-	readonly property int panelRadius: ((profiles.height / 2) + Tokens.padding.small) * Tokens.rounding.scale
+	required property bool horizontal
+	readonly property int panelRadius: ((profiles.height / 2) + Tokens.padding.extraSmall) * Tokens.rounding.scale
 
-	spacing: Tokens.spacing.normal
+	spacing: Tokens.spacing.medium
 
 	Loader {
 		active: Battery.isLaptop
@@ -24,6 +25,13 @@ Column {
 		}
 	}
 
+	Item {
+		id: padding
+
+		implicitHeight: root.horizontal ? 0 : Tokens.padding.small
+		implicitWidth: 1
+	}
+
 	Repeater {
 		model: Battery.allPeripherals
 
@@ -33,9 +41,9 @@ Column {
 			required property var modelData
 
 			anchors.left: parent.left
-			anchors.leftMargin: Tokens.padding.normal
+			anchors.leftMargin: Tokens.padding.small
 			anchors.right: parent.right
-			anchors.rightMargin: Tokens.padding.normal
+			anchors.rightMargin: Tokens.padding.small
 
 			CustomText {
 				Layout.fillWidth: true
@@ -67,7 +75,7 @@ Column {
 		}
 
 		anchors.left: parent.left
-		anchors.leftMargin: Tokens.padding.normal
+		anchors.leftMargin: Tokens.padding.small
 		text: Battery.isLaptop ? qsTr("Time %1: %2").arg(Battery.onBattery ? "remaining" : "until charged").arg(Battery.onBattery ? formatSeconds(Battery.timeToEmpty, "Calculating...") : formatSeconds(Battery.timeToFull, "Fully charged!")) : qsTr("Power profile: %1").arg(PowerProfile.toString(PowerProfiles.profile))
 	}
 
@@ -80,8 +88,8 @@ Column {
 		sourceComponent: CustomRect {
 			color: Colors.palette.m3error
 			implicitHeight: child.implicitHeight + Tokens.padding.large
-			implicitWidth: child.implicitWidth + Tokens.padding.larger * 2
-			radius: Tokens.rounding.large
+			implicitWidth: child.implicitWidth + Tokens.padding.small * 2
+			radius: Tokens.rounding.largeIncreased
 
 			Column {
 				id: child
@@ -138,7 +146,7 @@ Column {
 		anchors.horizontalCenter: parent.horizontalCenter
 		color: Colors.tPalette.m3surfaceContainer
 		implicitHeight: indicator.height + Tokens.padding.extraSmall * 2
-		implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Tokens.padding.larger * 2 + Tokens.spacing.small * 8
+		implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Tokens.padding.small * 2 + Tokens.spacing.small * 8
 		radius: Tokens.rounding.full
 
 		CustomRect {
@@ -219,8 +227,8 @@ Column {
 		required property string icon
 		required property int profile
 
-		implicitHeight: icon.implicitHeight + Tokens.padding.small
-		implicitWidth: icon.implicitHeight + Tokens.padding.small
+		implicitHeight: icon.implicitHeight + Tokens.padding.extraSmall
+		implicitWidth: icon.implicitHeight + Tokens.padding.extraSmall
 
 		StateLayer {
 			color: profiles.current === parent.icon ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface

Modules/Bar/Popouts/UpdatesPopout.qml

@@ -13,13 +13,13 @@ CustomClippingRect {
 	id: root
 
 	readonly property bool hasUpdates: Object.keys(Updates.updates)?.length > 0
-	readonly property int itemHeight: 50 + Tokens.padding.smaller * 2
+	readonly property int itemHeight: 50 + Tokens.padding.small * 2
 	required property var wrapper
 
 	color: Colors.tPalette.m3surfaceContainer
-	implicitHeight: hasUpdates ? updatesListLoader.item?.implicitHeight + Tokens.padding.small * 2 : noUpdatesLoader.item.height
-	implicitWidth: hasUpdates ? updatesListLoader.item?.contentWidth + Tokens.padding.small * 2 : noUpdatesLoader.item.width
-	radius: Tokens.rounding.small
+	implicitHeight: hasUpdates ? updatesListLoader.item?.implicitHeight + Tokens.padding.extraSmall * 2 : noUpdatesLoader.item.height
+	implicitWidth: hasUpdates ? updatesListLoader.item?.contentWidth + Tokens.padding.extraSmall * 2 : noUpdatesLoader.item.width
+	radius: Tokens.rounding.large - Tokens.padding.smaller
 
 	Loader {
 		id: noUpdatesLoader
@@ -70,7 +70,7 @@ CustomClippingRect {
 			displayMarginEnd: root.itemHeight
 			implicitHeight: Math.min(contentHeight, (root.itemHeight + spacing) * 5 - spacing)
 			implicitWidth: contentWidth
-			spacing: Tokens.spacing.normal
+			spacing: Tokens.spacing.medium
 
 			delegate: CustomRect {
 				id: update
@@ -81,12 +81,12 @@ CustomClippingRect {
 				color: Colors.tPalette.m3surfaceContainer
 				implicitHeight: root.itemHeight
 				implicitWidth: 600
-				radius: Tokens.rounding.small - Tokens.padding.small
+				radius: root.radius - Tokens.padding.extraSmall
 
 				RowLayout {
 					anchors.fill: parent
-					anchors.leftMargin: Tokens.padding.smaller
-					anchors.rightMargin: Tokens.padding.smaller
+					anchors.leftMargin: Tokens.padding.small
+					anchors.rightMargin: Tokens.padding.small
 
 					MaterialIcon {
 						font.pointSize: Tokens.font.size.large * 2

Modules/Bar/Popouts/Wrapper.qml

@@ -8,7 +8,7 @@ import ZShell.Config
 Item {
 	id: root
 
-	property list<real> animCurve: Tokens.anim.curves.expressiveDefaultSpatial
+	property var animCurve: Tokens.anim.expressiveDefaultSpatial
 	property int animLength: Tokens.anim.durations.expressiveDefaultSpatial
 	readonly property alias content: content
 	readonly property Item current: (content.item as Content)?.current ?? null
@@ -16,6 +16,7 @@ Item {
 	property alias currentName: popoutState.currentName
 	property string detachedMode
 	property alias hasCurrent: popoutState.hasCurrent
+	required property bool horizontal
 	readonly property real nonAnimHeight: content.implicitHeight || 150
 	readonly property real nonAnimWidth: children.find(c => c.shouldBeActive)?.implicitWidth ?? content.implicitWidth
 	required property real offsetScale
@@ -35,7 +36,7 @@ Item {
 
 		Anim {
 			duration: root.animLength
-			easing.bezierCurve: root.animCurve
+			easing: root.animCurve
 		}
 	}
 	Behavior on implicitWidth {
@@ -43,7 +44,7 @@ Item {
 
 		Anim {
 			duration: root.animLength
-			easing.bezierCurve: root.animCurve
+			easing: root.animCurve
 		}
 	}
 
@@ -58,6 +59,7 @@ Item {
 		shouldBeActive: root.hasCurrent
 
 		sourceComponent: Content {
+			horizontal: root.horizontal
 			popouts: popoutState
 		}
 	}