status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Sale Djenic 2021-08-16 14:01:38 +02:00 committed by Pascal Precht
parent 482296c310
commit 01da750899
5 changed files with 52 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
sandbox/Models.qml
View File

@ -196,35 +196,35 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
//dummy search popup models //dummy search popup models
property var searchResultsA: ListModel { 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"; badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
badgePrimaryText: "CryptoKities"; badgePrimaryText: "CryptoKities";
badgeSecondaryText: ""; badgeSecondaryText: "";
badgeIdenticonColor: ""; badgeIdenticonColor: "";
isLetterIdenticon: false } isLetterIdenticon: false }
ListElement { name: "core"; sectionName: "Channels"; 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 { name: "communities-phase3"; 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 { name: "core-ui"; 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 { name: "desktop"; 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 { name: "Crocodile Vanilla Bird"; sectionName: "Chat"; 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 { name: "carmen eth"; 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 { name: "CryptoKitties"; sectionName: "Communities"; 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 { name: "MyCommunity"; 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 { name: "Foo"; 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 { property var searchResultsB: ListModel {
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: ""; badgeImage: "";
badgePrimaryText: "CryptoKities"; badgePrimaryText: "CryptoKities";
badgeSecondaryText: "#design"; badgeSecondaryText: "#design";
badgeIdenticonColor: "pink"; isLetterIdenticon: true } badgeIdenticonColor: "pink"; isLetterIdenticon: true }
ListElement { name: "support"; 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 { name: "desktop-ui"; 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 { name: "climate-change"; sectionName: "Chat"; 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 { name: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "pink"; isLetterIdenticon: true } ListElement { itemId: "i5"; titleId: "t5"; title: "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 { itemId: "i6"; titleId: "t6"; title: "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 { itemId: "i7"; titleId: "t7"; title: "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: "i8"; titleId: "t8"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "orange"; isLetterIdenticon: true }
} }
property ListModel optionsModel: ListModel { property ListModel optionsModel: ListModel {

3
src/StatusQ/Components/StatusChatListCategoryItem.qml
View File

@ -23,15 +23,12 @@ StatusListItem {
property alias menuButton: menuButton property alias menuButton: menuButton
property alias toggleButton: toggleButton property alias toggleButton: toggleButton
signal clicked(var mouse)
signal addButtonClicked(var mouse) signal addButtonClicked(var mouse)
signal menuButtonClicked(var mouse) signal menuButtonClicked(var mouse)
signal toggleButtonClicked(var mouse) signal toggleButtonClicked(var mouse)
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent" color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
sensor.onClicked: statusChatListCategoryItem.clicked(mouse)
statusListItemTitle.color: Theme.palette.directColor4 statusListItemTitle.color: Theme.palette.directColor4
statusListItemTitle.font.weight: Font.Medium statusListItemTitle.font.weight: Font.Medium

19
src/StatusQ/Components/StatusListItem.qml
View File

@ -34,6 +34,9 @@ Rectangle {
radius: 8 radius: 8
property string itemId: ""
property string titleId: ""
property string title: "" property string title: ""
property string titleAsideText: "" property string titleAsideText: ""
property string subTitle: "" property string subTitle: ""
@ -83,6 +86,9 @@ Rectangle {
property list<Item> components property list<Item> components
signal clicked(string itemId)
signal titleClicked(string titleId)
onComponentsChanged: { onComponentsChanged: {
if (components.length) { if (components.length) {
for (let idx in components) { for (let idx in components) {
@ -100,6 +106,10 @@ Rectangle {
acceptedButtons: Qt.LeftButton | Qt.RightButton acceptedButtons: Qt.LeftButton | Qt.RightButton
hoverEnabled: true hoverEnabled: true
onClicked: {
statusListItem.clicked(statusListItem.itemId)
}
Loader { Loader {
id: iconOrImage id: iconOrImage
anchors.left: parent.left anchors.left: parent.left
@ -187,6 +197,15 @@ Rectangle {
return Theme.palette.dangerColor1 return Theme.palette.dangerColor1
} }
} }
MouseArea {
anchors.fill: parent
cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
hoverEnabled: true
onClicked: {
statusListItem.titleClicked(statusListItem.titleId)
}
}
} }
StatusBaseText { StatusBaseText {

1
src/StatusQ/Components/StatusNavigationListItem.qml
View File

@ -6,7 +6,6 @@ import StatusQ.Components 0.1
StatusListItem { StatusListItem {
id: statusNavigationListItem id: statusNavigationListItem
signal clicked(var mouse)
property bool selected: false property bool selected: false
property alias badge: statusBadge property alias badge: statusBadge

17
src/StatusQ/Popups/StatusSearchPopup.qml
View File

@ -31,6 +31,9 @@ StatusModal {
searchSelectionButton.image.isIdenticon = false searchSelectionButton.image.isIdenticon = false
searchSelectionButton.primaryText = qsTr("Anywhere"); searchSelectionButton.primaryText = qsTr("Anywhere");
searchSelectionButton.secondaryText = ""; searchSelectionButton.secondaryText = "";
signal resultItemClicked(string itemId)
signal resultItemTitleClicked(string titleId)
} }
content: Item { content: Item {
@ -257,8 +260,10 @@ StatusModal {
ScrollBar.vertical: ScrollBar { } ScrollBar.vertical: ScrollBar { }
delegate: StatusListItem { delegate: StatusListItem {
width: view.width width: view.width
title: model.name itemId: model.itemId
statusListItemTitle.color: model.name.startsWith("@") ? Theme.palette.primaryColor1 : Theme.palette.directColor1 titleId: model.titleId
title: model.title
statusListItemTitle.color: model.title.startsWith("@") ? Theme.palette.primaryColor1 : Theme.palette.directColor1
subTitle: model.content subTitle: model.content
radius: 0 radius: 0
statusListItemSubTitle.height: model.content !== "" ? 20 : 0 statusListItemSubTitle.height: model.content !== "" ? 20 : 0
@ -272,6 +277,14 @@ StatusModal {
badge.image.source: model.badgeImage badge.image.source: model.badgeImage
badge.icon.isLetterIdenticon: model.isLetterIdenticon badge.icon.isLetterIdenticon: model.isLetterIdenticon
badge.icon.color: model.badgeIdenticonColor badge.icon.color: model.badgeIdenticonColor
onClicked: {
root.resultItemClicked(itemId)
}
onTitleClicked: {
root.resultItemTitleClicked(titleId)
}
} }
section.property: "sectionName" section.property: "sectionName"
section.criteria: ViewSection.FullString section.criteria: ViewSection.FullString