PageRow.qml 34.7 KB
Newer Older
Marco Martin's avatar
Marco Martin committed
1
/*
2
 *  SPDX-FileCopyrightText: 2016 Marco Martin <mart@kde.org>
Marco Martin's avatar
Marco Martin committed
3
 *
4
 *  SPDX-License-Identifier: LGPL-2.0-or-later
Marco Martin's avatar
Marco Martin committed
5
 */
6

7
import QtQuick 2.15
8
import QtQuick.Layouts 1.2
9
import QtQml.Models 2.2
Marco Martin's avatar
Marco Martin committed
10
import QtQuick.Templates 2.0 as T
Marco Martin's avatar
Marco Martin committed
11
import QtQuick.Controls 2.0 as QQC2
12
import org.kde.kirigami 2.7
13
import "private/globaltoolbar" as GlobalToolBar
14
import "templates" as KT
15

Marco Martin's avatar
Marco Martin committed
16
/**
Carl Schwan's avatar
Carl Schwan committed
17
 * @inherits QtQuick.Controls.Control
Marco Martin's avatar
Marco Martin committed
18
19
20
 * PageRow implements a row-based navigation model, which can be used
 * with a set of interlinked information pages. Items are pushed in the
 * back of the row and the view scrolls until that row is visualized.
21
 * A PageRow can show a single page or a multiple set of columns, depending
Marco Martin's avatar
Marco Martin committed
22
23
 * on the window width: on a phone a single column should be fullscreen,
 * while on a tablet or a desktop more than one column should be visible.
24
 * @inherit QtQuick.Control
Marco Martin's avatar
Marco Martin committed
25
 */
26
T.Control {
27
    id: root
28

29
30
//BEGIN PROPERTIES
    /**
Carl Schwan's avatar
Carl Schwan committed
31
32
     * This property holds the number of items currently pushed onto the view.
     * @var int depth
33
     */
34
    property alias depth: columnView.count
35
36

    /**
Carl Schwan's avatar
Carl Schwan committed
37
     * The last Page in the Row.
38
     */
39
    readonly property Item lastItem: columnView.contentChildren.length > 0 ?  columnView.contentChildren[columnView.contentChildren.length - 1] : null
40
41

    /**
Carl Schwan's avatar
Carl Schwan committed
42
43
     * The currently visible Item.
     * @var Item currentItem
44
     */
45
    property alias currentItem: columnView.currentItem
46

Marco Martin's avatar
Marco Martin committed
47
    /**
Carl Schwan's avatar
Carl Schwan committed
48
49
     * The index of the currently visible Item.
     * @var int currentIndex
Marco Martin's avatar
Marco Martin committed
50
     */
51
    property alias currentIndex: columnView.currentIndex
Marco Martin's avatar
Marco Martin committed
52

53
    /**
Carl Schwan's avatar
Carl Schwan committed
54
55
     * The initial item when this PageRow is created.
     * @var Page initialPage
56
     */
57
    property variant initialPage
58

59
    /**
Carl Schwan's avatar
Carl Schwan committed
60
61
     * The main ColumnView of this Row.
     * @var Item contentItem
62
     */
63
    contentItem: columnView
64

Jan Blackquill's avatar
Jan Blackquill committed
65
    /**
Carl Schwan's avatar
Carl Schwan committed
66
     * @var ColumnView columnView
Jan Blackquill's avatar
Jan Blackquill committed
67
68
69
70
71
72
73
74
75
     *
     * The ColumnView that this PageRow owns.
     * Generally, you shouldn't need to change
     * the value of this.
     *
     * @since 2.12
     */
    property alias columnView: columnView

Marco Martin's avatar
Marco Martin committed
76
    /**
Carl Schwan's avatar
Carl Schwan committed
77
78
     * @var list<Item> items
     * All the items that are present in the PageRow.
Marco Martin's avatar
Marco Martin committed
79
80
     * @since 2.6
     */
81
    property alias items: columnView.contentChildren;
82

Marco Martin's avatar
Marco Martin committed
83
    /**
Carl Schwan's avatar
Carl Schwan committed
84
     * @var list<Item> visibleItems
Marco Martin's avatar
Marco Martin committed
85
86
87
     * All pages which are visible in the PageRow, excluding those which are scrolled away
     * @since 2.6
     */
88
    property alias visibleItems: columnView.visibleItems
Marco Martin's avatar
Marco Martin committed
89
90

    /**
Carl Schwan's avatar
Carl Schwan committed
91
     * @var Item firstVisibleItem
Marco Martin's avatar
Marco Martin committed
92
93
94
     * The first at least partially visible page in the PageRow, pages before that one will be out of the viewport
     * @since 2.6
     */
95
    property alias firstVisibleItem: columnView.firstVisibleItem
Marco Martin's avatar
Marco Martin committed
96
97

    /**
Carl Schwan's avatar
Carl Schwan committed
98
     * @var Item lastVisibleItem
Marco Martin's avatar
Marco Martin committed
99
100
101
     * The last at least partially visible page in the PageRow, pages after that one will be out of the viewport
     * @since 2.6
     */
102
    property alias lastVisibleItem: columnView.lastVisibleItem
Marco Martin's avatar
Marco Martin committed
103

104
105
    /**
     * The default width for a column
106
     * default is wide enough for 30 grid units.
107
108
     * Pages can override it with their Layout.fillWidth,
     * implicitWidth Layout.minimumWidth etc.
109
     */
110
    property int defaultColumnWidth: Units.gridUnit * 20
111

112
    /**
Carl Schwan's avatar
Carl Schwan committed
113
     * @var bool interactive
114
115
116
117
118
     * If true it will be possible to go back/forward by dragging the
     * content themselves with a gesture.
     * Otherwise the only way to go back will be programmatically
     * default: true
     */
119
    property alias interactive: columnView.interactive
120

121
122
123
124
    /**
     * If true, the PageRow is wide enough that willshow more than one column at once
     * @since 5.37
     */
125
    readonly property bool wideMode: root.width >= root.defaultColumnWidth*2 && depth >= 2
126
127

    /**
Carl Schwan's avatar
Carl Schwan committed
128
     * @var bool separatorVisible
129
130
131
132
     * True if the separator between pages should be visible
     * default: true
     * @since 5.38
     */
133
    property alias separatorVisible: columnView.separatorVisible
134
135
136
137
138

    /**
     * globalToolBar: grouped property
     * Controls the appearance of an optional global toolbar for the whole PageRow.
     * It's a grouped property comprised of the following properties:
139
140
141
142
143
144
145
     * * style (Kirigami.ApplicationHeaderStyle): can have the following values:
     *  * Auto: depending on application formfactor, it can behave automatically like other values, such as a Breadcrumb on mobile and ToolBar on desktop
     *  * Breadcrumb: it will show a breadcrumb of all the page titles in the stack, for easy navigation
     *  * Titles: each page will only have its own tile on top
     *  * TabBar: the global toolbar will look like a TabBar to select the pages
     *  * ToolBar: each page will have the title on top together buttons and menus to represent all of the page actions: not available on Mobile systems.
     *  * None: no global toolbar will be shown
146
147
     *
     * * actualStyle: this will represent the actual style of the toolbar: it can be different from style in the case style is Auto
148
     * * showNavigationButtons: OR flags combination of ApplicationHeaderStyle.ShowBackButton and ApplicationHeaderStyle.ShowForwardButton
149
     * * toolbarActionAlignment: How to horizontally align the actions when using the ToolBar style. Note that anything but Qt.AlignRight will cause the title to be hidden (default: Qt.AlignRight)
150
151
152
153
154
155
     * * minimumHeight (int): minimum height of the header, which will be resized when scrolling, only in Mobile mode (default: preferredHeight, sliding but no scaling)
     * * preferredHeight (int): the height the toolbar will usually have
     * * maximumHeight (int): the height the toolbar will have in mobile mode when the app is in reachable mode (default: preferredHeight * 1.5)
     * * leftReservedSpace (int, readonly): how many pixels are reserved at the left of the page toolbar (for navigation buttons or drawer handle)
     * * rightReservedSpace (int, readonly): how many pixels are reserved at the right of the page toolbar (drawer handle)
     *
156
157
158
     * @since 5.48
     */
    readonly property alias globalToolBar: globalToolBar
159

160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
    /**
     * Assign a drawer as an internal left sidebar for this PageRow.
     * In this case, when open and not modal, the drawer contents will be in the same layer as the base pagerow.
     * Pushing any other layer on top will cover the sidebar.
     *
     * @since 5.84
     */
    // TODO KF6: globaldrawer should use action al so used by this sidebar instead of reparenting globaldrawer contents?
    property OverlayDrawer leftSidebar

    onLeftSidebarChanged: {
        if (leftSidebar && !leftSidebar.modal) {
            modalConnection.onModalChanged();
        }
    }

    Connections {
        id: modalConnection
        target: root.leftSidebar
        function onModalChanged() {
            if (leftSidebar.modal) {
                let sidebar = sidebarControl.contentItem;
                let background = sidebarControl.background;
                sidebarControl.contentItem = null;
                leftSidebar.contentItem = sidebar;
                sidebarControl.background = null;
                leftSidebar.background = background;

                sidebar.visible = true;
                background.visible = true;
            } else {
                let sidebar = leftSidebar.contentItem
                let background = leftSidebar.background
                leftSidebar.contentItem=null
                sidebarControl.contentItem = sidebar
                leftSidebar.background=null
                sidebarControl.background = background

                sidebar.visible = true;
                background.visible = true;
            }
        }
    }

204
205
    implicitWidth: contentItem.implicitWidth + leftPadding + rightPadding
    implicitHeight: contentItem.implicitHeight + topPadding + bottomPadding
206
207
208
209
210
211
212
//END PROPERTIES

//BEGIN FUNCTIONS
    /**
     * Pushes a page on the stack.
     * The page can be defined as a component, item or string.
     * If an item is used then the page will get re-parented.
213
     * If a string is used then it is interpreted as a url that is used to load a page
214
     * component.
215
     * The last pushed page will become the current item.
216
217
218
219
220
221
222
223
224
225
226
227
     *
     * @param page The page can also be given as an array of pages.
     *     In this case all those pages will
     *     be pushed onto the stack. The items in the stack can be components, items or
     *     strings just like for single pages.
     *     Additionally an object can be used, which specifies a page and an optional
     *     properties property.
     *     This can be used to push multiple pages while still giving each of
     *     them properties.
     *     When an array is used the transition animation will only be to the last page.
     *
     * @param properties The properties argument is optional and allows defining a
228
229
     * map of properties to set on the page. If page is actually an array of pages, properties should also be an array of key/value maps
     * @return The new created page (or the last one if it was an array)
230
231
     */
    function push(page, properties) {
232
233
234
235
236
        var item = insertPage(depth, page, properties);
        currentIndex = depth - 1;
        return item;
    }

237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
    /**
     * Pushes a page as a new dialog on desktop and as a layer on mobile.
     * @param page The page can be defined as a component, item or string. If an item is
     *             used then the page will get re-parented. If a string is used then it
     *             is interpreted as a url that is used to load a page component. Once
     *             pushed the page gains the methods `closeDialog` allowing to close itself.
     *             Kirigami only supports calling `closeDialog` once.
     * @param properties The properties given when initializing the page.
     * @param windowProperties The properties given to the initialized window on desktop.
     * @return The new created page
     */
    function pushDialogLayer(page, properties = {}, windowProperties = {}) {
        let item;
        if (Settings.isMobile) {
            if (QQC2.ApplicationWindow.window.width > Units.gridUnit * 40) {
                // open as a QQC2.Dialog
                const dialog = Qt.createQmlObject('
                    import QtQuick 2.15;
                    import QtQuick.Controls 2.15;
                    import QtQuick.Layouts 1.15;
                    import org.kde.kirigami 2.15 as Kirigami;
                    Dialog {
                        id: dialog
                        modal: true;
                        leftPadding: 0; rightPadding: 0; topPadding: 0; bottomPadding: 0;
262
                        clip: true
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
                        header: Kirigami.AbstractApplicationHeader {
                            pageRow: null
                            page: null
                            minimumHeight: Units.gridUnit * 1.6
                            maximumHeight: Units.gridUnit * 1.6
                            preferredHeight: Units.gridUnit * 1.6

                            Keys.onEscapePressed: {
                                if (dialog.opened) {
                                    dialog.close();
                                } else {
                                    event.accepted = false;
                                }
                            }

                            contentItem: RowLayout {
                                width: parent.width
                                Kirigami.Heading {
                                    Layout.leftMargin: Kirigami.Units.largeSpacing
                                    text: dialog.title
                                    elide: Text.ElideRight
                                }
                                Item {
                                    Layout.fillWidth: true;
                                }
                                Kirigami.Icon {
                                    id: closeIcon
                                    Layout.alignment: Qt.AlignVCenter
                                    Layout.rightMargin: Kirigami.Units.largeSpacing
                                    Layout.preferredHeight: Kirigami.Units.iconSizes.smallMedium
                                    Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium
                                    source: closeMouseArea.containsMouse ? "window-close" : "window-close-symbolic"
                                    active: closeMouseArea.containsMouse
                                    MouseArea {
                                        id: closeMouseArea
                                        hoverEnabled: true
                                        anchors.fill: parent
                                        onClicked: dialog.close();
                                    }
                                }
                            }
                        }
305
                        contentItem: Control { topPadding: 0; leftPadding: 0; rightPadding: 0; bottomPadding: 0; }
306
                    }', QQC2.ApplicationWindow.overlay);
307
308
309
310
                dialog.width = Qt.binding(() => QQC2.ApplicationWindow.window.width - Units.gridUnit * 5);
                dialog.height = Qt.binding(() => QQC2.ApplicationWindow.window.height - Units.gridUnit * 5);
                dialog.x = Units.gridUnit * 2.5;
                dialog.y = Units.gridUnit * 2.5;
311

312
313
314
                if (typeof page === "string") {
                    // url => load component and then load item from component
                    const component = Qt.createComponent(Qt.resolvedUrl(page));
315
316
                    item = component.createObject(dialog.contentItem, properties);
                    dialog.contentItem.contentItem = item
317
                } else if (page instanceof Component) {
318
319
                    item = page.createObject(dialog.contentItem, properties);
                    dialog.contentItem.contentItem = item
320
321
322
323
                } else if (page instanceof Item) {
                    item = page;
                    page.parent = dialog.contentItem;
                }
324
                dialog.title = Qt.binding(() => item.title);
325
326
327
328
329

                // Pushing a PageRow is supported but without PageRow toolbar
                if (item.globalToolBar && item.globalToolBar.style) {
                    item.globalToolBar.style = ApplicationHeaderStyle.None
                }
330
331
332
333
334
335
336
337
338
339
340
341
342
                Object.defineProperty(item, 'closeDialog', {
                    value: function() {
                        dialog.close();
                    }
                });
                dialog.open();
            } else {
                // open as a layer
                item = layers.push(page, properties);
                Object.defineProperty(item, 'closeDialog', {
                    value: function() {
                        layers.pop();
                    }
343
                });
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
            }
        } else {
            // open as a new window
            if (!windowProperties.modality) {
                windowProperties.modality = Qt.WindowModal;
            }
            if (!windowProperties.height) {
                windowProperties.height = Units.gridUnit * 30;
            }
            if (!windowProperties.width) {
                windowProperties.width = Units.gridUnit * 50;
            }
            if (!windowProperties.minimumWidth) {
                windowProperties.minimumWidth = Units.gridUnit * 20;
            }
            if (!windowProperties.minimumHeight) {
                windowProperties.minimumHeight = Units.gridUnit * 15;
            }
            if (!windowProperties.flags) {
363
                windowProperties.flags = Qt.Dialog | Qt.CustomizeWindowHint | Qt.WindowTitleHint | Qt.WindowCloseButtonHint;
364
365
366
367
368
369
370
371
372
373
            }
            const windowComponent = Qt.createComponent(Qt.resolvedUrl("./ApplicationWindow.qml"));
            const window = windowComponent.createObject(root, windowProperties);
            item = window.pageStack.push(page, properties);
            Object.defineProperty(item, 'closeDialog', {
                value: function() {
                    window.close();
                }
            });
        }
374
        item.Keys.escapePressed.connect(function() { item.closeDialog() });
375
376
377
        return item;
    }

378
379
380
381
    /**
     * Inserts a new page or a list of new at an arbitrary position
     * The page can be defined as a component, item or string.
     * If an item is used then the page will get re-parented.
382
     * If a string is used then it is interpreted as a url that is used to load a page
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
     * component.
     * The current Page will not be changed, currentIndex will be adjusted
     * accordingly if needed to keep the same current page.
     *
     * @param page The page can also be given as an array of pages.
     *     In this case all those pages will
     *     be pushed onto the stack. The items in the stack can be components, items or
     *     strings just like for single pages.
     *     Additionally an object can be used, which specifies a page and an optional
     *     properties property.
     *     This can be used to push multiple pages while still giving each of
     *     them properties.
     *     When an array is used the transition animation will only be to the last page.
     *
     * @param properties The properties argument is optional and allows defining a
     * map of properties to set on the page. If page is actually an array of pages, properties should also be an array of key/value maps
     * @return The new created page (or the last one if it was an array)
     * @since 2.7
     */
    function insertPage(position, page, properties) {
Marco Martin's avatar
Marco Martin committed
403
404
405
        if (!page) {
            return null
        }
Marco Martin's avatar
Marco Martin committed
406
        //don't push again things already there
407
        if (page.createObject === undefined && typeof page != "string" && columnView.containsItem(page)) {
Marco Martin's avatar
Marco Martin committed
408
            print("The item " + page + " is already in the PageRow");
409
            return null;
Marco Martin's avatar
Marco Martin committed
410
411
        }

412
        position = Math.max(0, Math.min(depth, position));
Marco Martin's avatar
Marco Martin committed
413

414
        columnView.pop(columnView.currentItem);
Marco Martin's avatar
Marco Martin committed
415

416
417
        // figure out if more than one page is being pushed
        var pages;
418
        var propsArray = [];
419
420
421
        if (page instanceof Array) {
            pages = page;
            page = pages.pop();
422
            //compatibility with pre-qqc1 api, can probably be removed
423
424
425
426
427
            if (page.createObject === undefined && page.parent === undefined && typeof page != "string") {
                properties = properties || page.properties;
                page = page.page;
            }
        }
428
429
430
431
432
433
        if (properties instanceof Array) {
            propsArray = properties;
            properties = propsArray.pop();
        } else {
            propsArray = [properties];
        }
434
435
436
437
438
439

        // push any extra defined pages onto the stack
        if (pages) {
            var i;
            for (i = 0; i < pages.length; i++) {
                var tPage = pages[i];
440
441
                var tProps = propsArray[i];
                //compatibility with pre-qqc1 api, can probably be removed
442
                if (tPage.createObject === undefined && tPage.parent === undefined && typeof tPage != "string") {
443
                    if (columnView.containsItem(tPage)) {
Marco Martin's avatar
Marco Martin committed
444
445
446
                        print("The item " + page + " is already in the PageRow");
                        continue;
                    }
447
448
449
450
                    tProps = tPage.properties;
                    tPage = tPage.page;
                }

451
452
                var pageItem = pagesLogic.initAndInsertPage(position, tPage, tProps);
                ++position;
453
454
455
456
            }
        }

        // initialize the page
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
        var pageItem = pagesLogic.initAndInsertPage(position, page, properties);

        pagePushed(pageItem);

        return pageItem;
    }

    /**
     * Move the page at position fromPos to the new position toPos
     * If needed, currentIndex will be adjusted
     * in order to keep the same current page.
     * @since 2.7
     */
    function movePage(fromPos, toPos) {
        columnView.moveItem(fromPos, toPos);
    }

    /**
475
     * Remove the given page
476
477
478
479
480
481
482
483
484
485
     * @param page The page can be given both as integer position or by reference
     * @return The page that has just been removed
     * @since 2.7
     */
    function removePage(page) {
        if (depth == 0) {
            return null;
        }

        return columnView.removeItem(page);
486
487
    }

488
489
490
491
492
493
494
495
    /**
     * Pops a page off the stack.
     * @param page If page is specified then the stack is unwound to that page,
     * to unwind to the first page specify
     * page as null.
     * @return The page instance that was popped off the stack.
     */
    function pop(page) {
496
        if (depth == 0) {
497
            return null;
498
499
        }

500
        return columnView.pop(page);
Marco Martin's avatar
Marco Martin committed
501
502
    }

503
    /**
504
505
506
507
508
509
510
511
512
     * Emitted when a page has been inserted anywhere
     * @param position where the page has been inserted
     * @param page the new page
     * @since 2.7
     */
    signal pageInserted(int position, Item page)

    /**
     * Emitted when a page has been pushed to the bottom
513
514
515
516
517
518
519
520
521
522
523
524
525
     * @param page the new page
     * @since 2.5
     */
    signal pagePushed(Item page)

    /**
     * Emitted when a page has been removed from the row.
     * @param page the page that has been removed: at this point it's still valid,
     *           but may be auto deleted soon.
     * @since 2.5
     */
    signal pageRemoved(Item page)

526
527
528
529
530
531
    /**
     * Replaces a page on the stack.
     * @param page The page can also be given as an array of pages.
     *     In this case all those pages will
     *     be pushed onto the stack. The items in the stack can be components, items or
     *     strings just like for single pages.
532
     *     the current page and all pagest after it in the stack will be removed.
533
534
535
536
537
538
539
540
541
542
     *     Additionally an object can be used, which specifies a page and an optional
     *     properties property.
     *     This can be used to push multiple pages while still giving each of
     *     them properties.
     *     When an array is used the transition animation will only be to the last page.
     * @param properties The properties argument is optional and allows defining a
     * map of properties to set on the page.
     * @see push() for details.
     */
    function replace(page, properties) {
543
544
545
546
547
548
549
        if (!page) {
            return null;
        }

        // Remove all pages on top of the one being replaced.
        if (currentIndex >= 0) {
            columnView.pop(columnView.contentChildren[currentIndex]);
550
        } else {
551
            console.warn("There's no page to replace");
552
        }
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569

        // Figure out if more than one page is being pushed.
        var pages;
        var propsArray = [];
        if (page instanceof Array) {
            pages = page;
            page = pages.shift();
        }
        if (properties instanceof Array) {
            propsArray = properties;
            properties = propsArray.shift();
        } else {
            propsArray = [properties];
        }

        // Replace topmost page.
        var pageItem = pagesLogic.initPage(page, properties);
570
571
572
573
574
575
        if (depth > 0)
            columnView.replaceItem(depth - 1, pageItem);
        else {
            console.log("Calling replace on empty PageRow", pageItem)
            columnView.addItem(pageItem)
        }
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
        pagePushed(pageItem);

        // Push any extra defined pages onto the stack.
        if (pages) {
            var i;
            for (i = 0; i < pages.length; i++) {
                var tPage = pages[i];
                var tProps = propsArray[i];

                var pageItem = pagesLogic.initPage(tPage, tProps);
                columnView.addItem(pageItem);
                pagePushed(pageItem);
            }
        }

        currentIndex = depth - 1;
        return pageItem;
593
594
    }

595
596
597
598
599
    /**
     * Clears the page stack.
     * Destroy (or reparent) all the pages contained.
     */
    function clear() {
600
        return columnView.clear();
601
602
    }

603
604
605
606
    /**
     * @return the page at idx
     * @param idx the depth of the page we want
     */
Aleix Pol Gonzalez's avatar
Aleix Pol Gonzalez committed
607
    function get(idx) {
608
        return columnView.contentChildren[idx];
Aleix Pol Gonzalez's avatar
Aleix Pol Gonzalez committed
609
610
    }

611
    /**
Carl Schwan's avatar
Carl Schwan committed
612
     * Go back to the previous index and scroll to the left to show one more column.
613
614
615
616
617
618
619
     */
    function flickBack() {
        if (depth > 1) {
            currentIndex = Math.max(0, currentIndex - 1);
        }
    }

620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
    /**
     * Acts as if you had pressed the "back" button on Android or did Alt-Left on desktop,
     * "going back" in the layers and page row. Results in a layer being popped if available,
     * or the currentIndex being set to currentIndex-1 if not available.
     *
     * @param event Optional, an event that will be accepted if a page is successfully
     * "backed" on
     */
    function goBack(event = null) {
        const backEvent = {accepted: false}

        if (layersStack.depth >= 1) {
            try { // app code might be screwy, but we still want to continue functioning if it throws an exception
                layersStack.currentItem.backRequested(backEvent)
            } catch (error) {}

            if (!backEvent.accepted) {
                if (layersStack.depth > 1) {
                    layersStack.pop()
                    if (event) event.accepted = true
                    return
                }
            }
        }

        if (root.currentIndex >= 1) {
            try { // app code might be screwy, but we still want to continue functioning if it throws an exception
                root.currentItem.backRequested(backEvent)
            } catch (error) {}

            if (!backEvent.accepted) {
                if (root.depth > 1) {
                    root.currentIndex = Math.max(0, root.currentIndex - 1)
                    if (event) event.accepted = true
                }
            }
        }
    }

    /**
     * Acts as if you had pressed the "forward" shortcut on desktop,
     * "going forward" in the page row. Results in the active page
     * becoming the next page in the row from the current active page,
     * i.e. currentIndex + 1.
     */
    function goForward() {
        root.currentIndex = Math.min(root.depth-1, root.currentIndex + 1)
    }

    Shortcut {
670
        sequences: [ StandardKey.Back ]
671
672
673
        onActivated: root.goBack()
    }
    Shortcut {
674
        sequences: [ StandardKey.Forward ]
675
676
677
678
679
680
681
682
683
        onActivated: root.goForward()
    }

    Keys.onReleased: {
        if (event.key == Qt.Key_Back) {
            this.goBack(event)
        }
    }

Marco Martin's avatar
Marco Martin committed
684
    /**
Carl Schwan's avatar
Carl Schwan committed
685
     * @var QtQuick.Controls.StackView layers
Marco Martin's avatar
Marco Martin committed
686
687
688
689
690
691
     * Access to the modal layers.
     * Sometimes an application needs a modal page that always covers all the rows.
     * For instance the full screen image of an image viewer or a settings page.
     * @since 5.38
     */
    property alias layers: layersStack
692
//END FUNCTIONS
693

694
695
    onInitialPageChanged: {
        if (initialPage) {
696
            clear();
697
698
699
            push(initialPage, null)
        }
    }
700
701
702
703
704
705
706
707
708
709
710
/*
    onActiveFocusChanged:  {
        if (activeFocus) {
            layersStack.currentItem.forceActiveFocus()
            if (columnView.activeFocus) {
                print("SSS"+columnView.currentItem)
                columnView.currentItem.forceActiveFocus();
            }
        }
    }
*/
711
712
    Keys.forwardTo: [currentItem]

713
    GlobalToolBar.PageRowGlobalToolBarStyleGroup {
714
715
716
717
718
719
720
721
        id: globalToolBar
        readonly property int leftReservedSpace: globalToolBarUI.item ? globalToolBarUI.item.leftReservedSpace : 0
        readonly property int rightReservedSpace: globalToolBarUI.item ? globalToolBarUI.item.rightReservedSpace : 0
        readonly property int height: globalToolBarUI.height
        readonly property Item leftHandleAnchor: globalToolBarUI.item ? globalToolBarUI.item.leftHandleAnchor : null
        readonly property Item rightHandleAnchor: globalToolBarUI.item ? globalToolBarUI.item.rightHandleAnchor : null
    }

Marco Martin's avatar
Marco Martin committed
722
723
724
    QQC2.StackView {
        id: layersStack
        z: 99
725
726
727
        anchors {
            fill: parent
        }
728
        //placeholder as initial item
729
        initialItem: columnViewLayout
730

Marco Martin's avatar
Marco Martin committed
731
732
        function clear () {
            //don't let it kill the main page row
733
            var d = layersStack.depth;
Marco Martin's avatar
Marco Martin committed
734
735
            for (var i = 1; i < d; ++i) {
                pop();
736
            }
Marco Martin's avatar
Marco Martin committed
737
        }
Marco Martin's avatar
Marco Martin committed
738
739

        popEnter: Transition {
Marco Martin's avatar
Marco Martin committed
740
741
742
743
744
            OpacityAnimator {
                from: 0
                to: 1
                duration: Units.longDuration
                easing.type: Easing.InOutCubic
Marco Martin's avatar
Marco Martin committed
745
746
747
            }
        }
        popExit: Transition {
Marco Martin's avatar
Marco Martin committed
748
749
750
751
752
753
754
755
756
757
758
            ParallelAnimation {
                OpacityAnimator {
                    from: 1
                    to: 0
                    duration: Units.longDuration
                    easing.type: Easing.InOutCubic
                }
                YAnimator {
                    from: 0
                    to: height/2
                    duration: Units.longDuration
Marco Martin's avatar
Marco Martin committed
759
                    easing.type: Easing.InCubic
Marco Martin's avatar
Marco Martin committed
760
                }
Marco Martin's avatar
Marco Martin committed
761
762
763
764
            }
        }

        pushEnter: Transition {
Marco Martin's avatar
Marco Martin committed
765
            ParallelAnimation {
Marco Martin's avatar
Marco Martin committed
766
767
768
                //NOTE: It's a PropertyAnimation instead of an Animator because with an animator the item will be visible for an instant before starting to fade
                PropertyAnimation {
                    property: "opacity"
Marco Martin's avatar
Marco Martin committed
769
770
771
772
773
774
775
776
777
                    from: 0
                    to: 1
                    duration: Units.longDuration
                    easing.type: Easing.InOutCubic
                }
                YAnimator {
                    from: height/2
                    to: 0
                    duration: Units.longDuration
778
                    easing.type: Easing.OutCubic
Marco Martin's avatar
Marco Martin committed
779
                }
Marco Martin's avatar
Marco Martin committed
780
781
782
            }
        }

Marco Martin's avatar
Marco Martin committed
783

Marco Martin's avatar
Marco Martin committed
784
        pushExit: Transition {
Marco Martin's avatar
Marco Martin committed
785
786
787
788
789
            OpacityAnimator {
                from: 1
                to: 0
                duration: Units.longDuration
                easing.type: Easing.InOutCubic
Marco Martin's avatar
Marco Martin committed
790
791
792
793
            }
        }

        replaceEnter: Transition {
Marco Martin's avatar
Marco Martin committed
794
795
796
797
798
799
800
801
802
803
804
            ParallelAnimation {
                OpacityAnimator {
                    from: 0
                    to: 1
                    duration: Units.longDuration
                    easing.type: Easing.InOutCubic
                }
                YAnimator {
                    from: height/2
                    to: 0
                    duration: Units.longDuration
Marco Martin's avatar
Marco Martin committed
805
                    easing.type: Easing.OutCubic
Marco Martin's avatar
Marco Martin committed
806
                }
Marco Martin's avatar
Marco Martin committed
807
808
809
810
            }
        }

        replaceExit: Transition {
Marco Martin's avatar
Marco Martin committed
811
812
813
814
815
            ParallelAnimation {
                OpacityAnimator {
                    from: 1
                    to: 0
                    duration: Units.longDuration
Marco Martin's avatar
Marco Martin committed
816
                    easing.type: Easing.InCubic
Marco Martin's avatar
Marco Martin committed
817
818
819
820
821
822
823
                }
                YAnimator {
                    from: 0
                    to: -height/2
                    duration: Units.longDuration
                    easing.type: Easing.InOutCubic
                }
Marco Martin's avatar
Marco Martin committed
824
825
            }
        }
Marco Martin's avatar
Marco Martin committed
826
    }
Marco Martin's avatar
Marco Martin committed
827

828
829
830
831
832
833
834
835
    Loader {
        id: globalToolBarUI
        anchors {
            left: parent.left
            top: parent.top
            right: parent.right
        }
        z: 100
Felipe Kinoshita's avatar
Felipe Kinoshita committed
836
        property T.Control pageRow: root
837
838
        active: (!firstVisibleItem || firstVisibleItem.globalToolBarStyle != ApplicationHeaderStyle.None) && 
                (globalToolBar.actualStyle != ApplicationHeaderStyle.None || (firstVisibleItem && firstVisibleItem.globalToolBarStyle == ApplicationHeaderStyle.ToolBar))
839
840
        visible: active
        height: active ? implicitHeight : 0
841
842
843
        // If load is asynchronous, it will fail to compute the initial implicitHeight
        // https://bugs.kde.org/show_bug.cgi?id=442660
        asynchronous: false
844
        source: Qt.resolvedUrl("private/globaltoolbar/PageRowGlobalToolBarUI.qml");
845
846
    }

847
848
849
850
    QtObject {
        id: pagesLogic
        readonly property var componentCache: new Array()

851
        function getPageComponent(page) {
852
853
854
855
856
857
858
859
860
861
862
863
            var pageComp;

            if (page.createObject) {
                // page defined as component
                pageComp = page;
            } else if (typeof page == "string") {
                // page defined as string (a url)
                pageComp = pagesLogic.componentCache[page];
                if (!pageComp) {
                    pageComp = pagesLogic.componentCache[page] = Qt.createComponent(page);
                }
            }
864
865
866
867
868
869
870

            return pageComp
        }

        function initPage(page, properties) {
            var pageComp = getPageComponent(page, properties);

871
872
873
874
875
876
877
            if (pageComp) {
                // instantiate page from component
                // FIXME: parent directly to columnView or root?
                page = pageComp.createObject(null, properties || {});

                if (pageComp.status === Component.Error) {
                    throw new Error("Error while loading page: " + pageComp.errorString());
878
                }
879
880
881
882
883
            } else {
                // copy properties to the page
                for (var prop in properties) {
                    if (properties.hasOwnProperty(prop)) {
                        page[prop] = properties[prop];
Marco Martin's avatar
Marco Martin committed
884
                    }
Marco Martin's avatar
Marco Martin committed
885
                }
Marco Martin's avatar
Marco Martin committed
886
            }
887
888
            return page;
        }
Marco Martin's avatar
Marco Martin committed
889

890
891
892
        function initAndInsertPage(position, page, properties) {
            page = initPage(page, properties);
            columnView.insertItem(position, page);
893
            return page;
Marco Martin's avatar
Marco Martin committed
894
        }
895
    }
Marco Martin's avatar
Marco Martin committed
896

897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
    RowLayout {
        id: columnViewLayout
        spacing: 1
        readonly property alias columnView: columnView
        QQC2.Control {
            id: sidebarControl
            Layout.fillHeight: true
            visible: contentItem !== null && root.leftDrawer && root.leftDrawer.visible
            leftPadding: root.leftSidebar ? root.leftSidebar.leftPadding : 0
            topPadding: root.leftSidebar ? root.leftSidebar.topPadding : 0
            rightPadding: root.leftSidebar ? root.leftSidebar.rightPadding : 0
            bottomPadding: root.leftSidebar ? root.leftSidebar.bottomPadding : 0
        }
        ColumnView {
            id: columnView
            Layout.fillWidth: true
            Layout.fillHeight: true

            topPadding: globalToolBarUI.item && globalToolBarUI.item.breadcrumbVisible
                        ? globalToolBarUI.height : 0

            // Internal hidden api for Page
            readonly property Item __pageRow: root
            acceptsMouse: Settings.isMobile
            columnResizeMode: root.wideMode ? ColumnView.FixedColumns : ColumnView.SingleColumn
            columnWidth: root.defaultColumnWidth

            onItemInserted: root.pageInserted(position, item);
            onItemRemoved: root.pageRemoved(item);
        }
927
    }
928

929
    Rectangle {
930
        anchors.bottom: parent.bottom
931
932
933
934
935
936
937
938
        height: Units.smallSpacing
        x: (columnView.width - width) * (columnView.contentX / (columnView.contentWidth - columnView.width))
        width: columnView.width * (columnView.width/columnView.contentWidth)
        color: Theme.textColor
        opacity: 0
        onXChanged: {
            opacity = 0.3
            scrollIndicatorTimer.restart();
Marco Martin's avatar
Marco Martin committed
939
        }
940
941
942
943
        Behavior on opacity {
            OpacityAnimator {
                duration: Units.longDuration
                easing.type: Easing.InOutQuad
944
945
            }
        }
946
947
948
949
        Timer {
            id: scrollIndicatorTimer
            interval: Units.longDuration * 4
            onTriggered: parent.opacity = 0;
950
951
952
        }
    }
}