diff --git a/examples/gallerydata/contents/ui/MainPage.qml b/examples/gallerydata/contents/ui/MainPage.qml index 6b091bfe..3b801413 100644 --- a/examples/gallerydata/contents/ui/MainPage.qml +++ b/examples/gallerydata/contents/ui/MainPage.qml @@ -1,148 +1,151 @@ /* * 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.Controls 2.0 as QQC2 import QtQuick.Layouts 1.2 import org.kde.kirigami 2.0 as Kirigami Kirigami.ScrollablePage { id: pageRoot implicitWidth: Kirigami.Units.gridUnit * 20 background: Rectangle { color: Kirigami.Theme.viewBackgroundColor } title: "Gallery" //flickable: mainListView actions { contextualActions: [ Kirigami.Action { text:"Action 1" iconName: "document-decrypt" onTriggered: showPassiveNotification("Action 1 clicked") }, Kirigami.Action { id: shareAction visible: checkableAction.checked text:"Action 2" iconName: "document-share" onTriggered: showPassiveNotification("Action 2 clicked") }, Kirigami.Action { id: checkableAction text:"Checkable" checkable: true iconName: "dashboard-show" onCheckedChanged: showPassiveNotification("Checked: " + checked) } ] } ListView { id: mainListView currentIndex: -1 //currentIndex has focus, openPageIndex is the one actually open now property int openPageIndex: -1 + activeFocusOnTab: true + focus: true model: ListModel { ListElement { text: "Button" component: "Button" } ListElement { text: "CheckBox" component: "CheckBox" } ListElement { text: "Radio Button" component: "RadioButton" } ListElement { text: "Progress Bar" component: "ProgressBar" } ListElement { text: "Slider" component: "Slider" } ListElement { text: "Switch" component: "Switch" } ListElement { text: "Tab Bar" component: "TabBar" } ListElement { text: "Text Field" component: "TextField" } ListElement { text: "Multiple Columns" component: "MultipleColumns" } ListElement { text: "Misc widgets" component: "Misc" } ListElement { text: "List View" component: "ListView" } ListElement { text: "List Headers" component: "ListViewHeaderItems" } ListElement { text: "Non Scrollable Page" component: "NonScrollable" } ListElement { text: "Colors" component: "Colors" } ListElement { text: "Metrics" component: "Metrics" } } delegate: Kirigami.BasicListItem { id: listItem reserveSpaceForIcon: false label: model.text + Accessible.role: Accessible.MenuItem property Item ownPage onClicked: { if (!model.component) { return; } root.pageStack.pop(pageRoot); root.pageStack.push(Qt.resolvedUrl("gallery/" + model.component + "Gallery.qml")); mainListView.openPageIndex = index; } checked: mainListView.openPageIndex == index highlighted: focus && ListView.isCurrentItem } } } diff --git a/src/controls/BasicListItem.qml b/src/controls/BasicListItem.qml index 424c9661..15435e31 100644 --- a/src/controls/BasicListItem.qml +++ b/src/controls/BasicListItem.qml @@ -1,76 +1,77 @@ /* * Copyright 2010 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 2.010-1301, USA. */ import QtQuick 2.1 import QtQuick.Layouts 1.2 import org.kde.kirigami 2.0 /** * An item delegate for the primitive ListView component. * * It's intended to make all listviews look coherent. * It has a default icon and a label * */ AbstractListItem { id: listItem /** * string: bool * A single text label the list item will contain */ - property alias label: labelItem.text + property alias label: listItem.text /** * icon: var * A single icon that will be displayed in the list item. The icon can * be either a QIcon, a string name of a fdo compatible name, * or any url accepted by the Image element. */ property alias icon: iconItem.source /** * reserveSpaceForIcon: bool * If true, even when there is no icon the space will be reserved for it * It's useful in layouts where only some entries have an icon, * having the text all horizontally aligned */ property alias reserveSpaceForIcon: iconItem.visible default property alias _basicDefault: layout.children RowLayout { id: layout spacing: Units.smallSpacing*2 Icon { id: iconItem Layout.minimumHeight: Units.iconSizes.smallMedium Layout.maximumHeight: Layout.minimumHeight Layout.minimumWidth: height selected: listItem.checked || listItem.pressed } Label { id: labelItem + text: listItem.text Layout.fillWidth: true color: listItem.checked || listItem.pressed ? listItem.activeTextColor : listItem.textColor elide: Text.ElideRight font: listItem.font } } } diff --git a/src/controls/PageRow.qml b/src/controls/PageRow.qml index ce9b62b0..8a74f936 100644 --- a/src/controls/PageRow.qml +++ b/src/controls/PageRow.qml @@ -1,568 +1,569 @@ /* * 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.0 /** * 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 //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; 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; } 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 (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) } } QQC2.StackView { id: layersStack z: 99 anchors.fill: parent initialItem: mainView function clear () { //don't let it kill the main page row var d = root.depth; for (var i = 1; i < d; ++i) { pop(); } } } ListView { id: mainView boundsBehavior: Flickable.StopAtBounds orientation: Qt.Horizontal snapMode: ListView.SnapToItem currentIndex: root.currentIndex rightMargin: count > 1 ? pagesLogic.get(count-1).page.width - pagesLogic.get(count-1).width : 0 preferredHighlightBegin: 0 preferredHighlightEnd: 0 highlightMoveDuration: Units.longDuration highlightFollowsCurrentItem: true onMovementEnded: currentIndex = indexAt(contentX, 0) onFlickEnded: onMovementEnded(); + onCurrentIndexChanged: currentItem.page.forceActiveFocus() 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; 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) { 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]; } } } 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")) : ""; 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 Item page property Item owner onPageChanged: { if (page) { owner = page.parent; page.parent = container; page.anchors.fill = container; } } drag.filterChildren: true onClicked: root.currentIndex = level; onFocusChanged: { if (focus) { root.currentIndex = level; } } Separator { z: 999 anchors { top: parent.top bottom: parent.bottom left: parent.left } visible: root.separatorVisible && container.level > 0 } 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/templates/AbstractListItem.qml b/src/controls/templates/AbstractListItem.qml index 03b8321d..49dc4d2d 100644 --- a/src/controls/templates/AbstractListItem.qml +++ b/src/controls/templates/AbstractListItem.qml @@ -1,120 +1,120 @@ /* * Copyright 2010 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 2.010-1301, USA. */ import QtQuick 2.1 import QtQuick.Layouts 1.0 import org.kde.kirigami 2.0 import QtQuick.Templates 2.0 as T2 /** * An item delegate for the primitive ListView component. * * It's intended to make all listviews look coherent. * * @inherit QtQuick.Templates.ItemDelegate */ T2.ItemDelegate { id: listItem /** * supportsMouseEvents: bool * Holds if the item emits signals related to mouse interaction. *TODO: remove * The default value is false. */ property bool supportsMouseEvents: hoverEnabled /** * containsMouse: bool * True when the user hover the mouse over the list item * NOTE: on mobile touch devices this will be true only when pressed is also true * TODO: remove? */ property alias containsMouse: listItem.hovered /** * sectionDelegate: bool * If true the item will be a delegate for a section, so will look like a * "title" for the items under it. */ property bool sectionDelegate: false /** * separatorVisible: bool * True if the separator between items is visible * default: true */ property bool separatorVisible: true /** * textColor: color * Color for the text in the item * It is advised to leave the default value (Theme.viewTextColor) * * Note: if custom text elements are inserted in an AbstractListItem, * their color proprty will ahve to be manually binded with this property */ property color textColor: Theme.viewTextColor /** * backgroundColor: color * Color for the background of the item * It is advised to leave the default value (Theme.viewBackgroundColor) */ property color backgroundColor: Theme.viewBackgroundColor /** * activeTextColor: color * Color for the text in the item when pressed or selected * It is advised to leave the default value (Theme.highlightedTextColor) * * Note: if custom text elements are inserted in an AbstractListItem, * their color proprty will ahve to be manually binded with this property */ property color activeTextColor: Theme.highlightedTextColor /** * activeBackgroundColor: color * Color for the background of the item when pressed or selected * It is advised to leave the default value (Theme.highlightColor) */ property color activeBackgroundColor: Theme.highlightColor default property alias _default: listItem.contentItem leftPadding: Units.smallSpacing * 2 topPadding: Units.smallSpacing * 2 rightPadding: Units.smallSpacing * 2 bottomPadding: Units.smallSpacing * 2 implicitWidth: contentItem ? contentItem.implicitWidth : Units.gridUnit * 12 implicitHeight: contentItem.implicitHeight + Units.smallSpacing * 5 width: parent ? parent.width : implicitWidth Layout.fillWidth: true opacity: enabled ? 1 : 0.6 height: visible ? implicitHeight : 0 hoverEnabled: true - Accessible.role: Accessible.ListItem + Accessible.role: Accessible.MenuItem }