From c937f7707afb1953154147895a03a74cd28171bd Mon Sep 17 00:00:00 2001
From: Luca Beltrame <lbeltrame@kde.org>
Date: Sun, 1 Mar 2015 23:17:10 +0100
Subject: [PATCH] Display tags when image is zoomed out

Next: try to display image info when one is clicked.
---
 src/qml/danbooruimageview.qml | 37 ++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/qml/danbooruimageview.qml b/src/qml/danbooruimageview.qml
index dafe2a6..4709964 100644
--- a/src/qml/danbooruimageview.qml
+++ b/src/qml/danbooruimageview.qml
@@ -116,7 +116,7 @@ Rectangle {
 
                         onDoubleClicked: {
                             // TODO: This needs to download the medium-size image (sample_url)
-                            imageOverlay.imageDoubleClicked(sampleUrl)
+                            imageOverlay.imageDoubleClicked(sampleUrl, tags)
 
 
                         }
@@ -273,7 +273,7 @@ Rectangle {
 
      Image {
 
-        signal imageDoubleClicked( url url)
+        signal imageDoubleClicked(url url, var tags)
 
         id: imageOverlay
         smooth: true
@@ -285,6 +285,7 @@ Rectangle {
         visible: width > 0
         z: 1
 
+
         Button {
             id: closeButton
             anchors.top: parent.top
@@ -301,6 +302,8 @@ Rectangle {
                 closeButton.visible = false
 //                 shrinkAnimation.start()
                 imageOverlay.visible = false
+                overlayBox.visible = false
+                overlayText.visible = false
             }
 
         }
@@ -315,8 +318,9 @@ Rectangle {
             anchors.bottomMargin: (parent.height - parent.paintedHeight) / 2
             anchors.leftMargin: (parent.width - parent.paintedWidth) / 2
             width: imageOverlay.paintedWidth
-            height: imageOverlay.paintedHeight * 0.03
+            height: imageOverlay.paintedHeight * 0.05
             opacity: 0.8
+            visible: false
 
             Text {
                 id: overlayText
@@ -325,6 +329,8 @@ Rectangle {
                 color: "white"
                 visible: false
             }
+
+
         }
 
         Keys.onEscapePressed: {
@@ -337,6 +343,13 @@ Rectangle {
             imageOverlay.visible = true
             imageOverlay.source = url
             closeButton.visible = true
+            if (tags.length < 10) {
+                overlayText.text = i18n("Tags: %1", tags.toString())
+            } else {
+                overlayText.text = i18n("Tags: %1", tags.slice(0, 10).join(", "))
+            }
+
+
         }
 
         onStatusChanged: {
@@ -349,6 +362,7 @@ Rectangle {
                 runningIndicator.visible = false
 //                 imageOverlay.visible = true
                 enlargeAnimation.start()
+
             }
         }
 
@@ -359,6 +373,23 @@ Rectangle {
             from: 0
             to: imageOverlay.paintedWidth
             duration: 250
+
+            onRunningChanged: {
+                if (!enlargeAnimation.running) {
+                    overlayBox.visible = true
+                    overlayText.visible = true
+                    console.log(imageOverlay.paintedWidth / imageOverlay.paintedHeight)
+
+                    if (imageOverlay.paintedWidth / imageOverlay.paintedHeight <= 1.6) {
+                        overlayBox.height = imageOverlay.paintedHeight * 0.03
+                    } else {
+                        overlayBox.height = imageOverlay.paintedHeight * 0.05
+                    }
+
+
+                }
+            }
+
         }