TRAY

tray/Generics/MatIcon.qml

@@ -0,0 +1,31 @@
+// https://m3.material.io/styles/typography/editorial-treatments#a8196c1e-387e-4303-b0bf-b9bac44e4e72
+// a thin wrapper for placing using Material Symbols
+// credit to end for leading me down this route
+import QtQuick
+import qs.Data as Dat
+
+Text {
+  id: root
+
+  property real fill: 0
+  property int grad: 0
+  required property string icon
+
+  font.family: "Material Symbols Rounded"
+  font.hintingPreference: Font.PreferFullHinting
+  font.variableAxes: {
+    "FILL": root.fill,
+    "opsz": root.fontInfo.pixelSize,
+    "GRAD": root.grad,
+    "wght": root.fontInfo.weight
+  }
+  renderType: Text.NativeRendering
+  text: root.icon
+
+  Behavior on fill {
+    NumberAnimation {
+      duration: Dat.MaterialEasing.standardTime
+      easing.bezierCurve: Dat.MaterialEasing.standard
+    }
+  }
+}

tray/Generics/ToggleButton.qml

@@ -0,0 +1,119 @@
+import QtQuick
+
+import qs.Data as Dat
+import qs.Generics as Gen
+
+Rectangle {
+  id: root
+
+  required property bool active
+  property color activeColor: Dat.Colors.current.primary
+  property color activeIconColor: Dat.Colors.current.on_primary
+  property alias icon: matIcon
+  property alias mArea: mouseArea
+  property color passiveColor: Dat.Colors.current.surface_container
+  property color passiveIconColor: Dat.Colors.current.on_surface
+
+  color: "transparent"
+  state: (root.active) ? "ACTIVE" : "PASSIVE"
+
+  states: [
+    State {
+      name: "ACTIVE"
+
+      PropertyChanges {
+        bgToggle.color: root.activeColor
+        bgToggle.opacity: 1
+        bgToggle.visible: true
+        bgToggle.width: bgToggle.parent.width
+        matIcon.color: root.activeIconColor
+        matIcon.fill: 1
+      }
+    },
+    State {
+      name: "PASSIVE"
+
+      PropertyChanges {
+        bgToggle.color: root.passiveColor
+        bgToggle.opacity: 0
+        bgToggle.visible: false
+        bgToggle.width: 0
+        matIcon.color: root.passiveIconColor
+        matIcon.fill: 0
+      }
+    }
+  ]
+  transitions: [
+    Transition {
+      from: "PASSIVE"
+      to: "ACTIVE"
+
+      SequentialAnimation {
+        PropertyAction {
+          property: "visible"
+          target: bgToggle
+        }
+
+        ParallelAnimation {
+          NumberAnimation {
+            duration: Dat.MaterialEasing.standardTime
+            easing.bezierCurve: Dat.MaterialEasing.standard
+            properties: "width, opacity"
+            target: bgToggle
+          }
+
+          ColorAnimation {
+            duration: Dat.MaterialEasing.standardTime
+            targets: [bgToggle, matIcon]
+          }
+        }
+      }
+    },
+    Transition {
+      from: "ACTIVE"
+      to: "PASSIVE"
+
+      SequentialAnimation {
+        ParallelAnimation {
+          NumberAnimation {
+            duration: Dat.MaterialEasing.standardTime
+            easing.bezierCurve: Dat.MaterialEasing.standard
+            properties: "width, opacity"
+            target: bgToggle
+          }
+
+          ColorAnimation {
+            duration: Dat.MaterialEasing.standardTime
+            targets: [bgToggle, matIcon]
+          }
+        }
+
+        PropertyAction {
+          property: "visible"
+          target: bgToggle
+        }
+      }
+    }
+  ]
+
+  Rectangle {
+    id: bgToggle
+
+    anchors.centerIn: parent
+    height: this.width
+    radius: this.width
+  }
+
+  Gen.MatIcon {
+    id: matIcon
+
+    anchors.centerIn: parent
+    icon: ""
+  }
+
+  Gen.MouseArea {
+    id: mouseArea
+
+    layerColor: matIcon.color
+  }
+}