mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-27 23:05:57 +00:00
f1e83f74bc
Allow up to 5 images to be dragged and dropped in to one-on-one chats and in the timeline. Can be combined with the existing upload button. The upload file dialog has been changed to allow multiple selections. Drag and dropped images adhere to the following rules, with corresponding validations messages: - Max 5 image - Image size must be 0.5 MB or less - File extension must be one of [".png", ".jpg", ".jpeg", ".heif", "tif", ".tiff"] Drag and drop and uploaded images are now also deduplicated.
97 lines
3.2 KiB
QML
97 lines
3.2 KiB
QML
import QtQuick 2.13
|
|
import QtGraphicalEffects 1.13
|
|
import QtQuick.Controls 2.13
|
|
import "../../imports"
|
|
import "../../shared"
|
|
|
|
Row {
|
|
id: imageArea
|
|
spacing: Style.current.halfPadding
|
|
|
|
signal imageRemoved(int index)
|
|
property alias imageSource: rptImages.model
|
|
|
|
Repeater {
|
|
id: rptImages
|
|
Item {
|
|
height: chatImage.paintedHeight + closeBtn.height - 5
|
|
width: chatImage.width
|
|
Image {
|
|
id: chatImage
|
|
property bool hovered: false
|
|
width: 64
|
|
height: 64
|
|
fillMode: Image.PreserveAspectCrop
|
|
mipmap: true
|
|
smooth: false
|
|
antialiasing: true
|
|
source: modelData
|
|
MouseArea {
|
|
cursorShape: Qt.PointingHandCursor
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onEntered: {
|
|
chatImage.hovered = true
|
|
}
|
|
onExited: {
|
|
chatImage.hovered = false
|
|
}
|
|
}
|
|
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
RoundButton {
|
|
id: closeBtn
|
|
implicitWidth: 24
|
|
implicitHeight: 24
|
|
padding: 0
|
|
anchors.top: chatImage.top
|
|
anchors.topMargin: -5
|
|
anchors.right: chatImage.right
|
|
anchors.rightMargin: -Style.current.halfPadding
|
|
visible: chatImage.hovered || hovered
|
|
contentItem: SVGImage {
|
|
source: !closeBtn.hovered ?
|
|
"../../app/img/close-filled.svg" : "../../app/img/close-filled-hovered.svg"
|
|
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 {
|
|
cursorShape: Qt.PointingHandCursor
|
|
anchors.fill: parent
|
|
onPressed: mouse.accepted = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|