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
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
}
}
}

View file

@ -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);
}

View file

@ -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;

View file

@ -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
}
}
}

View file

@ -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()

View file

@ -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)
// }
// }
// }
// }
}
}
}