From 3dcf9cc38c71c9c9d1e9a576e65680996557b39b Mon Sep 17 00:00:00 2001 From: Eric Mastro Date: Thu, 23 Sep 2021 12:52:17 +1000 Subject: [PATCH] fix(chat): GIF widget UI bugs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes: #3564. Several UI bug fixes have been made for the gif widget: 1. Star now only appears once the gif is hovered 2. Default hover star colour is “grey” 3. Once the star is hovered, the star turns yellow 4. If the gif is favourited, the star fills in yellow 5. Removed square border around the gif 6. Added invisible padding around the star to increase the mouse surface area for hover/click 7. Added tooltip to the star for adding/removing from favourites NOTE: 1. An initial attempt at changing star state based on gif thumb hover and star hover proved unsuccessful. Changing visibility of the star had to depend on both the hover state of the thumb AND the star — relying on only the thumb hover caused a flicker. 2. Relying on the local hover state of the star and the thumb hover state caused inconsistencies where the hover state of the star would become true after not being hovered. I’m still unsure as to why this was happening. A workaround was to create a signal to a HOC as to the last hovered gif id. From there, we could rely on matching `model.id` to the last hovered gif id in the HOC. --- ui/StatusQ | 2 +- ui/shared/status/StatusGifColumn.qml | 65 +++++++++++++++++----------- ui/shared/status/StatusGifPopup.qml | 15 +++++++ 3 files changed, 56 insertions(+), 26 deletions(-) diff --git a/ui/StatusQ b/ui/StatusQ index 8f8cb336c2..4178b60b7c 160000 --- a/ui/StatusQ +++ b/ui/StatusQ @@ -1 +1 @@ -Subproject commit 8f8cb336c20cf059c6377da638f9a80ddb5e0426 +Subproject commit 4178b60b7c7838838cbfb2b896c33959aa1226ad diff --git a/ui/shared/status/StatusGifColumn.qml b/ui/shared/status/StatusGifColumn.qml index a1fbe4607e..15f0ac0f4e 100644 --- a/ui/shared/status/StatusGifColumn.qml +++ b/ui/shared/status/StatusGifColumn.qml @@ -2,6 +2,9 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 import QtQuick.Layouts 1.3 import QtGraphicalEffects 1.0 + +import StatusQ.Controls 0.1 + import "../../imports" @@ -12,15 +15,24 @@ Column { property var gifWidth: 0 property var gifSelected: function () {} property var toggleFavorite: function () {} + property string lastHoveredId + signal gifHovered(string id) Repeater { id: repeater delegate: Rectangle { + id: thumb + property alias hovered: mouseArea.containsMouse + onHoveredChanged: { + if (hovered) { + root.gifHovered(model.id) + } + } + height: animation.status != Image.Ready ? loader.height : animation.height width: root.gifWidth color: Style.current.background - border.color: Style.current.border Rectangle { id: loader @@ -35,36 +47,40 @@ Column { } } - StatusIconButton { + StatusBaseButton { id: starButton - icon.name: "star-icon" - iconColor: { - if (model.isFavorite) { - return Style.current.yellow - } - return Style.current.secondaryText - } - hoveredIconColor: { - if (iconColor === Style.current.yellow) { - return Style.current.secondaryText - } - return Style.current.yellow - } - highlightedBackgroundOpacity: 0 + property bool favorite: model.isFavorite + + type: StatusFlatRoundButton.Type.Secondary + textColor: hovered || favorite ? Style.current.yellow : Style.current.secondaryText + icon.name: favorite ? "star-icon" : "star-icon-outline" + icon.width: (14/104) * thumb.width + icon.height: (13/104) * thumb.width + topPadding: (6/104) * thumb.width + rightPadding: (6/104) * thumb.width + bottomPadding: (6/104) * thumb.width + leftPadding: (6/104) * thumb.width + color: "transparent" + visible: !loader.visible && model.id === root.lastHoveredId anchors.right: parent.right anchors.bottom: parent.bottom - width: 24 - height: 24 z: 1 - padding: 10 onClicked: { root.toggleFavorite(model) - if (starButton.iconColor === Style.current.yellow) { - starButton.iconColor = Style.current.secondaryText - } else { - starButton.iconColor = Style.current.yellow + favorite = !favorite + } + onHoveredChanged: { + if (hovered) { + root.gifHovered(model.id) } } + StatusToolTip { + id: statusToolTip + text: starButton.favorite ? + qsTr("Remove from favorites") : + qsTr("Add to favorites") + visible: starButton.hovered + } } AnimatedImage { @@ -76,12 +92,11 @@ Column { z: 0 layer.enabled: true layer.effect: OpacityMask { + opacity: model.id === root.lastHoveredId ? 0.6 : 1 maskSource: Rectangle { width: animation.width height: animation.height radius: Style.current.radius - color: Style.current.background - border.color: Style.current.border } } } diff --git a/ui/shared/status/StatusGifPopup.qml b/ui/shared/status/StatusGifPopup.qml index 98c4d401a3..cf9f6f3d03 100644 --- a/ui/shared/status/StatusGifPopup.qml +++ b/ui/shared/status/StatusGifPopup.qml @@ -312,15 +312,22 @@ Popup { ScrollBar.horizontal.policy: ScrollBar.AlwaysOff Row { + id: gifs anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter spacing: Style.current.halfPadding + property string lastHoveredId + StatusGifColumn { gifList.model: chatsModel.gif.columnA gifWidth: (popup.width / 3) - Style.current.padding gifSelected: popup.gifSelected toggleFavorite: popup.toggleFavorite + lastHoveredId: gifs.lastHoveredId + onGifHovered: { + gifs.lastHoveredId = id + } } StatusGifColumn { @@ -328,6 +335,10 @@ Popup { gifWidth: (popup.width / 3) - Style.current.padding gifSelected: popup.gifSelected toggleFavorite: popup.toggleFavorite + lastHoveredId: gifs.lastHoveredId + onGifHovered: { + gifs.lastHoveredId = id + } } StatusGifColumn { @@ -335,6 +346,10 @@ Popup { gifWidth: (popup.width / 3) - Style.current.padding gifSelected: popup.gifSelected toggleFavorite: popup.toggleFavorite + lastHoveredId: gifs.lastHoveredId + onGifHovered: { + gifs.lastHoveredId = id + } } }