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

94 lines
2.4 KiB
QML

import QtQuick 2.13
import QtGraphicalEffects 1.13
import QtQuick.Controls 2.13
import "../../imports"
import "../../shared"
Rectangle {
id: imageArea
height: chatImage.height
signal imageRemoved()
property url imageSource: ""
color: "transparent"
Image {
id: chatImage
property bool hovered: false
height: 64
anchors.left: parent.left
anchors.top: parent.top
fillMode: Image.PreserveAspectFit
mipmap: true
smooth: false
antialiasing: true
source: parent.imageSource
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()
imageArea.imageSource = ""
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onPressed: mouse.accepted = false
}
}
}