refractor quick toggles data, add volume slider for waffles action center

2025-11-17 23:43:25 +01:00
parent 9228165428
commit fcee7ce6f9
55 changed files with 939 additions and 470 deletions
@@ -35,6 +35,8 @@ Singleton {
        property color bg2Border: root.dark ? "#464646" : "#EEEEEE"
        property color fg: root.dark ? "#FFFFFF" : "#000000"
        property color fg1: root.dark ? "#D1D1D1" : "#626262"
+        property color controlBg: root.dark ? "#9B9B9B" : "#868686"
+        property color controlFg: root.dark ? "#454545" : "#FFFFFF"
        property color danger: "#C42B1C"
        property color dangerActive: "#B62D1F"
        property color warning: "#FF9900"
@@ -71,6 +73,9 @@ Singleton {

    transition: QtObject {
        id: transition
+
+        property int velocity: 850
+
        property QtObject easing: QtObject {
            property QtObject bezierCurve: QtObject {
                readonly property list<real> easeInOut: [0.42,0.00,0.58,1.00,1,1]
@@ -27,5 +27,16 @@ Singleton {
        if (Battery.percentage >= 0.9) return "battery-full";
        return `battery-${Math.ceil(Battery.percentage * 10)}`;
    }
-    
+
+    property string volumeIcon: {
+        const muted = Audio.sink?.audio.muted ?? false;
+        const volume = Audio.sink?.audio.volume ?? 0;
+        if (muted)
+            return volume > 0 ? "speaker-off" : "speaker-none";
+        if (volume == 0)
+            return "speaker-none";
+        if (volume < 0.5)
+            return "speaker-1";
+        return "speaker";
+    }    
 }
@@ -0,0 +1,23 @@
+import QtQuick
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.waffle.looks
+import qs.modules.waffle.bar
+
+WButton {
+    id: root
+
+    property alias iconName: iconContent.icon
+    inset: 0
+    implicitWidth: 40
+    implicitHeight: 40
+
+    contentItem: FluentIcon {
+        id: iconContent
+        anchors.centerIn: parent
+        implicitSize: 18
+        icon: root.iconName
+    }
+}
@@ -0,0 +1,81 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Widgets
+import qs.modules.common
+import qs.modules.common.widgets
+
+Slider {
+    id: root
+
+    property real trackWidth: 4
+    // leftPadding: handle.width / 2
+    // rightPadding: handle.width / 2
+    leftPadding: 0
+    rightPadding: 0
+
+    implicitHeight: handle.implicitHeight
+
+    Behavior on value { // This makes the adjusted value (like volume) shift smoothly
+        SmoothedAnimation {
+            velocity: Looks.transition.velocity
+        }
+    }
+
+    background: Item {
+        id: background
+        anchors.fill: parent
+
+        Rectangle {
+            id: trackHighlight
+            anchors {
+                left: parent.left
+                verticalCenter: parent.verticalCenter
+            }
+            topLeftRadius: root.trackWidth / 2
+            bottomLeftRadius: root.trackWidth / 2
+            color: Looks.colors.accent
+            implicitHeight: root.trackWidth
+            width: background.width * root.visualPosition
+        }
+
+        Rectangle {
+            id: trackTrough
+            anchors {
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            topLeftRadius: root.trackWidth / 2
+            bottomLeftRadius: root.trackWidth / 2
+            color: Looks.colors.controlBg
+            implicitHeight: root.trackWidth
+            width: background.width * (1 - root.visualPosition)
+        }
+    }
+
+    handle: Circle {
+        id: handle
+        anchors.verticalCenter: parent.verticalCenter
+        x: (diameter / 2) + root.visualPosition * (root.width - diameter) - (diameter / 2)
+        diameter: 20
+        color: Looks.colors.controlFg
+
+        MouseArea {
+            id: handleMouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+            acceptedButtons: Qt.NoButton
+        }
+
+        Circle {
+            anchors.centerIn: parent
+            diameter: root.pressed ? 10 : handleMouseArea.containsMouse ? 14 : 12
+            color: Looks.colors.accent
+
+            Behavior on diameter {
+                animation: Looks.transition.enter.createObject(this)
+            }
+        }
+    }
+}