initial commit for media widget update + anim tokens restructure

2026-08-18 16:14:41 +02:00
parent 8ec454306f
commit 7d6f3cc275
162 changed files with 1385 additions and 1080 deletions
@@ -0,0 +1,148 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Services
+
+Row {
+	id: root
+
+	enum Type {
+		Filled,
+		Tonal
+	}
+
+	property alias active: menu.active
+	property color colour: type == SplitButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer
+	property color disabledColor: Qt.alpha(Colors.palette.m3onSurface, 0.1)
+	property color disabledTextColor: Qt.alpha(Colors.palette.m3onSurface, 0.38)
+	readonly property alias expandBtn: expandBtn
+	property alias expanded: menu.expanded
+	property string fallbackIcon
+	property string fallbackText
+	property real horizontalPadding: Tokens.padding.medium
+	readonly property alias iconLabel: iconLabel
+	readonly property alias label: label
+	readonly property alias menu: menu
+	property alias menuItems: menu.items
+	property bool menuOnTop
+	property real minLeftWidth
+	readonly property alias stateLayer: stateLayer
+	property color textColor: type == SplitButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
+	readonly property alias textRow: textRow
+	property int type: SplitButton.Filled
+	property real verticalPadding: Tokens.padding.small
+
+	spacing: Math.floor(Tokens.spacing.extraSmall / 2)
+
+	CustomRect {
+		bottomRightRadius: Tokens.rounding.medium / 2
+		color: root.disabled ? root.disabledColor : root.colour
+		implicitHeight: expandBtn.implicitHeight
+		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
+		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
+		topRightRadius: Tokens.rounding.medium / 2
+
+		StateLayer {
+			id: stateLayer
+
+			bottomRightRadius: parent.bottomRightRadius
+			color: root.textColor
+			enabled: root.enabled
+			topRightRadius: parent.topRightRadius
+
+			onClicked: root.active?.clicked()
+		}
+
+		RowLayout {
+			id: textRow
+
+			anchors.centerIn: parent
+			anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4)
+			spacing: Tokens.spacing.small
+
+			MaterialIcon {
+				id: iconLabel
+
+				Layout.alignment: Qt.AlignVCenter
+				animate: true
+				color: !root.enabled ? root.disabledTextColor : root.textColor
+				fill: 1
+				text: root.active?.activeIcon ?? root.fallbackIcon
+			}
+
+			CustomText {
+				id: label
+
+				Layout.alignment: Qt.AlignVCenter
+				Layout.preferredWidth: implicitWidth
+				animate: true
+				clip: true
+				color: !root.enabled ? root.disabledTextColor : root.textColor
+				text: root.active?.activeText ?? root.fallbackText
+
+				Behavior on Layout.preferredWidth {
+					Anim {
+						type: Anim.Emphasized
+					}
+				}
+			}
+		}
+	}
+
+	CustomRect {
+		id: expandBtn
+
+		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.medium / 2
+
+		bottomLeftRadius: rad
+		color: !root.enabled ? root.disabledColor : root.colour
+		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
+		implicitWidth: implicitHeight
+		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
+		topLeftRadius: rad
+
+		Behavior on rad {
+			Anim {
+			}
+		}
+
+		StateLayer {
+			id: expandStateLayer
+
+			color: root.textColor
+			enabled: root.enabled
+			rect.bottomLeftRadius: parent.bottomLeftRadius
+			rect.topLeftRadius: parent.topLeftRadius
+
+			onClicked: root.expanded = !root.expanded
+		}
+
+		MaterialIcon {
+			id: expandIcon
+
+			anchors.centerIn: parent
+			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
+			color: !root.enabled ? root.disabledTextColor : root.textColor
+			rotation: root.expanded ? 180 : 0
+			text: "expand_more"
+
+			Behavior on anchors.horizontalCenterOffset {
+				Anim {
+				}
+			}
+			Behavior on rotation {
+				Anim {
+				}
+			}
+		}
+	}
+
+	Menu {
+		id: menu
+
+		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
+		attachTo: expandBtn
+		marginY: Tokens.spacing.small * (root.menuOnTop ? -1 : 1)
+		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
+	}
+}