From de526ffcf124dfe0f31ff19f6675de1c2406fe93 Mon Sep 17 00:00:00 2001
From: Ming Rui Zhang <mingrui.zhang@savoirfairelinux.com>
Date: Tue, 1 Jun 2021 17:16:40 -0400
Subject: [PATCH] generalMenuItem: enable text elide and width extension
Change-Id: I83897c81ed66313e84596bd7ab8cc3c79b56f47e
---
.../contextmenu/BaseContextMenu.qml | 8 ++
.../contextmenu/GeneralMenuItem.qml | 81 ++++++++++++-------
src/constant/JamiTheme.qml | 2 +
3 files changed, 64 insertions(+), 27 deletions(-)
diff --git a/src/commoncomponents/contextmenu/BaseContextMenu.qml b/src/commoncomponents/contextmenu/BaseContextMenu.qml
index 79c4e5508..9b100a693 100644
--- a/src/commoncomponents/contextmenu/BaseContextMenu.qml
+++ b/src/commoncomponents/contextmenu/BaseContextMenu.qml
@@ -50,6 +50,14 @@ Menu {
function loadMenuItems(menuItems) {
root.addItem(menuTopBorder)
+ // use the maximum text width as the preferred width for menu
+ for (var j = 0; j < menuItems.length; ++j) {
+ var currentItemWidth = menuItems[j].itemPreferredWidth
+ if (currentItemWidth !== JamiTheme.menuItemsPreferredWidth
+ && currentItemWidth > menuPreferredWidth)
+ menuPreferredWidth = currentItemWidth
+ }
+
for (var i = 0; i < menuItems.length; ++i) {
if (menuItems[i].canTrigger) {
menuItems[i].parentMenu = root
diff --git a/src/commoncomponents/contextmenu/GeneralMenuItem.qml b/src/commoncomponents/contextmenu/GeneralMenuItem.qml
index 173835590..6aa3edc7e 100644
--- a/src/commoncomponents/contextmenu/GeneralMenuItem.qml
+++ b/src/commoncomponents/contextmenu/GeneralMenuItem.qml
@@ -37,6 +37,7 @@ MenuItem {
property string iconColor: ""
property bool canTrigger: true
property bool addMenuSeparatorAfter: false
+ property bool autoTextSizeAdjustment: true
property BaseContextMenu parentMenu
property int itemPreferredWidth: JamiTheme.menuItemsPreferredWidth
@@ -59,35 +60,53 @@ MenuItem {
anchors.fill: parent
- ResponsiveImage {
- id: contextMenuItemImage
+ RowLayout {
+ spacing: 0
- anchors.left: status === Image.Ready ? menuItemContentRect.left : undefined
- anchors.leftMargin: (status === Image.Ready ? 24 : 0)
- anchors.verticalCenter: menuItemContentRect.verticalCenter
+ anchors.fill: menuItemContentRect
- color: iconColor !== "" ? iconColor : JamiTheme.textColor
+ ResponsiveImage {
+ id: contextMenuItemImage
- smooth: true
- opacity: 0.7
- }
-
- Text {
- id: contextMenuItemText
+ Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+ Layout.leftMargin: status === Image.Ready ? 24 : 0
- anchors.left: contextMenuItemImage.status === Image.Ready ?
- contextMenuItemImage.right : menuItemContentRect.left
- anchors.leftMargin: contextMenuItemImage.status === Image.Ready ? 20 : 10
- anchors.verticalCenter: menuItemContentRect.verticalCenter
+ visible: status === Image.Ready
- height: itemPreferredHeight
+ color: iconColor !== "" ? iconColor : JamiTheme.textColor
+ smooth: true
+ opacity: 0.7
+ }
- text: itemName
- color: JamiTheme.textColor
- wrapMode: Text.WordWrap
- font.pointSize: JamiTheme.textFontSize
- horizontalAlignment: Text.AlignLeft
- verticalAlignment: Text.AlignVCenter
+ Text {
+ id: contextMenuItemText
+
+ Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+ Layout.leftMargin: contextMenuItemImage.status === Image.Ready ? 20 : 10
+ Layout.rightMargin: contextMenuItemImage.status === Image.Ready ? 20 : 10
+ Layout.preferredHeight: itemPreferredHeight
+ Layout.preferredWidth: JamiTheme.contextMenuItemTextPreferredWidth
+
+ text: itemName
+ color: JamiTheme.textColor
+ font.pointSize: JamiTheme.textFontSize
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+ elide: Text.ElideRight
+
+ onWidthChanged: {
+ if (autoTextSizeAdjustment
+ && width > contextMenuItemText.Layout.preferredWidth) {
+ if (width > JamiTheme.contextMenuItemTextMaxWidth)
+ contextMenuItemText.Layout.preferredWidth
+ = JamiTheme.contextMenuItemTextMaxWidth
+ else
+ contextMenuItemText.Layout.preferredWidth = width
+ itemPreferredWidth += contextMenuItemText.Layout.preferredWidth
+ - JamiTheme.contextMenuItemTextPreferredWidth
+ }
+ }
+ }
}
onReleased: {
@@ -97,12 +116,20 @@ MenuItem {
states: [
State {
- name: "hovered"; when: hovered
- PropertyChanges { target: background; color: JamiTheme.hoverColor }
+ name: "hovered"
+ when: hovered
+ PropertyChanges {
+ target: background
+ color: JamiTheme.hoverColor
+ }
},
State {
- name: "normal"; when: !hovered
- PropertyChanges { target: background; color: JamiTheme.backgroundColor }
+ name: "normal"
+ when: !hovered
+ PropertyChanges {
+ target: background
+ color: JamiTheme.backgroundColor
+ }
}
]
}
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index d223ff360..e3cc33c61 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -197,6 +197,8 @@ Item {
property real smartListAvatarSize: 52
property real avatarSizeInCall: 130
property real callButtonPreferredSize: 50
+ property real contextMenuItemTextPreferredWidth: 142
+ property real contextMenuItemTextMaxWidth: 182
property int participantCallInStatusViewWidth: 175
property int participantCallInStatusViewHeight: 300
property int participantCallInStatusDelegateHeight: 85
--
GitLab