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,27 +21,38 @@ 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
ColumnLayout { MouseArea {
RowLayout { anchors.fill: parent
id: powerProfiles onClicked: {
implicitWidth: 300 console.log("why this work");
implicitHeight: 60 powerMenu.implicitWidth = 300;
}
}
// place holder until I figured out what I want to do with material RowLayout {
ComboBox { anchors.fill: parent
model: ["Power Save", "Balanced", "Performance"]
currentIndex: PowerProfiles.profile // placeholder for now
onCurrentIndexChanged: PowerProfiles.profile = currentIndex ComboBox {
} model: ["Power Save", "Balanced", "Performance"]
currentIndex: PowerProfiles.profile
onCurrentIndexChanged: PowerProfiles.profile = currentIndex
} }
} }
} }

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 { Item {
anchors { id: sliderContainer
fill: parent layer.enabled: true
leftMargin: 10 layer.effect: OpacityMask {
rightMargin: 15 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 { anchors {
implicitSize: 30 fill: parent
source: "root:resources/volume/volume-full.svg" margins: 8
color: ShellSettings.settings.colors["inverse_surface"]
} }
Rectangle { Rectangle {
id: sliderBackground radius: width / 2
Layout.fillWidth: true color: ShellSettings.settings.colors["primary"]
implicitHeight: 10 implicitHeight: Math.max(parent.width, parent.height * (Pipewire.defaultAudioSink?.audio.volume ?? 0))
radius: 20
color: { anchors {
let color = ShellSettings.settings.colors["inverse_surface"]; bottom: parent.bottom
return Qt.rgba(color.r, color.g, color.b, 0.5); left: parent.left
right: parent.right
} }
layer.enabled: true // replace with material icon
layer.effect: OpacityMask { // IconImage {
source: Rectangle { // implicitSize: parent.width - 4
width: sliderBackground.width // source: "root:resources/volume/volume-full.svg"
height: sliderBackground.height //
radius: sliderBackground.radius // anchors {
color: "white" // horizontalCenter: parent.horizontalCenter
} // }
// }
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)
}
} }
} }
} }
// 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)
// }
// }
// }
// }
} }
} }
} }