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 2.4
import QtQuick.Controls 1.3 import QtQuick.Controls 1.3
import QtQuick.Dialogs 1.2 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.kquickcontrolsaddons 2.0
import org.kde.kcoreaddons 1.0 as KCoreAddons import org.kde.kcoreaddons 1.0 as KCoreAddons
@ -65,6 +67,8 @@ Rectangle {
running: false running: false
} }
Component { Component {
// This is just for testing // This is just for testing
id: highlight id: highlight
@ -87,7 +91,6 @@ Rectangle {
QPixmapItem { QPixmapItem {
id: pixItem id: pixItem
pixmap: thumbPix pixmap: thumbPix
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
@ -96,19 +99,28 @@ Rectangle {
height: grid.cellHeight * 0.75 height: grid.cellHeight * 0.75
width: grid.cellWidth * 0.9 width: grid.cellWidth * 0.9
MouseArea { MouseArea {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
height: parent.height height: parent.height
width: parent.width width: parent.width
//
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: {
grid.currentIndex = index grid.currentIndex = index
rootObj.fileInfo(fileUrl, tags) rootObj.fileInfo(fileUrl, tags)
} }
onDoubleClicked: {
// TODO: This needs to download the medium-size image (sample_url)
largeShow.imageDoubleClicked(sampleUrl)
}
onEntered: { onEntered: {
viewButton.opacity = 1 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
}
}
}
}
} }