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

TrayMenu adaptation to colors, spacing, scaling, etc...

Browse source
This commit is contained in:
quadbyte 2025-08-10 23:39:03 -04:00
parent c64d14319e
commit f3530532c9
3 changed files with 50 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Modules/Bar/Tray.qml
View file

@ -94,7 +94,7 @@ Item {
if (modelData.hasMenu && modelData.menu && trayMenu) { if (modelData.hasMenu && modelData.menu && trayMenu) {
// Anchor the menu to the tray icon item (parent) and position it below the icon // Anchor the menu to the tray icon item (parent) and position it below the icon
const menuX = (width / 2) - (trayMenu.width / 2) const menuX = (width / 2) - (trayMenu.width / 2)
const menuY = height + 20 * scaling const menuY = (Style.barHeight * scaling)
trayMenu.menu = modelData.menu trayMenu.menu = modelData.menu
trayMenu.showAt(parent, menuX, menuY) trayMenu.showAt(parent, menuX, menuY)
} else { } else {

93
Modules/Bar/TrayMenu.qml
View file

@ -1,8 +1,6 @@
pragma ComponentBehavior import QtQuick
import QtQuick.Controls
import QtQuick 2.15 import QtQuick.Layouts
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import Quickshell import Quickshell
import qs.Services import qs.Services
import qs.Widgets import qs.Widgets
@ -16,8 +14,8 @@ PopupWindow {
property real anchorX property real anchorX
property real anchorY property real anchorY
implicitWidth: 180 implicitWidth: 180 * scaling
implicitHeight: Math.max(40, listView.contentHeight + 12) implicitHeight: Math.max(40 * scaling, listView.contentHeight + (Style.spacingMedium * 2 * scaling))
visible: false visible: false
color: "transparent" color: "transparent"
@ -77,16 +75,16 @@ PopupWindow {
anchors.fill: parent anchors.fill: parent
color: Colors.backgroundSecondary color: Colors.backgroundSecondary
border.color: Colors.outline border.color: Colors.outline
border.width: 1 border.width: Math.max(1, Style.borderThin * scaling)
radius: 12 radius: Style.radiusMedium * scaling
z: 0 z: 0
} }
ListView { ListView {
id: listView id: listView
anchors.fill: parent anchors.fill: parent
anchors.margins: 6 anchors.margins: Style.spacingMedium * scaling
spacing: 2 spacing: 0
interactive: false interactive: false
enabled: trayMenu.visible enabled: trayMenu.visible
clip: true clip: true
@ -100,17 +98,14 @@ PopupWindow {
required property var modelData required property var modelData
width: listView.width width: listView.width
height: (modelData?.isSeparator) ? 8 : 32 height: (modelData?.isSeparator) ? 8 * scaling : 32 * scaling
color: "transparent" color: "transparent"
radius: 12
property var subMenu: null property var subMenu: null
Rectangle { NDivider {
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width - 20 width: parent.width - (Style.marginMedium * scaling * 2)
height: 1
color: Qt.darker(Colors.backgroundPrimary, 1.4)
visible: modelData?.isSeparator ?? false visible: modelData?.isSeparator ?? false
} }
@ -118,19 +113,19 @@ PopupWindow {
id: bg id: bg
anchors.fill: parent anchors.fill: parent
color: mouseArea.containsMouse ? Colors.highlight : "transparent" color: mouseArea.containsMouse ? Colors.highlight : "transparent"
radius: 8 radius: Style.radiusSmall * scaling
visible: !(modelData?.isSeparator ?? false) visible: !(modelData?.isSeparator ?? false)
property color hoverTextColor: mouseArea.containsMouse ? Colors.onAccent : Colors.textPrimary
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 12 anchors.leftMargin: Style.marginMedium * scaling
anchors.rightMargin: 12 anchors.rightMargin: Style.marginMedium * scaling
spacing: 8 spacing: Style.marginSmall * scaling
NText { NText {
Layout.fillWidth: true Layout.fillWidth: true
color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Colors.textDisabled color: (modelData?.enabled
?? true) ? (mouseArea.containsMouse ? Colors.onAccent : Colors.textPrimary) : Colors.textDisabled
text: modelData?.text ?? "" text: modelData?.text ?? ""
font.pointSize: Colors.fontSizeSmall * scaling font.pointSize: Colors.fontSizeSmall * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@ -138,8 +133,8 @@ PopupWindow {
} }
Image { Image {
Layout.preferredWidth: 16 Layout.preferredWidth: 16 * scaling
Layout.preferredHeight: 16 Layout.preferredHeight: 16 * scaling
source: modelData?.icon ?? "" source: modelData?.icon ?? ""
visible: (modelData?.icon ?? "") !== "" visible: (modelData?.icon ?? "") !== ""
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
@ -193,8 +188,8 @@ PopupWindow {
entry.subMenu = null entry.subMenu = null
} }
var globalPos = entry.mapToGlobal(0, 0) var globalPos = entry.mapToGlobal(0, 0)
var submenuWidth = 180 var submenuWidth = 180 * scaling
var gap = 12 var gap = 12 * scaling
var openLeft = (globalPos.x + entry.width + submenuWidth > Screen.width) var openLeft = (globalPos.x + entry.width + submenuWidth > Screen.width)
var anchorX = openLeft ? -submenuWidth - gap : entry.width + gap var anchorX = openLeft ? -submenuWidth - gap : entry.width + gap
@ -247,12 +242,15 @@ PopupWindow {
} }
} }
// -----------------------------------------
// Sub Component
// -----------------------------------------
Component { Component {
id: subMenuComponent id: subMenuComponent
PopupWindow { PopupWindow {
id: subMenu id: subMenu
implicitWidth: 180 implicitWidth: 180 * scaling
implicitHeight: Math.max(40, listView.contentHeight + 12) implicitHeight: Math.max(40, listView.contentHeight + 12)
visible: false visible: false
color: "transparent" color: "transparent"
@ -311,16 +309,16 @@ PopupWindow {
anchors.fill: parent anchors.fill: parent
color: Colors.backgroundPrimary color: Colors.backgroundPrimary
border.color: Colors.outline border.color: Colors.outline
border.width: 1 border.width: Math.max(1, Style.borderThin * scaling)
radius: 12 radius: Style.radiusMedium * scaling
z: 0 z: 0
} }
ListView { ListView {
id: listView id: listView
anchors.fill: parent anchors.fill: parent
anchors.margins: 6 anchors.margins: Style.spacingSmall * scaling
spacing: 2 spacing: Style.spacingTiny * scaling
interactive: false interactive: false
enabled: subMenu.visible enabled: subMenu.visible
clip: true clip: true
@ -334,17 +332,14 @@ PopupWindow {
required property var modelData required property var modelData
width: listView.width width: listView.width
height: (modelData?.isSeparator) ? 8 : 32 height: (modelData?.isSeparator) ? 8 * scaling : 32 * scaling
color: "transparent" color: "transparent"
radius: 12
property var subMenu: null property var subMenu: null
Rectangle { NDivider {
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width - 20 width: parent.width - (Style.marginMedium * scaling * 2)
height: 1
color: Qt.darker(Colors.surfaceVariant, 1.4)
visible: modelData?.isSeparator ?? false visible: modelData?.isSeparator ?? false
} }
@ -352,33 +347,34 @@ PopupWindow {
id: bg id: bg
anchors.fill: parent anchors.fill: parent
color: mouseArea.containsMouse ? Colors.highlight : "transparent" color: mouseArea.containsMouse ? Colors.highlight : "transparent"
radius: 8 radius: Style.radiusSmall * scaling
visible: !(modelData?.isSeparator ?? false) visible: !(modelData?.isSeparator ?? false)
property color hoverTextColor: mouseArea.containsMouse ? Colors.onAccent : Colors.textPrimary property color hoverTextColor: mouseArea.containsMouse ? Colors.onAccent : Colors.textPrimary
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 12 anchors.leftMargin: Style.spacingMedium * scaling
anchors.rightMargin: 12 anchors.rightMargin: Style.spacingMedium * scaling
spacing: 8 spacing: Style.spacingSmall * scaling
NText { NText {
Layout.fillWidth: true Layout.fillWidth: true
color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Colors.textDisabled color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Colors.textDisabled
text: modelData?.text ?? "" text: modelData?.text ?? ""
font.pointSize: Colors.fontSizeSmall * Colors.scale(screen) font.pointSize: Colors.fontSizeSmall * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
Image { Image {
Layout.preferredWidth: 16 Layout.preferredWidth: 16 * scaling
Layout.preferredHeight: 16 Layout.preferredHeight: 16 * scaling
source: modelData?.icon ?? "" source: modelData?.icon ?? ""
visible: (modelData?.icon ?? "") !== "" visible: (modelData?.icon ?? "") !== ""
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
} }
// TBC a Square UTF-8?
NText { NText {
text: modelData?.hasChildren ? "\uE5CC" : "" text: modelData?.hasChildren ? "\uE5CC" : ""
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
@ -405,8 +401,9 @@ PopupWindow {
} }
onEntered: { onEntered: {
if (!subMenu.visible) if (!subMenu.visible) {
return return
}
if (modelData?.hasChildren) { if (modelData?.hasChildren) {
for (var i = 0; i < listView.contentItem.children.length; i++) { for (var i = 0; i < listView.contentItem.children.length; i++) {
@ -423,8 +420,8 @@ PopupWindow {
entry.subMenu = null entry.subMenu = null
} }
var globalPos = entry.mapToGlobal(0, 0) var globalPos = entry.mapToGlobal(0, 0)
var submenuWidth = 180 var submenuWidth = 180 * scaling
var gap = 12 var gap = 12 * scaling
var openLeft = (globalPos.x + entry.width + submenuWidth > Screen.width) var openLeft = (globalPos.x + entry.width + submenuWidth > Screen.width)
var anchorX = openLeft ? -submenuWidth - gap : entry.width + gap var anchorX = openLeft ? -submenuWidth - gap : entry.width + gap

2
Services/Style.qml
View file

@ -28,6 +28,7 @@ Singleton {
property int radiusLarge: 20 property int radiusLarge: 20
property int radiusMedium: 16 property int radiusMedium: 16
property int radiusSmall: 12 property int radiusSmall: 12
property int radiusTiny: 8
// Border // Border
property int borderThin: 1 property int borderThin: 1
@ -39,6 +40,7 @@ Singleton {
property int spacingLarge: 16 property int spacingLarge: 16
property int spacingMedium: 12 property int spacingMedium: 12
property int spacingSmall: 8 property int spacingSmall: 8
property int spacingTiny: 4
// Animation duration (ms) // Animation duration (ms)
property int animationFast: 150 property int animationFast: 150