never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix tray submenus

Browse source
This commit is contained in:
Ly-sec 2025-08-03 18:23:55 +02:00
parent 3ae0825fb5
commit bb8b552e36
2 changed files with 406 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

475
Bar/Modules/CustomTrayMenu.qml
View file

@ -1,9 +1,8 @@
pragma ComponentBehavior: Bound pragma ComponentBehavior: Bound
import QtQuick import QtQuick 2.15
import QtQuick.Controls import QtQuick.Controls 2.15
import QtQuick.Layouts import QtQuick.Layouts 1.15
import Quickshell import Quickshell
import Quickshell.Widgets
import qs.Settings import qs.Settings
PopupWindow { PopupWindow {
@ -22,116 +21,452 @@ PopupWindow {
anchor.rect.x: anchorX anchor.rect.x: anchorX
anchor.rect.y: anchorY - 4 anchor.rect.y: anchorY - 4
// Recursive function to destroy all open submenus in delegate tree, safely avoiding infinite recursion
function destroySubmenusRecursively(item) {
if (!item || !item.contentItem) return;
var children = item.contentItem.children;
for (var i = 0; i < children.length; ++i) {
var child = children[i];
if (child.subMenu) {
child.subMenu.hideMenu();
child.subMenu.destroy();
child.subMenu = null;
}
// Recursively destroy submenus only if the child has contentItem to prevent issues
if (child.contentItem) {
destroySubmenusRecursively(child);
}
}
}
function showAt(item, x, y) { function showAt(item, x, y) {
if (!item) { if (!item) {
console.warn("CustomTrayMenu: anchorItem is undefined, not showing menu."); console.warn("CustomTrayMenu: anchorItem is undefined, won't show menu.");
return; return;
} }
anchorItem = item anchorItem = item;
anchorX = x anchorX = x;
anchorY = y anchorY = y;
visible = true visible = true;
forceActiveFocus() forceActiveFocus();
Qt.callLater(() => trayMenu.anchor.updateAnchor()) Qt.callLater(() => trayMenu.anchor.updateAnchor());
} }
function hideMenu() { function hideMenu() {
visible = false visible = false;
destroySubmenusRecursively(listView);
} }
Item { Item {
anchors.fill: parent anchors.fill: parent;
Keys.onEscapePressed: trayMenu.hideMenu() Keys.onEscapePressed: trayMenu.hideMenu();
} }
QsMenuOpener { QsMenuOpener {
id: opener id: opener;
menu: trayMenu.menu menu: trayMenu.menu;
} }
Rectangle { Rectangle {
id: bg id: bg;
anchors.fill: parent anchors.fill: parent;
color: Theme.surfaceVariant || "#222" color: Theme.backgroundPrimary || "#222";
border.color: Theme.outline || "#444" border.color: Theme.outline || "#444";
border.width: 1 border.width: 1;
radius: 12 radius: 12;
z: 0 z: 0;
} }
ListView { ListView {
id: listView id: listView;
anchors.fill: parent anchors.fill: parent;
anchors.margins: 6 anchors.margins: 6;
spacing: 2 spacing: 2;
interactive: false interactive: false;
enabled: trayMenu.visible enabled: trayMenu.visible;
clip: true clip: true;
model: ScriptModel { model: ScriptModel {
values: opener.children ? [...opener.children.values] : [] values: opener.children ? [...opener.children.values] : []
} }
delegate: Rectangle { delegate: Rectangle {
id: entry id: entry;
required property var modelData required property var modelData;
width: listView.width width: listView.width;
height: (modelData?.isSeparator) ? 8 : 32 height: (modelData?.isSeparator) ? 8 : 32;
color: "transparent" color: "transparent";
radius: 12 radius: 12;
property var subMenu: null;
Rectangle { Rectangle {
anchors.centerIn: parent anchors.centerIn: parent;
width: parent.width - 20 width: parent.width - 20;
height: 1 height: 1;
color: Qt.darker(Theme.surfaceVariant || "#222", 1.4) color: Qt.darker(Theme.backgroundPrimary || "#222", 1.4);
visible: modelData?.isSeparator ?? false visible: modelData?.isSeparator ?? false;
} }
Rectangle { Rectangle {
id: bg id: bg;
anchors.fill: parent anchors.fill: parent;
color: mouseArea.containsMouse ? Theme.highlight : "transparent" color: mouseArea.containsMouse ? Theme.highlight : "transparent";
radius: 8 radius: 8;
visible: !(modelData?.isSeparator ?? false) visible: !(modelData?.isSeparator ?? false);
property color hoverTextColor: mouseArea.containsMouse ? Theme.onAccent : Theme.textPrimary property color hoverTextColor: mouseArea.containsMouse ? Theme.onAccent : Theme.textPrimary;
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent;
anchors.leftMargin: 12 anchors.leftMargin: 12;
anchors.rightMargin: 12 anchors.rightMargin: 12;
spacing: 8 spacing: 8;
Text { Text {
Layout.fillWidth: true Layout.fillWidth: true;
color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled;
text: modelData?.text ?? "" text: modelData?.text ?? "";
font.family: Theme.fontFamily font.family: Theme.fontFamily;
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall;
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter;
elide: Text.ElideRight elide: Text.ElideRight;
} }
IconImage { Image {
Layout.preferredWidth: 16 Layout.preferredWidth: 16;
Layout.preferredHeight: 16 Layout.preferredHeight: 16;
source: modelData?.icon ?? "" source: modelData?.icon ?? "";
visible: (modelData?.icon ?? "") !== "" visible: (modelData?.icon ?? "") !== "";
backer.fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit;
}
Text {
// Material Symbols Outlined chevron right for submenu
text: modelData?.hasChildren ? "menu" : "";
font.family: "Material Symbols Outlined";
font.pixelSize: 18;
verticalAlignment: Text.AlignVCenter;
visible: modelData?.hasChildren ?? false;
color: Theme.textPrimary;
} }
} }
MouseArea { MouseArea {
id: mouseArea id: mouseArea;
anchors.fill: parent anchors.fill: parent;
hoverEnabled: true hoverEnabled: true;
enabled: (modelData?.enabled ?? true) && !(modelData?.isSeparator ?? false) && trayMenu.visible enabled: (modelData?.enabled ?? true) && !(modelData?.isSeparator ?? false) && trayMenu.visible;
onClicked: { onClicked: {
if (modelData && !modelData.isSeparator) { if (modelData && !modelData.isSeparator) {
modelData.triggered() if (modelData.hasChildren) {
trayMenu.hideMenu() // Submenus open on hover; ignore click here
return;
}
modelData.triggered();
trayMenu.hideMenu();
}
}
onEntered: {
if (!trayMenu.visible) return;
if (modelData?.hasChildren) {
// Close sibling submenus immediately
for (let i = 0; i < listView.contentItem.children.length; i++) {
const sibling = listView.contentItem.children[i];
if (sibling !== entry && sibling.subMenu) {
sibling.subMenu.hideMenu();
sibling.subMenu.destroy();
sibling.subMenu = null;
}
}
if (entry.subMenu) {
entry.subMenu.hideMenu();
entry.subMenu.destroy();
entry.subMenu = null;
}
var globalPos = entry.mapToGlobal(0, 0);
var submenuWidth = 180;
var gap = 12;
var openLeft = (globalPos.x + entry.width + submenuWidth > Screen.width);
var anchorX = openLeft ? -submenuWidth - gap : entry.width + gap;
entry.subMenu = subMenuComponent.createObject(trayMenu, {
menu: modelData,
anchorItem: entry,
anchorX: anchorX,
anchorY: 0
});
entry.subMenu.showAt(entry, anchorX, 0);
} else {
// Hovered item without submenu; close siblings
for (let i = 0; i < listView.contentItem.children.length; i++) {
const sibling = listView.contentItem.children[i];
if (sibling.subMenu) {
sibling.subMenu.hideMenu();
sibling.subMenu.destroy();
sibling.subMenu = null;
}
}
if (entry.subMenu) {
entry.subMenu.hideMenu();
entry.subMenu.destroy();
entry.subMenu = null;
}
}
}
onExited: {
if (entry.subMenu && !entry.subMenu.containsMouse()) {
entry.subMenu.hideMenu();
entry.subMenu.destroy();
entry.subMenu = null;
}
}
}
}
// Simplified containsMouse without recursive calls to avoid stack overflow
function containsMouse() {
return mouseArea.containsMouse;
}
Component.onDestruction: {
if (subMenu) {
subMenu.destroy();
subMenu = null;
}
}
}
}
Component {
id: subMenuComponent;
PopupWindow {
id: subMenu;
implicitWidth: 180;
implicitHeight: Math.max(40, listView.contentHeight + 12);
visible: false;
color: "transparent";
property QsMenuHandle menu;
property var anchorItem: null;
property real anchorX;
property real anchorY;
anchor.item: anchorItem ? anchorItem : null;
anchor.rect.x: anchorX;
anchor.rect.y: anchorY;
function showAt(item, x, y) {
if (!item) {
console.warn("subMenuComponent: anchorItem is undefined, not showing menu.");
return;
}
anchorItem = item;
anchorX = x;
anchorY = y;
visible = true;
Qt.callLater(() => subMenu.anchor.updateAnchor());
}
function hideMenu() {
visible = false;
// Close all submenus recursively in this submenu
for (let i = 0; i < listView.contentItem.children.length; i++) {
const child = listView.contentItem.children[i];
if (child.subMenu) {
child.subMenu.hideMenu();
child.subMenu.destroy();
child.subMenu = null;
}
}
}
// Simplified containsMouse avoiding recursive calls
function containsMouse() {
return subMenu.containsMouse;
}
Item {
anchors.fill: parent;
Keys.onEscapePressed: subMenu.hideMenu();
}
QsMenuOpener {
id: opener;
menu: subMenu.menu;
}
Rectangle {
id: bg;
anchors.fill: parent;
color: Theme.backgroundPrimary || "#222";
border.color: Theme.outline || "#444";
border.width: 1;
radius: 12;
z: 0;
}
ListView {
id: listView;
anchors.fill: parent;
anchors.margins: 6;
spacing: 2;
interactive: false;
enabled: subMenu.visible;
clip: true;
model: ScriptModel {
values: opener.children ? [...opener.children.values] : [];
}
delegate: Rectangle {
id: entry;
required property var modelData;
width: listView.width;
height: (modelData?.isSeparator) ? 8 : 32;
color: "transparent";
radius: 12;
property var subMenu: null;
Rectangle {
anchors.centerIn: parent;
width: parent.width - 20;
height: 1;
color: Qt.darker(Theme.surfaceVariant || "#222", 1.4);
visible: modelData?.isSeparator ?? false;
}
Rectangle {
id: bg;
anchors.fill: parent;
color: mouseArea.containsMouse ? Theme.highlight : "transparent";
radius: 8;
visible: !(modelData?.isSeparator ?? false);
property color hoverTextColor: mouseArea.containsMouse ? Theme.onAccent : Theme.textPrimary;
RowLayout {
anchors.fill: parent;
anchors.leftMargin: 12;
anchors.rightMargin: 12;
spacing: 8;
Text {
Layout.fillWidth: true;
color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled;
text: modelData?.text ?? "";
font.family: Theme.fontFamily;
font.pixelSize: Theme.fontSizeSmall;
verticalAlignment: Text.AlignVCenter;
elide: Text.ElideRight;
}
Image {
Layout.preferredWidth: 16;
Layout.preferredHeight: 16;
source: modelData?.icon ?? "";
visible: (modelData?.icon ?? "") !== "";
fillMode: Image.PreserveAspectFit;
}
Text {
text: modelData?.hasChildren ? "\uE5CC" : "";
font.family: "Material Symbols Outlined";
font.pixelSize: 18;
verticalAlignment: Text.AlignVCenter;
visible: modelData?.hasChildren ?? false;
color: Theme.textPrimary;
}
}
MouseArea {
id: mouseArea;
anchors.fill: parent;
hoverEnabled: true;
enabled: (modelData?.enabled ?? true) && !(modelData?.isSeparator ?? false) && subMenu.visible;
onClicked: {
if (modelData && !modelData.isSeparator) {
if (modelData.hasChildren) {
return;
}
modelData.triggered();
trayMenu.hideMenu();
}
}
onEntered: {
if (!subMenu.visible) return;
if (modelData?.hasChildren) {
for (let i = 0; i < listView.contentItem.children.length; i++) {
const sibling = listView.contentItem.children[i];
if (sibling !== entry && sibling.subMenu) {
sibling.subMenu.hideMenu();
sibling.subMenu.destroy();
sibling.subMenu = null;
}
}
if (entry.subMenu) {
entry.subMenu.hideMenu();
entry.subMenu.destroy();
entry.subMenu = null;
}
var globalPos = entry.mapToGlobal(0, 0);
var submenuWidth = 180;
var gap = 12;
var openLeft = (globalPos.x + entry.width + submenuWidth > Screen.width);
var anchorX = openLeft ? -submenuWidth - gap : entry.width + gap;
entry.subMenu = subMenuComponent.createObject(subMenu, {
menu: modelData,
anchorItem: entry,
anchorX: anchorX,
anchorY: 0
});
entry.subMenu.showAt(entry, anchorX, 0);
} else {
for (let i = 0; i < listView.contentItem.children.length; i++) {
const sibling = listView.contentItem.children[i];
if (sibling.subMenu) {
sibling.subMenu.hideMenu();
sibling.subMenu.destroy();
sibling.subMenu = null;
}
}
if (entry.subMenu) {
entry.subMenu.hideMenu();
entry.subMenu.destroy();
entry.subMenu = null;
}
}
}
onExited: {
if (entry.subMenu && !entry.subMenu.containsMouse()) {
entry.subMenu.hideMenu();
entry.subMenu.destroy();
entry.subMenu = null;
}
}
}
}
// Simplified & safe containsMouse avoiding recursion
function containsMouse() {
return mouseArea.containsMouse;
}
Component.onDestruction: {
if (subMenu) {
subMenu.destroy();
subMenu = null;
} }
} }
} }

1
Bar/Modules/SystemTray.qml
View file

@ -113,7 +113,6 @@ Row {
modelData.secondaryActivate && modelData.secondaryActivate() modelData.secondaryActivate && modelData.secondaryActivate()
} else if (mouse.button === Qt.RightButton) { } else if (mouse.button === Qt.RightButton) {
trayTooltip.tooltipVisible = false trayTooltip.tooltipVisible = false
console.log("Right click on", modelData.id, "hasMenu:", modelData.hasMenu, "menu:", modelData.menu)
// If menu is already visible, close it // If menu is already visible, close it
if (trayMenu && trayMenu.visible) { if (trayMenu && trayMenu.visible) {
trayMenu.hideMenu() trayMenu.hideMenu()