removed states 'opened', 'closed'
This commit is contained in:
parent
6c78b4ec8f
commit
0a15f44193
1 changed files with 25 additions and 106 deletions
|
@ -10,11 +10,6 @@ Item {
|
||||||
target: PageController
|
target: PageController
|
||||||
|
|
||||||
function onForceCloseDrawer() {
|
function onForceCloseDrawer() {
|
||||||
if (root.opened()) {
|
|
||||||
close()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (root.expanded()) {
|
if (root.expanded()) {
|
||||||
collapse()
|
collapse()
|
||||||
}
|
}
|
||||||
|
@ -43,13 +38,12 @@ Item {
|
||||||
|
|
||||||
property bool dragActive: dragArea.drag.active
|
property bool dragActive: dragArea.drag.active
|
||||||
|
|
||||||
/** Initial height of button content */
|
|
||||||
property int collapsedHeight: 0
|
property int collapsedHeight: 0
|
||||||
|
|
||||||
property bool fullMouseAreaVisible: true
|
property bool fullMouseAreaVisible: true
|
||||||
property MouseArea drawerDragArea: dragArea
|
property MouseArea drawerDragArea: dragArea
|
||||||
|
|
||||||
state: "closed"
|
state: "collapsed"
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: draw2Background
|
id: draw2Background
|
||||||
|
@ -66,16 +60,11 @@ Item {
|
||||||
MouseArea {
|
MouseArea {
|
||||||
id: fullMouseArea
|
id: fullMouseArea
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
enabled: (root.opened() || root.expanded())
|
enabled: root.expanded()
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
visible: fullMouseAreaVisible
|
visible: fullMouseAreaVisible
|
||||||
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
if (root.opened()) {
|
|
||||||
close()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (root.expanded()) {
|
if (root.expanded()) {
|
||||||
collapse()
|
collapse()
|
||||||
}
|
}
|
||||||
|
@ -84,7 +73,10 @@ Item {
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: placeAreaHolder
|
id: placeAreaHolder
|
||||||
height: (!root.opened()) ? 0 : parent.height - contentHeight
|
|
||||||
|
// for apdating home drawer, normal drawer will reset it
|
||||||
|
height: 0
|
||||||
|
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
visible: true
|
visible: true
|
||||||
|
@ -120,49 +112,27 @@ Item {
|
||||||
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
||||||
cursorShape: root.collapsed() ? Qt.PointingHandCursor : Qt.ArrowCursor // ?
|
cursorShape: root.collapsed() ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
|
|
||||||
drag.target: placeAreaHolder
|
drag.target: placeAreaHolder
|
||||||
drag.axis: Drag.YAxis
|
drag.axis: Drag.YAxis
|
||||||
drag.maximumY: (root.collapsed() || root.expanded()) ? (root.height - collapsedHeight) : root.height
|
drag.maximumY: root.height - root.collapsedHeight
|
||||||
drag.minimumY: (root.collapsed() || root.expanded()) ? (root.height - root.height * 0.9) : (root.height - root.height)
|
drag.minimumY: root.collapsedHeight > 0 ? root.height - root.height * 0.9 : 0
|
||||||
|
|
||||||
/** If drag area is released at any point other than min or max y, transition to the other state */
|
/** If drag area is released at any point other than min or max y, transition to the other state */
|
||||||
onReleased: {
|
onReleased: {
|
||||||
if (root.closed() && placeAreaHolder.y < root.height * 0.9) {
|
if (root.collapsed() && placeAreaHolder.y < drag.maximumY) {
|
||||||
root.state = "opened"
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (root.opened() && placeAreaHolder.y > (root.height - root.height * 0.9)) {
|
|
||||||
close()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if (root.collapsed() && placeAreaHolder.y < (root.height - collapsedHeight)) {
|
|
||||||
root.state = "expanded"
|
root.state = "expanded"
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if (root.expanded() && placeAreaHolder.y > drag.minimumY) {
|
||||||
if (root.expanded() && placeAreaHolder.y > (root.height - root.height * 0.9)) {
|
|
||||||
root.state = "collapsed"
|
root.state = "collapsed"
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (root.opened()) {
|
|
||||||
placeAreaHolder.y = 0
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
if (root.opened()) {
|
|
||||||
close()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (root.expanded()) {
|
if (root.expanded()) {
|
||||||
collapse()
|
collapse()
|
||||||
return
|
return
|
||||||
|
@ -186,11 +156,10 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onStateChanged: {
|
onStateChanged: {
|
||||||
if (root.closed() || root.collapsed()) {
|
if (root.collapsed()) {
|
||||||
var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
|
var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
|
||||||
if (initialPageNavigationBarColor !== 0xFF1C1D21) {
|
if (initialPageNavigationBarColor !== 0xFF1C1D21) {
|
||||||
PageController.updateNavigationBarColor(initialPageNavigationBarColor)
|
PageController.updateNavigationBarColor(initialPageNavigationBarColor)
|
||||||
|
@ -205,7 +174,7 @@ Item {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (root.opened() || root.expanded()) {
|
if (root.expanded()) {
|
||||||
if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
|
if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
|
||||||
PageController.updateNavigationBarColor(0xFF1C1D21)
|
PageController.updateNavigationBarColor(0xFF1C1D21)
|
||||||
}
|
}
|
||||||
|
@ -220,27 +189,11 @@ Item {
|
||||||
|
|
||||||
/** Two states of buttonContent, great place to add any future animations for the drawer */
|
/** Two states of buttonContent, great place to add any future animations for the drawer */
|
||||||
states: [
|
states: [
|
||||||
State {
|
|
||||||
name: "closed"
|
|
||||||
PropertyChanges {
|
|
||||||
target: placeAreaHolder
|
|
||||||
y: root.height
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
State {
|
|
||||||
name: "opened"
|
|
||||||
PropertyChanges {
|
|
||||||
target: placeAreaHolder
|
|
||||||
y: dragArea.drag.minimumY
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
State {
|
State {
|
||||||
name: "collapsed"
|
name: "collapsed"
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: placeAreaHolder
|
target: placeAreaHolder
|
||||||
y: root.height - collapsedHeight
|
y: dragArea.drag.maximumY
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -248,38 +201,12 @@ Item {
|
||||||
name: "expanded"
|
name: "expanded"
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: placeAreaHolder
|
target: placeAreaHolder
|
||||||
y: root.height - root.height * 0.9
|
y: dragArea.drag.minimumY
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
transitions: [
|
transitions: [
|
||||||
Transition {
|
|
||||||
from: "opened"
|
|
||||||
to: "closed"
|
|
||||||
PropertyAnimation {
|
|
||||||
target: placeAreaHolder
|
|
||||||
properties: "y"
|
|
||||||
duration: 200
|
|
||||||
}
|
|
||||||
|
|
||||||
onRunningChanged: {
|
|
||||||
if (!running) {
|
|
||||||
fullMouseArea.visible = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
Transition {
|
|
||||||
from: "closed"
|
|
||||||
to: "opened"
|
|
||||||
PropertyAnimation {
|
|
||||||
target: placeAreaHolder
|
|
||||||
properties: "y"
|
|
||||||
duration: 200
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
Transition {
|
Transition {
|
||||||
from: "expanded"
|
from: "expanded"
|
||||||
to: "collapsed"
|
to: "collapsed"
|
||||||
|
@ -324,33 +251,32 @@ Item {
|
||||||
duration: 200
|
duration: 200
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// for normal drawer
|
||||||
function open() {
|
function open() {
|
||||||
if (root.opened()) {
|
if (root.expanded()) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
draw2Background.color = semitransparentColor
|
draw2Background.color = semitransparentColor
|
||||||
fullMouseArea.visible = true
|
fullMouseArea.visible = true
|
||||||
|
|
||||||
|
collapsedHeight = 0
|
||||||
|
|
||||||
root.y = 0
|
root.y = 0
|
||||||
root.state = "opened"
|
root.state = "expanded"
|
||||||
root.visible = true
|
root.visible = true
|
||||||
root.height = parent.height
|
root.height = parent.height
|
||||||
|
|
||||||
contentArea.height = contentHeight
|
contentArea.height = contentHeight
|
||||||
|
|
||||||
|
placeAreaHolder.y = 0
|
||||||
placeAreaHolder.height = root.height - contentHeight
|
placeAreaHolder.height = root.height - contentHeight
|
||||||
placeAreaHolder.y = root.height - root.height
|
|
||||||
|
|
||||||
dragArea.drag.maximumY = root.height
|
|
||||||
dragArea.drag.minimumY = 0
|
|
||||||
|
|
||||||
animationVisible.running = true
|
animationVisible.running = true
|
||||||
}
|
}
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
draw2Background.color = "transparent"
|
collapse()
|
||||||
root.state = "closed"
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function collapse() {
|
function collapse() {
|
||||||
|
@ -358,23 +284,16 @@ Item {
|
||||||
root.state = "collapsed"
|
root.state = "collapsed"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// for page home
|
||||||
function expand() {
|
function expand() {
|
||||||
draw2Background.color = semitransparentColor
|
draw2Background.color = semitransparentColor
|
||||||
root.state = "expanded"
|
root.state = "expanded"
|
||||||
}
|
}
|
||||||
|
|
||||||
function opened() {
|
|
||||||
return root.state === "opened" ? true : false
|
|
||||||
}
|
|
||||||
|
|
||||||
function expanded() {
|
function expanded() {
|
||||||
return root.state === "expanded" ? true : false
|
return root.state === "expanded" ? true : false
|
||||||
}
|
}
|
||||||
|
|
||||||
function closed() {
|
|
||||||
return root.state === "closed" ? true : false
|
|
||||||
}
|
|
||||||
|
|
||||||
function collapsed() {
|
function collapsed() {
|
||||||
return root.state === "collapsed" ? true : false
|
return root.state === "collapsed" ? true : false
|
||||||
}
|
}
|
||||||
|
@ -383,7 +302,7 @@ Item {
|
||||||
onVisibleChanged: {
|
onVisibleChanged: {
|
||||||
// e.g cancel, ......
|
// e.g cancel, ......
|
||||||
if (!visible) {
|
if (!visible) {
|
||||||
if (root.opened()) {
|
if (root.expanded()) {
|
||||||
if (needCloseButton) {
|
if (needCloseButton) {
|
||||||
PageController.drawerClose()
|
PageController.drawerClose()
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue