dynamic color scheme progress

2025-11-22 20:59:51 +01:00
parent d0db9a14d7
commit dc5273ab83
11 changed files with 508 additions and 75 deletions
@@ -0,0 +1,142 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import Quickshell.Services.Pipewire
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import qs.Config
+import qs.Components
+
+Item {
+    id: root
+
+    implicitWidth: layout.implicitWidth + 10 * 2
+    implicitHeight: layout.implicitHeight + 10 * 2
+
+    ButtonGroup {
+        id: sinks
+    }
+
+    ButtonGroup {
+        id: sources
+    }
+
+    ColumnLayout {
+        id: layout
+
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: 12
+
+        CustomText {
+            text: qsTr("Output device")
+            font.weight: 500
+        }
+
+        Repeater {
+            model: Audio.sinks
+
+            CustomRadioButton {
+                id: control
+
+                required property PwNode modelData
+
+                ButtonGroup.group: sinks
+                checked: Audio.sink?.id === modelData.id
+                onClicked: Audio.setAudioSink(modelData)
+                text: modelData.description
+            }
+        }
+
+        CustomText {
+            Layout.topMargin: 10
+            text: qsTr("Input device")
+            font.weight: 500
+        }
+
+        Repeater {
+            model: Audio.sources
+
+            StyledRadioButton {
+                required property PwNode modelData
+
+                ButtonGroup.group: sources
+                checked: Audio.source?.id === modelData.id
+                onClicked: Audio.setAudioSource(modelData)
+                text: modelData.description
+            }
+        }
+
+        CustomText {
+            Layout.topMargin: 10
+            Layout.bottomMargin: -7 / 2
+            text: qsTr("Volume (%1)").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`)
+            font.weight: 500
+        }
+
+        CustomMouseArea {
+            Layout.fillWidth: true
+            implicitHeight: 10 * 3
+
+            onWheel: event => {
+                if (event.angleDelta.y > 0)
+                    Audio.incrementVolume();
+                else if (event.angleDelta.y < 0)
+                    Audio.decrementVolume();
+            }
+
+            CustomSlider {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                implicitHeight: parent.implicitHeight
+
+                value: Audio.volume
+                onMoved: Audio.setVolume(value)
+
+                Behavior on value {
+                    Anim {}
+                }
+            }
+        }
+
+        CustomRect {
+            Layout.topMargin: 12
+            visible: true
+
+            implicitWidth: expandBtn.implicitWidth + 10 * 2
+            implicitHeight: expandBtn.implicitHeight + 5
+
+            radius: 17
+            color: DynamicColors.palette.m3primaryContainer
+
+            StateLayer {
+                color: DynamicColors.palette.m3onPrimaryContainer
+
+                function onClicked(): void {
+                    root.wrapper.hasCurrent = false;
+                    Quickshell.execDetached(["app2unit", "--", "pavucontrol"]);
+                }
+            }
+
+            RowLayout {
+                id: expandBtn
+
+                anchors.centerIn: parent
+                spacing: Appearance.spacing.small
+
+                StyledText {
+                    Layout.leftMargin: Appearance.padding.smaller
+                    text: qsTr("Open settings")
+                    color: Colours.palette.m3onPrimaryContainer
+                }
+
+                MaterialIcon {
+                    text: "chevron_right"
+                    color: Colours.palette.m3onPrimaryContainer
+                    font.pointSize: Appearance.font.size.large
+                }
+            }
+        }
+    }
+}
@@ -10,6 +10,9 @@ Item {
    required property int warningThreshold
    required property string details
    required property string iconString
+    property color barColor: Config.useDynamicColors ? DynamicColors.palette.m3primary : Config.accentColor.accents.primary
+    property color warningBarColor: Config.useDynamicColors ? DynamicColors.palette.m3error : Config.accentColor.accents.warning
+    property color textColor: Config.useDynamicColors ? DynamicColors.palette.m3onSurface : "#ffffff"

    height: columnLayout.childrenRect.height
    anchors.left: parent.left
@@ -29,14 +32,14 @@ Item {
                font.family: "Material Symbols Rounded"
                font.pixelSize: 32
                text: root.iconString
-                color: "#ffffff"
+                color: root.textColor
            }

            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: root.resourceName
                font.pixelSize: 14
-                color: "#ffffff"
+                color: root.textColor
            }
        }

@@ -51,7 +54,7 @@ Item {
                width: parent.width * Math.min(root.percentage, 1)
                height: parent.height
                radius: height / 2
-                color: root.percentage * 100 >= root.warningThreshold ? Config.accentColor.accents.warning : Config.accentColor.accents.primary
+                color: root.percentage * 100 >= root.warningThreshold ? root.warningBarColor : root.barColor

                Behavior on width {
                    Anim {
@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import Quickshell
 import QtQuick.Layouts
@@ -93,49 +95,24 @@ Item {
        }
    }

-    MouseArea {
-        id: widgetMouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        onEntered: {
-            if (popoutLoader.sourceComponent === null) {
-                popoutLoader.sourceComponent = resourcePopout;
-            }
-        }
-    }
-
-    Loader {
-        id: popoutLoader
-        sourceComponent: null
-    }
-
-    component ResourcePopout: PanelWindow {
+    Item {
        id: popoutWindow
+        z: 0
        property int rectHeight: contentRect.implicitHeight
-        WlrLayershell.exclusionMode: ExclusionMode.Ignore
+        anchors.fill: parent
+        visible: true

-        anchors {
-            left: true
-            top: true
-            right: true
-            bottom: true
-        }
-
-        color: "transparent"
-
-        mask: Region { item: contentRect }
-
-        ShadowRect {
-            anchors.fill: contentRect
-            radius: 8
-        }
+        // ShadowRect {
+        //     anchors.fill: contentRect
+        //     radius: 8
+        // }

        ParallelAnimation {
            id: openAnim
            Anim {
                target: contentRect
-                property: "y"
-                to: 0 - 1
+                property: "implicitHeight"
+                to: contentColumn.childrenRect.height + 20
                duration: MaterialEasing.expressiveEffectsTime
                easing.bezierCurve: MaterialEasing.expressiveEffects
            }
@@ -145,32 +122,24 @@ Item {
            id: closeAnim
            Anim {
                target: contentRect
-                property: "y"
-                to: - contentRect.implicitHeight
+                property: "implicitHeight"
+                to: 0
                duration: MaterialEasing.expressiveEffectsTime
                easing.bezierCurve: MaterialEasing.expressiveEffects
            }
-            onStopped: {
-                popoutLoader.sourceComponent = null
-            }
        }

        Rectangle {
            id: contentRect
-            x: mapFromItem(root, 0, 0).x
-            y: - implicitHeight
-            implicitHeight: contentColumn.childrenRect.height + 20
-            implicitWidth: root.implicitWidth
-            color: Config.baseBgColor
-            border.color: Config.baseBorderColor
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.bottom
+            color: Config.useDynamicColors ? DynamicColors.tPalette.m3surface : Config.baseBgColor
+            border.color: Config.useDynamicColors ? "transparent" : Config.baseBorderColor
            border.width: 1
            bottomLeftRadius: 8
            bottomRightRadius: 8
-
-
-            Component.onCompleted: {
-                openAnim.start();
-            }
+            clip: true

            Column {
                id: contentColumn
@@ -184,8 +153,8 @@ Item {
                    percentage: ResourceUsage.memoryUsedPercentage
                    warningThreshold: 95
                    details: qsTr( "%1 of %2 MB used" )
-                        .arg( Math.round( ResourceUsage.memoryUsed * 0.001 ))
-                        .arg( Math.round( ResourceUsage.memoryTotal * 0.001 ))
+                    .arg( Math.round( ResourceUsage.memoryUsed * 0.001 ))
+                    .arg( Math.round( ResourceUsage.memoryTotal * 0.001 ))
                }

                ResourceDetail {
@@ -194,7 +163,7 @@ Item {
                    percentage: ResourceUsage.cpuUsage
                    warningThreshold: 95
                    details: qsTr( "%1% used" )
-                        .arg( Math.round( ResourceUsage.cpuUsage * 100 ))
+                    .arg( Math.round( ResourceUsage.cpuUsage * 100 ))
                }

                ResourceDetail {
@@ -203,7 +172,7 @@ Item {
                    percentage: ResourceUsage.gpuUsage
                    warningThreshold: 95
                    details: qsTr( "%1% used" )
-                        .arg( Math.round( ResourceUsage.gpuUsage * 100 ))
+                    .arg( Math.round( ResourceUsage.gpuUsage * 100 ))
                }

                ResourceDetail {
@@ -212,23 +181,24 @@ Item {
                    percentage: ResourceUsage.gpuMemUsage
                    warningThreshold: 95
                    details: qsTr( "%1% used" )
-                        .arg( Math.round( ResourceUsage.gpuMemUsage * 100 ))
-                }
-            }
-            MouseArea {
-                id: mouseArea
-                anchors.fill: parent
-                hoverEnabled: true
-                onExited: {
-                    closeAnim.start();
+                    .arg( Math.round( ResourceUsage.gpuMemUsage * 100 ))
                }
            }
        }
-    }
-
-    Component {
-        id: resourcePopout
-
-        ResourcePopout { }
+        MouseArea {
+            id: widgetMouseArea
+            z: 1
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: contentRect.bottom
+            hoverEnabled: true
+            onEntered: {
+                openAnim.start();
+            }
+            onExited: {
+                closeAnim.start();
+            }
+        }
    }
 }