fix(StatusPopupMenu)!: Refactoring, removed custom components relationships

Comments removed
2022-09-19 19:14:19 +03:00
15 changed files with 241 additions and 294 deletions
@@ -2,9 +2,6 @@

 > 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.
@@ -44,6 +44,8 @@ StatusSectionLayout {
                spacing: 18

                StatusBaseText {
+                    Layout.topMargin: d.layoutVMargin
+                    Layout.leftMargin: d.layoutHMargin
                    text: qsTr("Find community")
                    font.weight: Font.Bold
                    font.pixelSize: d.titlePixelSize
@@ -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,13 +65,10 @@ GridLayout {
            assetSettings.name: "info"
        }

-        StatusMenuItem { 
-            text: "Three"
-            assetSettings.name: "info"
-        }
-
        StatusPopupMenu {
-            title: "Four"
+            title: "Two"
+            assetSettings.name: "info"
+
            StatusMenuItem { 
                text: "One"
                assetSettings.name: "info"
@@ -81,22 +78,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"
        }
@@ -104,14 +101,15 @@ GridLayout {
        StatusMenuSeparator {}

        StatusPopupMenu {
-            title: "Chat" 
+            title: "Chat"
+            assetSettings.name: "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 { 
@@ -123,6 +121,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I

        StatusPopupMenu {
            title: "Cryptokitties"
+            assetSettings.isImage: true
+            assetSettings.name: "qrc:/demoapp/data/profile-image-1.jpeg"

            StatusMenuItem { 
                text: "welcome" 
@@ -146,6 +146,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I

        StatusPopupMenu {
            title: "Another community"
+            assetSettings.isLetterIdenticon: true
+            assetSettings.bgColor: "red"

            StatusMenuItem { 
                text: "welcome" 
@@ -41,7 +41,6 @@ Column {
        model: commmonModel

        selectMenu.delegate: StatusMenuItemDelegate {
-            statusPopupMenu: select
            action: StatusMenuItem {
                assetSettings.name: "filled-account"
                text: name
@@ -326,10 +326,8 @@ Rectangle {
                    contentWidth: row.width
                    padding: 0
                    clip: true
-                    interactive: false
                    Row {
                        id: row
-                        spacing: 4
                        Repeater {
                            id: inlineTagModelRepeater
                            model: inlineTagModel
@@ -69,7 +69,6 @@ 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
@@ -265,7 +264,6 @@ Rectangle {
            }

            ColumnLayout {
-
                spacing: 4
                Layout.alignment: Qt.AlignTop
                Layout.fillWidth: true
@@ -294,7 +292,7 @@ Rectangle {
                }
                Loader {
                    Layout.fillWidth: true
-                    active: !root.editMode && !!root.messageDetails.messageText && !root.hideMessage
+                    active: !editMode && !!root.messageDetails.messageText
                    visible: active
                    sourceComponent: StatusTextMessage {
                        objectName: "StatusMessage_textMessage"
@@ -9,12 +9,10 @@ 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
@@ -25,18 +23,6 @@ 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
@@ -42,7 +42,6 @@ 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

@@ -143,7 +143,6 @@ 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)
@@ -1,6 +1,7 @@
 import QtQuick 2.13

 QtObject {
+
    id: theme

    property string name
@@ -9,95 +10,88 @@ 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"
    }

-    readonly property QtObject _d: QtObject {
-        // specific font variants should not be accessed directly
+    property var codeFontThin: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
+    }

-        // Inter font variants
-        property var baseFontThin: FontLoader {
-            source: "../../../assets/fonts/Inter/Inter-Thin.otf"
-        }
+    property var codeFontExtraLight: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
+    }

-        property var baseFontExtraLight: FontLoader {
-            source: "../../../assets/fonts/Inter/Inter-ExtraLight.otf"
-        }
+    property var codeFontLight: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
+    }

-        property var baseFontLight: FontLoader {
-            source: "../../../assets/fonts/Inter/Inter-Light.otf"
-        }
+    property var codeFontMedium: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.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 var codeFontBold: FontLoader {
+        source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
    }

    property color black: getColor('black')
@@ -81,19 +81,11 @@ SplitView {
    property bool showHeader: true

    /*!
-        \qmlproperty alias StatusAppLayout::notificationCount
-        This property holds a reference to the notificationCount property of the
-        header component.
+        \qmlproperty int StatusAppLayout::notificationCount
+        This property holds the number of notifications to be displayed in the notifications
+        button 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
@@ -107,13 +99,6 @@ 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
@@ -149,9 +134,6 @@ SplitView {
                id: statusToolBar
                width: visible ? parent.width : 0
                visible: root.showHeader
-                onBackButtonClicked: {
-                    root.backButtonClicked();
-                }
                onNotificationButtonClicked: {
                    root.notificationButtonClicked();
                }
@@ -9,17 +9,20 @@ Action {
        Normal,
        Danger
    }
-    icon.color: "transparent"
+
    property int type: StatusMenuItem.Type.Normal
-    property real iconRotation: 0
+
    property StatusAssetSettings assetSettings: StatusAssetSettings {
-        width: 16
-        height: 16
-        color: "transparent"
+        width: 18
+        height: 18
+        rotation: 0
        isLetterIdenticon: false
        imgIsIdenticon: false
+        color: "transparent"
        name: statusMenuItem.icon.name
    }

    property StatusFontSettings fontSettings: StatusFontSettings {}
+
+    icon.color: "transparent"
 }
@@ -7,187 +7,164 @@ import StatusQ.Components 0.1
 import StatusQ.Popups 0.1

 MenuItem {
-    id: statusPopupMenuItem
+    id: root
    implicitWidth: parent ? parent.width : 0
-    implicitHeight: action.enabled ? 34 : 0
-    objectName: action.objectName
+    implicitHeight: menu.hideDisabledItems && !enabled ? 0 : 38
+    objectName: action ? action.objectName : "StatusMenuItemDelegate"

-    property int subMenuIndex
-    property var statusPopupMenu: null
+    spacing: 4
+    horizontalPadding: 8

-    Component.onCompleted: {
-        if (!!subMenu) {
-            subMenuIndex = statusPopupMenu.menuItemCount
-            statusPopupMenu.menuItemCount += 1
+    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
        }
    }

-    action: StatusMenuItem {
-        onTriggered: { statusPopupMenu.menuItemClicked(statusPopupMenuItem.subMenuIndex); }
-    }
-
    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
+        id: indicatorIcon

-                    if (!Qt.colorEqual(c, "transparent")) {
-                        return c
-                    }
-                    switch (statusPopupMenuItem.action.type) {
-                        case StatusMenuItem.Type.Danger:
-                          return Theme.palette.dangerColor1
-                        default:
-                          return Theme.palette.primaryColor1
-                    }
-                }
+        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: statusLetterIdenticonCmp
-        Item {
-            implicitWidth: 24
-            implicitHeight: 24
+        id: indicatorLetterIdenticon

-            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
-            }
+        StatusLetterIdenticon {
+            width: d.assetSettings.width
+            height: d.assetSettings.height
+            color: d.assetSettings.bgColor
+            name: root.text
+            letterSize: 11
        }
    }

    Component {
-        id: statusRoundImageCmp
+        id: indicatorImage

-        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
-            }
+        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
        }
    }

-    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
+    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;
            }

-            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 {
-        anchors.left: statusPopupMenuItem.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

        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter

-        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
+        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
        elide: Text.ElideRight
-        visible: statusPopupMenuItem.action.enabled
+        visible: true
    }

    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
+
        height: 16
-        visible: statusPopupMenuItem.subMenu
+        visible: d.isSubMenu
        icon: "next"
        color: Theme.palette.directColor1
    }

    background: Rectangle {
        color: {
-            if (statusPopupMenuItem.hovered) {
-                return statusPopupMenuItem.action.type === StatusMenuItem.Type.Danger ? Theme.palette.dangerColor3 : Theme.palette.statusPopupMenu.hoverBackgroundColor
-            }
-            return "transparent"
+            if (!root.hovered && !d.subMenuOpened)
+                return "transparent"
+            if (root.action.type === StatusMenuItem.Type.Danger)
+                return Theme.palette.dangerColor3;
+            return Theme.palette.statusPopupMenu.hoverBackgroundColor;
        }
    }

    MouseArea {
-        id: sensor
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
-        hoverEnabled: statusPopupMenuItem.action.enabled
+        hoverEnabled: root.enabled
        onPressed: mouse.accepted = false
    }
 }
@@ -10,21 +10,32 @@ import StatusQ.Popups 0.1

 Menu {
    id: root
+
    closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
    topPadding: 8
    bottomPadding: 8
    bottomMargin: 16

-    property int menuItemCount: 0
-    property var subMenuItemIcons: []
+    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 var openHandler
    property var closeHandler

-    dim: false
-
    signal menuItemClicked(int menuIndex)

+    dim: false
+
    onOpened: {
        if (typeof openHandler === "function") {
            openHandler()
@@ -37,9 +48,7 @@ Menu {
        }
    }

-    delegate: StatusMenuItemDelegate {
-        statusPopupMenu: root
-    }
+    delegate: StatusMenuItemDelegate { }

    contentItem: StatusListView {
        currentIndex: root.currentIndex
@@ -28,6 +28,8 @@ 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: {
@@ -38,13 +40,13 @@ StatusPopupMenu {
                    item.parentIconName = model.iconName;
                    item.parentImageSource = model.imageSource;
                    item.parentIdenticonColor = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
-                    root.subMenuItemIcons.push({
-                                    source: model.imageSource,
-                                    icon: model.iconName,
-                                    isIdenticon: model.isIdenticon,
-                                    color: model.iconColor,
-                                    isLetterIdenticon: !model.imageSource && !model.iconName
-                                   });
+
+                    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.insertMenu(index + numDefaultItems, item);
                } else {
                    item.value = model.value