Commit 46a9e88c authored by Ronan's avatar Ronan
Browse files

fix(Paned): better transition usage

parent 0bc612c3
...@@ -11,6 +11,9 @@ import Utils 1.0 ...@@ -11,6 +11,9 @@ import Utils 1.0
// Each area can have a fixed or dynamic minimum width. // Each area can have a fixed or dynamic minimum width.
// See `minimumLeftLimit` and `minimumRightLimit` attributes. // See `minimumLeftLimit` and `minimumRightLimit` attributes.
// //
// Note: Paned supports too `maximumLeftLimit` and
// `maximumRightLimit`.
//
// To create a dynamic minimum width, it's necessary to give // To create a dynamic minimum width, it's necessary to give
// a percentage to `minmimumLeftLimit` or `minimumRightLimit` like: // a percentage to `minmimumLeftLimit` or `minimumRightLimit` like:
// `minimumLeftLimit: '66%'`. // `minimumLeftLimit: '66%'`.
...@@ -41,6 +44,8 @@ Item { ...@@ -41,6 +44,8 @@ Item {
property var _minimumLeftLimit property var _minimumLeftLimit
property var _minimumRightLimit property var _minimumRightLimit
// -----------------------------------------------------------------
function _getLimitValue (limit) { function _getLimitValue (limit) {
if (limit == null) { if (limit == null) {
return return
...@@ -104,6 +109,8 @@ Item { ...@@ -104,6 +109,8 @@ Item {
} }
} }
// -----------------------------------------------------------------
function _applyLimitsOnUserMove (offset) { function _applyLimitsOnUserMove (offset) {
var minimumRightLimit = _getLimitValue(_minimumRightLimit) var minimumRightLimit = _getLimitValue(_minimumRightLimit)
var minimumLeftLimit = _getLimitValue(_minimumLeftLimit) var minimumLeftLimit = _getLimitValue(_minimumLeftLimit)
...@@ -112,11 +119,11 @@ Item { ...@@ -112,11 +119,11 @@ Item {
if (_isClosed) { if (_isClosed) {
if (closingEdge === Qt.LeftEdge) { if (closingEdge === Qt.LeftEdge) {
if (offset > minimumLeftLimit / 2) { if (offset > minimumLeftLimit / 2) {
_updateClosing() _open()
} }
} else { } else {
if (-offset > minimumRightLimit / 2) { if (-offset > minimumRightLimit / 2) {
_updateClosing() _open()
} }
} }
...@@ -134,7 +141,11 @@ Item { ...@@ -134,7 +141,11 @@ Item {
contentA.width = minimumLeftLimit contentA.width = minimumLeftLimit
if (closingEdge === Qt.LeftEdge && -offset > minimumLeftLimit / 2) { if (closingEdge === Qt.LeftEdge && -offset > minimumLeftLimit / 2) {
_updateClosing() if (_isClosed) {
_open()
} else {
_close()
}
} }
} }
// width(A) > maximum width(A). // width(A) > maximum width(A).
...@@ -146,7 +157,11 @@ Item { ...@@ -146,7 +157,11 @@ Item {
contentA.width = container.width - handle.width - minimumRightLimit contentA.width = container.width - handle.width - minimumRightLimit
if (closingEdge === Qt.RightEdge && offset > minimumRightLimit / 2) { if (closingEdge === Qt.RightEdge && offset > minimumRightLimit / 2) {
_updateClosing() if (_isClosed) {
_open()
} else {
_close()
}
} }
} }
// width(B) > maximum width(B). // width(B) > maximum width(B).
...@@ -159,28 +174,31 @@ Item { ...@@ -159,28 +174,31 @@ Item {
} }
} }
function _updateClosing () { // -----------------------------------------------------------------
// Save state and close.
if (!_isClosed) {
_isClosed = true
_savedContentAWidth = contentA.width
if (closingEdge === Qt.LeftEdge) {
closingTransitionA.running = true
} else {
closingTransitionB.running = true
}
return
}
// Restore old state. function _open () {
_isClosed = false _isClosed = false
contentA.width = _savedContentAWidth
_applyLimits() _applyLimits()
} }
function _close () {
_isClosed = true
_savedContentAWidth = contentA.width
closingTransition.running = true
}
function _inverseClosingState () {
if (!_isClosed) {
// Save state and close.
_close()
} else {
// Restore old state.
openingTransition.running = true
}
}
// -----------------------------------------------------------------
onWidthChanged: _applyLimits() onWidthChanged: _applyLimits()
Component.onCompleted: { Component.onCompleted: {
...@@ -211,7 +229,7 @@ Item { ...@@ -211,7 +229,7 @@ Item {
hoverEnabled: true hoverEnabled: true
width: PanedStyle.handle.width width: PanedStyle.handle.width
onDoubleClicked: _updateClosing() onDoubleClicked: _inverseClosingState()
onMouseXChanged: pressed && onMouseXChanged: pressed &&
_applyLimitsOnUserMove(handle.mouseX - _mouseStart) _applyLimitsOnUserMove(handle.mouseX - _mouseStart)
...@@ -237,20 +255,22 @@ Item { ...@@ -237,20 +255,22 @@ Item {
} }
PropertyAnimation { PropertyAnimation {
id: closingTransitionA id: openingTransition
target: contentA duration: PanedStyle.transitionDuration
property: 'width' property: 'width'
to: 0 target: contentA
duration: 200 to: _savedContentAWidth
onRunningChanged: !running && _open()
} }
PropertyAnimation { PropertyAnimation {
id: closingTransitionB id: closingTransition
duration: 200 duration: PanedStyle.transitionDuration
property: 'width' property: 'width'
target: contentA target: contentA
to: container.width - handle.width to: closingEdge === Qt.LeftEdge ? 0 : container.width - handle.width
} }
} }
...@@ -4,6 +4,8 @@ import QtQuick 2.7 ...@@ -4,6 +4,8 @@ import QtQuick 2.7
import Linphone 1.0 import Linphone 1.0
QtObject { QtObject {
property int transitionDuration: 200
property QtObject handle: QtObject { property QtObject handle: QtObject {
property int width: 10 property int width: 10
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment