mirror of
https://gitlab.com/kelteseth/ScreenPlay.git
synced 2024-09-15 06:52:34 +02:00
Add ImageSelector
This commit is contained in:
parent
8b38f59909
commit
5f491212de
@ -124,5 +124,6 @@
|
||||
<file>qml/Common/TagSelector.qml</file>
|
||||
<file>qml/Common/Tag.qml</file>
|
||||
<file>assets/icons/icon_close.svg</file>
|
||||
<file>qml/Common/ImageSelector.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
171
ScreenPlay/qml/Common/ImageSelector.qml
Normal file
171
ScreenPlay/qml/Common/ImageSelector.qml
Normal file
@ -0,0 +1,171 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Controls.Material 2.12
|
||||
import Qt.labs.platform 1.1
|
||||
|
||||
Item {
|
||||
id: imageSelector
|
||||
height: 70
|
||||
width: parent.width
|
||||
state: "nothingSelected"
|
||||
|
||||
property string imageSource
|
||||
|
||||
|
||||
onImageSourceChanged: {
|
||||
if (imageSource === "") {
|
||||
img.source = ""
|
||||
txtName.text = ""
|
||||
imageSelector.state = "nothingSelected"
|
||||
} else {
|
||||
img.source = imageSource
|
||||
imageSelector.state = "imageSelected"
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: rectangle
|
||||
color: "#F0F0F0"
|
||||
radius: 3
|
||||
clip: true
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 3
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: imgWrapper
|
||||
width: 70
|
||||
radius: 3
|
||||
clip: true
|
||||
color: Material.color(Material.Grey, Material.Shade700)
|
||||
anchors {
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
bottom: parent.bottom
|
||||
margins: 10
|
||||
}
|
||||
|
||||
Image {
|
||||
id: img
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
if (imageSource !== "") {
|
||||
popup.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Popup {
|
||||
id: popup
|
||||
width: 902
|
||||
anchors.centerIn: Overlay.overlay
|
||||
height: 507
|
||||
Image {
|
||||
source: imageSource
|
||||
anchors.fill: parent
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: popup.close()
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: txtName
|
||||
clip: true
|
||||
font.pointSize: 12
|
||||
font.family: "Roboto"
|
||||
wrapMode: Text.WordWrap
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
anchors {
|
||||
top: parent.top
|
||||
left: imgWrapper.right
|
||||
right: btnClear.left
|
||||
bottom: parent.bottom
|
||||
margins: 10
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
id: btnClear
|
||||
text: qsTr("Clear")
|
||||
Material.background: Material.Grey
|
||||
Material.foreground: "white"
|
||||
anchors {
|
||||
top: parent.top
|
||||
right: btnOpen.left
|
||||
bottom: parent.bottom
|
||||
margins: 5
|
||||
}
|
||||
onClicked: imageSource = ""
|
||||
}
|
||||
|
||||
Button {
|
||||
id: btnOpen
|
||||
text: qsTr("Open Image")
|
||||
Material.background: Material.Orange
|
||||
Material.foreground: "white"
|
||||
anchors {
|
||||
top: parent.top
|
||||
right: parent.right
|
||||
rightMargin: 10
|
||||
bottom: parent.bottom
|
||||
margins: 5
|
||||
}
|
||||
onClicked: fileDialog.open()
|
||||
}
|
||||
FileDialog {
|
||||
id: fileDialog
|
||||
title: "Please choose a file"
|
||||
fileMode: FileDialog.OpenFile
|
||||
nameFilters: []
|
||||
onAccepted: {
|
||||
imageSource = fileDialog.file
|
||||
txtName.text = fileDialog.file.toString().replace(/^.*[\\\/]/,
|
||||
'')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "imageSelected"
|
||||
PropertyChanges {
|
||||
target: btnClear
|
||||
opacity: 1
|
||||
anchors.topMargin: 5
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "nothingSelected"
|
||||
PropertyChanges {
|
||||
target: btnClear
|
||||
opacity: 0
|
||||
anchors.topMargin: -40
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
from: "imageSelected"
|
||||
to: "nothingSelected"
|
||||
reversible: true
|
||||
PropertyAnimation {
|
||||
target: btnClear
|
||||
properties: "opacity, anchors.topMargin"
|
||||
duration: 300
|
||||
easing.type: Easing.OutQuart
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
Loading…
Reference in New Issue
Block a user