Newer
Older
// (c) Evgenij Legotskoj https://evileg.com/en/post/192/
// a reimplementation of Drawer to workaround a problem with overlays
// in the Qt version packaged with the snaps.
import QtQuick 2.5
import QtQuick.Window 2.0
Rectangle {
id: panel
function show() {
open = true;
drawerOn = true;
}
function hide() {
open = false;
drawerOn = false;
}
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
function toggle() {
open = open ? false : true;
drawerOn = open;
}
property bool open: false
property int position: Qt.LeftEdge
readonly property bool _rightEdge: position === Qt.RightEdge
readonly property int _closeX: _rightEdge ? _rootItem.width : - panel.width
readonly property int _openX: _rightEdge ? _rootItem.width - width : 0
readonly property int _minimumX: _rightEdge ? _rootItem.width - panel.width : -panel.width
readonly property int _maximumX: _rightEdge ? _rootItem.width : 0
readonly property int _pullThreshold: panel.width/2
readonly property int _slideDuration: 260
readonly property int _openMarginSize: 20
property real _velocity: 0
property real _oldMouseX: -1
property Item _rootItem: parent
on_RightEdgeChanged: _setupAnchors()
onOpenChanged: completeSlideDirection()
width: Math.min(root.width, root.height) / 3 * 2
height: root.height
x: _closeX
z: 10
function _setupAnchors() {
_rootItem = parent;
shadow.anchors.right = undefined;
shadow.anchors.left = undefined;
mouse.anchors.left = undefined;
mouse.anchors.right = undefined;
if (_rightEdge) {
mouse.anchors.right = mouse.parent.right;
shadow.anchors.right = panel.left;
} else {
mouse.anchors.left = mouse.parent.left;
shadow.anchors.left = panel.right;
}
slideAnimation.enabled = false;
panel.x = _rightEdge ? _rootItem.width : - panel.width;
slideAnimation.enabled = true;
}
function completeSlideDirection() {
if (open) {
panel.x = _openX;
} else {
panel.x = _closeX;
Qt.inputMethod.hide();
}
}
function handleRelease() {
var velocityThreshold = 5
if ((_rightEdge && _velocity > velocityThreshold) ||
(!_rightEdge && _velocity < -velocityThreshold)) {
panel.open = false;
completeSlideDirection()
} else if ((_rightEdge && _velocity < -velocityThreshold) ||
(!_rightEdge && _velocity > velocityThreshold)) {
panel.open = true;
completeSlideDirection()
} else if ((_rightEdge && panel.x < _openX + _pullThreshold) ||
(!_rightEdge && panel.x > _openX - _pullThreshold) ) {
panel.open = true;
panel.x = _openX;
} else {
panel.open = false;
panel.x = _closeX;
}
}
function handleClick(mouse) {
if ((_rightEdge && mouse.x < panel.x ) || mouse.x > panel.width) {
open = false;
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
}
}
onPositionChanged: {
if (!(position === Qt.RightEdge || position === Qt.LeftEdge )) {
console.warn("SlidePanel: Unsupported position.")
}
}
Behavior on x {
id: slideAnimation
enabled: !mouse.drag.active
NumberAnimation {
duration: _slideDuration
easing.type: Easing.OutCubic
}
}
NumberAnimation on x {
id: holdAnimation
to: _closeX + (_openMarginSize * (_rightEdge ? -1 : 1))
running : false
easing.type: Easing.OutCubic
duration: 200
}
MouseArea {
id: mouse
parent: _rootItem
y: _rootItem.y
width: open ? _rootItem.width : _openMarginSize
height: _rootItem.height
onPressed: if (!open) holdAnimation.restart();
onClicked: handleClick(mouse)
drag.target: panel
drag.minimumX: _minimumX
drag.maximumX: _maximumX
drag.axis: Qt.Horizontal
drag.onActiveChanged: if (active) holdAnimation.stop()
onReleased: handleRelease()
z: open ? 1 : 0
onMouseXChanged: {
_velocity = (mouse.x - _oldMouseX);
_oldMouseX = mouse.x;
}
}
Rectangle {
id: backgroundBlackout
parent: _rootItem
anchors.fill: parent
opacity: 0.5 * Math.min(1, Math.abs(panel.x - _closeX) / _rootItem.width/2)
color: "black"
}
Item {
id: shadow
anchors.left: panel.right
anchors.leftMargin: _rightEdge ? 0 : 10
height: parent.height
Rectangle {
height: 10
width: panel.height
rotation: 90
opacity: Math.min(1, Math.abs(panel.x - _closeX)/ _openMarginSize)
transformOrigin: Item.TopLeft
gradient: Gradient{
GradientStop { position: _rightEdge ? 1 : 0 ; color: "#00000000"}
GradientStop { position: _rightEdge ? 0 : 1 ; color: "#2c000000"}
}
}
}
}