Rearrange for tidier structure (#2212)

2025-10-16 07:19:55 +08:00
parent 13065d7e5a
commit 8b493e091d
529 changed files with 165 additions and 138 deletions
@@ -0,0 +1,60 @@
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+
+/**
+ * Material 3 switch. See https://m3.material.io/components/switch/overview
+ */
+Switch {
+    id: root
+    property real scale: 0.6 // Default in m3 spec is huge af
+    implicitHeight: 32 * root.scale
+    implicitWidth: 52 * root.scale
+    property color activeColor: Appearance?.colors.colPrimary ?? "#685496"
+    property color inactiveColor: Appearance?.colors.colSurfaceContainerHighest ?? "#45464F"
+
+    PointingHandInteraction {}
+
+    // Custom track styling
+    background: Rectangle {
+        width: parent.width
+        height: parent.height
+        radius: Appearance?.rounding.full ?? 9999
+        color: root.checked ? root.activeColor : root.inactiveColor
+        border.width: 2 * root.scale
+        border.color: root.checked ? root.activeColor : Appearance.m3colors.m3outline
+
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+        Behavior on border.color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+    }
+
+    // Custom thumb styling
+    indicator: Rectangle {
+        width: (root.pressed || root.down) ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale)
+        height: (root.pressed || root.down) ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale)
+        radius: Appearance.rounding.full
+        color: root.checked ? Appearance.m3colors.m3onPrimary : Appearance.m3colors.m3outline
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: root.checked ? ((root.pressed || root.down) ? (22 * root.scale) : 24 * root.scale) : ((root.pressed || root.down) ? (2 * root.scale) : 8 * root.scale)
+
+        Behavior on anchors.leftMargin {
+            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+        }
+        Behavior on width {
+            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+        }
+        Behavior on height {
+            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+        }
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+    }
+}