Add ImageSelector

ScreenPlay/Resources.qrc

@@ -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>

ScreenPlay/qml/Common/ImageSelector.qml

@@ -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
+            }
+        }
+    ]
+}