chore(general): set info in readme before setting repo read-only (#917)

Further development will take place in the status-desktop repository.

README.md

@@ -2,6 +2,9 @@
 
 > An emerging reusable QML UI component library for Status applications.
 
+:bangbang: | This repository is set to read-only. `StatusQ` library is further developed in the [status-desktop](https://github.com/status-im/status-desktop) repository.
+:---: | :---
+
 ## Usage
 
 StatusQ introduces a module namespace that semantically groups components so they can be easily imported.

sandbox/demoapp/StatusAppCommunitiesPortalView.qml

@@ -44,8 +44,6 @@ StatusSectionLayout {
                 spacing: 18
 
                 StatusBaseText {
-                    Layout.topMargin: d.layoutVMargin
-                    Layout.leftMargin: d.layoutHMargin
                     text: qsTr("Find community")
                     font.weight: Font.Bold
                     font.pixelSize: d.titlePixelSize

sandbox/pages/StatusPopupMenuPage.qml

@@ -22,8 +22,8 @@ GridLayout {
         onClicked: complexMenu.popup()
     }
 
+
     StatusButton {
-        id: customPopupButton
         text: "Menu with custom images and icons"
         onClicked: customMenu.popup()
     }
@@ -51,7 +51,7 @@ GridLayout {
 
     StatusPopupMenu {
         id: complexMenu
-//        subMenuItemIcons: [{ icon: 'info' }]
+        subMenuItemIcons: [{ icon: 'info' }]
 
         StatusMenuItem { 
             text: "One" 
@@ -65,10 +65,13 @@ GridLayout {
             assetSettings.name: "info"
         }
 
-        StatusPopupMenu {
-            title: "Two"
+        StatusMenuItem { 
+            text: "Three"
             assetSettings.name: "info"
+        }
 
+        StatusPopupMenu {
+            title: "Four"
             StatusMenuItem { 
                 text: "One"
                 assetSettings.name: "info"
@@ -78,22 +81,22 @@ GridLayout {
                 assetSettings.name: "info"
             }
         }
-
-        StatusMenuItem {
-            text: "Disabled"
-            assetSettings.name: "info"
-            enabled: false
-        }
-
-        StatusMenuItem {
-            text: "Danger"
-            type: StatusMenuItem.Type.Danger
-        }
     }
 
     StatusPopupMenu {
         id: customMenu
 
+        subMenuItemIcons: [
+            { icon: "chat" },
+            { 
+                source: "qrc:/demoapp/data/profile-image-1.jpeg"
+            },
+            { 
+                isLetterIdenticon: true, 
+                color: "red" 
+            }
+        ]
+
         StatusMenuItem {
             text: "Anywhere"
         }
@@ -101,15 +104,14 @@ GridLayout {
         StatusMenuSeparator {}
 
         StatusPopupMenu {
-            title: "Chat"
-            assetSettings.name: "chat"
+            title: "Chat" 
 
             StatusMenuItem { 
                 text: "vitalik.eth"
                 assetSettings.isImage: true
-                assetSettings.imgIsIdenticon: true
                 assetSettings.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+                assetSettings.imgIsIdenticon: true
             }
 
             StatusMenuItem { 
@@ -121,8 +123,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
 
         StatusPopupMenu {
             title: "Cryptokitties"
-            assetSettings.isImage: true
-            assetSettings.name: "qrc:/demoapp/data/profile-image-1.jpeg"
 
             StatusMenuItem { 
                 text: "welcome" 
@@ -146,8 +146,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
 
         StatusPopupMenu {
             title: "Another community"
-            assetSettings.isLetterIdenticon: true
-            assetSettings.bgColor: "red"
 
             StatusMenuItem { 
                 text: "welcome" 

sandbox/pages/StatusSelectPage.qml

@@ -41,6 +41,7 @@ Column {
         model: commmonModel
 
         selectMenu.delegate: StatusMenuItemDelegate {
+            statusPopupMenu: select
             action: StatusMenuItem {
                 assetSettings.name: "filled-account"
                 text: name

src/StatusQ/Components/StatusListItem.qml

@@ -326,8 +326,10 @@ Rectangle {
                     contentWidth: row.width
                     padding: 0
                     clip: true
+                    interactive: false
                     Row {
                         id: row
+                        spacing: 4
                         Repeater {
                             id: inlineTagModelRepeater
                             model: inlineTagModel

src/StatusQ/Components/StatusMessage.qml

@@ -69,6 +69,7 @@ Rectangle {
     property color overrideBackgroundColor: "transparent"
     property bool overrideBackground: false
     property bool profileClickable: true
+    property bool hideMessage: false
 
     property alias previousMessageIndex: dateGroupLabel.previousMessageIndex
     property alias previousMessageTimestamp: dateGroupLabel.previousMessageTimestamp
@@ -264,6 +265,7 @@ Rectangle {
             }
 
             ColumnLayout {
+
                 spacing: 4
                 Layout.alignment: Qt.AlignTop
                 Layout.fillWidth: true
@@ -292,7 +294,7 @@ Rectangle {
                 }
                 Loader {
                     Layout.fillWidth: true
-                    active: !editMode && !!root.messageDetails.messageText
+                    active: !root.editMode && !!root.messageDetails.messageText && !root.hideMessage
                     visible: active
                     sourceComponent: StatusTextMessage {
                         objectName: "StatusMessage_textMessage"

src/StatusQ/Components/StatusToolBar.qml

@@ -9,10 +9,12 @@ import StatusQ.Controls 0.1
 ToolBar {
     id: root
 
+    property string backButtonName: ""
     property int notificationCount: 0
     property Item headerContent
     property alias notificationButton: notificationButton
 
+    signal backButtonClicked()
     signal notificationButtonClicked()
 
     implicitWidth: visible ? 518 : 0
@@ -23,6 +25,18 @@ ToolBar {
     RowLayout {
         anchors.fill: parent
         spacing: 0
+        StatusFlatButton {
+            icon.name: "arrow-left"
+            icon.width: 20
+            icon.height: 20
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+            Layout.leftMargin: 12
+            visible: !!root.backButtonName
+            text: root.backButtonName
+            size: StatusBaseButton.Size.Large
+            onClicked: { root.backButtonClicked(); }
+        }
+
         Control {
             id: headerContentItem
             Layout.fillWidth: !!headerContent

src/StatusQ/Controls/StatusBaseButton.qml

@@ -42,6 +42,7 @@ Button {
         readonly property color textColor: root.enabled || root.loading ? root.textColor : root.disabledTextColor
     }
 
+    font.family: Theme.palette.baseFont.name
     font.weight: Font.Medium
     font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13
 

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -143,6 +143,7 @@ Button {
                 StatusSelectableText {
                     Layout.fillWidth: implicitWidth + separator.width + pinIcon.width + pinText.width > subtitleRow.width
                     text: root.subTitle
+                    visible: root.subTitle
                     color: Theme.palette.baseColor1
                     font.pixelSize: 12
                     onLinkActivated: root.linkActivated(link)

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.13
 
 QtObject {
-
     id: theme
 
     property string name
@@ -10,88 +9,95 @@ QtObject {
         source: "../../../assets/fonts/Inter/Inter-Regular.otf"
     }
 
-    property var baseFontThin: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Thin.otf"
-    }
-
-    property var baseFontExtraLight: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-ExtraLight.otf"
-    }
-
-    property var baseFontLight: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Light.otf"
-    }
-
-    property var baseFontMedium: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Medium.otf"
-    }
-
-    property var baseFontBold: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Bold.otf"
-    }
-
-    property var baseFontExtraBold: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-ExtraBold.otf"
-    }
-
-    property var baseFontBlack: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Black.otf"
-    }
-
     property var monoFont: FontLoader {
         source: "../../../assets/fonts/InterStatus/InterStatus-Regular.otf"
     }
 
-    property var monoFontThin: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Thin.otf"
-    }
-
-    property var monoFontExtraLight: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-ExtraLight.otf"
-    }
-
-    property var monoFontLight: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Light.otf"
-    }
-
-    property var monoFontMedium: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Medium.otf"
-    }
-
-    property var monoFontBold: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Bold.otf"
-    }
-
-    property var monoFontExtraBold: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-ExtraBold.otf"
-    }
-
-    property var monoFontBlack: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
-    }
-
     property var codeFont: FontLoader {
         source: "../../../assets/fonts/RobotoMono/RobotoMono-Regular.ttf"
     }
 
-    property var codeFontThin: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
-    }
+    readonly property QtObject _d: QtObject {
+        // specific font variants should not be accessed directly
 
-    property var codeFontExtraLight: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
-    }
+        // Inter font variants
+        property var baseFontThin: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Thin.otf"
+        }
 
-    property var codeFontLight: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
-    }
+        property var baseFontExtraLight: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-ExtraLight.otf"
+        }
 
-    property var codeFontMedium: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf"
-    }
+        property var baseFontLight: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Light.otf"
+        }
 
-    property var codeFontBold: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
+        property var baseFontMedium: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Medium.otf"
+        }
+
+        property var baseFontBold: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Bold.otf"
+        }
+
+        property var baseFontExtraBold: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-ExtraBold.otf"
+        }
+
+        property var baseFontBlack: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Black.otf"
+        }
+
+        // Inter Status font variants
+        property var monoFontThin: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Thin.otf"
+        }
+
+        property var monoFontExtraLight: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-ExtraLight.otf"
+        }
+
+        property var monoFontLight: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Light.otf"
+        }
+
+        property var monoFontMedium: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Medium.otf"
+        }
+
+        property var monoFontBold: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Bold.otf"
+        }
+
+        property var monoFontExtraBold: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-ExtraBold.otf"
+        }
+
+        property var monoFontBlack: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
+        }
+
+        // Roboto font variants
+        property var codeFontThin: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
+        }
+
+        property var codeFontExtraLight: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
+        }
+
+        property var codeFontLight: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
+        }
+
+        property var codeFontMedium: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf"
+        }
+
+        property var codeFontBold: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
+        }
     }
 
     property color black: getColor('black')

src/StatusQ/Layout/StatusSectionLayout.qml

@@ -81,11 +81,19 @@ SplitView {
     property bool showHeader: true
 
     /*!
-        \qmlproperty int StatusAppLayout::notificationCount
-        This property holds the number of notifications to be displayed in the notifications
-        button of the header component.
+        \qmlproperty alias StatusAppLayout::notificationCount
+        This property holds a reference to the notificationCount property of the
+        header component.
     */
     property alias notificationCount: statusToolBar.notificationCount
+
+    /*!
+        \qmlproperty alias StatusAppLayout::backButtonName
+        This property holds a reference to the backButtonName property of the
+        header component.
+    */
+    property alias backButtonName: statusToolBar.backButtonName
+
     /*!
         \qmlproperty alias StatusAppLayout::headerContent
         This property holds a reference to the custom header content of
@@ -99,6 +107,13 @@ SplitView {
     */
     property alias notificationButton: statusToolBar.notificationButton
 
+    /*!
+        \qmlsignal
+        This signal is emitted when the back button of the header component
+        is pressed.
+    */
+    signal backButtonClicked()
+
     /*!
         \qmlsignal
         This signal is emitted when the notification button of the header component
@@ -134,6 +149,9 @@ SplitView {
                 id: statusToolBar
                 width: visible ? parent.width : 0
                 visible: root.showHeader
+                onBackButtonClicked: {
+                    root.backButtonClicked();
+                }
                 onNotificationButtonClicked: {
                     root.notificationButtonClicked();
                 }

src/StatusQ/Popups/StatusMenuItem.qml

@@ -9,20 +9,17 @@ Action {
         Normal,
         Danger
     }
-
+    icon.color: "transparent"
     property int type: StatusMenuItem.Type.Normal
-
+    property real iconRotation: 0
     property StatusAssetSettings assetSettings: StatusAssetSettings {
-        width: 18
-        height: 18
-        rotation: 0
+        width: 16
+        height: 16
+        color: "transparent"
         isLetterIdenticon: false
         imgIsIdenticon: false
-        color: "transparent"
         name: statusMenuItem.icon.name
     }
 
     property StatusFontSettings fontSettings: StatusFontSettings {}
-
-    icon.color: "transparent"
 }

src/StatusQ/Popups/StatusMenuItemDelegate.qml

@@ -7,164 +7,187 @@ import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 
 MenuItem {
-    id: root
+    id: statusPopupMenuItem
     implicitWidth: parent ? parent.width : 0
-    implicitHeight: menu.hideDisabledItems && !enabled ? 0 : 38
-    objectName: action ? action.objectName : "StatusMenuItemDelegate"
+    implicitHeight: action.enabled ? 34 : 0
+    objectName: action.objectName
 
-    spacing: 4
-    horizontalPadding: 8
+    property int subMenuIndex
+    property var statusPopupMenu: null
 
-    readonly property string logObjectName: "StatusMenuItemDelegate [%1, %2]".arg(this).arg(text)
-
-    QtObject {
-        id: d
-
-        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
-
-        readonly property StatusAssetSettings assetSettings: d.isStatusSubMenu
-                                                             ? root.subMenu.assetSettings
-                                                             : d.isStatusAction
-                                                               ? root.action.assetSettings
-                                                               : d.defaultAsset
-
-        readonly property StatusFontSettings fontSettings: d.isStatusSubMenu
-                                                           ? root.subMenu.fontSettings
-                                                           : d.isStatusAction ? root.action.fontSettings : d.defaultFontSettings
-
-        readonly property StatusAssetSettings defaultAsset: StatusAssetSettings {
-            width: 18
-            height: 18
-            rotation: 0
-        }
-
-        readonly property StatusFontSettings defaultFontSettings: StatusFontSettings {
-            pixelSize: 13
-            bold: false
-            italic: false
+    Component.onCompleted: {
+        if (!!subMenu) {
+            subMenuIndex = statusPopupMenu.menuItemCount
+            statusPopupMenu.menuItemCount += 1
         }
     }
 
-    Component {
-        id: indicatorIcon
+    action: StatusMenuItem {
+        onTriggered: { statusPopupMenu.menuItemClicked(statusPopupMenuItem.subMenuIndex); }
+    }
 
-        StatusIcon {
-            width: d.assetSettings.width
-            height: d.assetSettings.height
-            rotation: d.assetSettings.rotation
-            icon: d.assetSettings.name
-            color: {
-                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;
+    Component {
+        id: indicatorComponent
+        Item {
+            implicitWidth: 24
+            implicitHeight: 24
+            StatusIcon {
+                anchors.centerIn: parent
+                width: {
+                    let width = statusPopupMenuItem.action && statusPopupMenuItem.action.assetSettings.width
+                    return !!width ? width : 18
+                }
+                rotation: !!statusPopupMenuItem.action.iconRotation ? statusPopupMenuItem.action.iconRotation : 0
+                icon: {
+                    if (statusPopupMenuItem.subMenu && !!statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] &&
+                        statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon.toString() !== "") {
+                        return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon;
+                    } else if (!!statusPopupMenuItem.action && statusPopupMenuItem.action.assetSettings.name !== "") {
+                        return statusPopupMenuItem.action.assetSettings.name;
+                    } else if (!!statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.name !== "") {
+                        return statusPopupMenuItem.action.assetSettings.name;
+                    } else {
+                        return "";
+                    }
+                }
+                color: {
+                    let c = !!statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.color
+
+                    if (!Qt.colorEqual(c, "transparent")) {
+                        return c
+                    }
+                    switch (statusPopupMenuItem.action.type) {
+                        case StatusMenuItem.Type.Danger:
+                          return Theme.palette.dangerColor1
+                        default:
+                          return Theme.palette.primaryColor1
+                    }
+                }
             }
         }
     }
 
     Component {
-        id: indicatorLetterIdenticon
+        id: statusLetterIdenticonCmp
+        Item {
+            implicitWidth: 24
+            implicitHeight: 24
 
-        StatusLetterIdenticon {
-            width: d.assetSettings.width
-            height: d.assetSettings.height
-            color: d.assetSettings.bgColor
-            name: root.text
-            letterSize: 11
+            StatusLetterIdenticon {
+                anchors.centerIn: parent
+                width: 16
+                height: 16
+                color: {
+                    let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
+                    return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.assetSettings.bgColor
+                }
+                name: statusPopupMenuItem.text
+                letterSize: 11
+            }
         }
     }
 
     Component {
-        id: indicatorImage
+        id: statusRoundImageCmp
 
-        StatusRoundedImage {
-            width: d.assetSettings.width
-            height: d.assetSettings.height
-            image.source: d.assetSettings.name
-            border.width: d.isSubMenu && d.assetSettings.imgIsIdenticon ? 1 : 0
-            border.color: Theme.palette.directColor7
+        Item {
+            implicitWidth: 24
+            implicitHeight: 24
+            StatusRoundedImage {
+                anchors.centerIn: parent
+                width: statusPopupMenuItem.action.assetSettings.width
+                height: statusPopupMenuItem.action.assetSettings.height
+                image.source: statusPopupMenuItem.subMenu ?
+                    statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].source :
+                    statusPopupMenuItem.action.assetSettings.name
+                border.width: (statusPopupMenuItem.subMenu && statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].isIdenticon) || 
+                    statusPopupMenuItem.action.assetSettings.imgIsIdenticon ? 1 : 0
+                border.color: Theme.palette.directColor7
+            }
         }
     }
 
-    indicator: Item {
-        x: root.mirrored ? root.width - width - root.rightPadding : root.leftPadding
-        y: root.topPadding + (root.availableHeight - height) / 2
-
-        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;
-                if (d.assetSettings.isLetterIdenticon)
-                    return indicatorLetterIdenticon;
-                return indicatorIcon;
+    indicator: Loader {
+        sourceComponent: {
+            let subMenuItemIcon = statusPopupMenu.subMenuItemIcons && statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]
+            
+            if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) || 
+                statusPopupMenuItem.action.assetSettings && !!statusPopupMenuItem.action.assetSettings.name.toString()
+                && statusPopupMenuItem.action.assetSettings.isImage) {
+                return statusRoundImageCmp
             }
 
+            return (parent.subMenu && subMenuItemIcon && subMenuItemIcon.isLetterIdenticon) || 
+                (statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.isLetterIdenticon) ?
+                statusLetterIdenticonCmp : indicatorComponent
         }
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        active: {
+            if (enabled) {
+                let hasIconSettings = !!statusPopupMenuItem.action.assetSettings.name ||
+                  (statusPopupMenuItem.action.assetSettings &&
+                    (!!statusPopupMenuItem.action.assetSettings.name || !!statusPopupMenuItem.action.assetSettings.isLetterIdenticon))
+
+                let hasImageSettings = statusPopupMenuItem.action.assetSettings && !!statusPopupMenuItem.action.assetSettings.name.toString()
+
+                return enabled && (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]) || hasIconSettings || hasImageSettings
+            }
+            return false
+        }      
     }
 
     contentItem: StatusBaseText {
-        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: statusPopupMenuItem.indicator.right
+        anchors.right: arrowIcon.visible ? arrowIcon.left : arrowIcon.right
+        anchors.rightMargin: 8
+        anchors.leftMargin: 4
 
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
 
-        text: root.text
-        color: !root.enabled ? Theme.palette.baseColor1
-                             : d.isDangerIcon ? Theme.palette.dangerColor1 : Theme.palette.directColor1
-
-        font.pixelSize: d.fontSettings.pixelSize
-        font.bold: d.fontSettings.bold
-        font.italic: d.fontSettings.italic
+        text: statusPopupMenuItem.text
+        color: {
+            switch (statusPopupMenuItem.action.type) {
+                case StatusMenuItem.Type.Danger:
+                  return Theme.palette.dangerColor1
+                default:
+                  return Theme.palette.directColor1
+            }
+        }
+        font.pixelSize: !!statusPopupMenuItem.action.fontSettings ? statusPopupMenuItem.action.fontSettings.pixelSize : 13
+        font.bold: !!statusPopupMenuItem.action.fontSettings ? statusPopupMenuItem.action.fontSettings.bold : false
+        font.italic: !!statusPopupMenuItem.action.fontSettings ? statusPopupMenuItem.action.fontSettings.italic : false
         elide: Text.ElideRight
-        visible: true
+        visible: statusPopupMenuItem.action.enabled
     }
 
     arrow: StatusIcon {
         id: arrowIcon
-        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: 8
         height: 16
-        visible: d.isSubMenu
+        visible: statusPopupMenuItem.subMenu
         icon: "next"
         color: Theme.palette.directColor1
     }
 
     background: Rectangle {
         color: {
-            if (!root.hovered && !d.subMenuOpened)
-                return "transparent"
-            if (root.action.type === StatusMenuItem.Type.Danger)
-                return Theme.palette.dangerColor3;
-            return Theme.palette.statusPopupMenu.hoverBackgroundColor;
+            if (statusPopupMenuItem.hovered) {
+                return statusPopupMenuItem.action.type === StatusMenuItem.Type.Danger ? Theme.palette.dangerColor3 : Theme.palette.statusPopupMenu.hoverBackgroundColor
+            }
+            return "transparent"
         }
     }
 
     MouseArea {
+        id: sensor
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
-        hoverEnabled: root.enabled
+        hoverEnabled: statusPopupMenuItem.action.enabled
         onPressed: mouse.accepted = false
     }
 }

src/StatusQ/Popups/StatusPopupMenu.qml

@@ -10,32 +10,21 @@ import StatusQ.Popups 0.1
 
 Menu {
     id: root
-
     closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
     topPadding: 8
     bottomPadding: 8
     bottomMargin: 16
 
-    property StatusAssetSettings assetSettings: StatusAssetSettings {
-        width: 18
-        height: 18
-        rotation: 0
-        isLetterIdenticon: false
-        isImage: false
-        color: "transparent"
-    }
-
-    property StatusFontSettings fontSettings: StatusFontSettings {}
-
-    property bool hideDisabledItems: false
+    property int menuItemCount: 0
+    property var subMenuItemIcons: []
 
     property var openHandler
     property var closeHandler
 
-    signal menuItemClicked(int menuIndex)
-
     dim: false
 
+    signal menuItemClicked(int menuIndex)
+
     onOpened: {
         if (typeof openHandler === "function") {
             openHandler()
@@ -48,7 +37,9 @@ Menu {
         }
     }
 
-    delegate: StatusMenuItemDelegate { }
+    delegate: StatusMenuItemDelegate {
+        statusPopupMenu: root
+    }
 
     contentItem: StatusListView {
         currentIndex: root.currentIndex

src/StatusQ/Popups/StatusSearchLocationMenu.qml

@@ -28,8 +28,6 @@ StatusPopupMenu {
     MenuItem { implicitHeight: 0.00001 }
     Instantiator {
         model: root.locationModel
-
-        // NOTE: Use DelegateChooser here
         delegate: Loader {
             sourceComponent: (!!model.subItems && model.subItems.count > 0) ? subMenus : subMenuItemComponent
             onLoaded: {
@@ -40,13 +38,13 @@ StatusPopupMenu {
                     item.parentIconName = model.iconName;
                     item.parentImageSource = model.imageSource;
                     item.parentIdenticonColor = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
-
-                    item.assetSettings.source = model.imageSource;
-                    item.assetSettings.isIdenticon = model.isIdenticon;
-                    item.assetSettings.name = model.iconName;
-                    item.assetSettings.color = model.iconColor;
-                    item.assetSettings.isLetterIdenticon = !model.imageSource && !model.iconName;
-
+                    root.subMenuItemIcons.push({
+                                    source: model.imageSource,
+                                    icon: model.iconName,
+                                    isIdenticon: model.isIdenticon,
+                                    color: model.iconColor,
+                                    isLetterIdenticon: !model.imageSource && !model.iconName
+                                   });
                     root.insertMenu(index + numDefaultItems, item);
                 } else {
                     item.value = model.value