extra sizing conditions for sys tray

This commit is contained in:
kossLAN 2025-06-09 18:37:40 -04:00
parent 3c79cc5213
commit d2149e0705
Signed by: kossLAN
SSH key fingerprint: SHA256:bdV0x+wdQHGJ6LgmstH3KV8OpWY+OOFmJcPcB0wQPV8
6 changed files with 147 additions and 73 deletions

View file

@ -21,22 +21,34 @@ Item {
hoverEnabled: true hoverEnabled: true
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
if (root.popup.content == powerMenu) {
root.popup.hide();
return;
}
root.popup.set(this, powerMenu); root.popup.set(this, powerMenu);
root.popup.show(); root.popup.show();
} }
} }
WrapperItem { Item {
id: powerMenu id: powerMenu
visible: false visible: false
implicitWidth: 250
implicitHeight: 80
MouseArea {
anchors.fill: parent
onClicked: {
console.log("why this work");
powerMenu.implicitWidth = 300;
}
}
ColumnLayout {
RowLayout { RowLayout {
id: powerProfiles anchors.fill: parent
implicitWidth: 300
implicitHeight: 60
// place holder until I figured out what I want to do with material // placeholder for now
ComboBox { ComboBox {
model: ["Power Save", "Balanced", "Performance"] model: ["Power Save", "Balanced", "Performance"]
currentIndex: PowerProfiles.profile currentIndex: PowerProfiles.profile
@ -44,7 +56,6 @@ Item {
} }
} }
} }
}
Rectangle { Rectangle {
id: highlight id: highlight

View file

@ -119,7 +119,7 @@ PopupWindow {
// needed to handle occurences where items are resized while open // needed to handle occurences where items are resized while open
onImplicitWidthChanged: { onImplicitWidthChanged: {
if (root.isOpen && popupContent.data !== []) { 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; let itemPos = root.item.mapToItem(root.bar.contentItem, 0, root.bar.height, root.item.width, 0).x;
root.position(itemPos); root.position(itemPos);
} }

View file

@ -49,6 +49,9 @@ RowLayout {
id: trayMenu id: trayMenu
visible: false visible: false
property var leftItem: false
property var rightItem: false
ColumnLayout { ColumnLayout {
id: menuContainer id: menuContainer
spacing: 2 spacing: 2
@ -56,11 +59,13 @@ RowLayout {
Repeater { Repeater {
model: menuOpener.children model: menuOpener.children
delegate: TrayMenu { delegate: TrayMenuItem {
id: sysTrayContent id: sysTrayContent
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
rootMenu: trayMenu
onInteracted: { onInteracted: {
root.popup.hide(); root.popup.hide();
menuOpener.menu = null; menuOpener.menu = null;

View file

@ -9,8 +9,19 @@ import "../.."
ColumnLayout { ColumnLayout {
id: root id: root
required property QsMenuEntry menuData required property QsMenuEntry menuData
required property var rootMenu
signal interacted signal interacted
Component.onCompleted: {
if (menuData?.buttonType !== QsMenuButtonType.None || menuData?.icon != "") {
rootMenu.leftItem = true;
}
if (!menuData?.hasChildren) {
rootMenu.rightItem = false;
}
}
WrapperRectangle { WrapperRectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 25 Layout.preferredHeight: 25
@ -48,6 +59,7 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Item { Item {
visible: root.rootMenu.leftItem
Layout.preferredWidth: 20 Layout.preferredWidth: 20
Layout.fillHeight: true Layout.fillHeight: true
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
@ -96,13 +108,14 @@ ColumnLayout {
} }
Item { Item {
visible: root.rootMenu.rightItem
Layout.preferredHeight: 20 Layout.preferredHeight: 20
Layout.preferredWidth: 20 Layout.preferredWidth: 20
Layout.rightMargin: 5 Layout.rightMargin: 5
Widgets.IconButton { Widgets.IconButton {
id: arrowButton id: arrowButton
visible: root.menuData?.hasChildren visible: root.menuData?.hasChildren ?? false
activeRectangle: false activeRectangle: false
source: "root:resources/general/right-arrow.svg" source: "root:resources/general/right-arrow.svg"
rotation: subTrayMenu.visible ? 90 : 0 rotation: subTrayMenu.visible ? 90 : 0
@ -146,9 +159,10 @@ ColumnLayout {
delegate: BoundComponent { delegate: BoundComponent {
id: subMenuEntry id: subMenuEntry
source: "TrayMenu.qml" source: "TrayMenuItem.qml"
Layout.fillWidth: true Layout.fillWidth: true
required property var modelData required property var modelData
property var rootMenu: root.rootMenu
} }
} }
} }

View file

@ -6,6 +6,8 @@ import "../.."
ColumnLayout { ColumnLayout {
id: root id: root
required property QsMenuEntry modelData required property QsMenuEntry modelData
required property var rootMenu
property var leftItem
signal interacted signal interacted
Rectangle { Rectangle {
@ -19,6 +21,7 @@ ColumnLayout {
TrayMenuEntry { TrayMenuEntry {
visible: !root.modelData?.isSeparator visible: !root.modelData?.isSeparator
rootMenu: root.rootMenu
menuData: root.modelData menuData: root.modelData
Layout.fillWidth: true Layout.fillWidth: true
onInteracted: root.interacted() onInteracted: root.interacted()

View file

@ -4,8 +4,8 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import Quickshell import Quickshell
import Quickshell.Widgets
import Quickshell.Services.Pipewire import Quickshell.Services.Pipewire
import "../widgets" as Widgets
import ".." import ".."
Scope { Scope {
@ -40,14 +40,10 @@ Scope {
active: root.shouldShowOsd active: root.shouldShowOsd
PanelWindow { PanelWindow {
// Since the panel's screen is unset, it will be picked by the compositor anchors.right: true
// when the window is created. Most compositors pick the current active monitor. margins.right: 5
implicitWidth: 50
anchors.bottom: true implicitHeight: 275
margins.bottom: 300
implicitWidth: 400
implicitHeight: 50
color: "transparent" color: "transparent"
// An empty click mask prevents the window from blocking mouse events. // An empty click mask prevents the window from blocking mouse events.
@ -55,65 +51,110 @@ Scope {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: 8 radius: width / 2
color: { color: ShellSettings.settings.colors["surface"]
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
}
Widgets.ColoredIcon {
implicitSize: 30
source: "root:resources/volume/volume-full.svg"
color: ShellSettings.settings.colors["inverse_surface"]
}
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);
}
Item {
id: sliderContainer
layer.enabled: true layer.enabled: true
layer.effect: OpacityMask { layer.effect: OpacityMask {
source: Rectangle { source: Rectangle {
width: sliderBackground.width width: sliderContainer.width
height: sliderBackground.height height: sliderContainer.height
radius: sliderBackground.radius radius: sliderContainer.width / 2
color: "white" color: "white"
} }
maskSource: Rectangle { maskSource: Rectangle {
width: sliderBackground.width width: sliderContainer.width
height: sliderBackground.height height: sliderContainer.height
radius: sliderBackground.radius radius: sliderContainer.width / 2
color: "black" color: "black"
} }
} }
Rectangle {
color: ShellSettings.settings.colors["primary"]
anchors { anchors {
left: parent.left fill: parent
top: parent.top margins: 8
bottom: parent.bottom
} }
implicitWidth: parent.width * (Pipewire.defaultAudioSink?.audio.volume ?? 0) Rectangle {
} 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
}
// 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)
// }
// }
// }
// }
} }
} }
} }