From 102fa853a83c88fdd469dd9631939265ef5d3e9b Mon Sep 17 00:00:00 2001 From: kossLAN Date: Sat, 1 Nov 2025 22:48:23 -0400 Subject: [PATCH] basic volume mixer --- shell/bar/control/ControlCenter.qml | 84 +++++++++++++++++++++++++ shell/bar/control/ControlCenterCard.qml | 45 +++++++++++++ shell/resources/volume/volume-low.svg | 9 +++ shell/resources/volume/volume-off.svg | 9 +++ shell/widgets/StyledSlider.qml | 55 ++++++++++++++++ 5 files changed, 202 insertions(+) create mode 100644 shell/bar/control/ControlCenter.qml create mode 100644 shell/bar/control/ControlCenterCard.qml create mode 100644 shell/resources/volume/volume-low.svg create mode 100644 shell/resources/volume/volume-off.svg create mode 100644 shell/widgets/StyledSlider.qml diff --git a/shell/bar/control/ControlCenter.qml b/shell/bar/control/ControlCenter.qml new file mode 100644 index 0000000..68698bf --- /dev/null +++ b/shell/bar/control/ControlCenter.qml @@ -0,0 +1,84 @@ +pragma ComponentBehavior: Bound + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import Qt5Compat.GraphicalEffects +import Quickshell.Services.Pipewire +import Quickshell.Widgets +import qs.widgets +import qs.bar + +StyledMouseArea { + id: root + onClicked: showMenu = !showMenu + + required property var bar + property bool showMenu: false + + IconImage { + id: icon + source: "root:resources/control/controls-button.svg" + + anchors { + fill: parent + margins: 3 + } + } + + property PopupItem menu: PopupItem { + id: menu + owner: root + popup: root.bar.popup + show: root.showMenu + onClosed: root.showMenu = false + + property real padding: 10 + + implicitWidth: 275 + implicitHeight: 350 + + ColumnLayout { + id: container + spacing: 4 + + anchors { + fill: parent + margins: 8 + } + + ControlCenterCard { + title: "Wi-Fi" + description: "Wifi Network" + Layout.fillWidth: true + Layout.preferredHeight: 40 + } + + ControlCenterCard { + title: "Bluetooth" + description: "Manage bluetooth devices." + Layout.fillWidth: true + Layout.preferredHeight: 40 + } + + // ControlCenterCard { + // title: "Bluetooth" + // description: "Manage bluetooth devices." + // Layout.fillWidth: true + // Layout.preferredHeight: 40 + // } + // + // ControlCenterCard { + // title: "Bluetooth" + // description: "Manage bluetooth devices." + // Layout.fillWidth: true + // Layout.preferredHeight: 40 + // } + + Item { + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } +} diff --git a/shell/bar/control/ControlCenterCard.qml b/shell/bar/control/ControlCenterCard.qml new file mode 100644 index 0000000..5017202 --- /dev/null +++ b/shell/bar/control/ControlCenterCard.qml @@ -0,0 +1,45 @@ +import QtQuick +import QtQuick.Layouts +import Quickshell.Widgets +import qs + +WrapperMouseArea { + id: root + + required property var title + required property var description + + RowLayout { + ColumnLayout { + Layout.fillWidth: true + Layout.fillHeight: true + + Text { + text: root.title + color: ShellSettings.colors.active + font.pointSize: 10 + } + + Text { + text: root.description + color: ShellSettings.colors.active.darker(2.0) + font.pointSize: 9 + } + } + + IconImage { + source: "root:resources/general/right-arrow.svg" + Layout.preferredWidth: height + Layout.fillHeight: true + Layout.alignment: Qt.AlignRight + Layout.margins: 2 + } + + // Rectangle { + // Layout.preferredWidth: height + // Layout.fillHeight: true + // Layout.alignment: Qt.AlignRight + // Layout.margins: 2 + // } + } +} diff --git a/shell/resources/volume/volume-low.svg b/shell/resources/volume/volume-low.svg new file mode 100644 index 0000000..69e95e5 --- /dev/null +++ b/shell/resources/volume/volume-low.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/shell/resources/volume/volume-off.svg b/shell/resources/volume/volume-off.svg new file mode 100644 index 0000000..f975a8b --- /dev/null +++ b/shell/resources/volume/volume-off.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/shell/widgets/StyledSlider.qml b/shell/widgets/StyledSlider.qml new file mode 100644 index 0000000..11b653a --- /dev/null +++ b/shell/widgets/StyledSlider.qml @@ -0,0 +1,55 @@ +pragma ComponentBehavior: Bound + +import QtQuick +import QtQuick.Controls +import Qt5Compat.GraphicalEffects +import ".." + +Slider { + id: slider + implicitHeight: 8 + property var accentColor: ShellSettings.colors.active + + background: Rectangle { + id: sliderContainer + width: slider.availableWidth + height: slider.implicitHeight + color: ShellSettings.colors.inactive + radius: 4 + anchors.verticalCenter: parent.verticalCenter + + layer.enabled: true + layer.effect: OpacityMask { + source: Rectangle { + width: sliderContainer.width + height: sliderContainer.height + radius: sliderContainer.radius + color: "white" + } + + maskSource: Rectangle { + width: sliderContainer.width + height: sliderContainer.height + radius: sliderContainer.radius + color: "black" + } + } + + Rectangle { + id: fill + width: slider.handle.width / 2 + slider.visualPosition * (sliderContainer.width - slider.handle.width) + height: sliderContainer.height + color: Qt.color(slider.accentColor ?? "purple").darker(1.2) + } + } + + handle: Rectangle { + id: handleRect + x: slider.visualPosition * (slider.availableWidth - width) + y: slider.topPadding + slider.availableHeight / 2 - height / 2 + width: 16 + height: 16 + radius: width / 2 + color: slider.pressed ? Qt.color(slider.accentColor ?? "purple").darker(1.5) : slider.accentColor ?? "purple" + } +}