mirror of
https://gitlab.com/kelteseth/ScreenPlay.git
synced 2024-09-18 16:32:33 +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/TagSelector.qml</file>
|
||||||
<file>qml/Common/Tag.qml</file>
|
<file>qml/Common/Tag.qml</file>
|
||||||
<file>assets/icons/icon_close.svg</file>
|
<file>assets/icons/icon_close.svg</file>
|
||||||
|
<file>qml/Common/ImageSelector.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</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