Add a basic display of images when double clicked
This commit is contained in:
parent
adb33895fa
commit
74e3208549
1 changed files with 98 additions and 2 deletions
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue