fix(chat): GIF widget UI bugs

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.
This commit is contained in:
Eric Mastro 2021-09-23 12:52:17 +10:00 committed by Iuri Matias
parent 50ad0f768e
commit 3dcf9cc38c
3 changed files with 56 additions and 26 deletions

@ -1 +1 @@
Subproject commit 8f8cb336c20cf059c6377da638f9a80ddb5e0426
Subproject commit 4178b60b7c7838838cbfb2b896c33959aa1226ad

View File

@ -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
}
}
}

View File

@ -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
}
}
}