Preview images by double-clicking them

src/qml/danbooruimageview.qml

@@ -116,7 +116,7 @@ Rectangle {
 
                         onDoubleClicked: {
                             // TODO: This needs to download the medium-size image (sample_url)
-                            largeShow.imageDoubleClicked(sampleUrl)
+                            imageOverlay.imageDoubleClicked(sampleUrl)
 
 
                         }
@@ -275,78 +275,97 @@ Rectangle {
 
         signal imageDoubleClicked( url url)
 
-        id: largeShow
+        id: imageOverlay
         smooth: true
         fillMode: QPixmapItem.PreserveAspectFit
-        height: rootObj.width
+        height: rootObj.height * 0.9
-        width: rootObj.height
+        width: rootObj.width * 0.9
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
-        visible: false
+        visible: width > 0
         z: 1
 
         Button {
             id: closeButton
             anchors.top: parent.top
-            anchors.right: largeShow.right
+            anchors.right: imageOverlay.right
             height: parent.paintedHeight * 0.05
-            width: parent.paintedWidth * 0.05
+            width: parent.paintedHeight * 0.05
             anchors.topMargin: (parent.height - parent.paintedHeight) / 2
             anchors.leftMargin: (parent.width - parent.paintedWidth) / 2
             iconName: "window-close"
-            visible: width > 0
+            visible: false
             z: 2
 
             onClicked: {
                 closeButton.visible = false
 //                 shrinkAnimation.start()
-                largeShow.visible = false
+                imageOverlay.visible = false
             }
 
         }
 
+        Rectangle {
+
+            id: overlayBox
+            color:"black"
+
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.bottomMargin: (parent.height - parent.paintedHeight) / 2
+            anchors.leftMargin: (parent.width - parent.paintedWidth) / 2
+            width: imageOverlay.paintedWidth
+            height: imageOverlay.paintedHeight * 0.03
+            opacity: 0.8
+
+            Text {
+                id: overlayText
+                anchors.fill: parent
+                text: "" // FIXME
+                color: "white"
+            }
+        }
+
         onImageDoubleClicked: {
 
-            largeShow.visible = true
+            imageOverlay.visible = true
-            largeShow.source = url
+            imageOverlay.source = url
             closeButton.visible = true
         }
 
         onStatusChanged: {
 
-            if (largeShow.status == Image.Loading) {
+            if (imageOverlay.status == Image.Loading) {
                 runningIndicator.visible = true
             }
 
-            if (largeShow.status == Image.Ready) {
+            if (imageOverlay.status == Image.Ready) {
                 runningIndicator.visible = false
-                largeShow.visible = true
+//                 imageOverlay.visible = true
                 enlargeAnimation.start()
-                console.log(largeShow.width)
             }
         }
 
         PropertyAnimation {
             id: enlargeAnimation
-            target: largeShow
+            target: imageOverlay
             properties: "width"
             from: 0
-            to: largeShow.paintedWidth
+            to: imageOverlay.paintedWidth
             duration: 250
         }
 
 
         PropertyAnimation {
             id: shrinkAnimation
-            target: largeShow
+            target: imageOverlay
             properties: "width"
-            from: largeShow.paintedWidth
+            from: imageOverlay.paintedWidth
             to: 0
             duration: 250
             onRunningChanged: {
                 if (!shrinkAnimation.running) {
-//                     largeShow.source = ""
+                    imageOverlay.visible = false
-                    largeShow.visible = false
                 }
             }
         }