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