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: {
 | 
			
		||||
                            // 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
 | 
			
		||||
                    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue