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
102 lines
3.3 KiB
QML
102 lines
3.3 KiB
QML
import QtQuick 2.13
|
|
import QtGraphicalEffects 1.13
|
|
import QtQuick.Controls 2.13
|
|
|
|
import utils 1.0
|
|
import "../../shared"
|
|
|
|
Row {
|
|
id: imageArea
|
|
spacing: 0
|
|
|
|
signal imageRemoved(int index)
|
|
property alias imageSource: rptImages.model
|
|
|
|
Repeater {
|
|
id: rptImages
|
|
|
|
Item {
|
|
height: Style.current.halfPadding * 2 + chatImage.height + closeBtn.height / 3
|
|
width: chatImage.width + closeBtn.width / 3
|
|
|
|
Image {
|
|
id: chatImage
|
|
anchors.left: parent.left
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 64
|
|
height: 64
|
|
fillMode: Image.PreserveAspectCrop
|
|
mipmap: true
|
|
smooth: false
|
|
antialiasing: true
|
|
source: modelData
|
|
layer.enabled: true
|
|
layer.effect: OpacityMask {
|
|
maskSource: Item {
|
|
width: chatImage.width
|
|
height: chatImage.height
|
|
|
|
Rectangle {
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
width: chatImage.width
|
|
height: chatImage.height
|
|
radius: 16
|
|
}
|
|
Rectangle {
|
|
anchors.bottom: parent.bottom
|
|
anchors.right: parent.right
|
|
width: 32
|
|
height: 32
|
|
radius: 4
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: mouseArea
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
hoverEnabled: true
|
|
onClicked: {
|
|
imagePopup.openPopup(chatImage)
|
|
}
|
|
}
|
|
|
|
RoundButton {
|
|
id: closeBtn
|
|
width: 24
|
|
height: 24
|
|
padding: 0
|
|
anchors.right: chatImage.right
|
|
anchors.rightMargin: -width / 3
|
|
anchors.top: chatImage.top
|
|
anchors.topMargin: -height / 3
|
|
hoverEnabled: false
|
|
opacity: mouseArea.containsMouse || buttonMouseArea.containsMouse ? 1 : 0
|
|
contentItem: SVGImage {
|
|
source: Style.svg( !buttonMouseArea.containsMouse ? "close-filled" : "close-filled-hovered")
|
|
width: closeBtn.width
|
|
height: closeBtn.height
|
|
}
|
|
background: Rectangle {
|
|
color: "transparent"
|
|
}
|
|
onClicked: {
|
|
imageArea.imageRemoved(index)
|
|
const tmp = imageArea.imageSource.filter((url, idx) => idx !== index)
|
|
rptImages.model = tmp
|
|
}
|
|
MouseArea {
|
|
id: buttonMouseArea
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
hoverEnabled: true
|
|
onClicked: closeBtn.clicked()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|