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