From d2149e07053d31ec1a4551ea10a2018e22e8959e Mon Sep 17 00:00:00 2001 From: kossLAN Date: Mon, 9 Jun 2025 18:37:40 -0400 Subject: [PATCH] extra sizing conditions for sys tray --- bar/battery/BatteryIndicator.qml | 35 ++-- bar/popups/MenuWindow.qml | 2 +- bar/systray/SysTray.qml | 7 +- bar/systray/TrayMenuEntry.qml | 18 +- .../{TrayMenu.qml => TrayMenuItem.qml} | 3 + volume-osd/Controller.qml | 155 +++++++++++------- 6 files changed, 147 insertions(+), 73 deletions(-) rename bar/systray/{TrayMenu.qml => TrayMenuItem.qml} (86%) diff --git a/bar/battery/BatteryIndicator.qml b/bar/battery/BatteryIndicator.qml index 2b5c9ae..804a6f9 100644 --- a/bar/battery/BatteryIndicator.qml +++ b/bar/battery/BatteryIndicator.qml @@ -21,27 +21,38 @@ Item { hoverEnabled: true anchors.fill: parent onClicked: { + if (root.popup.content == powerMenu) { + root.popup.hide(); + return; + } + root.popup.set(this, powerMenu); root.popup.show(); } } - WrapperItem { + Item { id: powerMenu visible: false + implicitWidth: 250 + implicitHeight: 80 - ColumnLayout { - RowLayout { - id: powerProfiles - implicitWidth: 300 - implicitHeight: 60 + MouseArea { + anchors.fill: parent + onClicked: { + console.log("why this work"); + powerMenu.implicitWidth = 300; + } + } - // place holder until I figured out what I want to do with material - ComboBox { - model: ["Power Save", "Balanced", "Performance"] - currentIndex: PowerProfiles.profile - onCurrentIndexChanged: PowerProfiles.profile = currentIndex - } + RowLayout { + anchors.fill: parent + + // placeholder for now + ComboBox { + model: ["Power Save", "Balanced", "Performance"] + currentIndex: PowerProfiles.profile + onCurrentIndexChanged: PowerProfiles.profile = currentIndex } } } diff --git a/bar/popups/MenuWindow.qml b/bar/popups/MenuWindow.qml index 9ad5cf1..24708bd 100644 --- a/bar/popups/MenuWindow.qml +++ b/bar/popups/MenuWindow.qml @@ -119,7 +119,7 @@ PopupWindow { // needed to handle occurences where items are resized while open onImplicitWidthChanged: { if (root.isOpen && popupContent.data !== []) { - console.log("repositioning popup"); + // console.log("repositioning popup"); let itemPos = root.item.mapToItem(root.bar.contentItem, 0, root.bar.height, root.item.width, 0).x; root.position(itemPos); } diff --git a/bar/systray/SysTray.qml b/bar/systray/SysTray.qml index 2886cb8..a45446a 100644 --- a/bar/systray/SysTray.qml +++ b/bar/systray/SysTray.qml @@ -49,6 +49,9 @@ RowLayout { id: trayMenu visible: false + property var leftItem: false + property var rightItem: false + ColumnLayout { id: menuContainer spacing: 2 @@ -56,11 +59,13 @@ RowLayout { Repeater { model: menuOpener.children - delegate: TrayMenu { + delegate: TrayMenuItem { id: sysTrayContent Layout.fillWidth: true Layout.fillHeight: true + rootMenu: trayMenu + onInteracted: { root.popup.hide(); menuOpener.menu = null; diff --git a/bar/systray/TrayMenuEntry.qml b/bar/systray/TrayMenuEntry.qml index 4bfaae3..91f592e 100644 --- a/bar/systray/TrayMenuEntry.qml +++ b/bar/systray/TrayMenuEntry.qml @@ -9,8 +9,19 @@ import "../.." ColumnLayout { id: root required property QsMenuEntry menuData + required property var rootMenu signal interacted + Component.onCompleted: { + if (menuData?.buttonType !== QsMenuButtonType.None || menuData?.icon != "") { + rootMenu.leftItem = true; + } + + if (!menuData?.hasChildren) { + rootMenu.rightItem = false; + } + } + WrapperRectangle { Layout.fillWidth: true Layout.preferredHeight: 25 @@ -48,6 +59,7 @@ ColumnLayout { Layout.fillWidth: true Item { + visible: root.rootMenu.leftItem Layout.preferredWidth: 20 Layout.fillHeight: true Layout.alignment: Qt.AlignVCenter @@ -96,13 +108,14 @@ ColumnLayout { } Item { + visible: root.rootMenu.rightItem Layout.preferredHeight: 20 Layout.preferredWidth: 20 Layout.rightMargin: 5 Widgets.IconButton { id: arrowButton - visible: root.menuData?.hasChildren + visible: root.menuData?.hasChildren ?? false activeRectangle: false source: "root:resources/general/right-arrow.svg" rotation: subTrayMenu.visible ? 90 : 0 @@ -146,9 +159,10 @@ ColumnLayout { delegate: BoundComponent { id: subMenuEntry - source: "TrayMenu.qml" + source: "TrayMenuItem.qml" Layout.fillWidth: true required property var modelData + property var rootMenu: root.rootMenu } } } diff --git a/bar/systray/TrayMenu.qml b/bar/systray/TrayMenuItem.qml similarity index 86% rename from bar/systray/TrayMenu.qml rename to bar/systray/TrayMenuItem.qml index cb07c37..c72e5fa 100644 --- a/bar/systray/TrayMenu.qml +++ b/bar/systray/TrayMenuItem.qml @@ -6,6 +6,8 @@ import "../.." ColumnLayout { id: root required property QsMenuEntry modelData + required property var rootMenu + property var leftItem signal interacted Rectangle { @@ -19,6 +21,7 @@ ColumnLayout { TrayMenuEntry { visible: !root.modelData?.isSeparator + rootMenu: root.rootMenu menuData: root.modelData Layout.fillWidth: true onInteracted: root.interacted() diff --git a/volume-osd/Controller.qml b/volume-osd/Controller.qml index b693a57..fabf6bc 100644 --- a/volume-osd/Controller.qml +++ b/volume-osd/Controller.qml @@ -4,8 +4,8 @@ import QtQuick import QtQuick.Layouts import Qt5Compat.GraphicalEffects import Quickshell +import Quickshell.Widgets import Quickshell.Services.Pipewire -import "../widgets" as Widgets import ".." Scope { @@ -40,14 +40,10 @@ Scope { active: root.shouldShowOsd PanelWindow { - // Since the panel's screen is unset, it will be picked by the compositor - // when the window is created. Most compositors pick the current active monitor. - - anchors.bottom: true - margins.bottom: 300 - - implicitWidth: 400 - implicitHeight: 50 + anchors.right: true + margins.right: 5 + implicitWidth: 50 + implicitHeight: 275 color: "transparent" // An empty click mask prevents the window from blocking mouse events. @@ -55,65 +51,110 @@ Scope { Rectangle { anchors.fill: parent - radius: 8 - color: { - let color = ShellSettings.settings.colors["surface"]; - return Qt.rgba(color.r, color.g, color.b, 0.8); - } + radius: width / 2 + color: ShellSettings.settings.colors["surface"] - RowLayout { - anchors { - fill: parent - leftMargin: 10 - rightMargin: 15 + Item { + id: sliderContainer + layer.enabled: true + layer.effect: OpacityMask { + source: Rectangle { + width: sliderContainer.width + height: sliderContainer.height + radius: sliderContainer.width / 2 + color: "white" + } + + maskSource: Rectangle { + width: sliderContainer.width + height: sliderContainer.height + radius: sliderContainer.width / 2 + color: "black" + } } - Widgets.ColoredIcon { - implicitSize: 30 - source: "root:resources/volume/volume-full.svg" - color: ShellSettings.settings.colors["inverse_surface"] + anchors { + fill: parent + margins: 8 } Rectangle { - id: sliderBackground - Layout.fillWidth: true - implicitHeight: 10 - radius: 20 - color: { - let color = ShellSettings.settings.colors["inverse_surface"]; - return Qt.rgba(color.r, color.g, color.b, 0.5); + radius: width / 2 + color: ShellSettings.settings.colors["primary"] + implicitHeight: Math.max(parent.width, parent.height * (Pipewire.defaultAudioSink?.audio.volume ?? 0)) + + anchors { + bottom: parent.bottom + left: parent.left + right: parent.right } - layer.enabled: true - layer.effect: OpacityMask { - source: Rectangle { - width: sliderBackground.width - height: sliderBackground.height - radius: sliderBackground.radius - color: "white" - } - - maskSource: Rectangle { - width: sliderBackground.width - height: sliderBackground.height - radius: sliderBackground.radius - color: "black" - } - } - - Rectangle { - color: ShellSettings.settings.colors["primary"] - anchors { - left: parent.left - top: parent.top - bottom: parent.bottom - } - - implicitWidth: parent.width * (Pipewire.defaultAudioSink?.audio.volume ?? 0) - } + // replace with material icon + // IconImage { + // implicitSize: parent.width - 4 + // source: "root:resources/volume/volume-full.svg" + // + // anchors { + // horizontalCenter: parent.horizontalCenter + // } + // } } } } + + // Rectangle { + // anchors.fill: parent + // radius: 8 + // color: { + // let color = ShellSettings.settings.colors["surface"]; + // return Qt.rgba(color.r, color.g, color.b, 0.8); + // } + // + // RowLayout { + // anchors { + // fill: parent + // leftMargin: 10 + // rightMargin: 15 + // } + // + // IconImage { + // implicitSize: 30 + // source: "root:resources/volume/volume-full.svg" + // } + // + // Rectangle { + // id: sliderBackground + // Layout.fillWidth: true + // implicitHeight: 10 + // radius: 20 + // color: { + // let color = ShellSettings.settings.colors["inverse_surface"]; + // return Qt.rgba(color.r, color.g, color.b, 0.5); + // } + // + // layer.enabled: true + // layer.effect: OpacityMask { + // maskSource: Rectangle { + // width: sliderBackground.width + // height: sliderBackground.height + // radius: sliderBackground.radius + // color: "black" + // } + // } + // + // Rectangle { + // color: ShellSettings.settings.colors["primary"] + // anchors { + // left: parent.left + // top: parent.top + // bottom: parent.bottom + // } + // + // implicitWidth: parent.width * (Pipewire.defaultAudioSink?.audio.volume ?? 0) + // } + // } + // } + // } } } }