← Back to branch summary

~mrqtros/ubuntu-rssreader-app/ubuntu-rssreader-app-to-tabs

« back to all changes in this revision

Viewing changes to shorts/qml/components/BottomEdgeTabs.qml

  • Committer: Roman Shchekin
  • Date: 2015-07-04 08:38:18 UTC
  • Revision ID: mrqtros@gmail.com-20150704083818-ecojm3nmy5bpkxrb
Merge with the Reboot project.

Show diffs side-by-side

added added

removed removed

Lines of Context:
shorts/qml/components/BottomEdgeTabs.qml
 
1
/*
 
2
 * Copyright (C) 2015 Canonical, Ltd.
 
3
 *
 
4
 * This program is free software; you can redistribute it and/or modify
 
5
 * it under the terms of the GNU General Public License as published by
 
6
 * the Free Software Foundation; version 3.
 
7
 *
 
8
 * This program is distributed in the hope that it will be useful,
 
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
11
 * GNU General Public License for more details.
 
12
 *
 
13
 * You should have received a copy of the GNU General Public License
 
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
15
 */
 
16
 
 
17
/*
 
18
    Example:
 
19
 
 
20
MainView {
 
21
    objectName: "mainView"
 
22
 
 
23
    applicationName: "com.ubuntu.developer.qtros.tabsbottomedge"
 
24
 
 
25
    width: units.gu(50)
 
26
    height: units.gu(75)
 
27
    useDeprecatedToolbar: false
 
28
 
 
29
    PageStack {
 
30
        id: stack
 
31
        Component.onCompleted: push(tabs)
 
32
    }
 
33
 
 
34
    BottomEdgeTabs {
 
35
        id: tabs
 
36
 
 
37
        bottomEdgePage: secondPage
 
38
        bottomEdgeTitle: "Violet page"
 
39
 
 
40
        Tab {
 
41
            title: "First tab"
 
42
            page: Page {
 
43
                Label {
 
44
                    anchors.centerIn: parent
 
45
                    text: "Content of first tab"
 
46
                }
 
47
            }
 
48
        }
 
49
 
 
50
        Tab {
 
51
            title: "Second tab"
 
52
            page: Page {
 
53
                Label {
 
54
                    anchors.centerIn: parent
 
55
                    text: "Centered label"
 
56
                }
 
57
            }
 
58
        }
 
59
    } // BottomEdgeTabs
 
60
 
 
61
    Page {
 
62
        id: secondPage
 
63
        title: "Violet page"
 
64
        visible: false
 
65
 
 
66
        Rectangle {
 
67
            anchors.fill: parent
 
68
            color: "darkviolet"
 
69
        }
 
70
    }
 
71
}
 
72
 
 
73
*/
 
74
 
 
75
import QtQuick 2.4
 
76
import Ubuntu.Components 1.2
 
77
 
 
78
Tabs {
 
79
    id: page
 
80
 
 
81
    property Page   bottomEdgePage: null
 
82
    property alias  bottomEdgeTitle: tipLabel.text
 
83
    property color  bottomEdgeBackgroundColor
 
84
    property color  bottomEdgeTipColor
 
85
    property bool   bottomEdgeEnabled: true
 
86
    property bool   bottomEdgeHeaderHidden: true
 
87
    property bool   bottomEdgeUseHeaderInCalculations: true
 
88
    property real   bottomEdgeExpandThreshold: 0.2
 
89
 
 
90
    readonly property bool isReady: bottomEdgePageLoaded && bottomEdgePage.active && bottomEdge.y === __pageStartY
 
91
    readonly property bool isCollapsed: (bottomEdge.y === page.height)
 
92
    readonly property bool bottomEdgePageLoaded: bottomEdgePage != null
 
93
 
 
94
    readonly property int __pageStartY: bottomEdgeUseHeaderInCalculations ? fakeHeader.height : 0
 
95
 
 
96
    signal bottomEdgeReleased()
 
97
    signal bottomEdgeDismissed()
 
98
 
 
99
    function __pushPage() {
 
100
        if (bottomEdgePageLoaded) {
 
101
            bottomEdgePage.active = true
 
102
            if (bottomEdgePage.hasOwnProperty("isDirty")) // TODO
 
103
                bottomEdgePage.isDirty = true
 
104
            page.pageStack.push(bottomEdgePage)
 
105
            if (bottomEdgePage.flickable) {
 
106
                bottomEdgePage.flickable.contentY = -page.header.height
 
107
                bottomEdgePage.flickable.returnToBounds()
 
108
            }
 
109
            if (bottomEdgePage.ready)
 
110
                bottomEdgePage.ready()
 
111
        }
 
112
    }
 
113
 
 
114
    onActiveChanged: {
 
115
        if (active) {
 
116
            bottomEdge.state = "collapsed"
 
117
        }
 
118
    }
 
119
 
 
120
    onBottomEdgePageChanged: {
 
121
        tip.forceActiveFocus()
 
122
        if (page.isReady && bottomEdgePageLoaded && !bottomEdgePage.active) {
 
123
            page.__pushPage()
 
124
        }
 
125
    }
 
126
 
 
127
    Rectangle {
 
128
        id: bgVisual
 
129
 
 
130
        color: "black"
 
131
        anchors {
 
132
            fill: parent
 
133
            topMargin: __pageStartY
 
134
        }
 
135
        opacity: 0.7 * ((page.height - bottomEdge.y) / page.height)
 
136
        z: 1
 
137
    }
 
138
 
 
139
    UbuntuShape {
 
140
        id: tip
 
141
        objectName: "bottomEdgeTip"
 
142
 
 
143
        property bool hidden: !activeFocus || (bottomEdge.y - units.gu(1) < tip.y)
 
144
 
 
145
        enabled: bottomEdgePageLoaded
 
146
        visible: bottomEdgeEnabled
 
147
        anchors {
 
148
            bottom: parent.bottom
 
149
            horizontalCenter: bottomEdge.horizontalCenter
 
150
            bottomMargin: hidden ? - height + units.gu(1) : -units.gu(1)
 
151
            Behavior on bottomMargin {
 
152
                SequentialAnimation {
 
153
                    // wait some msecs in case of the focus change again, to avoid flickering
 
154
                    PauseAnimation {
 
155
                        duration: 300
 
156
                    }
 
157
                    UbuntuNumberAnimation {
 
158
                        duration: UbuntuAnimation.SnapDuration
 
159
                    }
 
160
                }
 
161
            }
 
162
        }
 
163
 
 
164
        z: 1
 
165
        width: tipLabel.paintedWidth + units.gu(6)
 
166
        height: bottomEdge.tipHeight + units.gu(1)
 
167
        color: bottomEdgeTipColor //color: "#C9C9C9"
 
168
 
 
169
        Label {
 
170
            id: tipLabel
 
171
 
 
172
            anchors {
 
173
                top: parent.top
 
174
                left: parent.left
 
175
                right: parent.right
 
176
            }
 
177
            height: bottomEdge.tipHeight
 
178
            verticalAlignment: Text.AlignVCenter
 
179
            horizontalAlignment: Text.AlignHCenter
 
180
            opacity: tip.hidden ? 0.0 : 1.0
 
181
            Behavior on opacity {
 
182
                UbuntuNumberAnimation {
 
183
                    duration: UbuntuAnimation.SnapDuration
 
184
                }
 
185
            }
 
186
        }
 
187
    } // UbuntuShape
 
188
 
 
189
    Rectangle {
 
190
        id: shadow
 
191
 
 
192
        anchors {
 
193
            left: parent.left
 
194
            right: parent.right
 
195
            bottom: bottomEdge.top
 
196
        }
 
197
        height: units.gu(1)
 
198
        z: 1
 
199
        opacity: 0.0
 
200
        gradient: Gradient {
 
201
            GradientStop { position: 0.0; color: "transparent" }
 
202
            GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.2) }
 
203
        }
 
204
    }
 
205
 
 
206
    MouseArea {
 
207
        id: mouseArea
 
208
 
 
209
        property real previousY: -1
 
210
        property string dragDirection: "None"
 
211
 
 
212
        preventStealing: true
 
213
        drag {
 
214
            axis: Drag.YAxis
 
215
            target: bottomEdge
 
216
            minimumY: __pageStartY
 
217
            maximumY: page.height
 
218
        }
 
219
        enabled: bottomEdgePageLoaded
 
220
        visible: page.bottomEdgeEnabled
 
221
 
 
222
        anchors {
 
223
            left: parent.left
 
224
            right: parent.right
 
225
            bottom: parent.bottom
 
226
        }
 
227
        height: bottomEdge.tipHeight
 
228
        z: 1
 
229
 
 
230
        onReleased: {
 
231
            page.bottomEdgeReleased()
 
232
            if ((dragDirection === "BottomToTop") &&
 
233
                    bottomEdge.y < (page.height - page.height * bottomEdgeExpandThreshold - bottomEdge.tipHeight)) {
 
234
                bottomEdge.state = "expanded"
 
235
            } else {
 
236
                bottomEdge.state = "collapsed"
 
237
            }
 
238
            previousY = -1
 
239
            dragDirection = "None"
 
240
        }
 
241
 
 
242
        onPressed: {
 
243
            previousY = mouse.y
 
244
            tip.forceActiveFocus()
 
245
        }
 
246
 
 
247
        onMouseYChanged: {
 
248
            var yOffset = previousY - mouseY
 
249
            // skip if was a small move
 
250
            if (Math.abs(yOffset) <= units.gu(2))
 
251
                return
 
252
 
 
253
            previousY = mouseY
 
254
            dragDirection = yOffset > 0 ? "BottomToTop" : "TopToBottom"
 
255
        }
 
256
    }
 
257
 
 
258
    FakeHeader {
 
259
        id: fakeHeader
 
260
        visible: bottomEdgeEnabled && !bottomEdgeHeaderHidden
 
261
 
 
262
        anchors {
 
263
            left: parent.left
 
264
            right: parent.right
 
265
        }
 
266
        y: -fakeHeader.height + (fakeHeader.height * (page.height - bottomEdge.y)) / (page.height - fakeHeader.height)
 
267
        z: bgVisual.z + 1
 
268
 
 
269
        Behavior on y {
 
270
            UbuntuNumberAnimation {
 
271
                duration: UbuntuAnimation.SnapDuration
 
272
            }
 
273
        }
 
274
    }
 
275
 
 
276
    Rectangle {
 
277
        id: bottomEdge
 
278
        objectName: "bottomEdge"
 
279
 
 
280
        readonly property int tipHeight: units.gu(3)
 
281
 
 
282
 
 
283
        z: 1
 
284
        color: bottomEdgeBackgroundColor
 
285
        clip: true
 
286
        anchors {
 
287
            left: parent.left
 
288
            right: parent.right
 
289
        }
 
290
        height: page.height
 
291
        y: height
 
292
 
 
293
        visible: !page.isCollapsed
 
294
        state: "collapsed"
 
295
        states: [
 
296
            State {
 
297
                name: "collapsed"
 
298
                PropertyChanges {
 
299
                    target: bottomEdge
 
300
                    y: bottomEdge.height
 
301
                }
 
302
                PropertyChanges {
 
303
                    target: fakeHeader
 
304
                    y: -fakeHeader.height
 
305
                }
 
306
            },
 
307
            State {
 
308
                name: "expanded"
 
309
                PropertyChanges {
 
310
                    target: bottomEdge
 
311
                    y: __pageStartY
 
312
                }
 
313
                PropertyChanges {
 
314
                    target: fakeHeader
 
315
                    y: 0
 
316
                }
 
317
            },
 
318
            State {
 
319
                name: "floating"
 
320
                when: mouseArea.drag.active
 
321
                PropertyChanges {
 
322
                    target: shadow
 
323
                    opacity: 1.0
 
324
                }
 
325
            }
 
326
        ]
 
327
 
 
328
        transitions: [
 
329
            Transition {
 
330
                to: "expanded"
 
331
                SequentialAnimation {
 
332
                    alwaysRunToEnd: true
 
333
                    ParallelAnimation {
 
334
                        SmoothedAnimation {
 
335
                            target: bottomEdge
 
336
                            property: "y"
 
337
                            duration: UbuntuAnimation.FastDuration
 
338
                            easing.type: Easing.Linear
 
339
                        }
 
340
                        SmoothedAnimation {
 
341
                            target: fakeHeader
 
342
                            property: "y"
 
343
                            duration: UbuntuAnimation.FastDuration
 
344
                            easing.type: Easing.Linear
 
345
                        }
 
346
                    }
 
347
                    SmoothedAnimation {
 
348
                        target: shaderSource
 
349
                        property: "anchors.topMargin"
 
350
                        to: - units.gu(4)
 
351
                        duration: UbuntuAnimation.FastDuration
 
352
                        easing.type: Easing.Linear
 
353
                    }
 
354
                    SmoothedAnimation {
 
355
                        target: shaderSource
 
356
                        property: "anchors.topMargin"
 
357
                        to: 0
 
358
                        duration: UbuntuAnimation.FastDuration
 
359
                        easing: UbuntuAnimation.StandardEasing
 
360
                    }
 
361
                    ScriptAction {
 
362
                        script: page.__pushPage()
 
363
                    }
 
364
                }
 
365
            },
 
366
            Transition {
 
367
                from: "expanded"
 
368
                to: "collapsed"
 
369
                SequentialAnimation {
 
370
                    alwaysRunToEnd: true
 
371
 
 
372
                    ScriptAction {
 
373
                        script: {
 
374
                            Qt.inputMethod.hide()
 
375
                            bottomEdgePage.active = false
 
376
                        }
 
377
                    }
 
378
                    ParallelAnimation {
 
379
                        SmoothedAnimation {
 
380
                            target: bottomEdge
 
381
                            property: "y"
 
382
                            duration: UbuntuAnimation.SlowDuration
 
383
                        }
 
384
                        SmoothedAnimation {
 
385
                            target: fakeHeader
 
386
                            property: "y"
 
387
                            duration: UbuntuAnimation.SlowDuration
 
388
                        }
 
389
                    }
 
390
                    ScriptAction {
 
391
                        script: {
 
392
                            // notify
 
393
                            page.bottomEdgeDismissed()
 
394
                            bottomEdgePage.active = true
 
395
                        }
 
396
                    }
 
397
                }
 
398
            },
 
399
            Transition {
 
400
                from: "floating"
 
401
                to: "collapsed"
 
402
                UbuntuNumberAnimation {
 
403
                    target: bottomEdge
 
404
                    property: "opacity"
 
405
                }
 
406
            }
 
407
        ]
 
408
 
 
409
        ShaderEffectSource {
 
410
            id: shaderSource
 
411
            sourceItem: bottomEdgePage
 
412
            anchors {
 
413
                top: parent.top
 
414
                left: parent.left
 
415
                right: parent.right
 
416
            }
 
417
            height: page.height - fakeHeader.height
 
418
 
 
419
            Binding {
 
420
                target: bottomEdgePageLoaded ? shaderSource : null
 
421
                property: "anchors.topMargin"
 
422
                value:  bottomEdgePage && bottomEdgePage.flickable ? bottomEdgePage.flickable.contentY : 0
 
423
                when: !page.isReady
 
424
            }
 
425
        }
 
426
    } // Rectanlgle
 
427
}