fix(StatusSearchPopup): replace "#" character with "channel" icon

feat(StatusSearchPopupMenuItem): New APIs resetSearchSelection and setSearchSelection
New methods added `resetSearchSelection` and `setSearchSelection` for resetting and setting selected location.
2021-08-16 14:07:05 +02:00 · 2021-08-16 14:06:51 +02:00 · 2021-08-16 14:05:29 +02:00 · 2021-08-16 14:04:00 +02:00 · 2021-08-16 14:02:45 +02:00 · 2021-08-16 14:01:38 +02:00
21 changed files with 1168 additions and 233 deletions
@@ -1,3 +1,20 @@
+<a name=""></a>
+##  v0.4.0 (2021-08-12)
+
+
+#### Bug Fixes
+
+* **StatusAppNavBar:**  add profile button (#311) ([2e1359c9](2e1359c9))
+* **StatusChatListItem:**  don't signal item selection if already selected ([b345c75a](b345c75a), closes [#303](303))
+* **StatusPopupMenu:**  ensure icon or image settings exist ([90aa9d76](90aa9d76), closes [#295](295))
+
+#### Features
+
+* **StatusListItem:**  add enabled prop to StatusListItem (#302) ([7e03daea](7e03daea))
+* **StatusQ.Theme.Core:**  introduce theme colors for StatusChatInput (#299) ([556e5cca](556e5cca))
+
+
+
 <a name=""></a>
 ## v0.3.0 (2021-07-27)

@@ -299,14 +299,14 @@ Rectangle {
                    StatusChatList {
                        anchors.horizontalCenter: parent.horizontalCenter

-                        chatListItems.model: demoChatListItems
+                        chatListItems.model: models.demoChatListItems
                        selectedChatId: "0"
                        onChatItemSelected: selectedChatId = id
                        onChatItemUnmuted: {
-                            for (var i = 0; i < demoChatListItems.count; i++) {
-                                let item = demoChatListItems.get(i);
+                            for (var i = 0; i < models.demoChatListItems.count; i++) {
+                                let item = models.demoChatListItems.get(i);
                                if (item.chatId === id) {
-                                    demoChatListItems.setProperty(i, "muted", false)
+                                    models.demoChatListItems.setProperty(i, "muted", false)
                                }
                            }
                        }
@@ -412,7 +412,7 @@ Rectangle {
            handle: Rectangle {
                implicitWidth: 5
                color: SplitHandle.pressed ? Theme.palette.baseColor2
-                    : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+                                           : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
            }
            leftPanel: Item {
                id: leftPanel
@@ -467,8 +467,8 @@ Rectangle {
                        width: leftPanel.width
                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64

-                        chatList.model: demoCommunityChatListItems
-                        categoryList.model: demoCommunityCategoryItems
+                        chatList.model: models.demoCommunityChatListItems
+                        categoryList.model: models.demoCommunityCategoryItems

                        showCategoryActionButtons: true
                        onChatItemSelected: selectedChatId = id
@@ -557,6 +557,7 @@ Rectangle {

            centerPanel: Item {
                StatusChatToolBar {
+                    id: statusChatToolBar
                    anchors.top: parent.top
                    width: parent.width

@@ -564,12 +565,62 @@ Rectangle {
                    chatInfoButton.subTitle: "Community Chat"
                    chatInfoButton.icon.color: Theme.palette.miscColor6
                    chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
-                    searchButton.onClicked: searchButton.highlighted = !searchButton.highlighted
+                    onSearchButtonClicked: {
+                        searchButton.highlighted = !searchButton.highlighted;
+                        searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
+                                                       "",
+                                                       demoCommunityDetailModal.header.image.source);
+                        searchPopup.open();
+                    }
                    membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
                    onMembersButtonClicked: {
                        root.showRightPanel = !root.showRightPanel;
                    }
                }
+
+                StatusSearchPopup {
+                    id: searchPopup
+                    searchOptionsPopupMenu: searchPopupMenu
+                    onAboutToHide: {
+                        if (searchPopupMenu.visible) {
+                            searchPopupMenu.close();
+                        }
+                        //clear menu
+                        for (var i = 2; i < searchPopupMenu.count; i++) {
+                            searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                        }
+                    }
+                    onClosed: {
+                        statusChatToolBar.searchButton.highlighted = false
+                        searchPopupMenu.dismiss();
+                    }
+                    onSearchTextChanged: {
+                        if (searchPopup.searchText !== "") {
+                            searchPopup.loading = true;
+                            searchModelSimTimer.start();
+                        } else {
+                            searchPopup.searchResults = [];
+                            searchModelSimTimer.stop();
+                        }
+                    }
+                    Timer {
+                        id: searchModelSimTimer
+                        interval: 500
+                        onTriggered: {
+                            if (searchPopup.searchText.startsWith("c")) {
+                                searchPopup.searchResults = models.searchResultsA;
+                            } else {
+                                searchPopup.searchResults = models.searchResultsB;
+                            }
+                            searchPopup.loading = false;
+                        }
+                    }
+                }
+                StatusSearchLocationMenu {
+                    id: searchPopupMenu
+                    searchPopup: searchPopup
+                    locationModel: models.optionsModel
+                }
            }

            rightPanel: Item {
@@ -654,7 +705,7 @@ Rectangle {
                        spacing: 4

                        Repeater {
-                            model: demoProfileGeneralMenuItems
+                            model: models.demoProfileGeneralMenuItems
                            delegate: StatusNavigationListItem {
                                title: model.title
                                icon.name: model.icon
@@ -664,7 +715,7 @@ Rectangle {
                        StatusListSectionHeadline { text: "Settings" }

                        Repeater {
-                            model: demoProfileSettingsMenuItems
+                            model: models.demoProfileSettingsMenuItems
                            delegate: StatusNavigationListItem {
                                title: model.title
                                icon.name: model.icon
@@ -678,7 +729,7 @@ Rectangle {
                        }

                        Repeater {
-                            model: demoProfileOtherMenuItems
+                            model: models.demoProfileOtherMenuItems
                            delegate: StatusNavigationListItem {
                                title: model.title
                                icon.name: model.icon
@@ -833,194 +884,7 @@ Rectangle {
        }
    }

-    ListModel {
-        id: demoChatListItems
-        ListElement {
-            chatId: "0"
-            name: "#status"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            unreadMessagesCount: 0
-            mentionsCount: 0
-            color: "blue"
-        }
-        ListElement {
-            chatId: "1"
-            name: "status-desktop"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            color: "red"
-            unreadMessagesCount: 1
-            mentionsCount: 1
-        }
-        ListElement {
-            chatId: "2"
-            name: "Amazing Funny Squirrel"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: false
-            color: "green"
-            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "3"
-            name: "Black Ops"
-            chatType: StatusChatListItem.Type.GroupChat
-            muted: false
-            color: "purple"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "4"
-            name: "Spectacular Growing Otter"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: true
-            color: "Orange"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "5"
-            name: "channel-with-a-super-duper-long-name"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            color: "green"
-            unreadMessagesCount: 0
-        }
-    }
-
-    ListModel {
-        id: demoCommunityChatListItems
-        ListElement {
-            chatId: "0"
-            name: "general"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-        }
-        ListElement {
-            chatId: "1"
-            name: "random"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-        }
-        ListElement {
-            chatId: "2"
-            name: "watercooler"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-        }
-        ListElement {
-            chatId: "3"
-            name: "language-design"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "dev"
-        }
-    }
-
-    ListModel {
-        id: demoCommunityCategoryItems
-        ListElement {
-            categoryId: "public"
-            name: "Public"
-        }
-        ListElement {
-            categoryId: "dev"
-            name: "Development"
-        }
-    }
-
-    ListModel {
-        id: demoProfileGeneralMenuItems
-
-        ListElement {
-            title: "My Profile"
-            icon: "profile"
-        }
-
-        ListElement {
-            title: "Contacts"
-            icon: "contact"
-        }
-
-        ListElement {
-            title: "ENS Usernames"
-            icon: "username"
-        }
-
-    }
-
-    ListModel {
-        id: demoProfileSettingsMenuItems
-
-        ListElement {
-            title: "Privacy & Security"
-            icon: "security"
-        }
-
-        ListElement {
-            title: "Appearance"
-            icon: "appearance"
-        }
-
-        ListElement {
-            title: "Browser"
-            icon: "browser"
-        }
-
-        ListElement {
-            title: "Sounds"
-            icon: "sound"
-        }
-
-        ListElement {
-            title: "Language"
-            icon: "language"
-        }
-
-        ListElement {
-            title: "Notifications"
-            icon: "notification"
-        }
-
-        ListElement {
-            title: "Sync settings"
-            icon: "mobile"
-        }
-
-        ListElement {
-            title: "Advanced"
-            icon: "settings"
-        }
-
-    }
-
-    ListModel {
-        id: demoProfileOtherMenuItems
-
-        ListElement {
-            title: "Need help?"
-            icon: "help"
-        }
-
-        ListElement {
-            title: "About"
-            icon: "info"
-        }
-
-        ListElement {
-            title: "Sign out & Quit"
-            icon: "logout"
-        }
+    Models {
+        id: models
    }
 }
@@ -295,6 +295,27 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        type: StatusListItem.Type.Danger
    }

+    StatusListItem {
+        title: "List Item with Badge"
+        subTitle: "Subtitle"
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+        badge.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        badge.primaryText: "CryptoKitties"
+        badge.secondaryText: "#test"
+    }
+
+    StatusListItem {
+        title: "List Item with Badge 2"
+        subTitle: "Subtitle"
+        icon.isLetterIdenticon: true
+        badge.primaryText: "CryptoKitties"
+        badge.secondaryText: "#test"
+        badge.icon.color: "orange"
+        badge.icon.isLetterIdenticon: true
+    }
+
    StatusDescriptionListItem {
        title: "Title"
        subTitle: "Subtitle"
@@ -0,0 +1,320 @@
+import QtQuick 2.14
+import StatusQ.Components 0.1
+
+QtObject {
+
+    property var demoChatListItems: ListModel {
+        id: demoChatListItems
+        ListElement {
+            chatId: "0"
+            name: "#status"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            unreadMessagesCount: 0
+            mentionsCount: 0
+            color: "blue"
+        }
+        ListElement {
+            chatId: "1"
+            name: "status-desktop"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            color: "red"
+            unreadMessagesCount: 1
+            mentionsCount: 1
+        }
+        ListElement {
+            chatId: "2"
+            name: "Amazing Funny Squirrel"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: false
+            color: "green"
+            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "3"
+            name: "Black Ops"
+            chatType: StatusChatListItem.Type.GroupChat
+            muted: false
+            color: "purple"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "4"
+            name: "Spectacular Growing Otter"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: true
+            color: "Orange"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "5"
+            name: "channel-with-a-super-duper-long-name"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            color: "green"
+            unreadMessagesCount: 0
+        }
+    }
+
+    property var demoCommunityChatListItems: ListModel {
+        id: demoCommunityChatListItems
+        ListElement {
+            chatId: "0"
+            name: "general"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+        }
+        ListElement {
+            chatId: "1"
+            name: "random"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "2"
+            name: "watercooler"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "dev"
+        }
+    }
+
+    property var demoCommunityCategoryItems: ListModel {
+        id: demoCommunityCategoryItems
+        ListElement {
+            categoryId: "public"
+            name: "Public"
+        }
+        ListElement {
+            categoryId: "dev"
+            name: "Development"
+        }
+    }
+
+    property var demoProfileGeneralMenuItems: ListModel {
+        id: demoProfileGeneralMenuItems
+
+        ListElement {
+            title: "My Profile"
+            icon: "profile"
+        }
+
+        ListElement {
+            title: "Contacts"
+            icon: "contact"
+        }
+
+        ListElement {
+            title: "ENS Usernames"
+            icon: "username"
+        }
+
+    }
+
+    property var demoProfileSettingsMenuItems: ListModel {
+        id: demoProfileSettingsMenuItems
+
+        ListElement {
+            title: "Privacy & Security"
+            icon: "security"
+        }
+
+        ListElement {
+            title: "Appearance"
+            icon: "appearance"
+        }
+
+        ListElement {
+            title: "Browser"
+            icon: "browser"
+        }
+
+        ListElement {
+            title: "Sounds"
+            icon: "sound"
+        }
+
+        ListElement {
+            title: "Language"
+            icon: "language"
+        }
+
+        ListElement {
+            title: "Notifications"
+            icon: "notification"
+        }
+
+        ListElement {
+            title: "Sync settings"
+            icon: "mobile"
+        }
+
+        ListElement {
+            title: "Advanced"
+            icon: "settings"
+        }
+
+    }
+
+    property var demoProfileOtherMenuItems: ListModel {
+        id: demoProfileOtherMenuItems
+
+        ListElement {
+            title: "Need help?"
+            icon: "help"
+        }
+
+        ListElement {
+            title: "About"
+            icon: "info"
+        }
+
+        ListElement {
+            title: "Sign out & Quit"
+            icon: "logout"
+        }
+    }
+
+    //dummy search popup models
+    property var searchResultsA: ListModel {
+        ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
+            badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            badgePrimaryText: "CryptoKities";
+            badgeSecondaryText: "";
+            badgeIdenticonColor: "";
+            isLetterIdenticon: false }
+        ListElement { itemId: "i2"; titleId: "t2"; title: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i3"; titleId: "t3"; title: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i4"; titleId: "t4"; title: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i5"; titleId: "t5"; title: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i6"; titleId: "t6"; title: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i7"; titleId: "t7"; title: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i8"; titleId: "t8"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i9"; titleId: "t9"; title: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i10"; titleId: "t10"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+    }
+    property var searchResultsB: ListModel {
+        ListElement { itemId: "i1"; titleId: "t1"; title: "@Ant"; sectionName: "Messages"; time: "11:43 AM"; content: "<font color='#4360DF'>@John</font>, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ";
+            badgeImage: "";
+            badgePrimaryText: "CryptoKities";
+            badgeSecondaryText: "#design";
+            badgeIdenticonColor: "pink"; isLetterIdenticon: true }
+        ListElement { itemId: "i2"; titleId: "t2"; title: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i3"; titleId: "t3"; title: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i4"; titleId: "t4"; title: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i5"; titleId: "t5"; title: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "pink"; isLetterIdenticon: true }
+        ListElement { itemId: "i6"; titleId: "t6"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i7"; titleId: "t7"; title: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        ListElement { itemId: "i8"; titleId: "t8"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "orange"; isLetterIdenticon: true }
+    }
+
+    property ListModel optionsModel: ListModel {
+        ListElement {
+            value: "item_1"
+            title: "Item with icon"
+            imageSource: ""
+            iconName: "chat"
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_1_1"
+                    text: "Profile image item"
+                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    iconName: ""
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    value: "sub_item_1_2"
+                    text: "identicon item"
+                    imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+                    iconName: ""
+                    iconColor: ""
+                    isIdenticon: true
+                }]}
+        ListElement {
+            value: "item_2"
+            title: "Community item";
+            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            iconName: ""
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_2_1"
+                    text: "welcome"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    value: "sub_item_2_2"
+                    text: "support"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    value: "sub_item_2_3"
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+        ListElement {
+            value: "item_3"
+            title: "Other";
+            imageSource: "";
+            iconName: "info"
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_3_1"
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+        ListElement {
+            value: "item_4"
+            title: "Letter identicon";
+            imageSource: "";
+            iconName: ""
+            iconColor: "red"
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_4_1"
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+    }
+}
@@ -46,7 +46,7 @@ GridLayout {

    StatusPopupMenu {
        id: complexMenu
-        subMenuItemIcons: ['info']
+        subMenuItemIcons: [{ icon: 'info' }]

        StatusMenuItem { 
            text: "One" 
@@ -82,7 +82,7 @@ GridLayout {
        id: customMenu

        subMenuItemIcons: [
-            "chat", 
+            { icon: "chat" },
            { 
                source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" 
            },
@@ -23,15 +23,12 @@ StatusListItem {
    property alias menuButton: menuButton
    property alias toggleButton: toggleButton

-    signal clicked(var mouse)
    signal addButtonClicked(var mouse)
    signal menuButtonClicked(var mouse)
    signal toggleButtonClicked(var mouse)

    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"

-    sensor.onClicked: statusChatListCategoryItem.clicked(mouse)
-
    statusListItemTitle.color: Theme.palette.directColor4
    statusListItemTitle.font.weight: Font.Medium

@@ -14,7 +14,9 @@ Rectangle {
    radius: width / 2

    StatusBaseText {
-        text: (statusLetterIdenticon.name.charAt(0) == "#" ? statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
+        text: ((statusLetterIdenticon.name.charAt(0) === "#")
+              || (statusLetterIdenticon.name.charAt(0) === "@") ?
+              statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
        font.weight: Font.Bold
        font.pixelSize: statusLetterIdenticon.letterSize
        color: Qt.rgba(255, 255, 255, 0.7)
@@ -1,4 +1,6 @@
 import QtQuick 2.13
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
@@ -32,9 +34,15 @@ Rectangle {

    radius: 8

+    property string itemId: ""
+    property string titleId: ""
+
    property string title: ""
+    property string titleAsideText: ""
    property string subTitle: ""
    property string tertiaryTitle: ""
+    property alias badge: statusListItemBadge
+
    property real leftPadding: 16
    property real rightPadding: 16
    property bool enabled: true
@@ -78,6 +86,9 @@ Rectangle {

    property list<Item> components

+    signal clicked(string itemId)
+    signal titleClicked(string titleId)
+
    onComponentsChanged: {
        if (components.length) {
            for (let idx in components) {
@@ -95,6 +106,10 @@ Rectangle {
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        hoverEnabled: true

+        onClicked: {
+            statusListItem.clicked(statusListItem.itemId)
+        }
+
        Loader {
            id: iconOrImage
            anchors.left: parent.left
@@ -107,6 +122,7 @@ Rectangle {
                }
                return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
            }
+
            active: statusListItem.icon.isLetterIdenticon || 
                    !!statusListItem.icon.name || 
                    !!statusListItem.image.source.toString()
@@ -158,15 +174,15 @@ Rectangle {
            anchors.leftMargin: statusListItem.leftPadding
            anchors.rightMargin: statusListItem.rightPadding
            anchors.verticalCenter: parent.verticalCenter
-            height: statusListItemTitle.height + 
-              (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) +
-              (statusListItemTertiaryTitle.visible ? statusListItemTertiaryTitle.height : 0)
+            height: childrenRect.height

            StatusBaseText {
                id: statusListItemTitle
                text: statusListItem.title
-                width: parent.width
+                width: contentWidth < (parent.width - statusListItemTitleAsideText.contentWidth) ?
+                       contentWidth : (parent.width - statusListItemTitleAsideText.contentWidth)
                font.pixelSize: 15
+                height: visible ? contentHeight : 0
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                color: {
                  if (!statusListItem.enabled) {
@@ -181,6 +197,26 @@ Rectangle {
                          return Theme.palette.dangerColor1
                  }
                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
+                    hoverEnabled: true
+                    onClicked: {
+                        statusListItem.titleClicked(statusListItem.titleId)
+                    }
+                }
+            }
+
+            StatusBaseText {
+                id: statusListItemTitleAsideText
+                anchors.left: statusListItemTitle.right
+                anchors.leftMargin: 4
+                anchors.verticalCenter: statusListItemTitle.verticalCenter
+                text: statusListItem.titleAsideText
+                font.pixelSize: 10
+                color: Theme.palette.baseColor1
+                visible: !!statusListItem.titleAsideText
            }

            StatusBaseText {
@@ -190,6 +226,7 @@ Rectangle {
                text: statusListItem.subTitle
                font.pixelSize: 15
                color: !statusListItem.enabled || !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                height: visible ? contentHeight : 0
                visible: !!statusListItem.subTitle
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            }
@@ -198,12 +235,20 @@ Rectangle {
                id: statusListItemTertiaryTitle
                anchors.top: statusListItemSubTitle.bottom
                width: parent.width
+                height: visible ? contentHeight : 0
                text: statusListItem.tertiaryTitle
                color: Theme.palette.baseColor1
                font.pixelSize: 13
                visible: !!statusListItem.tertiaryTitle
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            }
+
+            StatusListItemBadge {
+                id: statusListItemBadge
+                anchors.top: statusListItemTertiaryTitle.bottom
+                width: contentItem.width
+                implicitHeight: visible ? 22 : 0
+            }
        }

        StatusBaseText {
@@ -0,0 +1,80 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Control {
+    id: root
+    implicitWidth: contentItem.width
+    implicitHeight: visible ? 22 : 0
+    visible: !!root.primaryText
+
+    property string primaryText: ""
+    property string secondaryText: ""
+
+    property StatusImageSettings image: StatusImageSettings {
+        height: 16
+        width: 16
+        isIdenticon: false
+    }
+    property StatusIconSettings icon: StatusIconSettings {
+        height: 16
+        width: 16
+        isLetterIdenticon: false
+        background: StatusIconBackgroundSettings {}
+        color: "transparent"
+    }
+
+    background: Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+        radius: 11
+        border.color: Theme.palette.directColor7
+    }
+
+    contentItem: Item {
+        id: contentItem
+        width: (contentItemRow.width + 10)
+        height: parent.height
+        RowLayout {
+            id: contentItemRow
+            anchors.centerIn: parent
+            anchors.horizontalCenterOffset: -spacing
+            spacing: 2
+            StatusRoundedImage {
+                implicitWidth: root.image.width
+                implicitHeight: root.image.height
+                visible: !root.icon.isLetterIdenticon
+                image.source: root.image.source
+                border.color: Theme.palette.baseColor1
+                border.width: root.image.isIdenticon ? 1 : 0
+            }
+            StatusLetterIdenticon {
+                implicitWidth: root.icon.width
+                implicitHeight: root.icon.width
+                letterSize: 11
+                visible: root.icon.isLetterIdenticon
+                color: root.icon.color
+                name: root.primaryText
+            }
+            StatusBaseText {
+                font.weight: Font.Medium
+                color: Theme.palette.baseColor1
+                text: root.primaryText
+            }
+            StatusIcon {
+                Layout.alignment: Qt.AlignVCenter
+                visible: !!root.secondaryText
+                color: Theme.palette.baseColor1
+                icon: "next"
+            }
+            StatusBaseText {
+                font.weight: Font.Medium
+                color: Theme.palette.baseColor1
+                visible: !!root.secondaryText
+                text: root.secondaryText
+            }
+        }
+    }
+}
@@ -19,3 +19,4 @@ StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
 StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
+StatusListItemBadge 0.1 StatusListItemBadge.qml
@@ -179,8 +179,8 @@ Item {

    StatusFlatRoundButton {
        id: clearButtton
-        visible: edit.text.length != 0 && 
-            statusBaseInput.clearable && 
+        visible: edit.text.length != 0 &&
+            statusBaseInput.clearable &&
            !statusBaseInput.multiline &&
            edit.activeFocus
        anchors.right: parent.right
@@ -4,9 +4,8 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1

-Rectangle {
+Item {
    id: root
-
    implicitWidth: 480
    height: (label.visible ? 
                  label.anchors.topMargin +
@@ -22,7 +21,6 @@ Rectangle {
                  errorMessage.height :
                  0) + 8

-    color: "transparent"
    property alias input: statusBaseInput
    property string label: ""
    property int charLimit: 0
@@ -19,6 +19,8 @@ QC.Popup {
    property alias contentComponent: contentLoader.item
    property alias rightButtons: footerImpl.rightButtons
    property alias leftButtons: footerImpl.leftButtons
+    property bool showHeader: true
+    property bool showFooter: true

    signal editButtonClicked()

@@ -46,8 +48,9 @@ QC.Popup {
        width: parent.width
        Spares.StatusModalHeader {
            id: headerImpl
-            width: 480
+            width: visible ? parent.width : 0

+            visible: statusModal.showHeader
            title: header.title
            subTitle: header.subTitle
            image: header.image
@@ -59,14 +62,15 @@ QC.Popup {

        Loader {
            id: contentLoader
+            width: parent.width
            active: true
-            anchors.horizontalCenter: parent.horizontalCenter
            sourceComponent: statusModal.content
        }

        Spares.StatusModalFooter {
            id: footerImpl
-            width: 480
+            width: visible ? parent.width : 0
+            visible: statusModal.showFooter
        }
    }
 }
@@ -10,16 +10,18 @@ import StatusQ.Popups 0.1

 Menu {
    id: statusPopupMenu
-
-    closePolicy: Popup.CloseOnReleaseOutside | Popup.CloseOnEscape 
+    closePolicy: Popup.CloseOnReleaseOutsideParent | Popup.CloseOnEscape
    topPadding: 8
    bottomPadding: 8

    property int menuItemCount: 0
    property var subMenuItemIcons: []
+
    property var openHandler
    property var closeHandler

+    signal menuItemClicked(int menuIndex)
+
    onOpened: {
        if (typeof openHandler === "function") {
            openHandler()
@@ -34,19 +36,21 @@ Menu {

    delegate: MenuItem {
        id: statusPopupMenuItem
-
+        implicitWidth: parent ? parent.width : 0
        implicitHeight: action.enabled ? 38 : 0

        property int subMenuIndex

        Component.onCompleted: {
-            if (subMenu) {
+            if (!!subMenu) {
                subMenuIndex = statusPopupMenu.menuItemCount
                statusPopupMenu.menuItemCount += 1
            }
        }

-        action: StatusMenuItem {}
+        action: StatusMenuItem {
+            onTriggered: { statusPopupMenu.menuItemClicked(statusPopupMenuItem.subMenuIndex); }
+        }

        Component {
            id: indicatorComponent
@@ -63,12 +67,17 @@ Menu {
                    }
                    rotation: statusPopupMenuItem.action.iconRotation
                    icon: {
-                        if (statusPopupMenuItem.subMenu) {
-                            return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
+                        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.icon.name !== "") {
+                            return statusPopupMenuItem.action.icon.name;
+                        } else if (statusPopupMenuItem.action.iconSettings.name !== "") {
+                            return statusPopupMenuItem.action.iconSettings.name;
+                        } else {
+                            return "";
                        }
-                        return statusPopupMenuItem.action.icon.name ||
-                          statusPopupMenuItem.action.iconSettings.name
-                    }   
+                    }
                    color: {
                        let c = statusPopupMenuItem.action.iconSettings.color ||
                            statusPopupMenuItem.action.icon.color
@@ -195,7 +204,7 @@ Menu {

        background: Rectangle {
            color: {
-                if (hovered) {
+                if (statusPopupMenuItem.hovered) {
                    return statusPopupMenuItem.action.type === StatusMenuItem.Type.Danger ? Theme.palette.dangerColor3 : Theme.palette.statusPopupMenu.hoverBackgroundColor
                }
                return "transparent"
@@ -204,9 +213,8 @@ Menu {

        MouseArea {
            id: sensor
-
            anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor 
+            cursorShape: Qt.PointingHandCursor
            hoverEnabled: statusPopupMenuItem.action.enabled
            onPressed: mouse.accepted = false
        }
@@ -0,0 +1,144 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Popups 0.1
+
+StatusPopupMenu {
+    id: root
+
+    property var searchPopup
+    property var locationModel
+
+    signal itemClicked(string firstLevelItemValue, string secondLevelItemValue)
+
+    StatusMenuItem {
+        text: "Anywhere"
+        onTriggered: {
+            searchPopup.resetSearchSelection();
+            root.itemClicked("", "");
+        }
+    }
+    StatusMenuSeparator { }
+    //Dummy item to keep seperator in right position
+    MenuItem { implicitHeight: 0.00001 }
+    Instantiator {
+        model: root.locationModel
+        delegate: Loader {
+            sourceComponent: (!!model.subItems && model.subItems.count > 0) ? subMenus : subMenuItemComponent
+            onLoaded: {
+                if (!!model.subItems && model.subItems.count > 0)  {
+                    item.parentValue = model.value
+                    item.title = model.title;
+                    item.subItemsModel = model.subItems;
+                    item.parentIconName = model.iconName;
+                    item.parentImageSource = model.imageSource;
+                    item.parentIdenticonColor = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
+                    item.parentIsIdenticon = model.isIdenticon;
+                    root.subMenuItemIcons.push({
+                                    source: model.imageSource,
+                                    icon: model.iconName,
+                                    isIdenticon: model.isIdenticon,
+                                    color: model.iconColor,
+                                    isLetterIdenticon: !model.imageSource && !model.iconName
+                                   });
+                    root.insertMenu(index+2, item);
+                } else {
+                    item.value = model.value
+                    item.text = model.title;
+                    item.iconSettings.name = model.iconName;
+                    item.iconSettings.color = model.iconColor;
+                    item.iconSettings.isLetterIdenticon = !model.imageSource && !model.iconName
+                    item.image.source = model.imageSource;
+                    item.image.isIdenticon = model.isIdenticon;
+                    root.insertItem(index+2, item);
+                }
+            }
+        }
+        onObjectRemoved: { root.removeItem(root.takeItem(index+2)); }
+    }
+
+    Component {
+        id: subMenuItemComponent
+        StatusSearchPopupMenuItem {
+            onClicked: {
+                searchPopup.resetSearchSelection()
+                searchPopup.setSearchSelection(text,
+                                               "",
+                                               image.source,
+                                               image.isIdenticon,
+                                               iconSettings.name,
+                                               iconSettings.color)
+                root.itemClicked(value, "")
+            }
+        }
+    }
+
+    Component {
+        id: subMenus
+        StatusPopupMenu {
+            id: menu
+            property var subItemsModel
+            property string parentValue
+            property string parentIconName
+            property string parentImageSource
+            property string parentIdenticonColor
+            property string parentIsIdenticon
+            Repeater {
+                id: menuLoader
+                model: menu.subItemsModel
+                property string parentValue: menu.parentValue
+                property string parentTitleText: menu.title
+                property string parentIconName: menu.parentIconName
+                property string parentImageSource: menu.parentImageSource
+                property string parentIdenticonColor: menu.parentIdenticonColor
+                property string parentIsIdenticon: menu.parentIsIdenticon
+                Loader {
+                    id: subMenuLoader
+                    sourceComponent: StatusSearchPopupMenuItem {
+                        value: model.value
+                        text: model.text
+                        image.source: model.imageSource
+                        iconSettings.name: model.iconName
+                        iconSettings.color: model.iconColor
+                        image.isIdenticon: model.isIdenticon
+                        onTriggered: {
+                            searchPopup.resetSearchSelection()
+                            if (menuLoader.parentTitleText === "Chat") {
+                                searchPopup.setSearchSelection(model.text,
+                                                               "",
+                                                               model.imageSource,
+                                                               model.isIdenticon,
+                                                               model.iconName,
+                                                               model.iconColor)
+                            } else {
+                                searchPopup.setSearchSelection(menuLoader.parentTitleText,
+                                                   model.text,
+                                                   menuLoader.parentImageSource,
+                                                   menuLoader.parentIsIdenticon,
+                                                   menuLoader.parentIconName,
+                                                   menuLoader.parentIdenticonColor)
+                            }
+                            root.itemClicked(menuLoader.parentValue, value)
+                            root.dismiss()
+                        }
+                    }
+                }
+            }
+        }
+    }
+    onMenuItemClicked: {
+        searchPopup.resetSearchSelection()
+        let menuItem = root.menuAt(root.currentIndex)
+        searchPopup.setSearchSelection(menuItem.title,
+                           "",
+                           menuItem.parentImageSource,
+                           menuItem.parentIsIdenticon,
+                           menuItem.parentIconName,
+                           menuItem.parentIdenticonColor)
+        root.itemClicked(menuItem.parentValue, "")
+        //TODO fix error "QML StatusPopupMenu: cannot find any window to open popup in."
+        root.dismiss()
+    }
+}
@@ -0,0 +1,348 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.12
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+
+StatusModal {
+    id: root
+    width: 700
+    height: (!!searchResults && (searchResults.count >= 0) && (searchText !== "")) ? (((searchResults.count < 5)) ? 560 : 770) : 142 //970
+    anchors.centerIn: parent
+    showHeader: false
+    showFooter: false
+
+    property string searchText: contentComponent.searchText
+    property string noResultsLabel: "No results"
+    property string defaultSearchLocationText: "Anywhere"
+    property bool loading
+    property Menu searchOptionsPopupMenu: Menu { }
+    property var searchResults: [ ]
+    property var searchSelectionButton
+
+    signal resultItemClicked(string itemId)
+    signal resultItemTitleClicked(string titleId)
+
+    function setSearchSelection(text = "",
+                                secondaryText = "",
+                                imageSource = "",
+                                isIdenticon = "",
+                                iconName = "",
+                                iconColor = "") {
+        searchSelectionButton.primaryText = text
+        searchSelectionButton.secondaryText = secondaryText
+        searchSelectionButton.image.source = imageSource
+        searchSelectionButton.image.isIdenticon = isIdenticon
+        searchSelectionButton.iconSettings.name = iconName
+        searchSelectionButton.iconSettings.color = iconColor !== ""? iconColor : Theme.palette.primaryColor1
+        searchSelectionButton.iconSettings.isLetterIdenticon = !iconName && !imageSource
+    }
+
+    function resetSearchSelection() {
+        setSearchSelection(defaultSearchLocationText, "", "", false, "", "transparent")
+    }
+
+    content: Item {
+        width: parent.width
+        height: root.height
+        property alias searchText: inputText.text
+
+        ColumnLayout {
+            id: contentItemColumn
+            anchors.fill: parent
+            spacing: 0
+            Item {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 63
+                StatusIcon {
+                    id: statusIcon
+                    width: 40
+                    height: 40
+                    anchors.left: parent.left
+                    anchors.leftMargin: 12
+                    anchors.verticalCenter: parent.verticalCenter
+                    icon: "search"
+                    color: Theme.palette.baseColor1
+                }
+                TextEdit {
+                    id: inputText
+                    anchors.left: statusIcon.right
+                    anchors.leftMargin: 15
+                    anchors.right: parent.right
+                    anchors.rightMargin: 8
+                    anchors.verticalCenter: parent.verticalCenter
+                    focus: true
+                    font.pixelSize: 28
+                    font.family: Theme.palette.baseFont.name
+                    color: Theme.palette.directColor1
+                }
+            }
+            StatusMenuSeparator { 
+                topPadding: 0
+                Layout.fillWidth: true 
+            }
+            Item {
+                Layout.preferredWidth: parent.width
+                Layout.preferredHeight: 58
+                Button {
+                    id: searchOptionsMenuButton
+
+                    Component.onCompleted: {
+                        root.searchSelectionButton = searchOptionsMenuButton
+                    }
+
+                    property string prefixText: "In"
+                    property string primaryText: ""
+                    property string secondaryText: ""
+                    property StatusIconSettings iconSettings: StatusIconSettings {
+                        name: ""
+                        isLetterIdenticon: false
+                    }
+
+                    property StatusImageSettings image: StatusImageSettings {
+                        source: ""
+                        isIdenticon: false
+                    }
+
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    implicitWidth: (contentItemRowLayout.width + 24)
+                    implicitHeight: 32
+
+                    background: Rectangle {
+                        anchors.fill: parent
+                        color: Theme.palette.baseColor2
+                        radius: 8
+                    }
+
+                    contentItem: Item {
+                        anchors.fill: parent
+
+                        MouseArea {
+                            id: sensor
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor 
+                            onClicked: root.searchOptionsPopupMenu.popup();
+
+                            RowLayout {
+                                id: contentItemRowLayout
+                                anchors.centerIn: parent
+                                spacing: 2
+                                StatusBaseText {
+                                    color: Theme.palette.directColor1
+                                    text: searchOptionsMenuButton.prefixText + ": "
+                                    font.weight: Font.Medium
+                                }
+
+                                Loader {
+                                    Layout.preferredWidth: active ? 16 : 0
+                                    Layout.preferredHeight: 16
+                                    active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText &&
+                                        (searchOptionsMenuButton.iconSettings.name ||
+                                        searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
+                                        !!searchOptionsMenuButton.image.source.toString())
+
+                                    sourceComponent: {
+                                        if (!!searchOptionsMenuButton.image.source.toString()) {
+                                            return statusRoundedImageCmp
+                                        }
+                                        if (!!searchOptionsMenuButton.iconSettings.isLetterIdenticon || !searchOptionsMenuButton.iconSettings.name) {
+                                            return statusLetterIdenticonCmp
+                                        }
+                                        return statusIconCmp
+                                    }
+                                }
+
+                                Component {
+                                    id: statusIconCmp
+                                    StatusIcon {
+                                        width: 16
+                                        icon: searchOptionsMenuButton.iconSettings.name
+                                        color: searchOptionsMenuButton.iconSettings.color
+                                    }
+                                }
+
+                                Component {
+                                    id: statusRoundedImageCmp
+                                    Item {
+                                        width: 16
+                                        height: 16
+                                        StatusRoundedImage {
+                                            id: statusRoundedImage
+                                            implicitWidth: parent.width
+                                            implicitHeight: parent.height
+                                            image.source: searchOptionsMenuButton.image.source
+                                            color: searchOptionsMenuButton.image.isIdenticon ?
+                                                Theme.palette.statusRoundedImage.backgroundColor :
+                                                "transparent"
+                                            border.width: searchOptionsMenuButton.image.isIdenticon ? 1 : 0
+                                            border.color: Theme.palette.directColor7
+                                        }
+
+                                        Loader {
+                                            sourceComponent: statusLetterIdenticonCmp
+                                            active: statusRoundedImage.image.status === Image.Error
+                                        }
+                                    }
+                                }
+
+                                Component {
+                                    id: statusLetterIdenticonCmp
+                                    StatusLetterIdenticon {
+                                        implicitWidth: 16
+                                        implicitHeight: 16
+                                        letterSize: 11
+                                        color: searchOptionsMenuButton.iconSettings.color
+                                        name: searchOptionsMenuButton.primaryText
+                                    }
+                                }
+
+                                StatusBaseText {
+                                    color: Theme.palette.directColor1
+                                    text: searchOptionsMenuButton.primaryText
+                                    font.weight: Font.Medium
+                                }
+                                StatusIcon {
+                                    Layout.preferredWidth: 14.5
+                                    Layout.preferredHeight: 17.5
+                                    Layout.alignment: Qt.AlignVCenter
+                                    visible: !!searchOptionsMenuButton.secondaryText
+                                    color: Theme.palette.baseColor1
+                                    icon: "next"
+                                }
+                                StatusIcon {
+                                    Layout.preferredWidth: 17.5
+                                    Layout.preferredHeight: 17.5
+                                    Layout.alignment: Qt.AlignVCenter
+                                    visible: !!searchOptionsMenuButton.secondaryText
+                                    color: Theme.palette.directColor1
+                                    icon: "channel"
+                                }
+                                StatusBaseText {
+                                    color: Theme.palette.directColor1
+                                    visible: !!searchOptionsMenuButton.secondaryText
+                                    text: searchOptionsMenuButton.secondaryText
+                                    font.weight: Font.Medium
+                                }
+                                StatusIcon {
+                                    Layout.preferredWidth: 17.5
+                                    Layout.preferredHeight: 14.5
+                                    Layout.alignment: Qt.AlignVCenter
+                                    icon: "chevron-down"
+                                    color: Theme.palette.directColor1
+                                }
+                            }
+                        }
+                    }
+                }
+
+                StatusFlatRoundButton {
+                    id: closeButton
+                    width: 32
+                    height: 32
+                    anchors.left: searchOptionsMenuButton.right
+                    anchors.leftMargin: 4
+                    anchors.verticalCenter: parent.verticalCenter
+                    opacity: (searchOptionsMenuButton.primaryText === defaultSearchLocationText) ? 0.0 : 1.0
+                    visible: (opacity > 0.1)
+                    type: StatusFlatRoundButton.Type.Secondary
+                    icon.name: "close"
+                    icon.color: Theme.palette.directColor1
+                    icon.width: 20
+                    icon.height: 20
+                    onClicked: { root.resetSearchSelection(); }
+                }
+            }
+
+            StatusMenuSeparator { Layout.fillWidth: true; visible: (root.height > 142) }
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                clip: true
+                ListView {
+                    id: view
+                    anchors.fill: parent
+                    anchors {
+                        leftMargin: 0
+                        rightMargin: 0
+                        bottomMargin: 67
+                    }
+                    visible: (!root.loading && (count > 0))
+                    model: root.searchResults
+                    ScrollBar.vertical: ScrollBar { }
+                    delegate: StatusListItem {
+                        width: view.width
+                        itemId: model.itemId
+                        titleId: model.titleId
+                        title: model.title
+                        statusListItemTitle.color: model.title.startsWith("@") ? Theme.palette.primaryColor1 : Theme.palette.directColor1
+                        subTitle: model.content
+                        radius: 0
+                        statusListItemSubTitle.height: model.content !== "" ? 20 : 0
+                        statusListItemSubTitle.elide: Text.ElideRight
+                        statusListItemSubTitle.color: Theme.palette.black
+                        icon.isLetterIdenticon: (model.badgeImage === "")
+                        titleAsideText: model.time
+                        image.source: model.badgeImage
+                        badge.primaryText: model.badgePrimaryText
+                        badge.secondaryText: model.badgeSecondaryText
+                        badge.image.source: model.badgeImage
+                        badge.icon.isLetterIdenticon: model.isLetterIdenticon
+                        badge.icon.color: model.badgeIdenticonColor
+
+                        onClicked: {
+                            root.resultItemClicked(itemId)
+                        }
+
+                        onTitleClicked: {
+                            root.resultItemTitleClicked(titleId)
+                        }
+                    }
+                    section.property: "sectionName"
+                    section.criteria: ViewSection.FullString
+                    section.delegate: Item {
+                        height: 34
+                        width: view.width
+                        StatusBaseText {
+                            font.pixelSize: 15
+                            color: Theme.palette.baseColor1
+                            text: section
+                            anchors.left: parent.left
+                            anchors.leftMargin: 16
+                            anchors.bottom: parent.bottom
+                            anchors.bottomMargin: 4
+                        }
+                    }
+                }
+                StatusLoadingIndicator {
+                    anchors.centerIn: parent
+                    visible: root.loading
+                    color: Theme.palette.primaryColor1
+                    width: 24
+                    height: 24
+                }
+
+                StatusBaseText {
+                    anchors.centerIn: parent
+                    text: root.noResultsLabel
+                    color: Theme.palette.baseColor1
+                    font.pixelSize: 13
+                    visible: ((inputText.text !== "") && (view.count === 0) && !root.loading)
+                }
+            }
+        }
+    }
+    onClosed: {
+        root.resetSearchSelection();
+        root.loading = false;
+        contentComponent.searchText = "";
+    }
+}
@@ -0,0 +1,79 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.12
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+MenuItem {
+    id: root
+    implicitHeight: 38
+
+    property string value: ""
+
+    property StatusImageSettings image: StatusImageSettings {
+        height: 16
+        width: 16
+        isIdenticon: false
+    }
+    property StatusIconSettings iconSettings: StatusIconSettings {
+        height: 16
+        width: 16
+        isLetterIdenticon: (root.image.source.toString() === ""
+                            && root.iconSettings.name.toString() === "")
+        background: StatusIconBackgroundSettings {}
+        color: "transparent"
+    }
+
+    background: Rectangle {
+        color: root.hovered ? Theme.palette.statusPopupMenu.hoverBackgroundColor : "transparent"
+    }
+
+    contentItem: RowLayout {
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        StatusIcon {
+            Layout.preferredWidth: visible ? root.iconSettings.width : 0
+            Layout.preferredHeight: visible ? root.iconSettings.height : 0
+            Layout.alignment: Qt.AlignVCenter
+            visible: !!root.iconSettings.name && !root.image.source.toString()
+            icon:  root.iconSettings.name
+            color: (icon === "channel")? Theme.palette.directColor1 : root.iconSettings.color
+        }
+        StatusRoundedImage {
+            Layout.preferredWidth: visible ? root.image.width : 0
+            Layout.preferredHeight: visible ? root.image.height : 0
+            Layout.alignment: Qt.AlignVCenter
+            visible: root.image.source.toString() !== ""
+            image.source: root.image.source
+            border.width: root.image.isIdenticon ? 1 : 0
+            border.color: Theme.palette.directColor7
+        }
+        StatusLetterIdenticon {
+            Layout.preferredWidth: visible ? root.iconSettings.width : 0
+            Layout.preferredHeight: visible ? root.iconSettings.height : 0
+            visible: root.iconSettings.isLetterIdenticon && !root.iconSettings.name && !root.image.source.toString()
+            color: root.iconSettings.color
+            name: root.text
+            letterSize: 11
+        }
+        StatusBaseText {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+            text: root.text
+            color: Theme.palette.directColor1
+            font.pixelSize: 13
+            elide: Text.ElideRight
+        }
+        Item {
+            Layout.fillWidth: true
+        }
+    }
+    MouseArea {
+        id: sensor
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: mouse.accepted = false
+    }
+}
@@ -5,4 +5,7 @@ StatusPopupMenu 0.1 StatusPopupMenu.qml
 StatusMenuItem 0.1 StatusMenuItem.qml
 StatusMenuHeadline 0.1 StatusMenuHeadline.qml
 StatusModal 0.1 StatusModal.qml
+StatusSearchPopup 0.1 StatusSearchPopup.qml
 StatusModalDivider 0.1 StatusModalDivider.qml
+StatusSearchPopupMenuItem 0.1 StatusSearchPopupMenuItem.qml
+StatusSearchLocationMenu 0.1 StatusSearchLocationMenu.qml
@@ -30,7 +30,7 @@ Rectangle {
        }
    }

-    implicitHeight: rootLayout.implicitHeight + 30
+    implicitHeight: visible ? rootLayout.implicitHeight + 30 : 0

    RowLayout {
        id: rootLayout
@@ -20,7 +20,7 @@ Rectangle {
    signal editButtonClicked
    signal close

-    implicitHeight: Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32
+    implicitHeight: visible? Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32 : 0
    implicitWidth: 480

    radius: 16
@@ -250,5 +250,9 @@
        <file>src/StatusQ/Popups/statusModal/StatusModalHeader.qml</file>
        <file>src/StatusQ/Popups/StatusModal.qml</file>
        <file>src/StatusQ/Core/StatusModalHeaderSettings.qml</file>
+        <file>src/StatusQ/Popups/StatusSearchPopup.qml</file>
+        <file>src/StatusQ/Components/StatusListItemBadge.qml</file>
+        <file>src/StatusQ/Popups/StatusSearchPopupMenuItem.qml</file>
+        <file>src/StatusQ/Popups/StatusSearchLocationMenu.qml</file>
    </qresource>
 </RCC>
Author	SHA1	Message	Date
Sale Djenic	c68ee3dbe4	fix(StatusSearchPopup): replace "#" character with "channel" icon	2021-08-16 14:07:05 +02:00
Sale Djenic	bcb1e1cd97	feat(StatusSearchPopupMenuItem): New APIs resetSearchSelection and setSearchSelection New methods added `resetSearchSelection` and `setSearchSelection` for resetting and setting selected location.	2021-08-16 14:06:51 +02:00
Sale Djenic	d5bd64b742	refactor(StatusSearchLocationMenu): expose a single itemClicked signal A single `signal itemClicked(string firstLevelItemValue, string secondLevelItemValue)` with parameters referring to the first level and second level item is exposed and replaced multiple signals we had before for the same purpose.	2021-08-16 14:05:29 +02:00
Sale Djenic	c63cbedebf	feat(StatusSearchPopupMenuItem): new API Status Menu item received new value property.	2021-08-16 14:04:00 +02:00
Sale Djenic	8ca20bc70a	fix(StatusSearchLocationMenu): typo fix Fixed a typo in StatusSearchLocationMenu.locationModel	2021-08-16 14:02:45 +02:00
Sale Djenic	983b9cbce9	feat(StatusListItem): introduce itemId and titleId properties and their handlers A click on the item's title or whole item emits appropriate `titleClicked` or `clicked` signal with `titleId` or `itemId` value respectively. `titleId` and `itemId` may or may not defer from their display values, it's up to logic which is applied. This is introduced because of need of the issue-2934.	2021-08-16 14:01:38 +02:00
Pascal Precht	87ae7b90e7	chore: cut 0.4.0 release	2021-08-12 12:57:33 +02:00
Alexandra Betouni	30f5ae4b32	feat(StatusQ.Popups) Adding SearchPopup component Closes #264	2021-08-12 11:35:09 +02:00