diff --git a/shell/bar/Bar.qml b/shell/bar/Bar.qml index e8f1ab7..d30bdad 100644 --- a/shell/bar/Bar.qml +++ b/shell/bar/Bar.qml @@ -73,11 +73,11 @@ Variants { Layout.fillHeight: true } - // VolumeIndicator { - // bar: root - // Layout.preferredWidth: this.height - // Layout.fillHeight: true - // } + VolumeIndicator { + bar: root + Layout.preferredWidth: this.height + Layout.fillHeight: true + } PowerMenu { bar: root diff --git a/shell/bar/Popup.qml b/shell/bar/Popup.qml index f8dada8..64a96de 100644 --- a/shell/bar/Popup.qml +++ b/shell/bar/Popup.qml @@ -63,7 +63,7 @@ Scope { LazyLoader { id: popupLoader - activeAsync: root.shownItem != null + active: root.shownItem != null PopupWindow { id: popup diff --git a/shell/bar/volume/VolumeCard.qml b/shell/bar/volume/VolumeCard.qml index ea085de..c431c30 100644 --- a/shell/bar/volume/VolumeCard.qml +++ b/shell/bar/volume/VolumeCard.qml @@ -5,19 +5,20 @@ import QtQuick.Layouts import QtQuick.Controls import Quickshell.Widgets import Quickshell.Services.Pipewire -import qs import qs.widgets +import qs Loader { id: root - active: node !== null + active: node != null required property PwNode node + property string label: node.nickname sourceComponent: WrapperRectangle { id: comp color: ShellSettings.colors.surface_container_translucent - radius: 12 + radius: 12 margin: 6 border { @@ -25,7 +26,6 @@ Loader { color: ShellSettings.colors.active_translucent } - // property string text // property Component button // property Component icon @@ -35,23 +35,48 @@ Loader { } RowLayout { - Slider { - value: root.node.audio.volume ?? 0 - // text: root.text - // icon: root.icon - - onValueChanged: { - // only allow changes when the node is ready other wise you will combust - if (!root.node.ready) - return; - - root.node.audio.volume = value; - } - + ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true + + Text { + text: root.label + color: ShellSettings.colors.active + elide: Text.ElideRight + Layout.fillWidth: true + Layout.fillHeight: true + } + + StyledSlider { + value: root.node.audio.volume ?? 0 + // text: root.text + // icon: root.icon + + onValueChanged: { + // only allow changes when the node is ready other wise you will combust + if (!root.node.ready) + return; + + root.node.audio.volume = value; + } + + Layout.fillWidth: true + Layout.fillHeight: true + } } + // StyledMouseArea { + // id: rightArrow + // Layout.preferredWidth: rightArrow.height + // // Layout.fillWidth: true + // Layout.fillHeight: true + // + // IconImage { + // source: "root:resources/general/right-arrow.svg" + // anchors.fill: parent + // } + // } + // Loader { // id: buttonLoader // sourceComponent: root.button diff --git a/shell/bar/volume/VolumeIndicator.qml b/shell/bar/volume/VolumeIndicator.qml index c251c4e..20b51ef 100644 --- a/shell/bar/volume/VolumeIndicator.qml +++ b/shell/bar/volume/VolumeIndicator.qml @@ -6,6 +6,7 @@ import Quickshell.Widgets import Quickshell.Services.Pipewire import qs.widgets import qs.bar +import qs StyledMouseArea { id: root @@ -34,31 +35,66 @@ StyledMouseArea { implicitWidth: 300 implicitHeight: container.implicitHeight + (2 * 8) - // implicitWidth: volumeMenu.implicitWidth - // implicitHeight: volumeMenu.implicitHeight - - // VolumeControl { - // id: volumeMenu - // } + property PwNode sink: Pipewire.defaultAudioSink + property real entryHeight: 45 ColumnLayout { id: container + spacing: 4 anchors { fill: parent margins: 8 } + // Default Audio VolumeCard { - node: Pipewire.defaultAudioSink + node: menu.sink Layout.fillWidth: true - Layout.preferredHeight: 45 + Layout.preferredHeight: menu.entryHeight } - VolumeCard { - node: Pipewire.defaultAudioSource + Rectangle { + color: ShellSettings.colors.active_translucent + radius: height / 2 + Layout.leftMargin: 3 + Layout.rightMargin: 3 Layout.fillWidth: true - Layout.preferredHeight: 45 + Layout.preferredHeight: 2 + } + + // Application Mixer + Loader { + id: sinkLoader + active: menu.sink + + Layout.fillWidth: true + Layout.preferredHeight: 5 * menu.entryHeight + + PwNodeLinkTracker { + id: linkTracker + node: menu.sink + } + + sourceComponent: ListView { + anchors.fill: parent + spacing: 6 + model: linkTracker.linkGroups + + delegate: Loader { + id: nodeLoader + active: modelData.source != null + width: ListView.view.width + height: menu.entryHeight + + required property PwLinkGroup modelData + + sourceComponent: VolumeCard { + node: nodeLoader.modelData.source + label: node.properties["media.name"] ?? "" + } + } + } } } } diff --git a/shell/resources/volume/volume-full.svg b/shell/resources/volume/volume-full.svg index 2c24be5..19bbfb1 100644 --- a/shell/resources/volume/volume-full.svg +++ b/shell/resources/volume/volume-full.svg @@ -1,6 +1,6 @@ - - + + diff --git a/shell/widgets/RoundSlider.qml b/shell/widgets/RoundSlider.qml deleted file mode 100644 index 0317963..0000000 --- a/shell/widgets/RoundSlider.qml +++ /dev/null @@ -1,55 +0,0 @@ -pragma ComponentBehavior: Bound - -import QtQuick -import QtQuick.Controls -import Qt5Compat.GraphicalEffects -import ".." - -Slider { - id: slider - implicitHeight: 8 - property var accentColor: ShellSettings.colors["primary"] - - background: Rectangle { - id: sliderContainer - width: slider.availableWidth - height: slider.implicitHeight - color: ShellSettings.colors["inverse_surface"] - 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" - } -}