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 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue