From bcd81c813d21f0d8bda67b9dfeed1dc18d519b19 Mon Sep 17 00:00:00 2001 From: Sarah Jamie Lewis Date: Wed, 6 Mar 2019 13:18:00 -0800 Subject: [PATCH] Add User Feedback when hovering over a contact in groups --- qml/panes/OverlayPane.qml | 3 ++ qml/widgets/ContactPicture.qml | 83 +++++++++++++++++++--------------- qml/widgets/Message.qml | 8 ++++ 3 files changed, 58 insertions(+), 36 deletions(-) diff --git a/qml/panes/OverlayPane.qml b/qml/panes/OverlayPane.qml index 1925afd..2e9153e 100644 --- a/qml/panes/OverlayPane.qml +++ b/qml/panes/OverlayPane.qml @@ -13,6 +13,7 @@ ColumnLayout { id: overlay property string name property bool accepted + property bool inGroup StackToolbar { @@ -143,12 +144,14 @@ ColumnLayout { onResetMessagePane: function() { overlayStack.overlay = overlayStack.chatOverlay + overlay.inGroup = false } onSupplyGroupSettings: function(gid, name, server, invite, accepted, addrbooknames, addrbookaddrs) { console.log("Supplied " + gid + " " + name + "Accepted " + accepted) overlay.name = name overlay.accepted = accepted + overlay.inGroup = true } } } \ No newline at end of file diff --git a/qml/widgets/ContactPicture.qml b/qml/widgets/ContactPicture.qml index d46be94..2b020d0 100644 --- a/qml/widgets/ContactPicture.qml +++ b/qml/widgets/ContactPicture.qml @@ -16,55 +16,66 @@ Item { property int status property bool isGroup property bool showStatus - + property bool highlight Rectangle { + id: mainImage width: 48 height: 48 - color: "#FFFFFF" + color: highlight ? windowItem.cwtch_dark_color: "#FFFFFF" radius: width / 2 + Rectangle { + width: highlight ? 44 : 48 + height: highlight ? 44 : 48 + color: "#FFFFFF" + radius: width / 2 + anchors.centerIn:parent - Image { // PROFILE IMAGE - id: img - anchors.fill: parent - fillMode: Image.PreserveAspectFit - visible: false - } - Image { // CIRCLE MASK - id: mask - fillMode: Image.PreserveAspectFit - visible: false - source: "qrc:/qml/images/extra/clipcircle.png" - } + Image { // PROFILE IMAGE + id: img + anchors.fill: parent + fillMode: Image.PreserveAspectFit + visible: false + } + + Image { // CIRCLE MASK + id: mask + fillMode: Image.PreserveAspectFit + visible: false + source: "qrc:/qml/images/extra/clipcircle.png" + } + + OpacityMask { + anchors.fill: img + source: img + maskSource: mask + } - OpacityMask { - anchors.fill: img - source: img - maskSource: mask } Rectangle { // PRESENCE INDICATOR - visible: showStatus - color: "#FFFFFF" - width: 8 - height: 8 - radius: 2 - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.margins: 4 + visible: showStatus + color: "#FFFFFF" + width: 8 + height: 8 + radius: 2 + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.margins: 4 - Rectangle { //-2:WtfCodeError,-1:Untrusted,0:Disconnected,1:Connecting,2:Connected,3:Authenticated,4:Failed,5:Killed - color: status == 3 ? "green" : status == -1 ? "blue" : status == 1 ? "orange" : status == 2 ? "orange" : "red" - width: 5 - height: 5 - radius: 2 - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.margins: 1.5 - } - } + Rectangle { //-2:WtfCodeError,-1:Untrusted,0:Disconnected,1:Connecting,2:Connected,3:Authenticated,4:Failed,5:Killed + color: status == 3 ? "green" : status == -1 ? "blue" : status == 1 ? "orange" : status == 2 ? "orange" : "red" + width: 5 + height: 5 + radius: 2 + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.margins: 1.5 + } + } + } } \ No newline at end of file diff --git a/qml/widgets/Message.qml b/qml/widgets/Message.qml index 4939a67..92a7ed7 100644 --- a/qml/widgets/Message.qml +++ b/qml/widgets/Message.qml @@ -48,9 +48,17 @@ RowLayout { handle: root.from visible: !fromMe showStatus: false + highlight: ima.containsMouse + + ToolTip.visible: ima.containsMouse + ToolTip.text: qsTr("Click to DM") MouseArea { + id: ima anchors.fill: parent + hoverEnabled: overlay.inGroup + + onClicked: { gcd.broadcast("ResetMessagePane") theStack.pane = theStack.messagePane