feat: improve contact list clicks and hovers
This commit is contained in:
parent
94f1267ea9
commit
fe3698a912
|
@ -10,26 +10,29 @@ Rectangle {
|
||||||
property string address: "0x04d8c07dd137bd1b73a6f51df148b4f77ddaa11209d36e43d8344c0a7d6db1cad6085f27cfb75dd3ae21d86ceffebe4cf8a35b9ce8d26baa19dc264efe6d8f221b"
|
property string address: "0x04d8c07dd137bd1b73a6f51df148b4f77ddaa11209d36e43d8344c0a7d6db1cad6085f27cfb75dd3ae21d86ceffebe4cf8a35b9ce8d26baa19dc264efe6d8f221b"
|
||||||
property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="
|
property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="
|
||||||
property string localNickname: "JoJo"
|
property string localNickname: "JoJo"
|
||||||
property bool selectable: false
|
|
||||||
property var profileClick: function() {}
|
property var profileClick: function() {}
|
||||||
property bool isContact: true
|
property bool isContact: true
|
||||||
property bool isBlocked: false
|
property bool isBlocked: false
|
||||||
property string searchStr: ""
|
property string searchStr: ""
|
||||||
signal blockContactActionTriggered(name: string, address: string)
|
signal blockContactActionTriggered(name: string, address: string)
|
||||||
signal removeContactActionTriggered(address: string)
|
signal removeContactActionTriggered(address: string)
|
||||||
|
property bool isHovered: false
|
||||||
id: container
|
id: container
|
||||||
|
|
||||||
visible: isContact && (searchStr == "" || name.includes(searchStr))
|
visible: isContact && (searchStr == "" || name.includes(searchStr))
|
||||||
height: visible ? 64 : 0
|
height: visible ? 64 : 0
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: -Style.current.padding
|
||||||
|
anchors.rightMargin: -Style.current.padding
|
||||||
border.width: 0
|
border.width: 0
|
||||||
radius: Style.current.radius
|
radius: Style.current.radius
|
||||||
color: Style.current.transparent
|
color: isHovered ? Style.current.backgroundHover : Style.current.transparent
|
||||||
|
|
||||||
StatusImageIdenticon {
|
StatusImageIdenticon {
|
||||||
id: accountImage
|
id: accountImage
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: Style.current.padding
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
source: identicon
|
source: identicon
|
||||||
}
|
}
|
||||||
|
@ -47,16 +50,35 @@ Rectangle {
|
||||||
anchors.leftMargin: Style.current.padding
|
anchors.leftMargin: Style.current.padding
|
||||||
}
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
anchors.fill: parent
|
||||||
|
hoverEnabled: true
|
||||||
|
onEntered: container.isHovered = true
|
||||||
|
onExited: container.isHovered = false
|
||||||
|
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||||
|
onClicked: {
|
||||||
|
if (mouse.button === Qt.RightButton) {
|
||||||
|
contactContextMenu.popup()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
chatsModel.joinChat(container.address, Constants.chatTypeOneToOne)
|
||||||
|
changeAppSection(Constants.chat)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
property int iconSize: 14
|
property int iconSize: 14
|
||||||
|
property bool isHovered: false
|
||||||
|
readonly property color hoveredBg: Utils.setColorAlpha(Style.current.black, 0.1)
|
||||||
id: menuButton
|
id: menuButton
|
||||||
height: 32
|
height: 32
|
||||||
width: 32
|
width: 32
|
||||||
anchors.top: usernameText.top
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: Style.current.padding
|
||||||
radius: 8
|
radius: 8
|
||||||
color: "transparent"
|
color: isHovered ? hoveredBg : Style.current.transparent
|
||||||
|
|
||||||
SVGImage {
|
SVGImage {
|
||||||
source: "../../../../img/dots-icon.svg"
|
source: "../../../../img/dots-icon.svg"
|
||||||
|
@ -68,27 +90,24 @@ Rectangle {
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
id: mouseArea
|
id: mouseArea
|
||||||
property bool menuOpened: false
|
|
||||||
cursorShape: Qt.PointingHandCursor
|
cursorShape: Qt.PointingHandCursor
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
onExited: {
|
onExited: {
|
||||||
menuButton.color = "transparent"
|
container.isHovered = false
|
||||||
|
menuButton.isHovered = false
|
||||||
}
|
}
|
||||||
onEntered: {
|
onEntered: {
|
||||||
menuButton.color = Style.current.border
|
container.isHovered = true
|
||||||
|
menuButton.isHovered = true
|
||||||
}
|
}
|
||||||
onClicked: {
|
onClicked: {
|
||||||
menuOpened = true
|
|
||||||
contactContextMenu.popup()
|
contactContextMenu.popup()
|
||||||
}
|
}
|
||||||
|
|
||||||
PopupMenu {
|
PopupMenu {
|
||||||
id: contactContextMenu
|
id: contactContextMenu
|
||||||
hasArrow: false
|
hasArrow: false
|
||||||
onClosed: {
|
|
||||||
mouseArea.menuOpened = false
|
|
||||||
}
|
|
||||||
Action {
|
Action {
|
||||||
icon.source: "../../../../img/profileActive.svg"
|
icon.source: "../../../../img/profileActive.svg"
|
||||||
icon.width: menuButton.iconSize
|
icon.width: menuButton.iconSize
|
||||||
|
@ -103,7 +122,7 @@ Rectangle {
|
||||||
icon.height: menuButton.iconSize
|
icon.height: menuButton.iconSize
|
||||||
text: qsTrId("send-message")
|
text: qsTrId("send-message")
|
||||||
onTriggered: {
|
onTriggered: {
|
||||||
tabBar.currentIndex = 0
|
changeAppSection(Constants.chat)
|
||||||
chatsModel.joinChat(address, Constants.chatTypeOneToOne)
|
chatsModel.joinChat(address, Constants.chatTypeOneToOne)
|
||||||
}
|
}
|
||||||
enabled: !container.isBlocked
|
enabled: !container.isBlocked
|
||||||
|
@ -145,12 +164,4 @@ Rectangle {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
StatusRadioButton {
|
|
||||||
visible: selectable
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.topMargin: Style.current.smallPadding
|
|
||||||
anchors.right: parent.right
|
|
||||||
ButtonGroup.group: contactGroup
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,9 +10,7 @@ import "."
|
||||||
ListView {
|
ListView {
|
||||||
id: contactList
|
id: contactList
|
||||||
property var contacts: ContactsData {}
|
property var contacts: ContactsData {}
|
||||||
property var selectable: true
|
|
||||||
property string searchStr: ""
|
property string searchStr: ""
|
||||||
property alias selectedContact: contactGroup.checkedButton
|
|
||||||
property string searchString: ""
|
property string searchString: ""
|
||||||
property string lowerCaseSearchString: searchString.toLowerCase()
|
property string lowerCaseSearchString: searchString.toLowerCase()
|
||||||
property string contactToRemove: ""
|
property string contactToRemove: ""
|
||||||
|
@ -28,7 +26,6 @@ ListView {
|
||||||
identicon: model.thumbnailImage || model.identicon
|
identicon: model.thumbnailImage || model.identicon
|
||||||
isContact: model.isContact
|
isContact: model.isContact
|
||||||
isBlocked: model.isBlocked
|
isBlocked: model.isBlocked
|
||||||
selectable: contactList.selectable
|
|
||||||
profileClick: profilePopup.openPopup.bind(profilePopup)
|
profileClick: profilePopup.openPopup.bind(profilePopup)
|
||||||
visible: searchString === "" ||
|
visible: searchString === "" ||
|
||||||
model.name.toLowerCase().includes(lowerCaseSearchString) ||
|
model.name.toLowerCase().includes(lowerCaseSearchString) ||
|
||||||
|
@ -71,12 +68,6 @@ ListView {
|
||||||
removeContactConfirmationDialog.close()
|
removeContactConfirmationDialog.close()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
ButtonGroup {
|
|
||||||
id: contactGroup
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
/*##^##
|
/*##^##
|
||||||
Designer {
|
Designer {
|
||||||
|
|
|
@ -109,7 +109,6 @@ Item {
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
contacts: profileModel.contacts.blockedContacts
|
contacts: profileModel.contacts.blockedContacts
|
||||||
selectable: false
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -229,7 +228,6 @@ Item {
|
||||||
anchors.topMargin: Style.current.bigPadding
|
anchors.topMargin: Style.current.bigPadding
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
contacts: profileModel.contacts.addedContacts
|
contacts: profileModel.contacts.addedContacts
|
||||||
selectable: false
|
|
||||||
searchString: searchBox.text
|
searchString: searchBox.text
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue