From d180001f84975285361af9ee4d58e3f2b66d5cd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= <lukast@status.im>
Date: Mon, 20 Mar 2023 13:25:56 +0100
Subject: [PATCH] feat(StatusMenuItem): add support for "checked" indicator

- it is displayed on the trailing edge, next to the main text, iff the
item/action is `checked`
- fix the text elide (must have a width set)
- fix for setting the icon name/source/color if we directly use a
(Status)MenuItem (as opposed to going via (Status)Action)
---
 .../src/StatusQ/Popups/StatusMenuItem.qml     | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusMenuItem.qml b/ui/StatusQ/src/StatusQ/Popups/StatusMenuItem.qml
index 94bc6f7626..f4afdf87c8 100644
--- a/ui/StatusQ/src/StatusQ/Popups/StatusMenuItem.qml
+++ b/ui/StatusQ/src/StatusQ/Popups/StatusMenuItem.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -83,9 +84,9 @@ MenuItem {
             rotation: 0
             // Link to standard Qt properties. Not because it's a good idea,
             // but because it we use it in some places and it will make refactor easier.
-            name: d.isSubMenu ? "" : root.action.icon.name
-            source: d.isSubMenu ? "" : root.action.icon.source
-            color: d.isSubMenu ? "" : root.action.icon.color
+            name: d.isSubMenu ? "" : (d.hasAction ? root.action.icon.name : root.icon.name)
+            source: d.isSubMenu ? "" : (d.hasAction ? root.action.icon.source : root.icon.source)
+            color: d.isSubMenu ? "" : (d.hasAction ? root.action.icon.color : root.icon.color)
         }
 
         readonly property StatusFontSettings defaultFontSettings: StatusFontSettings {
@@ -119,26 +120,35 @@ MenuItem {
         }
     }
 
-    contentItem: StatusBaseText {
-        readonly property real arrowPadding: root.spacing + (root.subMenu && root.arrow ? root.arrow.width : 0)
-        readonly property real indicatorPadding: root.spacing + (root.indicator.visible ? root.indicator.width : 0)
+    contentItem: RowLayout {
+        StatusBaseText {
+            Layout.fillWidth: true
+            readonly property real arrowPadding: root.spacing + (root.subMenu && root.arrow ? root.arrow.width : 0)
+            readonly property real indicatorPadding: root.spacing + (root.indicator.visible ? root.indicator.width : 0)
 
-        leftPadding: !root.mirrored ? indicatorPadding : arrowPadding
-        rightPadding: root.mirrored ? indicatorPadding : arrowPadding
+            leftPadding: !root.mirrored ? indicatorPadding : arrowPadding
+            rightPadding: root.mirrored ? indicatorPadding : arrowPadding
 
-        horizontalAlignment: Text.AlignLeft
-        verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
 
-        text: root.text
-        color: !root.enabled ? Theme.palette.baseColor1
-                             : d.isStatusDangerAction ? Theme.palette.dangerColor1
-                                                      : d.isStatusSuccessAction?
-                                                            Theme.palette.successColor1 : Theme.palette.directColor1
+            text: root.text
+            color: !root.enabled ? Theme.palette.baseColor1
+                                 : d.isStatusDangerAction ? Theme.palette.dangerColor1
+                                                          : d.isStatusSuccessAction ? Theme.palette.successColor1 : Theme.palette.directColor1
 
-        font.pixelSize: d.fontSettings ? d.fontSettings.pixelSize : d.defaultFontSettings.pixelSize
-        font.bold: d.fontSettings ? d.fontSettings.bold : d.defaultFontSettings.bold
-        font.italic: d.fontSettings ? d.fontSettings.italic : d.defaultFontSettings.italic
-        elide: Text.ElideRight
+            font.pixelSize: d.fontSettings ? d.fontSettings.pixelSize : d.defaultFontSettings.pixelSize
+            font.bold: d.fontSettings ? d.fontSettings.bold : d.defaultFontSettings.bold
+            font.italic: d.fontSettings ? d.fontSettings.italic : d.defaultFontSettings.italic
+            elide: Text.ElideRight
+        }
+        StatusIcon {
+            Layout.preferredHeight: 16
+            Layout.alignment: Qt.AlignRight
+            visible: root.checkable && root.checked
+            icon: "checkmark"
+            color: Theme.palette.primaryColor1
+        }
     }
 
     arrow: StatusIcon {