fix(StatusMenuItemDelegate): Use Control padding, spacing and mirrored

Author: igor-sirotin

sandbox/pages/StatusPopupMenuPage.qml

@@ -65,14 +65,8 @@ GridLayout {
             assetSettings.name: "info"
         }
 
-        StatusMenuItem { 
-            text: "Three [disabled]"
-            assetSettings.name: "info"
-            enabled: false
-        }
-
         StatusPopupMenu {
-            title: "Four"
+            title: "Two"
             assetSettings.name: "info"
 
             StatusMenuItem { 
@@ -86,14 +80,19 @@ GridLayout {
         }
 
         StatusMenuItem {
-            text: "Five [Danger]"
+            text: "Disabled"
+            assetSettings.name: "info"
+            enabled: false
+        }
+
+        StatusMenuItem {
+            text: "Danger"
             type: StatusMenuItem.Type.Danger
         }
     }
 
     StatusPopupMenu {
         id: customMenu
-        width: customPopupButton.width
 
 //        subMenuItemIcons: [
 //            {
@@ -108,10 +107,6 @@ GridLayout {
 //            }
 //        ]
 
-        MenuItem {
-            text: "Default MenuItem, action: " + action
-        }
-
         StatusMenuItem {
             text: "Anywhere"
         }
@@ -139,7 +134,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
 
         StatusPopupMenu {
             title: "Cryptokitties"
-            assetSettings.source: "qrc:/demoapp/data/profile-image-1.jpeg"
+            assetSettings.isImage: true
+            assetSettings.name: "qrc:/demoapp/data/profile-image-1.jpeg"
 
             StatusMenuItem { 
                 text: "welcome" 
@@ -164,7 +160,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         StatusPopupMenu {
             title: "Another community"
             assetSettings.isLetterIdenticon: true
-            assetSettings.color: "red"
+            assetSettings.bgColor: "red"
 
             StatusMenuItem { 
                 text: "welcome" 

src/StatusQ/Popups/StatusMenuItemDelegate.qml

@@ -12,6 +12,9 @@ MenuItem {
     implicitHeight: menu.hideDisabledItems && !enabled ? 0 : 38
     objectName: action ? action.objectName : "StatusMenuItemDelegate"
 
+    spacing: 4
+    horizontalPadding: 8
+
 //    property int subMenuIndex
 //    property var statusPopupMenu: null
 
@@ -33,6 +36,7 @@ MenuItem {
 
         readonly property bool isSubMenu: !!root.subMenu
         readonly property bool isStatusSubMenu: isSubMenu && (root.subMenu instanceof StatusPopupMenu)
+        readonly property bool subMenuOpened: isSubMenu && root.subMenu.opened
         readonly property bool hasAction: !!root.action
         readonly property bool isStatusAction: d.hasAction && (root.action instanceof StatusMenuItem)
         readonly property bool isDangerIcon: d.isStatusAction && root.action.type === StatusMenuItem.Type.Danger
@@ -72,6 +76,8 @@ MenuItem {
                 const c = d.assetSettings.color;
                 if (!Qt.colorEqual(c, "transparent"))
                     return c;
+                if (!root.enabled)
+                    return Theme.palette.baseColor1;
                 if (d.isDangerIcon)
                     return Theme.palette.dangerColor1;
                 return Theme.palette.primaryColor1;
@@ -104,14 +110,21 @@ MenuItem {
     }
 
     indicator: Item {
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: 8
+        x: root.mirrored ? root.width - width - root.rightPadding : root.leftPadding
+        y: root.topPadding + (root.availableHeight - height) / 2
+
+//        anchors.verticalCenter: parent.verticalCenter
+//        anchors.left: parent.left
+//        anchors.leftMargin: root.leftPadding
         implicitWidth: 24
         implicitHeight: 24
+        visible: d.assetSettings.isLetterIdenticon
+                 || d.assetSettings.isImage
+                 || !!d.assetSettings.name
 
         Loader {
             anchors.centerIn: parent
+            active: parent.visible
             sourceComponent: {
                 if (d.assetSettings.isImage)
                     return indicatorImage;
@@ -120,24 +133,25 @@ MenuItem {
                 return indicatorIcon;
             }
 
-            active: enabled
-                    && (d.assetSettings.isLetterIdenticon
-                        || d.assetSettings.isImage
-                        || !!d.assetSettings.name)
         }
     }
 
     contentItem: StatusBaseText {
-        anchors.left: root.indicator.right
-        anchors.right: arrowIcon.visible ? arrowIcon.left : arrowIcon.right
-        anchors.rightMargin: 8
-        anchors.leftMargin: 4
+        readonly property real arrowPadding: root.subMenu && root.arrow ? root.arrow.width + root.spacing : 0
+        readonly property real indicatorPadding: root.indicator.visible ? root.indicator.width + root.spacing : 0
+        leftPadding: !root.mirrored ? indicatorPadding : arrowPadding
+        rightPadding: root.mirrored ? indicatorPadding : arrowPadding
+
+//        anchors.left: root.indicator.visible ? parent.indicator.right : parent.left
+//        anchors.right: arrowIcon.visible ? arrowIcon.left : arrowIcon.right
+//        anchors.rightMargin: root.rightPadding
+//        anchors.leftMargin: root.spacing
 
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
 
         text: root.text
-        color: !root.enabled ? Theme.palette.directColor5
+        color: !root.enabled ? Theme.palette.baseColor1
                              : d.isDangerIcon ? Theme.palette.dangerColor1 : Theme.palette.directColor1
 
         font.pixelSize: d.fontSettings.pixelSize // !!root.action.fontSettings ? root.action.fontSettings.pixelSize : 13
@@ -149,9 +163,12 @@ MenuItem {
 
     arrow: StatusIcon {
         id: arrowIcon
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: parent.right
-        anchors.rightMargin: 8
+        x: root.mirrored ? root.leftPadding : root.width - width - root.rightPadding
+        y: root.topPadding + (root.availableHeight - height) / 2
+
+//        anchors.verticalCenter: parent.verticalCenter
+//        anchors.right: parent.right
+//        anchors.rightMargin: root.rightPadding
         height: 16
         visible: d.isSubMenu
         icon: "next"
@@ -160,7 +177,7 @@ MenuItem {
 
     background: Rectangle {
         color: {
-            if (!root.hovered)
+            if (!root.hovered && !d.subMenuOpened)
                 return "transparent"
             if (root.action.type === StatusMenuItem.Type.Danger)
                 return Theme.palette.dangerColor3;