Add a basic display of images when double clicked

src/qml/danbooruimageview.qml

@@ -20,6 +20,8 @@
 import QtQuick 2.4
 import QtQuick.Controls 1.3
 import QtQuick.Dialogs 1.2
+import QtQuick.Controls.Styles 1.3
+import QtQuick.Layouts 1.1
 
 import org.kde.kquickcontrolsaddons 2.0
 import org.kde.kcoreaddons 1.0 as KCoreAddons
@@ -65,6 +67,8 @@ Rectangle {
         running: false
     }
 
+
+
     Component {
         // This is just for testing
         id: highlight
@@ -87,7 +91,6 @@ Rectangle {
 
                 QPixmapItem {
 
-
                     id: pixItem
                     pixmap: thumbPix
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -96,19 +99,28 @@ Rectangle {
                     height: grid.cellHeight * 0.75
                     width: grid.cellWidth * 0.9
 
-
                     MouseArea {
                         id: mouseArea
                         anchors.fill: parent
                         height: parent.height
                         width: parent.width
 
+//
+
                         hoverEnabled: true
+
                         onClicked: {
                             grid.currentIndex = index
                             rootObj.fileInfo(fileUrl, tags)
                         }
 
+                        onDoubleClicked: {
+                            // TODO: This needs to download the medium-size image (sample_url)
+                            largeShow.imageDoubleClicked(sampleUrl)
+
+
+                        }
+
                         onEntered: {
 
                             viewButton.opacity = 1
@@ -259,5 +271,89 @@ Rectangle {
         }
     }
 
+     Image {
+
+        signal imageDoubleClicked( url url)
+
+        id: largeShow
+        smooth: true
+        fillMode: QPixmapItem.PreserveAspectFit
+        height: rootObj.width
+        width: rootObj.height
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        visible: false
+        z: 1
+
+        Button {
+            id: closeButton
+            anchors.top: parent.top
+            anchors.right: largeShow.right
+            height: parent.paintedHeight * 0.05
+            width: parent.paintedWidth * 0.05
+            anchors.topMargin: (parent.height - parent.paintedHeight) / 2
+            anchors.leftMargin: (parent.width - parent.paintedWidth) / 2
+            iconName: "window-close"
+            visible: width > 0
+            z: 2
+
+            onClicked: {
+                closeButton.visible = false
+//                 shrinkAnimation.start()
+                largeShow.visible = false
+            }
+
+        }
+
+        onImageDoubleClicked: {
+
+            largeShow.visible = true
+            largeShow.source = url
+            closeButton.visible = true
+        }
+
+        onStatusChanged: {
+
+            if (largeShow.status == Image.Loading) {
+                runningIndicator.visible = true
+            }
+
+            if (largeShow.status == Image.Ready) {
+                runningIndicator.visible = false
+                largeShow.visible = true
+                enlargeAnimation.start()
+                console.log(largeShow.width)
+            }
+        }
+
+        PropertyAnimation {
+            id: enlargeAnimation
+            target: largeShow
+            properties: "width"
+            from: 0
+            to: largeShow.paintedWidth
+            duration: 250
+        }
+
+
+        PropertyAnimation {
+            id: shrinkAnimation
+            target: largeShow
+            properties: "width"
+            from: largeShow.paintedWidth
+            to: 0
+            duration: 250
+            onRunningChanged: {
+                if (!shrinkAnimation.running) {
+//                     largeShow.source = ""
+                    largeShow.visible = false
+                }
+            }
+        }
+
+
+    }
+
+
 
 }