diff --git a/Components/AnchorAnim.qml b/Components/AnchorAnim.qml index ff6657f..0fbbde6 100644 --- a/Components/AnchorAnim.qml +++ b/Components/AnchorAnim.qml @@ -27,25 +27,25 @@ AnchorAnimation { if (type == AnchorAnim.DefaultSpatial) return Tokens.anim.durations.expressiveDefaultSpatial; if (type == AnchorAnim.SlowSpatial) - return Tokens.anim.durations.large; + return Tokens.anim.durations.expressiveSlowSpatial; const types = ["small", "normal", "large", "extraLarge"]; - const idx = type % 4; + const idx = type % 4; // 0-7 are the 4 standard types return Tokens.anim.durations[types[idx]]; } - easing.bezierCurve: { + easing: { if (type == AnchorAnim.FastSpatial) - return Tokens.anim.curves.expressiveFastSpatial; + return Tokens.anim.expressiveFastSpatial; if (type == AnchorAnim.DefaultSpatial) - return Tokens.anim.curves.expressiveDefaultSpatial; + return Tokens.anim.expressiveDefaultSpatial; if (type == AnchorAnim.SlowSpatial) - return Tokens.anim.curves.expressiveSlowSpatial; + return Tokens.anim.expressiveSlowSpatial; if (type >= AnchorAnim.StandardSmall && type <= AnchorAnim.StandardExtraLarge) - return Tokens.anim.curves.standard; + return Tokens.anim.standard; if (type >= AnchorAnim.EmphasizedSmall && type <= AnchorAnim.EmphasizedExtraLarge) - return Tokens.anim.curves.emphasized; + return Tokens.anim.emphasized; - return Tokens.anim.curves.expressiveDefaultSpatial; + return Tokens.anim.expressiveDefaultSpatial; } } diff --git a/Components/Anim.qml b/Components/Anim.qml index a4f6568..0cab04e 100644 --- a/Components/Anim.qml +++ b/Components/Anim.qml @@ -30,34 +30,34 @@ NumberAnimation { if (type === Anim.DefaultSpatial) return Tokens.anim.durations.expressiveDefaultSpatial; if (type === Anim.SlowSpatial) - return Tokens.anim.durations.large; + return Tokens.anim.durations.expressiveSlowSpatial; if (type === Anim.FastEffects) return Tokens.anim.durations.expressiveFastEffects; if (type === Anim.DefaultEffects) - return Tokens.anim.durations.expressiveEffects; + return Tokens.anim.durations.expressiveDefaultEffects; if (type === Anim.SlowEffects) return Tokens.anim.durations.expressiveSlowEffects; const types = ["small", "normal", "large", "extraLarge"]; - const idx = type % 4; + const idx = type % 4; // 0-7 are the 4 standard types return Tokens.anim.durations[types[idx]]; } - easing.bezierCurve: { + easing: { if (type === Anim.FastSpatial) - return Tokens.anim.curves.expressiveFastSpatial; + return Tokens.anim.expressiveFastSpatial; if (type === Anim.DefaultSpatial) - return Tokens.anim.curves.expressiveDefaultSpatial; + return Tokens.anim.expressiveDefaultSpatial; if (type === Anim.SlowSpatial) - return Tokens.anim.curves.expressiveSlowSpatial; + return Tokens.anim.expressiveSlowSpatial; if (type === Anim.FastEffects) - return Tokens.anim.curves.expressiveFastEffects; + return Tokens.anim.expressiveFastEffects; if (type === Anim.DefaultEffects) - return Tokens.anim.curves.expressiveDefaultEffects; + return Tokens.anim.expressiveDefaultEffects; if (type === Anim.SlowEffects) - return Tokens.anim.curves.expressiveSlowEffects; + return Tokens.anim.expressiveSlowEffects; if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge) - return Tokens.anim.curves.emphasized; - return Tokens.anim.curves.standard; + return Tokens.anim.emphasized; + return Tokens.anim.standard; } } diff --git a/Components/BaseStyledSlider.qml b/Components/BaseStyledSlider.qml index ac14d1d..9d3b654 100644 --- a/Components/BaseStyledSlider.qml +++ b/Components/BaseStyledSlider.qml @@ -107,7 +107,7 @@ Slider { Anim { duration: Tokens.anim.durations.normal / 2 - easing.bezierCurve: Tokens.anim.curves.standardAccel + easing: Tokens.anim.standardAccel property: "scale" target: icon to: 0 @@ -119,7 +119,7 @@ Slider { Anim { duration: Tokens.anim.durations.normal / 2 - easing.bezierCurve: Tokens.anim.curves.standardDecel + easing: Tokens.anim.standardDecel property: "scale" target: icon to: 1 diff --git a/Components/ButtonBase.qml b/Components/ButtonBase.qml index 50a56a9..ec11a7d 100644 --- a/Components/ButtonBase.qml +++ b/Components/ButtonBase.qml @@ -1,5 +1,6 @@ import QtQuick import ZShell.Config +import qs.Components import qs.Services CustomRect { @@ -36,7 +37,7 @@ CustomRect { readonly property color onColor: !enabled ? disabledOnColor : internalChecked ? activeOnColor : inactiveOnColor property real padding readonly property alias pressed: stateLayer.pressed - property real pressedRadius: Tokens.rounding.smallest + property real pressedRadius: Tokens.rounding.small readonly property alias radiusAnim: radiusAnim property bool radiusMorph: true property alias shapeMorph: stateLayer.shapeMorph diff --git a/Components/CAnim.qml b/Components/CAnim.qml index 231741f..5e4dffd 100644 --- a/Components/CAnim.qml +++ b/Components/CAnim.qml @@ -2,62 +2,6 @@ import QtQuick import ZShell.Config ColorAnimation { - enum Type { - StandardSmall = 0, - Standard, - StandardLarge, - StandardExtraLarge, - EmphasizedSmall, - Emphasized, - EmphasizedLarge, - EmphasizedExtraLarge, - FastSpatial, - DefaultSpatial, - SlowSpatial, - FastEffects, - DefaultEffects, - SlowEffects - } - - property int type: CAnim.DefaultSpatial - - duration: { - if (type < CAnim.StandardSmall || type > Anim.SlowEffects) - return Tokens.anim.durations.normal; - - if (type === CAnim.FastSpatial) - return Tokens.anim.durations.expressiveFastSpatial; - if (type === CAnim.DefaultSpatial) - return Tokens.anim.durations.expressiveDefaultSpatial; - if (type === CAnim.SlowSpatial) - return Tokens.anim.durations.large; - if (type === CAnim.FastEffects) - return Tokens.anim.durations.expressiveFastEffects; - if (type === CAnim.DefaultEffects) - return Tokens.anim.durations.expressiveEffects; - if (type === CAnim.SlowEffects) - return Tokens.anim.durations.expressiveSlowEffects; - - const types = ["small", "normal", "large", "extraLarge"]; - const idx = type % 4; - return Tokens.anim.durations[types[idx]]; - } - easing.bezierCurve: { - if (type === CAnim.FastSpatial) - return Tokens.anim.curves.expressiveFastSpatial; - if (type === CAnim.DefaultSpatial) - return Tokens.anim.curves.expressiveDefaultSpatial; - if (type === CAnim.SlowSpatial) - return Tokens.anim.curves.expressiveSlowSpatial; - if (type === CAnim.FastEffects) - return Tokens.anim.curves.expressiveFastEffects; - if (type === CAnim.DefaultEffects) - return Tokens.anim.curves.expressiveDefaultEffects; - if (type === CAnim.SlowEffects) - return Tokens.anim.curves.expressiveSlowEffects; - - if (type >= CAnim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge) - return Tokens.anim.curves.emphasized; - return Tokens.anim.curves.standard; - } + duration: Tokens.anim.durations.expressiveSlowEffects + easing: Tokens.anim.expressiveSlowEffects } diff --git a/Components/CircularIndicator.qml b/Components/CircularIndicator.qml index 94112e9..1c9a97d 100644 --- a/Components/CircularIndicator.qml +++ b/Components/CircularIndicator.qml @@ -23,7 +23,7 @@ BusyIndicator { property real implicitSize: Tokens.font.size.normal * 3 property real internalStrokeWidth: strokeWidth readonly property alias progress: manager.progress - property real strokeWidth: Tokens.padding.small * 0.8 + property real strokeWidth: Tokens.padding.extraSmall * 0.8 property alias type: manager.indeterminateAnimationType implicitHeight: implicitSize diff --git a/Components/CircularProgress.qml b/Components/CircularProgress.qml index a463552..59b1bf5 100644 --- a/Components/CircularProgress.qml +++ b/Components/CircularProgress.qml @@ -21,7 +21,7 @@ Item { readonly property real size: Math.min(width, height) property int spacing: Tokens.spacing.small property int startAngle: -90 - property int strokeWidth: Tokens.padding.small + property int strokeWidth: Tokens.padding.extraSmall property int sweepAngle: 360 readonly property real thickness: strokeWidth * (1 + waveAmplitude) * 2 property real value diff --git a/Components/CustomCheckbox.qml b/Components/CustomCheckbox.qml index 2366010..de69135 100644 --- a/Components/CustomCheckbox.qml +++ b/Components/CustomCheckbox.qml @@ -23,7 +23,7 @@ CheckBox { color: Colors.palette.m3surfaceVariant implicitHeight: control.checkHeight implicitWidth: control.checkWidth - radius: Tokens.rounding.smallest / 2 + radius: Tokens.rounding.small / 2 CustomRect { color: Colors.palette.m3primary diff --git a/Components/CustomSlider.qml b/Components/CustomSlider.qml index 3c906d8..39c5339 100644 --- a/Components/CustomSlider.qml +++ b/Components/CustomSlider.qml @@ -141,7 +141,7 @@ Slider { CAnim { } } - NumberAnimation on waveProgress { + Anim on waveProgress { duration: root.waveDuration easing.type: Easing.Linear from: 0 diff --git a/Components/CustomSpinBox.qml b/Components/CustomSpinBox.qml index ee46fbc..2978bd0 100644 --- a/Components/CustomSpinBox.qml +++ b/Components/CustomSpinBox.qml @@ -38,9 +38,9 @@ DoubleSpinBox { horizontalAlignment: TextField.AlignHCenter implicitWidth: 65 inputMethodHints: Qt.ImhFormattedNumbersOnly - leftPadding: Tokens.padding.larger + leftPadding: Tokens.padding.small readOnly: !root.editable - rightPadding: Tokens.padding.larger + rightPadding: Tokens.padding.small text: root.textFromValue(root.value, root.locale) validator: root.validator diff --git a/Components/CustomSplitButtonRow.qml b/Components/CustomSplitButtonRow.qml deleted file mode 100644 index 5631606..0000000 --- a/Components/CustomSplitButtonRow.qml +++ /dev/null @@ -1,70 +0,0 @@ -pragma ComponentBehavior: Bound - -import QtQuick -import QtQuick.Layouts -import ZShell.Config -import qs.Services - -Item { - id: root - - property alias active: splitButton.active - property alias buttonAlias: splitButton - property alias expanded: splitButton.expanded - property int expandedZ: 100 - required property string label - property alias menuItems: splitButton.menuItems - property bool shouldBeActive: true - property alias type: splitButton.type - - signal selected(item: MenuItem) - - anchors.left: parent.left - anchors.right: parent.right - clip: false - implicitHeight: row.implicitHeight + Tokens.padding.smaller * 2 - opacity: shouldBeActive ? 1 : 0 - scale: shouldBeActive ? 1 : 0.8 - z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1 - - Behavior on opacity { - Anim { - } - } - Behavior on scale { - Anim { - } - } - - RowLayout { - id: row - - anchors.left: parent.left - anchors.margins: Tokens.padding.small - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - spacing: Tokens.spacing.normal - - CustomText { - Layout.fillWidth: true - color: root.enabled ? Colors.palette.m3onSurface : Colors.palette.m3onSurfaceVariant - font.pointSize: Tokens.font.size.larger - text: root.label - } - - CustomSplitButton { - id: splitButton - - enabled: root.enabled - type: CustomSplitButton.Filled - z: 2 - - menu.onItemSelected: item => { - root.selected(item); - } - stateLayer.onClicked: { - splitButton.expanded = !splitButton.expanded; - } - } - } -} diff --git a/Components/CustomSwitch.qml b/Components/CustomSwitch.qml index e41e773..6e7c68a 100644 --- a/Components/CustomSwitch.qml +++ b/Components/CustomSwitch.qml @@ -14,7 +14,7 @@ Switch { indicator: CustomRect { color: root.checked && root.enabled ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer) - implicitHeight: Tokens.font.size.medium + Tokens.padding.normal * 2 + implicitHeight: Tokens.font.size.larger + Tokens.padding.small * 2 implicitWidth: implicitHeight * 1.7 radius: Tokens.rounding.full @@ -92,7 +92,7 @@ Switch { anchors.centerIn: parent asynchronous: true - height: parent.implicitHeight - Tokens.padding.larger + height: parent.implicitHeight - Tokens.padding.small preferredRendererType: Shape.CurveRenderer width: height @@ -153,6 +153,6 @@ Switch { component PropAnim: PropertyAnimation { duration: Tokens.anim.durations.expressiveFastSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial + easing: Tokens.anim.expressiveFastSpatial } } diff --git a/Components/CustomTextField.qml b/Components/CustomTextField.qml index 19618af..8ddc120 100644 --- a/Components/CustomTextField.qml +++ b/Components/CustomTextField.qml @@ -129,8 +129,8 @@ TextFieldBase { } AnchorAnim { - duration: Tokens.anim.durations.expressiveEffects - easing.bezierCurve: Tokens.anim.curves.expressiveEffects + duration: Tokens.anim.durations.expressiveDefaultEffects + easing: Tokens.anim.expressiveDefaultEffects } } } @@ -140,7 +140,7 @@ TextFieldBase { active: root.leadingIcon anchors.left: parent.left - anchors.leftMargin: Tokens.padding.normal + anchors.leftMargin: Tokens.padding.small anchors.verticalCenter: parent.verticalCenter sourceComponent: MaterialIcon { @@ -154,7 +154,7 @@ TextFieldBase { active: root.trailingIcon anchors.right: parent.right - anchors.rightMargin: Tokens.padding.normal + anchors.rightMargin: Tokens.padding.small anchors.verticalCenter: parent.verticalCenter sourceComponent: MaterialIcon { diff --git a/Components/IconButton.qml b/Components/IconButton.qml index e853aaa..0210520 100644 --- a/Components/IconButton.qml +++ b/Components/IconButton.qml @@ -27,7 +27,7 @@ ButtonBase { return Colors.palette.m3onPrimary; return type === IconButton.Tonal ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurfaceVariant; } - padding: type === IconButton.Text ? Tokens.padding.extraSmall / 2 : Tokens.padding.small + padding: type === IconButton.Text ? Tokens.padding.extraSmall / 2 : Tokens.padding.extraSmall MaterialIcon { id: label diff --git a/Components/IconTextButton.qml b/Components/IconTextButton.qml index b8c1b3b..6190121 100644 --- a/Components/IconTextButton.qml +++ b/Components/IconTextButton.qml @@ -17,7 +17,7 @@ ButtonBase { return Colors.palette.m3primary; return type === TextButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondary; } - horizontalPadding: Tokens.padding.larger + horizontalPadding: Tokens.padding.small implicitHeight: row.implicitHeight + verticalPadding * 2 implicitWidth: row.implicitWidth + horizontalPadding * 2 inactiveColor: { @@ -32,7 +32,7 @@ ButtonBase { return Colors.palette.m3primary; return type === TextButton.Filled ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer; } - verticalPadding: Tokens.padding.small + verticalPadding: Tokens.padding.extraSmall RowLayout { id: row diff --git a/Components/Menu.qml b/Components/Menu.qml index b8eaad1..dc546c3 100644 --- a/Components/Menu.qml +++ b/Components/Menu.qml @@ -78,7 +78,7 @@ MouseArea { implicitHeight: column.implicitHeight + column.anchors.margins * 2 implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2) level: 2 - radius: Tokens.rounding.medium + radius: Tokens.rounding.large x: { watcher.transform; const item = root.attachTo; @@ -132,9 +132,9 @@ MouseArea { Layout.fillWidth: true color: Qt.alpha(Colors.palette.m3tertiaryContainer, active ? 1 : 0) - implicitHeight: menuOptionRow.implicitHeight + Tokens.padding.larger * 2 - implicitWidth: menuOptionRow.implicitWidth + Tokens.padding.larger * 2 - radius: Tokens.rounding.small + implicitHeight: menuOptionRow.implicitHeight + Tokens.padding.medium * 2 + implicitWidth: menuOptionRow.implicitWidth + Tokens.padding.medium * 2 + radius: menu.radius - column.anchors.margins Behavior on radius { Anim { @@ -157,7 +157,7 @@ MouseArea { id: menuOptionRow anchors.fill: parent - anchors.margins: Tokens.padding.larger + anchors.margins: Tokens.padding.medium spacing: Tokens.spacing.small MaterialIcon { diff --git a/Components/SearchBar.qml b/Components/SearchBar.qml index ba44e1a..f14b51e 100644 --- a/Components/SearchBar.qml +++ b/Components/SearchBar.qml @@ -70,7 +70,7 @@ TextFieldBase { id: clearIcon anchors.right: parent.right - anchors.rightMargin: Tokens.padding.larger + anchors.rightMargin: Tokens.padding.small anchors.verticalCenter: parent.verticalCenter enabled: root.text icon: "clear" diff --git a/Components/CustomSplitButton.qml b/Components/SplitButton.qml similarity index 83% rename from Components/CustomSplitButton.qml rename to Components/SplitButton.qml index 6d965b0..4252e39 100644 --- a/Components/CustomSplitButton.qml +++ b/Components/SplitButton.qml @@ -12,14 +12,14 @@ Row { } property alias active: menu.active - property color color: type == CustomSplitButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer + 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.larger + property real horizontalPadding: Tokens.padding.medium readonly property alias iconLabel: iconLabel readonly property alias label: label readonly property alias menu: menu @@ -27,20 +27,20 @@ Row { property bool menuOnTop property real minLeftWidth readonly property alias stateLayer: stateLayer - property color textColor: type == CustomSplitButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer + property color textColor: type == SplitButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer readonly property alias textRow: textRow - property int type: CustomSplitButton.Filled + property int type: SplitButton.Filled property real verticalPadding: Tokens.padding.small - spacing: Math.floor(Tokens.spacing.extraSmall) + spacing: Math.floor(Tokens.spacing.extraSmall / 2) CustomRect { - bottomRightRadius: Tokens.rounding.small / 2 - color: !root.enabled ? root.disabledColor : root.color + 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.small / 2 + topRightRadius: Tokens.rounding.medium / 2 StateLayer { id: stateLayer @@ -92,10 +92,10 @@ Row { CustomRect { id: expandBtn - property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.small / 2 + 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.color + color: !root.enabled ? root.disabledColor : root.colour implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2 implicitWidth: implicitHeight radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) diff --git a/Components/StateLayer.qml b/Components/StateLayer.qml index 99bb429..88d5f0b 100644 --- a/Components/StateLayer.qml +++ b/Components/StateLayer.qml @@ -1,9 +1,8 @@ import QtQuick import QtQuick.Shapes import ZShell -import ZShell.Components -import qs.Helpers import ZShell.Config +import qs.Helpers import qs.Services MouseArea { @@ -81,7 +80,7 @@ MouseArea { alwaysRunToEnd: true duration: Tokens.anim.durations.expressiveSlowEffects * 2 - easing.bezierCurve: Tokens.anim.curves.standard + easing: Tokens.anim.standard property: "circleRadius" target: root to: root.endRadius diff --git a/Components/TextButton.qml b/Components/TextButton.qml index 63773df..5df3015 100644 --- a/Components/TextButton.qml +++ b/Components/TextButton.qml @@ -14,7 +14,7 @@ ButtonBase { return Colors.palette.m3primary; return type === TextButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondary; } - horizontalPadding: Tokens.padding.normal + horizontalPadding: Tokens.padding.small implicitHeight: label.implicitHeight + verticalPadding * 2 implicitWidth: label.implicitWidth + horizontalPadding * 2 inactiveColor: { @@ -29,7 +29,7 @@ ButtonBase { return Colors.palette.m3primary; return type === TextButton.Filled ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer; } - verticalPadding: Tokens.padding.small + verticalPadding: Tokens.padding.extraSmall CustomText { id: label diff --git a/Components/TextFieldBase.qml b/Components/TextFieldBase.qml index d13983f..b68318b 100644 --- a/Components/TextFieldBase.qml +++ b/Components/TextFieldBase.qml @@ -36,7 +36,7 @@ TextField { color: Colors.palette.m3primary implicitHeight: root.cursorRectangle.height implicitWidth: 1.5 - radius: Tokens.rounding.large + radius: Tokens.rounding.largeIncreased x: root.cursorRectangle.x y: root.cursorRectangle.y diff --git a/Components/Toast/ToastItem.qml b/Components/Toast/ToastItem.qml index 997cd06..b37ead8 100644 --- a/Components/Toast/ToastItem.qml +++ b/Components/Toast/ToastItem.qml @@ -32,8 +32,8 @@ CustomRect { return Colors.palette.m3errorContainer; return Colors.palette.m3surface; } - implicitHeight: layout.implicitHeight + Tokens.padding.smaller * 2 - radius: Tokens.rounding.normal + implicitHeight: layout.implicitHeight + Tokens.padding.small * 2 + radius: Tokens.rounding.medium Behavior on border.color { CAnim { @@ -52,10 +52,10 @@ CustomRect { id: layout anchors.fill: parent - anchors.leftMargin: Tokens.padding.normal - anchors.margins: Tokens.padding.smaller - anchors.rightMargin: Tokens.padding.normal - spacing: Tokens.spacing.normal + anchors.leftMargin: Tokens.padding.small + anchors.margins: Tokens.padding.small + anchors.rightMargin: Tokens.padding.small + spacing: Tokens.spacing.medium CustomRect { color: { @@ -67,9 +67,9 @@ CustomRect { return Colors.palette.m3error; return Colors.palette.m3surfaceContainerHigh; } - implicitHeight: icon.implicitHeight + Tokens.padding.smaller * 2 + implicitHeight: icon.implicitHeight + Tokens.padding.small * 2 implicitWidth: implicitHeight - radius: Tokens.rounding.normal + radius: Tokens.rounding.medium MaterialIcon { id: icon diff --git a/Components/Toast/Toasts.qml b/Components/Toast/Toasts.qml index feab2e8..0c47503 100644 --- a/Components/Toast/Toasts.qml +++ b/Components/Toast/Toasts.qml @@ -21,7 +21,7 @@ Item { } return h; } - implicitWidth: Config.utilities.sizes.toastWidth - Tokens.padding.normal * 2 + implicitWidth: Config.utilities.sizes.toastWidth - Tokens.padding.small * 2 Repeater { id: repeater @@ -82,7 +82,7 @@ Item { Behavior on anchors.bottomMargin { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } Behavior on opacity { @@ -105,7 +105,7 @@ Item { id: initAnim duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial from: 0 properties: "opacity,scale" target: toast diff --git a/Drawers/Panels.qml b/Drawers/Panels.qml index 66827ad..96ca9f8 100644 --- a/Drawers/Panels.qml +++ b/Drawers/Panels.qml @@ -111,7 +111,7 @@ Item { id: toasts anchors.bottom: sidebar.visible ? parent.bottom : utilities.top - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.right: sidebar.left } @@ -161,7 +161,7 @@ Item { Behavior on offsetScale { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } diff --git a/Drawers/Windows.qml b/Drawers/Windows.qml index b87e720..3942568 100644 --- a/Drawers/Windows.qml +++ b/Drawers/Windows.qml @@ -225,7 +225,7 @@ CustomWindow { implicitHeight: panels.dashboard.height * (geometry.horizontal ? 1 + extraExtent : 1) implicitWidth: panels.dashboard.width * (geometry.horizontal ? 1 : 1 + extraExtent) panel: panels.dashboardWrapper - radius: Tokens.rounding.normal + radius: Tokens.rounding.extraLarge x: panels.dashboardWrapper.x + panels.dashboard.x + geometry.insetLeft(root.borderThickness) - (geometry.horizontal ? 0 : panels.dashboard.width * extraExtent) y: panels.dashboardWrapper.y + panels.dashboard.y + geometry.insetTop(root.borderThickness) - (geometry.horizontal && geometry.position !== "bottom" ? panels.dashboard.height * extraExtent : 0) } @@ -238,7 +238,7 @@ CustomWindow { deformAmount: 0.06 implicitHeight: panels.launcher.height * (1 + extraHeight) panel: panels.launcher - radius: Tokens.rounding.smallest + 5 + radius: Tokens.rounding.medium + (Tokens.padding.largeIncreased / 4) y: panels.launcher.y + geometry.insetTop(root.borderThickness) } @@ -267,7 +267,7 @@ CustomWindow { id: notifsBg panel: panels.notifications - radius: Tokens.rounding.normal + radius: Tokens.rounding.medium } PanelBg { @@ -288,7 +288,7 @@ CustomWindow { implicitHeight: panels.popouts.height * (geometry.horizontal ? 1 + extraExtent : 1) implicitWidth: panels.popouts.width * (geometry.horizontal ? 1 : 1 + extraExtent) panel: panels.popoutsWrapper - radius: panels.popouts.current?.panelRadius ?? Tokens.rounding.normal + radius: panels.popouts.current?.panelRadius ?? Tokens.rounding.large x: panels.popoutsWrapper.x + panels.popouts.x + geometry.insetLeft(root.borderThickness) - (geometry.horizontal ? 0 : panels.popouts.width * extraExtent) y: panels.popoutsWrapper.y + panels.popouts.y + geometry.insetTop(root.borderThickness) - (geometry.barOnTop ? panels.popouts.height * extraExtent : 0) @@ -305,7 +305,7 @@ CustomWindow { implicitHeight: panels.resources.height implicitWidth: panels.resources.width panel: panels.resourcesWrapper - radius: Tokens.rounding.large + radius: Tokens.rounding.largeIncreased + Tokens.padding.small x: panels.resourcesWrapper.x + panels.resources.x + geometry.insetLeft(root.borderThickness) y: panels.resourcesWrapper.y + panels.resources.y + geometry.insetTop(root.borderThickness) } @@ -315,7 +315,7 @@ CustomWindow { deformAmount: 0.03 panel: panels.settings - radius: Tokens.rounding.large + Tokens.padding.normal + radius: Tokens.rounding.largeIncreased + Tokens.padding.small } PanelBg { @@ -323,7 +323,7 @@ CustomWindow { deformAmount: 0.08 panel: panels.dock - radius: Tokens.rounding.normal + radius: Tokens.rounding.medium } PanelBg { @@ -331,7 +331,7 @@ CustomWindow { deformAmount: 0.08 panel: panels.drawing - radius: Tokens.rounding.normal + radius: Tokens.rounding.medium } PanelBg { @@ -462,7 +462,7 @@ CustomWindow { group: blobGroup implicitHeight: panel.height implicitWidth: panel.width - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small x: panel.x + geometry.insetLeft(root.borderThickness) y: panel.y + geometry.insetTop(root.borderThickness) } diff --git a/Greeter/Center.qml b/Greeter/Center.qml index 9dafdcd..fc9a456 100644 --- a/Greeter/Center.qml +++ b/Greeter/Center.qml @@ -18,7 +18,7 @@ ColumnLayout { Layout.fillHeight: true Layout.fillWidth: false Layout.preferredWidth: centerWidth - spacing: Tokens.spacing.large * 2 + spacing: Tokens.spacing.largeIncreased * 2 RowLayout { Layout.alignment: Qt.AlignHCenter @@ -64,7 +64,7 @@ ColumnLayout { CustomClippingRect { Layout.alignment: Qt.AlignHCenter - Layout.topMargin: Tokens.spacing.large * 2 + Layout.topMargin: Tokens.spacing.largeIncreased * 2 color: Colors.tPalette.m3surfaceContainer implicitHeight: root.centerWidth / 2 implicitWidth: root.centerWidth / 2 @@ -99,7 +99,7 @@ ColumnLayout { Layout.alignment: Qt.AlignHCenter color: Colors.tPalette.m3surfaceContainer focus: true - implicitHeight: input.implicitHeight + Tokens.padding.small * 2 + implicitHeight: input.implicitHeight + Tokens.padding.extraSmall * 2 implicitWidth: root.centerWidth * 0.8 radius: Tokens.rounding.full @@ -130,11 +130,11 @@ ColumnLayout { id: input anchors.fill: parent - anchors.margins: Tokens.padding.small - spacing: Tokens.spacing.normal + anchors.margins: Tokens.padding.extraSmall + spacing: Tokens.spacing.medium Item { - implicitHeight: statusIcon.implicitHeight + Tokens.padding.small * 2 + implicitHeight: statusIcon.implicitHeight + Tokens.padding.extraSmall * 2 implicitWidth: implicitHeight MaterialIcon { @@ -174,7 +174,7 @@ ColumnLayout { CustomRect { color: root.greeter.buffer && !root.greeter.launching ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2) - implicitHeight: enterIcon.implicitHeight + Tokens.padding.small * 2 + implicitHeight: enterIcon.implicitHeight + Tokens.padding.extraSmall * 2 implicitWidth: implicitHeight radius: Tokens.rounding.full @@ -200,7 +200,7 @@ ColumnLayout { Item { Layout.fillWidth: true - Layout.topMargin: -Tokens.spacing.large + Layout.topMargin: -Tokens.spacing.largeIncreased implicitHeight: Math.max(message.implicitHeight, stateMessage.implicitHeight) Behavior on implicitHeight { diff --git a/Greeter/Components/Anim.qml b/Greeter/Components/Anim.qml index 5cc8554..0cab04e 100644 --- a/Greeter/Components/Anim.qml +++ b/Greeter/Components/Anim.qml @@ -30,11 +30,11 @@ NumberAnimation { if (type === Anim.DefaultSpatial) return Tokens.anim.durations.expressiveDefaultSpatial; if (type === Anim.SlowSpatial) - return Tokens.anim.durations.large; + return Tokens.anim.durations.expressiveSlowSpatial; if (type === Anim.FastEffects) return Tokens.anim.durations.expressiveFastEffects; if (type === Anim.DefaultEffects) - return Tokens.anim.durations.expressiveEffects; + return Tokens.anim.durations.expressiveDefaultEffects; if (type === Anim.SlowEffects) return Tokens.anim.durations.expressiveSlowEffects; @@ -42,22 +42,22 @@ NumberAnimation { const idx = type % 4; // 0-7 are the 4 standard types return Tokens.anim.durations[types[idx]]; } - easing.bezierCurve: { + easing: { if (type === Anim.FastSpatial) - return Tokens.anim.curves.expressiveFastSpatial; + return Tokens.anim.expressiveFastSpatial; if (type === Anim.DefaultSpatial) - return Tokens.anim.curves.expressiveDefaultSpatial; + return Tokens.anim.expressiveDefaultSpatial; if (type === Anim.SlowSpatial) - return Tokens.anim.curves.expressiveSlowSpatial; + return Tokens.anim.expressiveSlowSpatial; if (type === Anim.FastEffects) - return Tokens.anim.curves.expressiveFastEffects; + return Tokens.anim.expressiveFastEffects; if (type === Anim.DefaultEffects) - return Tokens.anim.curves.expressiveDefaultEffects; + return Tokens.anim.expressiveDefaultEffects; if (type === Anim.SlowEffects) - return Tokens.anim.curves.expressiveSlowEffects; + return Tokens.anim.expressiveSlowEffects; if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge) - return Tokens.anim.curves.emphasized; - return Tokens.anim.curves.standard; + return Tokens.anim.emphasized; + return Tokens.anim.standard; } } diff --git a/Greeter/Components/CAnim.qml b/Greeter/Components/CAnim.qml index 231741f..5e4dffd 100644 --- a/Greeter/Components/CAnim.qml +++ b/Greeter/Components/CAnim.qml @@ -2,62 +2,6 @@ import QtQuick import ZShell.Config ColorAnimation { - enum Type { - StandardSmall = 0, - Standard, - StandardLarge, - StandardExtraLarge, - EmphasizedSmall, - Emphasized, - EmphasizedLarge, - EmphasizedExtraLarge, - FastSpatial, - DefaultSpatial, - SlowSpatial, - FastEffects, - DefaultEffects, - SlowEffects - } - - property int type: CAnim.DefaultSpatial - - duration: { - if (type < CAnim.StandardSmall || type > Anim.SlowEffects) - return Tokens.anim.durations.normal; - - if (type === CAnim.FastSpatial) - return Tokens.anim.durations.expressiveFastSpatial; - if (type === CAnim.DefaultSpatial) - return Tokens.anim.durations.expressiveDefaultSpatial; - if (type === CAnim.SlowSpatial) - return Tokens.anim.durations.large; - if (type === CAnim.FastEffects) - return Tokens.anim.durations.expressiveFastEffects; - if (type === CAnim.DefaultEffects) - return Tokens.anim.durations.expressiveEffects; - if (type === CAnim.SlowEffects) - return Tokens.anim.durations.expressiveSlowEffects; - - const types = ["small", "normal", "large", "extraLarge"]; - const idx = type % 4; - return Tokens.anim.durations[types[idx]]; - } - easing.bezierCurve: { - if (type === CAnim.FastSpatial) - return Tokens.anim.curves.expressiveFastSpatial; - if (type === CAnim.DefaultSpatial) - return Tokens.anim.curves.expressiveDefaultSpatial; - if (type === CAnim.SlowSpatial) - return Tokens.anim.curves.expressiveSlowSpatial; - if (type === CAnim.FastEffects) - return Tokens.anim.curves.expressiveFastEffects; - if (type === CAnim.DefaultEffects) - return Tokens.anim.curves.expressiveDefaultEffects; - if (type === CAnim.SlowEffects) - return Tokens.anim.curves.expressiveSlowEffects; - - if (type >= CAnim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge) - return Tokens.anim.curves.emphasized; - return Tokens.anim.curves.standard; - } + duration: Tokens.anim.durations.expressiveSlowEffects + easing: Tokens.anim.expressiveSlowEffects } diff --git a/Greeter/Components/CircularIndicator.qml b/Greeter/Components/CircularIndicator.qml index 94112e9..1c9a97d 100644 --- a/Greeter/Components/CircularIndicator.qml +++ b/Greeter/Components/CircularIndicator.qml @@ -23,7 +23,7 @@ BusyIndicator { property real implicitSize: Tokens.font.size.normal * 3 property real internalStrokeWidth: strokeWidth readonly property alias progress: manager.progress - property real strokeWidth: Tokens.padding.small * 0.8 + property real strokeWidth: Tokens.padding.extraSmall * 0.8 property alias type: manager.indeterminateAnimationType implicitHeight: implicitSize diff --git a/Greeter/Components/CircularProgress.qml b/Greeter/Components/CircularProgress.qml index a463552..59b1bf5 100644 --- a/Greeter/Components/CircularProgress.qml +++ b/Greeter/Components/CircularProgress.qml @@ -21,7 +21,7 @@ Item { readonly property real size: Math.min(width, height) property int spacing: Tokens.spacing.small property int startAngle: -90 - property int strokeWidth: Tokens.padding.small + property int strokeWidth: Tokens.padding.extraSmall property int sweepAngle: 360 readonly property real thickness: strokeWidth * (1 + waveAmplitude) * 2 property real value diff --git a/Greeter/Components/CustomTextField.qml b/Greeter/Components/CustomTextField.qml index 4edfe69..c49e841 100644 --- a/Greeter/Components/CustomTextField.qml +++ b/Greeter/Components/CustomTextField.qml @@ -27,7 +27,7 @@ TextField { color: Colors.palette.m3primary implicitWidth: 2 - radius: Tokens.rounding.normal + radius: Tokens.rounding.medium Behavior on opacity { Anim { diff --git a/Greeter/Components/StateLayer.qml b/Greeter/Components/StateLayer.qml index e228449..2596748 100644 --- a/Greeter/Components/StateLayer.qml +++ b/Greeter/Components/StateLayer.qml @@ -81,7 +81,7 @@ MouseArea { alwaysRunToEnd: true duration: Tokens.anim.durations.expressiveSlowEffects * 2 - easing.bezierCurve: Tokens.anim.curves.standard + easing: Tokens.anim.standard property: "circleRadius" target: root to: root.endRadius diff --git a/Greeter/Content.qml b/Greeter/Content.qml index 2df68b6..f873dde 100644 --- a/Greeter/Content.qml +++ b/Greeter/Content.qml @@ -11,18 +11,18 @@ RowLayout { required property var greeter required property real screenHeight - spacing: Tokens.spacing.large * 2 + spacing: Tokens.spacing.largeIncreased * 2 ColumnLayout { Layout.fillWidth: true - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium CustomRect { Layout.fillWidth: true color: Colors.tPalette.m3surfaceContainer implicitHeight: weather.implicitHeight radius: Tokens.rounding.small - topLeftRadius: Tokens.rounding.large + topLeftRadius: Tokens.rounding.largeIncreased WeatherInfo { id: weather @@ -34,7 +34,7 @@ RowLayout { CustomClippingRect { Layout.fillHeight: true Layout.fillWidth: true - bottomLeftRadius: Tokens.rounding.large + bottomLeftRadius: Tokens.rounding.largeIncreased color: Colors.tPalette.m3surfaceContainer radius: Tokens.rounding.small @@ -51,15 +51,15 @@ RowLayout { ColumnLayout { Layout.fillWidth: true - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium CustomRect { Layout.fillHeight: true Layout.fillWidth: true - bottomRightRadius: Tokens.rounding.large + bottomRightRadius: Tokens.rounding.largeIncreased color: Colors.tPalette.m3surfaceContainer radius: Tokens.rounding.small - topRightRadius: Tokens.rounding.large + topRightRadius: Tokens.rounding.largeIncreased SessionDock { greeter: root.greeter diff --git a/Greeter/GreeterSurface.qml b/Greeter/GreeterSurface.qml index f28dc2a..ab9ec0a 100644 --- a/Greeter/GreeterSurface.qml +++ b/Greeter/GreeterSurface.qml @@ -43,7 +43,7 @@ Scope { ParallelAnimation { Anim { duration: Tokens.anim.durations.expressiveFastSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial + easing: Tokens.anim.expressiveFastSpatial property: "scale" target: lockContent to: 1 @@ -65,7 +65,7 @@ Scope { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial property: "scale" target: content to: 1 @@ -74,12 +74,12 @@ Scope { Anim { property: "radius" target: lockBg - to: Tokens.rounding.large * 1.5 + to: Tokens.rounding.largeIncreased * 1.5 } Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial property: "implicitWidth" target: lockContent to: (win.screen?.height ?? 0) * Config.lock.sizes.heightMult * Config.lock.sizes.ratio @@ -87,7 +87,7 @@ Scope { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial property: "implicitHeight" target: lockContent to: (win.screen?.height ?? 0) * Config.lock.sizes.heightMult diff --git a/Greeter/InputField.qml b/Greeter/InputField.qml index 157f97f..2246375 100644 --- a/Greeter/InputField.qml +++ b/Greeter/InputField.qml @@ -113,7 +113,7 @@ Item { Behavior on scale { Anim { duration: Tokens.anim.durations.expressiveFastSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial + easing: Tokens.anim.expressiveFastSpatial } } diff --git a/Greeter/SessionDock.qml b/Greeter/SessionDock.qml index 24d5fd5..066a6c1 100644 --- a/Greeter/SessionDock.qml +++ b/Greeter/SessionDock.qml @@ -13,7 +13,7 @@ ColumnLayout { anchors.fill: parent anchors.margins: Tokens.padding.large - spacing: Tokens.spacing.smaller + spacing: Tokens.spacing.small CustomText { Layout.fillWidth: true @@ -41,7 +41,7 @@ ColumnLayout { } } sourceComponent: ColumnLayout { - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased MaterialIcon { Layout.alignment: Qt.AlignHCenter @@ -79,8 +79,8 @@ ColumnLayout { anchors.left: parent?.left anchors.right: parent?.right - implicitHeight: row.implicitHeight + Tokens.padding.normal * 2 - radius: Tokens.rounding.normal - Tokens.padding.smaller + implicitHeight: row.implicitHeight + Tokens.padding.small * 2 + radius: Tokens.rounding.medium - Tokens.padding.small StateLayer { onClicked: { @@ -92,8 +92,8 @@ ColumnLayout { id: row anchors.fill: parent - anchors.margins: Tokens.padding.normal - spacing: Tokens.spacing.normal + anchors.margins: Tokens.padding.small + spacing: Tokens.spacing.medium MaterialIcon { color: session.index === sessions.currentIndex ? Colors.palette.m3onPrimary : Colors.palette.m3onSurfaceVariant @@ -129,13 +129,13 @@ ColumnLayout { color: Colors.palette.m3primary implicitHeight: sessions.currentItem?.implicitHeight ?? 0 implicitWidth: sessions.width - radius: Tokens.rounding.normal - Tokens.padding.smaller + radius: Tokens.rounding.medium - Tokens.padding.small y: sessions.currentItem?.y ?? 0 Behavior on y { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.expressiveEffects + easing: Tokens.anim.expressiveDefaultEffects } } } diff --git a/Greeter/UserDock.qml b/Greeter/UserDock.qml index 366842c..b53354c 100644 --- a/Greeter/UserDock.qml +++ b/Greeter/UserDock.qml @@ -14,7 +14,7 @@ ColumnLayout { anchors.fill: parent anchors.margins: Tokens.padding.large - spacing: Tokens.spacing.smaller + spacing: Tokens.spacing.small CustomText { Layout.fillWidth: true @@ -42,7 +42,7 @@ ColumnLayout { } } sourceComponent: ColumnLayout { - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased MaterialIcon { Layout.alignment: Qt.AlignHCenter @@ -81,8 +81,8 @@ ColumnLayout { anchors.left: parent?.left anchors.right: parent?.right - implicitHeight: row.implicitHeight + Tokens.padding.normal * 2 - radius: Tokens.rounding.normal - Tokens.padding.smaller + implicitHeight: row.implicitHeight + Tokens.padding.small * 2 + radius: Tokens.rounding.medium - Tokens.padding.small StateLayer { onClicked: { @@ -94,8 +94,8 @@ ColumnLayout { id: row anchors.fill: parent - anchors.margins: Tokens.padding.normal - spacing: Tokens.spacing.normal + anchors.margins: Tokens.padding.small + spacing: Tokens.spacing.medium CustomClippingRect { Layout.preferredHeight: 50 @@ -135,13 +135,13 @@ ColumnLayout { color: Colors.palette.m3primary implicitHeight: users.currentItem?.implicitHeight ?? 0 implicitWidth: users.width - radius: Tokens.rounding.normal - Tokens.padding.smaller + radius: Tokens.rounding.medium - Tokens.padding.small y: users.currentItem?.y ?? 0 Behavior on y { Anim { - duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.expressiveEffects + duration: Tokens.anim.durations.expressiveDefaultEffects + easing: Tokens.anim.expressiveDefaultEffects } } } diff --git a/Greeter/WeatherInfo.qml b/Greeter/WeatherInfo.qml index 3a69bcd..d7f0f1c 100644 --- a/Greeter/WeatherInfo.qml +++ b/Greeter/WeatherInfo.qml @@ -34,7 +34,7 @@ ColumnLayout { RowLayout { Layout.fillWidth: true - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased MaterialIcon { animate: true @@ -67,7 +67,7 @@ ColumnLayout { } Loader { - Layout.rightMargin: Tokens.padding.smaller + Layout.rightMargin: Tokens.padding.small active: root.width > 400 visible: active @@ -103,12 +103,12 @@ ColumnLayout { Layout.bottomMargin: Tokens.padding.large * 2 Layout.fillWidth: true - Layout.topMargin: Tokens.spacing.smaller + Layout.topMargin: Tokens.spacing.small active: root.rootHeight > 820 visible: active sourceComponent: RowLayout { - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased Repeater { model: { diff --git a/Helpers/Picker.qml b/Helpers/Picker.qml index d19f29f..05b4146 100755 --- a/Helpers/Picker.qml +++ b/Helpers/Picker.qml @@ -391,7 +391,7 @@ Item { tool: root.tool visible: root.mode === "edit" x: Math.max(8, Math.min(root.rsx + root.sw / 2 - width / 2, root.screen.width - width - 8)) - y: (root.rsy + root.sh + height + Tokens.padding.normal <= root.screen.height) ? root.rsy + root.sh + Tokens.padding.normal : (root.rsy - height - Tokens.padding.normal <= 0) ? root.rsy + root.sh - height - Tokens.padding.normal : root.rsy - height - Tokens.padding.normal + y: (root.rsy + root.sh + height + Tokens.padding.small <= root.screen.height) ? root.rsy + root.sh + Tokens.padding.small : (root.rsy - height - Tokens.padding.small <= 0) ? root.rsy + root.sh - height - Tokens.padding.small : root.rsy - height - Tokens.padding.small onCancelRequested: root.cancel() onClearRequested: annotations.clearAll() diff --git a/Helpers/Picker/AnnotationToolbar.qml b/Helpers/Picker/AnnotationToolbar.qml index 19fdbd0..d95eb37 100755 --- a/Helpers/Picker/AnnotationToolbar.qml +++ b/Helpers/Picker/AnnotationToolbar.qml @@ -49,9 +49,9 @@ CustomRect { signal undoRequested color: Colors.palette.m3surface - height: row.implicitHeight + Tokens.padding.normal * 2 + height: row.implicitHeight + Tokens.padding.small * 2 radius: Tokens.rounding.full - width: row.implicitWidth + Tokens.padding.normal * 2 + width: row.implicitWidth + Tokens.padding.small * 2 RowLayout { id: row @@ -73,6 +73,7 @@ CustomRect { required property var modelData color: root.tool === modelData.id ? "#3584e4" : "transparent" + font.pointSize: Tokens.font.size.large icon: tool.modelData.glyph inactiveColor: root.tool === modelData.id ? Colors.palette.m3primary : "transparent" inactiveOnColor: root.tool === modelData.id ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface @@ -98,11 +99,11 @@ CustomRect { model: root.colorPalette delegate: IconButton { - readonly property real buttonSize: toolRow.implicitHeight - Tokens.padding.normal + readonly property real buttonSize: toolRow.implicitHeight - Tokens.padding.small required property color modelData fillWidth: false - font.pointSize: 0 + font.pointSize: Tokens.font.size.large icon: "" implicitHeight: buttonSize implicitWidth: buttonSize @@ -127,6 +128,7 @@ CustomRect { spacing: Tokens.spacing.extraSmall IconButton { + font.pointSize: Tokens.font.size.large icon: "undo" inactiveColor: "transparent" inactiveOnColor: Colors.palette.m3onSurface @@ -138,6 +140,7 @@ CustomRect { } IconButton { + font.pointSize: Tokens.font.size.large icon: "delete_history" inactiveColor: "transparent" inactiveOnColor: Colors.palette.m3onSurface @@ -149,6 +152,7 @@ CustomRect { } IconButton { + font.pointSize: Tokens.font.size.large icon: "content_copy" inactiveColor: "transparent" inactiveOnColor: Colors.palette.m3onSurface @@ -160,6 +164,7 @@ CustomRect { } IconButton { + font.pointSize: Tokens.font.size.large icon: "delete_forever" inactiveColor: "transparent" inactiveOnColor: Colors.palette.m3onSurface @@ -171,6 +176,7 @@ CustomRect { } IconButton { + font.pointSize: Tokens.font.size.large icon: "check" inactiveColor: "transparent" inactiveOnColor: Colors.palette.m3onSurface diff --git a/Modules/Bar/BarLoader.qml b/Modules/Bar/BarLoader.qml index fcdd178..5fd3a70 100644 --- a/Modules/Bar/BarLoader.qml +++ b/Modules/Bar/BarLoader.qml @@ -16,7 +16,7 @@ Item { required property bool fullscreen readonly property bool horizontal: position !== "left" property bool isHovered - readonly property int padding: Math.max(Tokens.padding.smaller, Config.bar.border) + readonly property int padding: Math.max(Tokens.padding.small, Config.bar.border) required property Wrapper popouts required property ClipWrapper popoutsWrapper required property string position diff --git a/Modules/Bar/Components/Clock.qml b/Modules/Bar/Components/Clock.qml index b6dd07d..e7de27d 100644 --- a/Modules/Bar/Components/Clock.qml +++ b/Modules/Bar/Components/Clock.qml @@ -44,7 +44,7 @@ WidgetBase { } required property GridLayout loader required property Wrapper popouts - readonly property real size: horizontal ? timeText.contentWidth + Tokens.padding.normal * 2 : verticalColumn.implicitHeight + Tokens.padding.larger * 2 + readonly property real size: horizontal ? timeText.contentWidth + Tokens.padding.small * 2 : verticalColumn.implicitHeight + Tokens.padding.small * 2 required property PersistentProperties visibilities color: visibilities.dashboard ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer @@ -72,7 +72,7 @@ WidgetBase { id: verticalColumn anchors.centerIn: parent - spacing: Tokens.padding.small ?? 2 + spacing: Tokens.padding.extraSmall ?? 2 visible: !root.horizontal width: root.baseSize @@ -96,8 +96,8 @@ WidgetBase { Rectangle { Layout.alignment: Qt.AlignHCenter - Layout.bottomMargin: Tokens.padding.small ?? 2 - Layout.topMargin: Tokens.padding.small ?? 2 + Layout.bottomMargin: Tokens.padding.extraSmall ?? 2 + Layout.topMargin: Tokens.padding.extraSmall ?? 2 color: root.contentColor height: 1 implicitWidth: root.baseSize * 0.5 diff --git a/Modules/Bar/Components/Common/BatteryIcon.qml b/Modules/Bar/Components/Common/BatteryIcon.qml index 31f4a1e..2f13bc9 100644 --- a/Modules/Bar/Components/Common/BatteryIcon.qml +++ b/Modules/Bar/Components/Common/BatteryIcon.qml @@ -7,13 +7,13 @@ import qs.Helpers Row { id: root - property real batHeight: Tokens.padding.smaller * 2 - property real batWidth: Tokens.padding.larger * 2 + property real batHeight: Tokens.padding.small * 2 + property real batWidth: Tokens.padding.medium * 2 required property string devState - property real nubHeight: Tokens.padding.small + property real nubHeight: Tokens.padding.extraSmall property real nubWidth: 2 required property real percentage - property real radius: Tokens.rounding.smallest / 2 + property real radius: Tokens.rounding.small / 2 spacing: 1 diff --git a/Modules/Bar/Components/MediaWidget.qml b/Modules/Bar/Components/MediaWidget.qml index 0342550..32fb007 100644 --- a/Modules/Bar/Components/MediaWidget.qml +++ b/Modules/Bar/Components/MediaWidget.qml @@ -12,8 +12,8 @@ WidgetBase { readonly property string currentMedia: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title") readonly property int textWidth: Math.min(metrics.width, 200) - implicitHeight: horizontal ? baseSize : layout.implicitHeight + Tokens.padding.normal * 2 - implicitWidth: horizontal ? layout.implicitWidth + Tokens.padding.normal * 2 : baseSize + implicitHeight: horizontal ? baseSize : layout.implicitHeight + Tokens.padding.small * 2 + implicitWidth: horizontal ? layout.implicitWidth + Tokens.padding.small * 2 : baseSize radius: Tokens.rounding.full Behavior on implicitHeight { @@ -39,11 +39,11 @@ WidgetBase { GridLayout { id: layout - anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.normal + anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.small anchors.fill: parent - anchors.leftMargin: root.horizontal ? Tokens.padding.normal : 0 - anchors.rightMargin: root.horizontal ? Tokens.padding.normal : 0 - anchors.topMargin: root.horizontal ? 0 : Tokens.padding.normal + anchors.leftMargin: root.horizontal ? Tokens.padding.small : 0 + anchors.rightMargin: root.horizontal ? Tokens.padding.small : 0 + anchors.topMargin: root.horizontal ? 0 : Tokens.padding.small columns: root.horizontal ? -1 : 1 Behavior on implicitWidth { diff --git a/Modules/Bar/Components/Resource.qml b/Modules/Bar/Components/Resource.qml index 0608268..4314ee7 100644 --- a/Modules/Bar/Components/Resource.qml +++ b/Modules/Bar/Components/Resource.qml @@ -22,7 +22,7 @@ GridLayout { property bool warning: percentage * 100 >= warningThreshold property int warningThreshold: 80 - columnSpacing: Tokens.spacing.smaller + columnSpacing: Tokens.spacing.medium columns: horizontal ? -1 : 1 percentage: 0 @@ -49,7 +49,7 @@ GridLayout { } CustomClippingRect { - Layout.preferredHeight: root.horizontal ? icon.implicitHeight - Tokens.padding.small : 4 + Layout.preferredHeight: root.horizontal ? icon.implicitHeight - Tokens.padding.extraSmall : 4 Layout.preferredWidth: root.horizontal ? 4 : icon.implicitWidth color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2) radius: Tokens.rounding.full diff --git a/Modules/Bar/Components/Resources.qml b/Modules/Bar/Components/Resources.qml index 5759d54..56cb3d9 100644 --- a/Modules/Bar/Components/Resources.qml +++ b/Modules/Bar/Components/Resources.qml @@ -16,8 +16,8 @@ WidgetBase { clip: true color: visibilities.resources ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer - implicitHeight: horizontal ? baseSize : gridLayout.implicitHeight + Tokens.padding.normal * 2 - implicitWidth: horizontal ? gridLayout.implicitWidth + Tokens.padding.larger * 2 : baseSize + implicitHeight: horizontal ? baseSize : gridLayout.implicitHeight + Tokens.padding.medium * 2 + implicitWidth: horizontal ? gridLayout.implicitWidth + Tokens.padding.medium * 2 : baseSize radius: Tokens.rounding.full StateLayer { @@ -32,7 +32,7 @@ WidgetBase { anchors.centerIn: parent anchors.horizontalCenterOffset: root.horizontal ? 0 : 1 anchors.verticalCenterOffset: root.horizontal ? 0 : -3 - columnSpacing: Tokens.spacing.smaller + columnSpacing: Tokens.spacing.small columns: root.horizontal ? -1 : 1 ServiceRef { diff --git a/Modules/Bar/Components/StatusIcons.qml b/Modules/Bar/Components/StatusIcons.qml index bb520e6..b0c58af 100644 --- a/Modules/Bar/Components/StatusIcons.qml +++ b/Modules/Bar/Components/StatusIcons.qml @@ -30,8 +30,8 @@ WidgetBase { return i; return -1; } - readonly property real size: horizontal ? grid.implicitWidth + Tokens.padding.small * 2 : grid.implicitHeight + Tokens.padding.small * 2 - readonly property int spacing: Tokens.spacing.normal / 2 + readonly property real size: horizontal ? grid.implicitWidth + grid.anchors.leftMargin + grid.anchors.rightMargin : grid.implicitHeight + grid.anchors.bottomMargin + grid.anchors.topMargin + readonly property int spacing: Tokens.spacing.medium / 2 // Entries that can shrink to nothing, spacing included function collapsed(entry: var): bool { @@ -40,13 +40,13 @@ WidgetBase { return false; } - bottomLeftRadius: horizontal ? Tokens.rounding.smallest / 2 : Tokens.rounding.full + bottomLeftRadius: horizontal ? Tokens.rounding.small / 2 : Tokens.rounding.full color: Colors.tPalette.m3surfaceContainer implicitHeight: horizontal ? baseSize : size implicitWidth: horizontal ? size : baseSize radius: Tokens.rounding.full - topLeftRadius: Tokens.rounding.smallest / 2 - topRightRadius: horizontal ? Tokens.rounding.full : Tokens.rounding.smallest / 2 + topLeftRadius: Tokens.rounding.small / 2 + topRightRadius: horizontal ? Tokens.rounding.full : Tokens.rounding.small / 2 Behavior on implicitHeight { enabled: !root.horizontal @@ -64,11 +64,11 @@ WidgetBase { GridLayout { id: grid - anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.small + anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.medium anchors.fill: parent - anchors.leftMargin: root.horizontal ? Tokens.padding.small : 0 - anchors.rightMargin: root.horizontal ? Tokens.padding.small : 0 - anchors.topMargin: root.horizontal ? 0 : Tokens.padding.small + 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 Repeater { diff --git a/Modules/Bar/Components/TrayIcons.qml b/Modules/Bar/Components/TrayIcons.qml index 568ee28..6fe8ac7 100644 --- a/Modules/Bar/Components/TrayIcons.qml +++ b/Modules/Bar/Components/TrayIcons.qml @@ -16,22 +16,26 @@ WidgetBase { readonly property alias items: repeater readonly property alias layout: sysGrid required property GridLayout loader - readonly property int padding: Tokens.padding.small + readonly property int padding: Tokens.padding.extraSmall required property Wrapper popouts - readonly property real size: horizontal ? sysGrid.implicitWidth + Tokens.padding.small : sysGrid.implicitHeight + Tokens.padding.small + readonly property real size: horizontal ? sysGrid.implicitWidth + sysGrid.anchors.leftMargin + sysGrid.anchors.rightMargin : sysGrid.implicitHeight + sysGrid.anchors.topMargin + sysGrid.anchors.bottomMargin - bottomLeftRadius: horizontal ? Tokens.rounding.full : Tokens.rounding.smallest / 2 - bottomRightRadius: Tokens.rounding.smallest / 2 + bottomLeftRadius: horizontal ? Tokens.rounding.full : Tokens.rounding.small / 2 + bottomRightRadius: Tokens.rounding.small / 2 color: Colors.tPalette.m3surfaceContainer implicitHeight: horizontal ? baseSize : size implicitWidth: horizontal ? size : baseSize radius: Tokens.rounding.full - topRightRadius: horizontal ? Tokens.rounding.smallest / 2 : Tokens.rounding.full + topRightRadius: horizontal ? Tokens.rounding.small / 2 : Tokens.rounding.full GridLayout { id: sysGrid + anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.extraSmall anchors.centerIn: parent + 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 @@ -46,6 +50,7 @@ WidgetBase { required property int index required property SystemTrayItem modelData + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter implicitHeight: 34 implicitWidth: 34 ind: index diff --git a/Modules/Bar/Components/Workspaces.qml b/Modules/Bar/Components/Workspaces.qml index 091ff2f..cfa9a76 100644 --- a/Modules/Bar/Components/Workspaces.qml +++ b/Modules/Bar/Components/Workspaces.qml @@ -12,7 +12,7 @@ import qs.Services Item { id: root - property real activeWorkspaceMargin: Math.ceil(Tokens.padding.small / 2) + property real activeWorkspaceMargin: Math.ceil(Tokens.padding.medium / 4) readonly property int effectiveActiveWorkspaceId: monitor?.activeWorkspace?.id ?? 1 required property bool horizontal readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.screen) diff --git a/Modules/Bar/Popouts/AudioPopout.qml b/Modules/Bar/Popouts/AudioPopout.qml index 02d6b49..33e3daa 100644 --- a/Modules/Bar/Popouts/AudioPopout.qml +++ b/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: { diff --git a/Modules/Bar/Popouts/ClipWrapper.qml b/Modules/Bar/Popouts/ClipWrapper.qml index a732c60..b9471f5 100644 --- a/Modules/Bar/Popouts/ClipWrapper.qml +++ b/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 } diff --git a/Modules/Bar/Popouts/Content.qml b/Modules/Bar/Popouts/Content.qml index f0707d3..2ad7fa3 100644 --- a/Modules/Bar/Popouts/Content.qml +++ b/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 diff --git a/Modules/Bar/Popouts/TrayMenuPopout.qml b/Modules/Bar/Popouts/TrayMenuPopout.qml index d1b49b8..4410c6f 100644 --- a/Modules/Bar/Popouts/TrayMenuPopout.qml +++ b/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" } } diff --git a/Modules/Bar/Popouts/UPowerPopout.qml b/Modules/Bar/Popouts/UPowerPopout.qml index 4aee034..4b8626a 100644 --- a/Modules/Bar/Popouts/UPowerPopout.qml +++ b/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 diff --git a/Modules/Bar/Popouts/UpdatesPopout.qml b/Modules/Bar/Popouts/UpdatesPopout.qml index b88b107..8a143f3 100644 --- a/Modules/Bar/Popouts/UpdatesPopout.qml +++ b/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 diff --git a/Modules/Bar/Popouts/Wrapper.qml b/Modules/Bar/Popouts/Wrapper.qml index ad1ff84..1f46061 100644 --- a/Modules/Bar/Popouts/Wrapper.qml +++ b/Modules/Bar/Popouts/Wrapper.qml @@ -8,7 +8,7 @@ import ZShell.Config Item { id: root - property list 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 } } diff --git a/Modules/Clipboard/Content.qml b/Modules/Clipboard/Content.qml index b364e32..4be55ea 100644 --- a/Modules/Clipboard/Content.qml +++ b/Modules/Clipboard/Content.qml @@ -59,7 +59,7 @@ Item { anchors.bottom: parent.bottom anchors.left: entries.right - anchors.leftMargin: Tokens.spacing.normal + anchors.leftMargin: Tokens.spacing.medium anchors.top: parent.top color: Colors.tPalette.m3surfaceContainer implicitWidth: ClipHistory.previewIsImage ? Math.max(Math.min(imagePreview.sourceSize.width + Tokens.padding.large * 2, Config.clipboard.sizes.previewWidth), Config.clipboard.sizes.minPreviewWidth) : Math.max(Math.min(textPreviewColumn.width + textPreviewColumn.anchors.margins * 2, Config.clipboard.sizes.previewWidth), Config.clipboard.sizes.minPreviewWidth) @@ -75,7 +75,7 @@ Item { anchors.left: parent.left anchors.leftMargin: 0 - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.top: parent.top visible: !ClipHistory.previewIsImage @@ -90,7 +90,7 @@ Item { required property int index required property var modelData - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium CustomRect { color: lineRow.index % 2 ? Colors.tPalette.m3surfaceContainer : "transparent" @@ -192,7 +192,7 @@ Item { anchors.bottom: parent.bottom anchors.left: parent.left anchors.top: search.bottom - anchors.topMargin: Tokens.spacing.normal + anchors.topMargin: Tokens.spacing.medium implicitWidth: Config.clipboard.sizes.width CustomListView { @@ -204,7 +204,7 @@ Item { highlightRangeMode: ListView.ApplyRange preferredHighlightBegin: 0 preferredHighlightEnd: height - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium CustomScrollBar.vertical: CustomScrollBar { flickable: view @@ -250,7 +250,7 @@ Item { id: icon anchors.left: parent.left - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.verticalCenter: parent.verticalCenter font.pointSize: Tokens.font.size.large text: clipItem.isImage ? "image" : "text_fields" @@ -260,7 +260,7 @@ Item { id: text anchors.left: icon.right - anchors.margins: Tokens.spacing.normal + anchors.margins: Tokens.spacing.medium anchors.verticalCenter: parent.verticalCenter elide: Text.ElideRight text: clipItem.isImage ? qsTr("Image") : ClipHistory.displayText(clipItem.modelData) @@ -292,7 +292,7 @@ Item { IconButton { Layout.fillHeight: true - Layout.margins: Tokens.padding.normal + Layout.margins: Tokens.padding.small Layout.preferredWidth: height icon: "delete" inactiveColor: Qt.alpha(Colors.palette.m3error, 0.8) @@ -320,7 +320,7 @@ Item { Behavior on y { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.expressiveEffects + easing: Tokens.anim.expressiveDefaultEffects } } } diff --git a/Modules/Clipboard/Wrapper.qml b/Modules/Clipboard/Wrapper.qml index c9fe3a4..1a0a8f7 100644 --- a/Modules/Clipboard/Wrapper.qml +++ b/Modules/Clipboard/Wrapper.qml @@ -15,15 +15,15 @@ Item { required property PersistentProperties visibilities anchors.bottomMargin: (-implicitHeight - 5) * offsetScale - implicitHeight: content.implicitHeight + Tokens.padding.normal * 2 - implicitWidth: content.implicitWidth + Tokens.padding.normal * 2 || 400 + implicitHeight: content.implicitHeight + Tokens.padding.small * 2 + implicitWidth: content.implicitWidth + Tokens.padding.small * 2 || 400 opacity: 1 - offsetScale visible: offsetScale < 1 Behavior on offsetScale { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } diff --git a/Modules/Dashboard/Content.qml b/Modules/Dashboard/Content.qml index fc465b2..13e8e49 100644 --- a/Modules/Dashboard/Content.qml +++ b/Modules/Dashboard/Content.qml @@ -32,11 +32,11 @@ Item { anchors.bottom: parent.bottom anchors.left: parent.left - anchors.margins: Tokens.padding.smaller + anchors.margins: Tokens.padding.small anchors.right: parent.right anchors.top: parent.top color: "transparent" - radius: Tokens.rounding.normal - anchors.margins + radius: Tokens.rounding.extraLarge - anchors.margins Item { id: view diff --git a/Modules/Dashboard/Dash.qml b/Modules/Dashboard/Dash.qml index 998362d..bf7bc2a 100644 --- a/Modules/Dashboard/Dash.qml +++ b/Modules/Dashboard/Dash.qml @@ -13,11 +13,11 @@ GridLayout { required property PersistentProperties dashState readonly property bool dashboardVisible: visibilities.dashboard - property int radius: Tokens.rounding.smallest + property int radius: Tokens.rounding.medium required property PersistentProperties visibilities - columnSpacing: Tokens.spacing.smaller - rowSpacing: Tokens.spacing.smaller + columnSpacing: Tokens.spacing.small + rowSpacing: Tokens.spacing.small ParallelAnimation { id: openAnim @@ -104,12 +104,13 @@ GridLayout { } } - Rect { + CustomClippingRect { Layout.column: 0 Layout.columnSpan: 5 Layout.fillWidth: true Layout.preferredHeight: media.implicitHeight Layout.row: 2 + color: Colors.tPalette.m3surfaceContainer radius: root.radius Media { diff --git a/Modules/Dashboard/Dash/Calendar.qml b/Modules/Dashboard/Dash/Calendar.qml index daace24..8161957 100644 --- a/Modules/Dashboard/Dash/Calendar.qml +++ b/Modules/Dashboard/Dash/Calendar.qml @@ -132,7 +132,7 @@ CustomMouseArea { IconButton { icon: "chevron_left" - padding: Tokens.padding.small + padding: Tokens.padding.extraSmall type: IconButton.Text onClicked: root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth - 1, 1) @@ -150,7 +150,7 @@ CustomMouseArea { const now = new Date(); return root.realCurrMonth !== now.getMonth() || root.realCurrYear !== now.getFullYear(); } - radius: pressed ? Tokens.rounding.small : Tokens.rounding.large + radius: pressed ? Tokens.rounding.small : Tokens.rounding.largeIncreased Behavior on radius { Anim { @@ -203,7 +203,7 @@ CustomMouseArea { IconButton { icon: "chevron_right" - padding: Tokens.padding.small + padding: Tokens.padding.extraSmall type: IconButton.Text onClicked: root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth + 1, 1) @@ -259,7 +259,7 @@ CustomMouseArea { required property var model - implicitHeight: text.implicitHeight + Tokens.padding.normal * 2 + implicitHeight: text.implicitHeight + Tokens.padding.small * 2 implicitWidth: implicitHeight CustomText { diff --git a/Modules/Dashboard/Dash/Media.qml b/Modules/Dashboard/Dash/Media.qml index 775db58..53cda5a 100644 --- a/Modules/Dashboard/Dash/Media.qml +++ b/Modules/Dashboard/Dash/Media.qml @@ -9,6 +9,7 @@ import QtQuick.Effects import ZShell.Components import ZShell.Services import ZShell.Config +import qs.Modules.Dashboard.Dash.Media import qs.Daemons import qs.Components import qs.Helpers @@ -25,7 +26,7 @@ Item { anchors.left: parent.left anchors.right: parent.right - implicitHeight: layout.implicitHeight + implicitHeight: layout.implicitHeight + layout.anchors.margins * 2 function lengthStr(length: int): string { if (length < 0) return "-1:-1"; @@ -57,14 +58,18 @@ Item { service: Audio.cava } + BackgroundShapes { + anchors.fill: parent + } + Shape { id: visualizer readonly property int bars: Config.services.visualizerBars - property color color: Colors.palette.m3tertiary - property color fillColor: Qt.alpha(color, 0.25) + property color color: Qt.alpha(Colors.palette.m3primary, 0.5) + property color fillColor: Qt.alpha(color, 0.1) - anchors.fill: layout + anchors.fill: parent anchors.leftMargin: -(shape.strokeWidth / 2) layer.enabled: true asynchronous: true @@ -87,15 +92,15 @@ Item { if (n < 2) return ""; - const h = layout.height + shape.strokeWidth / 2; - const w = layout.width + shape.strokeWidth; + const h = root.height + shape.strokeWidth / 2; + const w = root.width + shape.strokeWidth; function x(i) { return i * w / (n - 1); } function y(i) { - return h - values[i] * Config.dashboard.sizes.mediaVisualizerSize; + return h - (values[i] * Config.dashboard.sizes.mediaVisualizerSize) / 2; } let d = `M 0 ${h} `; @@ -142,48 +147,21 @@ Item { RowLayout { id: layout - anchors.left: parent.left - anchors.right: parent.right + anchors.fill: parent + anchors.margins: Tokens.padding.large + anchors.leftMargin: Tokens.padding.extraLarge - CustomClippingRect { - id: cover - - Layout.alignment: Qt.AlignLeft - Layout.bottomMargin: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small - Layout.leftMargin: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small - Layout.preferredHeight: Config.dashboard.sizes.mediaCoverArtSize - Layout.preferredWidth: Config.dashboard.sizes.mediaCoverArtSize - Layout.topMargin: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small - color: Colors.tPalette.m3surfaceContainerHigh - radius: Infinity - - MaterialIcon { - anchors.centerIn: parent - color: Colors.palette.m3onSurfaceVariant - font.pointSize: (parent.width * 0.4) || 1 - grade: 200 - text: "art_track" - } - - Image { - id: image - - anchors.fill: parent - asynchronous: true - fillMode: Image.PreserveAspectCrop - source: Players.active?.trackArtUrl ?? "" - sourceSize.height: Math.floor(height) - sourceSize.width: Math.floor(width) - } + CoverVisualizer { + Layout.fillHeight: true + implicitWidth: Config.dashboard.sizes.mediaCoverArtSize } ColumnLayout { Layout.fillWidth: true - Layout.leftMargin: Tokens.spacing.large - Layout.rightMargin: Tokens.spacing.large - Layout.preferredHeight: childrenRect.height + Layout.leftMargin: Tokens.spacing.largeIncreased + Layout.rightMargin: Tokens.spacing.largeIncreased - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.small MarqueeText { id: title @@ -222,7 +200,7 @@ Item { RowLayout { id: positionSliderLayout - Layout.topMargin: Tokens.spacing.extraLargeIncreased + Layout.topMargin: Tokens.spacing.large Layout.fillWidth: true spacing: Tokens.spacing.small @@ -289,7 +267,6 @@ Item { checked: Players.active?.shuffle ?? false enabled: Players.active?.shuffleSupported onClicked: Players.active.shuffle = !Players.active?.shuffle - implicitWidth: Math.round(implicitHeight * 0.9) } IconButton { @@ -301,6 +278,7 @@ Item { shapeMorph: true enabled: Players.active?.canGoPrevious onClicked: Players.active?.previous() + font.pointSize: Tokens.font.size.large } IconButton { @@ -313,6 +291,7 @@ Item { checked: Players.active?.isPlaying ?? false enabled: Players.active?.canTogglePlaying onClicked: Players.active?.togglePlaying() + font.pointSize: Tokens.font.size.large } IconButton { @@ -324,6 +303,7 @@ Item { shapeMorph: true enabled: Players.active?.canGoNext onClicked: Players.active?.next() + font.pointSize: Tokens.font.size.large } IconButton { @@ -342,7 +322,6 @@ Item { else Players.active.loopState = MprisLoopState.None; } - implicitWidth: Math.round(implicitHeight * 0.9) } } } diff --git a/Modules/Dashboard/Dash/Media/BackgroundShapes.qml b/Modules/Dashboard/Dash/Media/BackgroundShapes.qml new file mode 100644 index 0000000..1847944 --- /dev/null +++ b/Modules/Dashboard/Dash/Media/BackgroundShapes.qml @@ -0,0 +1,97 @@ +pragma ComponentBehavior: Bound + +import QtQuick +import M3Shapes +import qs.Components +import qs.Services +import qs.Helpers + +Item { + id: root + + property int count: 14 + property list darkOpacities: [0.10, 0.20, 0.10, 0.20] + property list lightOpacities: [0.34, 0.34, 0.08, 0.2] + property real maxRotSpeed: 12 + property real maxSize: 124 + property real maxSpeed: 18 + property real minRotSpeed: -12 + property real minSize: 36 + property real minSpeed: 4 + readonly property list shapePool: [MaterialShape.Circle, MaterialShape.Cookie4Sided, MaterialShape.Cookie6Sided, MaterialShape.Cookie7Sided, MaterialShape.Cookie9Sided, MaterialShape.Cookie12Sided, MaterialShape.Sunny, MaterialShape.VerySunny, MaterialShape.SoftBurst, MaterialShape.Pentagon, MaterialShape.Gem, MaterialShape.Arch, MaterialShape.Arrow, MaterialShape.Pill, MaterialShape.Triangle, MaterialShape.Fan, MaterialShape.Oval] + + function rand(min: real, max: real): real { + return min + Math.random() * (max - min); + } + + function signedRand(min: real, max: real): real { + return rand(min, max) * (Math.random() < 0.5 ? -1 : 1); + } + + Component.onCompleted: shapes.model = count + + Repeater { + id: shapes + + DriftingShape { + } + } + + FrameAnimation { + running: root.visible && root.width > 0 && root.height > 0 && (Players.active?.isPlaying ?? false) + + onTriggered: { + const dt = frameTime; + for (let i = 0; i < shapes.count; i++) { + const s = shapes.itemAt(i) as DriftingShape; + if (!s) + continue; + + s.x += s.vx * dt; + s.y += s.vy * dt; + s.rotation += s.vr * dt; + + if (s.x + s.width < 0) + s.x = root.width; + else if (s.x > root.width) + s.x = -s.width; + + if (s.y + s.height < 0) + s.y = root.height; + else if (s.y > root.height) + s.y = -s.height; + } + } + } + + component DriftingShape: MaterialShape { + id: shapeItem + + readonly property int colorIdx: Math.floor(Math.random() * 4) + required property int index + property real vr: root.rand(root.minRotSpeed, root.maxRotSpeed) + property real vx: root.signedRand(root.minSpeed, root.maxSpeed) + property real vy: root.signedRand(root.minSpeed, root.maxSpeed) + + color: [Colors.palette.m3primaryContainer, Colors.palette.m3secondaryContainer, Colors.palette.m3tertiaryContainer, Colors.palette.m3outlineVariant][colorIdx] + implicitSize: root.minSize + (index / root.count) * (root.maxSize - root.minSize) + opacity: Colors.light ? root.lightOpacities[colorIdx] : root.darkOpacities[colorIdx] + rotation: root.rand(0, 360) + shape: root.shapePool[Math.floor(Math.random() * root.shapePool.length)] + + Behavior on color { + CAnim { + } + } + Behavior on opacity { + Anim { + type: Anim.SlowEffects + } + } + + Component.onCompleted: { + x = root.rand(0, root.width - implicitSize); + y = root.rand(0, root.height - implicitSize); + } + } +} diff --git a/Modules/Dashboard/Dash/Media/CoverArt.qml b/Modules/Dashboard/Dash/Media/CoverArt.qml new file mode 100644 index 0000000..6cb6f22 --- /dev/null +++ b/Modules/Dashboard/Dash/Media/CoverArt.qml @@ -0,0 +1,100 @@ +pragma ComponentBehavior: Bound + +import QtQuick +import QtQuick.Effects +import M3Shapes +import qs.Helpers +import qs.Effects +import qs.Components +import qs.Services + +Item { + id: root + + property color fallbackColor: Colors.layer(Colors.palette.m3surfaceContainerHighest, 2) + property bool hadPrevious + readonly property alias shape: shape + + layer.enabled: true + + Behavior on fallbackColor { + CAnim { + } + } + layer.effect: MultiEffect { + blurMax: 1 + shadowColor: Colors.palette.m3outline + shadowEnabled: true + shadowOpacity: 0.3 + } + + Item { + id: shapeWrapper + + anchors.fill: parent + layer.enabled: true + opacity: root.fallbackColor.a + + MaterialShape { + id: shape + + color: Qt.alpha(root.fallbackColor, 1) + implicitSize: root.width + shape: MaterialShape.Cookie12Sided + + Anim on rotation { + duration: 23500 + easing.type: Easing.Linear + from: 360 + loops: Animation.Infinite + paused: !Players.active?.isPlaying + running: true + to: 0 + } + } + } + + MaterialIcon { + anchors.centerIn: parent + animate: true + color: Colors.palette.m3onSurfaceVariant + grade: 200 + opacity: image.status === Image.Null || image.status === Image.Error ? 1 : 0 + text: image.status === Image.Error ? "broken_image" : "art_track" + + Behavior on opacity { + Anim { + type: Anim.DefaultEffects + } + } + } + + Loader { + active: opacity > 0 + anchors.centerIn: parent + asynchronous: true + opacity: image.status === Image.Loading ? 1 : 0 + + Behavior on opacity { + Anim { + type: Anim.DefaultEffects + } + } + sourceComponent: LoadingIndicator { + color: Colors.palette.m3primaryContainer + implicitSize: root.width * 0.3 + } + } + + FadeImage { + id: image + + anchors.fill: parent + layer.enabled: true + source: Players.getArtUrl(Players.active) + + layer.effect: Mask { + maskSource: shapeWrapper + } + } +} diff --git a/Modules/Dashboard/Dash/Media/CoverVisualizer.qml b/Modules/Dashboard/Dash/Media/CoverVisualizer.qml new file mode 100644 index 0000000..b7476a0 --- /dev/null +++ b/Modules/Dashboard/Dash/Media/CoverVisualizer.qml @@ -0,0 +1,18 @@ +pragma ComponentBehavior: Bound + +import QtQuick +import M3Shapes +import ZShell.Config + +Item { + id: root + + CoverArt { + id: cover + + anchors.centerIn: parent + implicitHeight: Config.dashboard.sizes.mediaCoverArtSize + implicitWidth: Config.dashboard.sizes.mediaCoverArtSize + shape.shape: MaterialShape.Cookie9Sided + } +} diff --git a/Modules/Dashboard/Dash/Resources.qml b/Modules/Dashboard/Dash/Resources.qml index b8dd377..9b4a716 100644 --- a/Modules/Dashboard/Dash/Resources.qml +++ b/Modules/Dashboard/Dash/Resources.qml @@ -35,7 +35,7 @@ Item { anchors.horizontalCenter: parent.horizontalCenter anchors.margins: Tokens.padding.large anchors.top: parent.top - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium Resource { fgColor: Colors.palette.m3primary diff --git a/Modules/Dashboard/Dash/User.qml b/Modules/Dashboard/Dash/User.qml index a1909cf..0c6e0c8 100644 --- a/Modules/Dashboard/Dash/User.qml +++ b/Modules/Dashboard/Dash/User.qml @@ -18,7 +18,7 @@ Row { color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2) implicitHeight: info.implicitHeight implicitWidth: info.implicitHeight - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small MaterialIcon { anchors.centerIn: parent diff --git a/Modules/Dashboard/Dash/Weather.qml b/Modules/Dashboard/Dash/Weather.qml index 2ba59e6..c951fb7 100644 --- a/Modules/Dashboard/Dash/Weather.qml +++ b/Modules/Dashboard/Dash/Weather.qml @@ -27,7 +27,7 @@ Item { id: info anchors.left: icon.right - anchors.leftMargin: Tokens.spacing.large + anchors.leftMargin: Tokens.spacing.largeIncreased anchors.verticalCenter: parent.verticalCenter spacing: 8 diff --git a/Modules/Dashboard/Tabs.qml b/Modules/Dashboard/Tabs.qml index 5225d23..8a0bccf 100644 --- a/Modules/Dashboard/Tabs.qml +++ b/Modules/Dashboard/Tabs.qml @@ -181,7 +181,7 @@ Item { anchors.verticalCenter: parent.verticalCenter color: "transparent" implicitHeight: parent.height + 8 * 2 - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small CustomRect { id: stateLayer diff --git a/Modules/DesktopIcons/BackgroundContextMenu.qml b/Modules/DesktopIcons/BackgroundContextMenu.qml index 52934a2..88e9bc0 100644 --- a/Modules/DesktopIcons/BackgroundContextMenu.qml +++ b/Modules/DesktopIcons/BackgroundContextMenu.qml @@ -32,7 +32,7 @@ Item { y: root.menuY color: Colors.tPalette.m3surface - radius: Tokens.rounding.normal + radius: Tokens.rounding.medium implicitWidth: menuLayout.implicitWidth + padding * 2 implicitHeight: menuLayout.implicitHeight + padding * 2 @@ -48,13 +48,13 @@ Item { CustomRect { Layout.preferredWidth: 200 radius: popupBackground.radius - popupBackground.padding - implicitHeight: openTerminalRow.implicitHeight + Tokens.padding.small * 2 + implicitHeight: openTerminalRow.implicitHeight + Tokens.padding.extraSmall * 2 RowLayout { id: openTerminalRow spacing: 8 anchors.fill: parent - anchors.leftMargin: Tokens.padding.smaller + anchors.leftMargin: Tokens.padding.small MaterialIcon { text: "terminal"; font.pointSize: 20 } CustomText { text: "Open terminal"; Layout.fillWidth: true } @@ -81,13 +81,13 @@ Item { CustomRect { Layout.fillWidth: true radius: popupBackground.radius - popupBackground.padding - implicitHeight: settingsRow.implicitHeight + Tokens.padding.small * 2 + implicitHeight: settingsRow.implicitHeight + Tokens.padding.extraSmall * 2 RowLayout { id: settingsRow spacing: 8 anchors.fill: parent - anchors.leftMargin: Tokens.padding.smaller + anchors.leftMargin: Tokens.padding.small MaterialIcon { text: "settings"; font.pointSize: 20 } CustomText { text: "ZShell settings"; Layout.fillWidth: true } @@ -115,13 +115,13 @@ Item { CustomRect { Layout.fillWidth: true radius: popupBackground.radius - popupBackground.padding - implicitHeight: logoutRow.implicitHeight + Tokens.padding.small * 2 + implicitHeight: logoutRow.implicitHeight + Tokens.padding.extraSmall * 2 RowLayout { id: logoutRow spacing: 8 anchors.fill: parent - anchors.leftMargin: Tokens.padding.smaller + anchors.leftMargin: Tokens.padding.small MaterialIcon { text: "logout"; font.pointSize: 20 } CustomText { text: "Logout"; Layout.fillWidth: true } @@ -148,13 +148,13 @@ Item { // CustomRect { // Layout.fillWidth: true // radius: popupBackground.radius - popupBackground.padding - // implicitHeight: desktopIconsRow.implicitHeight + Tokens.padding.small * 2 + // implicitHeight: desktopIconsRow.implicitHeight + Tokens.padding.extraSmall * 2 // // RowLayout { // id: desktopIconsRow // spacing: 8 // anchors.fill: parent - // anchors.leftMargin: Tokens.padding.smaller + // anchors.leftMargin: Tokens.padding.small // // MaterialIcon { text: Config.options.background.showDesktopIcons ? "visibility_off" : "visibility"; font.pointSize: 20 } // CustomText { text: Config.options.background.showDesktopIcons ? "Hide icons" : "Show icons"; Layout.fillWidth: true } diff --git a/Modules/DesktopIcons/DesktopIconContextMenu.qml b/Modules/DesktopIcons/DesktopIconContextMenu.qml index 7244719..4b9b570 100644 --- a/Modules/DesktopIcons/DesktopIconContextMenu.qml +++ b/Modules/DesktopIcons/DesktopIconContextMenu.qml @@ -43,13 +43,13 @@ Item { CustomClippingRect { id: popupBackground - readonly property real padding: Tokens.padding.small + readonly property real padding: Tokens.padding.extraSmall color: Colors.tPalette.m3surface implicitHeight: menuLayout.implicitHeight + padding * 2 implicitWidth: menuLayout.implicitWidth + padding * 2 opacity: contextMenu.visible ? 1 : 0 - radius: Tokens.rounding.normal + radius: Tokens.rounding.medium x: contextMenu.menuX y: contextMenu.menuY @@ -66,14 +66,14 @@ Item { CustomRect { Layout.preferredWidth: 160 - implicitHeight: openRow.implicitHeight + Tokens.padding.small * 2 + implicitHeight: openRow.implicitHeight + Tokens.padding.extraSmall * 2 radius: popupBackground.radius - popupBackground.padding RowLayout { id: openRow anchors.fill: parent - anchors.leftMargin: Tokens.padding.smaller + anchors.leftMargin: Tokens.padding.small spacing: 8 MaterialIcon { @@ -109,14 +109,14 @@ Item { CustomRect { Layout.fillWidth: true - implicitHeight: openWithRow.implicitHeight + Tokens.padding.small * 2 + implicitHeight: openWithRow.implicitHeight + Tokens.padding.extraSmall * 2 radius: popupBackground.radius - popupBackground.padding RowLayout { id: openWithRow anchors.fill: parent - anchors.leftMargin: Tokens.padding.smaller + anchors.leftMargin: Tokens.padding.small spacing: 8 MaterialIcon { @@ -154,14 +154,14 @@ Item { CustomRect { Layout.fillWidth: true - implicitHeight: copyPathRow.implicitHeight + Tokens.padding.small * 2 + implicitHeight: copyPathRow.implicitHeight + Tokens.padding.extraSmall * 2 radius: popupBackground.radius - popupBackground.padding RowLayout { id: copyPathRow anchors.fill: parent - anchors.leftMargin: Tokens.padding.smaller + anchors.leftMargin: Tokens.padding.small spacing: 8 MaterialIcon { @@ -187,7 +187,7 @@ Item { CustomRect { Layout.fillWidth: true - implicitHeight: renameRow.implicitHeight + Tokens.padding.small * 2 + implicitHeight: renameRow.implicitHeight + Tokens.padding.extraSmall * 2 radius: popupBackground.radius - popupBackground.padding visible: contextMenu.targetPaths.length === 1 @@ -195,7 +195,7 @@ Item { id: renameRow anchors.fill: parent - anchors.leftMargin: Tokens.padding.smaller + anchors.leftMargin: Tokens.padding.small spacing: 8 MaterialIcon { @@ -229,14 +229,14 @@ Item { CustomRect { Layout.fillWidth: true - implicitHeight: deleteRow.implicitHeight + Tokens.padding.small * 2 + implicitHeight: deleteRow.implicitHeight + Tokens.padding.extraSmall * 2 radius: popupBackground.radius - popupBackground.padding RowLayout { id: deleteRow anchors.fill: parent - anchors.leftMargin: Tokens.padding.smaller + anchors.leftMargin: Tokens.padding.small spacing: 8 MaterialIcon { diff --git a/Modules/DesktopIcons/DesktopIconDelegate.qml b/Modules/DesktopIcons/DesktopIconDelegate.qml index 28804e4..49b212c 100644 --- a/Modules/DesktopIcons/DesktopIconDelegate.qml +++ b/Modules/DesktopIcons/DesktopIconDelegate.qml @@ -205,7 +205,7 @@ Item { anchors.margins: 4 color: "white" opacity: root.iconsRoot.selectedIcons.includes(root.filePath) ? 0.2 : 0.0 - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small Behavior on opacity { Anim { @@ -265,7 +265,7 @@ Item { anchors.margins: 4 color: "white" opacity: parent.containsMouse ? 0.1 : 0.0 - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small Behavior on opacity { Anim { diff --git a/Modules/Dock/Content.qml b/Modules/Dock/Content.qml index fd50fdc..5fda10a 100644 --- a/Modules/Dock/Content.qml +++ b/Modules/Dock/Content.qml @@ -22,10 +22,10 @@ Item { property string draggedAppId: "" property var draggedModelData: null property bool dropAnimating: false - readonly property int padding: Tokens.padding.small + readonly property int padding: Tokens.padding.extraSmall required property var panels property var pendingCommitIds: [] - readonly property int rounding: Tokens.rounding.large + readonly property int rounding: Tokens.rounding.largeIncreased required property ShellScreen screen required property PersistentProperties visibilities property var visualIds: [] @@ -247,7 +247,7 @@ Item { property bool enableAddAnimation: false anchors.left: parent.left - anchors.margins: Tokens.padding.small + anchors.margins: Tokens.padding.extraSmall anchors.top: parent.top boundsBehavior: Flickable.StopAtBounds height: Config.dock.height @@ -255,7 +255,7 @@ Item { interactive: !(root.dragActive || root.dropAnimating) model: visualModel orientation: ListView.Horizontal - spacing: Tokens.padding.smaller + spacing: Tokens.padding.small add: Transition { ParallelAnimation { diff --git a/Modules/Dock/Parts/DockAppButton.qml b/Modules/Dock/Parts/DockAppButton.qml index 265fd44..ab9164b 100644 --- a/Modules/Dock/Parts/DockAppButton.qml +++ b/Modules/Dock/Parts/DockAppButton.qml @@ -23,7 +23,7 @@ CustomRect { implicitHeight: Config.dock.height implicitWidth: isSeparator ? 1 : implicitHeight - radius: Tokens.rounding.normal - Tokens.padding.small + radius: Tokens.rounding.medium - Tokens.padding.extraSmall Loader { active: !isSeparator diff --git a/Modules/Dock/Parts/DockSeparator.qml b/Modules/Dock/Parts/DockSeparator.qml index 973d9db..fac6f04 100644 --- a/Modules/Dock/Parts/DockSeparator.qml +++ b/Modules/Dock/Parts/DockSeparator.qml @@ -5,9 +5,9 @@ import ZShell.Config import qs.Services CustomRect { - Layout.bottomMargin: dockRow.padding + Tokens.rounding.normal + Layout.bottomMargin: dockRow.padding + Tokens.rounding.medium Layout.fillHeight: true - Layout.topMargin: dockRow.padding + Tokens.rounding.normal + Layout.topMargin: dockRow.padding + Tokens.rounding.medium color: Colors.palette.m3outlineVariant implicitWidth: 1 } diff --git a/Modules/Dock/Wrapper.qml b/Modules/Dock/Wrapper.qml index fc65575..a9897a5 100644 --- a/Modules/Dock/Wrapper.qml +++ b/Modules/Dock/Wrapper.qml @@ -24,7 +24,7 @@ Item { Behavior on offsetScale { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } diff --git a/Modules/Drawing/Content.qml b/Modules/Drawing/Content.qml index 4a83e7b..5fe6eea 100644 --- a/Modules/Drawing/Content.qml +++ b/Modules/Drawing/Content.qml @@ -33,8 +33,8 @@ Item { drawing.drawingState.penColor = Qt.hsva(huePicker.currentHue, saturationSlider.value, brightnessSlider.value, drawing.drawingState.penColor.a); } - implicitHeight: column.height + Tokens.padding.larger * 2 - implicitWidth: huePicker.implicitWidth + Tokens.padding.normal * 2 + implicitHeight: column.height + Tokens.padding.small * 2 + implicitWidth: huePicker.implicitWidth + Tokens.padding.small * 2 Component.onCompleted: syncFromPenColor() @@ -97,7 +97,7 @@ Item { anchors.left: parent.left anchors.right: parent.right - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium Repeater { model: root.colors1 @@ -113,7 +113,7 @@ Item { anchors.left: parent.left anchors.right: parent.right - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium Repeater { model: root.colors2 @@ -172,7 +172,7 @@ Item { } IconButton { - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.right: parent.right anchors.top: parent.top checked: root.wrapper.pinned diff --git a/Modules/Drawing/Wrapper.qml b/Modules/Drawing/Wrapper.qml index 352d62c..4389b06 100644 --- a/Modules/Drawing/Wrapper.qml +++ b/Modules/Drawing/Wrapper.qml @@ -49,13 +49,13 @@ Item { Behavior on implicitWidth { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } Behavior on offsetScale { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } diff --git a/Modules/Launcher/AppList.qml b/Modules/Launcher/AppList.qml index 4bb7921..4a0e862 100644 --- a/Modules/Launcher/AppList.qml +++ b/Modules/Launcher/AppList.qml @@ -99,13 +99,13 @@ CustomListView { implicitHeight: root.currentItem?.implicitHeight ?? 0 implicitWidth: root.width opacity: 0.08 - radius: Tokens.rounding.smallest + radius: Tokens.rounding.medium y: root.currentItem?.y ?? 0 Behavior on y { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.expressiveEffects + easing: Tokens.anim.expressiveDefaultEffects } } } @@ -170,7 +170,7 @@ CustomListView { ParallelAnimation { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.standardAccel + easing: Tokens.anim.standardAccel from: 1 property: "opacity" target: root @@ -179,7 +179,7 @@ CustomListView { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.standardAccel + easing: Tokens.anim.standardAccel from: 1 property: "scale" target: root @@ -205,7 +205,7 @@ CustomListView { ParallelAnimation { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.standardDecel + easing: Tokens.anim.standardDecel from: 0 property: "opacity" target: root @@ -214,7 +214,7 @@ CustomListView { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.standardDecel + easing: Tokens.anim.standardDecel from: 0.9 property: "scale" target: root diff --git a/Modules/Launcher/CarouselView.qml b/Modules/Launcher/CarouselView.qml index 595dfa2..b370ce1 100755 --- a/Modules/Launcher/CarouselView.qml +++ b/Modules/Launcher/CarouselView.qml @@ -21,7 +21,7 @@ CarouselView { focalWidth: Config.launcher.sizes.wallpaperWidth glideDuration: 250 glideEasingType: Easing.OutCubic - implicitHeight: tileHeight + Tokens.spacing.small / 2 + Tokens.padding.large + Tokens.padding.normal + implicitHeight: tileHeight + Tokens.spacing.small / 2 + Tokens.padding.large + Tokens.padding.small itemSpacing: Tokens.spacing.small maxWidth: { if (!screen) diff --git a/Modules/Launcher/Content.qml b/Modules/Launcher/Content.qml index da6ac31..9bb4338 100644 --- a/Modules/Launcher/Content.qml +++ b/Modules/Launcher/Content.qml @@ -12,9 +12,9 @@ Item { id: root required property real maxHeight - readonly property int padding: Tokens.padding.small + readonly property int padding: Tokens.padding.largeIncreased / 4 required property var panels - readonly property int rounding: Tokens.rounding.large + readonly property int rounding: Tokens.rounding.largeIncreased required property PersistentProperties visibilities implicitHeight: search.height + listWrapper.height + padding * 2 @@ -49,9 +49,9 @@ Item { anchors.left: parent.left anchors.margins: root.padding anchors.right: parent.right - bottomPadding: Tokens.padding.larger + bottomPadding: Tokens.padding.medium placeholderText: qsTr("Type \"%1\" for commands").arg(Config.launcher.actionPrefix) - topPadding: Tokens.padding.larger + topPadding: Tokens.padding.medium Component.onCompleted: forceActiveFocus() Keys.onDownPressed: list.currentList?.decrementCurrentIndex() diff --git a/Modules/Launcher/ContentList.qml b/Modules/Launcher/ContentList.qml index f34d16f..0081914 100644 --- a/Modules/Launcher/ContentList.qml +++ b/Modules/Launcher/ContentList.qml @@ -32,7 +32,7 @@ Item { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.expressiveEffects + easing: Tokens.anim.expressiveDefaultEffects } } Behavior on implicitWidth { @@ -40,7 +40,7 @@ Item { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.expressiveEffects + easing: Tokens.anim.expressiveDefaultEffects } } Behavior on state { @@ -127,7 +127,7 @@ Item { opacity: root.currentList?.count === 0 ? 1 : 0 padding: Tokens.padding.large scale: root.currentList?.count === 0 ? 1 : 0.5 - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium Behavior on opacity { Anim { diff --git a/Modules/Launcher/Items/ActionItem.qml b/Modules/Launcher/Items/ActionItem.qml index 5c0230b..b6ee987 100644 --- a/Modules/Launcher/Items/ActionItem.qml +++ b/Modules/Launcher/Items/ActionItem.qml @@ -16,7 +16,7 @@ Item { implicitHeight: Config.launcher.sizes.itemHeight StateLayer { - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small onClicked: { root.modelData?.onClicked(root.list); @@ -25,9 +25,9 @@ Item { Item { anchors.fill: parent - anchors.leftMargin: Tokens.padding.larger - anchors.margins: Tokens.padding.smaller - anchors.rightMargin: Tokens.padding.larger + anchors.leftMargin: Tokens.padding.small + anchors.margins: Tokens.padding.small + anchors.rightMargin: Tokens.padding.small MaterialIcon { id: icon @@ -39,7 +39,7 @@ Item { Item { anchors.left: icon.right - anchors.leftMargin: Tokens.spacing.normal + anchors.leftMargin: Tokens.spacing.medium anchors.verticalCenter: icon.verticalCenter implicitHeight: name.implicitHeight + desc.implicitHeight implicitWidth: parent.width - icon.width @@ -59,7 +59,7 @@ Item { elide: Text.ElideRight font.pointSize: Tokens.font.size.small text: root.modelData?.desc ?? "" - width: root.width - icon.width - Tokens.rounding.normal * 2 + width: root.width - icon.width - Tokens.rounding.medium * 2 } } } diff --git a/Modules/Launcher/Items/AppItem.qml b/Modules/Launcher/Items/AppItem.qml index db216d2..24d46ba 100644 --- a/Modules/Launcher/Items/AppItem.qml +++ b/Modules/Launcher/Items/AppItem.qml @@ -19,7 +19,7 @@ Item { implicitHeight: Config.launcher.sizes.itemHeight StateLayer { - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small onClicked: { Apps.launch(root.modelData); @@ -29,9 +29,9 @@ Item { Item { anchors.fill: parent - anchors.leftMargin: Tokens.padding.larger - anchors.margins: Tokens.padding.smaller - anchors.rightMargin: Tokens.padding.larger + anchors.leftMargin: Tokens.padding.medium + anchors.margins: Tokens.padding.small + anchors.rightMargin: Tokens.padding.medium IconImage { id: icon @@ -43,7 +43,7 @@ Item { Item { anchors.left: icon.right - anchors.leftMargin: Tokens.spacing.normal + anchors.leftMargin: Tokens.spacing.medium anchors.verticalCenter: icon.verticalCenter implicitHeight: name.implicitHeight + comment.implicitHeight implicitWidth: parent.width - icon.width @@ -63,7 +63,7 @@ Item { elide: Text.ElideRight font.pointSize: Tokens.font.size.small text: (root.modelData?.comment || root.modelData?.genericName || root.modelData?.name) ?? "" - width: root.width - icon.width - Tokens.rounding.normal * 2 + width: root.width - icon.width - Tokens.rounding.medium - Tokens.padding.medium * 2 } } diff --git a/Modules/Launcher/Items/CalcItem.qml b/Modules/Launcher/Items/CalcItem.qml index 27c4fcb..59da218 100644 --- a/Modules/Launcher/Items/CalcItem.qml +++ b/Modules/Launcher/Items/CalcItem.qml @@ -24,7 +24,7 @@ Item { implicitHeight: Config.launcher.sizes.itemHeight StateLayer { - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small onClicked: { root.onClicked(); @@ -33,10 +33,10 @@ Item { RowLayout { anchors.left: parent.left - anchors.margins: Tokens.padding.larger + anchors.margins: Tokens.padding.small anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium MaterialIcon { Layout.alignment: Qt.AlignVCenter @@ -64,13 +64,13 @@ Item { Layout.alignment: Qt.AlignVCenter clip: true color: Colors.palette.m3tertiary - implicitHeight: Math.max(label.implicitHeight, icon.implicitHeight) + Tokens.padding.small * 2 - implicitWidth: (stateLayer.containsMouse ? label.implicitWidth + label.anchors.rightMargin : 0) + icon.implicitWidth + Tokens.padding.normal * 2 - radius: Tokens.rounding.normal + implicitHeight: Math.max(label.implicitHeight, icon.implicitHeight) + Tokens.padding.extraSmall * 2 + implicitWidth: (stateLayer.containsMouse ? label.implicitWidth + label.anchors.rightMargin : 0) + icon.implicitWidth + Tokens.padding.small * 2 + radius: Tokens.rounding.medium Behavior on implicitWidth { Anim { - easing.bezierCurve: Tokens.anim.curves.expressiveEffects + easing: Tokens.anim.expressiveDefaultEffects } } @@ -106,7 +106,7 @@ Item { id: icon anchors.right: parent.right - anchors.rightMargin: Tokens.padding.normal + anchors.rightMargin: Tokens.padding.small anchors.verticalCenter: parent.verticalCenter color: Colors.palette.m3onTertiary font.pointSize: Tokens.font.size.large diff --git a/Modules/Launcher/Items/VariantItem.qml b/Modules/Launcher/Items/VariantItem.qml index 988bc9c..ca5d6cd 100644 --- a/Modules/Launcher/Items/VariantItem.qml +++ b/Modules/Launcher/Items/VariantItem.qml @@ -15,7 +15,7 @@ Item { implicitHeight: Config.launcher.sizes.itemHeight StateLayer { - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small onClicked: { root.modelData?.onClicked(root.list); @@ -24,9 +24,9 @@ Item { Item { anchors.fill: parent - anchors.leftMargin: Tokens.padding.larger - anchors.margins: Tokens.padding.smaller - anchors.rightMargin: Tokens.padding.larger + anchors.leftMargin: Tokens.padding.small + anchors.margins: Tokens.padding.small + anchors.rightMargin: Tokens.padding.small MaterialIcon { id: icon @@ -38,10 +38,10 @@ Item { Column { anchors.left: icon.right - anchors.leftMargin: Tokens.spacing.larger + anchors.leftMargin: Tokens.spacing.large anchors.verticalCenter: icon.verticalCenter spacing: 0 - width: parent.width - icon.width - anchors.leftMargin - (current.active ? current.width + Tokens.spacing.normal : 0) + width: parent.width - icon.width - anchors.leftMargin - (current.active ? current.width + Tokens.spacing.medium : 0) CustomText { font.pointSize: Tokens.font.size.normal diff --git a/Modules/Launcher/Wrapper.qml b/Modules/Launcher/Wrapper.qml index be63791..e5ae86c 100644 --- a/Modules/Launcher/Wrapper.qml +++ b/Modules/Launcher/Wrapper.qml @@ -11,7 +11,7 @@ Item { property int contentHeight readonly property real maxHeight: { - let max = screen.height - Tokens.spacing.large * 2; + let max = screen.height - Tokens.spacing.largeIncreased * 2; if (visibilities.resources && panels.resourcesWrapper.x + panels.resourcesWrapper.width > root.x) max -= panels.resources.nonAnimHeight; if (panels.popouts.hasCurrent) @@ -34,7 +34,7 @@ Item { Behavior on offsetScale { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } diff --git a/Modules/Lock/Center.qml b/Modules/Lock/Center.qml index 8e3bdf6..fc98815 100644 --- a/Modules/Lock/Center.qml +++ b/Modules/Lock/Center.qml @@ -19,7 +19,7 @@ ColumnLayout { Layout.fillHeight: true Layout.fillWidth: false Layout.preferredWidth: centerWidth - spacing: Tokens.spacing.large * 2 + spacing: Tokens.spacing.largeIncreased * 2 RowLayout { Layout.alignment: Qt.AlignHCenter @@ -65,7 +65,7 @@ ColumnLayout { CustomClippingRect { Layout.alignment: Qt.AlignHCenter - Layout.topMargin: Tokens.spacing.large * 2 + Layout.topMargin: Tokens.spacing.largeIncreased * 2 color: Colors.tPalette.m3surfaceContainer implicitHeight: root.centerWidth / 2 implicitWidth: root.centerWidth / 2 @@ -90,7 +90,7 @@ ColumnLayout { Layout.alignment: Qt.AlignHCenter color: Colors.tPalette.m3surfaceContainer focus: true - implicitHeight: input.implicitHeight + Tokens.padding.small * 2 + implicitHeight: input.implicitHeight + Tokens.padding.extraSmall * 2 implicitWidth: root.centerWidth * 0.8 radius: Tokens.rounding.full @@ -121,11 +121,11 @@ ColumnLayout { id: input anchors.fill: parent - anchors.margins: Tokens.padding.small - spacing: Tokens.spacing.normal + anchors.margins: Tokens.padding.extraSmall + spacing: Tokens.spacing.medium Item { - implicitHeight: fprintIcon.implicitHeight + Tokens.padding.small * 2 + implicitHeight: fprintIcon.implicitHeight + Tokens.padding.extraSmall * 2 implicitWidth: implicitHeight MaterialIcon { @@ -163,7 +163,7 @@ ColumnLayout { CustomRect { color: root.lock.pam.buffer ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2) - implicitHeight: enterIcon.implicitHeight + Tokens.padding.small * 2 + implicitHeight: enterIcon.implicitHeight + Tokens.padding.extraSmall * 2 implicitWidth: implicitHeight radius: Tokens.rounding.full @@ -189,7 +189,7 @@ ColumnLayout { Item { Layout.fillWidth: true - Layout.topMargin: -Tokens.spacing.large + Layout.topMargin: -Tokens.spacing.largeIncreased implicitHeight: Math.max(message.implicitHeight, stateMessage.implicitHeight) Behavior on implicitHeight { diff --git a/Modules/Lock/Content.qml b/Modules/Lock/Content.qml index 3367a23..0323e7f 100644 --- a/Modules/Lock/Content.qml +++ b/Modules/Lock/Content.qml @@ -12,17 +12,17 @@ CustomClippingRect { implicitHeight: layout.implicitHeight implicitWidth: layout.implicitWidth - radius: Tokens.rounding.large + radius: Tokens.rounding.largeIncreased RowLayout { id: layout anchors.fill: parent - spacing: Tokens.spacing.large * 2 + spacing: Tokens.spacing.largeIncreased * 2 ColumnLayout { Layout.fillWidth: true - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium WeatherInfo { id: weather @@ -52,15 +52,15 @@ CustomClippingRect { ColumnLayout { Layout.fillWidth: true - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium CustomRect { Layout.fillHeight: true Layout.fillWidth: true - bottomRightRadius: Tokens.rounding.large + bottomRightRadius: Tokens.rounding.largeIncreased color: Colors.tPalette.m3surfaceContainer radius: Tokens.rounding.small - topRightRadius: Tokens.rounding.large + topRightRadius: Tokens.rounding.largeIncreased NotifDock { lock: root.lock diff --git a/Modules/Lock/InputField.qml b/Modules/Lock/InputField.qml index 3c2349d..e211280 100644 --- a/Modules/Lock/InputField.qml +++ b/Modules/Lock/InputField.qml @@ -94,7 +94,7 @@ Item { Behavior on scale { Anim { duration: Tokens.anim.durations.expressiveFastSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial + easing: Tokens.anim.expressiveFastSpatial } } diff --git a/Modules/Lock/LockSurface.qml b/Modules/Lock/LockSurface.qml index d70640a..6086d68 100644 --- a/Modules/Lock/LockSurface.qml +++ b/Modules/Lock/LockSurface.qml @@ -31,7 +31,7 @@ WlSessionLockSurface { ParallelAnimation { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial properties: "implicitWidth,implicitHeight" target: lockContent to: lockContent.size @@ -45,7 +45,7 @@ WlSessionLockSurface { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial property: "scale" target: content to: 0 @@ -94,7 +94,7 @@ WlSessionLockSurface { ParallelAnimation { Anim { duration: Tokens.anim.durations.expressiveFastSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial + easing: Tokens.anim.expressiveFastSpatial property: "scale" target: lockContent to: 1 @@ -116,7 +116,7 @@ WlSessionLockSurface { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial property: "scale" target: content to: 1 @@ -125,12 +125,12 @@ WlSessionLockSurface { Anim { property: "radius" target: lockBg - to: Tokens.rounding.large * 1.5 + to: Tokens.rounding.largeIncreased * 1.5 } Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial property: "implicitWidth" target: lockContent to: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult * Config.lock.sizes.ratio @@ -138,7 +138,7 @@ WlSessionLockSurface { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial property: "implicitHeight" target: lockContent to: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult diff --git a/Modules/Lock/Media.qml b/Modules/Lock/Media.qml index 6426e1c..d292965 100644 --- a/Modules/Lock/Media.qml +++ b/Modules/Lock/Media.qml @@ -57,7 +57,7 @@ CustomClippingRect { animate: true color: Colors.palette.m3primary elide: Text.ElideRight - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal horizontalAlignment: Text.AlignHCenter text: (Players.active?.trackTitle ?? qsTr("Nothing playing")) || qsTr("Unknown track") } diff --git a/Modules/Lock/NotifDock.qml b/Modules/Lock/NotifDock.qml index 5a743ae..0511ebf 100644 --- a/Modules/Lock/NotifDock.qml +++ b/Modules/Lock/NotifDock.qml @@ -18,7 +18,7 @@ ColumnLayout { anchors.fill: parent anchors.margins: Tokens.padding.large - spacing: Tokens.spacing.smaller + spacing: Tokens.spacing.small CustomText { Layout.fillWidth: true @@ -48,7 +48,7 @@ ColumnLayout { } } sourceComponent: ColumnLayout { - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased Image { asynchronous: true @@ -88,7 +88,7 @@ ColumnLayout { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial from: 0 property: "scale" to: 1 @@ -104,7 +104,7 @@ ColumnLayout { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial property: "y" } } @@ -122,7 +122,7 @@ ColumnLayout { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial property: "y" } } diff --git a/Modules/Lock/NotifGroup.qml b/Modules/Lock/NotifGroup.qml index e0a61ce..09bf5d5 100644 --- a/Modules/Lock/NotifGroup.qml +++ b/Modules/Lock/NotifGroup.qml @@ -26,13 +26,13 @@ CustomRect { anchors.right: parent?.right clip: true color: root.urgency === "critical" ? Colors.palette.m3secondaryContainer : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2) - implicitHeight: content.implicitHeight + Tokens.padding.normal * 2 - radius: Tokens.rounding.normal + implicitHeight: content.implicitHeight + Tokens.padding.small * 2 + radius: Tokens.rounding.medium Behavior on implicitHeight { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } @@ -40,10 +40,10 @@ CustomRect { id: content anchors.left: parent.left - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.right: parent.right anchors.top: parent.top - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium Item { Layout.alignment: Qt.AlignLeft | Qt.AlignTop @@ -119,15 +119,15 @@ CustomRect { } ColumnLayout { - Layout.bottomMargin: -Tokens.padding.small / 2 - (root.expanded ? 0 : spacing) + Layout.bottomMargin: -Tokens.padding.extraSmall / 2 - (root.expanded ? 0 : spacing) Layout.fillWidth: true - Layout.topMargin: -Tokens.padding.small + Layout.topMargin: -Tokens.padding.extraSmall spacing: Math.round(Tokens.spacing.small / 2) RowLayout { Layout.bottomMargin: -parent.spacing Layout.fillWidth: true - spacing: Tokens.spacing.smaller + spacing: Tokens.spacing.small CustomText { Layout.fillWidth: true @@ -147,8 +147,8 @@ CustomRect { CustomRect { Layout.preferredWidth: root.notifs.length > Config.notifs.groupPreviewNum ? implicitWidth : 0 color: root.urgency === "critical" ? Colors.palette.m3error : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2) - implicitHeight: groupCount.implicitHeight + Tokens.padding.small - implicitWidth: expandBtn.implicitWidth + Tokens.padding.smaller * 2 + implicitHeight: groupCount.implicitHeight + Tokens.padding.extraSmall + implicitWidth: expandBtn.implicitWidth + Tokens.padding.small * 2 opacity: root.notifs.length > Config.notifs.groupPreviewNum ? 1 : 0 radius: Tokens.rounding.full @@ -178,7 +178,7 @@ CustomRect { CustomText { id: groupCount - Layout.leftMargin: Tokens.padding.small / 2 + Layout.leftMargin: Tokens.padding.extraSmall / 2 animate: true color: root.urgency === "critical" ? Colors.palette.m3onError : Colors.palette.m3onSurface font.pointSize: Tokens.font.size.small @@ -186,7 +186,7 @@ CustomRect { } MaterialIcon { - Layout.rightMargin: -Tokens.padding.small / 2 + Layout.rightMargin: -Tokens.padding.extraSmall / 2 animate: true color: root.urgency === "critical" ? Colors.palette.m3onError : Colors.palette.m3onSurface text: root.expanded ? "expand_less" : "expand_more" diff --git a/Modules/Lock/Resources.qml b/Modules/Lock/Resources.qml index 0924921..e06fff7 100644 --- a/Modules/Lock/Resources.qml +++ b/Modules/Lock/Resources.qml @@ -38,7 +38,7 @@ CustomRect { anchors.fill: parent anchors.margins: Tokens.padding.large - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased Resource { id: cpu diff --git a/Modules/Lock/Weather/BriefInfo.qml b/Modules/Lock/Weather/BriefInfo.qml index 5030448..fc6a820 100644 --- a/Modules/Lock/Weather/BriefInfo.qml +++ b/Modules/Lock/Weather/BriefInfo.qml @@ -53,7 +53,7 @@ ColumnLayout { Layout.alignment: Qt.AlignHCenter animate: true color: Colors.palette.m3onSurfaceVariant - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: { const today = Weather.forecast[0]; return qsTr("High %1 • Low %2").arg(Weather.formatTemp(today?.maxTempC)).arg(Weather.formatTemp(today?.minTempC)); diff --git a/Modules/Lock/Weather/Forecast.qml b/Modules/Lock/Weather/Forecast.qml index adc744e..07632b3 100644 --- a/Modules/Lock/Weather/Forecast.qml +++ b/Modules/Lock/Weather/Forecast.qml @@ -24,14 +24,14 @@ CustomRect { MaterialIcon { Layout.topMargin: Math.round(fontInfo.pointSize * 0.12) - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: "schedule" } CustomText { id: title - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: qsTr("Hourly forecast") } } @@ -47,7 +47,7 @@ CustomRect { implicitHeight: contentItem.childrenRect.height model: Weather.hourlyForecast orientation: VerticalFadeListView.Horizontal - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium delegate: ColumnLayout { id: hour @@ -61,7 +61,7 @@ CustomRect { MaterialShape { Layout.alignment: Qt.AlignHCenter color: Qt.alpha(Colors.palette.m3primary, hour.index === 0 ? 1 : 0) - implicitSize: temp.implicitHeight + Tokens.padding.normal * 2 + implicitSize: temp.implicitHeight + Tokens.padding.small * 2 shape: MaterialShape.Cookie4Sided Behavior on color { @@ -74,7 +74,7 @@ CustomRect { anchors.centerIn: parent color: hour.index === 0 ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: Weather.formatTemp(hour.cond.tempC).slice(0, -1) // Remove C/F } } diff --git a/Modules/Lock/WeatherInfo.qml b/Modules/Lock/WeatherInfo.qml index 295f4c4..3de1b1f 100644 --- a/Modules/Lock/WeatherInfo.qml +++ b/Modules/Lock/WeatherInfo.qml @@ -15,7 +15,7 @@ CustomRect { implicitHeight: { const base = brief.implicitHeight + brief.anchors.topMargin; if (showForecast) - return base + Tokens.spacing.large + forecast.implicitHeight + forecast.anchors.margins; + return base + Tokens.spacing.largeIncreased + forecast.implicitHeight + forecast.anchors.margins; return base + brief.anchors.topMargin; } radius: Tokens.rounding.small diff --git a/Modules/Notifications/Content.qml b/Modules/Notifications/Content.qml index 5d27526..2504abe 100644 --- a/Modules/Notifications/Content.qml +++ b/Modules/Notifications/Content.qml @@ -11,7 +11,7 @@ import qs.Helpers Item { id: root - readonly property int padding: Tokens.padding.smaller + readonly property int padding: Tokens.padding.small required property Item panels required property PersistentProperties visibilities @@ -55,7 +55,7 @@ Item { anchors.fill: parent anchors.margins: root.padding color: "transparent" - radius: Tokens.rounding.normal - root.padding + radius: Tokens.rounding.medium - root.padding CustomListView { id: list @@ -93,7 +93,7 @@ Item { component Anim: NumberAnimation { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } component NotifWrapper: Item { id: wrapper diff --git a/Modules/Notifications/Notification.qml b/Modules/Notifications/Notification.qml index a4ea654..2247b2b 100644 --- a/Modules/Notifications/Notification.qml +++ b/Modules/Notifications/Notification.qml @@ -27,7 +27,7 @@ CustomRect { Behavior on x { Anim { - easing.bezierCurve: Tokens.anim.curves.emphasizedDecel + easing: Tokens.anim.emphasizedDecel } } @@ -88,7 +88,7 @@ CustomRect { id: inner anchors.left: parent.left - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.right: parent.right anchors.top: parent.top implicitHeight: root.nonAnimHeight @@ -204,7 +204,7 @@ CustomRect { Behavior on sweepAngle { Anim { - easing.bezierCurve: Tokens.anim.curves.emphasizedDecel + easing: Tokens.anim.emphasizedDecel } } } @@ -471,7 +471,7 @@ CustomRect { isRound: true label.anchors.centerIn: undefined label.anchors.left: left - label.anchors.margins: Tokens.padding.normal + label.anchors.margins: Tokens.padding.small label.anchors.right: right label.anchors.verticalCenter: verticalCenter label.elide: Text.ElideRight diff --git a/Modules/Notifications/Sidebar/Content.qml b/Modules/Notifications/Sidebar/Content.qml index 3f50c67..06f0c5d 100644 --- a/Modules/Notifications/Sidebar/Content.qml +++ b/Modules/Notifications/Sidebar/Content.qml @@ -20,7 +20,7 @@ Item { Layout.fillHeight: true Layout.fillWidth: true color: Colors.tPalette.m3surfaceContainerLow - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small NotifDock { props: root.props @@ -30,7 +30,7 @@ Item { CustomRect { Layout.fillWidth: true - Layout.topMargin: Tokens.padding.normal - layout.spacing + Layout.topMargin: Tokens.padding.small - layout.spacing color: Colors.tPalette.m3outlineVariant implicitHeight: 1 } diff --git a/Modules/Notifications/Sidebar/Notif.qml b/Modules/Notifications/Sidebar/Notif.qml index faebfaa..4f3c13c 100644 --- a/Modules/Notifications/Sidebar/Notif.qml +++ b/Modules/Notifications/Sidebar/Notif.qml @@ -1,30 +1,29 @@ pragma ComponentBehavior: Bound -import qs.Components -import ZShell.Config -import qs.Daemons -import qs.Modules -import Quickshell import QtQuick import QtQuick.Layouts +import Quickshell +import ZShell.Config +import qs.Components import qs.Services +import qs.Daemons CustomRect { id: root - readonly property CustomText body: expandedContent.item?.body ?? null + readonly property CustomText body: (expandedContent.item as ExpandedBody)?.body ?? null required property bool expanded required property NotifServer.Notif modelData - readonly property real nonAnimHeight: expanded ? summary.implicitHeight + expandedContent.implicitHeight + expandedContent.anchors.topMargin + 10 * 2 : summaryHeightMetrics.height + readonly property real nonAnimHeight: expanded ? summary.implicitHeight + expandedContent.implicitHeight + expandedContent.anchors.topMargin + Tokens.padding.medium * 2 : summaryHeightMetrics.height required property Props props - required property var visibilities + required property PersistentProperties visibilities color: { const c = root.modelData?.urgency === "critical" ? Colors.palette.m3secondaryContainer : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2); return expanded ? c : Qt.alpha(c, 0); } implicitHeight: nonAnimHeight - radius: 6 + radius: Tokens.rounding.large - Tokens.padding.small state: expanded ? "expanded" : "" Behavior on implicitHeight { @@ -35,13 +34,13 @@ CustomRect { name: "expanded" PropertyChanges { - compactBody.anchors.margins: 10 - dummySummary.anchors.margins: 10 - expandedContent.anchors.margins: 10 - summary.anchors.margins: 10 + compactBody.anchors.margins: Tokens.padding.medium + dummySummary.anchors.margins: Tokens.padding.medium + expandedContent.anchors.margins: Tokens.padding.medium + summary.anchors.margins: Tokens.padding.medium summary.maximumLineCount: Number.MAX_SAFE_INTEGER - summary.width: root.width - 10 * 2 - timeStr.implicitWidth - 7 - timeStr.anchors.margins: 10 + summary.width: root.width - Tokens.padding.medium * 2 - timeStr.implicitWidth - Tokens.spacing.small + timeStr.anchors.margins: Tokens.padding.medium } } transitions: Transition { @@ -83,7 +82,7 @@ CustomRect { id: compactBody anchors.left: dummySummary.right - anchors.leftMargin: 7 + anchors.leftMargin: Tokens.spacing.small anchors.right: parent.right anchors.top: parent.top shouldBeActive: !root.expanded @@ -92,7 +91,6 @@ CustomRect { color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3outline elide: Text.ElideRight text: String(root.modelData?.body ?? "").replace(/\n/g, " ") - textFormat: Text.StyledText } } @@ -106,7 +104,6 @@ CustomRect { sourceComponent: CustomText { animate: true color: Colors.palette.m3outline - font.pointSize: 11 text: root.modelData?.timeStr ?? "" } } @@ -117,38 +114,37 @@ CustomRect { anchors.left: parent.left anchors.right: parent.right anchors.top: summary.bottom - anchors.topMargin: 7 / 2 + anchors.topMargin: Tokens.spacing.extraSmall shouldBeActive: root.expanded - sourceComponent: ColumnLayout { - readonly property alias body: body - - spacing: 10 - - CustomText { - id: body - - Layout.fillWidth: true - color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3onSurface - text: String(root.modelData?.body ?? "").replace(/(.)\n(?!\n)/g, "$1\n\n") || qsTr("No body given") - textFormat: Text.MarkdownText - wrapMode: Text.WordWrap - - onLinkActivated: link => { - if (Config.launcher.uwsm) - Quickshell.execDetached(["app2unit", "-O", "--", link]); - else - Quickshell.execDetached(["xdg-open", link]); - root.visibilities.sidebar = false; - } - } - - NotifActionList { - notif: root.modelData - } + sourceComponent: ExpandedBody { } } + component ExpandedBody: ColumnLayout { + readonly property alias body: bodyText + + spacing: Tokens.spacing.medium + + CustomText { + id: bodyText + + Layout.fillWidth: true + color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3onSurface + text: String(root.modelData?.body ?? "").replace(/(.)\n(?!\n)/g, "$1\n\n") || qsTr("No body given") + textFormat: Text.MarkdownText + wrapMode: Text.WordWrap + + onLinkActivated: link => { + Qt.openUrlExternally(link); + root.visibilities.sidebar = false; + } + } + + NotifActionList { + notif: root.modelData + } + } component WrappedLoader: Loader { id: comp @@ -157,6 +153,7 @@ CustomRect { active: false opacity: 0 + // Makes the loader load on the same frame shouldBeActive becomes true, which ensures size is set states: State { name: "active" when: comp.shouldBeActive @@ -178,6 +175,7 @@ CustomRect { Anim { property: "opacity" + type: Anim.DefaultEffects } } }, @@ -188,6 +186,7 @@ CustomRect { SequentialAnimation { Anim { property: "opacity" + type: Anim.DefaultEffects } PropertyAction { diff --git a/Modules/Notifications/Sidebar/NotifActionList.qml b/Modules/Notifications/Sidebar/NotifActionList.qml index 04877cd..e70ce18 100644 --- a/Modules/Notifications/Sidebar/NotifActionList.qml +++ b/Modules/Notifications/Sidebar/NotifActionList.qml @@ -1,14 +1,14 @@ pragma ComponentBehavior: Bound -import qs.Components -import ZShell.Config -import qs.Modules -import qs.Daemons -import Quickshell -import Quickshell.Widgets import QtQuick import QtQuick.Layouts +import Quickshell +import Quickshell.Widgets +import ZShell.Config +import qs.Components +import qs.Effects import qs.Services +import qs.Daemons Item { id: root @@ -17,6 +17,76 @@ Item { Layout.fillWidth: true implicitHeight: flickable.contentHeight + layer.enabled: true + layer.smooth: true + + layer.effect: Mask { + maskSource: gradientMask + } + + Item { + id: gradientMask + + anchors.fill: parent + layer.enabled: true + visible: false + + Rectangle { + anchors.fill: parent + + gradient: Gradient { + orientation: Gradient.Horizontal + + GradientStop { + color: Qt.rgba(0, 0, 0, 0) + position: 0 + } + + GradientStop { + color: Qt.rgba(0, 0, 0, 1) + position: 0.1 + } + + GradientStop { + color: Qt.rgba(0, 0, 0, 1) + position: 0.9 + } + + GradientStop { + color: Qt.rgba(0, 0, 0, 0) + position: 1 + } + } + } + + Rectangle { + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.top: parent.top + implicitWidth: parent.width / 2 + opacity: flickable.contentX > 0 ? 0 : 1 + + Behavior on opacity { + Anim { + type: Anim.DefaultEffects + } + } + } + + Rectangle { + anchors.bottom: parent.bottom + anchors.right: parent.right + anchors.top: parent.top + implicitWidth: parent.width / 2 + opacity: flickable.contentX < flickable.contentWidth - parent.width ? 0 : 1 + + Behavior on opacity { + Anim { + type: Anim.DefaultEffects + } + } + } + } CustomFlickable { id: flickable @@ -29,14 +99,14 @@ Item { id: actionList anchors.fill: parent - spacing: 7 + spacing: Tokens.spacing.extraSmall Repeater { model: [ { isClose: true }, - ...(root.notif?.actions ?? ""), + ...(root.notif?.actions ?? []), { isCopy: true } @@ -49,25 +119,27 @@ Item { Layout.fillHeight: true Layout.fillWidth: true - Layout.preferredWidth: implicitWidth + (actionStateLayer.pressed ? 18 : 0) + Layout.preferredWidth: implicitWidth + (actionStateLayer.pressed ? Tokens.padding.large : 0) color: Colors.layer(Colors.palette.m3surfaceContainerHighest, 4) - implicitHeight: actionInner.implicitHeight + 5 * 2 - implicitWidth: actionInner.implicitWidth + 5 * 2 - radius: actionStateLayer.pressed ? 6 / 2 : 6 + implicitHeight: actionInner.implicitHeight + Tokens.padding.small + implicitWidth: actionInner.implicitWidth + Tokens.padding.medium * 2 + radius: actionStateLayer.pressed ? Tokens.rounding.medium / 2 : Tokens.rounding.large Behavior on Layout.preferredWidth { Anim { + type: Anim.FastSpatial } } Behavior on radius { Anim { + type: Anim.FastSpatial } } Timer { id: copyTimer - interval: 1000 + interval: 3000 onTriggered: actionInner.item.text = "content_copy" } @@ -111,6 +183,7 @@ Item { id: iconComp IconImage { + asynchronous: true source: Quickshell.iconPath(action.modelData.identifier) } } diff --git a/Modules/Notifications/Sidebar/NotifDock.qml b/Modules/Notifications/Sidebar/NotifDock.qml index 8133940..5cd56cc 100644 --- a/Modules/Notifications/Sidebar/NotifDock.qml +++ b/Modules/Notifications/Sidebar/NotifDock.qml @@ -18,7 +18,7 @@ Item { required property var visibilities anchors.fill: parent - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small Component.onCompleted: NotifServer.list.forEach(n => n.popup = false) @@ -156,7 +156,7 @@ Item { Loader { active: opacity > 0 anchors.bottom: parent.bottom - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.right: parent.right opacity: root.notifCount > 0 ? 1 : 0 scale: root.notifCount > 0 ? 1 : 0.5 diff --git a/Modules/Notifications/Sidebar/NotifDockList.qml b/Modules/Notifications/Sidebar/NotifDockList.qml index 30dfdf3..597a7ba 100644 --- a/Modules/Notifications/Sidebar/NotifDockList.qml +++ b/Modules/Notifications/Sidebar/NotifDockList.qml @@ -1,12 +1,12 @@ pragma ComponentBehavior: Bound -import Quickshell import QtQuick +import Quickshell import ZShell.Components -import qs.Components import ZShell.Config -import qs.Modules import qs.Daemons +import qs.Components +import qs.Services LazyListView { id: root @@ -55,33 +55,24 @@ LazyListView { Behavior on opacity { Anim { + type: Anim.DefaultEffects } } Behavior on scale { Anim { - duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial } } Behavior on x { Anim { - duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial } } Behavior on y { enabled: notif.LazyListView.ready Anim { - duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial } } - onDoubleClicked: event => { - if (event.button === Qt.LeftButton) - notifInner.toggleExpand(!notifInner.expanded); - } onPositionChanged: event => { if (pressed) { const diffY = event.y - startY; @@ -153,8 +144,6 @@ LazyListView { Anim { id: contentYAnim - duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial property: "contentY" target: root.container } diff --git a/Modules/Notifications/Sidebar/NotifGroup.qml b/Modules/Notifications/Sidebar/NotifGroup.qml index c0475c0..bf6a376 100644 --- a/Modules/Notifications/Sidebar/NotifGroup.qml +++ b/Modules/Notifications/Sidebar/NotifGroup.qml @@ -1,34 +1,40 @@ pragma ComponentBehavior: Bound -import qs.Components -import ZShell.Config -import qs.Modules -import qs.Daemons -import qs.Helpers -import Quickshell -import Quickshell.Services.Notifications import QtQuick import QtQuick.Layouts +import Quickshell +import Quickshell.Services.Notifications +import ZShell.Config +import qs.Components import qs.Services +import qs.Helpers +import qs.Daemons CustomRect { id: root - readonly property string appIcon: notifs.find(n => !n.closed && n.appIcon.length > 0)?.appIcon ?? "" + readonly property list activeNotifs: notifs.filter(n => !n.closed) + readonly property string appIcon: activeNotifs.find(n => n.appIcon.length > 0)?.appIcon ?? "" required property Flickable container readonly property bool expanded: props.expandedNotifs.includes(modelData) - readonly property string image: notifs.find(n => !n.closed && n.image.length > 0)?.image ?? "" + readonly property string image: activeNotifs.find(n => n.image.length > 0)?.image ?? "" required property string modelData readonly property int nonAnimHeight: { - const headerHeight = header.implicitHeight + (root.expanded ? Math.round(7 / 2) : 0); - const columnHeight = headerHeight + notifList.layoutHeight + column.Layout.topMargin + column.Layout.bottomMargin; - return Math.round(Math.max(Config.notifs.sizes.image, columnHeight) + 10 * 2); + const headerHeight = header.implicitHeight + (root.expanded ? Math.round(Tokens.spacing.extraSmall) : 0); + const columnHeight = headerHeight + notifList.layoutHeight; + return Math.round(Math.max(Config.notifs.sizes.image, columnHeight) + Tokens.padding.small * 2); } - readonly property int notifCount: notifs.reduce((acc, n) => n.closed ? acc : acc + 1, 0) + readonly property int notifCount: activeNotifs.length readonly property list notifs: NotifServer.list.filter(n => n.appName === modelData) required property Props props - readonly property int urgency: notifs.some(n => !n.closed && n.urgency === NotificationUrgency.Critical) ? NotificationUrgency.Critical : notifs.some(n => n.urgency === NotificationUrgency.Normal) ? NotificationUrgency.Normal : NotificationUrgency.Low - required property var visibilities + readonly property int urgency: { + if (activeNotifs.find(n => n.urgency === NotificationUrgency.Critical)) + return NotificationUrgency.Critical; + if (activeNotifs.find(n => n.urgency === NotificationUrgency.Normal)) + return NotificationUrgency.Normal; + return NotificationUrgency.Low; + } + required property PersistentProperties visibilities function toggleExpand(expand: bool): void { if (expand) { @@ -43,8 +49,13 @@ CustomRect { anchors.right: parent?.right clip: true color: Colors.layer(Colors.palette.m3surfaceContainer, 2) - implicitHeight: content.implicitHeight + 10 * 2 - radius: Tokens.rounding.smallest + implicitHeight: nonAnimHeight + radius: Tokens.rounding.large + + Behavior on implicitHeight { + Anim { + } + } Component.onDestruction: { if (notifCount === 0 && expanded) @@ -55,10 +66,10 @@ CustomRect { id: content anchors.left: parent.left - anchors.margins: 10 + anchors.margins: Tokens.padding.small anchors.right: parent.right anchors.top: parent.top - spacing: 10 + spacing: Tokens.spacing.medium Item { Layout.alignment: Qt.AlignLeft | Qt.AlignTop @@ -74,6 +85,10 @@ CustomRect { fillMode: Image.PreserveAspectCrop height: Config.notifs.sizes.image source: Qt.resolvedUrl(root.image) + sourceSize: { + const size = Config.notifs.sizes.image * ((QsWindow.window as QsWindow)?.devicePixelRatio ?? 1); + return Qt.size(size, size); + } width: Config.notifs.sizes.image } } @@ -81,7 +96,8 @@ CustomRect { Component { id: appIconComp - CustomIcon { + ColoredIcon { + color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer implicitSize: Math.round(Config.notifs.sizes.image * 0.6) layer.enabled: root.appIcon.endsWith("symbolic") source: Quickshell.iconPath(root.appIcon) @@ -93,8 +109,7 @@ CustomRect { MaterialIcon { color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer - font.pointSize: 18 - text: Icons.getNotifIcon(root.notifs[0]?.summary, root.urgency) + text: Icons.getNotifIcon(root.activeNotifs[0]?.summary, root.urgency) } } @@ -105,6 +120,8 @@ CustomRect { Loader { anchors.centerIn: parent + anchors.verticalCenterOffset: sourceComponent === materialIconComp ? 1 : 0 + asynchronous: true sourceComponent: root.image ? imageComp : root.appIcon ? appIconComp : materialIconComp } } @@ -113,6 +130,7 @@ CustomRect { active: root.appIcon && root.image anchors.bottom: parent.bottom anchors.right: parent.right + asynchronous: true sourceComponent: CustomRect { color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.urgency === NotificationUrgency.Low ? Colors.palette.m3surfaceContainerHigh : Colors.palette.m3secondaryContainer @@ -120,8 +138,9 @@ CustomRect { implicitWidth: Config.notifs.sizes.badge radius: Tokens.rounding.full - CustomIcon { + ColoredIcon { anchors.centerIn: parent + color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer implicitSize: Math.round(Config.notifs.sizes.badge * 0.6) layer.enabled: root.appIcon.endsWith("symbolic") source: Quickshell.iconPath(root.appIcon) @@ -130,75 +149,68 @@ CustomRect { } } - ColumnLayout { + Column { id: column - Layout.bottomMargin: -10 / 2 Layout.fillWidth: true - Layout.topMargin: -10 - spacing: 0 + spacing: root.expanded ? Math.round(Tokens.spacing.extraSmall) : 0 + + Behavior on spacing { + Anim { + } + } RowLayout { id: header - Layout.bottomMargin: root.expanded ? Math.round(7 / 2) : 0 - Layout.fillWidth: true - spacing: 5 - - Behavior on Layout.bottomMargin { - Anim { - } - } + anchors.left: parent.left + anchors.right: parent.right + spacing: Tokens.spacing.small CustomText { Layout.fillWidth: true color: Colors.palette.m3onSurfaceVariant elide: Text.ElideRight - font.pointSize: 11 text: root.modelData } CustomText { animate: true color: Colors.palette.m3outline - font.pointSize: 11 - text: root.notifs.find(n => !n.closed)?.timeStr ?? "" + text: root.activeNotifs[0]?.timeStr ?? "" } CustomRect { color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : Colors.layer(Colors.palette.m3surfaceContainerHigh, 3) - implicitHeight: groupCount.implicitHeight + Tokens.padding.small - implicitWidth: expandBtn.implicitWidth + 7 * 2 + implicitHeight: groupCount.implicitHeight + Tokens.padding.extraSmall + implicitWidth: expandBtn.implicitWidth + Tokens.padding.large radius: Tokens.rounding.full StateLayer { color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurface - onClicked: { - root.toggleExpand(!root.expanded); - } + onClicked: root.toggleExpand(!root.expanded) } RowLayout { id: expandBtn anchors.centerIn: parent - spacing: 7 / 2 + spacing: Tokens.spacing.extraSmall CustomText { id: groupCount - Layout.leftMargin: 10 / 2 + Layout.leftMargin: Tokens.padding.extraSmall / 2 animate: true - color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurface - font.pointSize: 11 + color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurfaceVariant text: root.notifCount } MaterialIcon { - Layout.rightMargin: -10 / 2 - // Layout.topMargin: root.expanded ? -Math.floor(7 / 2) : 0 - color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurface + Layout.rightMargin: -Tokens.padding.extraSmall / 2 + Layout.topMargin: root.expanded ? -Math.floor(Tokens.padding.extraSmall) : 0 + color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurfaceVariant rotation: root.expanded ? 180 : 0 text: "expand_more" diff --git a/Modules/Notifications/Sidebar/NotifGroupList.qml b/Modules/Notifications/Sidebar/NotifGroupList.qml index 822cf0c..904a787 100644 --- a/Modules/Notifications/Sidebar/NotifGroupList.qml +++ b/Modules/Notifications/Sidebar/NotifGroupList.qml @@ -1,13 +1,12 @@ pragma ComponentBehavior: Bound -import Quickshell import QtQuick -import QtQuick.Layouts +import Quickshell import ZShell.Components -import qs.Components import ZShell.Config -import qs.Modules import qs.Daemons +import qs.Components +import qs.Services LazyListView { id: root @@ -20,13 +19,14 @@ LazyListView { signal requestToggleExpand(expand: bool) - Layout.fillWidth: true + anchors.left: parent.left + anchors.right: parent.right asynchronous: true cacheBuffer: 400 implicitHeight: contentHeight readyDelay: 1 removeDuration: Tokens.anim.durations.normal - spacing: Math.round(Tokens.spacing.small / 2) + spacing: Math.round(Tokens.spacing.extraSmall) useCustomViewport: true viewport: { tWatcher.transform; // mapToItem is not reactive so use this to trigger updates @@ -56,6 +56,7 @@ LazyListView { Behavior on opacity { Anim { + type: Anim.DefaultEffects } } Behavior on scale { @@ -75,10 +76,6 @@ LazyListView { Component.onCompleted: modelData?.lock(this) Component.onDestruction: modelData?.unlock(this) - onDoubleClicked: event => { - if (event.button === Qt.LeftButton) - root.requestToggleExpand(!root.expanded); - } onPositionChanged: event => { if (pressed && !root.expanded) { const diffY = event.y - startY; @@ -109,6 +106,7 @@ LazyListView { property: "opacity" target: notif to: 0 + type: Anim.DefaultEffects } Anim { @@ -132,7 +130,7 @@ LazyListView { model: ScriptModel { values: { if (root.expanded) - return root.notifs; + return root.notifs as Array; let count = 0; let i = 0; @@ -143,7 +141,7 @@ LazyListView { i++; } - return root.notifs.slice(0, i); + return root.notifs.slice(0, i) as Array; } } diff --git a/Modules/Notifications/Sidebar/Utils/Cards/Record.qml b/Modules/Notifications/Sidebar/Utils/Cards/Record.qml index 8482efb..6731cbe 100644 --- a/Modules/Notifications/Sidebar/Utils/Cards/Record.qml +++ b/Modules/Notifications/Sidebar/Utils/Cards/Record.qml @@ -17,23 +17,23 @@ CustomRect { Layout.fillWidth: true color: Colors.tPalette.m3surfaceContainer implicitHeight: layout.implicitHeight + layout.anchors.margins * 2 - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small ColumnLayout { id: layout anchors.fill: parent anchors.margins: Tokens.padding.large - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium RowLayout { - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium z: 1 CustomRect { color: Recorder.running ? Colors.palette.m3secondary : Colors.palette.m3secondaryContainer implicitHeight: { - const h = icon.implicitHeight + Tokens.padding.smaller * 2; + const h = icon.implicitHeight + Tokens.padding.small * 2; return h - (h % 2); } implicitWidth: implicitHeight @@ -71,7 +71,7 @@ CustomRect { } } - CustomSplitButton { + SplitButton { active: menuItems.find(m => root.props.recordingMode === m.icon + m.text) ?? menuItems[0] enabled: !Recorder.running menuOnTop: true @@ -134,7 +134,7 @@ CustomRect { ParallelAnimation { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.standardAccel + easing: Tokens.anim.standardAccel property: "scale" target: listOrControls to: 0.7 @@ -142,7 +142,7 @@ CustomRect { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.standardAccel + easing: Tokens.anim.standardAccel property: "opacity" target: listOrControls to: 0 @@ -167,7 +167,7 @@ CustomRect { ParallelAnimation { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.standardDecel + easing: Tokens.anim.standardDecel property: "scale" target: listOrControls to: 1 @@ -175,7 +175,7 @@ CustomRect { Anim { duration: Tokens.anim.durations.small - easing.bezierCurve: Tokens.anim.curves.standardDecel + easing: Tokens.anim.standardDecel property: "opacity" target: listOrControls to: 1 @@ -199,12 +199,12 @@ CustomRect { id: recordingControls RowLayout { - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium CustomRect { color: Recorder.paused ? Colors.palette.m3tertiary : Colors.palette.m3error - implicitHeight: recText.implicitHeight + Tokens.padding.smaller * 2 - implicitWidth: recText.implicitWidth + Tokens.padding.normal * 2 + implicitHeight: recText.implicitHeight + Tokens.padding.small * 2 + implicitWidth: recText.implicitWidth + Tokens.padding.small * 2 radius: Tokens.rounding.full Behavior on implicitWidth { @@ -218,14 +218,14 @@ CustomRect { Anim { duration: Tokens.anim.durations.large - easing.bezierCurve: Tokens.anim.curves.emphasizedAccel + easing: Tokens.anim.emphasizedAccel from: 1 to: 0 } Anim { duration: Tokens.anim.durations.extraLarge - easing.bezierCurve: Tokens.anim.curves.emphasizedDecel + easing: Tokens.anim.emphasizedDecel from: 0 to: 1 } @@ -237,7 +237,7 @@ CustomRect { anchors.centerIn: parent animate: true color: Recorder.paused ? Colors.palette.m3onTertiary : Colors.palette.m3onError - font.family: Appearance.font.family.mono + font.family: Config.appearance.font.family.mono text: Recorder.paused ? "PAUSED" : "REC" } } diff --git a/Modules/Notifications/Sidebar/Utils/Cards/RecordingList.qml b/Modules/Notifications/Sidebar/Utils/Cards/RecordingList.qml index 23a46db..c113f97 100644 --- a/Modules/Notifications/Sidebar/Utils/Cards/RecordingList.qml +++ b/Modules/Notifications/Sidebar/Utils/Cards/RecordingList.qml @@ -26,7 +26,7 @@ ColumnLayout { onClicked: root.props.recordingListExpanded = !root.props.recordingListExpanded RowLayout { - spacing: Tokens.spacing.smaller + spacing: Tokens.spacing.small MaterialIcon { Layout.alignment: Qt.AlignVCenter @@ -57,7 +57,7 @@ ColumnLayout { Layout.fillWidth: true Layout.rightMargin: -Tokens.spacing.small clip: true - implicitHeight: (Tokens.font.size.larger + Tokens.padding.small) * (root.props.recordingListExpanded ? 10 : 3) + implicitHeight: (Tokens.font.size.larger + Tokens.padding.extraSmall) * (root.props.recordingListExpanded ? 10 : 3) CustomScrollBar.vertical: CustomScrollBar { flickable: list @@ -192,7 +192,7 @@ ColumnLayout { } RowLayout { - spacing: Tokens.spacing.smaller + spacing: Tokens.spacing.small MaterialIcon { Layout.alignment: Qt.AlignHCenter diff --git a/Modules/Notifications/Sidebar/Utils/Cards/Toggles.qml b/Modules/Notifications/Sidebar/Utils/Cards/Toggles.qml index f3ee35e..b125f36 100644 --- a/Modules/Notifications/Sidebar/Utils/Cards/Toggles.qml +++ b/Modules/Notifications/Sidebar/Utils/Cards/Toggles.qml @@ -18,7 +18,7 @@ CustomRect { Layout.fillWidth: true color: Colors.tPalette.m3surfaceContainer implicitHeight: layout.implicitHeight + 18 * 2 - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small ButtonRow { id: layout diff --git a/Modules/Notifications/Sidebar/Utils/IdleInhibit.qml b/Modules/Notifications/Sidebar/Utils/IdleInhibit.qml index aee0c48..ae190e1 100644 --- a/Modules/Notifications/Sidebar/Utils/IdleInhibit.qml +++ b/Modules/Notifications/Sidebar/Utils/IdleInhibit.qml @@ -12,7 +12,7 @@ CustomRect { clip: true color: Colors.tPalette.m3surfaceContainer implicitHeight: layout.implicitHeight + (IdleInhibitor.enabled ? activeChip.implicitHeight + activeChip.anchors.topMargin : 0) + 18 * 2 - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small Behavior on implicitHeight { Anim { diff --git a/Modules/Notifications/Sidebar/Utils/Wrapper.qml b/Modules/Notifications/Sidebar/Utils/Wrapper.qml index a829f89..bc8d903 100644 --- a/Modules/Notifications/Sidebar/Utils/Wrapper.qml +++ b/Modules/Notifications/Sidebar/Utils/Wrapper.qml @@ -8,6 +8,7 @@ import QtQuick Item { id: root + property real offsetScale: shouldBeActive ? 0 : 1 required property Item popouts readonly property PersistentProperties props: PersistentProperties { property string recordingConfirmDelete @@ -20,30 +21,27 @@ Item { required property Item sidebar required property var visibilities - property real offsetScale: shouldBeActive ? 0 : 1 - - visible: offsetScale < 1 anchors.bottomMargin: (-implicitHeight - 5) * offsetScale implicitHeight: content.implicitHeight + 8 * 2 implicitWidth: sidebar.width * (1 - sidebar.offsetScale) opacity: 1 - offsetScale + visible: offsetScale < 1 Behavior on offsetScale { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } Loader { id: content + active: root.shouldBeActive || root.visible anchors.left: parent.left anchors.margins: 8 anchors.top: parent.top - active: root.shouldBeActive || root.visible - sourceComponent: Content { implicitWidth: root.implicitWidth - 8 * 2 popouts: root.popouts diff --git a/Modules/Notifications/Sidebar/Wrapper.qml b/Modules/Notifications/Sidebar/Wrapper.qml index f8b9cb6..245247f 100644 --- a/Modules/Notifications/Sidebar/Wrapper.qml +++ b/Modules/Notifications/Sidebar/Wrapper.qml @@ -22,7 +22,7 @@ Item { Behavior on offsetScale { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } @@ -37,7 +37,7 @@ Item { anchors.top: parent.top sourceComponent: Content { - implicitWidth: Config.sidebar.sizes.width - Tokens.padding.smaller * 2 + implicitWidth: Config.sidebar.sizes.width - Tokens.padding.small * 2 props: root.props visibilities: root.visibilities } diff --git a/Modules/Osd/Content.qml b/Modules/Osd/Content.qml index 67fb568..d1b8b35 100644 --- a/Modules/Osd/Content.qml +++ b/Modules/Osd/Content.qml @@ -19,14 +19,14 @@ Item { required property var visibilities required property real volume - implicitHeight: layout.implicitHeight + Tokens.padding.small * 2 - implicitWidth: layout.implicitWidth + Tokens.padding.small * 2 + implicitHeight: layout.implicitHeight + Tokens.padding.smaller * 2 + implicitWidth: layout.implicitWidth + Tokens.padding.smaller * 2 ColumnLayout { id: layout anchors.centerIn: parent - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium // Speaker volume CustomMouseArea { @@ -127,7 +127,7 @@ Item { Behavior on Layout.preferredHeight { Anim { - easing.bezierCurve: Tokens.anim.curves.emphasized + easing: Tokens.anim.emphasized } } Behavior on opacity { diff --git a/Modules/Osd/Wrapper.qml b/Modules/Osd/Wrapper.qml index ec064b5..e879a4c 100644 --- a/Modules/Osd/Wrapper.qml +++ b/Modules/Osd/Wrapper.qml @@ -14,8 +14,11 @@ Item { property bool hovered readonly property Brightness.Monitor monitor: Brightness.getMonitorForScreen(root.screen) property bool muted + property real offsetScale: shouldBeActive ? 0 : 1 required property ShellScreen screen readonly property bool shouldBeActive: visibilities.osd && Config.osd.enabled && !(visibilities.utilities && Config.utilities.enabled) + property real sidebarOffset: sidebarOrSessionVisible ? 12 : 0 + required property bool sidebarOrSessionVisible property bool sourceMuted property real sourceVolume required property var visibilities @@ -26,20 +29,16 @@ Item { timer.restart(); } - property real offsetScale: shouldBeActive ? 0 : 1 - required property bool sidebarOrSessionVisible - property real sidebarOffset: sidebarOrSessionVisible ? 12 : 0 - - visible: offsetScale < 1 anchors.rightMargin: (-implicitWidth - 5 - sidebarOffset) * offsetScale - implicitWidth: content.implicitWidth implicitHeight: content.implicitHeight + implicitWidth: content.implicitWidth opacity: 1 - offsetScale + visible: offsetScale < 1 Behavior on offsetScale { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } @@ -98,11 +97,10 @@ Item { Loader { id: content + active: root.shouldBeActive || root.visible anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter - active: root.shouldBeActive || root.visible - sourceComponent: Content { brightness: root.brightness monitor: root.monitor diff --git a/Modules/Polkit/Polkit.qml b/Modules/Polkit/Polkit.qml index 6c40cdc..d6e749a 100644 --- a/Modules/Polkit/Polkit.qml +++ b/Modules/Polkit/Polkit.qml @@ -158,7 +158,7 @@ Scope { background: CustomRect { color: (polkitAgent.flow?.failed && passInput.text === "") ? Colors.palette.m3error : Colors.tPalette.m3surfaceVariant implicitHeight: 40 - radius: Tokens.rounding.smallest + radius: Tokens.rounding.small } onAccepted: okButton.clicked() @@ -263,7 +263,7 @@ Scope { ButtonRow { Layout.alignment: Qt.AlignRight - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium IconTextButton { id: okButton diff --git a/Modules/Resources/Cards/BatteryTank.qml b/Modules/Resources/Cards/BatteryTank.qml index 04352cf..637851d 100644 --- a/Modules/Resources/Cards/BatteryTank.qml +++ b/Modules/Resources/Cards/BatteryTank.qml @@ -12,7 +12,7 @@ CustomClippingRect { color: Colors.palette.m3secondaryContainer implicitWidth: 120 - radius: Tokens.rounding.large + radius: Tokens.rounding.largeIncreased Behavior on animPerc { Anim { @@ -24,7 +24,7 @@ CustomClippingRect { accentColor: Colors.palette.m3primary anchors.fill: parent - anchors.margins: Tokens.padding.larger + anchors.margins: Tokens.padding.small subTextColor: Colors.palette.m3onSurfaceVariant textColor: Colors.palette.m3onSurface } @@ -102,7 +102,7 @@ CustomClippingRect { RowLayout { Layout.alignment: Qt.AlignRight - Layout.bottomMargin: -Tokens.padding.small + Layout.bottomMargin: -Tokens.padding.extraSmall Layout.rightMargin: -Tokens.padding.extraSmall Layout.topMargin: -Tokens.padding.extraSmall spacing: Tokens.spacing.extraSmall diff --git a/Modules/Resources/Cards/HeroCard.qml b/Modules/Resources/Cards/HeroCard.qml index 0bfd785..668a329 100644 --- a/Modules/Resources/Cards/HeroCard.qml +++ b/Modules/Resources/Cards/HeroCard.qml @@ -15,9 +15,9 @@ CustomClippingRect { required property real usage color: Colors.tPalette.m3surfaceContainer - implicitHeight: Math.max(tempProg.implicitHeight + detailsRow.implicitHeight + Tokens.spacing.large, usageColumn.implicitHeight + usageLabel.implicitHeight) + Tokens.padding.large * 2 + implicitHeight: Math.max(tempProg.implicitHeight + detailsRow.implicitHeight + Tokens.spacing.largeIncreased, usageColumn.implicitHeight + usageLabel.implicitHeight) + Tokens.padding.large * 2 implicitWidth: 450 - radius: Tokens.rounding.large - Tokens.padding.normal + radius: Tokens.rounding.largeIncreased CustomRect { anchors.bottom: parent.bottom @@ -39,7 +39,7 @@ CustomClippingRect { anchors.margins: Tokens.padding.large anchors.top: parent.top fgColor: root.accent - implicitSize: Math.max(icon.implicitWidth, icon.implicitHeight) + Tokens.padding.larger * 2 + implicitSize: Math.max(icon.implicitWidth, icon.implicitHeight) + Tokens.padding.small * 2 spacing: Tokens.spacing.extraSmall strokeWidth: Tokens.padding.extraSmall value: root.usage @@ -54,13 +54,14 @@ CustomClippingRect { anchors.centerIn: parent color: root.accent + font.pointSize: Tokens.font.size.large text: root.icon } } ColumnLayout { anchors.left: tempProg.right - anchors.margins: Tokens.spacing.large + anchors.margins: Tokens.spacing.largeIncreased anchors.right: usageColumn.left anchors.verticalCenter: tempProg.verticalCenter spacing: Tokens.spacing.extraSmall @@ -104,7 +105,7 @@ CustomClippingRect { CustomProgressBar { fgColor: root.accent - implicitHeight: Tokens.padding.small + implicitHeight: Tokens.padding.extraSmall indeterminate: isNaN(root.usage) || isNaN(root.temperature) value: root.temperature / 100 } diff --git a/Modules/Resources/Cards/MemoryCard.qml b/Modules/Resources/Cards/MemoryCard.qml index a96a67c..168663d 100644 --- a/Modules/Resources/Cards/MemoryCard.qml +++ b/Modules/Resources/Cards/MemoryCard.qml @@ -14,7 +14,7 @@ CustomRect { color: Colors.tPalette.m3surfaceContainer implicitHeight: layout.implicitHeight + Tokens.padding.large * 2 implicitWidth: layout.implicitWidth + Tokens.padding.extraLargeIncreased * 2 - radius: Tokens.rounding.medium + radius: Tokens.rounding.largeIncreased ServiceRef { service: Memory @@ -43,7 +43,7 @@ CustomRect { CircularProgress { Layout.alignment: Qt.AlignHCenter - Layout.topMargin: Tokens.spacing.large + Layout.topMargin: Tokens.spacing.largeIncreased fgColor: root.accent implicitSize: usageColumn.implicitHeight + thickness + Tokens.padding.largeIncreased * 2 startAngle: -225 diff --git a/Modules/Resources/Cards/NetworkCard.qml b/Modules/Resources/Cards/NetworkCard.qml index e70d950..fd4b3dc 100644 --- a/Modules/Resources/Cards/NetworkCard.qml +++ b/Modules/Resources/Cards/NetworkCard.qml @@ -12,7 +12,7 @@ CustomRect { color: Colors.tPalette.m3surfaceContainer implicitHeight: 220 implicitWidth: 300 - radius: Tokens.rounding.large - Tokens.padding.normal + radius: Tokens.rounding.largeIncreased Ref { service: NetworkUsage @@ -21,7 +21,7 @@ CustomRect { ColumnLayout { id: layout - anchors.bottomMargin: Tokens.padding.larger + anchors.bottomMargin: Tokens.padding.small anchors.fill: parent anchors.margins: Tokens.padding.large spacing: 0 @@ -43,7 +43,7 @@ CustomRect { Layout.bottomMargin: Tokens.spacing.small Layout.fillHeight: true Layout.fillWidth: true - Layout.topMargin: Tokens.spacing.larger + Layout.topMargin: Tokens.spacing.large SparklineItem { id: sparkline diff --git a/Modules/Resources/Cards/StorageCard.qml b/Modules/Resources/Cards/StorageCard.qml index a0a6927..238bed7 100644 --- a/Modules/Resources/Cards/StorageCard.qml +++ b/Modules/Resources/Cards/StorageCard.qml @@ -15,7 +15,7 @@ CustomRect { color: Colors.tPalette.m3surfaceContainer implicitHeight: layout.implicitHeight + Tokens.padding.large * 2 implicitWidth: layout.implicitWidth + layout.anchors.margins * 2 - radius: Tokens.rounding.large - Tokens.padding.normal + radius: Tokens.rounding.largeIncreased ServiceRef { service: Storage @@ -25,7 +25,6 @@ CustomRect { id: layout anchors.left: parent.left - anchors.margins: Tokens.padding.small anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter spacing: 0 @@ -34,7 +33,7 @@ CustomRect { id: row Layout.alignment: Qt.AlignHCenter - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased CircularProgress { fgColor: root.accent @@ -57,7 +56,7 @@ CustomRect { MaterialIcon { Layout.alignment: Qt.AlignHCenter color: root.accent - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.large text: "hard_drive" } @@ -96,7 +95,7 @@ CustomRect { } } - CustomSplitButton { + SplitButton { Layout.alignment: Qt.AlignHCenter active: menuItems.find(m => m.modelData === Storage.primaryDisk) ?? menuItems[0] ?? null enabled: Storage.disks.length @@ -104,7 +103,7 @@ CustomRect { fallbackText: qsTr("No disks") menuItems: disks.instances minLeftWidth: row.implicitWidth * 0.6 - type: CustomSplitButton.Tonal + type: SplitButton.Tonal menu.onItemSelected: item => Storage.manualPrimaryDisk = (item as DiskItem).modelData diff --git a/Modules/Resources/Cards/VramCard.qml b/Modules/Resources/Cards/VramCard.qml index 4533a34..789bc39 100644 --- a/Modules/Resources/Cards/VramCard.qml +++ b/Modules/Resources/Cards/VramCard.qml @@ -14,7 +14,7 @@ CustomRect { color: Colors.tPalette.m3surfaceContainer implicitHeight: layout.implicitHeight + Tokens.padding.large * 2 implicitWidth: layout.implicitWidth + Tokens.padding.extraLargeIncreased - radius: Tokens.rounding.medium + radius: Tokens.rounding.largeIncreased ServiceRef { service: Gpu @@ -45,7 +45,7 @@ CustomRect { id: circularIndicator Layout.alignment: Qt.AlignHCenter - Layout.topMargin: Tokens.spacing.large + Layout.topMargin: Tokens.spacing.largeIncreased fgColor: root.accent implicitSize: usageColumn.implicitHeight + thickness + Tokens.padding.largeIncreased * 2 startAngle: -225 diff --git a/Modules/Resources/Content.qml b/Modules/Resources/Content.qml index 8a4ba57..53909d5 100644 --- a/Modules/Resources/Content.qml +++ b/Modules/Resources/Content.qml @@ -11,26 +11,26 @@ Item { required property Wrapper wrapper - implicitHeight: content.implicitHeight + Tokens.padding.normal * 2 + implicitHeight: content.implicitHeight + Tokens.padding.small * 2 implicitWidth: content.implicitWidth RowLayout { id: content anchors.left: parent.left - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: Tokens.spacing.larger + spacing: Tokens.spacing.large ColumnLayout { id: mainColumn Layout.fillWidth: true - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium RowLayout { - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium visible: cpuCard.active || gpuCard.active WrappedLoader { @@ -73,7 +73,7 @@ Item { } RowLayout { - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium visible: storageCard.active || memoryCard.active || vramCard.active || networkCard1.active WrappedLoader { diff --git a/Modules/Resources/Wrapper.qml b/Modules/Resources/Wrapper.qml index 52f4c1b..9004694 100644 --- a/Modules/Resources/Wrapper.qml +++ b/Modules/Resources/Wrapper.qml @@ -29,7 +29,7 @@ Item { Behavior on offsetScale { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } diff --git a/Modules/Settings/Common/AudioDeviceList.qml b/Modules/Settings/Common/AudioDeviceList.qml index 541b4bf..febdd2a 100644 --- a/Modules/Settings/Common/AudioDeviceList.qml +++ b/Modules/Settings/Common/AudioDeviceList.qml @@ -32,8 +32,8 @@ ItemList { implicitHeight: deviceLayout.implicitHeight + deviceLayout.anchors.margins * 2 StateLayer { - bottomLeftRadius: device.index === root?.list.count - 1 ? Tokens.rounding.large : radius - bottomRightRadius: device.index === root?.list.count - 1 ? Tokens.rounding.large : radius + bottomLeftRadius: device.index === root?.list.count - 1 ? Tokens.rounding.largeIncreased : radius + bottomRightRadius: device.index === root?.list.count - 1 ? Tokens.rounding.largeIncreased : radius radius: Tokens.rounding.extraSmall onClicked: root.selected(device.modelData) @@ -46,11 +46,11 @@ ItemList { anchors.leftMargin: Tokens.padding.largeIncreased anchors.margins: Tokens.padding.large anchors.rightMargin: Tokens.padding.largeIncreased - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium CustomRect { color: device.active ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer - implicitHeight: devIcon.implicitHeight + Tokens.padding.normal * 2 + implicitHeight: devIcon.implicitHeight + Tokens.padding.small * 2 implicitWidth: implicitHeight radius: Tokens.rounding.full diff --git a/Modules/Settings/Common/BlobPopup.qml b/Modules/Settings/Common/BlobPopup.qml index a80904d..1978d10 100644 --- a/Modules/Settings/Common/BlobPopup.qml +++ b/Modules/Settings/Common/BlobPopup.qml @@ -32,7 +32,7 @@ Item { color: Colors.palette.m3surfaceContainerHighest cornerFill: false - smoothing: Tokens.rounding.medium + smoothing: Tokens.rounding.largeIncreased Behavior on color { CAnim { @@ -46,7 +46,7 @@ Item { anchors.fill: parent anchors.margins: (!(btn.pressed || root.pressOverride) && (btn.containsMouse || root.hoverOverride) ? -Tokens.padding.extraSmall : 0) + (root.open ? -Tokens.padding.extraSmall : 0) group: blobGroup - radius: root.open ? Tokens.rounding.large : Tokens.rounding.medium + radius: root.open ? Tokens.rounding.largeIncreased : Tokens.rounding.largeIncreased Behavior on anchors.margins { Anim { @@ -68,7 +68,7 @@ Item { group: blobGroup implicitHeight: parent.height implicitWidth: parent.width - radius: Tokens.rounding.small + Tokens.padding.small + radius: Tokens.rounding.small + Tokens.padding.extraSmall states: State { name: "open" @@ -89,7 +89,7 @@ Item { Anim { duration: Tokens.anim.durations.expressiveFastEffects - easing.bezierCurve: Tokens.anim.curves.expressiveFastEffects + easing: Tokens.anim.expressiveFastEffects properties: "topMargin,implicitHeight" } @@ -122,7 +122,7 @@ Item { anchors.centerIn: parent color: Colors.palette.m3onSurfaceVariant - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: "view_apps" } } diff --git a/Modules/Settings/Common/ConnectedRect.qml b/Modules/Settings/Common/ConnectedRect.qml index ec422f9..12449af 100644 --- a/Modules/Settings/Common/ConnectedRect.qml +++ b/Modules/Settings/Common/ConnectedRect.qml @@ -14,12 +14,12 @@ CustomRect { flash.restart(); } - bottomLeftRadius: last ? Tokens.rounding.large : Tokens.rounding.extraSmall - bottomRightRadius: last ? Tokens.rounding.large : Tokens.rounding.extraSmall + bottomLeftRadius: last ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall + bottomRightRadius: last ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall color: Colors.tPalette.m3surfaceContainer opacity: enabled && parent.enabled ? 1 : 0.5 - topLeftRadius: first ? Tokens.rounding.large : Tokens.rounding.extraSmall - topRightRadius: first ? Tokens.rounding.large : Tokens.rounding.extraSmall + topLeftRadius: first ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall + topRightRadius: first ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall Behavior on opacity { Anim { diff --git a/Modules/Settings/Common/DialogRowButton.qml b/Modules/Settings/Common/DialogRowButton.qml index e5f7fe9..1d4d547 100644 --- a/Modules/Settings/Common/DialogRowButton.qml +++ b/Modules/Settings/Common/DialogRowButton.qml @@ -73,9 +73,9 @@ Item { PropertyChanges { backdrop.enabled: true - dialogBg.bottomLeftRadius: Tokens.rounding.large - dialogBg.bottomRightRadius: Tokens.rounding.large - dialogBg.radius: Tokens.rounding.large + dialogBg.bottomLeftRadius: Tokens.rounding.largeIncreased + dialogBg.bottomRightRadius: Tokens.rounding.largeIncreased + dialogBg.radius: Tokens.rounding.largeIncreased dialogContent.opacity: 1 dialogWrapper.height: root.openHeight dialogWrapper.width: root.openWidth @@ -131,8 +131,8 @@ Item { id: dialogBg anchors.fill: parent - bottomLeftRadius: Tokens.rounding.large - bottomRightRadius: Tokens.rounding.large + bottomLeftRadius: Tokens.rounding.largeIncreased + bottomRightRadius: Tokens.rounding.largeIncreased deformScale: 0 group: blobGroup opacity: blobGroup.color.a * (root.enabled ? 1 : 0.5) @@ -181,7 +181,7 @@ Item { Loader { Layout.fillWidth: true - Layout.topMargin: Tokens.spacing.normal + Layout.topMargin: Tokens.spacing.medium active: root.separateContent sourceComponent: CustomRect { @@ -199,7 +199,7 @@ Item { } Loader { - Layout.bottomMargin: Tokens.spacing.normal + Layout.bottomMargin: Tokens.spacing.medium Layout.fillWidth: true active: root.separateContent @@ -218,7 +218,7 @@ Item { isRound: true text: qsTr("Cancel") type: TextButton.Text - verticalPadding: Tokens.padding.normal + verticalPadding: Tokens.padding.small onClicked: { root.cancelled(); @@ -232,7 +232,7 @@ Item { isRound: true text: root.acceptLabel type: TextButton.Text - verticalPadding: Tokens.padding.normal + verticalPadding: Tokens.padding.small onClicked: { root.accepted(); diff --git a/Modules/Settings/Common/DialogSelectButton.qml b/Modules/Settings/Common/DialogSelectButton.qml index 6a60648..3cce148 100644 --- a/Modules/Settings/Common/DialogSelectButton.qml +++ b/Modules/Settings/Common/DialogSelectButton.qml @@ -20,7 +20,7 @@ DialogRowButton { } acceptAllowed: !!selectedItem - horizontalContentMargin: -Tokens.padding.small + horizontalContentMargin: -Tokens.padding.extraSmall separateContent: true content: Component { @@ -40,8 +40,8 @@ DialogRowButton { anchors.margins: 1 // Gets cut off for some reason without this anchors.right: ListView.view.contentItem.right color: Qt.alpha(Colors.palette.m3tertiaryContainer, selected ? 1 : 0) - implicitHeight: label.implicitHeight + Tokens.padding.normal * 2 - radius: stateLayer.pressed ? Tokens.rounding.extraSmall : selected ? Tokens.rounding.large : Tokens.rounding.normal + implicitHeight: label.implicitHeight + Tokens.padding.small * 2 + radius: stateLayer.pressed ? Tokens.rounding.extraSmall : selected ? Tokens.rounding.largeIncreased : Tokens.rounding.medium Behavior on radius { Anim { @@ -61,7 +61,7 @@ DialogRowButton { anchors.left: parent.left anchors.margins: Tokens.padding.large anchors.right: item.selected ? checkIcon.left : parent.right - anchors.rightMargin: item.selected ? Tokens.spacing.normal : anchors.margins + anchors.rightMargin: item.selected ? Tokens.spacing.medium : anchors.margins anchors.verticalCenter: parent.verticalCenter color: item.selected ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface elide: Text.ElideRight @@ -76,7 +76,7 @@ DialogRowButton { anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter color: Colors.palette.m3onTertiaryContainer - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal opacity: item.selected ? 1 : 0 text: "check" diff --git a/Modules/Settings/Common/InfoRow.qml b/Modules/Settings/Common/InfoRow.qml index a635e73..0cec60b 100644 --- a/Modules/Settings/Common/InfoRow.qml +++ b/Modules/Settings/Common/InfoRow.qml @@ -34,7 +34,7 @@ ConnectedRect { anchors.fill: parent anchors.leftMargin: Tokens.padding.largeIncreased - anchors.margins: Tokens.padding.larger + anchors.margins: Tokens.padding.small anchors.rightMargin: Tokens.padding.largeIncreased spacing: Tokens.spacing.small diff --git a/Modules/Settings/Common/ListEditor.qml b/Modules/Settings/Common/ListEditor.qml index a380e94..e9e7705 100644 --- a/Modules/Settings/Common/ListEditor.qml +++ b/Modules/Settings/Common/ListEditor.qml @@ -94,7 +94,7 @@ ListView { property int pressIndex property point pressPos property real radiusLerpProg - property real topRadius: root?.first && DelegateModel.itemsIndex === 0 ? Tokens.rounding.large : Tokens.rounding.extraSmall + property real topRadius: root?.first && DelegateModel.itemsIndex === 0 ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall function lerpRadius(a: real, b: real): real { return a + (b - a) * radiusLerpProg; @@ -238,9 +238,9 @@ ListView { anchors.fill: parent color: Colors.tPalette.m3surfaceContainer - radius: item.lerpRadius(Tokens.rounding.extraSmall, Tokens.rounding.large) - topLeftRadius: item.lerpRadius(item.topRadius, Tokens.rounding.large) - topRightRadius: item.lerpRadius(item.topRadius, Tokens.rounding.large) + radius: item.lerpRadius(Tokens.rounding.extraSmall, Tokens.rounding.largeIncreased) + topLeftRadius: item.lerpRadius(item.topRadius, Tokens.rounding.largeIncreased) + topRightRadius: item.lerpRadius(item.topRadius, Tokens.rounding.largeIncreased) } MouseArea { @@ -272,15 +272,15 @@ ListView { anchors.fill: parent anchors.leftMargin: Tokens.padding.largeIncreased - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.rightMargin: Tokens.padding.large - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium MaterialIcon { id: dragIcon color: Qt.alpha(Colors.palette.m3onSurfaceVariant, enabledSwitch.checked ? 1 : 0.5) - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: "drag_indicator" } @@ -298,7 +298,7 @@ ListView { id: enabledSwitch checked: root.toggledFor(item.modelData) - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal onToggled: root.itemToggled(item.DelegateModel.itemsIndex, checked) } diff --git a/Modules/Settings/Common/NavRow.qml b/Modules/Settings/Common/NavRow.qml index 667358e..a496c53 100644 --- a/Modules/Settings/Common/NavRow.qml +++ b/Modules/Settings/Common/NavRow.qml @@ -27,9 +27,9 @@ ConnectedRect { anchors.fill: parent anchors.leftMargin: Tokens.padding.largeIncreased - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.rightMargin: Tokens.padding.largeIncreased - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium MaterialIcon { id: icon @@ -64,7 +64,7 @@ ConnectedRect { MaterialIcon { color: Colors.palette.m3onSurfaceVariant - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: "chevron_right" } } diff --git a/Modules/Settings/Common/OverlayRow.qml b/Modules/Settings/Common/OverlayRow.qml index abe0342..f7a6dae 100644 --- a/Modules/Settings/Common/OverlayRow.qml +++ b/Modules/Settings/Common/OverlayRow.qml @@ -13,7 +13,7 @@ ConnectedRect { required property Component popup property alias subtext: subtext.text property alias text: text.text - property int verticalPadding: Tokens.padding.normal + property int verticalPadding: Tokens.padding.small signal clicked(checked: bool) @@ -26,7 +26,7 @@ ConnectedRect { anchors.left: parent.left anchors.leftMargin: root.horizontalPadding anchors.right: icon.left - anchors.rightMargin: Tokens.padding.normal + anchors.rightMargin: Tokens.padding.small anchors.verticalCenter: parent.verticalCenter CustomText { @@ -48,7 +48,7 @@ ConnectedRect { id: icon anchors.right: switchButton.left - anchors.rightMargin: Tokens.spacing.normal + anchors.rightMargin: Tokens.spacing.medium anchors.verticalCenter: parent.verticalCenter text: "open_in_new" } diff --git a/Modules/Settings/Common/PageBase.qml b/Modules/Settings/Common/PageBase.qml index 4bceec7..5b4200c 100644 --- a/Modules/Settings/Common/PageBase.qml +++ b/Modules/Settings/Common/PageBase.qml @@ -66,7 +66,7 @@ ColumnLayout { return true; } - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased Component.onCompleted: applySearchAnchor() @@ -121,7 +121,7 @@ ColumnLayout { RowLayout { id: header - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased Loader { active: root.isSubPage diff --git a/Modules/Settings/Common/PopupRow.qml b/Modules/Settings/Common/PopupRow.qml index 50fff3f..3e7394f 100644 --- a/Modules/Settings/Common/PopupRow.qml +++ b/Modules/Settings/Common/PopupRow.qml @@ -32,9 +32,9 @@ ConnectedRect { anchors.fill: parent anchors.leftMargin: Tokens.padding.largeIncreased - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.rightMargin: Tokens.padding.largeIncreased - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium MaterialIcon { id: icon @@ -105,7 +105,7 @@ ConnectedRect { color: open || hovered || stateLayer.containsMouse ? Colors.palette.m3secondaryContainer : Colors.palette.m3surfaceContainerHighest content: root.content hoverOverride: stateLayer.containsMouse - padding: Tokens.padding.small + padding: Tokens.padding.extraSmall pressOverride: stateLayer.pressed x: { tWatcher.transform; diff --git a/Modules/Settings/Common/RowButton.qml b/Modules/Settings/Common/RowButton.qml index e98f959..5d2953d 100644 --- a/Modules/Settings/Common/RowButton.qml +++ b/Modules/Settings/Common/RowButton.qml @@ -21,7 +21,7 @@ ConnectedRect { signal clicked(event: MouseEvent) Layout.fillWidth: true - implicitHeight: row.implicitHeight + Tokens.padding.normal * 2 + implicitHeight: row.implicitHeight + Tokens.padding.small * 2 StateLayer { id: stateLayer @@ -37,7 +37,7 @@ ConnectedRect { anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter opacity: root.enabled ? 1 : 0.5 - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium Behavior on opacity { Anim { @@ -49,7 +49,7 @@ ConnectedRect { color: Colors.palette.m3onSurfaceVariant fill: 1 - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal } Column { @@ -86,7 +86,7 @@ ConnectedRect { sourceComponent: MaterialIcon { color: Colors.palette.m3onSurfaceVariant - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: root.trailingIcon } } diff --git a/Modules/Settings/Common/SectionHeader.qml b/Modules/Settings/Common/SectionHeader.qml index 4218032..0433f65 100644 --- a/Modules/Settings/Common/SectionHeader.qml +++ b/Modules/Settings/Common/SectionHeader.qml @@ -9,9 +9,9 @@ CustomText { Layout.bottomMargin: Tokens.spacing.extraSmall Layout.fillWidth: true - Layout.leftMargin: Tokens.padding.small - Layout.topMargin: first ? 0 : Tokens.spacing.large - ((parent as ColumnLayout).spacing ?? 0) + Layout.leftMargin: Tokens.padding.extraSmall + Layout.topMargin: first ? 0 : Tokens.spacing.largeIncreased - ((parent as ColumnLayout).spacing ?? 0) color: Colors.palette.m3onSurfaceVariant elide: Text.ElideRight - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal } diff --git a/Modules/Settings/Common/SelectRow.qml b/Modules/Settings/Common/SelectRow.qml index 01fa3b7..0689182 100644 --- a/Modules/Settings/Common/SelectRow.qml +++ b/Modules/Settings/Common/SelectRow.qml @@ -27,7 +27,7 @@ ConnectedRect { anchors.fill: parent anchors.leftMargin: Tokens.padding.largeIncreased - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.rightMargin: Tokens.padding.largeIncreased spacing: Tokens.spacing.small @@ -53,10 +53,10 @@ ConnectedRect { } } - CustomSplitButton { + SplitButton { id: splitButton - type: CustomSplitButton.Tonal + type: SplitButton.Tonal menu.onItemSelected: item => root.selected(item) stateLayer.onClicked: splitButton.expanded = !splitButton.expanded diff --git a/Modules/Settings/Common/SliderRow.qml b/Modules/Settings/Common/SliderRow.qml index 237f300..d4669ea 100644 --- a/Modules/Settings/Common/SliderRow.qml +++ b/Modules/Settings/Common/SliderRow.qml @@ -61,7 +61,7 @@ ConnectedRect { } Layout.fillWidth: true - implicitHeight: Tokens.padding.larger * 3 + implicitHeight: Tokens.padding.medium * 3 CustomSlider { id: slider diff --git a/Modules/Settings/Common/SpinRow.qml b/Modules/Settings/Common/SpinRow.qml index 7530891..93c9d13 100644 --- a/Modules/Settings/Common/SpinRow.qml +++ b/Modules/Settings/Common/SpinRow.qml @@ -26,7 +26,7 @@ ConnectedRect { anchors.fill: parent anchors.leftMargin: Tokens.padding.largeIncreased - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.rightMargin: Tokens.padding.largeIncreased spacing: Tokens.spacing.small diff --git a/Modules/Settings/Common/StackPage.qml b/Modules/Settings/Common/StackPage.qml index 45fb1b6..3c2b145 100644 --- a/Modules/Settings/Common/StackPage.qml +++ b/Modules/Settings/Common/StackPage.qml @@ -33,7 +33,7 @@ StackView { } PauseAnimation { - duration: Tokens.anim.durations.expressiveEffects + duration: Tokens.anim.durations.expressiveDefaultEffects } ParallelAnimation { @@ -67,7 +67,7 @@ StackView { } PauseAnimation { - duration: Tokens.anim.durations.expressiveEffects + duration: Tokens.anim.durations.expressiveDefaultEffects } ParallelAnimation { diff --git a/Modules/Settings/Common/TimeInput.qml b/Modules/Settings/Common/TimeInput.qml index 9e6044d..05e8052 100644 --- a/Modules/Settings/Common/TimeInput.qml +++ b/Modules/Settings/Common/TimeInput.qml @@ -31,7 +31,7 @@ CustomClippingRect { color: Colors.palette.m3surfaceContainer implicitHeight: column.implicitHeight + column.anchors.margins * 2 + buttonRow.implicitHeight + buttonRow.anchors.topMargin implicitWidth: column.implicitWidth + column.anchors.margins * 2 - radius: Tokens.rounding.large + radius: Tokens.rounding.largeIncreased ColumnLayout { id: column @@ -40,7 +40,7 @@ CustomClippingRect { anchors.margins: Tokens.padding.largeIncreased anchors.right: parent.right anchors.top: parent.top - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium CustomText { text: qsTr("Select time") @@ -281,7 +281,7 @@ CustomClippingRect { Item { id: spacer - Layout.preferredWidth: Tokens.spacing.large + Layout.preferredWidth: Tokens.spacing.largeIncreased } CustomRect { @@ -537,7 +537,7 @@ CustomClippingRect { anchors.margins: Tokens.padding.largeIncreased anchors.right: parent.right anchors.top: column.bottom - anchors.topMargin: Tokens.spacing.normal + anchors.topMargin: Tokens.spacing.medium Item { id: buttonSpacer @@ -546,7 +546,7 @@ CustomClippingRect { } ButtonRow { - spacing: Tokens.spacing.normal + spacing: Tokens.spacing.medium IconTextButton { font.pointSize: Tokens.font.size.normal diff --git a/Modules/Settings/Common/ToggleRow.qml b/Modules/Settings/Common/ToggleRow.qml index ea4252b..09f22f5 100644 --- a/Modules/Settings/Common/ToggleRow.qml +++ b/Modules/Settings/Common/ToggleRow.qml @@ -25,7 +25,7 @@ CustomSwitch { indicator.anchors.right: right indicator.anchors.rightMargin: root.horizontalPadding indicator.anchors.verticalCenter: verticalCenter - verticalPadding: Tokens.padding.normal + verticalPadding: Tokens.padding.small background: ConnectedRect { id: bg @@ -40,7 +40,7 @@ CustomSwitch { anchors.left: parent.left anchors.leftMargin: root.horizontalPadding anchors.right: root.indicator.left - anchors.rightMargin: Tokens.spacing.normal + anchors.rightMargin: Tokens.spacing.medium implicitHeight: column.implicitHeight implicitWidth: column.implicitWidth diff --git a/Modules/Settings/Common/WallItem.qml b/Modules/Settings/Common/WallItem.qml index c9356ac..33c80fa 100644 --- a/Modules/Settings/Common/WallItem.qml +++ b/Modules/Settings/Common/WallItem.qml @@ -31,7 +31,7 @@ Item { Layout.fillWidth: true color: Colors.tPalette.m3surfaceContainer implicitHeight: width - radius: Tokens.rounding.large + radius: Tokens.rounding.largeIncreased Loader { active: opacity > 0 diff --git a/Modules/Settings/Common/WallpaperCropper.qml b/Modules/Settings/Common/WallpaperCropper.qml index a7b70c7..b2fea36 100644 --- a/Modules/Settings/Common/WallpaperCropper.qml +++ b/Modules/Settings/Common/WallpaperCropper.qml @@ -100,7 +100,7 @@ Item { } IconButton { - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.right: parent.right anchors.top: parent.top icon: "check" @@ -127,7 +127,7 @@ Item { id: screenSelector anchors.bottom: scaledImg.top - anchors.bottomMargin: Tokens.spacing.normal + anchors.bottomMargin: Tokens.spacing.medium anchors.left: parent.left anchors.leftMargin: Tokens.padding.extraLarge * 2 anchors.right: parent.right @@ -167,11 +167,11 @@ Item { id: zoomSlider Layout.fillWidth: true - Layout.leftMargin: Tokens.padding.normal - Layout.preferredHeight: Tokens.padding.larger * 3 - Layout.rightMargin: Tokens.padding.normal + Layout.leftMargin: Tokens.padding.small + Layout.preferredHeight: Tokens.padding.medium * 3 + Layout.rightMargin: Tokens.padding.small from: 1.0 - implicitHeight: Tokens.padding.larger * 3 + implicitHeight: Tokens.padding.small * 3 insetIcon: "crop" to: 5.0 value: cropRectLoader.item ? cropRectLoader.item.zoom : 1.0 @@ -190,11 +190,11 @@ Item { property real monitorScale: 1.0 anchors.bottom: sliderLayout.top - anchors.bottomMargin: Tokens.spacing.normal + anchors.bottomMargin: Tokens.spacing.medium anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top - anchors.topMargin: wrapper.buttonRowHeight + Tokens.spacing.normal + anchors.topMargin: wrapper.buttonRowHeight + Tokens.spacing.medium // anchors.top: screenSelector.bottom asynchronous: true fillMode: Image.PreserveAspectFit diff --git a/Modules/Settings/Content.qml b/Modules/Settings/Content.qml index 6d26b24..66b616a 100644 --- a/Modules/Settings/Content.qml +++ b/Modules/Settings/Content.qml @@ -21,7 +21,7 @@ CustomClippingRect { implicitHeight: sState.screen.height * 0.7 implicitWidth: implicitHeight * ratio - radius: Tokens.rounding.large + Tokens.padding.normal + radius: Tokens.rounding.largeIncreased + Tokens.padding.small Behavior on blobColor { CAnim { @@ -36,18 +36,18 @@ CustomClippingRect { id: blobGroup color: root.blobColor - smoothing: Tokens.rounding.normal + smoothing: Tokens.rounding.medium } BlobInvertedRect { anchors.fill: parent - borderBottom: Tokens.padding.normal + borderBottom: Tokens.padding.small borderLeft: navPane.width + navPane.anchors.margins * 2 - borderRight: Tokens.padding.normal - borderTop: Tokens.padding.normal + borderRight: Tokens.padding.small + borderTop: Tokens.padding.small group: blobGroup opacity: root.blobColor.a - radius: Tokens.rounding.large + radius: Tokens.rounding.largeIncreased } NavPane { diff --git a/Modules/Settings/NavPane.qml b/Modules/Settings/NavPane.qml index 6a8ba92..e802071 100644 --- a/Modules/Settings/NavPane.qml +++ b/Modules/Settings/NavPane.qml @@ -10,7 +10,7 @@ ColumnLayout { required property SettingsState sState - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased SearchBar { id: searchField diff --git a/Modules/Settings/NavPane/NavLocations.qml b/Modules/Settings/NavPane/NavLocations.qml index 38c9e2c..5ccf726 100644 --- a/Modules/Settings/NavPane/NavLocations.qml +++ b/Modules/Settings/NavPane/NavLocations.qml @@ -71,15 +71,15 @@ VerticalFadeFlickable { Layout.fillWidth: true Layout.topMargin: index !== 0 && isCategoryStart ? Tokens.spacing.small : 0 - bottomLeftRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.large : isCategoryEnd ? Tokens.rounding.normal : Tokens.rounding.extraSmall - bottomRightRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.large : isCategoryEnd ? Tokens.rounding.normal : Tokens.rounding.extraSmall + bottomLeftRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLarge : isCategoryEnd ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall + bottomRightRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLarge : isCategoryEnd ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall color: isCurrentPage ? Colors.palette.m3secondaryContainer : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2) implicitHeight: { const h = layout.implicitHeight + layout.anchors.margins * 2; return h % 2 === 0 ? h : h + 1; } - topLeftRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.large : isCategoryStart ? Tokens.rounding.normal : Tokens.rounding.extraSmall - topRightRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.large : isCategoryStart ? Tokens.rounding.normal : Tokens.rounding.extraSmall + topLeftRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLarge : isCategoryStart ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall + topRightRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLarge : isCategoryStart ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall RadiusBehavior on bottomLeftRadius { } @@ -192,7 +192,7 @@ VerticalFadeFlickable { RowLayout { Layout.fillWidth: true - Layout.leftMargin: Tokens.padding.small + Layout.leftMargin: Tokens.padding.extraSmall spacing: Tokens.spacing.small MaterialIcon { @@ -251,15 +251,15 @@ VerticalFadeFlickable { readonly property bool isLast: index === group.modelData.entries.length - 1 required property var modelData - bottomLeftRadius: layer.pressed ? Tokens.rounding.medium : isLast ? Tokens.rounding.large : Tokens.rounding.extraSmall - bottomRightRadius: layer.pressed ? Tokens.rounding.medium : isLast ? Tokens.rounding.large : Tokens.rounding.extraSmall + bottomLeftRadius: layer.pressed ? Tokens.rounding.largeIncreased : isLast ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall + bottomRightRadius: layer.pressed ? Tokens.rounding.largeIncreased : isLast ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2) implicitHeight: { const h = resultLayout.implicitHeight + resultLayout.anchors.margins * 2; return h % 2 === 0 ? h : h + 1; } - topLeftRadius: layer.pressed ? Tokens.rounding.medium : isFirst ? Tokens.rounding.large : Tokens.rounding.extraSmall - topRightRadius: layer.pressed ? Tokens.rounding.medium : isFirst ? Tokens.rounding.large : Tokens.rounding.extraSmall + topLeftRadius: layer.pressed ? Tokens.rounding.largeIncreased : isFirst ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall + topRightRadius: layer.pressed ? Tokens.rounding.largeIncreased : isFirst ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall width: cardList.width RadiusBehavior on bottomLeftRadius { @@ -297,7 +297,7 @@ VerticalFadeFlickable { Layout.fillWidth: true color: Colors.palette.m3onSurface elide: Text.ElideRight - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: SettingsSearcher.highlight(result.modelData.title, root.search, Colors.palette.m3primary) textFormat: text.includes(" root.lastPageIdx ? 1 : -1); + root.animOff = Tokens.padding.small * (root.sState.currentPageIdx > root.lastPageIdx ? 1 : -1); switchAnim.start(); root.lastPageIdx = root.sState.currentPageIdx; } diff --git a/Modules/Settings/Pages/AboutPage.qml b/Modules/Settings/Pages/AboutPage.qml index 75c65b8..1fae077 100644 --- a/Modules/Settings/Pages/AboutPage.qml +++ b/Modules/Settings/Pages/AboutPage.qml @@ -63,7 +63,7 @@ PageBase { CustomText { Layout.alignment: Qt.AlignHCenter color: Colors.palette.m3onSurfaceVariant - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: ZUtils.version ? `v${ZUtils.version}` : "…" } } diff --git a/Modules/Settings/Pages/Apps/AllApps.qml b/Modules/Settings/Pages/Apps/AllApps.qml index f2501ac..dc05f73 100644 --- a/Modules/Settings/Pages/Apps/AllApps.qml +++ b/Modules/Settings/Pages/Apps/AllApps.qml @@ -50,7 +50,7 @@ PageBase { anchors.fill: parent anchors.leftMargin: Tokens.padding.largeIncreased - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.rightMargin: Tokens.padding.largeIncreased spacing: Tokens.spacing.small @@ -91,7 +91,7 @@ PageBase { MaterialIcon { color: Colors.palette.m3onSurfaceVariant - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: "chevron_right" } } diff --git a/Modules/Settings/Pages/Apps/AppInfo.qml b/Modules/Settings/Pages/Apps/AppInfo.qml index bfb0fcf..b3273f4 100644 --- a/Modules/Settings/Pages/Apps/AppInfo.qml +++ b/Modules/Settings/Pages/Apps/AppInfo.qml @@ -40,10 +40,10 @@ PageBase { // Header RowLayout { - Layout.bottomMargin: Tokens.spacing.large + Layout.bottomMargin: Tokens.spacing.largeIncreased Layout.fillWidth: true - Layout.leftMargin: Tokens.padding.small - spacing: Tokens.spacing.large + Layout.leftMargin: Tokens.padding.extraSmall + spacing: Tokens.spacing.largeIncreased IconImage { asynchronous: true @@ -57,7 +57,7 @@ PageBase { CustomText { Layout.fillWidth: true - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: root.app?.name ?? "" wrapMode: Text.WordWrap } @@ -144,7 +144,7 @@ PageBase { anchors.fill: parent anchors.leftMargin: Tokens.padding.largeIncreased - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.rightMargin: Tokens.padding.largeIncreased spacing: Tokens.spacing.small diff --git a/Modules/Settings/Pages/AppsPage.qml b/Modules/Settings/Pages/AppsPage.qml index 1642eb6..a9ff2f7 100644 --- a/Modules/Settings/Pages/AppsPage.qml +++ b/Modules/Settings/Pages/AppsPage.qml @@ -138,7 +138,7 @@ PageBase { id: itemLayout anchors.fill: parent - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small spacing: Tokens.spacing.small IconImage { diff --git a/Modules/Settings/Pages/Audio/AppVolumes.qml b/Modules/Settings/Pages/Audio/AppVolumes.qml index 4478887..59d634b 100644 --- a/Modules/Settings/Pages/Audio/AppVolumes.qml +++ b/Modules/Settings/Pages/Audio/AppVolumes.qml @@ -26,7 +26,7 @@ PageBase { CustomText { Layout.bottomMargin: Tokens.spacing.small Layout.fillWidth: true - Layout.leftMargin: Tokens.padding.small + Layout.leftMargin: Tokens.padding.extraSmall color: Colors.palette.m3outline font.pointSize: Tokens.font.size.small text: qsTr("Adjust the volume of individual apps currently playing audio.") diff --git a/Modules/Settings/Pages/AudioPage.qml b/Modules/Settings/Pages/AudioPage.qml index 5577e73..fa8f225 100644 --- a/Modules/Settings/Pages/AudioPage.qml +++ b/Modules/Settings/Pages/AudioPage.qml @@ -52,7 +52,7 @@ PageBase { // Input SliderRow { - Layout.topMargin: Tokens.spacing.large - parent.spacing + Layout.topMargin: Tokens.spacing.largeIncreased - parent.spacing enabled: !Audio.sourceMuted first: true icon: Icons.getMicVolumeIcon(Audio.sourceVolume, Audio.sourceMuted) @@ -84,7 +84,7 @@ PageBase { // Per-app volumes ConnectedRect { Layout.fillWidth: true - Layout.topMargin: Tokens.spacing.large - parent.spacing + Layout.topMargin: Tokens.spacing.largeIncreased - parent.spacing first: true implicitHeight: appLayout.implicitHeight + appLayout.anchors.margins * 2 last: true @@ -98,12 +98,12 @@ PageBase { anchors.fill: parent anchors.leftMargin: Tokens.padding.largeIncreased - anchors.margins: Tokens.padding.normal + anchors.margins: Tokens.padding.small anchors.rightMargin: Tokens.padding.largeIncreased spacing: Tokens.spacing.small MaterialIcon { - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: "tune" } @@ -130,7 +130,7 @@ PageBase { MaterialIcon { color: Colors.palette.m3onSurfaceVariant - font.pointSize: Tokens.font.size.medium + font.pointSize: Tokens.font.size.normal text: "chevron_right" } } diff --git a/Modules/Settings/Pages/Wallpaper/WallpaperSelect.qml b/Modules/Settings/Pages/Wallpaper/WallpaperSelect.qml index c1866f7..18016d2 100644 --- a/Modules/Settings/Pages/Wallpaper/WallpaperSelect.qml +++ b/Modules/Settings/Pages/Wallpaper/WallpaperSelect.qml @@ -24,7 +24,7 @@ PageBase { width: root.cappedWidth CustomText { - Layout.topMargin: Tokens.spacing.large + Layout.topMargin: Tokens.spacing.largeIncreased font.pointSize: Tokens.font.size.large text: qsTr("Wallpapers") } @@ -73,7 +73,7 @@ PageBase { sourceComponent: CustomRect { color: Colors.tPalette.m3surfaceContainer implicitHeight: noWallsLayout.implicitHeight + Tokens.padding.extraLarge * 3 - radius: Tokens.rounding.large + radius: Tokens.rounding.largeIncreased ColumnLayout { id: noWallsLayout diff --git a/Modules/Settings/Pages/WallpaperPage.qml b/Modules/Settings/Pages/WallpaperPage.qml index 6f3e14a..40274ad 100644 --- a/Modules/Settings/Pages/WallpaperPage.qml +++ b/Modules/Settings/Pages/WallpaperPage.qml @@ -18,7 +18,7 @@ PageBase { ColumnLayout { anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top - spacing: Tokens.spacing.large + spacing: Tokens.spacing.largeIncreased width: root.cappedWidth Item { @@ -42,7 +42,7 @@ PageBase { shapeMorph: true text: qsTr("Wallpapers") type: IconTextButton.Tonal - verticalPadding: Tokens.padding.normal + verticalPadding: Tokens.padding.small onClicked: root.sState.openSubPage(1) // Wallpaper page } diff --git a/Modules/Settings/Wrapper.qml b/Modules/Settings/Wrapper.qml index 2c03246..6de8131 100644 --- a/Modules/Settings/Wrapper.qml +++ b/Modules/Settings/Wrapper.qml @@ -23,7 +23,7 @@ Item { Behavior on offsetScale { Anim { duration: Tokens.anim.durations.expressiveDefaultSpatial - easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial + easing: Tokens.anim.expressiveDefaultSpatial } } diff --git a/Plugins/ZShell/Config/CMakeLists.txt b/Plugins/ZShell/Config/CMakeLists.txt index 0e46ebf..bee1215 100644 --- a/Plugins/ZShell/Config/CMakeLists.txt +++ b/Plugins/ZShell/Config/CMakeLists.txt @@ -5,6 +5,7 @@ qml_module(ZShell-config configobject.hpp configobject.cpp configlist.hpp configlist.cpp config.hpp config.cpp + anim.hpp anim.cpp tokens.hpp appearance.hpp background.hpp diff --git a/Plugins/ZShell/Config/anim.cpp b/Plugins/ZShell/Config/anim.cpp new file mode 100644 index 0000000..50926c2 --- /dev/null +++ b/Plugins/ZShell/Config/anim.cpp @@ -0,0 +1,47 @@ +#include "anim.hpp" +#include "tokens.hpp" +#include + +namespace ZShell::config { + +QEasingCurve AnimEasing::buildCurve(const QList& points) { + QEasingCurve curve(QEasingCurve::BezierSpline); + for (int i = 0; i + 5 < points.size(); i += 6) { + QPointF c1(points[i], points[i + 1]); + QPointF c2(points[i + 2], points[i + 3]); + QPointF end(points[i + 4], points[i + 5]); + curve.addCubicBezierSegment(c1, c2, end); + } + return curve; +} + +void AnimEasing::bindCurves(AnimCurves* curves) { + m_curves = curves; + connect( + curves, + &AnimCurves::propertiesChanged, + this, + &AnimEasing::rebuildCurves); + rebuildCurves(); +} + +void AnimEasing::rebuildCurves() { + if (!m_curves) return; + m_emphasized = buildCurve(m_curves->emphasized()); + m_emphasizedAccel = buildCurve(m_curves->emphasizedAccel()); + m_emphasizedDecel = buildCurve(m_curves->emphasizedDecel()); + m_standard = buildCurve(m_curves->standard()); + m_standardAccel = buildCurve(m_curves->standardAccel()); + m_standardDecel = buildCurve(m_curves->standardDecel()); + m_expressiveFastSpatial = buildCurve(m_curves->expressiveFastSpatial()); + m_expressiveDefaultSpatial = + buildCurve(m_curves->expressiveDefaultSpatial()); + m_expressiveSlowSpatial = buildCurve(m_curves->expressiveSlowSpatial()); + m_expressiveFastEffects = buildCurve(m_curves->expressiveFastEffects()); + m_expressiveDefaultEffects = + buildCurve(m_curves->expressiveDefaultEffects()); + m_expressiveSlowEffects = buildCurve(m_curves->expressiveSlowEffects()); + emit curvesChanged(); +} + +} // namespace ZShell::config diff --git a/Plugins/ZShell/Config/anim.hpp b/Plugins/ZShell/Config/anim.hpp new file mode 100644 index 0000000..c5f95bc --- /dev/null +++ b/Plugins/ZShell/Config/anim.hpp @@ -0,0 +1,95 @@ +#pragma once + +#include +#include +#include + +namespace ZShell::config { + +class AnimCurves; +class AnimDurations; + +class AnimEasing : public QObject { + Q_OBJECT + QML_ANONYMOUS + + Q_PROPERTY(QEasingCurve emphasized READ emphasized NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve emphasizedAccel READ emphasizedAccel NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve emphasizedDecel READ emphasizedDecel NOTIFY curvesChanged) + Q_PROPERTY(QEasingCurve standard READ standard NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve standardAccel READ standardAccel NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve standardDecel READ standardDecel NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveFastSpatial READ expressiveFastSpatial NOTIFY + curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveDefaultSpatial READ expressiveDefaultSpatial + NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveSlowSpatial READ expressiveSlowSpatial NOTIFY + curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveFastEffects READ expressiveFastEffects NOTIFY + curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveDefaultEffects READ expressiveDefaultEffects + NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveSlowEffects READ expressiveSlowEffects NOTIFY + curvesChanged) + + public: + explicit AnimEasing(QObject* parent = nullptr) : QObject(parent) {} + + void bindCurves(AnimCurves* curves); + + [[nodiscard]] QEasingCurve emphasized() const { return m_emphasized; } + [[nodiscard]] QEasingCurve emphasizedAccel() const { + return m_emphasizedAccel; + } + [[nodiscard]] QEasingCurve emphasizedDecel() const { + return m_emphasizedDecel; + } + [[nodiscard]] QEasingCurve standard() const { return m_standard; } + [[nodiscard]] QEasingCurve standardAccel() const { return m_standardAccel; } + [[nodiscard]] QEasingCurve standardDecel() const { return m_standardDecel; } + [[nodiscard]] QEasingCurve expressiveFastSpatial() const { + return m_expressiveFastSpatial; + } + [[nodiscard]] QEasingCurve expressiveDefaultSpatial() const { + return m_expressiveDefaultSpatial; + } + [[nodiscard]] QEasingCurve expressiveSlowSpatial() const { + return m_expressiveSlowSpatial; + } + [[nodiscard]] QEasingCurve expressiveFastEffects() const { + return m_expressiveFastEffects; + } + [[nodiscard]] QEasingCurve expressiveDefaultEffects() const { + return m_expressiveDefaultEffects; + } + [[nodiscard]] QEasingCurve expressiveSlowEffects() const { + return m_expressiveSlowEffects; + } + + signals: + void curvesChanged(); + + private: + static QEasingCurve buildCurve(const QList& points); + void rebuildCurves(); + + AnimCurves* m_curves = nullptr; + QEasingCurve m_emphasized, m_emphasizedAccel, m_emphasizedDecel; + QEasingCurve m_standard, m_standardAccel, m_standardDecel; + QEasingCurve m_expressiveFastSpatial, m_expressiveDefaultSpatial, + m_expressiveSlowSpatial; + QEasingCurve m_expressiveFastEffects, m_expressiveDefaultEffects, + m_expressiveSlowEffects; +}; + +} // namespace ZShell::config diff --git a/Plugins/ZShell/Config/tokens.hpp b/Plugins/ZShell/Config/tokens.hpp index 7c83e47..b58d8ea 100644 --- a/Plugins/ZShell/Config/tokens.hpp +++ b/Plugins/ZShell/Config/tokens.hpp @@ -1,12 +1,15 @@ #pragma once #include "configobject.hpp" +#include "anim.hpp" #include +#include #include #include #include #include +#include namespace ZShell::config { @@ -15,13 +18,15 @@ class AppearanceRounding : public ConfigObject { QML_ANONYMOUS CFG_PROPERTY(qreal, extraSmall, 4) - CFG_PROPERTY(qreal, full, 1000) - CFG_PROPERTY(qreal, large, 24) - CFG_PROPERTY(qreal, medium, 16) - CFG_PROPERTY(qreal, normal, 18) + CFG_PROPERTY(qreal, full, std::numeric_limits::max()) + CFG_PROPERTY(qreal, large, 16) + CFG_PROPERTY(qreal, largeIncreased, 20) + CFG_PROPERTY(qreal, extraLarge, 28) + CFG_PROPERTY(qreal, extraLargeIncreased, 32) + CFG_PROPERTY(qreal, extraExtraLarge, 48) + CFG_PROPERTY(qreal, medium, 12) CFG_PROPERTY(qreal, scale, 1) - CFG_PROPERTY(qreal, small, 12) - CFG_PROPERTY(qreal, smallest, 8) + CFG_PROPERTY(qreal, small, 8) public: explicit AppearanceRounding(QObject* parent = nullptr) @@ -32,17 +37,15 @@ class AppearancePadding : public ConfigObject { Q_OBJECT QML_ANONYMOUS - CFG_PROPERTY(qreal, extraLarge, 28) - CFG_PROPERTY(qreal, extraLargeIncreased, 32) - CFG_PROPERTY(qreal, extraSmall, 4) - CFG_PROPERTY(qreal, large, 16) - CFG_PROPERTY(qreal, largeIncreased, 20) - CFG_PROPERTY(qreal, larger, 12) - CFG_PROPERTY(qreal, normal, 8) - CFG_PROPERTY(qreal, scale, 1) - CFG_PROPERTY(qreal, small, 5) - CFG_PROPERTY(qreal, smaller, 7) - CFG_PROPERTY(qreal, smallest, 2) + CFG_PROPERTY(int, extraSmall, 4) + CFG_PROPERTY(int, smaller, 5) + CFG_PROPERTY(int, small, 8) + CFG_PROPERTY(int, medium, 12) + CFG_PROPERTY(int, large, 16) + CFG_PROPERTY(int, largeIncreased, 20) + CFG_PROPERTY(int, extraLarge, 28) + CFG_PROPERTY(int, extraLargeIncreased, 32) + CFG_PROPERTY(int, extraExtraLarge, 48) public: explicit AppearancePadding(QObject* parent = nullptr) @@ -53,13 +56,14 @@ class AppearanceSpacing : public ConfigObject { Q_OBJECT QML_ANONYMOUS - CFG_PROPERTY(qreal, extraSmall, 4) - CFG_PROPERTY(qreal, large, 20) - CFG_PROPERTY(qreal, larger, 16) - CFG_PROPERTY(qreal, normal, 12) - CFG_PROPERTY(qreal, scale, 1) - CFG_PROPERTY(qreal, small, 8) - CFG_PROPERTY(qreal, smaller, 10) + CFG_PROPERTY(int, extraSmall, 4) + CFG_PROPERTY(int, small, 8) + CFG_PROPERTY(int, medium, 12) + CFG_PROPERTY(int, large, 16) + CFG_PROPERTY(int, largeIncreased, 20) + CFG_PROPERTY(int, extraLarge, 28) + CFG_PROPERTY(int, extraLargeIncreased, 32) + CFG_PROPERTY(int, extraExtraLarge, 48) public: explicit AppearanceSpacing(QObject* parent = nullptr) @@ -70,14 +74,12 @@ class FontSizeTokens : public ConfigObject { Q_OBJECT QML_ANONYMOUS - CFG_PROPERTY(qreal, extraLarge, 28) - CFG_PROPERTY(qreal, large, 18) - CFG_PROPERTY(qreal, larger, 16) - CFG_PROPERTY(qreal, medium, 14) - CFG_PROPERTY(qreal, normal, 13) - CFG_PROPERTY(qreal, scale, 1) - CFG_PROPERTY(qreal, small, 11) - CFG_PROPERTY(qreal, smaller, 12) + CFG_PROPERTY(int, small, 11) + CFG_PROPERTY(int, smaller, 12) + CFG_PROPERTY(int, normal, 13) + CFG_PROPERTY(int, larger, 15) + CFG_PROPERTY(int, large, 18) + CFG_PROPERTY(int, extraLarge, 28) public: explicit FontSizeTokens(QObject* parent = nullptr) : ConfigObject(parent) {} @@ -98,86 +100,63 @@ class AnimCurves : public ConfigObject { Q_OBJECT QML_ANONYMOUS - CFG_PROPERTY( - QVariantList, - emphasized, - QVariantList{ - 0.05, - 0, - 2.0 / 15.0, - 0.06, - 1.0 / 6.0, - 0.4, - 5.0 / 24.0, - 0.82, - 0.25, - 1, - 1, - 1}) - - CFG_PROPERTY( - QVariantList, emphasizedAccel, QVariantList{0.3, 0, 0.8, 0.15, 1, 1}) - - CFG_PROPERTY( - QVariantList, emphasizedDecel, QVariantList{0.05, 0.7, 0.1, 1, 1, 1}) - - CFG_PROPERTY( - QVariantList, - expressiveDefaultEffects, - QVariantList{0.34, 0.8, 0.34, 1, 1, 1}) - - CFG_PROPERTY( - QVariantList, - expressiveDefaultSpatial, - QVariantList{0.38, 1.21, 0.22, 1, 1, 1}) - - CFG_PROPERTY( - QVariantList, expressiveEffects, QVariantList{0.34, 0.8, 0.34, 1, 1, 1}) - - CFG_PROPERTY( - QVariantList, - expressiveFastEffects, - QVariantList{0.31, 0.94, 0.34, 1, 1, 1}) - - CFG_PROPERTY( - QVariantList, - expressiveFastSpatial, - QVariantList{0.42, 1.67, 0.21, 0.9, 1, 1}) - - CFG_PROPERTY( - QVariantList, - expressiveSlowEffects, - QVariantList{0.34, 0.88, 0.34, 1, 1, 1}) - - CFG_PROPERTY( - QVariantList, - expressiveSlowSpatial, - QVariantList{0.39, 1.29, 0.35, 0.98, 1, 1}) - - CFG_PROPERTY(QVariantList, standard, QVariantList{0.2, 0, 0, 1, 1, 1}) - - CFG_PROPERTY(QVariantList, standardAccel, QVariantList{0.3, 0, 1, 1, 1, 1}) - - CFG_PROPERTY(QVariantList, standardDecel, QVariantList{0, 0, 0, 1, 1, 1}) + CFG_PROPERTY(QList, emphasized) + CFG_PROPERTY(QList, emphasizedAccel) + CFG_PROPERTY(QList, emphasizedDecel) + CFG_PROPERTY(QList, standard) + CFG_PROPERTY(QList, standardAccel) + CFG_PROPERTY(QList, standardDecel) + CFG_PROPERTY(QList, expressiveFastSpatial) + CFG_PROPERTY(QList, expressiveDefaultSpatial) + CFG_PROPERTY(QList, expressiveSlowSpatial) + CFG_PROPERTY(QList, expressiveFastEffects) + CFG_PROPERTY(QList, expressiveDefaultEffects) + CFG_PROPERTY(QList, expressiveSlowEffects) public: - explicit AnimCurves(QObject* parent = nullptr) : ConfigObject(parent) {} + explicit AnimCurves(QObject* parent = nullptr) + : ConfigObject(parent) + , m_emphasized( + {0.05, + 0, + 2.0 / 15.0, + 0.06, + 1.0 / 6.0, + 0.4, + 5.0 / 24.0, + 0.82, + 0.25, + 1, + 1, + 1}) + , m_emphasizedAccel({0.3, 0, 0.8, 0.15, 1, 1}) + , m_emphasizedDecel({0.05, 0.7, 0.1, 1, 1, 1}) + , m_standard({0.2, 0, 0, 1, 1, 1}) + , m_standardAccel({0.3, 0, 1, 1, 1, 1}) + , m_standardDecel({0, 0, 0, 1, 1, 1}) + , m_expressiveFastSpatial({0.42, 1.67, 0.21, 0.9, 1, 1}) + , m_expressiveDefaultSpatial({0.38, 1.21, 0.22, 1, 1, 1}) + , m_expressiveSlowSpatial({0.39, 1.29, 0.35, 0.98, 1, 1}) + , m_expressiveFastEffects({0.31, 0.94, 0.34, 1, 1, 1}) + , m_expressiveDefaultEffects({0.34, 0.8, 0.34, 1, 1, 1}) + , m_expressiveSlowEffects({0.34, 0.88, 0.34, 1, 1, 1}) {} }; class AnimDurations : public ConfigObject { Q_OBJECT QML_ANONYMOUS - CFG_PROPERTY(int, expressiveDefaultSpatial, 500) - CFG_PROPERTY(int, expressiveEffects, 200) - CFG_PROPERTY(int, expressiveFastEffects, 150) - CFG_PROPERTY(int, expressiveFastSpatial, 350) - CFG_PROPERTY(int, expressiveSlowEffects, 300) - CFG_PROPERTY(int, extraLarge, 1000) - CFG_PROPERTY(int, large, 600) - CFG_PROPERTY(int, normal, 400) - CFG_PROPERTY(qreal, scale, 1) CFG_PROPERTY(int, small, 200) + CFG_PROPERTY(int, scale, 1) + CFG_PROPERTY(int, normal, 400) + CFG_PROPERTY(int, large, 600) + CFG_PROPERTY(int, extraLarge, 1000) + CFG_PROPERTY(int, expressiveFastSpatial, 350) + CFG_PROPERTY(int, expressiveDefaultSpatial, 500) + CFG_PROPERTY(int, expressiveSlowSpatial, 650) + CFG_PROPERTY(int, expressiveFastEffects, 150) + CFG_PROPERTY(int, expressiveDefaultEffects, 200) + CFG_PROPERTY(int, expressiveSlowEffects, 300) public: explicit AnimDurations(QObject* parent = nullptr) : ConfigObject(parent) {} @@ -187,14 +166,92 @@ class AnimTokens : public ConfigObject { Q_OBJECT QML_ANONYMOUS - CONFIG_SUBOBJECT(AnimCurves, curves) CONFIG_SUBOBJECT(AnimDurations, durations) + Q_PROPERTY(QEasingCurve emphasized READ emphasized NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve emphasizedAccel READ emphasizedAccel NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve emphasizedDecel READ emphasizedDecel NOTIFY curvesChanged) + Q_PROPERTY(QEasingCurve standard READ standard NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve standardAccel READ standardAccel NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve standardDecel READ standardDecel NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveFastSpatial READ expressiveFastSpatial NOTIFY + curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveDefaultSpatial READ expressiveDefaultSpatial + NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveSlowSpatial READ expressiveSlowSpatial NOTIFY + curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveFastEffects READ expressiveFastEffects NOTIFY + curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveDefaultEffects READ expressiveDefaultEffects + NOTIFY curvesChanged) + Q_PROPERTY( + QEasingCurve expressiveSlowEffects READ expressiveSlowEffects NOTIFY + curvesChanged) + public: explicit AnimTokens(QObject* parent = nullptr) : ConfigObject(parent) , m_curves(new AnimCurves(this)) - , m_durations(new AnimDurations(this)) {} + , m_durations(new AnimDurations(this)) + , m_easing(new AnimEasing(this)) { + connect( + m_easing, + &AnimEasing::curvesChanged, + this, + &AnimTokens::curvesChanged); + m_easing->bindCurves(m_curves); + } + + [[nodiscard]] QEasingCurve emphasized() const { + return m_easing->emphasized(); + } + [[nodiscard]] QEasingCurve emphasizedAccel() const { + return m_easing->emphasizedAccel(); + } + [[nodiscard]] QEasingCurve emphasizedDecel() const { + return m_easing->emphasizedDecel(); + } + [[nodiscard]] QEasingCurve standard() const { return m_easing->standard(); } + [[nodiscard]] QEasingCurve standardAccel() const { + return m_easing->standardAccel(); + } + [[nodiscard]] QEasingCurve standardDecel() const { + return m_easing->standardDecel(); + } + [[nodiscard]] QEasingCurve expressiveFastSpatial() const { + return m_easing->expressiveFastSpatial(); + } + [[nodiscard]] QEasingCurve expressiveDefaultSpatial() const { + return m_easing->expressiveDefaultSpatial(); + } + [[nodiscard]] QEasingCurve expressiveSlowSpatial() const { + return m_easing->expressiveSlowSpatial(); + } + [[nodiscard]] QEasingCurve expressiveFastEffects() const { + return m_easing->expressiveFastEffects(); + } + [[nodiscard]] QEasingCurve expressiveDefaultEffects() const { + return m_easing->expressiveDefaultEffects(); + } + [[nodiscard]] QEasingCurve expressiveSlowEffects() const { + return m_easing->expressiveSlowEffects(); + } + + signals: + void curvesChanged(); + + private: + AnimCurves* m_curves; + AnimEasing* m_easing; }; class BarTokens : public ConfigObject {