Typography++
NText is now fontWeightRegular Transformed a few Text into NText Checked boldness Improved DemoPanel scaling and look
This commit is contained in:
quadbyte
parent
6ce7c7d55d
commit
c64d14319e
16 changed files with 584 additions and 180 deletions
480
Modules/Bar/TrayMenu.qml
Normal file
480
Modules/Bar/TrayMenu.qml
Normal file
|
|
@ -0,0 +1,480 @@
|
|||
pragma ComponentBehavior
|
||||
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import Quickshell
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
|
||||
PopupWindow {
|
||||
id: trayMenu
|
||||
|
||||
readonly property real scaling: Scaling.scale(screen)
|
||||
property QsMenuHandle menu
|
||||
property var anchorItem: null
|
||||
property real anchorX
|
||||
property real anchorY
|
||||
|
||||
implicitWidth: 180
|
||||
implicitHeight: Math.max(40, listView.contentHeight + 12)
|
||||
visible: false
|
||||
color: "transparent"
|
||||
|
||||
anchor.item: anchorItem ? anchorItem : null
|
||||
anchor.rect.x: anchorX
|
||||
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) {
|
||||
if (!item) {
|
||||
console.warn("CustomTrayMenu: anchorItem is undefined, won't show menu.")
|
||||
return
|
||||
}
|
||||
anchorItem = item
|
||||
anchorX = x
|
||||
anchorY = y
|
||||
visible = true
|
||||
forceActiveFocus()
|
||||
Qt.callLater(() => trayMenu.anchor.updateAnchor())
|
||||
}
|
||||
|
||||
function hideMenu() {
|
||||
visible = false
|
||||
destroySubmenusRecursively(listView)
|
||||
}
|
||||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
Keys.onEscapePressed: trayMenu.hideMenu()
|
||||
}
|
||||
|
||||
QsMenuOpener {
|
||||
id: opener
|
||||
menu: trayMenu.menu
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: bg
|
||||
anchors.fill: parent
|
||||
color: Colors.backgroundSecondary
|
||||
border.color: Colors.outline
|
||||
border.width: 1
|
||||
radius: 12
|
||||
z: 0
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: listView
|
||||
anchors.fill: parent
|
||||
anchors.margins: 6
|
||||
spacing: 2
|
||||
interactive: false
|
||||
enabled: trayMenu.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(Colors.backgroundPrimary, 1.4)
|
||||
visible: modelData?.isSeparator ?? false
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: bg
|
||||
anchors.fill: parent
|
||||
color: mouseArea.containsMouse ? Colors.highlight : "transparent"
|
||||
radius: 8
|
||||
visible: !(modelData?.isSeparator ?? false)
|
||||
property color hoverTextColor: mouseArea.containsMouse ? Colors.onAccent : Colors.textPrimary
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 12
|
||||
anchors.rightMargin: 12
|
||||
spacing: 8
|
||||
|
||||
NText {
|
||||
Layout.fillWidth: true
|
||||
color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Colors.textDisabled
|
||||
text: modelData?.text ?? ""
|
||||
font.pointSize: Colors.fontSizeSmall * scaling
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
Image {
|
||||
Layout.preferredWidth: 16
|
||||
Layout.preferredHeight: 16
|
||||
source: modelData?.icon ?? ""
|
||||
visible: (modelData?.icon ?? "") !== ""
|
||||
fillMode: Image.PreserveAspectFit
|
||||
}
|
||||
|
||||
// Chevron right for optional submenu
|
||||
Text {
|
||||
text: modelData?.hasChildren ? "menu" : ""
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pointSize: Colors.fontSizeMedium * scaling
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: modelData?.hasChildren ?? false
|
||||
color: Colors.textPrimary
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
enabled: (modelData?.enabled ?? true) && !(modelData?.isSeparator ?? false) && trayMenu.visible
|
||||
|
||||
onClicked: {
|
||||
if (modelData && !modelData.isSeparator) {
|
||||
if (modelData.hasChildren) {
|
||||
// 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 (var 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 (var 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 (var 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: Colors.backgroundPrimary
|
||||
border.color: Colors.outline
|
||||
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(Colors.surfaceVariant, 1.4)
|
||||
visible: modelData?.isSeparator ?? false
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: bg
|
||||
anchors.fill: parent
|
||||
color: mouseArea.containsMouse ? Colors.highlight : "transparent"
|
||||
radius: 8
|
||||
visible: !(modelData?.isSeparator ?? false)
|
||||
property color hoverTextColor: mouseArea.containsMouse ? Colors.onAccent : Colors.textPrimary
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 12
|
||||
anchors.rightMargin: 12
|
||||
spacing: 8
|
||||
|
||||
NText {
|
||||
Layout.fillWidth: true
|
||||
color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Colors.textDisabled
|
||||
text: modelData?.text ?? ""
|
||||
font.pointSize: Colors.fontSizeSmall * Colors.scale(screen)
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
Image {
|
||||
Layout.preferredWidth: 16
|
||||
Layout.preferredHeight: 16
|
||||
source: modelData?.icon ?? ""
|
||||
visible: (modelData?.icon ?? "") !== ""
|
||||
fillMode: Image.PreserveAspectFit
|
||||
}
|
||||
|
||||
NText {
|
||||
text: modelData?.hasChildren ? "\uE5CC" : ""
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pointSize: Colors.fontSizeMedium * scaling
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: modelData?.hasChildren ?? false
|
||||
}
|
||||
}
|
||||
|
||||
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 (var 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 (var 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue