Add a basic display of images when double clicked

This commit is contained in:
Luca Beltrame 2015-02-26 00:21:51 +01:00
parent adb33895fa
commit 74e3208549

View file

@ -20,6 +20,8 @@
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.3
import QtQuick.Layouts 1.1
import org.kde.kquickcontrolsaddons 2.0
import org.kde.kcoreaddons 1.0 as KCoreAddons
@ -65,6 +67,8 @@ Rectangle {
running: false
}
Component {
// This is just for testing
id: highlight
@ -87,7 +91,6 @@ Rectangle {
QPixmapItem {
id: pixItem
pixmap: thumbPix
anchors.horizontalCenter: parent.horizontalCenter
@ -96,19 +99,28 @@ Rectangle {
height: grid.cellHeight * 0.75
width: grid.cellWidth * 0.9
MouseArea {
id: mouseArea
anchors.fill: parent
height: parent.height
width: parent.width
//
hoverEnabled: true
onClicked: {
grid.currentIndex = index
rootObj.fileInfo(fileUrl, tags)
}
onDoubleClicked: {
// TODO: This needs to download the medium-size image (sample_url)
largeShow.imageDoubleClicked(sampleUrl)
}
onEntered: {
viewButton.opacity = 1
@ -259,5 +271,89 @@ Rectangle {
}
}
Image {
signal imageDoubleClicked( url url)
id: largeShow
smooth: true
fillMode: QPixmapItem.PreserveAspectFit
height: rootObj.width
width: rootObj.height
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
visible: false
z: 1
Button {
id: closeButton
anchors.top: parent.top
anchors.right: largeShow.right
height: parent.paintedHeight * 0.05
width: parent.paintedWidth * 0.05
anchors.topMargin: (parent.height - parent.paintedHeight) / 2
anchors.leftMargin: (parent.width - parent.paintedWidth) / 2
iconName: "window-close"
visible: width > 0
z: 2
onClicked: {
closeButton.visible = false
// shrinkAnimation.start()
largeShow.visible = false
}
}
onImageDoubleClicked: {
largeShow.visible = true
largeShow.source = url
closeButton.visible = true
}
onStatusChanged: {
if (largeShow.status == Image.Loading) {
runningIndicator.visible = true
}
if (largeShow.status == Image.Ready) {
runningIndicator.visible = false
largeShow.visible = true
enlargeAnimation.start()
console.log(largeShow.width)
}
}
PropertyAnimation {
id: enlargeAnimation
target: largeShow
properties: "width"
from: 0
to: largeShow.paintedWidth
duration: 250
}
PropertyAnimation {
id: shrinkAnimation
target: largeShow
properties: "width"
from: largeShow.paintedWidth
to: 0
duration: 250
onRunningChanged: {
if (!shrinkAnimation.running) {
// largeShow.source = ""
largeShow.visible = false
}
}
}
}
}