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/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/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/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/RoundSlider.qml b/shell/widgets/StyledSlider.qml similarity index 92% rename from shell/widgets/RoundSlider.qml rename to shell/widgets/StyledSlider.qml index 0317963..11b653a 100644 --- a/shell/widgets/RoundSlider.qml +++ b/shell/widgets/StyledSlider.qml @@ -8,13 +8,13 @@ import ".." Slider { id: slider implicitHeight: 8 - property var accentColor: ShellSettings.colors["primary"] + property var accentColor: ShellSettings.colors.active background: Rectangle { id: sliderContainer width: slider.availableWidth height: slider.implicitHeight - color: ShellSettings.colors["inverse_surface"] + color: ShellSettings.colors.inactive radius: 4 anchors.verticalCenter: parent.verticalCenter