Refactor Menu Implementation with QfMenu Component (#6086)

Author: mohsenD98

src/qml/About.qml

@@ -189,21 +189,10 @@ Item {
     }
   }
 
-  Menu {
+  QfMenu {
     id: linksMenu
     title: qsTr("Links Menu")
 
-    width: {
-      var result = 0;
-      var padding = 0;
-      for (var i = 0; i < count; ++i) {
-        var item = itemAt(i);
-        result = Math.max(item.contentItem.implicitWidth, result);
-        padding = Math.max(item.padding, padding);
-      }
-      return result + padding * 2;
-    }
-
     MenuItem {
       text: qsTr('Changelog')
 

src/qml/LayerTreeItemProperties.qml

@@ -367,21 +367,10 @@ Popup {
     }
   }
 
-  Menu {
+  QfMenu {
     id: showFeaturesMenu
     title: qsTr("Show Features Menu")
 
-    width: {
-      var result = 0;
-      var padding = 0;
-      for (var i = 0; i < count; ++i) {
-        var item = itemAt(i);
-        result = Math.max(item.contentItem.implicitWidth, result);
-        padding = Math.max(item.padding, padding);
-      }
-      return result + padding * 2;
-    }
-
     MenuItem {
       text: qsTr('Show visible features list')
 

src/qml/NavigationBar.qml

@@ -483,21 +483,10 @@ Rectangle {
     }
   }
 
-  Menu {
+  QfMenu {
     id: featureListMenu
     title: qsTr("Feature List Menu")
 
-    width: {
-      let result = 50;
-      let padding = 0;
-      for (let i = 0; i < count; ++i) {
-        let item = itemAt(i);
-        result = Math.max(item.contentItem.implicitWidth, result);
-        padding = Math.max(item.leftPadding + item.rightPadding, padding);
-      }
-      return mainWindow.width > 0 ? Math.min(result + padding, mainWindow.width - 20) : result + padding;
-    }
-
     topMargin: mainWindow.sceneTopMargin
     bottomMargin: mainWindow.sceneBottomMargin
 
@@ -613,25 +602,13 @@ Rectangle {
     }
   }
 
-  Menu {
+  QfMenu {
     id: featureMenu
     title: qsTr("Feature Menu")
 
     topMargin: mainWindow.sceneTopMargin
     bottomMargin: mainWindow.sceneBottomMargin
 
-    width: {
-      const toolbarWidth = featureMenuActionsToolbar.childrenRect.width + 4;
-      let result = 50;
-      let padding = 0;
-      for (let i = 1; i < count; ++i) {
-        let item = itemAt(i);
-        result = Math.max(item.contentItem.implicitWidth, result);
-        padding = Math.max(item.leftPadding + item.rightPadding, padding);
-      }
-      return mainWindow.width > 0 ? Math.min(result + padding, mainWindow.width - 20) : result + padding;
-    }
-
     Row {
       id: featureMenuActionsToolbar
       leftPadding: 2
@@ -816,7 +793,7 @@ Rectangle {
     }
   }
 
-  Menu {
+  QfMenu {
     id: atlasMenu
 
     property alias printTimer: timer
@@ -826,17 +803,6 @@ Rectangle {
 
     signal enablePrintItem(int rows)
 
-    width: {
-      let result = 50;
-      let padding = 0;
-      for (let i = 0; i < count; ++i) {
-        let item = itemAt(i);
-        result = Math.max(item.contentItem.implicitWidth, result);
-        padding = Math.max(item.leftPadding + item.rightPadding, padding);
-      }
-      return mainWindow.width > 0 ? Math.min(result + padding, mainWindow.width - 20) : result + padding;
-    }
-
     topMargin: mainWindow.sceneTopMargin
     bottomMargin: mainWindow.sceneBottomMargin
 

src/qml/PluginManagerSettings.qml

@@ -204,21 +204,10 @@ Popup {
         }
       }
 
-      Menu {
+      QfMenu {
         id: pluginsManagementMenu
         title: qsTr('Plugins management menu')
 
-        width: {
-          let result = 50;
-          let padding = 0;
-          for (let i = 0; i < count; ++i) {
-            let item = itemAt(i);
-            result = Math.max(item.contentItem.implicitWidth, result);
-            padding = Math.max(item.leftPadding + item.rightPadding, padding);
-          }
-          return mainWindow.width > 0 ? Math.min(result + padding, mainWindow.width - 20) : result + padding;
-        }
-
         MenuItem {
           text: qsTr('Clear remembered permissions')
 

src/qml/QFieldCamera.qml

@@ -645,24 +645,13 @@ Popup {
       }
     }
 
-    Menu {
+    QfMenu {
       id: cameraSelectionMenu
 
       topMargin: sceneTopMargin
       bottomMargin: sceneBottomMargin
       z: 10000 // 1000s are embedded feature forms, use higher value
 
-      width: {
-        let result = 50;
-        let padding = 0;
-        for (let i = 0; i < count; ++i) {
-          let item = itemAt(i);
-          result = Math.max(item.contentItem.implicitWidth, result);
-          padding = Math.max(item.leftPadding + item.rightPadding, padding);
-        }
-        return mainWindow.width > 0 ? Math.min(result + padding, mainWindow.width - 20) : 0;
-      }
-
       Repeater {
         model: mediaDevices.videoInputs
 
@@ -693,24 +682,13 @@ Popup {
       }
     }
 
-    Menu {
+    QfMenu {
       id: resolutionSelectionMenu
 
       topMargin: sceneTopMargin
       bottomMargin: sceneBottomMargin
       z: 10000 // 1000s are embedded feature forms, use higher value
 
-      width: {
-        let result = 50;
-        let padding = 0;
-        for (let i = 0; i < count; ++i) {
-          let item = itemAt(i);
-          result = Math.max(item.contentItem.implicitWidth, result);
-          padding = Math.max(item.leftPadding + item.rightPadding, padding);
-        }
-        return mainWindow.width > 0 ? Math.min(result + padding, mainWindow.width - 20) : 0;
-      }
-
       function ratioFromResolution(resolution) {
         let smallerValue = Math.min(resolution.width, resolution.height);
         let gdc = 0;

src/qml/QFieldCloudScreen.qml

@@ -482,7 +482,7 @@ Page {
         }
       }
 
-      Menu {
+      QfMenu {
         id: projectActions
 
         property string projectId: ''
@@ -492,17 +492,6 @@ Page {
 
         title: qsTr('Project Actions')
 
-        width: {
-          let result = 50;
-          let padding = 0;
-          for (let i = 0; i < count; ++i) {
-            let item = itemAt(i);
-            result = Math.max(item.contentItem.implicitWidth, result);
-            padding = Math.max(item.leftPadding + item.rightPadding, padding);
-          }
-          return mainWindow.width > 0 ? Math.min(result + padding, mainWindow.width - 20) : result + padding;
-        }
-
         topMargin: mainWindow.sceneTopMargin
         bottomMargin: mainWindow.sceneBottomMargin
 

src/qml/QFieldLocalDataPickerScreen.qml

@@ -53,17 +53,6 @@ Page {
     }
   }
 
-  function determineMenuWidth(menu) {
-    let result = 50;
-    let padding = 0;
-    for (let i = 0; i < menu.count; ++i) {
-      let item = menu.itemAt(i);
-      result = Math.max(item.contentItem.implicitWidth, result);
-      padding = Math.max(item.leftPadding + item.rightPadding, padding);
-    }
-    return mainWindow.width > 0 ? Math.min(result + padding * 2, mainWindow.width - 20) : result + padding;
-  }
-
   ColumnLayout {
     id: files
     anchors.fill: parent
@@ -437,7 +426,7 @@ Page {
       }
     }
 
-    Menu {
+    QfMenu {
       id: itemMenu
 
       property int itemMetaType: 0
@@ -448,10 +437,9 @@ Page {
 
       title: qsTr('Item Actions')
 
-      width: determineMenuWidth(itemMenu)
-
       topMargin: sceneTopMargin
       bottomMargin: sceneBottomMargin
+      paddingMultiplier: 2
 
       // File items
       MenuItem {
@@ -642,15 +630,14 @@ Page {
       }
     }
 
-    Menu {
+    QfMenu {
       id: importMenu
 
       title: qsTr('Import Actions')
 
-      width: determineMenuWidth(importMenu)
-
       topMargin: sceneTopMargin
       bottomMargin: sceneBottomMargin
+      paddingMultiplier: 2
 
       MenuItem {
         id: importProjectFromFolder
@@ -756,15 +743,14 @@ Page {
       }
     }
 
-    Menu {
+    QfMenu {
       id: projectMenu
 
       title: qsTr('Project Actions')
 
-      width: determineMenuWidth(projectMenu)
-
       topMargin: sceneTopMargin
       bottomMargin: sceneBottomMargin
+      paddingMultiplier: 2
 
       MenuItem {
         id: updateProjectFromArchive
@@ -821,10 +807,10 @@ Page {
       }
     }
 
-    Menu {
+    QfMenu {
       id: selectionMenu
       x: parent.width - width - 8
-      width: determineMenuWidth(selectionMenu)
+      paddingMultiplier: 2
 
       MenuItem {
         id: uploadToWebdav

src/qml/WelcomeScreen.qml

@@ -685,25 +685,14 @@ Page {
                 }
               }
 
-              Menu {
+              QfMenu {
                 id: recentProjectActions
 
                 property string recentProjectPath: ''
                 property int recentProjectType: 0
 
                 title: qsTr('Recent Project Actions')
 
-                width: {
-                  let result = 50;
-                  let padding = 0;
-                  for (let i = 0; i < count; ++i) {
-                    let item = itemAt(i);
-                    result = Math.max(item.contentItem.implicitWidth, result);
-                    padding = Math.max(item.leftPadding + item.rightPadding, padding);
-                  }
-                  return mainWindow.width > 0 ? Math.min(result + padding, mainWindow.width - 20) : result + padding;
-                }
-
                 topMargin: mainWindow.sceneTopMargin
                 bottomMargin: mainWindow.sceneBottomMargin
 

src/qml/editorwidgets/EditorWidgetBase.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import Theme
 
 Item {
   /**
@@ -10,22 +11,11 @@ Item {
   property bool isLoaded: false
   property bool hasMenu: false
 
-  property Menu menu: Menu {
+  property Menu menu: QfMenu {
     id: itemMenu
     title: qsTr("Item Menu")
     z: 10000 // 1000s are embedded feature forms, use a higher value to insure feature form popups always show above embedded feature formes
 
-    width: {
-      let result = 50;
-      let padding = 0;
-      for (var i = 0; i < count; ++i) {
-        let item = itemAt(i);
-        result = Math.max(item.contentItem.implicitWidth, result);
-        padding = Math.max(item.leftPadding + item.rightPadding, padding);
-      }
-      return mainWindow.width > 0 ? Math.min(result + padding, mainWindow.width - 20) : result + padding;
-    }
-
     topMargin: mainWindow.sceneTopMargin
     bottomMargin: mainWindow.sceneBottomMargin
   }