status-desktop/ui/shared/status/StatusGifColumn.qml

108 lines
3.3 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import "../../imports"
Column {
id: root
spacing: 8
property alias gifList: repeater
property var gifWidth: 0
property var gifSelected: function () {}
property var toggleFavorite: function () {}
Repeater {
id: repeater
delegate: Rectangle {
height: animation.status != Image.Ready ? loader.height : animation.height
width: root.gifWidth
color: Style.current.background
border.color: Style.current.border
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" }
}
}
StatusIconButton {
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
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
}
}
}
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 {
maskSource: Rectangle {
width: animation.width
height: animation.height
radius: Style.current.radius
color: Style.current.background
border.color: Style.current.border
}
}
}
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}
}
##^##*/