mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-08-02 03:28:28 -04:00
system tray: fix overflow of menus
port 1.5
This commit is contained in:
bbedward
@@ -1752,7 +1752,11 @@ BasePill {
|
|||||||
id: trayMenuContainer
|
id: trayMenuContainer
|
||||||
|
|
||||||
readonly property real rawWidth: Math.min(500, Math.max(250, menuColumn.implicitWidth + Theme.spacingS * 2))
|
readonly property real rawWidth: Math.min(500, Math.max(250, menuColumn.implicitWidth + Theme.spacingS * 2))
|
||||||
readonly property real rawHeight: Math.max(40, menuColumn.implicitHeight + Theme.spacingS * 2)
|
readonly property real rawHeight: {
|
||||||
|
const desiredHeight = Math.max(40, menuColumn.implicitHeight + Theme.spacingS * 2);
|
||||||
|
const maxHeight = Math.max(40, menuWindow.maskHeight - 20);
|
||||||
|
return Math.min(desiredHeight, maxHeight);
|
||||||
|
}
|
||||||
|
|
||||||
readonly property real alignedWidth: Theme.px(rawWidth, menuWindow.dpr)
|
readonly property real alignedWidth: Theme.px(rawWidth, menuWindow.dpr)
|
||||||
readonly property real alignedHeight: Theme.px(rawHeight, menuWindow.dpr)
|
readonly property real alignedHeight: Theme.px(rawHeight, menuWindow.dpr)
|
||||||
@@ -1852,236 +1856,243 @@ BasePill {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Column {
|
DankFlickable {
|
||||||
id: menuColumn
|
id: menuFlickable
|
||||||
|
anchors.fill: parent
|
||||||
|
anchors.margins: Theme.spacingS
|
||||||
|
contentWidth: width
|
||||||
|
contentHeight: menuColumn.implicitHeight
|
||||||
|
clip: true
|
||||||
|
interactive: contentHeight > height
|
||||||
|
|
||||||
width: parent.width - Theme.spacingS * 2
|
Column {
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
id: menuColumn
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.topMargin: Theme.spacingS
|
|
||||||
spacing: 1
|
|
||||||
|
|
||||||
Rectangle {
|
width: menuFlickable.width
|
||||||
visible: entryStack.count === 0
|
spacing: 1
|
||||||
width: parent.width
|
|
||||||
height: 28
|
|
||||||
radius: Theme.cornerRadius
|
|
||||||
color: visibilityToggleArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(Theme.surfaceContainer, 0)
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.leftMargin: Theme.spacingS
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
text: {
|
|
||||||
const itemId = menuRoot.trayItem?.id || "Unknown";
|
|
||||||
if (root.isAutoOverflowTrayItem(menuRoot.trayItem))
|
|
||||||
return itemId + " · " + I18n.tr("Keep in Bar");
|
|
||||||
return itemId;
|
|
||||||
}
|
|
||||||
font.pixelSize: Theme.fontSizeSmall
|
|
||||||
color: Theme.surfaceTextMedium
|
|
||||||
elide: Text.ElideMiddle
|
|
||||||
width: parent.width - Theme.spacingS * 2 - 24
|
|
||||||
}
|
|
||||||
|
|
||||||
DankIcon {
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.rightMargin: Theme.spacingS
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
name: {
|
|
||||||
if (root.isAutoOverflowTrayItem(menuRoot.trayItem))
|
|
||||||
return "push_pin";
|
|
||||||
return root.isManualHiddenTrayItem(menuRoot.trayItem) ? "visibility" : "visibility_off";
|
|
||||||
}
|
|
||||||
size: 16
|
|
||||||
color: Theme.widgetTextColor
|
|
||||||
}
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
id: visibilityToggleArea
|
|
||||||
anchors.fill: parent
|
|
||||||
hoverEnabled: true
|
|
||||||
cursorShape: Qt.PointingHandCursor
|
|
||||||
onClicked: {
|
|
||||||
const itemKey = root.getTrayItemKey(menuRoot.trayItem);
|
|
||||||
if (!itemKey)
|
|
||||||
return;
|
|
||||||
if (root.isAutoOverflowTrayItem(menuRoot.trayItem)) {
|
|
||||||
root.promoteTrayItemToBar(menuRoot.trayItem);
|
|
||||||
} else if (root.isManualHiddenTrayItem(menuRoot.trayItem)) {
|
|
||||||
SessionData.showTrayId(itemKey);
|
|
||||||
} else {
|
|
||||||
SessionData.hideTrayId(itemKey);
|
|
||||||
}
|
|
||||||
menuRoot.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
visible: entryStack.count === 0
|
|
||||||
width: parent.width
|
|
||||||
height: 1
|
|
||||||
color: Theme.outlineHeavy
|
|
||||||
}
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
visible: entryStack.count > 0
|
|
||||||
width: parent.width
|
|
||||||
height: 28
|
|
||||||
radius: Theme.cornerRadius
|
|
||||||
color: backArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(Theme.surfaceContainer, 0)
|
|
||||||
|
|
||||||
Row {
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.leftMargin: Theme.spacingS
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
spacing: Theme.spacingXS
|
|
||||||
|
|
||||||
DankIcon {
|
|
||||||
name: "arrow_back"
|
|
||||||
size: 16
|
|
||||||
color: Theme.widgetTextColor
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledText {
|
|
||||||
text: I18n.tr("Back")
|
|
||||||
font.pixelSize: Theme.fontSizeSmall
|
|
||||||
color: Theme.widgetTextColor
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
id: backArea
|
|
||||||
anchors.fill: parent
|
|
||||||
hoverEnabled: true
|
|
||||||
cursorShape: Qt.PointingHandCursor
|
|
||||||
onClicked: menuRoot.goBack()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
visible: entryStack.count > 0
|
|
||||||
width: parent.width
|
|
||||||
height: 1
|
|
||||||
color: Theme.outlineHeavy
|
|
||||||
}
|
|
||||||
|
|
||||||
Repeater {
|
|
||||||
model: entryStack.count ? (subOpener.children ? subOpener.children : (menuRoot.topEntry()?.children || [])) : rootOpener.children
|
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
property var menuEntry: modelData
|
visible: entryStack.count === 0
|
||||||
|
width: parent.width
|
||||||
|
height: 28
|
||||||
|
radius: Theme.cornerRadius
|
||||||
|
color: visibilityToggleArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(Theme.surfaceContainer, 0)
|
||||||
|
|
||||||
width: menuColumn.width
|
StyledText {
|
||||||
height: menuEntry?.isSeparator ? 1 : 28
|
anchors.left: parent.left
|
||||||
radius: menuEntry?.isSeparator ? 0 : Theme.cornerRadius
|
anchors.leftMargin: Theme.spacingS
|
||||||
color: {
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
if (menuEntry?.isSeparator)
|
text: {
|
||||||
return Theme.outlineHeavy;
|
const itemId = menuRoot.trayItem?.id || "Unknown";
|
||||||
return itemArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(Theme.surfaceContainer, 0);
|
if (root.isAutoOverflowTrayItem(menuRoot.trayItem))
|
||||||
|
return itemId + " · " + I18n.tr("Keep in Bar");
|
||||||
|
return itemId;
|
||||||
|
}
|
||||||
|
font.pixelSize: Theme.fontSizeSmall
|
||||||
|
color: Theme.surfaceTextMedium
|
||||||
|
elide: Text.ElideMiddle
|
||||||
|
width: parent.width - Theme.spacingS * 2 - (Theme.iconSizeSmall + Theme.spacingS)
|
||||||
|
}
|
||||||
|
|
||||||
|
DankIcon {
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: Theme.spacingS
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
name: {
|
||||||
|
if (root.isAutoOverflowTrayItem(menuRoot.trayItem))
|
||||||
|
return "push_pin";
|
||||||
|
return root.isManualHiddenTrayItem(menuRoot.trayItem) ? "visibility" : "visibility_off";
|
||||||
|
}
|
||||||
|
size: Theme.iconSizeSmall
|
||||||
|
color: Theme.widgetTextColor
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
id: itemArea
|
id: visibilityToggleArea
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
enabled: !menuEntry?.isSeparator && (menuEntry?.enabled !== false)
|
|
||||||
cursorShape: Qt.PointingHandCursor
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
if (!menuEntry || menuEntry.isSeparator)
|
const itemKey = root.getTrayItemKey(menuRoot.trayItem);
|
||||||
return;
|
if (!itemKey)
|
||||||
if (menuEntry.hasChildren) {
|
|
||||||
menuRoot.showSubMenu(menuEntry);
|
|
||||||
return;
|
return;
|
||||||
|
if (root.isAutoOverflowTrayItem(menuRoot.trayItem)) {
|
||||||
|
root.promoteTrayItemToBar(menuRoot.trayItem);
|
||||||
|
} else if (root.isManualHiddenTrayItem(menuRoot.trayItem)) {
|
||||||
|
SessionData.showTrayId(itemKey);
|
||||||
|
} else {
|
||||||
|
SessionData.hideTrayId(itemKey);
|
||||||
}
|
}
|
||||||
|
menuRoot.close();
|
||||||
if (typeof menuEntry.activate === "function") {
|
|
||||||
menuEntry.activate();
|
|
||||||
} else if (typeof menuEntry.triggered === "function") {
|
|
||||||
menuEntry.triggered();
|
|
||||||
}
|
|
||||||
pendingActionCloseTimer.restart();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
visible: entryStack.count === 0
|
||||||
|
width: parent.width
|
||||||
|
height: 1
|
||||||
|
color: Theme.outlineHeavy
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
visible: entryStack.count > 0
|
||||||
|
width: parent.width
|
||||||
|
height: 28
|
||||||
|
radius: Theme.cornerRadius
|
||||||
|
color: backArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(Theme.surfaceContainer, 0)
|
||||||
|
|
||||||
Row {
|
Row {
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.leftMargin: Theme.spacingS
|
anchors.leftMargin: Theme.spacingS
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.rightMargin: Theme.spacingS
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
spacing: Theme.spacingXS
|
spacing: Theme.spacingXS
|
||||||
visible: !menuEntry?.isSeparator
|
|
||||||
|
|
||||||
Rectangle {
|
DankIcon {
|
||||||
width: 16
|
name: "arrow_back"
|
||||||
height: 16
|
size: Theme.iconSizeSmall
|
||||||
|
color: Theme.widgetTextColor
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
visible: menuEntry?.buttonType !== undefined && menuEntry.buttonType !== 0
|
|
||||||
radius: menuEntry?.buttonType === 2 ? 8 : 2
|
|
||||||
border.width: 1
|
|
||||||
border.color: Theme.outline
|
|
||||||
color: "transparent"
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
width: parent.width - 6
|
|
||||||
height: parent.height - 6
|
|
||||||
radius: parent.radius - 3
|
|
||||||
color: Theme.primary
|
|
||||||
visible: menuEntry?.checkState === 2
|
|
||||||
}
|
|
||||||
|
|
||||||
DankIcon {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
name: "check"
|
|
||||||
size: 10
|
|
||||||
color: Theme.primaryText
|
|
||||||
visible: menuEntry?.buttonType === 1 && menuEntry?.checkState === 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
width: 16
|
|
||||||
height: 16
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
visible: (menuEntry?.icon ?? "") !== ""
|
|
||||||
|
|
||||||
Image {
|
|
||||||
anchors.fill: parent
|
|
||||||
source: menuEntry?.icon || ""
|
|
||||||
sourceSize.width: 16
|
|
||||||
sourceSize.height: 16
|
|
||||||
fillMode: Image.PreserveAspectFit
|
|
||||||
smooth: true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
StyledText {
|
StyledText {
|
||||||
text: menuEntry?.text || ""
|
text: I18n.tr("Back")
|
||||||
font.pixelSize: Theme.fontSizeSmall
|
font.pixelSize: Theme.fontSizeSmall
|
||||||
color: (menuEntry?.enabled !== false) ? Theme.surfaceText : Theme.surfaceTextMedium
|
color: Theme.widgetTextColor
|
||||||
elide: Text.ElideRight
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
width: Math.max(150, parent.width - 64)
|
}
|
||||||
wrapMode: Text.NoWrap
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: backArea
|
||||||
|
anchors.fill: parent
|
||||||
|
hoverEnabled: true
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
onClicked: menuRoot.goBack()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
visible: entryStack.count > 0
|
||||||
|
width: parent.width
|
||||||
|
height: 1
|
||||||
|
color: Theme.outlineHeavy
|
||||||
|
}
|
||||||
|
|
||||||
|
Repeater {
|
||||||
|
model: entryStack.count ? (subOpener.children ? subOpener.children : (menuRoot.topEntry()?.children || [])) : rootOpener.children
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
property var menuEntry: modelData
|
||||||
|
|
||||||
|
width: menuColumn.width
|
||||||
|
height: menuEntry?.isSeparator ? 1 : 28
|
||||||
|
radius: menuEntry?.isSeparator ? 0 : Theme.cornerRadius
|
||||||
|
color: {
|
||||||
|
if (menuEntry?.isSeparator)
|
||||||
|
return Theme.outlineHeavy;
|
||||||
|
return itemArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(Theme.surfaceContainer, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
MouseArea {
|
||||||
width: 16
|
id: itemArea
|
||||||
height: 16
|
anchors.fill: parent
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
hoverEnabled: true
|
||||||
|
enabled: !menuEntry?.isSeparator && (menuEntry?.enabled !== false)
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
|
||||||
DankIcon {
|
onClicked: {
|
||||||
anchors.centerIn: parent
|
if (!menuEntry || menuEntry.isSeparator)
|
||||||
name: "chevron_right"
|
return;
|
||||||
size: 14
|
if (menuEntry.hasChildren) {
|
||||||
color: Theme.widgetTextColor
|
menuRoot.showSubMenu(menuEntry);
|
||||||
visible: menuEntry?.hasChildren ?? false
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof menuEntry.activate === "function") {
|
||||||
|
menuEntry.activate();
|
||||||
|
} else if (typeof menuEntry.triggered === "function") {
|
||||||
|
menuEntry.triggered();
|
||||||
|
}
|
||||||
|
pendingActionCloseTimer.restart();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Row {
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: Theme.spacingS
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: Theme.spacingS
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
spacing: Theme.spacingXS
|
||||||
|
visible: !menuEntry?.isSeparator
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
width: Theme.iconSizeSmall
|
||||||
|
height: Theme.iconSizeSmall
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
visible: menuEntry?.buttonType !== undefined && menuEntry.buttonType !== 0
|
||||||
|
radius: menuEntry?.buttonType === 2 ? width / 2 : 2
|
||||||
|
border.width: 1
|
||||||
|
border.color: Theme.outline
|
||||||
|
color: "transparent"
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
width: parent.width - 6
|
||||||
|
height: parent.height - 6
|
||||||
|
radius: parent.radius - 3
|
||||||
|
color: Theme.primary
|
||||||
|
visible: menuEntry?.checkState === 2
|
||||||
|
}
|
||||||
|
|
||||||
|
DankIcon {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
name: "check"
|
||||||
|
size: Theme.iconSizeSmall - 6
|
||||||
|
color: Theme.primaryText
|
||||||
|
visible: menuEntry?.buttonType === 1 && menuEntry?.checkState === 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
width: Theme.iconSizeSmall
|
||||||
|
height: Theme.iconSizeSmall
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
visible: (menuEntry?.icon ?? "") !== ""
|
||||||
|
|
||||||
|
Image {
|
||||||
|
anchors.fill: parent
|
||||||
|
source: menuEntry?.icon || ""
|
||||||
|
sourceSize.width: Theme.iconSizeSmall
|
||||||
|
sourceSize.height: Theme.iconSizeSmall
|
||||||
|
fillMode: Image.PreserveAspectFit
|
||||||
|
smooth: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: menuEntry?.text || ""
|
||||||
|
font.pixelSize: Theme.fontSizeSmall
|
||||||
|
color: (menuEntry?.enabled !== false) ? Theme.surfaceText : Theme.surfaceTextMedium
|
||||||
|
elide: Text.ElideRight
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
width: Math.max(150, parent.width - 64)
|
||||||
|
wrapMode: Text.NoWrap
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
width: Theme.iconSizeSmall
|
||||||
|
height: Theme.iconSizeSmall
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
|
||||||
|
DankIcon {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
name: "chevron_right"
|
||||||
|
size: Theme.iconSizeSmall - 2
|
||||||
|
color: Theme.widgetTextColor
|
||||||
|
visible: menuEntry?.hasChildren ?? false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user