diff --git a/src/controls/Page.qml b/src/controls/Page.qml index 9f7a7bf1..5312cca7 100644 --- a/src/controls/Page.qml +++ b/src/controls/Page.qml @@ -1,347 +1,366 @@ /* * Copyright 2015 Marco Martin * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Library General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.1 import QtQuick.Layouts 1.2 import org.kde.kirigami 2.4 as Kirigami import "private" import QtQuick.Templates 2.0 as T2 /** * Page is a container for all the app pages: everything pushed to the * ApplicationWindow stackView should be a Page instabnce (or a subclass, * such as ScrollablePage) * @see ScrollablePage * @inherit QtQuick.Templates.Page */ T2.Page { id: root /** * leftPadding: int * default contents padding at left */ leftPadding: Kirigami.Units.gridUnit /** * topPadding: int * default contents padding at top */ topPadding: Kirigami.Units.gridUnit /** * rightPadding: int * default contents padding at right */ rightPadding: Kirigami.Units.gridUnit /** * bottomPadding: int * default contents padding at bottom */ bottomPadding: actionButtons.item ? actionButtons.height : Kirigami.Units.gridUnit /** * flickable: Flickable * if the central element of the page is a Flickable * (ListView and Gridview as well) you can set it there. * normally, you wouldn't need to do that, but just use the * ScrollablePage element instead * @see ScrollablePage * Use this if your flickable has some non standard properties, such as not covering the whole Page */ property Flickable flickable /** * actions.contextualActions: list * Defines the contextual actions for the page: * an easy way to assign actions in the right sliding panel * * Example usage: * @code * import org.kde.kirigami 2.4 as Kirigami * * Kirigami.ApplicationWindow { * [...] * contextDrawer: Kirigami.ContextDrawer { * id: contextDrawer * } * [...] * } * @endcode * * @code * import org.kde.kirigami 2.4 as Kirigami * * Kirigami.Page { * [...] * actions.contextualActions: [ * Kirigami.Action { * iconName: "edit" * text: "Action text" * onTriggered: { * // do stuff * } * }, * Kirigami.Action { * iconName: "edit" * text: "Action text" * onTriggered: { * // do stuff * } * } * ] * [...] * } * @endcode */ //TODO: remove property alias contextualActions: actionsGroup.contextualActions /** * actions.main: Action * An optional single action for the action button. * it can be a Kirigami.Action or a QAction * * Example usage: * * @code * import org.kde.kirigami 2.4 as Kirigami * Kirigami.Page { * actions.main: Kirigami.Action { * iconName: "edit" * onTriggered: { * // do stuff * } * } * } * @endcode */ //TODO: remove property alias mainAction: actionsGroup.main /** * actions.left: Action * An optional extra action at the left of the main action button. * it can be a Kirigami.Action or a QAction * * Example usage: * * @code * import org.kde.kirigami 2.4 as Kirigami * Kirigami.Page { * actions.left: Kirigami.Action { * iconName: "edit" * onTriggered: { * // do stuff * } * } * } * @endcode */ //TODO: remove property alias leftAction: actionsGroup.left /** * actions.right: Action * An optional extra action at the right of the main action button. * it can be a Kirigami.Action or a QAction * * Example usage: * * @code * import org.kde.kirigami 2.4 as Kirigami * Kirigami.Page { * actions.right: Kirigami.Action { * iconName: "edit" * onTriggered: { * // do stuff * } * } * } * @endcode */ //TODO: remove property alias rightAction: actionsGroup.right /** * Actions properties are grouped. * * @code * import org.kde.kirigami 2.4 as Kirigami * Kirigami.Page { * actions { * main: Kirigami.Action {...} * left: Kirigami.Action {...} * right: Kirigami.Action {...} * contextualActions: [ * Kirigami.Action {...}, * Kirigami.Action {...} * ] * } * } * @endcode */ readonly property alias actions: actionsGroup /** * isCurrentPage: bool * * Specifies if it's the currently selected page in the window's pages row. * * @since 2.1 */ readonly property bool isCurrentPage: typeof applicationWindow === "undefined" || !globalToolBar.row ? true : (globalToolBar.row.layers.depth > 1 ? globalToolBar.row.layers.currentItem == root : globalToolBar.row.currentItem == root) - PageActionPropertyGroup { - id: actionsGroup - } - /** * overlay: Item * an item which stays on top of every other item in the page, * if you want to make sure some elements are completely in a * layer on top of the whole content, parent items to this one. * It's a "local" version of ApplicationWindow's overlay * @since 2.5 */ readonly property alias overlay: overlayItem /** * emitted When the application requests a Back action * For instance a global "back" shortcut or the Android * Back button has been pressed. * The page can manage the back event by itself, * and if it set event.accepted = true, it will stop the main * application to manage the back event. */ signal backRequested(var event); // Look for sheets and cose them //FIXME: port Sheets to Popup? onBackRequested: { for(var i in root.resources) { var item = root.resources[i]; if (item.hasOwnProperty("close") && item.hasOwnProperty("sheetOpen") && item.sheetOpen) { item.close() event.accepted = true; return; } } } - - //NOTE: This exists just because control instances require it +property Item globalToolBar: globalToolBar + //NOTE: contentItem will be created if not existing (and contentChildren of Page would become its children) This with anchors enforces the geometry we want, where globalToolBar is a super-header, on top of header contentItem: Item { + anchors { + top: root.header + ? root.header.bottom + : (globalToolBar.visible ? globalToolBar.bottom : parent.top) + topMargin: root.topPadding + root.spacing + bottom: root.footer ? root.footer.top : parent.bottom + bottomMargin: root.bottomPadding + root.spacing + } } + //FIXME: on material the shadow would bleed over clip: root.header != null; + onHeaderChanged: { + if (header) { + header.anchors.top = Qt.binding(function() {return globalToolBar.visible ? globalToolBar.bottom : root.top}); + } + } + Component.onCompleted: { + headerChanged(); parentChanged(root.parent); } onParentChanged: { if (!parent) { return; } globalToolBar.stack = null; globalToolBar.row = null; if (root.parent.hasOwnProperty("__pageRow")) { globalToolBar.row = root.parent.__pageRow; } if (root.T2.StackView.view) { globalToolBar.stack = root.T2.StackView.view; globalToolBar.row = root.T2.StackView.view.parent; } if (globalToolBar.row) { globalToolBar.row.globalToolBar.actualStyleChanged.connect(globalToolBar.syncSource); globalToolBar.syncSource(); } } - Item { - id: overlayItem - parent: root - z: 9997 - anchors.fill: parent - } + //in data in order for them to not be considered for contentItem, contentChildren, contentData + data: [ + PageActionPropertyGroup { + id: actionsGroup + }, - //global top toolbar if we are in a PageRow (in the row or as a layer) - Loader { - id: globalToolBar - z: 9999 - parent: active && root.clip ? root.parent : root - height: item ? item.implicitHeight : 0 - anchors { - left: parent ? root.left : undefined - right: parent ? root.right : undefined - bottom: parent ? root.top : undefined - } - property Kirigami.PageRow row - property T2.StackView stack + Item { + id: overlayItem + parent: root + z: 9997 + anchors.fill: parent + }, + + //global top toolbar if we are in a PageRow (in the row or as a layer) + Loader { + id: globalToolBar + z: 9999 + height: item ? item.implicitHeight : 0 + anchors { + left: parent.left + right: parent.right + top: parent.top + } + property Kirigami.PageRow row + property T2.StackView stack - active: row && (stack != null || row.globalToolBar.actualStyle == Kirigami.ApplicationHeaderStyle.ToolBar || globalToolBar.row.globalToolBar.actualStyle == Kirigami.ApplicationHeaderStyle.Titles) + visible: active + active: row && (stack != null || row.globalToolBar.actualStyle == Kirigami.ApplicationHeaderStyle.ToolBar || globalToolBar.row.globalToolBar.actualStyle == Kirigami.ApplicationHeaderStyle.Titles) - function syncSource() { - if (row && active) { - setSource(Qt.resolvedUrl(row.globalToolBar.actualStyle == Kirigami.ApplicationHeaderStyle.ToolBar ? "private/globaltoolbar/ToolBarPageHeader.qml" : "private/globaltoolbar/TitlesPageHeader.qml"), - //TODO: find container reliably, remove assumption - {"pageRow": Qt.binding(function() {return row}), - "page": root, - "current": Qt.binding(function() {return stack || !root.parent ? true : row.currentIndex == root.parent.level})}); + function syncSource() { + if (row && active) { + setSource(Qt.resolvedUrl(row.globalToolBar.actualStyle == Kirigami.ApplicationHeaderStyle.ToolBar ? "private/globaltoolbar/ToolBarPageHeader.qml" : "private/globaltoolbar/TitlesPageHeader.qml"), + //TODO: find container reliably, remove assumption + {"pageRow": Qt.binding(function() {return row}), + "page": root, + "current": Qt.binding(function() {return stack || !root.parent ? true : row.currentIndex == root.parent.level})}); + } } - } - Separator { - z: 999 - anchors.verticalCenter: globalToolBar.verticalCenter - height: globalToolBar.height * 0.6 - visible: globalToolBar.row && root.parent && globalToolBar.row.contentItem.contentX < root.parent.x - globalToolBar.row.globalToolBar.leftReservedSpace - Kirigami.Theme.textColor: globalToolBar.item ? globalToolBar.item.Kirigami.Theme.textColor : undefined - } - } + Separator { + z: 999 + anchors.verticalCenter: globalToolBar.verticalCenter + height: globalToolBar.height * 0.6 + visible: globalToolBar.row && root.parent && globalToolBar.row.contentItem.contentX < root.parent.x - globalToolBar.row.globalToolBar.leftReservedSpace + Kirigami.Theme.textColor: globalToolBar.item ? globalToolBar.item.Kirigami.Theme.textColor : undefined + } + }, - //bottom action buttons - Loader { - id: actionButtons - z: 9999 - parent: root - anchors { - left: parent.left - right: parent.right - bottom: parent.bottom + //bottom action buttons + Loader { + id: actionButtons + z: 9999 + parent: root + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + //It should be T2.Page, Qt 5.7 doesn't like it + property Item page: root + height: item ? item.height : 0 + active: typeof applicationWindow !== "undefined" && (!globalToolBar.row || globalToolBar.row.globalToolBar.actualStyle != Kirigami.ApplicationHeaderStyle.ToolBar) && + //Legacy + (typeof applicationWindow === "undefined" || + (!applicationWindow().header || applicationWindow().header.toString().indexOf("ToolBarApplicationHeader") === -1) && + (!applicationWindow().footer || applicationWindow().footer.toString().indexOf("ToolBarApplicationHeader") === -1)) + source: Qt.resolvedUrl("./private/ActionButton.qml") } - //It should be T2.Page, Qt 5.7 doesn't like it - property Item page: root - height: item ? item.height : 0 - active: typeof applicationWindow !== "undefined" && (!globalToolBar.row || globalToolBar.row.globalToolBar.actualStyle != Kirigami.ApplicationHeaderStyle.ToolBar) && - //Legacy - (typeof applicationWindow === "undefined" || - (!applicationWindow().header || applicationWindow().header.toString().indexOf("ToolBarApplicationHeader") === -1) && - (!applicationWindow().footer || applicationWindow().footer.toString().indexOf("ToolBarApplicationHeader") === -1)) - source: Qt.resolvedUrl("./private/ActionButton.qml") - } + ] Layout.fillWidth: true } diff --git a/src/controls/PageRow.qml b/src/controls/PageRow.qml index 17e3421b..6523d248 100644 --- a/src/controls/PageRow.qml +++ b/src/controls/PageRow.qml @@ -1,783 +1,779 @@ /* * Copyright 2016 Marco Martin * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Library General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.5 import QtQuick.Layouts 1.2 import QtQml.Models 2.2 import QtQuick.Templates 2.0 as T import QtQuick.Controls 2.0 as QQC2 import org.kde.kirigami 2.4 import "private/globaltoolbar" as GlobalToolBar import "templates" as KT /** * 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. * A PageRowcan show a single page or a multiple set of columns, depending * 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. * @inherit QtQuick.Templates.Control */ T.Control { id: root //BEGIN PROPERTIES /** * This property holds the number of items currently pushed onto the view */ readonly property int depth: popScrollAnim.running && popScrollAnim.pendingDepth > -1 ? popScrollAnim.pendingDepth : pagesLogic.count /** * The last Page in the Row */ readonly property Item lastItem: pagesLogic.count ? pagesLogic.get(pagesLogic.count - 1).page : null /** * The currently visible Item */ readonly property Item currentItem: mainView.currentItem ? mainView.currentItem.page : null /** * the index of the currently visible Item */ property alias currentIndex: mainView.currentIndex /** * The initial item when this PageRow is created */ property variant initialPage /** * The main flickable of this Row */ contentItem: mainView /** * The default width for a column * default is wide enough for 30 grid units. * Pages can override it with their Layout.fillWidth, * implicitWidth Layout.minimumWidth etc. */ property int defaultColumnWidth: Units.gridUnit * 20 /** * interactive: bool * 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 */ property alias interactive: mainView.interactive /** * wideMode: bool * If true, the PageRow is wide enough that willshow more than one column at once * @since 5.37 */ readonly property bool wideMode: root.width >= root.defaultColumnWidth*2 && pagesLogic.count >= 2 /** * separatorVisible: bool * True if the separator between pages should be visible * default: true * @since 5.38 */ property bool separatorVisible: true /** * 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: * * 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 * * * actualStyle: this will represent the actual style of the toolbar: it can be different from style in the case style is Auto * * showNavigationButtons: if true, forward and backward navigation buttons will be shown on the left of the toolbar * * minimumHeight: (int) minimum height of the header, which will be resized when scrolling, only in Mobile mode (default: preferredHeight, sliding but no scaling) property int preferredHeight: (int) the height the toolbar will usually have property int 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) property int rightReservedSpace: (int, readonly) how many pixels are reserved at the right of the page toolbar (drawer handle) * @since 5.48 */ readonly property alias globalToolBar: globalToolBar //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. * If a string is used then it is interpreted as a url that is used to load a page * component. * * @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. * @return The new created page */ function push(page, properties) { //don't push again things already there if (page.createObject === undefined && typeof page != "string" && pagesLogic.containsPage(page)) { print("The item " + page + " is already in the PageRow"); return; } if (popScrollAnim.running) { popScrollAnim.running = false; popScrollAnim.popPageCleanup(popScrollAnim.pendingPage); } popScrollAnim.popPageCleanup(currentItem); // figure out if more than one page is being pushed var pages; if (page instanceof Array) { pages = page; page = pages.pop(); if (page.createObject === undefined && page.parent === undefined && typeof page != "string") { properties = properties || page.properties; page = page.page; } } // 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; if (tPage.createObject === undefined && tPage.parent === undefined && typeof tPage != "string") { if (pagesLogic.containsPage(tPage)) { print("The item " + page + " is already in the PageRow"); continue; } tProps = tPage.properties; tPage = tPage.page; } var container = pagesLogic.initPage(tPage, tProps); pagesLogic.append(container); } } // initialize the page var container = pagesLogic.initPage(page, properties); pagesLogic.append(container); container.visible = container.page.visible = true; mainView.currentIndex = container.level; pagePushed(container.page); return container.page } /** * 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) { if (depth == 0) { return; } //if a pop was animating, stop it if (popScrollAnim.running) { popScrollAnim.running = false; popScrollAnim.popPageCleanup(popScrollAnim.pendingPage); //if a push was animating, stop it } else { mainView.positionViewAtIndex(mainView.currentIndex, ListView.Beginning); } popScrollAnim.from = mainView.contentX if ((!page || !page.parent) && pagesLogic.count > 1) { page = pagesLogic.get(pagesLogic.count - 2).page; } popScrollAnim.to = page && page.parent ? page.parent.x : 0; popScrollAnim.pendingPage = page; popScrollAnim.pendingDepth = page && page.parent ? page.parent.level + 1 : 0; popScrollAnim.running = true; } /** * Emitted when a page has been pushed * @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) SequentialAnimation { id: popScrollAnim property real from property real to property var pendingPage property int pendingDepth: -1 function popPageCleanup(page) { if (pagesLogic.count == 0) { return; } if (popScrollAnim.running) { popScrollAnim.running = false; } var oldPage = pagesLogic.get(pagesLogic.count-1).page; if (page !== undefined) { // an unwind target has been specified - pop until we find it while (page != oldPage && pagesLogic.count > 1) { pagesLogic.removePage(oldPage.parent.level); oldPage = pagesLogic.get(pagesLogic.count-1).page; } } else { pagesLogic.removePage(pagesLogic.count-1); } } NumberAnimation { target: mainView properties: "contentX" duration: Units.shortDuration from: popScrollAnim.from to: popScrollAnim.to } ScriptAction { script: { //snap mainView.flick(100, 0) popScrollAnim.popPageCleanup(popScrollAnim.pendingPage); } } } /** * 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. * 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) { if (currentIndex>=1) popScrollAnim.popPageCleanup(pagesLogic.get(currentIndex-1).page); else if (currentIndex==0) popScrollAnim.popPageCleanup(); else console.warn("There's no page to replace"); return push(page, properties); } /** * Clears the page stack. * Destroy (or reparent) all the pages contained. */ function clear() { return pagesLogic.clearPages(); } /** * @return the page at idx * @param idx the depth of the page we want */ function get(idx) { return pagesLogic.get(idx).page; } /** * go back to the previous index and scroll to the left to show one more column */ function flickBack() { if (depth > 1) { currentIndex = Math.max(0, currentIndex - 1); } if (LayoutMirroring.enabled) { if (!mainView.atEnd) { mainViewScrollAnim.from = mainView.contentX mainViewScrollAnim.to = Math.min(mainView.contentWidth - mainView.width, mainView.contentX + defaultColumnWidth) mainViewScrollAnim.running = true; } } else { if (mainView.contentX - mainView.originX > 0) { mainViewScrollAnim.from = mainView.contentX mainViewScrollAnim.to = Math.max(mainView.originX, mainView.contentX - defaultColumnWidth) mainViewScrollAnim.running = true; } } } /** * layers: QtQuick.Controls.PageStack * 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 //END FUNCTIONS onInitialPageChanged: { clear(); if (initialPage) { push(initialPage, null) } } Keys.forwardTo: [currentItem] SequentialAnimation { id: mainViewScrollAnim property real from property real to NumberAnimation { target: mainView properties: "contentX" duration: Units.longDuration from: mainViewScrollAnim.from to: mainViewScrollAnim.to } ScriptAction { script: mainView.flick(100, 0) } } GlobalToolBar.PageRowGlobalToolBarStyleGroup { 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 } QQC2.StackView { id: layersStack z: 99 - visible: depth > 1 + visible: depth > 1 || busy anchors { fill: parent - topMargin: globalToolBarUI.visible ? globalToolBarUI.height: 0 - - Behavior on topMargin { - PropertyAnimation { - duration: Units.longDuration - easing.type: Easing.InOutCubic - } - } } //placeholder as initial item initialItem: Item {} function clear () { //don't let it kill the main page row var d = root.depth; for (var i = 1; i < d; ++i) { pop(); } } popEnter: Transition { OpacityAnimator { from: 0 to: 1 duration: Units.longDuration easing.type: Easing.InOutCubic } } popExit: Transition { ParallelAnimation { OpacityAnimator { from: 1 to: 0 duration: Units.longDuration easing.type: Easing.InOutCubic } YAnimator { from: 0 to: height/2 duration: Units.longDuration easing.type: Easing.InOutCubic } } } pushEnter: Transition { ParallelAnimation { //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" from: 0 to: 1 duration: Units.longDuration easing.type: Easing.InOutCubic } YAnimator { from: height/2 to: 0 duration: Units.longDuration easing.type: Easing.InOutCubic } } } pushExit: Transition { OpacityAnimator { from: 1 to: 0 duration: Units.longDuration easing.type: Easing.InOutCubic } } replaceEnter: Transition { ParallelAnimation { OpacityAnimator { from: 0 to: 1 duration: Units.longDuration easing.type: Easing.InOutCubic } YAnimator { from: height/2 to: 0 duration: Units.longDuration easing.type: Easing.InOutCubic } } } replaceExit: Transition { ParallelAnimation { OpacityAnimator { from: 1 to: 0 duration: Units.longDuration easing.type: Easing.InOutCubic } YAnimator { from: 0 to: -height/2 duration: Units.longDuration easing.type: Easing.InOutCubic } } } } Loader { id: globalToolBarUI anchors { left: parent.left top: parent.top right: parent.right } z: 100 active: globalToolBar.actualStyle != ApplicationHeaderStyle.None visible: active height: active ? implicitHeight : 0 source: Qt.resolvedUrl("private/globaltoolbar/PageRowGlobalToolBarUI.qml"); } ListView { id: mainView boundsBehavior: Flickable.StopAtBounds orientation: Qt.Horizontal snapMode: ListView.SnapToItem currentIndex: 0 property int marginForLast: count > 1 ? pagesLogic.get(count-1).page.width - pagesLogic.get(count-1).width : 0 leftMargin: LayoutMirroring.enabled ? marginForLast : 0 rightMargin: LayoutMirroring.enabled ? 0 : marginForLast preferredHighlightBegin: 0 preferredHighlightEnd: 0 highlightMoveDuration: Units.longDuration highlightFollowsCurrentItem: true onMovementEnded: currentIndex = Math.max(0, indexAt(contentX, 0)) onFlickEnded: onMovementEnded(); onCurrentIndexChanged: { if (currentItem) { currentItem.page.forceActiveFocus(); } } opacity: layersStack.depth < 2 Behavior on opacity { OpacityAnimator { duration: Units.longDuration easing.type: Easing.InOutQuad } } model: ObjectModel { id: pagesLogic readonly property var componentCache: new Array() readonly property int roundedDefaultColumnWidth: root.width < root.defaultColumnWidth*2 ? root.width : root.defaultColumnWidth function removePage(id) { if (id < 0 || id >= count) { print("Tried to remove an invalid page index:" + id); return; } var item = pagesLogic.get(id); if (item.owner) { item.page.visible = false; item.page.parent = item.owner; } //FIXME: why reparent ing is necessary? //is destroy just an async deleteLater() that isn't executed immediately or it actually leaks? pagesLogic.remove(id); item.parent = root; root.pageRemoved(item.page); if (item.page.parent==item) { item.page.destroy(1) } item.destroy(); } function clearPages () { popScrollAnim.running = false; popScrollAnim.pendingDepth = -1; while (count > 0) { removePage(count-1); } } function initPage(page, properties) { var container = containerComponent.createObject(mainView, { "level": pagesLogic.count, "page": page }); 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); } } if (pageComp) { + // instantiate page from component + page = pageComp.createObject(container.pageParent, properties || {}); + if (pageComp.status == Component.Error) { throw new Error("Error while loading page: " + pageComp.errorString()); - } else { - // instantiate page from component - page = pageComp.createObject(container.pageParent, properties || {}); - } + } } else { // copy properties to the page for (var prop in properties) { if (properties.hasOwnProperty(prop)) { page[prop] = properties[prop]; } } } + if (pageComp.status == Component.Error) { + print(pageComp.errorString()) + } + container.page = page; if (page.parent == null || page.parent == container.pageParent) { container.owner = null; } // the page has to be reparented if (page.parent != container) { page.parent = container; } return container; } function containsPage(page) { for (var i = 0; i < pagesLogic.count; ++i) { var candidate = pagesLogic.get(i); if (candidate.page == page) { print("The item " + page + " is already in the PageRow"); return; } } } } T.ScrollIndicator.horizontal: T.ScrollIndicator { anchors { left: parent.left right: parent.right bottom: parent.bottom } height: Units.smallSpacing contentItem: Rectangle { height: Units.smallSpacing width: Units.smallSpacing color: Theme.textColor opacity: 0 onXChanged: { opacity = 0.3 scrollIndicatorTimer.restart(); } Behavior on opacity { OpacityAnimator { duration: Units.longDuration easing.type: Easing.InOutQuad } } Timer { id: scrollIndicatorTimer interval: Units.longDuration * 4 onTriggered: parent.opacity = 0; } } } onContentWidthChanged: mainView.positionViewAtIndex(root.currentIndex, ListView.Contain) } Component { id: containerComponent MouseArea { id: container height: mainView.height width: root.width state: page ? (!root.wideMode ? "vertical" : (container.level >= pagesLogic.count - 1 ? "last" : "middle")) : ""; acceptedButtons: Qt.LeftButton | Qt.BackButton | Qt.ForwardButton property int level readonly property int hint: page && page.implicitWidth ? page.implicitWidth : root.defaultColumnWidth readonly property int roundedHint: Math.floor(root.width/hint) > 0 ? root.width/Math.floor(root.width/hint) : root.width property T.Control __pageRow: root property Item footer property Item page onPageChanged: { if (page) { owner = page.parent; page.parent = container; page.anchors.left = container.left; page.anchors.top = container.top; page.anchors.right = container.right; page.anchors.bottom = container.bottom; - page.anchors.topMargin = Qt.binding(function() {return globalToolBarUI.height}); + page.anchors.topMargin = Qt.binding(function() {return globalToolBar.actualStyle == ApplicationHeaderStyle.TabBar || globalToolBar.actualStyle == ApplicationHeaderStyle.Breadcrumb ? globalToolBarUI.height : 0}); } else { pagesLogic.remove(level); } } property Item owner drag.filterChildren: true onClicked: { switch (mouse.button) { case Qt.BackButton: root.flickBack(); break; case Qt.ForwardButton: root.currentIndex = Math.min(root.depth, root.currentIndex + 1); break; default: root.currentIndex = level; break; } } onFocusChanged: { if (focus) { root.currentIndex = level; } } Separator { z: 999 anchors { top: page ? page.top : parent.top bottom: parent.bottom left: parent.left //ensure a sharp angle topMargin: -width } visible: root.separatorVisible && mainView.contentX < container.x } states: [ State { name: "vertical" PropertyChanges { target: container width: root.width } PropertyChanges { target: container.page ? container.page.anchors : null rightMargin: 0 } }, State { name: "last" PropertyChanges { target: container width: pagesLogic.roundedDefaultColumnWidth } PropertyChanges { target: container.page.anchors rightMargin: { return -(root.width - pagesLogic.roundedDefaultColumnWidth*2); } } }, State { name: "middle" PropertyChanges { target: container width: pagesLogic.roundedDefaultColumnWidth } PropertyChanges { target: container.page.anchors rightMargin: 0 } } ] } } } diff --git a/src/controls/ScrollablePage.qml b/src/controls/ScrollablePage.qml index 65dfece1..9ee94d93 100644 --- a/src/controls/ScrollablePage.qml +++ b/src/controls/ScrollablePage.qml @@ -1,184 +1,186 @@ /* * Copyright 2015 Marco Martin * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Library General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.1 import QtQuick.Layouts 1.2 import org.kde.kirigami 2.4 import "private" /** * ScrollablePage is a container for all the app pages: everything pushed to the * ApplicationWindow stackView should be a Page or ScrollablePage instabnce. * This Page subclass is for content that has to be scrolled around, such as * bigger content than the screen that would normally go in a Flickable * or a ListView. * Scrolling and scrolling indicators will be automatically managed * * * @code * ScrollablePage { * id: root * //The rectangle will automatically bescrollable * Rectangle { * width: root.width * height: 99999 * } * } * @endcode * * Another behavior added by this class is a "scroll down to refresh" behavior * It also can give the contents of the flickable to have more top margins in order * to make possible to scroll down the list to reach it with the thumb while using the * phone with a single hand. * * Implementations should handle the refresh themselves as follows * * @code * Kirigami.ScrollablePage { * id: view * supportsRefreshing: true * onRefreshingChanged: { * if (refreshing) { * myModel.refresh(); * } * } * ListView { * //NOTE: MyModel doesn't come from the components, * //it's purely an example on how it can be used together * //some application logic that can update the list model * //and signals when it's done. * model: MyModel { * onRefreshDone: view.refreshing = false; * } * delegate: BasicListItem {} * } * } * [...] * @endcode * */ Page { id: root /** * refreshing: bool * If true the list is asking for refresh and will show a loading spinner. * it will automatically be set to true when the user pulls down enough the list. * This signals the application logic to start its refresh procedure. * The application itself will have to set back this property to false when done. */ property alias refreshing: scrollView.refreshing /** * supportsRefreshing: bool * If true the list supports the "pull down to refresh" behavior. * default is false. */ property alias supportsRefreshing: scrollView.supportsRefreshing /** * flickable: Flickable * The main Flickable item of this page */ property alias flickable: scrollView.flickableItem /** * verticalScrollBarPolicy: Qt.ScrollBarPolicy * The vertical scrollbar policy */ property alias verticalScrollBarPolicy: scrollView.verticalScrollBarPolicy /** * horizontalScrollBarPolicy: Qt.ScrollBarPolicy * The horizontal scrollbar policy */ property alias horizontalScrollBarPolicy: scrollView.horizontalScrollBarPolicy /** * The main content Item of this page. * In the case of a ListView or GridView, both contentItem and flickable * will be a pointer to the ListView (or GridView) * NOTE: can't be contentItem as Page's contentItem is final */ default property QtObject mainItem /** * keyboardNavigationEnabled: bool * If true, and if flickable is an item view, like a ListView or * a GridView, it will be possible to navigate the list current item * to next and previous items with keyboard up/down arrow buttons. * Also, any key event will be forwarded to the current list item. * default is true. */ property bool keyboardNavigationEnabled: true Theme.colorSet: flickable && flickable.hasOwnProperty("model") ? Theme.View : Theme.Window clip: true - - RefreshableScrollView { + contentItem: RefreshableScrollView { id: scrollView //NOTE: here to not expose it to public api property QtObject oldMainItem z: 0 //child of root as it shouldn't have margins - parent: root + //parent: root page: root clip: false topPadding: contentItem == flickableItem ? 0 : root.topPadding leftPadding: root.leftPadding rightPadding: root.rightPadding bottomPadding: contentItem == flickableItem ? 0 : root.bottomPadding anchors { - fill: parent - topMargin: root.header ? root.header.height : 0 - bottomMargin: root.footer ? root.footer.height : 0 + top: root.header + ? root.header.bottom + : (globalToolBar.visible ? globalToolBar.bottom : parent.top) + bottom: root.footer ? root.footer.top : parent.bottom + left: parent.left + right: parent.right } } anchors.topMargin: 0 Keys.forwardTo: root.keyboardNavigationEnabled && root.flickable ? (("currentItem" in root.flickable) && root.flickable.currentItem ? [ root.flickable.currentItem, root.flickable ] : [ root.flickable ]) : [] //HACK to get the mainItem as the last one, all the other eventual items as an overlay //no idea if is the way the user expects onMainItemChanged: { if (mainItem.hasOwnProperty("anchors")) { scrollView.contentItem = mainItem //don't try to reparent drawers } else if (mainItem.hasOwnProperty("dragMargin")) { return; //reparent sheets } else if (mainItem.hasOwnProperty("sheetOpen")) { if (mainItem.parent == root || mainItem.parent == null) { mainItem.parent = root; } root.data.push(mainItem); return; } if (scrollView.oldMainItem && scrollView.oldMainItem.hasOwnProperty("parent") && scrollView.oldMainItem.parent != applicationWindow().overlay) { scrollView.oldMainItem.parent = overlay } scrollView.oldMainItem = mainItem } } diff --git a/src/controls/private/globaltoolbar/AbstractPageHeader.qml b/src/controls/private/globaltoolbar/AbstractPageHeader.qml index 4334267e..3799a5af 100644 --- a/src/controls/private/globaltoolbar/AbstractPageHeader.qml +++ b/src/controls/private/globaltoolbar/AbstractPageHeader.qml @@ -1,45 +1,45 @@ /* * Copyright 2018 Marco Martin * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2 or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Library General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.5 import QtQuick.Controls 2.0 as Controls import QtQuick.Layouts 1.2 import org.kde.kirigami 2.5 AbstractApplicationHeader { id: root anchors.fill: parent property Item container property bool current minimumHeight: pageRow.globalToolBar.minimumHeight maximumHeight: pageRow.globalToolBar.maximumHeight preferredHeight: pageRow.globalToolBar.preferredHeight - implicitHeight: page.y + separatorVisible: pageRow.globalToolBar.separatorVisible leftPadding: Math.min(Qt.application.layoutDirection == Qt.LeftToRight ? Math.max(0, pageRow.ScenePosition.x - page.ScenePosition.x + pageRow.globalToolBar.leftReservedSpace) : Math.max(0, -pageRow.width + pageRow.ScenePosition.x + page.ScenePosition.x + page.width + pageRow.globalToolBar.leftReservedSpace), root.width/2) rightPadding: Qt.application.layoutDirection == Qt.LeftToRight ? Math.min(-pageRow.width - pageRow.ScenePosition.x + page.ScenePosition.x + page.width + pageRow.globalToolBar.rightReservedSpace) : Math.max(0, pageRow.ScenePosition.x - page.ScenePosition.x + pageRow.globalToolBar.rightReservedSpace) } diff --git a/src/controls/templates/AbstractApplicationHeader.qml b/src/controls/templates/AbstractApplicationHeader.qml index 150f39a5..90faaf7c 100644 --- a/src/controls/templates/AbstractApplicationHeader.qml +++ b/src/controls/templates/AbstractApplicationHeader.qml @@ -1,180 +1,185 @@ /* * Copyright 2015 Marco Martin * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2 or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Library General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.5 import QtQuick.Layouts 1.2 import "private" import org.kde.kirigami 2.4 /** * An item that can be used as a title for the application. * Scrolling the main page will make it taller or shorter (trough the point of going away) * It's a behavior similar to the typical mobile web browser addressbar * the minimum, preferred and maximum heights of the item can be controlled with * * minimumHeight: default is 0, i.e. hidden * * preferredHeight: default is Units.gridUnit * 1.6 * * preferredHeight: default is Units.gridUnit * 3 * * To achieve a titlebar that stays completely fixed just set the 3 sizes as the same * @inherit QtQuick.Item */ Item { id: root z: 90 property int minimumHeight: 0 property int preferredHeight: Units.gridUnit * 2 property int maximumHeight: Units.gridUnit * 3 property PageRow pageRow: __appWindow.pageStack property Page page: pageRow.currentItem default property alias contentItem: mainItem.data readonly property int paintedHeight: headerItem.y + headerItem.height - 1 LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft LayoutMirroring.childrenInherit: true property int leftPadding: 0 property int topPadding: 0 property int rightPadding: 0 property int bottomPadding: 0 property bool separatorVisible: true //FIXME: remove property QtObject __appWindow: applicationWindow(); - +onImplicitHeightChanged: print("WWW"+implicitHeight) anchors { left: parent.left right: parent.right } implicitHeight: preferredHeight /** * background: Item * This property holds the background item. * Note: the background will be automatically sized as the whole control */ property Item background onBackgroundChanged: { background.z = -1; background.parent = headerItem; background.anchors.fill = headerItem; } onMinimumHeightChanged: implicitHeight = preferredHeight; onPreferredHeightChanged: implicitHeight = preferredHeight; opacity: height > 0 ? 1 : 0 Behavior on implicitHeight { enabled: root.page && root.page.flickable && !root.page.flickable.moving NumberAnimation { duration: Units.longDuration easing.type: Easing.InOutQuad } } Connections { target: __appWindow onControlsVisibleChanged: root.implicitHeight = __appWindow.controlsVisible ? root.preferredHeight : 0; } Item { id: headerItem property real computedRootHeight: root.preferredHeight anchors { left: parent.left right: parent.right bottom: parent.bottom } height: __appWindow.reachableMode && __appWindow.reachableModeEnabled ? root.maximumHeight : (root.minimumHeight > 0 ? Math.max(root.height, root.minimumHeight) : root.preferredHeight) Connections { id: headerSlideConnection target: root.page ? root.page.flickable : null property int oldContentY + property bool updatingContentY: false onContentYChanged: { - if (!Settings.isMobile || + if (updatingContentY || !Settings.isMobile || !__appWindow.controlsVisible || !root.page || root.page.flickable.atYBeginning || root.page.flickable.atYEnd) { return; //if moves but not dragging, just update oldContentY } else if (!root.page.flickable.dragging) { oldContentY = root.page.flickable.contentY; return; } if (__appWindow.wideScreen || !Settings.isMobile) { root.implicitHeight = root.preferredHeight; } else { - var oldHeight = root.height; + var oldHeight = root.implicitHeight; root.implicitHeight = Math.max(root.minimumHeight, Math.min(root.preferredHeight, - root.height + oldContentY - root.page.flickable.contentY)); - - //if the height is changed, use that to simulate scroll - if (oldHeight != height) { - root.page.flickable.contentY = oldContentY; + root.implicitHeight + oldContentY - root.page.flickable.contentY)); + + //if the implicitHeight is changed, use that to simulate scroll + if (oldHeight != implicitHeight) { + print((root.page.flickable.contentY - oldContentY)+" "+(oldHeight - root.implicitHeight)) + updatingContentY = true; + root.page.flickable.contentY -= (oldHeight - root.implicitHeight); + updatingContentY = false; } else { oldContentY = root.page.flickable.contentY; } } } onMovementEnded: { if (__appWindow.wideScreen || !Settings.isMobile) { return; } if (root.height > root.minimumHeight + (root.preferredHeight - root.minimumHeight)/2 ) { root.implicitHeight = root.preferredHeight; } else { root.implicitHeight = root.minimumHeight; } } } Connections { target: pageRow onCurrentItemChanged: { if (!root.page) { return; } if (root.page.flickable) { headerSlideConnection.oldContentY = root.page.flickable.contentY; } else { headerSlideConnection.oldContentY = 0; } + root.implicitHeight = root.preferredHeight; } } Item { id: mainItem clip: childrenRect.width > width anchors { fill: parent leftMargin: root.leftPadding topMargin: root.topPadding rightMargin: root.rightPadding bottomMargin: root.bottomPadding } } } }