Tweaked ImagePage behavior
This should made reaction to a single tap more reliable and flicking back easier.
This commit is contained in:
parent
5d14d9b000
commit
79e06bd4c4
1 changed files with 67 additions and 59 deletions
|
@ -91,11 +91,9 @@ Page {
|
||||||
}
|
}
|
||||||
|
|
||||||
SilicaFlickable {
|
SilicaFlickable {
|
||||||
id: imageFlickable
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
clip: true
|
flickableDirection: Flickable.VerticalFlick
|
||||||
contentWidth: imagePinchArea.width;
|
interactive: !imageOnly
|
||||||
contentHeight: imagePinchArea.height;
|
|
||||||
|
|
||||||
PullDownMenu {
|
PullDownMenu {
|
||||||
visible: !imageOnly && imageUrl
|
visible: !imageOnly && imageUrl
|
||||||
|
@ -107,26 +105,25 @@ Page {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
transitions: Transition {
|
|
||||||
NumberAnimation { properties: "contentX, contentY"; easing.type: Easing.Linear }
|
|
||||||
}
|
|
||||||
|
|
||||||
AppNotification {
|
AppNotification {
|
||||||
id: imageNotification
|
id: imageNotification
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
SilicaFlickable {
|
||||||
|
id: imageFlickable
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
visible: singleImage.visible
|
clip: true
|
||||||
onClicked: imageOnly = !imageOnly // Toggle "Image only" mode on tap
|
contentWidth: imagePinchArea.width
|
||||||
}
|
contentHeight: imagePinchArea.height
|
||||||
|
flickableDirection: Flickable.HorizontalAndVerticalFlick
|
||||||
|
quickScrollEnabled: false
|
||||||
|
|
||||||
PinchArea {
|
PinchArea {
|
||||||
id: imagePinchArea
|
id: imagePinchArea
|
||||||
width: Math.max( singleImage.width * singleImage.scale, imageFlickable.width )
|
width: Math.max( singleImage.width * singleImage.scale, imageFlickable.width )
|
||||||
height: Math.max( singleImage.height * singleImage.scale, imageFlickable.height )
|
height: Math.max( singleImage.height * singleImage.scale, imageFlickable.height )
|
||||||
|
|
||||||
enabled: singleImage.visible
|
enabled: singleImage.status === Image.Ready
|
||||||
pinch {
|
pinch {
|
||||||
target: singleImage
|
target: singleImage
|
||||||
minimumScale: 1
|
minimumScale: 1
|
||||||
|
@ -134,8 +131,9 @@ Page {
|
||||||
}
|
}
|
||||||
|
|
||||||
onPinchUpdated: {
|
onPinchUpdated: {
|
||||||
imagePage.centerX = pinch.center.x;
|
imagePage.centerX = pinch.center.x
|
||||||
imagePage.centerY = pinch.center.y;
|
imagePage.centerY = pinch.center.y
|
||||||
|
imageFlickable.returnToBounds()
|
||||||
}
|
}
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
|
@ -148,9 +146,9 @@ Page {
|
||||||
fillMode: Image.PreserveAspectFit
|
fillMode: Image.PreserveAspectFit
|
||||||
asynchronous: true
|
asynchronous: true
|
||||||
|
|
||||||
visible: status === Image.Ready ? true : false
|
visible: opacity > 0
|
||||||
opacity: status === Image.Ready ? 1 : 0
|
opacity: status === Image.Ready ? 1 : 0
|
||||||
Behavior on opacity { NumberAnimation {} }
|
Behavior on opacity { FadeAnimation {} }
|
||||||
onScaleChanged: {
|
onScaleChanged: {
|
||||||
var newWidth = singleImage.width * singleImage.scale;
|
var newWidth = singleImage.width * singleImage.scale;
|
||||||
var newHeight = singleImage.height * singleImage.scale;
|
var newHeight = singleImage.height * singleImage.scale;
|
||||||
|
@ -175,8 +173,18 @@ Page {
|
||||||
imagePage.oldCenterY = imagePage.centerY;
|
imagePage.oldCenterY = imagePage.centerY;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
visible: singleImage.visible
|
||||||
|
|
||||||
|
onClicked: imageOnly = !imageOnly // Toggle "Image only" mode on tap
|
||||||
|
onDoubleClicked: ; // This introduces a delay before onClicked is invoked
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ScrollDecorator { flickable: imageFlickable }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
|
@ -191,7 +199,7 @@ Page {
|
||||||
asynchronous: true
|
asynchronous: true
|
||||||
|
|
||||||
fillMode: Image.PreserveAspectFit
|
fillMode: Image.PreserveAspectFit
|
||||||
opacity: 0.15
|
opacity: visible ? 0.15 : 0
|
||||||
|
Behavior on opacity { FadeAnimation {} }
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue