bar/popouts: add audio device switcher (#319)

* feat: basic audio switcher

* feat: replace VerticalSlider with StyledSlider

* fix: styling

* fix: formatting

* chore: make sound icons consistent, change slider styling

* feat: styled slider component variants

* chore: cleanup

* chore: cleanup

* fix: pr fixes

* fix: remove redundant code

* chore: remove old code

* fix: controls styling

* fixes

* more tweaks

* radiobtn: add interaction stuff

Anim slider

---------

Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>

1 files changed, 59 insertions, 0 deletions

diff --git a/components/controls/StyledSlider.qml b/components/controls/StyledSlider.qml
new file mode 100644
index 0000000..0352cef
--- /dev/null
+++ b/components/controls/StyledSlider.qml
@@ -0,0 +1,59 @@
+import qs.components
+import qs.config
+import qs.services
+import QtQuick.Controls
+import QtQuick
+
+Slider {
+    id: slider
+
+    background: Item {
+        StyledRect {
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.topMargin: slider.implicitHeight / 3
+            anchors.bottomMargin: slider.implicitHeight / 3
+
+            implicitWidth: slider.handle.x - slider.implicitHeight / 6
+
+            color: Colours.palette.m3primary
+            radius: Appearance.rounding.full
+            topRightRadius: slider.implicitHeight / 15
+            bottomRightRadius: slider.implicitHeight / 15
+        }
+
+        StyledRect {
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right
+            anchors.topMargin: slider.implicitHeight / 3
+            anchors.bottomMargin: slider.implicitHeight / 3
+
+            implicitWidth: parent.width - slider.handle.x - slider.handle.implicitWidth - slider.implicitHeight / 6
+
+            color: Colours.palette.m3surfaceContainer
+            radius: Appearance.rounding.full
+            topLeftRadius: slider.implicitHeight / 15
+            bottomLeftRadius: slider.implicitHeight / 15
+        }
+    }
+
+    handle: StyledRect {
+        id: rect
+
+        x: slider.visualPosition * slider.availableWidth
+
+        implicitWidth: slider.implicitHeight / 4.5
+        implicitHeight: slider.implicitHeight
+
+        color: Colours.palette.m3primary
+        radius: Appearance.rounding.full
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onPressed: event => event.accepted = false
+        }
+    }
+}