fix(StatusMenu): StatusSuccessAction is not taken into account for Me…

…nu width - StatusSuccessAction, despite its name, is a visual item (`MenuItem` -> `AbstractButton`) which is not part of the `contentModel` but just added to the menu container - therefore, calculate the maximum menu item width differently, using `FontMetrics` Fixes #14037
status-im · Sep 18, 2024 · f070fb7 · f070fb7
1 parent ea8827e
commit f070fb7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 24 deletions.
diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusMenu.qml b/ui/StatusQ/src/StatusQ/Popups/StatusMenu.qml
@@ -67,16 +67,6 @@ Menu {
     property var openHandler
     property var closeHandler
 
-    function checkIfEmpty() {
-        for (let i = 0; i < root.contentItem.count; ++i) {
-            const menuItem = root.contentItem.itemAtIndex(i)
-            if (menuItem.text !== undefined && menuItem.enabled) { // skip menu separators
-                return false
-            }
-        }
-        return true
-    }
-
     dim: false
     closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
     topPadding: 8
@@ -94,21 +84,34 @@ Menu {
         if (typeof closeHandler === "function") {
             closeHandler()
         }
+        d.maxDelegateImplWidth = 0
     }
 
     QtObject {
         id: d
         //helper property to get the max implicit width of the delegate
         property real maxDelegateImplWidth: 0
+
+        function calcMaxWidth() {
+            for (let i = 0; i < root.count; i++) {
+                const menuItem = root.itemAt(i)
+                if (!!menuItem && menuItem.text && menuItem.enabled) {
+                    metrics.font = menuItem.font
+                    d.maxDelegateImplWidth = Math.max(d.maxDelegateImplWidth, metrics.boundingRect(menuItem.text).width +
+                                                      menuItem.indicator.width + menuItem.horizontalPadding*4 + menuItem.spacing*4)
+                }
+            }
+        }
+
+        readonly property var metrics: FontMetrics {}
     }
 
+    Component.onCompleted: Qt.callLater(d.calcMaxWidth)
+    onAboutToShow: d.calcMaxWidth()
+
     delegate: StatusMenuItem {
         visible: root.hideDisabledItems && !visibleOnDisabled ? enabled : true
         height: visible ? implicitHeight : 0
-        onImplicitWidthChanged: {
-            if (visible)
-                d.maxDelegateImplWidth = Math.max(d.maxDelegateImplWidth, implicitWidth)
-        }
     }
 
     contentItem: StatusListView {

diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusMenuItem.qml b/ui/StatusQ/src/StatusQ/Popups/StatusMenuItem.qml
@@ -1,5 +1,5 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
+import QtQuick 2.15
+import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1

diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusSuccessAction.qml b/ui/StatusQ/src/StatusQ/Popups/StatusSuccessAction.qml
@@ -1,4 +1,4 @@
-import QtQuick 2.14
+import QtQuick 2.15
 
 import StatusQ.Popups 0.1
 
@@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
    \since StatusQ.Popups 0.1
    \brief Menu action displaying success state.
 
-   The \c StatusSuccessAction visually indicate a success state after being triggered.
+   The \c StatusSuccessAction visually indicates a success state after being triggered.
    Success state is showed by changing action type to \c{Success}.
 
    \qml
@@ -27,31 +27,31 @@ StatusMenuItem {
     id: root
 
     /*!
-       \qmlproperty bool StatusSuccessAction.qml::success
+       \qmlproperty bool StatusSuccessAction::success
        This property holds state of the action.
     */
     property bool success: false
     /*!
-       \qmlproperty string StatusSuccessAction.qml::successText
+       \qmlproperty string StatusSuccessAction::successText
        This property holds success text displayed on success state.
 
-       Default value is binded to \c{text}.
+       Default value is bound to \c{text}.
     */
     property string successText: text
     /*!
-       \qmlproperty string StatusSuccessAction.qml::successIconName
+       \qmlproperty string StatusSuccessAction::successIconName
        This property holds icon name displayed on success state.
 
        Default value is \c{tiny/checkmark}.
     */
     property string successIconName: "tiny/checkmark"
     /*!
-       \qmlproperty bool StatusSuccessAction.qml::autoDismissMenu
+       \qmlproperty bool StatusSuccessAction::autoDismissMenu
        This property enable menu closing on click.
     */
     property bool autoDismissMenu: false
     /*!
-       \qmlproperty int StatusSuccessAction.qml::timeout
+       \qmlproperty int StatusSuccessAction::timeout
        This property controls how long success state is showed.
     */
     property int timeout: 2000