From b1a871cd3717160b0c2e529b3f36644e5dbd32af Mon Sep 17 00:00:00 2001 From: Sale Djenic Date: Mon, 16 Aug 2021 14:01:38 +0200 Subject: [PATCH] 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. --- ui/StatusQ/sandbox/Models.qml | 36 +++++++++---------- .../Components/StatusChatListCategoryItem.qml | 3 -- .../src/StatusQ/Components/StatusListItem.qml | 19 ++++++++++ .../Components/StatusNavigationListItem.qml | 1 - .../src/StatusQ/Popups/StatusSearchPopup.qml | 17 +++++++-- 5 files changed, 52 insertions(+), 24 deletions(-) diff --git a/ui/StatusQ/sandbox/Models.qml b/ui/StatusQ/sandbox/Models.qml index 6483e34413..7f9ea91bcd 100644 --- a/ui/StatusQ/sandbox/Models.qml +++ b/ui/StatusQ/sandbox/Models.qml @@ -196,35 +196,35 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I //dummy search popup models property var searchResultsA: ListModel { - ListElement { name: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum @Nick dolor sit amet"; + ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum @Nick dolor sit amet"; badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"; badgePrimaryText: "CryptoKities"; 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: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false } - ListElement { name: "desktop"; sectionName: "Channels"; 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: "carmen eth"; 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: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false } - ListElement { name: "Foo"; 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: "@Ant"; sectionName: "Messages"; time: "11:43 AM"; content: "@John, 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: "@John, 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: "desktop-ui"; sectionName: "Channels"; 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: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false } - ListElement { name: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false } - ListElement { name: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "orange"; 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 { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusChatListCategoryItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatListCategoryItem.qml index 237a06c38b..869e20bef1 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusChatListCategoryItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusChatListCategoryItem.qml @@ -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 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml index a4504fbdfb..5b724be945 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -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 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 { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml index 3a7a8c46e4..e93f1f5711 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml @@ -6,7 +6,6 @@ import StatusQ.Components 0.1 StatusListItem { id: statusNavigationListItem - signal clicked(var mouse) property bool selected: false property alias badge: statusBadge diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml b/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml index 03cc7335d1..524af29504 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml @@ -31,6 +31,9 @@ StatusModal { searchSelectionButton.image.isIdenticon = false searchSelectionButton.primaryText = qsTr("Anywhere"); searchSelectionButton.secondaryText = ""; + + signal resultItemClicked(string itemId) + signal resultItemTitleClicked(string titleId) } content: Item { @@ -257,8 +260,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 @@ -272,6 +277,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