hefty: bar: workspace widget

2026-02-05 12:49:36 +01:00
parent 24392e3791
commit 6f633122ed
14 changed files with 581 additions and 73 deletions
@@ -0,0 +1,15 @@
+import QtQuick
+import org.kde.kirigami as Kirigami
+import qs.services
+import qs.modules.common
+
+Kirigami.Icon {
+    id: root
+    
+    property real implicitSize: 26
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    roundToIconSize: false
+    animated: true // It's just fading from one icon to another
+}
@@ -1,7 +1,7 @@
 import QtQuick

 Rectangle {
-    property double diameter
+    property real diameter

    implicitWidth: diameter
    implicitHeight: diameter
@@ -0,0 +1,9 @@
+import QtQuick
+import QtQuick.Effects
+
+// Note: You still have to set sizes yourself
+MultiEffect {
+    maskEnabled: true
+    maskThresholdMin: 0.5
+    maskSpreadAtMin: 1
+}
@@ -0,0 +1,19 @@
+import QtQuick
+
+Rectangle {
+    id: root
+
+    // https://m3.material.io/foundations/interaction/states/state-layers
+    enum State {
+        Hover, Focus, Press, Drag
+    }
+
+    property var state: StateLayer.State.Hover
+    opacity: switch(state) {
+        case StateLayer.State.Hover: return 0.08;
+        case StateLayer.State.Focus: return 0.1;
+        case StateLayer.State.Press: return 0.1;
+        case StateLayer.State.Drag: return 0.16;
+        default: return 0;
+    }
+}
@@ -0,0 +1,53 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+
+Rectangle {
+    id: root
+
+    property bool hover: false
+    property bool press: false
+    property bool drag: false
+    property color contentColor: Appearance.m3colors.m3onBackground
+    color: "transparent"
+
+    FadeLoader {
+        id: hoverLoader
+        anchors.fill: parent
+        shown: root.hover
+        sourceComponent: StateLayer {
+            radius: root.radius
+            state: StateLayer.State.Hover
+            color: root.contentColor
+        }
+    }
+    FadeLoader {
+        id: focusLoader
+        anchors.fill: parent
+        shown: root.focus
+        sourceComponent: StateLayer {
+            radius: root.radius
+            state: StateLayer.State.Focus
+            color: root.contentColor
+        }
+    }
+    FadeLoader {
+        id: pressLoader
+        anchors.fill: parent
+        shown: root.press
+        sourceComponent: StateLayer {
+            radius: root.radius
+            state: StateLayer.State.Press
+            color: root.contentColor
+        }
+    }
+    FadeLoader {
+        id: dragLoader
+        anchors.fill: parent
+        shown: root.drag
+        sourceComponent: StateLayer {
+            radius: root.radius
+            state: StateLayer.State.Drag
+            color: root.contentColor
+        }
+    }
+}