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
12 changed files with 175 additions and 135 deletions
@@ -567,8 +567,9 @@ Rectangle {
                    chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
                    onSearchButtonClicked: {
                        searchButton.highlighted = !searchButton.highlighted;
-                        searchPopup.searchSelectionButton.primaryText = demoCommunityDetailModal.header.title;
-                        searchPopup.searchSelectionButton.image.source = demoCommunityDetailModal.header.image.source;
+                        searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
+                                                       "",
+                                                       demoCommunityDetailModal.header.image.source);
                        searchPopup.open();
                    }
                    membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
@@ -618,7 +619,7 @@ Rectangle {
                StatusSearchLocationMenu {
                    id: searchPopupMenu
                    searchPopup: searchPopup
-                    locatioModel: models.optionsModel
+                    locationModel: models.optionsModel
                }
            }

@@ -196,46 +196,48 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I

    //dummy search popup models
    property var searchResultsA: ListModel {
-        ListElement { name: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
+        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 { name: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; 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 { name: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "@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 ";
+        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 { name: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
-        ListElement { name: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "pink"; isLetterIdenticon: true }
-        ListElement { name: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "orange"; isLetterIdenticon: true }
-        ListElement { name: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
+        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 {
-            title: "Item with icon";
+            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: ""
@@ -243,6 +245,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    isIdenticon: false
                },
                ListElement {
+                    value: "sub_item_1_2"
                    text: "identicon item"
                    imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
                    iconName: ""
@@ -250,6 +253,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    isIdenticon: true
                }]}
        ListElement {
+            value: "item_2"
            title: "Community item";
            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            iconName: ""
@@ -257,6 +261,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            isIdenticon: false
            subItems: [
                ListElement {
+                    value: "sub_item_2_1"
                    text: "welcome"
                    imageSource: ""
                    iconName: "channel"
@@ -264,6 +269,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    isIdenticon: false
                },
                ListElement {
+                    value: "sub_item_2_2"
                    text: "support"
                    imageSource: ""
                    iconName: "channel"
@@ -271,6 +277,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    isIdenticon: false
                },
                ListElement {
+                    value: "sub_item_2_3"
                    text: "news"
                    imageSource: ""
                    iconName: "channel"
@@ -278,6 +285,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    isIdenticon: false
                }]}
        ListElement {
+            value: "item_3"
            title: "Other";
            imageSource: "";
            iconName: "info"
@@ -285,6 +293,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            isIdenticon: false
            subItems: [
                ListElement {
+                    value: "sub_item_3_1"
                    text: "news"
                    imageSource: ""
                    iconName: "channel"
@@ -292,6 +301,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    isIdenticon: false
                }]}
        ListElement {
+            value: "item_4"
            title: "Letter identicon";
            imageSource: "";
            iconName: ""
@@ -299,6 +309,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            isIdenticon: false
            subItems: [
                ListElement {
+                    value: "sub_item_4_1"
                    text: "news"
                    imageSource: ""
                    iconName: "channel"
@@ -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

@@ -56,10 +56,12 @@ Rectangle {
            type: StatusFlatRoundButton.Type.Secondary
            onClicked: statusChatToolBar.searchButtonClicked()

-            // initializing the tooltip
-            tooltip.text: "Search"
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
+            StatusToolTip {
+                visible: !!text && parent.hovered
+                text: "Search"
+                orientation: StatusToolTip.Orientation.Bottom
+                y: parent.height + 12
+            }
        }

        StatusFlatRoundButton {
@@ -70,10 +72,12 @@ Rectangle {
            type: StatusFlatRoundButton.Type.Secondary
            onClicked: statusChatToolBar.membersButtonClicked()

-            // initializing the tooltip
-            tooltip.text: "Members"
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
+            StatusToolTip {
+                visible: !!text && parent.hovered
+                text: "Members"
+                orientation: StatusToolTip.Orientation.Bottom
+                y: parent.height + 12
+            }
        }

        StatusFlatRoundButton {
@@ -84,12 +88,6 @@ Rectangle {
            type: StatusFlatRoundButton.Type.Secondary
            visible: !!statusChatToolBar.popupMenu

-            // initializing the tooltip
-            tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
-            tooltip.text: "More"
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
-
            property bool showMoreMenu: false
            onClicked: {
                if (showMoreMenu) {
@@ -103,6 +101,13 @@ Rectangle {
                showMoreMenu = !showMoreMenu;
            }

+            StatusToolTip {
+                visible: !!text && parent.hovered && !popupMenuSlot.item.opened
+                text: "More"
+                orientation: StatusToolTip.Orientation.Bottom
+                y: parent.height + 12
+            }
+
            Loader {
                id: popupMenuSlot
                active: !!statusChatToolBar.popupMenu
@@ -132,11 +137,6 @@ Rectangle {
            icon.height: 21
            type: StatusFlatRoundButton.Type.Secondary

-            // initializing the tooltip
-            tooltip.text: "Activity"
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
-
            onClicked: statusChatToolBar.notificationButtonClicked()

            StatusBadge {
@@ -160,6 +160,14 @@ Rectangle {
                border.width: 2
                border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
            }
+
+            StatusToolTip {
+                visible: !!text && parent.hovered
+                text: "Activity"
+                orientation: StatusToolTip.Orientation.Bottom
+                y: parent.height + 12
+                arrow.x: width - (parent.width-4)
+            }
        }

    }
@@ -34,6 +34,9 @@ Rectangle {

    radius: 8

+    property string itemId: ""
+    property string titleId: ""
+
    property string title: ""
    property string titleAsideText: ""
    property string subTitle: ""
@@ -83,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) {
@@ -100,6 +106,10 @@ Rectangle {
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        hoverEnabled: true

+        onClicked: {
+            statusListItem.clicked(statusListItem.itemId)
+        }
+
        Loader {
            id: iconOrImage
            anchors.left: parent.left
@@ -187,6 +197,15 @@ Rectangle {
                          return Theme.palette.dangerColor1
                  }
                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
+                    hoverEnabled: true
+                    onClicked: {
+                        statusListItem.titleClicked(statusListItem.titleId)
+                    }
+                }
            }

            StatusBaseText {
@@ -34,7 +34,6 @@ Rectangle {
    property bool loading: false

    property alias hovered: sensor.containsMouse
-    property alias tooltip: statusToolTip

    property bool highlighted: false

@@ -152,9 +151,4 @@ Rectangle {
        onReleased: statusFlatRoundButton.released(mouse)
        onPressAndHold: statusFlatRoundButton.pressAndHold(mouse)
    } // Sensor
-
-    StatusToolTip {
-        id: statusToolTip
-        visible: !!text && parent.hovered
-    } // Tooltip
 } // Rectangle
@@ -15,7 +15,6 @@ ToolTip {

    property int maxWidth: 800
    property int orientation: StatusToolTip.Orientation.Top
-    property int offset: 0
    property alias arrow: arrow

    implicitWidth: Math.min(maxWidth, textContent.implicitWidth + 16)
@@ -42,13 +41,13 @@ ToolTip {
            radius: 1
            x: {
                if (orientation === StatusToolTip.Orientation.Top || orientation === StatusToolTip.Orientation.Bottom) {
-                    return statusToolTipBackground.width / 2 - width / 2 + offset
+                    return statusToolTipBackground.width / 2 - width / 2
                }
                if (orientation === StatusToolTip.Orientation.Left) {
-                    return statusToolTipContentBackground.width - (width / 2) - 8 + offset
+                    return statusToolTipContentBackground.width - (width / 2) - 8
                }
                if (orientation === StatusToolTip.Orientation.Right) {
-                    return -width/2 + 8 + offset
+                    return -width/2 + 8
                }
            }
            y: {
@@ -9,30 +9,27 @@ StatusPopupMenu {
    id: root

    property var searchPopup
-    property var locatioModel
+    property var locationModel

-    signal subMenuClicked()
-    signal subMenuItemClicked()
-    signal anywhereItemClicked()
-    signal menuItemNoSubMenuClicked()
+    signal itemClicked(string firstLevelItemValue, string secondLevelItemValue)

    StatusMenuItem {
        text: "Anywhere"
        onTriggered: {
-            searchPopup.resetSelectionBadge();
-            searchPopup.searchSelectionButton.primaryText = text;
-            root.anywhereItemClicked();
+            searchPopup.resetSearchSelection();
+            root.itemClicked("", "");
        }
    }
    StatusMenuSeparator { }
    //Dummy item to keep seperator in right position
    MenuItem { implicitHeight: 0.00001 }
    Instantiator {
-        model: root.locatioModel
+        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;
@@ -48,6 +45,7 @@ StatusPopupMenu {
                                   });
                    root.insertMenu(index+2, item);
                } else {
+                    item.value = model.value
                    item.text = model.title;
                    item.iconSettings.name = model.iconName;
                    item.iconSettings.color = model.iconColor;
@@ -65,14 +63,14 @@ StatusPopupMenu {
        id: subMenuItemComponent
        StatusSearchPopupMenuItem {
            onClicked: {
-                searchPopup.resetSelectionBadge()
-                searchPopup.searchSelectionButton.primaryText = text;
-                searchPopup.searchSelectionButton.image.source = image.source;
-                searchPopup.searchSelectionButton.image.isIdenticon = image.isIdenticon;
-                searchPopup.searchSelectionButton.iconSettings.name = iconSettings.name;
-                searchPopup.searchSelectionButton.iconSettings.color = !!iconSettings.color ? iconSettings.color : Theme.palette.primaryColor1
-                searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !iconSettings.name && !image.source
-                root.menuItemNoSubMenuClicked();
+                searchPopup.resetSearchSelection()
+                searchPopup.setSearchSelection(text,
+                                               "",
+                                               image.source,
+                                               image.isIdenticon,
+                                               iconSettings.name,
+                                               iconSettings.color)
+                root.itemClicked(value, "")
            }
        }
    }
@@ -82,6 +80,7 @@ StatusPopupMenu {
        StatusPopupMenu {
            id: menu
            property var subItemsModel
+            property string parentValue
            property string parentIconName
            property string parentImageSource
            property string parentIdenticonColor
@@ -89,6 +88,7 @@ StatusPopupMenu {
            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
@@ -97,31 +97,31 @@ StatusPopupMenu {
                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.resetSelectionBadge();
+                            searchPopup.resetSearchSelection()
                            if (menuLoader.parentTitleText === "Chat") {
-                                searchPopup.searchSelectionButton.primaryText = model.text;
-                                searchPopup.searchSelectionButton.image.source = model.imageSource;
-                                searchPopup.searchSelectionButton.image.isIdenticon = model.isIdenticon;
-                                searchPopup.searchSelectionButton.iconSettings.name = model.iconName;
-                                searchPopup.searchSelectionButton.iconSettings.color = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
-                                searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !model.iconName && !model.imageSource
+                                searchPopup.setSearchSelection(model.text,
+                                                               "",
+                                                               model.imageSource,
+                                                               model.isIdenticon,
+                                                               model.iconName,
+                                                               model.iconColor)
                            } else {
-                                searchPopup.searchSelectionButton.primaryText = menuLoader.parentTitleText;
-                                searchPopup.searchSelectionButton.secondaryText = model.text;
-                                searchPopup.searchSelectionButton.image.source = menuLoader.parentImageSource;
-                                searchPopup.searchSelectionButton.image.isIdenticon = menuLoader.parentIsIdenticon;
-                                searchPopup.searchSelectionButton.iconSettings.name = menuLoader.parentIconName;
-                                searchPopup.searchSelectionButton.iconSettings.color = !!menuLoader.parentIdenticonColor ? menuLoader.parentIdenticonColor : Theme.palette.primaryColor1;
-                                searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !menuLoader.parentIconName && !menuLoader.parentImageSource
+                                searchPopup.setSearchSelection(menuLoader.parentTitleText,
+                                                   model.text,
+                                                   menuLoader.parentImageSource,
+                                                   menuLoader.parentIsIdenticon,
+                                                   menuLoader.parentIconName,
+                                                   menuLoader.parentIdenticonColor)
                            }
-                            root.subMenuItemClicked();
-                            root.dismiss();
+                            root.itemClicked(menuLoader.parentValue, value)
+                            root.dismiss()
                        }
                    }
                }
@@ -129,16 +129,16 @@ StatusPopupMenu {
        }
    }
    onMenuItemClicked: {
-        searchPopup.resetSelectionBadge();
+        searchPopup.resetSearchSelection()
        let menuItem = root.menuAt(root.currentIndex)
-        searchPopup.searchSelectionButton.primaryText = menuItem.title;
-        searchPopup.searchSelectionButton.image.source = menuItem.parentImageSource;
-        searchPopup.searchSelectionButton.image.isIdenticon = menuItem.parentIsIdenticon;
-        searchPopup.searchSelectionButton.iconSettings.name = menuItem.parentIconName;
-        searchPopup.searchSelectionButton.iconSettings.color = menuItem.parentIdenticonColor;
-        searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !menuItem.parentIconName && !menuItem.parentImageSource
-        root.subMenuClicked();
+        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();
+        root.dismiss()
    }
 }
@@ -19,35 +19,32 @@ StatusModal {

    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
-    function resetSelectionBadge() {
-        searchSelectionButton.iconSettings.name = ""
-        searchSelectionButton.iconSettings.isLetterIdenticon = false
-        searchSelectionButton.iconSettings.color = "transparent"
-        searchSelectionButton.image.source = ""
-        searchSelectionButton.image.isIdenticon = false
-        searchSelectionButton.primaryText = qsTr("Anywhere");
-        searchSelectionButton.secondaryText = "";
+
+    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
    }

-    onSearchResultsChanged: {
-        var curIndexes = [...Array(searchResults.count)].map((v,i) => i);
-        curIndexes.sort((a,b) => searchResults.get(a).sectionName.localeCompare(searchResults.get(b).sectionName));
-        var sorted = 0;
-        while ((sorted < curIndexes.length) && (sorted === curIndexes[sorted])) {
-            sorted++;
-        }
-        if (sorted === curIndexes.length) {
-            return;
-        }
-        for (let i = sorted; i < curIndexes.length; i++) {
-            searchResults.move(curIndexes[i], searchResults.count - 1, 1);
-            searchResults.insert(curIndexes[i], { } );
-        }
-        searchResults.remove(sorted, curIndexes.length - sorted);
+    function resetSearchSelection() {
+        setSearchSelection(defaultSearchLocationText, "", "", false, "", "transparent")
    }

    content: Item {
@@ -148,9 +145,10 @@ StatusModal {
                                Loader {
                                    Layout.preferredWidth: active ? 16 : 0
                                    Layout.preferredHeight: 16
-                                    active: searchOptionsMenuButton.iconSettings.name ||
+                                    active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText &&
+                                        (searchOptionsMenuButton.iconSettings.name ||
                                        searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
-                                        !!searchOptionsMenuButton.image.source.toString()
+                                        !!searchOptionsMenuButton.image.source.toString())

                                    sourceComponent: {
                                        if (!!searchOptionsMenuButton.image.source.toString()) {
@@ -220,10 +218,18 @@ StatusModal {
                                    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
+                                    text: searchOptionsMenuButton.secondaryText
                                    font.weight: Font.Medium
                                }
                                StatusIcon {
@@ -245,14 +251,14 @@ StatusModal {
                    anchors.left: searchOptionsMenuButton.right
                    anchors.leftMargin: 4
                    anchors.verticalCenter: parent.verticalCenter
-                    opacity: (searchOptionsMenuButton.primaryText === qsTr("Anywhere")) ? 0.0 : 1.0
+                    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.resetSelectionBadge(); }
+                    onClicked: { root.resetSearchSelection(); }
                }
            }

@@ -274,8 +280,10 @@ StatusModal {
                    ScrollBar.vertical: ScrollBar { }
                    delegate: StatusListItem {
                        width: view.width
-                        title: model.name
-                        statusListItemTitle.color: model.name.startsWith("@") ? Theme.palette.primaryColor1 : Theme.palette.directColor1
+                        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
@@ -289,6 +297,14 @@ StatusModal {
                        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
@@ -325,7 +341,7 @@ StatusModal {
        }
    }
    onClosed: {
-        root.resetSelectionBadge();
+        root.resetSearchSelection();
        root.loading = false;
        contentComponent.searchText = "";
    }
@@ -9,6 +9,8 @@ MenuItem {
    id: root
    implicitHeight: 38

+    property string value: ""
+
    property StatusImageSettings image: StatusImageSettings {
        height: 16
        width: 16
@@ -36,7 +38,7 @@ MenuItem {
            Layout.alignment: Qt.AlignVCenter
            visible: !!root.iconSettings.name && !root.image.source.toString()
            icon:  root.iconSettings.name
-            color: root.iconSettings.color
+            color: (icon === "channel")? Theme.palette.directColor1 : root.iconSettings.color
        }
        StatusRoundedImage {
            Layout.preferredWidth: visible ? root.image.width : 0
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="8.125" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
-<rect x="13.375" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.5224C8 6.3159 9.30206 5.59038 10.2858 6.24874L17.5201 11.0902C18.16 11.5185 18.16 12.4815 17.5201 12.9098L10.2858 17.7513C9.30206 18.4096 8 17.6841 8 16.4776V7.5224Z" fill="black"/>
-</svg>
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