mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-11 06:47:01 +00:00
4ee21ada05
Introduced Style.svg() Style.png() Style.emoji() and
Style.icon() in Style.qml. Those should be used to
set the source in Images instead of using relative
paths. Usage:
Image {
source: Style.svg("check)
....
Also moved all Singletons inside a new "utils"
folder and made it a QML module, to use
import utils 1.0 instead of relative paths
Closes #3678
124 lines
3.9 KiB
QML
124 lines
3.9 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 2.13
|
|
import QtQuick.Layouts 1.3
|
|
import QtGraphicalEffects 1.0
|
|
|
|
import StatusQ.Controls 0.1
|
|
|
|
|
|
import utils 1.0
|
|
|
|
|
|
Column {
|
|
id: root
|
|
spacing: 8
|
|
property alias gifList: repeater
|
|
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
|
|
|
|
Rectangle {
|
|
id: loader
|
|
height: 100
|
|
width: root.gifWidth
|
|
visible: animation.status != Image.Ready
|
|
radius: Style.current.radius
|
|
rotation: 90
|
|
gradient: Gradient {
|
|
GradientStop { position: 0.0; color: "transparent" }
|
|
GradientStop { position: 1.0; color: "#E6EEF2" }
|
|
}
|
|
}
|
|
|
|
StatusBaseButton {
|
|
id: starButton
|
|
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
|
|
z: 1
|
|
onClicked: {
|
|
root.toggleFavorite(model)
|
|
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 {
|
|
id: animation
|
|
visible: animation.status == Image.Ready
|
|
source: model.tinyUrl
|
|
width: root.gifWidth
|
|
fillMode: Image.PreserveAspectFit
|
|
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
|
|
}
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: mouseArea
|
|
cursorShape: Qt.PointingHandCursor
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: function (event) {
|
|
root.gifSelected(event, model.url)
|
|
chatsModel.gif.addToRecents(model.id)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*##^##
|
|
Designer {
|
|
D{i:0;formeditorColor:"#ffffff";height:440;width:360}
|
|
}
|
|
##^##*/
|