Display tags when image is zoomed out
Next: try to display image info when one is clicked.
This commit is contained in:
		
					parent
					
						
							
								b97ef73677
							
						
					
				
			
			
				commit
				
					
						c937f7707a
					
				
			
		
					 1 changed files with 34 additions and 3 deletions
				
			
		| 
						 | 
					@ -116,7 +116,7 @@ Rectangle {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                        onDoubleClicked: {
 | 
					                        onDoubleClicked: {
 | 
				
			||||||
                            // TODO: This needs to download the medium-size image (sample_url)
 | 
					                            // TODO: This needs to download the medium-size image (sample_url)
 | 
				
			||||||
                            imageOverlay.imageDoubleClicked(sampleUrl)
 | 
					                            imageOverlay.imageDoubleClicked(sampleUrl, tags)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                        }
 | 
					                        }
 | 
				
			||||||
| 
						 | 
					@ -273,7 +273,7 @@ Rectangle {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
     Image {
 | 
					     Image {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        signal imageDoubleClicked( url url)
 | 
					        signal imageDoubleClicked(url url, var tags)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        id: imageOverlay
 | 
					        id: imageOverlay
 | 
				
			||||||
        smooth: true
 | 
					        smooth: true
 | 
				
			||||||
| 
						 | 
					@ -285,6 +285,7 @@ Rectangle {
 | 
				
			||||||
        visible: width > 0
 | 
					        visible: width > 0
 | 
				
			||||||
        z: 1
 | 
					        z: 1
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        Button {
 | 
					        Button {
 | 
				
			||||||
            id: closeButton
 | 
					            id: closeButton
 | 
				
			||||||
            anchors.top: parent.top
 | 
					            anchors.top: parent.top
 | 
				
			||||||
| 
						 | 
					@ -301,6 +302,8 @@ Rectangle {
 | 
				
			||||||
                closeButton.visible = false
 | 
					                closeButton.visible = false
 | 
				
			||||||
//                 shrinkAnimation.start()
 | 
					//                 shrinkAnimation.start()
 | 
				
			||||||
                imageOverlay.visible = false
 | 
					                imageOverlay.visible = false
 | 
				
			||||||
 | 
					                overlayBox.visible = false
 | 
				
			||||||
 | 
					                overlayText.visible = false
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
| 
						 | 
					@ -315,8 +318,9 @@ Rectangle {
 | 
				
			||||||
            anchors.bottomMargin: (parent.height - parent.paintedHeight) / 2
 | 
					            anchors.bottomMargin: (parent.height - parent.paintedHeight) / 2
 | 
				
			||||||
            anchors.leftMargin: (parent.width - parent.paintedWidth) / 2
 | 
					            anchors.leftMargin: (parent.width - parent.paintedWidth) / 2
 | 
				
			||||||
            width: imageOverlay.paintedWidth
 | 
					            width: imageOverlay.paintedWidth
 | 
				
			||||||
            height: imageOverlay.paintedHeight * 0.03
 | 
					            height: imageOverlay.paintedHeight * 0.05
 | 
				
			||||||
            opacity: 0.8
 | 
					            opacity: 0.8
 | 
				
			||||||
 | 
					            visible: false
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            Text {
 | 
					            Text {
 | 
				
			||||||
                id: overlayText
 | 
					                id: overlayText
 | 
				
			||||||
| 
						 | 
					@ -325,6 +329,8 @@ Rectangle {
 | 
				
			||||||
                color: "white"
 | 
					                color: "white"
 | 
				
			||||||
                visible: false
 | 
					                visible: false
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        Keys.onEscapePressed: {
 | 
					        Keys.onEscapePressed: {
 | 
				
			||||||
| 
						 | 
					@ -337,6 +343,13 @@ Rectangle {
 | 
				
			||||||
            imageOverlay.visible = true
 | 
					            imageOverlay.visible = true
 | 
				
			||||||
            imageOverlay.source = url
 | 
					            imageOverlay.source = url
 | 
				
			||||||
            closeButton.visible = true
 | 
					            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: {
 | 
					        onStatusChanged: {
 | 
				
			||||||
| 
						 | 
					@ -349,6 +362,7 @@ Rectangle {
 | 
				
			||||||
                runningIndicator.visible = false
 | 
					                runningIndicator.visible = false
 | 
				
			||||||
//                 imageOverlay.visible = true
 | 
					//                 imageOverlay.visible = true
 | 
				
			||||||
                enlargeAnimation.start()
 | 
					                enlargeAnimation.start()
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -359,6 +373,23 @@ Rectangle {
 | 
				
			||||||
            from: 0
 | 
					            from: 0
 | 
				
			||||||
            to: imageOverlay.paintedWidth
 | 
					            to: imageOverlay.paintedWidth
 | 
				
			||||||
            duration: 250
 | 
					            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
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue