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