From b59cdcd4d3110283e84a62c8c4329d02260b0f58 Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 17:13:13 +0100 Subject: import mobilecomponents MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit adds the .qml and qmldir files for the MobileComponents import. It contains low-level things like units and theme, and mid-level things like Heading, and high-level navigation in the form of an ApplicationWindow and Drawers that hold menues and provide swipe interactions between the pages. These components are a more full version of the "light" plasma components we have been using to make the UI scale well and appear more consistent (coloring, spacing, alignment, etc.). An interesting change is that Units and Theme are now singleton types, which is more efficient. It does mean a few changes to our current API usage: - units becomes Units - theme becomes Theme - 2 properties move out of each (we can't subclass singleton types) This change also means that we're using the vanilla upstream components, so it's very easy to get improvements to these rather young components in, and we don't have to do this work on our own. The mobilecomponents consist of just a bunch of qml files which we can deploy through the qrc file. In the next commits, we will gradually make the current UI use these new elements. Signed-off-by: Sebastian Kügler --- qt-mobile/qml/mobilecomponents/ActionGroup.qml | 27 ++ .../qml/mobilecomponents/ApplicationWindow.qml | 86 ++++ qt-mobile/qml/mobilecomponents/ContextDrawer.qml | 93 ++++ qt-mobile/qml/mobilecomponents/GlobalDrawer.qml | 198 ++++++++ qt-mobile/qml/mobilecomponents/Heading.qml | 76 ++++ qt-mobile/qml/mobilecomponents/Icon.qml | 42 ++ qt-mobile/qml/mobilecomponents/IconGrid.qml | 239 ++++++++++ qt-mobile/qml/mobilecomponents/Label.qml | 59 +++ qt-mobile/qml/mobilecomponents/ListItem.qml | 129 ++++++ .../qml/mobilecomponents/ListItemWithActions.qml | 276 ++++++++++++ qt-mobile/qml/mobilecomponents/OverlayDrawer.qml | 317 +++++++++++++ qt-mobile/qml/mobilecomponents/Page.qml | 71 +++ qt-mobile/qml/mobilecomponents/PageRow.qml | 496 +++++++++++++++++++++ qt-mobile/qml/mobilecomponents/SplitDrawer.qml | 234 ++++++++++ qt-mobile/qml/mobilecomponents/Theme.qml | 62 +++ qt-mobile/qml/mobilecomponents/Units.qml | 101 +++++ qt-mobile/qml/mobilecomponents/icons/go-next.svg | 144 ++++++ .../qml/mobilecomponents/icons/go-previous.svg | 463 +++++++++++++++++++ .../mobilecomponents/private/AbstractDrawer.qml | 47 ++ .../qml/mobilecomponents/private/ActionButton.qml | 142 ++++++ .../mobilecomponents/private/ActionButtonArrow.qml | 56 +++ .../qml/mobilecomponents/private/PageStack.js | 243 ++++++++++ qt-mobile/qml/mobilecomponents/private/qmldir | 3 + qt-mobile/qml/mobilecomponents/qmldir | 19 + 24 files changed, 3623 insertions(+) create mode 100644 qt-mobile/qml/mobilecomponents/ActionGroup.qml create mode 100644 qt-mobile/qml/mobilecomponents/ApplicationWindow.qml create mode 100644 qt-mobile/qml/mobilecomponents/ContextDrawer.qml create mode 100644 qt-mobile/qml/mobilecomponents/GlobalDrawer.qml create mode 100644 qt-mobile/qml/mobilecomponents/Heading.qml create mode 100644 qt-mobile/qml/mobilecomponents/Icon.qml create mode 100644 qt-mobile/qml/mobilecomponents/IconGrid.qml create mode 100644 qt-mobile/qml/mobilecomponents/Label.qml create mode 100644 qt-mobile/qml/mobilecomponents/ListItem.qml create mode 100644 qt-mobile/qml/mobilecomponents/ListItemWithActions.qml create mode 100644 qt-mobile/qml/mobilecomponents/OverlayDrawer.qml create mode 100644 qt-mobile/qml/mobilecomponents/Page.qml create mode 100644 qt-mobile/qml/mobilecomponents/PageRow.qml create mode 100644 qt-mobile/qml/mobilecomponents/SplitDrawer.qml create mode 100644 qt-mobile/qml/mobilecomponents/Theme.qml create mode 100644 qt-mobile/qml/mobilecomponents/Units.qml create mode 100644 qt-mobile/qml/mobilecomponents/icons/go-next.svg create mode 100644 qt-mobile/qml/mobilecomponents/icons/go-previous.svg create mode 100644 qt-mobile/qml/mobilecomponents/private/AbstractDrawer.qml create mode 100644 qt-mobile/qml/mobilecomponents/private/ActionButton.qml create mode 100644 qt-mobile/qml/mobilecomponents/private/ActionButtonArrow.qml create mode 100644 qt-mobile/qml/mobilecomponents/private/PageStack.js create mode 100644 qt-mobile/qml/mobilecomponents/private/qmldir create mode 100644 qt-mobile/qml/mobilecomponents/qmldir (limited to 'qt-mobile') diff --git a/qt-mobile/qml/mobilecomponents/ActionGroup.qml b/qt-mobile/qml/mobilecomponents/ActionGroup.qml new file mode 100644 index 000000000..ba057f58f --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/ActionGroup.qml @@ -0,0 +1,27 @@ +/* + * Copycontext 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 1.3 + +Action { + id: root + default property alias children: root.__children + property list __children +} diff --git a/qt-mobile/qml/mobilecomponents/ApplicationWindow.qml b/qt-mobile/qml/mobilecomponents/ApplicationWindow.qml new file mode 100644 index 000000000..71980f9e6 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/ApplicationWindow.qml @@ -0,0 +1,86 @@ +/* + * Copycontext 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 1.3 +import "private" + +/** + * A window that provides some basic features needed for all apps + * + * It's usually used as a root QML component for the application. + * It's based around the PageRow component, the application will be + * about pages adding and removal. + */ +ApplicationWindow { + id: root + + /** + * The first page that will be loaded when the application starts + */ + property alias initialPage: __pageStack.initialPage + + /** + * The stack used to allocate the pages nd to manage the transitions + * between them. + * It's using a PageRow, while having the same aPI as PageStack, + * it positions the pages as adjacent columns, with as many columns + * as can fit in the screen. An handheld device would usually have a single + * fullscreen column, a tablet device would have many tiled columns. + */ + property alias pageStack: __pageStack + + PageRow { + id: __pageStack + anchors.fill: parent + focus: true + Keys.onReleased: { + if (event.key == Qt.Key_Back && stackView.depth > 1) { + stackView.pop(); + event.accepted = true; + } + } + onLastVisiblePageChanged: { + if (lastVisiblePage != null) { + pop(lastVisiblePage) + } + } + } + + property AbstractDrawer globalDrawer + property AbstractDrawer contextDrawer + + onGlobalDrawerChanged: { + globalDrawer.parent = contentItem.parent; + } + onContextDrawerChanged: { + contextDrawer.parent = contentItem.parent; + } + + property alias actionButton: __actionButton + ActionButton { + id: __actionButton + z: 9999 + anchors.bottom: parent.bottom + x: parent.width/2 - width/2 + iconSource: "distribute-horizontal-x" + + visible: root.globalDrawer || root.contextDrawer + } +} diff --git a/qt-mobile/qml/mobilecomponents/ContextDrawer.qml b/qt-mobile/qml/mobilecomponents/ContextDrawer.qml new file mode 100644 index 000000000..2e2f95f7e --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/ContextDrawer.qml @@ -0,0 +1,93 @@ +/* + * 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 1.0 as QtControls +import org.kde.plasma.mobilecomponents 0.2 + +OverlayDrawer { + id: root + + property string title + + //This can be any type of object that a ListView can accept as model. It expects items compatible with either QAction or QQC Action + property var actions + enabled: menu.count > 0 + edge: Qt.RightEdge + + contentItem: QtControls.ScrollView { + ListView { + id: menu + model: { + if (root.actions.length == 0) { + return null; + } else { + return root.actions[0].text !== undefined && + root.actions[0].trigger !== undefined ? + root.actions : + root.actions[0]; + } + } + verticalLayoutDirection: ListView.BottomToTop + //in bottomtotop all is flipped + footer: Item { + height: heading.height + width: menu.width + Heading { + id: heading + anchors { + left: parent.left + right: parent.right + margins: Units.largeSpacing + } + elide: Text.ElideRight + level: 2 + text: root.title + } + } + delegate: ListItem { + enabled: true + Row { + anchors { + left: parent.left + margins: Units.largeSpacing + } + Icon { + height: parent.height + width: height + source: modelData.iconName + } + Label { + text: model ? model.text : modelData.text + } + } + onClicked: { + if (modelData && modelData.trigger !== undefined) { + modelData.trigger(); + // assume the model is a list of QAction or Action + } else if (menu.model.length > index) { + menu.model[index].trigger(); + } else { + console.warning("Don't know how to trigger the action") + } + } + } + } + } +} diff --git a/qt-mobile/qml/mobilecomponents/GlobalDrawer.qml b/qt-mobile/qml/mobilecomponents/GlobalDrawer.qml new file mode 100644 index 000000000..082231c41 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/GlobalDrawer.qml @@ -0,0 +1,198 @@ +/* + * 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 1.0 +import QtQuick.Layouts 1.2 +import QtGraphicalEffects 1.0 +import org.kde.plasma.mobilecomponents 0.2 + +OverlayDrawer { + id: root + edge: Qt.LeftEdge + + default property alias content: mainContent.data + + property alias title: heading.text + property alias titleIcon: headingIcon.source + property alias bannerImageSource: bannerImage.source + property list actions + + contentItem: ColumnLayout { + id: mainColumn + anchors.fill: parent + spacing: 0 + implicitWidth: Units.gridUnit * 12 + + Image { + id: bannerImage + Layout.fillWidth: true + + Layout.preferredWidth: title.implicitWidth + Layout.preferredHeight: bannerImageSource != "" ? Math.max(title.implicitHeight, Math.floor(width / (sourceSize.width/sourceSize.height))) : title.implicitHeight + Layout.minimumHeight: Math.max(headingIcon.height, heading.height) + Units.smallSpacing*2 + + fillMode: Image.PreserveAspectCrop + + anchors { + left: parent.left + right: parent.right + top: parent.top + } + + LinearGradient { + anchors { + left: parent.left + right: parent.right + top: parent.top + } + visible: bannerImageSource != "" + height: title.height * 1.3 + start: Qt.point(0, 0) + end: Qt.point(0, height) + gradient: Gradient { + GradientStop { + position: 0.0 + color: Qt.rgba(0, 0, 0, 0.8) + } + GradientStop { + position: 1.0 + color: "transparent" + } + } + } + + RowLayout { + id: title + anchors { + left: parent.left + top: parent.top + margins: Units.smallSpacing + } + Icon { + id: headingIcon + Layout.minimumWidth: Units.iconSizes.large + Layout.minimumHeight: width + } + Heading { + id: heading + level: 1 + color: bannerImageSource != "" ? "white" : Theme.textColor + } + Item { + height: parent.height + Layout.minimumWidth: height + } + } + } + + Rectangle { + color: Theme.textColor + opacity: 0.2 + Layout.fillWidth: true + Layout.minimumHeight: 1 + } + + StackView { + id: pageRow + Layout.fillWidth: true + Layout.fillHeight: true + initialItem: menuComponent + } + + ColumnLayout { + id: mainContent + Layout.alignment: Qt.AlignHCenter + Layout.minimumWidth: parent.width - Units.smallSpacing*2 + Layout.maximumWidth: Layout.minimumWidth + Layout.fillWidth: false + Layout.fillHeight: true + } + Item { + Layout.minimumWidth: Units.smallSpacing + Layout.minimumHeight: Units.smallSpacing + } + + Component { + id: menuComponent + ListView { + id: optionMenu + clip: true + + model: actions + property int level: 0 + + footer: ListItem { + visible: level > 0 + enabled: true + RowLayout { + anchors { + left: parent.left + } + Icon { + Layout.maximumWidth: height + Layout.fillHeight: true + source: "go-previous" + } + Label { + // Weird, this doesn't work + //text: (typeof(i18n) != undefined) ? i18n("Back") : "Back" + text: "Back" + } + } + onClicked: pageRow.pop() + } + delegate: ListItem { + enabled: true + RowLayout { + anchors { + left: parent.left + right: parent.right + } + Icon { + Layout.maximumWidth: height + Layout.fillHeight: true + source: modelData.iconName + } + Label { + Layout.fillWidth: true + text: modelData.text + } + Icon { + Layout.maximumWidth: height + Layout.fillHeight: true + source: "go-next" + visible: modelData.children != undefined + } + } + onClicked: { + if (modelData.children) { + pageRow.push(menuComponent, {"model": modelData.children, "level": level + 1}); + } else { + modelData.trigger(); + pageRow.pop(pageRow.initialPage); + root.opened = false; + } + } + } + } + } + } +} + diff --git a/qt-mobile/qml/mobilecomponents/Heading.qml b/qt-mobile/qml/mobilecomponents/Heading.qml new file mode 100644 index 000000000..0d3909e12 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Heading.qml @@ -0,0 +1,76 @@ +/* +* Copyright 2012 by Sebastian Kügler +* +* 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.0 +import org.kde.plasma.mobilecomponents 0.2 + +/** + * A heading label used for subsections of texts. + * + * The characteristics of the text will be automatically set according to the + * plasma Theme. Use this components for section titles or headings in your UI, + * for example page or section titles. + * + * Example usage: + * + * @code + * import org.kde.plasma.extras 2.0 as PlasmaExtras + * [...] + * Column { + * PlasmaExtras.Title { text: "Fruit sweetness on the rise" } + * PlasmaExtras.Heading { text: "Apples in the sunlight"; level: 2 } + * PlasmaExtras.Paragraph { text: "Long text about fruit and apples [...]" } + * [...] + * } + * @endcode + * + * The most important property is "text", which applies to the text property of + * Label. See PlasmaComponents Label and primitive QML Text element API for + * additional properties, methods and signals. + */ +Label { + id: heading + + /** + * The level determines how big the section header is display, values + * between 1 (big) and 5 (small) are accepted + */ + property int level: 1 + + property int step: 2 + + height: Math.round(paintedHeight * 1.2) + font.pointSize: headerPointSize(level) + font.weight: Font.Light + wrapMode: Text.WordWrap + opacity: 0.8 + + function headerPointSize(l) { + var n = Theme.defaultFont.pointSize; + var s; + if (l > 4) { + s = n + } else if (l < 2) { + s = n + (5*step) + } else { + s = n + ((5-level)*2) + } + return s; + } +} diff --git a/qt-mobile/qml/mobilecomponents/Icon.qml b/qt-mobile/qml/mobilecomponents/Icon.qml new file mode 100644 index 000000000..d5b253235 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Icon.qml @@ -0,0 +1,42 @@ +/* + * 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.0 +import QtGraphicalEffects 1.0 + +Item { + id: root + property string source + property alias smooth: image.smooth + property bool active: false + property bool valid: image.status == Image.Ready + implicitWidth: image.sourceSize.width + implicitHeight: image.sourceSize.height + + Image { + id: image + anchors.fill: parent + source: root.source != "" ? "icons/" + root.source + ".svg" : root.source + } + GammaAdjust { + anchors.fill: image + source: image + gamma: root.active ? 3.0 : 1 + } +} diff --git a/qt-mobile/qml/mobilecomponents/IconGrid.qml b/qt-mobile/qml/mobilecomponents/IconGrid.qml new file mode 100644 index 000000000..f3f8f1c09 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/IconGrid.qml @@ -0,0 +1,239 @@ +/* + Copyright 2010 Marco Martin + + This library 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 of the License, or (at your option) any later version. + + This library 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 library; see the file COPYING.LIB. If not, write to + the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, + Boston, MA 02110-1301, USA. +*/ + +import QtQuick 2.1 +import org.kde.plasma.core 2.0 as PlasmaCore +import org.kde.plasma.mobilecomponents 0.2 +import org.kde.plasma.mobilecomponents.private 0.2 + +Item { + id: main + + property Component delegate + property QtObject model + + property int pageSize: Math.floor(iconView.width/main.delegateWidth)*Math.floor(iconView.height/main.delegateHeight) + property int delegateWidth: Units.iconSizes.huge + Units.gridUnit*2 + property int delegateHeight: Units.iconSizes.huge + Units.gridUnit*2 + property alias currentPage: iconView.currentIndex + property int pagesCount: Math.ceil(model.count/pageSize) + property int count: model.count + property alias contentX: iconView.contentX + clip: true + + function positionViewAtIndex(index) + { + iconView.positionViewAtIndex(index / pageSize, ListView.Beginning) + } + + Timer { + id: resizeTimer + running: true + interval: 100 + onTriggered: { + main.pageSize = Math.floor(iconView.width/main.delegateWidth)*Math.floor(iconView.height/main.delegateHeight) + if (iconView.currentItem) { + iconView.currentItem.width = iconView.width + iconView.currentItem.height = iconView.height + } + } + } + + ListView { + id: iconView + objectName: "iconView" + pressDelay: 200 + cacheBuffer: 100 + highlightMoveDuration: 250 + anchors.fill: parent + onWidthChanged: resizeTimer.restart() + onHeightChanged: resizeTimer.restart() + + model: main.model ? Math.ceil(main.model.count/main.pageSize) : 0 + highlightRangeMode: ListView.StrictlyEnforceRange + orientation: ListView.Horizontal + snapMode: ListView.SnapOneItem + boundsBehavior: Flickable.DragOverBounds + + signal clicked(string url) + + delegate: Component { + Item { + id: delegatePage + //Explicitly *not* bind the properties for performance reasons + Component.onCompleted: { + width = iconView.width + height = iconView.height + //iconView.cacheBuffer = iconView.width + } + + Flow { + id: iconFlow + width: iconRepeater.suggestedWidth + + anchors { + horizontalCenter: parent.horizontalCenter + top: parent.top + bottom: parent.bottom + } + property int orientation: ListView.Horizontal + + PagedProxyModel { + id: pagedProxyModel + sourceModel: main.model + currentPage: model.index + pageSize: main.pageSize + } + Repeater { + id: iconRepeater + model: pagedProxyModel + property int columns: Math.min(count, Math.floor(delegatePage.width/main.delegateWidth)) + property int suggestedWidth: main.delegateWidth*columns + //property int suggestedHeight: main.delegateHeight*Math.floor(count/columns) + + delegate: main.delegate + } + } + } + } + } + + + Loader { + id: scrollArea + visible: main.model && Math.ceil(main.model.count/main.pageSize) > 1 + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + height: Math.max( 16, iconView.height - Math.floor(iconView.height/delegateHeight)*delegateHeight) + + property int pageCount: main.model ? Math.ceil(main.model.count/main.pageSize) : 0 + + sourceComponent: pageCount > 1 ? ((pageCount * 20 > width) ? scrollDotComponent : dotsRow) : undefined + function setViewIndex(index) + { + //animate only if near + if (Math.abs(iconView.currentIndex - index) > 1) { + iconView.positionViewAtIndex(index, ListView.Beginning) + } else { + iconView.currentIndex = index + } + } + Component { + id: scrollDotComponent + MouseArea { + anchors.fill: parent + property int pendingIndex: 0 + Rectangle { + id: barRectangle + color: Theme.textColor + opacity: 2.05 + height: 4 + radius: 2 + anchors { + left: parent.left + right: parent.right + verticalCenter: parent.verticalCenter + leftMargin: (parent.width/pageCount/2) + rightMargin: (parent.width/pageCount/2) + } + } + Rectangle { + color: Theme.textColor + height: 8 + width: height + radius: 4 + anchors.verticalCenter: parent.verticalCenter + x: parent.width/(pageCount/(iconView.currentIndex+1)) - (parent.width/pageCount/2) - 4 + Behavior on x { + NumberAnimation { + duration: 250 + easing.type: Easing.InOutQuad + } + } + } + function setViewIndexFromMouse(x) + { + pendingIndex = Math.min(pageCount, + Math.round(pageCount / (barRectangle.width / Math.max(x - barRectangle.x, 1)))) + viewPositionTimer.restart() + } + onPressed: setViewIndexFromMouse(mouse.x) + onPositionChanged: setViewIndexFromMouse(mouse.x) + + Timer { + id: viewPositionTimer + interval: 200 + onTriggered: setViewIndex(pendingIndex) + } + } + } + Component { + id: dotsRow + + Item { + Row { + anchors.centerIn: parent + spacing: 20 + + Repeater { + model: scrollArea.pageCount + + + Rectangle { + width: 6 + height: 6 + scale: iconView.currentIndex == index ? 1.5 : 1 + radius: 5 + smooth: true + opacity: iconView.currentIndex == index ? 0.8: 0.4 + color: Theme.textColor + + Behavior on scale { + NumberAnimation { + duration: 250 + easing.type: Easing.InOutQuad + } + } + Behavior on opacity { + NumberAnimation { + duration: 250 + easing.type: Easing.InOutQuad + } + } + + MouseArea { + anchors { + fill: parent + margins: -10 + } + + onClicked: { + setViewIndex(index) + } + } + } + } + } + } + } + } +} diff --git a/qt-mobile/qml/mobilecomponents/Label.qml b/qt-mobile/qml/mobilecomponents/Label.qml new file mode 100644 index 000000000..bf27078b7 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Label.qml @@ -0,0 +1,59 @@ +/* +* Copyright (C) 2011 by 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 org.kde.plasma.mobilecomponents 0.2 + +/** + * This is a label which uses the plasma Theme. + * + * The characteristics of the text will be automatically set according to the + * plasma Theme. If you need a more customized text item use the Text component + * from QtQuick. + * + * You can use all elements of the QML Text component, in particular the "text" + * property to define the label text. + * + * @inherit QtQuick.Text + */ +Text { + id: root + + height: Math.round(Math.max(paintedHeight, Units.gridUnit * 1.6)) + verticalAlignment: lineCount > 1 ? Text.AlignTop : Text.AlignVCenter + + activeFocusOnTab: false + renderType: Text.NativeRendering + + font.capitalization: Theme.defaultFont.capitalization + font.family: Theme.defaultFont.family + font.italic: Theme.defaultFont.italic + font.letterSpacing: Theme.defaultFont.letterSpacing + font.pointSize: Theme.defaultFont.pointSize + font.strikeout: Theme.defaultFont.strikeout + font.underline: Theme.defaultFont.underline + font.weight: Theme.defaultFont.weight + font.wordSpacing: Theme.defaultFont.wordSpacing + color: Theme.textColor + + opacity: enabled? 1 : 0.6 + + Accessible.role: Accessible.StaticText + Accessible.name: text +} diff --git a/qt-mobile/qml/mobilecomponents/ListItem.qml b/qt-mobile/qml/mobilecomponents/ListItem.qml new file mode 100644 index 000000000..042ba2cbc --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/ListItem.qml @@ -0,0 +1,129 @@ +/* + * 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 org.kde.plasma.mobilecomponents 0.2 + +/** + * An item delegate for the primitive ListView component. + * + * It's intended to make all listviews look coherent. + * + * @inherit QtQuick.Item + */ +Item { + id: listItem + default property alias content: paddingItem.data + + /** + * type:bool Holds if the item emits signals related to mouse interaction. + * + * The default value is false. + */ + property alias enabled: itemMouse.enabled + //item has been clicked or pressed+hold + + /** + * This signal is emitted when there is a click. + * + * This is disabled by default, set enabled to true to use it. + * @see enabled + */ + signal clicked + + + /** + * The user pressed the item with the mouse and didn't release it for a + * certain amount of time. + * + * This is disabled by default, set enabled to true to use it. + * @see enabled + */ + signal pressAndHold + + /** + * If true makes the list item look as checked or pressed. It has to be set + * from the code, it won't change by itself. + */ + //plasma extension + //always look pressed? + property bool checked: false + + /** + * If true the item will be a delegate for a section, so will look like a + * "title" for the otems under it. + */ + //is this to be used as section delegate? + property bool sectionDelegate: false + + /** + * True if the list item contains mouse + */ + property alias containsMouse: itemMouse.containsMouse + + width: parent ? parent.width : childrenRect.width + height: paddingItem.childrenRect.height + Units.smallSpacing*2 + + property int implicitHeight: paddingItem.childrenRect.height + Units.smallSpacing*2 + + + MouseArea { + id: itemMouse + property bool changeBackgroundOnPress: !listItem.checked && !listItem.sectionDelegate + anchors.fill: parent + enabled: false + hoverEnabled: true + + onClicked: listItem.clicked() + onPressAndHold: listItem.pressAndHold() + + Rectangle { + id : background + color: listItem.checked || (itemMouse.pressed && itemMouse.changeBackgroundOnPress) ? Theme.highlightColor : Theme.viewBackgroundColor + + anchors.fill: parent + visible: listItem.ListView.view ? listItem.ListView.view.highlight === null : true + opacity: itemMouse.containsMouse && !itemMouse.pressed ? 0.5 : 1 + Behavior on color { + ColorAnimation { duration: Units.longDuration } + } + Behavior on opacity { NumberAnimation { duration: Units.longDuration } } + } + Item { + id: paddingItem + anchors { + fill: parent + margins: Units.smallSpacing + } + } + } + + Rectangle { + color: Theme.textColor + opacity: 0.2 + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + height: 1 + } + + Accessible.role: Accessible.ListItem +} diff --git a/qt-mobile/qml/mobilecomponents/ListItemWithActions.qml b/qt-mobile/qml/mobilecomponents/ListItemWithActions.qml new file mode 100644 index 000000000..9d54fda24 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/ListItemWithActions.qml @@ -0,0 +1,276 @@ +/* + * 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.3 +import QtQuick.Controls 1.0 +import org.kde.plasma.mobilecomponents 0.2 +import QtGraphicalEffects 1.0 + +/** + * An item delegate for the primitive ListView component. + * + * It's intended to make all listviews look coherent. + * + * @inherit QtQuick.Item + */ +Item { + id: listItem + default property alias content: paddingItem.data + + /** + * type:bool Holds if the item emits signals related to mouse interaction. + * + * The default value is false. + */ + property alias enabled: itemMouse.enabled + //item has been clicked or pressed+hold + + /** + * This signal is emitted when there is a click. + * + * This is disabled by default, set enabled to true to use it. + * @see enabled + */ + signal clicked + + + /** + * The user pressed the item with the mouse and didn't release it for a + * certain amount of time. + * + * This is disabled by default, set enabled to true to use it. + * @see enabled + */ + signal pressAndHold + + /** + * If true makes the list item look as checked or pressed. It has to be set + * from the code, it won't change by itself. + */ + //plasma extension + //always look pressed? + property bool checked: false + + /** + * If true the item will be a delegate for a section, so will look like a + * "title" for the otems under it. + */ + //is this to be used as section delegate? + property bool sectionDelegate: false + + /** + * True if the list item contains mouse + */ + property alias containsMouse: itemMouse.containsMouse + + /** + * Defines the actions for the page: at most 4 buttons will + * contain the actions at the bottom of the page, if the main + * item of the page is a Flickable or a ScrllArea, it will + * control the visibility of the actions. + */ + property alias actions: internalActions.data + + Item { + id: internalActions + } + + width: parent ? parent.width : childrenRect.width + height: paddingItem.childrenRect.height + Units.smallSpacing*2 + + property int implicitHeight: paddingItem.childrenRect.height + Units.smallSpacing*2 + + + Rectangle { + id : background + color: Theme.backgroundColor + + width: parent.width + height: parent.height + MouseArea { + anchors.fill: parent + onClicked: itemMouse.x = 0; + } + RowLayout { + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + rightMargin: y + } + height: Math.min( parent.height/1.5, Units.iconSizes.medium) + property bool exclusive: false + property Item checkedButton + spacing: 0 + Repeater { + model: { + if (listItem.actions.length == 0) { + return null; + } else { + return listItem.actions[0].text !== undefined && + listItem.actions[0].trigger !== undefined ? + listItem.actions : + listItem.actions[0]; + } + } + delegate: ToolButton { + Layout.fillHeight: true + Layout.minimumWidth: height + iconName: modelData.iconName + property bool flat: false + onClicked: { + if (modelData && modelData.trigger !== undefined) { + modelData.trigger(); + // assume the model is a list of QAction or Action + } else if (toolbar.model.length > index) { + toolbar.model[index].trigger(); + } else { + console.log("Don't know how to trigger the action") + } + itemMouse.x = 0; + } + } + } + } + } + InnerShadow { + anchors.fill: parent + radius: Units.smallSpacing*2 + samples: 16 + horizontalOffset: 0 + verticalOffset: Units.smallSpacing/2 + color: Qt.rgba(0, 0, 0, 0.3) + source: background + } + LinearGradient { + id: shadow + //TODO: depends from app layout + property bool inverse: true + width: Units.smallSpacing*2 + anchors { + right: shadow.inverse ? undefined : itemMouse.left + left: shadow.inverse ? itemMouse.right : undefined + top: itemMouse.top + bottom: itemMouse.bottom + rightMargin: -1 + } + start: Qt.point(0, 0) + end: Qt.point(Units.smallSpacing*2, 0) + gradient: Gradient { + GradientStop { + position: 0.0 + color: shadow.inverse ? Qt.rgba(0, 0, 0, 0.3) : "transparent" + } + GradientStop { + position: shadow.inverse ? 0.3 : 0.7 + color: Qt.rgba(0, 0, 0, 0.15) + } + GradientStop { + position: 1.0 + color: shadow.inverse ? "transparent" : Qt.rgba(0, 0, 0, 0.3) + } + } + } + + MouseArea { + id: itemMouse + property bool changeBackgroundOnPress: !listItem.checked && !listItem.sectionDelegate + width: parent.width + height: parent.height + enabled: false + hoverEnabled: true + + onClicked: listItem.clicked() + onPressAndHold: listItem.pressAndHold() + + Behavior on x { + NumberAnimation { + duration: Units.longDuration + easing.type: Easing.InOutQuad + } + } + + Rectangle { + id : item + color: listItem.checked || (itemMouse.pressed && itemMouse.changeBackgroundOnPress) ? Theme.highlightColor : Theme.viewBackgroundColor + anchors.fill: parent + + visible: listItem.ListView.view ? listItem.ListView.view.highlight === null : true + Behavior on color { + ColorAnimation { duration: Units.longDuration } + } + + Item { + id: paddingItem + anchors { + fill: parent + margins: Units.smallSpacing + } + } + + MouseArea { + width: Units.iconSizes.smallMedium + height: width + preventStealing: true + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + rightMargin: y + } + drag { + target: itemMouse + axis: Drag.XAxis + maximumX: 0 + } + onReleased: { + if (itemMouse.x > -itemMouse.width/2) { + itemMouse.x = 0; + } else { + itemMouse.x = -itemMouse.width + width*2 + } + } + onClicked: { + if (itemMouse.x < -itemMouse.width/2) { + itemMouse.x = 0; + } else { + itemMouse.x = -itemMouse.width + width*2 + } + } + Icon { + anchors.fill: parent + source: "application-menu" + } + } + } + } + + + Rectangle { + color: Theme.textColor + opacity: 0.2 + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + height: 1 + } + + Accessible.role: Accessible.ListItem +} diff --git a/qt-mobile/qml/mobilecomponents/OverlayDrawer.qml b/qt-mobile/qml/mobilecomponents/OverlayDrawer.qml new file mode 100644 index 000000000..5ae81929e --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/OverlayDrawer.qml @@ -0,0 +1,317 @@ +/* + * Copyright 2012 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 QtGraphicalEffects 1.0 +import org.kde.plasma.mobilecomponents 0.2 +import "private" + +/**Documented API + +Imports: + QtQuick 2.1 + +Description: + Overlay Drawers are used to expose additional UI elements needed for small secondary tasks for which the main UI elements are not needed. For example in Okular Active, an Overlay Drawer is used to display thumbnails of all pages within a document along with a search field. This is used for the distinct task of navigating to another page. + +Properties: + bool opened: + If true the drawer is open showing the contents of the "drawer" component. + + Item page: + It's the default property. it's the main content of the drawer page, the part that is always shown + + Item contentItem: + It's the part that can be pulled in and out, will act as a sidebar. +**/ +AbstractDrawer { + id: root + anchors.fill: parent + z: 9999 + + default property alias page: mainPage.data + property Item contentItem + property alias opened: browserFrame.open + property int edge: Qt.LeftEdge + property real position: 0 + + onContentItemChanged: contentItem.parent = drawerPage + onPositionChanged: { + if (!enabled) { + return; + } + if (root.edge == Qt.LeftEdge) { + browserFrame.x = -browserFrame.width + position * browserFrame.width; + } else { + browserFrame.x = root.width - (position * browserFrame.width); + } + } + function open () { + mouseEventListener.startBrowserFrameX = browserFrame.x; + browserFrame.state = "Dragging"; + browserFrame.state = "Open"; + } + function close () { + mouseEventListener.startBrowserFrameX = browserFrame.x; + browserFrame.state = "Dragging"; + browserFrame.state = "Closed"; + } + + Item { + id: mainPage + anchors.fill: parent + onChildrenChanged: mainPage.children[0].anchors.fill = mainPage + } + + Rectangle { + anchors.fill: parent + color: "black" + opacity: 0.6 * (root.edge == Qt.LeftEdge + ? ((browserFrame.x + browserFrame.width) / browserFrame.width) + : (1 - browserFrame.x / root.width)) + } + + MouseArea { + anchors { + right: root.edge == Qt.LeftEdge ? undefined : parent.right + left: root.edge == Qt.LeftEdge ? parent.left : undefined + top: parent.top + bottom: parent.bottom + } + z: 99 + width: Units.smallSpacing + onPressed: mouseEventListener.managePressed(mouse) + onPositionChanged: mouseEventListener.positionChanged(mouse) + onReleased: mouseEventListener.released(mouse) + } + MouseArea { + id: mouseEventListener + anchors.fill: parent + drag.filterChildren: true + property int startBrowserFrameX + property int startMouseX + property real oldMouseX + property bool startDragging: false + property string startState + enabled: browserFrame.state != "Closed" + + onPressed: managePressed(mouse) + function managePressed(mouse) { + if (drawerPage.children.length == 0) { + mouse.accepted = false; + return; + } + + mouse.accepted = true; + startBrowserFrameX = browserFrame.x; + oldMouseX = startMouseX = mouse.x; + startDragging = false; + startState = browserFrame.state; + browserFrame.state = "Dragging"; + browserFrame.x = startBrowserFrameX; + } + + onPositionChanged: { + if (drawerPage.children.length == 0) { + mouse.accepted = false; + return; + } + + if (mouse.x < Units.gridUnit || + Math.abs(mouse.x - startMouseX) > root.width / 5) { + startDragging = true; + } + if (startDragging) { + browserFrame.x = root.edge == Qt.LeftEdge + ? Math.min(0, browserFrame.x + mouse.x - oldMouseX) + : Math.max(root.width - browserFrame.width, browserFrame.x + mouse.x - oldMouseX); + } + oldMouseX = mouse.x; + } + + onReleased: { + if (drawerPage.children.length == 0) { + mouse.accepted = false; + return; + } + + if (root.edge == Qt.LeftEdge) { + if (mouse.x < Units.gridUnit) { + browserFrame.state = "Closed"; + } else if (browserFrame.x - startBrowserFrameX > browserFrame.width / 3) { + browserFrame.state = "Open"; + } else if (startBrowserFrameX - browserFrame.x > browserFrame.width / 3) { + browserFrame.state = "Closed"; + } else { + browserFrame.state = startState + } + + } else { + if (mouse.x > width - Units.gridUnit) { + browserFrame.state = "Closed"; + } else if (browserFrame.x - startBrowserFrameX > browserFrame.width / 3) { + browserFrame.state = "Closed"; + } else if (startBrowserFrameX - browserFrame.x > browserFrame.width / 3) { + browserFrame.state = "Open"; + } else { + browserFrame.state = startState; + } + } + } + onCanceled: { + if (oldMouseX > width - Units.gridUnit) { + browserFrame.state = "Closed"; + } else if (Math.abs(browserFrame.x - startBrowserFrameX) > browserFrame.width / 3) { + browserFrame.state = startState == "Open" ? "Closed" : "Open"; + } else { + browserFrame.state = "Open"; + } + } + onClicked: { + if (Math.abs(startMouseX - mouse.x) > Units.gridUnit) { + return; + } + if ((root.edge == Qt.LeftEdge && mouse.x > browserFrame.width) || + (root.edge != Qt.LeftEdge && mouse.x < browserFrame.x)) { + browserFrame.state = startState == "Open" ? "Closed" : "Open"; + root.clicked(); + } + } + Rectangle { + id: browserFrame + z: 100 + color: Theme.viewBackgroundColor + anchors { + top: parent.top + bottom: parent.bottom + } + + width: { + if (drawerPage.children.length > 0 && drawerPage.children[0].implicitWidth > 0) { + return Math.min( parent.width - Units.gridUnit, drawerPage.children[0].implicitWidth) + } else { + return parent.width - Units.gridUnit * 3 + } + } + + onXChanged: { + root.position = root.edge == Qt.LeftEdge ? 1 + browserFrame.x/browserFrame.width : (root.width - browserFrame.x)/browserFrame.width; + } + + state: "Closed" + onStateChanged: open = (state != "Closed") + property bool open: false + onOpenChanged: { + if (drawerPage.children.length == 0) { + return; + } + + if (open) { + browserFrame.state = "Open"; + } else { + browserFrame.state = "Closed"; + } + } + + LinearGradient { + width: Units.gridUnit/2 + anchors { + right: root.edge == Qt.LeftEdge ? undefined : parent.left + left: root.edge == Qt.LeftEdge ? parent.right : undefined + top: parent.top + bottom: parent.bottom + } + opacity: root.position == 0 ? 0 : 1 + start: Qt.point(0, 0) + end: Qt.point(Units.gridUnit/2, 0) + gradient: Gradient { + GradientStop { + position: 0.0 + color: root.edge == Qt.LeftEdge ? Qt.rgba(0, 0, 0, 0.3) : "transparent" + } + GradientStop { + position: root.edge == Qt.LeftEdge ? 0.3 : 0.7 + color: Qt.rgba(0, 0, 0, 0.15) + } + GradientStop { + position: 1.0 + color: root.edge == Qt.LeftEdge ? "transparent" : Qt.rgba(0, 0, 0, 0.3) + } + } + Behavior on opacity { + NumberAnimation { + duration: Units.longDuration + easing.type: Easing.InOutQuad + } + } + } + + + MouseArea { + id: drawerPage + anchors { + fill: parent + //leftMargin: Units.gridUnit + } + clip: true + onChildrenChanged: drawerPage.children[0].anchors.fill = drawerPage + } + + states: [ + State { + name: "Open" + PropertyChanges { + target: browserFrame + x: root.edge == Qt.LeftEdge ? 0 : root.width - browserFrame.width + } + }, + State { + name: "Dragging" + //workaround for a quirkiness of the state machine + //if no x binding gets defined in this state x will be set to whatever last x it had last time it was in this state + PropertyChanges { + target: browserFrame + x: mouseEventListener.startBrowserFrameX + } + }, + State { + name: "Closed" + PropertyChanges { + target: browserFrame + x: root.edge == Qt.LeftEdge ? -browserFrame.width : root.width + } + } + ] + + transitions: [ + Transition { + //Exclude Dragging + to: "Open,Closed" + NumberAnimation { + id: transitionAnim + properties: "x" + duration: Units.longDuration + easing.type: Easing.InOutQuad + } + } + ] + } + } +} + diff --git a/qt-mobile/qml/mobilecomponents/Page.qml b/qt-mobile/qml/mobilecomponents/Page.qml new file mode 100644 index 000000000..53cb04e2a --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Page.qml @@ -0,0 +1,71 @@ +/* + * 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.3 +import org.kde.plasma.mobilecomponents 0.2 +import "private" + +Rectangle { + id: root + + /** + * type:PageStack + * The page stack that this page is owned by. + */ + property Item pageStack + + /** + * Defines the toolbar contents for the page. If the page stack is set up + * using a toolbar instance, it automatically shows the currently active + * page's toolbar contents in the toolbar. + * + * The default value is null resulting in the page's toolbar to be + * invisible when the page is active. + */ + property Item tools: null + + /** + * Defines the contextual actions for the page: + * an easy way to assign actions in the right sliding panel + */ + property alias contextualActions: internalContextualActions.data + + property Flickable flickable + Item { + id: internalContextualActions + } + + Layout.fillWidth: true + color: "transparent" + + Connections { + target: flickable + property real oldContentY: flickable.contentY + onContentYChanged: { + print(flickable.contentY+" "+actionButton.transform[0] ) + if (flickable.atYBeginning || flickable.atYEnd) { + return; + } + actionButton.transform[0].y = Math.min(actionButton.height, Math.max(0, actionButton.transform[0].y + (flickable.contentY - oldContentY))); + + oldContentY = flickable.contentY; + } + } +} diff --git a/qt-mobile/qml/mobilecomponents/PageRow.qml b/qt-mobile/qml/mobilecomponents/PageRow.qml new file mode 100644 index 000000000..941f77f73 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/PageRow.qml @@ -0,0 +1,496 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Marco Martin +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the Qt Components project. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtQuick.Controls 1.0 +import QtQuick.Layouts 1.2 +import org.kde.plasma.mobilecomponents 0.2 + +import "private/PageStack.js" as Engine + +Item { + id: actualRoot + + width: parent ? parent.width : 0 + height: parent ? parent.height : 0 + + + property int depth: Engine.getDepth() + property Item currentPage: null + property Item lastVisiblePage + property ToolBar toolBar + property variant initialPage + //A column is wide enough for 30 characters + property int columnWidth: Math.round(parent.width/(Units.gridUnit*30)) > 0 ? parent.width/Math.round(parent.width/(Units.gridUnit*30)) : width + property alias clip: scrollArea.clip + + // Indicates whether there is an ongoing page transition. + property bool busy: internal.ongoingTransitionCount > 0 + + // 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. + // + // 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. + // + // The properties argument is optional and allows defining a map of properties to set on the page. + // If the immediate argument is true then no transition animation is performed. + // Returns the page instance. + function push(page, properties, immediate) + { + var item = Engine.push(page, properties, false, immediate) + scrollToLevel(depth) + return item + } + + // Pops a page off the stack. + // If page is specified then the stack is unwound to that page, to unwind to the first page specify + // page as null. If the immediate argument is true then no transition animation is performed. + // Returns the page instance that was popped off the stack. + function pop(page, immediate) + { + return Engine.pop(page, immediate); + } + + // Replaces a page on the stack. + // See push() for details. + function replace(page, properties, immediate) + { + var item = Engine.push(page, properties, true, immediate); + scrollToLevel(depth) + return item + } + + // Clears the page stack. + function clear() + { + return Engine.clear(); + } + + // Iterates through all pages (top to bottom) and invokes the specified function. + // If the specified function returns true the search stops and the find function + // returns the page that the iteration stopped at. If the search doesn't result + // in any page being found then null is returned. + function find(func) + { + return Engine.find(func); + } + + // Scroll the view to have the page of the given level as first item + function scrollToLevel(level) + { + if (level < 0 || level > depth || root.width < width) { + return + } + + var firstLevel = Math.max(0, level - mainFlickable.width/columnWidth + 1); + scrollAnimation.to = Math.max(0, Math.min(Math.max(0, columnWidth * (firstLevel - 1)), mainFlickable.contentWidth+1000)) + scrollAnimation.running = true + } + + SequentialAnimation { + id: scrollAnimation + property alias to: actualScrollAnimation.to + NumberAnimation { + id: actualScrollAnimation + target: mainFlickable + properties: "contentX" + duration: internal.transitionDuration + easing.type: Easing.InOutQuad + } + ScriptAction { + script: { + actualRoot.lastVisiblePage = root.children[Math.floor((mainFlickable.contentX + mainFlickable.width - 1)/columnWidth)].page + } + } + } + + // Called when the page stack visibility changes. + onVisibleChanged: { + if (currentPage) { + if (visible) + currentPage.visible = currentPage.parent.visible = true; + } + } + + onInitialPageChanged: { + if (!internal.completed) { + return + } + + if (initialPage) { + if (depth == 0) { + push(initialPage, null, true) + } else if (depth == 1) { + replace(initialPage, null, true) + } else { + console.log("Cannot update PageStack.initialPage") + } + } + } + + Component.onCompleted: { + internal.completed = true + if (initialPage && depth == 0) + push(initialPage, null, true) + } + + QtObject { + id: internal + + // The number of ongoing transitions. + property int ongoingTransitionCount: 0 + + //FIXME: there should be a way to access to theh without storing it in an ugly way + property bool completed: false + + // Duration of transition animation (in ms) + property int transitionDuration: Units.longDuration + } + + ScrollView { + id: scrollArea + anchors.fill: parent + Flickable { + id: mainFlickable + anchors.fill: parent + interactive: root.width > width + boundsBehavior: Flickable.StopAtBounds + contentWidth: root.width + contentHeight: height + Row { + id: root + spacing: -100 + width: Math.max((depth-1+children[children.length-1].takenColumns) * columnWidth, childrenRect.width - 100) + + height: parent.height + Behavior on width { + NumberAnimation { + duration: internal.transitionDuration + easing.type: Easing.InOutQuad + } + } + } + onMovementEnded: { + scrollToLevel(Math.round(contentX/columnWidth)+1) + } + onFlickEnded: { + movementEnded(); + } + } + } + + // Component for page containers. + Component { + id: containerComponent + + Item { + id: container + + implicitWidth: actualContainer.width + 100 + width: implicitWidth + height: parent ? parent.height : 0 + + x: 0 + + // The actual parent of page: page will anchor to that + property Item pageParent: actualContainer + + property int pageDepth: 0 + Component.onCompleted: { + pageDepth = Engine.getDepth() + 1 + container.z = -Engine.getDepth() + } + + // The states correspond to the different possible positions of the container. + state: "Hidden" + + // The page held by this container. + property Item page: null + + // The owner of the page. + property Item owner: null + + // The width of the longer stack dimension + property int stackWidth: Math.max(actualRoot.width, actualRoot.height) + + + // Flag that indicates the container should be cleaned up after the transition has ended. + property bool cleanupAfterTransition: false + + // Flag that indicates if page transition animation is running + property bool transitionAnimationRunning: false + + // State to be set after previous state change animation has finished + property string pendingState: "none" + + //how many columns take the page? + property alias takenColumns: actualContainer.takenColumns + + // Ensures that transition finish actions are executed + // in case the object is destroyed before reaching the + // end state of an ongoing transition + Component.onDestruction: { + if (transitionAnimationRunning) + transitionEnded(); + } + + Item { + id: actualContainer + + anchors { + top: parent.top + bottom: parent.bottom + right: parent.right + rightMargin: 100 + } + + property int takenColumns: { + if (container.page && container.page.Layout && container.page.Layout.fillWidth) { + return Math.max(1, Math.round(actualRoot.width/columnWidth)-(container.x > 0 ? 1: 0)); + } else { + return Math.max(1, Math.round(container.page ? container.page.implicitWidth/columnWidth : 1)); + } + } + + width: (container.pageDepth >= actualRoot.depth ? Math.min(actualRoot.width, takenColumns*columnWidth) : columnWidth) + } + + Rectangle { + anchors { + top: parent.top + bottom: parent.bottom + right: actualContainer.right + } + width: 1 + color: Theme.textColor + opacity: 0.3 + visible: container.pageDepth < actualRoot.depth + } + + // Sets pending state as current if state change is delayed + onTransitionAnimationRunningChanged: { + if (!transitionAnimationRunning && pendingState != "none") { + state = pendingState; + pendingState = "none"; + } + } + + // Handles state change depening on transition animation status + function setState(newState) + { + if (transitionAnimationRunning) + pendingState = newState; + else + state = newState; + } + + // Performs a push enter transition. + function pushEnter(immediate, orientationChanges) + { + if (!immediate) { + setState("Right"); + } + setState(""); + page.visible = true; + } + + // Performs a push exit transition. + function pushExit(replace, immediate, orientationChanges) + { + if (replace) { + setState(immediate ? "Hidden" : "Left"); + } + + if (replace) { + if (immediate) + cleanup(); + else + cleanupAfterTransition = true; + } + } + + // Performs a pop enter transition. + function popEnter(immediate, orientationChanges) + { + setState(""); + page.visible = true; + } + + // Performs a pop exit transition. + function popExit(immediate, orientationChanges) + { + setState(immediate ? "Hidden" : "Left"); + + if (immediate) + cleanup(); + else + cleanupAfterTransition = true; + } + + // Called when a transition has started. + function transitionStarted() + { + container.clip = true + transitionAnimationRunning = true; + internal.ongoingTransitionCount++; + } + + // Called when a transition has ended. + function transitionEnded() + { + container.clip = false + if (state != "") + state = "Hidden"; + + internal.ongoingTransitionCount--; + transitionAnimationRunning = false; + + if (cleanupAfterTransition) { + cleanup(); + } + } + + states: [ + // Explicit properties for default state. + State { + name: "" + PropertyChanges { target: container; visible: true; opacity: 1 } + PropertyChanges { target: container; width: container.implicitWidth} + }, + // Start state for pop entry, end state for push exit. + State { + name: "Left" + PropertyChanges { target: container; opacity: 0 } + PropertyChanges { target: container; width: 100} + }, + // Start state for push entry, end state for pop exit. + State { + name: "Right" + PropertyChanges { target: container; opacity: 0 } + PropertyChanges { target: container; width: 100} + }, + // Inactive state. + State { + name: "Hidden" + PropertyChanges { target: container; visible: false } + PropertyChanges { target: container; width: container.implicitWidth} + } + ] + + transitions: [ + // Push exit transition + Transition { + from: ""; to: "Left" + SequentialAnimation { + ScriptAction { script: transitionStarted() } + ParallelAnimation { + PropertyAnimation { properties: "width"; easing.type: Easing.InQuad; duration: internal.transitionDuration } + PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: internal.transitionDuration } + } + ScriptAction { script: transitionEnded() } + } + }, + // Pop entry transition + Transition { + from: "Left"; to: "" + SequentialAnimation { + ScriptAction { script: transitionStarted() } + ParallelAnimation { + PropertyAnimation { properties: "width"; easing.type: Easing.OutQuad; duration: internal.transitionDuration } + PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: internal.transitionDuration } + } + ScriptAction { script: transitionEnded() } + } + }, + // Pop exit transition + Transition { + from: ""; to: "Right" + SequentialAnimation { + ScriptAction { script: transitionStarted() } + ParallelAnimation { + PropertyAnimation { properties: "width"; easing.type: Easing.InQuad; duration: internal.transitionDuration } + PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: internal.transitionDuration } + } + // Workaround for transition animation bug causing ghost view with page pop transition animation + // TODO: Root cause still unknown + PropertyAnimation {} + ScriptAction { script: transitionEnded() } + } + }, + // Push entry transition + Transition { + from: "Right"; to: "" + SequentialAnimation { + ScriptAction { script: transitionStarted() } + ParallelAnimation { + PropertyAnimation { properties: "width"; easing.type: Easing.OutQuad; duration: internal.transitionDuration } + PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: internal.transitionDuration } + } + ScriptAction { script: transitionEnded() } + } + } + ] + + // Cleans up the container and then destroys it. + function cleanup() + { + if (page != null) { + if (owner != container) { + // container is not the owner of the page - re-parent back to original owner + page.visible = false; + page.anchors.fill = undefined + page.parent = owner; + } + } + container.parent = null; + container.visible = false; + destroy(); + } + } + } +} diff --git a/qt-mobile/qml/mobilecomponents/SplitDrawer.qml b/qt-mobile/qml/mobilecomponents/SplitDrawer.qml new file mode 100644 index 000000000..813eae10c --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/SplitDrawer.qml @@ -0,0 +1,234 @@ +/* + * Copyright 2012 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 QtGraphicalEffects 1.0 +import org.kde.plasma.mobilecomponents 0.2 +import "private" + +/**Documented API +Inherits: + Item + +Imports: + QtQuick 2.1 + +Description: + Split Drawers are used to expose additional UI elements which are optional and can be used in conjunction with the main UI elements. For example the Resource Browser uses a Split Drawer to select different kinds of filters for the main view. + +Properties: + bool open: + If true the drawer is open showing the contents of the "drawer" component. + + Item page: + It's the default property. it's the main content of the drawer page, the part that is always shown + + Item drawer: + It's the part that can be pulled in and out, will act as a sidebar. + + int visibleDrawerWidth: the width of the visible portion of the drawer: it updates while dragging or animating +**/ +AbstractDrawer { + id: root + anchors { + fill: parent + } + visible: true + + default property alias page: mainPage.data + property Item contentItem + property alias opened: sidebar.open + property int visibleDrawerWidth: browserFrame.x + + Component.onCompleted: { + mainPage.width = browserFrame.width + } + + onContentItemChanged: contentItem.parent = drawerPage + MouseArea { + id: mouseEventListener + z: 200 + drag.filterChildren: true + //drag.target: browserFrame + property int startMouseX + property int oldMouseX + property int startBrowserFrameX + property bool toggle: false + property string startState + + anchors.fill: parent + + onPressed: { + if (drawerPage.children.length == 0 || (browserFrame.state == "Closed" && mouse.x > Units.gridUnit) || + mouse.x < browserFrame.x) { + mouse.accepted = false; + return; + } + + toggle = true; + startBrowserFrameX = browserFrame.x; + oldMouseX = startMouseX = mouse.x; + startState = browserFrame.state; + browserFrame.state = "Dragging"; + browserFrame.x = startBrowserFrameX; + } + + onPositionChanged: { + browserFrame.x = Math.max(0, browserFrame.x + mouse.x - oldMouseX); + oldMouseX = mouse.x; + if (Math.abs(mouse.x - startMouseX) > Units.gridUnit * 2) { + toggle = false; + } + } + + onReleased: { + if (toggle) { + browserFrame.state = startState == "Open" ? "Closed" : "Open" + } else if (browserFrame.x < sidebar.width / 2) { + browserFrame.state = "Closed"; + } else { + browserFrame.state = "Open"; + } + } + onClicked: root.clicked() + } + + Rectangle { + id: browserFrame + z: 100 + color: Theme.backgroundColor + state: "Closed" + onStateChanged: sidebar.open = (state != "Closed") + + anchors { + top: parent.top + bottom: parent.bottom + } + width: root.width; + + Item { + id: mainPage + onChildrenChanged: mainPage.children[0].anchors.fill = mainPage + + anchors.fill: parent + } + + Rectangle { + anchors.fill: parent + color: "black" + opacity: Math.min(0.4, 0.4 * (browserFrame.x / sidebar.width)) + } + LinearGradient { + width: Units.gridUnit/2 + anchors { + right: parent.left + top: parent.top + bottom: parent.bottom + rightMargin: -1 + } + start: Qt.point(0, 0) + end: Qt.point(Units.gridUnit/2, 0) + gradient: Gradient { + GradientStop { + position: 0.0 + color: "transparent" + } + GradientStop { + position: 0.7 + color: Qt.rgba(0, 0, 0, 0.15) + } + GradientStop { + position: 1.0 + color: Qt.rgba(0, 0, 0, 0.3) + } + } + } + + states: [ + State { + name: "Open" + PropertyChanges { + target: browserFrame + x: sidebar.width + } + + }, + State { + name: "Dragging" + PropertyChanges { + target: browserFrame + x: mouseEventListener.startBrowserFrameX + } + }, + State { + name: "Closed" + PropertyChanges { + target: browserFrame + x: 0 + } + } + ] + + transitions: [ + Transition { + //Exclude Dragging + to: "Open,Closed,Hidden" + NumberAnimation { + properties: "x" + duration: Units.longDuration + easing.type: Easing.InOutQuad + } + } + ] + } + + + Item { + id: sidebar + + property bool open: false + onOpenChanged: { + if (drawerPage.children.length == 0) { + return; + } + + if (open) { + browserFrame.state = "Open"; + } else { + browserFrame.state = "Closed"; + } + } + + width: Math.min(parent.width/4*3, Math.max(root.contentItem ? root.contentItem.implicitWidth : 0, parent.width/4)) + + anchors { + left: parent.left + top: parent.top + bottom: parent.bottom + } + + Item { + id: drawerPage + anchors.fill: parent + clip: false + onChildrenChanged: drawerPage.children[0].anchors.fill = drawerPage + } + } +} + diff --git a/qt-mobile/qml/mobilecomponents/Theme.qml b/qt-mobile/qml/mobilecomponents/Theme.qml new file mode 100644 index 000000000..07bb561bd --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Theme.qml @@ -0,0 +1,62 @@ +/* + * 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.4 + +pragma Singleton + +/*! + \qmltype Theme + \inqmlmodule Material 0.1 + + \brief Provides access to standard colors that follow the Material Design specification. + + See \l {http://www.google.com/design/spec/style/color.html#color-ui-color-application} for + details about choosing a color scheme for your application. + */ +QtObject { + id: theme + + property color textColor: Qt.rgba(0,0,0, 0.54) + + property color highlightColor: "#2196F3" + property color backgroundColor: "#f3f3f3" + property color linkColor: "#2196F3" + property color visitedLinkColor: "#2196F3" + + property color buttonTextColor: Qt.rgba(0,0,0, 0.54) + property color buttonBackgroundColor: "#f3f3f3" + property color buttonHoverColor: "#2196F3" + property color buttonFocusColor: "#2196F3" + + property color viewTextColor: Qt.rgba(0,0,0, 0.54) + property color viewBackgroundColor: "#f3f3f3" + property color viewHoverColor: "#2196F3" + property color viewFocusColor: "#2196F3" + + property color complementaryTextColor: "#f3f3f3" + property color complementaryBackgroundColor: Qt.rgba(0,0,0, 0.54) + property color complementaryHoverColor: "#2196F3" + property color complementaryFocusColor: "#2196F3" + + property font defaultFont: fontMetrics.font + + property variant fontMetrics: TextMetrics {} + +} diff --git a/qt-mobile/qml/mobilecomponents/Units.qml b/qt-mobile/qml/mobilecomponents/Units.qml new file mode 100644 index 000000000..971336301 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/Units.qml @@ -0,0 +1,101 @@ +/* + * 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.4 +import QtQuick.Window 2.2 + +pragma Singleton + + +QtObject { + id: units + + /** + * The fundamental unit of space that should be used for sizes, expressed in pixels. + * Given the screen has an accurate DPI settings, it corresponds to a width of + * the capital letter M + */ + property int gridUnit: fontMetrics.height + + /** + * units.iconSizes provides access to platform-dependent icon sizing + * + * The icon sizes provided are normalized for different DPI, so icons + * will scale depending on the DPI. + * + * Icon sizes from KIconLoader, adjusted to devicePixelRatio: + * * small + * * smallMedium + * * medium + * * large + * * huge + * * enormous + * + * Not devicePixelRation-adjusted:: + * * desktop + */ + property QtObject iconSizes: QtObject { + property int small: 16 * devicePixelRatio + property int smallMedium: 22 * devicePixelRatio + property int medium: 32 * devicePixelRatio + property int large: 48 * devicePixelRatio + property int huge: 64 * devicePixelRatio + property int enormous: 128 * devicePixelRatio + } + + /** + * units.smallSpacing is the amount of spacing that should be used around smaller UI elements, + * for example as spacing in Columns. Internally, this size depends on the size of + * the default font as rendered on the screen, so it takes user-configured font size and DPI + * into account. + */ + property int smallSpacing: gridUnit/4 + + /** + * units.largeSpacing is the amount of spacing that should be used inside bigger UI elements, + * for example between an icon and the corresponding text. Internally, this size depends on + * the size of the default font as rendered on the screen, so it takes user-configured font + * size and DPI into account. + */ + property int largeSpacing: gridUnit + + /** + * The ratio between physical and device-independent pixels. This value does not depend on the \ + * size of the configured font. If you want to take font sizes into account when scaling elements, + * use theme.mSize(theme.defaultFont), units.smallSpacing and units.largeSpacing. + * The devicePixelRatio follows the definition of "device independent pixel" by Microsoft. + */ + property real devicePixelRatio: Screen.devicePixelRatio + + /** + * units.longDuration should be used for longer, screen-covering animations, for opening and + * closing of dialogs and other "not too small" animations + */ + property int longDuration: 250 + + /** + * units.shortDuration should be used for short animations, such as accentuating a UI event, + * hover events, etc.. + */ + property int shortDuration: 150 + + property variant fontMetrics: TextMetrics { + text: "M" + } +} diff --git a/qt-mobile/qml/mobilecomponents/icons/go-next.svg b/qt-mobile/qml/mobilecomponents/icons/go-next.svg new file mode 100644 index 000000000..f2828f18f --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/icons/go-next.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/qt-mobile/qml/mobilecomponents/icons/go-previous.svg b/qt-mobile/qml/mobilecomponents/icons/go-previous.svg new file mode 100644 index 000000000..7cfd42891 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/icons/go-previous.svg @@ -0,0 +1,463 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/qt-mobile/qml/mobilecomponents/private/AbstractDrawer.qml b/qt-mobile/qml/mobilecomponents/private/AbstractDrawer.qml new file mode 100644 index 000000000..db662509c --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/private/AbstractDrawer.qml @@ -0,0 +1,47 @@ +/* + * 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 QtGraphicalEffects 1.0 +import org.kde.plasma.mobilecomponents 0.2 + +//TODO: This will become a QQC2 Drawer +//providing just a dummy api for now +Item { + id: root + anchors.fill: parent + z: 9999 + + default property alias page: mainPage.data + property Item contentItem + property bool opened + property int edge: Qt.LeftEdge + property real position: 0 + + function open () { } + function close () { } + signal clicked + + Item { + id: mainPage + anchors.fill: parent + onChildrenChanged: mainPage.children[0].anchors.fill = mainPage + } +} + diff --git a/qt-mobile/qml/mobilecomponents/private/ActionButton.qml b/qt-mobile/qml/mobilecomponents/private/ActionButton.qml new file mode 100644 index 000000000..5bf6ab086 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/private/ActionButton.qml @@ -0,0 +1,142 @@ +/* + * 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 QtGraphicalEffects 1.0 +import org.kde.plasma.mobilecomponents 0.2 + +MouseArea { + id: button + property alias iconSource: icon.source + Layout.minimumWidth: Units.iconSizes.large + Layout.maximumWidth: Layout.minimumWidth + implicitWidth: Units.iconSizes.large + implicitHeight: width + drag { + target: button + axis: Drag.XAxis + minimumX: contextDrawer ? 0 : parent.width/2 - width/2 + maximumX: globalDrawer ? parent.width : parent.width/2 - width/2 + } + + transform: Translate {} + onReleased: { + if (globalDrawer && x > Math.min(parent.width/4*3, parent.width/2 + globalDrawer.contentItem.width/2)) { + globalDrawer.open(); + contextDrawer.close(); + } else if (contextDrawer && x < Math.max(parent.width/4, parent.width/2 - contextDrawer.contentItem.width/2)) { + if (contextDrawer) { + contextDrawer.open(); + } + if (globalDrawer) { + globalDrawer.close(); + } + } else { + if (globalDrawer) { + globalDrawer.close(); + } + if (contextDrawer) { + contextDrawer.close(); + } + } + } + Connections { + target: globalDrawer + onPositionChanged: { + if (!button.pressed) { + button.x = globalDrawer.contentItem.width * globalDrawer.position + button.parent.width/2 - button.width/2; + } + } + } + Connections { + target: contextDrawer + onPositionChanged: { + if (!button.pressed) { + button.x = button.parent.width/2 - button.width/2 - contextDrawer.contentItem.width * contextDrawer.position; + } + } + } + onXChanged: { + if (button.pressed) { + globalDrawer.position = Math.min(1, Math.max(0, (x - button.parent.width/2 + button.width/2)/globalDrawer.contentItem.width)); + contextDrawer.position = Math.min(1, Math.max(0, (button.parent.width/2 - button.width/2 - x)/contextDrawer.contentItem.width)); + } + } + + Item { + id: background + anchors { + fill: parent + leftMargin: -Units.gridUnit + rightMargin: -Units.gridUnit + } + Rectangle { + radius: width/2 + anchors.centerIn: parent + height: parent.height - Units.smallSpacing*2 + width: height + color: button.pressed ? Theme.highlightColor : Theme.backgroundColor + Icon { + id: icon + anchors { + fill: parent + margins: Units.smallSpacing + } + } + ActionButtonArrow { + anchors { + right: parent.left + rightMargin: Units.smallSpacing + } + visible: contextDrawer && contextDrawer.enabled + inverted: true + } + ActionButtonArrow { + anchors { + left: parent.right + leftMargin: Units.smallSpacing + } + visible: globalDrawer && globalDrawer.enabled + } + Behavior on color { + ColorAnimation { + duration: Units.longDuration + easing.type: Easing.InOutQuad + } + } + Behavior on x { + NumberAnimation { + duration: Units.longDuration + easing.type: Easing.InOutQuad + } + } + } + } + DropShadow { + anchors.fill: background + horizontalOffset: 0 + verticalOffset: Units.smallSpacing/2 + radius: Units.gridUnit / 2.4 + samples: 16 + color: button.pressed ? "transparent" : Qt.rgba(0, 0, 0, 0.5) + source: background + } +} + diff --git a/qt-mobile/qml/mobilecomponents/private/ActionButtonArrow.qml b/qt-mobile/qml/mobilecomponents/private/ActionButtonArrow.qml new file mode 100644 index 000000000..7b585452b --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/private/ActionButtonArrow.qml @@ -0,0 +1,56 @@ +/* + * 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 QtGraphicalEffects 1.0 +import org.kde.plasma.mobilecomponents 0.2 + +Canvas { + id: canvas + width: Units.gridUnit + height: width + property bool inverted + property color color: parent.color + anchors.verticalCenter: parent.verticalCenter + + onColorChanged: requestPaint() + + onPaint: { + var ctx = canvas.getContext("2d"); + ctx.fillStyle = canvas.color; + ctx.beginPath(); + if (inverted) { + ctx.moveTo(canvas.width, 0); + ctx.bezierCurveTo(canvas.width-canvas.width/8, 0, + canvas.width-canvas.width/8, canvas.height, + canvas.width, canvas.height); + ctx.lineTo(0, canvas.height/2); + } else { + ctx.moveTo(0, 0); + ctx.bezierCurveTo(canvas.width/8, 0, + canvas.width/8, canvas.height, + 0, canvas.height); + ctx.lineTo(canvas.width, canvas.height/2); + //ctx.lineTo(0, canvas.height); + } + ctx.fill(); + } +} + diff --git a/qt-mobile/qml/mobilecomponents/private/PageStack.js b/qt-mobile/qml/mobilecomponents/private/PageStack.js new file mode 100644 index 000000000..8986956b0 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/private/PageStack.js @@ -0,0 +1,243 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the Qt Components project. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** $QT_END_LICENSE$ +** +****************************************************************************/ + +// Page stack. Items are page containers. +var pageStack = []; + +// Page component cache map. Key is page url, value is page component. +var componentCache = {}; + +// Returns the page stack depth. +function getDepth() { + return pageStack.length; +} + +// Pushes a page on the stack. +function push(page, properties, replace, immediate) { + // page order sanity check + if ((!replace && page == currentPage) + || (replace && pageStack.length > 1 + && page == pageStack[pageStack.length - 2].page)) { + throw new Error("Cannot navigate so that the resulting page stack has two consecutive entries of the same page instance."); + } + + // 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; + } + } + + // get the current container + var oldContainer; + if (pageStack.length) { + oldContainer = pageStack[pageStack.length - 1]; + } + + // pop the old container off the stack if this is a replace + if (oldContainer && replace) { + pageStack.pop(); + } + + // 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") { + tProps = tPage.properties; + tPage = tPage.page; + } + pageStack.push(initPage(tPage, tProps)); + } + } + + // initialize the page + var container = initPage(page, properties); + + // push the page container onto the stack + pageStack.push(container); + + depth = pageStack.length; + currentPage = container.page; + + // perform page transition + //FIXME: this should be in for PageStack, out for PageRow? + //immediate = immediate || !oldContainer; + var orientationChange = false; + if (oldContainer) { + orientationChange = orientationChanges(oldContainer.page, container.page); + oldContainer.pushExit(replace, immediate, orientationChange); + } + + // sync tool bar + var tools = container.page.tools || null; + if (toolBar) { + toolBar.setTools(tools, immediate ? "set" : replace ? "replace" : "push"); + } + + container.pushEnter(immediate, orientationChange); + return container.page; +} + +// Initializes a page and its container. +function initPage(page, properties) { + var container = containerComponent.createObject(root); + + var pageComp; + if (page.createObject) { + // page defined as component + pageComp = page; + } else if (typeof page == "string") { + // page defined as string (a url) + pageComp = componentCache[page]; + if (!pageComp) { + pageComp = 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 = container; + } else { + container.owner = page.parent; + } + + // the page has to be reparented if + if (page.parent != container.pageParent) { + page.parent = container.pageParent; + } + + if (page.pageStack !== undefined) { + page.pageStack = root; + } + + page.anchors.fill = container.pageParent + + return container; +} + +// Pops a page off the stack. +function pop(page, immediate) { + // make sure there are enough pages in the stack to pop + if (pageStack.length > 1) { + //unwind to itself means no pop + if (page !== undefined && page == pageStack[pageStack.length - 1].page) { + return + } + // pop the current container off the stack and get the next container + var oldContainer = pageStack.pop(); + var container = pageStack[pageStack.length - 1]; + if (page !== undefined) { + // an unwind target has been specified - pop until we find it + while (page != container.page && pageStack.length > 1) { + pageStack.pop(); + container.popExit(immediate, false); + container = pageStack[pageStack.length - 1]; + } + } + + depth = pageStack.length; + currentPage = container.page; + + // perform page transition + var orientationChange = orientationChanges(oldContainer.page, container.page); + oldContainer.popExit(immediate, orientationChange); + container.popEnter(immediate, orientationChange); + + // sync tool bar + var tools = container.page.tools || null; + if (toolBar) { + toolBar.setTools(tools, immediate ? "set" : "pop"); + } + return oldContainer.page; + } else { + return null; + } +} + +// Checks if the orientation changes between oldPage and newPage +function orientationChanges(oldPage, newPage) { + return newPage.orientationLock != 0 //PlasmaComponents.PageOrientation.Automatic + && newPage.orientationLock != 3//PlasmaComponents.PageOrientation.LockPrevious + && newPage.orientationLock != oldPage.orientationLock +} + +// Clears the page stack. +function clear() { + var container; + while (container = pageStack.pop()) { + container.cleanup(); + } + depth = 0; + currentPage = null; +} + +// Iterates through all pages in the stack (top to bottom) to find a page. +function find(func) { + for (var i = pageStack.length - 1; i >= 0; i--) { + var page = pageStack[i].page; + if (func(page)) { + return page; + } + } + return null; +} + diff --git a/qt-mobile/qml/mobilecomponents/private/qmldir b/qt-mobile/qml/mobilecomponents/private/qmldir new file mode 100644 index 000000000..35e158210 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/private/qmldir @@ -0,0 +1,3 @@ +module org.kde.plasma.mobilecomponents.private +#plugin mobilecomponentsprivateplugin + diff --git a/qt-mobile/qml/mobilecomponents/qmldir b/qt-mobile/qml/mobilecomponents/qmldir new file mode 100644 index 000000000..53daf98a2 --- /dev/null +++ b/qt-mobile/qml/mobilecomponents/qmldir @@ -0,0 +1,19 @@ +module org.kde.plasma.mobilecomponents +#plugin mobilecomponentsplugin + +singleton Units 0.2 Units.qml +singleton Theme 0.2 Theme.qml + +IconGrid 0.2 IconGrid.qml +OverlayDrawer 0.2 OverlayDrawer.qml +SplitDrawer 0.2 SplitDrawer.qml +ActionGroup 0.2 ActionGroup.qml +ApplicationWindow 0.2 ApplicationWindow.qml +ContextDrawer 0.2 ContextDrawer.qml +GlobalDrawer 0.2 GlobalDrawer.qml +Page 0.2 Page.qml +Icon 0.2 Icon.qml +Label 0.2 Label.qml +Heading 0.2 Heading.qml +ListItem 0.2 ListItem.qml +ListItemWithActions 0.2 ListItemWithActions.qml -- cgit v1.2.3-70-g09d2 From 4d94441b6db8040b4c0dc6c302d3389a1bafffee Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 17:23:47 +0100 Subject: Add new files to the qrc MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This adds only the bits from MobileComponent that we already use to the qrc file, including two icons go-next and go-previous (2 simple SVG icons taken from the breeze theme). Signed-off-by: Sebastian Kügler --- qt-mobile/qml/mobile-resources.qrc | 55 +++++++++++++++++++++++++------------- 1 file changed, 36 insertions(+), 19 deletions(-) (limited to 'qt-mobile') diff --git a/qt-mobile/qml/mobile-resources.qrc b/qt-mobile/qml/mobile-resources.qrc index 5d2065e22..d6c0825d4 100644 --- a/qt-mobile/qml/mobile-resources.qrc +++ b/qt-mobile/qml/mobile-resources.qrc @@ -1,21 +1,38 @@ - - main.qml - TextButton.qml - Preferences.qml - DiveList.qml - DiveDetails.qml - DownloadFromDiveComputer.qml - Log.qml - TopBar.qml - ThemeTest.qml - StartPage.qml - components/Label.qml - ../../icons/subsurface-mobile-icon.png - - - theme/Theme.qml - theme/qmldir - theme/Units.qml - + + main.qml + TextButton.qml + Preferences.qml + DiveList.qml + DiveDetails.qml + DownloadFromDiveComputer.qml + Log.qml + TopBar.qml + ThemeTest.qml + StartPage.qml + dive.jpg + components/Label.qml + ../../icons/subsurface-mobile-icon.png + + + mobilecomponents/qmldir + mobilecomponents/ActionGroup.qml + mobilecomponents/ApplicationWindow.qml + mobilecomponents/GlobalDrawer.qml + mobilecomponents/Icon.qml + mobilecomponents/Heading.qml + mobilecomponents/PageRow.qml + mobilecomponents/Label.qml + mobilecomponents/ListItem.qml + mobilecomponents/OverlayDrawer.qml + mobilecomponents/Theme.qml + mobilecomponents/Units.qml + mobilecomponents/private/ActionButton.qml + mobilecomponents/private/ActionButtonArrow.qml + mobilecomponents/private/AbstractDrawer.qml + mobilecomponents/private/PageStack.js + mobilecomponents/private/qmldir + mobilecomponents/icons/go-next.svg + mobilecomponents/icons/go-previous.svg + -- cgit v1.2.3-70-g09d2 From 2668da3f60d0dc28d1777c1d6cf67e1ee8f88447 Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 17:27:20 +0100 Subject: use mobilecomponents for our pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is a dumb port of a number of properties to use the new theme and units API. - import the plugin - change accessors from units and theme to MobileComponents.Unit and MobileComponents.Theme Signed-off-by: Sebastian Kügler --- qt-mobile/qml/CloudStorage.qml | 8 ++++---- qt-mobile/qml/DiveDetails.qml | 7 +++---- qt-mobile/qml/Preferences.qml | 13 +++++++------ qt-mobile/qml/StartPage.qml | 17 +++++++++-------- qt-mobile/qml/TopBar.qml | 29 +++++++++++++++-------------- 5 files changed, 38 insertions(+), 36 deletions(-) (limited to 'qt-mobile') diff --git a/qt-mobile/qml/CloudStorage.qml b/qt-mobile/qml/CloudStorage.qml index b199be739..3b94aa5e6 100644 --- a/qt-mobile/qml/CloudStorage.qml +++ b/qt-mobile/qml/CloudStorage.qml @@ -17,12 +17,12 @@ Item { GridLayout { columns: 2 anchors.fill: parent - anchors.margins: units.gridUnit + anchors.margins: MobileComponents.Units.gridUnit Label { text: "Cloud credentials" - Layout.bottomMargin: units.largeSpacing - font.pointSize: units.titlePointSize + Layout.bottomMargin: MobileComponents.Units.largeSpacing + font.pointSize: MobileComponents.Units.titlePointSize Layout.columnSpan: 2 } @@ -72,7 +72,7 @@ Item { id: savePassword } - Item { width: units.gridUnit; height: width } + Item { width: MobileComponents.Units.gridUnit; height: width } Item { height: saveButton.height width: saveButton.width diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml index 32fa73042..5b597a0df 100644 --- a/qt-mobile/qml/DiveDetails.qml +++ b/qt-mobile/qml/DiveDetails.qml @@ -1,10 +1,9 @@ import QtQuick 2.3 import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.2 -import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 -import QtQuick.Window 2.2 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 Item { @@ -45,7 +44,7 @@ Item { Label { Layout.columnSpan: 2 - font.pointSize: units.titlePointSize + font.pointSize: MobileComponents.Units.titlePointSize text: "Dive " + number + " (" + date + ")" } @@ -55,7 +54,7 @@ Item { Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height QMLProfile { id: qmlProfile - height: units.gridUnit * 25 + height: MobileComponents.Units.gridUnit * 25 anchors { top: parent.top left: parent.left diff --git a/qt-mobile/qml/Preferences.qml b/qt-mobile/qml/Preferences.qml index 59861009c..1e1274e21 100644 --- a/qt-mobile/qml/Preferences.qml +++ b/qt-mobile/qml/Preferences.qml @@ -3,6 +3,7 @@ import QtQuick.Controls 1.2 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 Item { @@ -17,12 +18,12 @@ Item { GridLayout { columns: 2 anchors.fill: parent - anchors.margins: units.gridUnit + anchors.margins: MobileComponents.Units.gridUnit Label { text: "Cloud credentials" - Layout.bottomMargin: units.largeSpacing - font.pointSize: units.titlePointSize + Layout.bottomMargin: MobileComponents.Units.largeSpacing + font.pointSize: MobileComponents.Units.titlePointSize Layout.columnSpan: 2 } @@ -74,8 +75,8 @@ Item { Label { text: "Subsurface GPS data webservice" - Layout.bottomMargin: units.largeSpacing - font.pointSize: units.titlePointSize + Layout.bottomMargin: MobileComponents.Units.largeSpacing + font.pointSize: MobileComponents.Units.titlePointSize Layout.columnSpan: 2 } @@ -101,7 +102,7 @@ Item { Layout.fillWidth: true } - Item { width: units.gridUnit; height: width } + Item { width: MobileComponents.Units.gridUnit; height: width } Item { height: saveButton.height width: saveButton.width diff --git a/qt-mobile/qml/StartPage.qml b/qt-mobile/qml/StartPage.qml index 31388f52f..8041a6786 100644 --- a/qt-mobile/qml/StartPage.qml +++ b/qt-mobile/qml/StartPage.qml @@ -1,32 +1,33 @@ import QtQuick 2.5 import QtQuick.Controls 1.2 import QtQuick.Layouts 1.1 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents Item { ColumnLayout { id: startpage anchors.fill: parent - anchors.margins: units.largeSpacing + anchors.margins: MobileComponents.Units.largeSpacing property int buttonWidth: welcomeText.width * 0.66 - Label { - Layout.bottomMargin: units.largeSpacing + MobileComponents.Label { + Layout.bottomMargin: MobileComponents.Units.largeSpacing text: "Subsurface Divelog" font.pointSize: welcomeText.font.pointSize * 2 } - Label { + MobileComponents.Label { id: welcomeText Layout.fillWidth: true - Layout.bottomMargin: units.largeSpacing + Layout.bottomMargin: MobileComponents.Units.largeSpacing text: "No recorded dives found. You can download your dives to this device from the Subsurface cloud storage service, from your dive computer, or add them manually." wrapMode: Text.WordWrap Layout.columnSpan: 2 } Button { id: cloudstorageButton - Layout.bottomMargin: units.largeSpacing + Layout.bottomMargin: MobileComponents.Units.largeSpacing Layout.preferredWidth: startpage.buttonWidth text: "Connect to CloudStorage..." onClicked: { @@ -36,7 +37,7 @@ Item { Button { id: computerButton Layout.preferredWidth: startpage.buttonWidth - Layout.bottomMargin: units.largeSpacing + Layout.bottomMargin: MobileComponents.Units.largeSpacing text: "Transfer from dive computer..." onClicked: { stackView.push(downloadDivesWindow) @@ -45,7 +46,7 @@ Item { Button { id: manualButton Layout.preferredWidth: startpage.buttonWidth - Layout.bottomMargin: units.largeSpacing + Layout.bottomMargin: MobileComponents.Units.largeSpacing text: "Add dive manually..." onClicked: { manager.addDive(); diff --git a/qt-mobile/qml/TopBar.qml b/qt-mobile/qml/TopBar.qml index 624002242..43a5ad6af 100644 --- a/qt-mobile/qml/TopBar.qml +++ b/qt-mobile/qml/TopBar.qml @@ -5,6 +5,7 @@ import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 import QtQuick.Window 2.2 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 Rectangle { @@ -12,17 +13,17 @@ Rectangle { property bool goBack: (stackView.depth > 1) - color: theme.accentColor - Layout.minimumHeight: units.gridUnit * 2 + units.largeSpacing + color: MobileComponents.Theme.accentColor + Layout.minimumHeight: MobileComponents.Units.gridUnit * 2 + MobileComponents.Units.largeSpacing Layout.fillWidth: true Layout.margins: 0 RowLayout { anchors.bottom: topPart.bottom - anchors.bottomMargin: units.largeSpacing / 2 + anchors.bottomMargin: MobileComponents.Units.largeSpacing / 2 anchors.left: topPart.left - anchors.leftMargin: units.largeSpacing / 2 + anchors.leftMargin: MobileComponents.Units.largeSpacing / 2 anchors.right: topPart.right - anchors.rightMargin: units.largeSpacing / 2 + anchors.rightMargin: MobileComponents.Units.largeSpacing / 2 Item { Layout.preferredHeight: subsurfaceLogo.height Image { @@ -32,7 +33,7 @@ Rectangle { top: parent.top left: parent.left } - width: units.gridUnit * 2 + width: MobileComponents.Units.gridUnit * 2 height: width } Text { @@ -41,12 +42,12 @@ Rectangle { anchors { left: subsurfaceLogo.right bottom: subsurfaceLogo.bottom - leftMargin: units.gridUnit / 2 + leftMargin: MobileComponents.Units.gridUnit / 2 } - font.pointSize: units.fontMetrics.font.pointSize * 1.5 + font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 1.5 verticalAlignment: Text.AlignBottom Layout.fillWidth: false - color: theme.accentTextColor + color: MobileComponents.Theme.accentTextColor } } Item { @@ -57,17 +58,17 @@ Rectangle { // Display back arrow or menu button text: topPart.goBack ? "\u2190" : "\u22ee" anchors.right: parent.right - Layout.preferredWidth: units.gridUnit * 2 + Layout.preferredWidth: MobileComponents.Units.gridUnit * 2 Layout.preferredHeight: parent.height style: ButtonStyle { background: Rectangle { - implicitWidth: units.gridUnit * 2 - color: theme.accentColor + implicitWidth: MobileComponents.Units.gridUnit * 2 + color: MobileComponents.Theme.accentColor } label: Text { id: txt - color: theme.accentTextColor - font.pointSize: units.fontMetrics.font.pointSize * 2 + color: MobileComponents.Theme.accentTextColor + font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 2 font.bold: true text: control.text horizontalAlignment: Text.AlignHCenter -- cgit v1.2.3-70-g09d2 From 3c1d7c0074d1165030cc3834fc09ba326dfd1b7b Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 17:30:41 +0100 Subject: port these as well to mobilecomponents MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Sebastian Kügler --- qt-mobile/qml/DiveList.qml | 63 +++++++++++++++++++------------------- qt-mobile/qml/ThemeTest.qml | 33 ++++++++++---------- qt-mobile/qml/components/Label.qml | 7 ++--- 3 files changed, 51 insertions(+), 52 deletions(-) (limited to 'qt-mobile') diff --git a/qt-mobile/qml/DiveList.qml b/qt-mobile/qml/DiveList.qml index 4f147bf6d..2a9c53de6 100644 --- a/qt-mobile/qml/DiveList.qml +++ b/qt-mobile/qml/DiveList.qml @@ -1,9 +1,10 @@ -import QtQuick 2.3 +import QtQuick 2.4 import QtQuick.Controls 1.2 +import QtQuick.Layouts 1.2 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 -import QtQuick.Layouts 1.0 Rectangle { id: page @@ -16,7 +17,7 @@ Rectangle { property real detailsOpacity : 0 - width: diveListView.width - units.smallSpacing + width: diveListView.width - MobileComponents.Units.smallSpacing height: childrenRect.height //Mouse region: When clicked, the mode changes to details view @@ -41,17 +42,17 @@ Rectangle { //Layout of the page: (mini profile, dive no, date at the top //And other details at the bottom. Item { - x: units.smallSpacing - width: parent.width - units.smallSpacing * 2 - height: childrenRect.height + units.smallSpacing * 2 - //spacing: units.smallSpacing / 2 - anchors.margins: units.smallSpacing + x: MobileComponents.Units.smallSpacing + width: parent.width - MobileComponents.Units.smallSpacing * 2 + height: childrenRect.height + MobileComponents.Units.smallSpacing * 2 + //spacing: MobileComponents.Units.smallSpacing / 2 + anchors.margins: MobileComponents.Units.smallSpacing Text { id: locationText text: location - color: theme.textColor - //font.pointSize: Math.round(units.fontMetrics.pointSize * 1.2) // why this doesn't work is a mystery to me, so ... + color: MobileComponents.Theme.textColor + //font.pointSize: Math.round(MobileComponents.Units.fontMetrics.pointSize * 1.2) // why this doesn't work is a mystery to me, so ... scale: 1.2 // Let's see how this works, otherwise, we'll need the default point size somewhere transformOrigin: Item.TopLeft elide: Text.ElideRight @@ -66,12 +67,12 @@ Rectangle { id: dateLabel text: date opacity: 0.6 - color: theme.textColor - font.pointSize: units.smallPointSize + color: MobileComponents.Theme.textColor + font.pointSize: smallPointSize anchors { right: parent.right top: parent.top - bottomMargin: units.smallSpacing / 2 + bottomMargin: MobileComponents.Units.smallSpacing / 2 } } Row { @@ -84,41 +85,41 @@ Rectangle { Text { text: 'Depth: ' opacity: 0.6 - color: theme.textColor + color: MobileComponents.Theme.textColor } Text { text: depth - width: Math.max(units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview - color: theme.textColor + width: Math.max(MobileComponents.Units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview + color: MobileComponents.Theme.textColor } Text { text: 'Duration: ' opacity: 0.6 - color: theme.textColor + color: MobileComponents.Theme.textColor } Text { text: duration - color: theme.textColor + color: MobileComponents.Theme.textColor } } Text { id: numberText text: "#" + diveNumber - color: theme.textColor + color: MobileComponents.Theme.textColor scale: 1.2 transformOrigin: Item.BottomRight opacity: 0.4 anchors { right: parent.right - topMargin: units.smallSpacing + topMargin: MobileComponents.Units.smallSpacing top: locationText.bottom } } //Text { text: location; width: parent.width } Rectangle { - color: theme.textColor + color: MobileComponents.Theme.textColor opacity: .2 - height: Math.max(1, units.gridUnit / 24) // we really want a thin line + height: Math.max(1, MobileComponents.Units.gridUnit / 24) // we really want a thin line anchors { left: parent.left right: parent.right @@ -132,8 +133,8 @@ Rectangle { Component { id: tripHeading Item { - width: page.width - units.smallSpacing * 2 - height: childrenRect.height + units.smallSpacing * 2 + width: page.width - MobileComponents.Units.smallSpacing * 2 + height: childrenRect.height + MobileComponents.Units.smallSpacing * 2 Text { id: sectionText @@ -141,21 +142,21 @@ Rectangle { anchors { top: parent.top left: parent.left - leftMargin: units.smallSpacing + leftMargin: MobileComponents.Units.smallSpacing right: parent.right } - color: theme.textColor + color: MobileComponents.Theme.textColor font.pointSize: 16 } Rectangle { - height: Math.max(2, units.gridUnit / 12) // we want a thicker line + height: Math.max(2, MobileComponents.Units.gridUnit / 12) // we want a thicker line anchors { top: sectionText.bottom left: parent.left - leftMargin: units.smallSpacing + leftMargin: MobileComponents.Units.smallSpacing right: parent.right } - color: theme.accentColor + color: MobileComponents.Theme.accentColor } } } @@ -166,7 +167,7 @@ Rectangle { model: diveModel delegate: diveDelegate boundsBehavior: Flickable.StopAtBounds - //highlight: Rectangle { color: theme.highlightColor; width: units.smallSpacing } + //highlight: Rectangle { color: MobileComponents.Theme.highlightColor; width: MobileComponents.Units.smallSpacing } focus: true clip: true section.property: "trip" @@ -177,7 +178,7 @@ Rectangle { anchors.fill: parent opacity: (diveListView.count == 0) ? 1.0 : 0 visible: opacity > 0 - Behavior on opacity { NumberAnimation { duration: units.shortDuration } } + Behavior on opacity { NumberAnimation { duration: MobileComponents.Units.shortDuration } } Component.onCompleted: { print("diveListView.count " + diveListView.count); } diff --git a/qt-mobile/qml/ThemeTest.qml b/qt-mobile/qml/ThemeTest.qml index 7452acc1b..b65bc9eef 100644 --- a/qt-mobile/qml/ThemeTest.qml +++ b/qt-mobile/qml/ThemeTest.qml @@ -1,11 +1,12 @@ import QtQuick 2.5 import QtQuick.Layouts 1.1 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents GridLayout { id: themetest columns: 2 - Label { + MobileComponents.Label { Layout.columnSpan: 2 Layout.fillHeight: true text: "Theme Information" @@ -15,39 +16,39 @@ GridLayout { id: fm } - Label { - text: "units.gridUnit:" + MobileComponents.Label { + text: "MobileComponents.Units.gridUnit:" } - Label { - text: units.gridUnit + MobileComponents.Label { + text: MobileComponents.Units.gridUnit } - Label { - text: "units.devicePixelRatio:" + MobileComponents.Label { + text: "MobileComponents.Units.devicePixelRatio:" } - Label { - text: units.devicePixelRatio + MobileComponents.Label { + text: MobileComponents.Units.devicePixelRatio } - Label { + MobileComponents.Label { text: "FontMetrics pointSize:" } - Label { + MobileComponents.Label { text: fm.font.pointSize } - Label { + MobileComponents.Label { text: "FontMetrics pixelSize:" } - Label { + MobileComponents.Label { text: fm.height } - Label { + MobileComponents.Label { text: "hand-computed devicePixelRatio:" } - Label { + MobileComponents.Label { text: fm.height / fm.font.pointSize } @@ -65,7 +66,7 @@ GridLayout { text: font.pointSize } - Label { + MobileComponents.Label { Layout.columnSpan: 2 Layout.fillHeight: true } diff --git a/qt-mobile/qml/components/Label.qml b/qt-mobile/qml/components/Label.qml index acbc079e2..65af7e0db 100644 --- a/qt-mobile/qml/components/Label.qml +++ b/qt-mobile/qml/components/Label.qml @@ -1,9 +1,6 @@ import QtQuick 2.5 -//import QtQuick.Controls 1.2 as QuickControls -import QtQuick.Window 2.2 -import QtQuick.Dialogs 1.2 -import QtQuick.Layouts 1.1 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents Text { - color: theme.textColor + color: MobileComponents.Theme.textColor } -- cgit v1.2.3-70-g09d2 From c302f222ce7dfab1410239faa1161ec2b4413a04 Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 17:40:00 +0100 Subject: Add banner image for the left drawer menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This picture is used for the header part of the drawer which can be swiped in from the left. I'm sure Dirk has a better one, but this works quite nicely until he gets to replace it. Signed-off-by: Sebastian Kügler --- qt-mobile/qml/dive.jpg | Bin 0 -> 235727 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 qt-mobile/qml/dive.jpg (limited to 'qt-mobile') diff --git a/qt-mobile/qml/dive.jpg b/qt-mobile/qml/dive.jpg new file mode 100644 index 000000000..56445648a Binary files /dev/null and b/qt-mobile/qml/dive.jpg differ -- cgit v1.2.3-70-g09d2 From 6ffef818a8d34fdc8aef70c3515c2b91d8d297ac Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 17:43:56 +0100 Subject: Rework central navigation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This patch is the part implementing the drawers and in-app page navigation. In more detail: - main.qml uses the mobilecomponents plugin and the APIs as already changed in the other components - The extended properties have moved into the root item (for now, they'll get properly encapsulated later) - A menu can be swiped in from the left - The application makes better use when used horizontally (if there's enough space, so depending on the display you can get divelist and -details next to each other, one phone/portrait formfactor, the layout stays in a single column. - The options for GPS have been grouped into a submenu This change follows the Plasma mobile human interface guidelines. These changes are actually relatively small considered what they're doing, most of the logic is encapsulated in mobilecomponents' PageRow and *Drawer classes. The previous navigation pattern is actually a subset of this one, so it still works. Signed-off-by: Sebastian Kügler --- qt-mobile/qml/main.qml | 138 +++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 117 insertions(+), 21 deletions(-) (limited to 'qt-mobile') diff --git a/qt-mobile/qml/main.qml b/qt-mobile/qml/main.qml index c3117b9d5..0feaa002e 100644 --- a/qt-mobile/qml/main.qml +++ b/qt-mobile/qml/main.qml @@ -1,4 +1,4 @@ -import QtQuick 2.3 +import QtQuick 2.4 import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.2 import QtQuick.Window 2.2 @@ -6,29 +6,125 @@ import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 import QtQuick.Window 2.2 import org.subsurfacedivelog.mobile 1.0 -import "qrc:/qml/theme" as Theme +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents - -Window { +MobileComponents.ApplicationWindow { title: qsTr("Subsurface mobile") property bool fullscreen: true property alias messageText: message.text + + property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5) + property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7) + + FontMetrics { + id: fontMetrics + } + visible: true - Theme.Units { - id: units + globalDrawer: MobileComponents.GlobalDrawer{ + title: "Subsurface" + titleIcon: "qrc:/qml/subsurface-mobile-icon.png" - property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5) - property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7) + bannerImageSource: "dive.jpg" + actions: [ + Action { + text: "Preferences" + onTriggered: { + stackView.push(prefsWindow) + } + }, - } + Action { + text: "Load Dives" + onTriggered: { + manager.loadDives(); + } + }, + + Action { + text: "Download Dives" + onTriggered: { + stackView.push(downloadDivesWindow) + } + }, + + Action { + text: "Add Dive" + onTriggered: { + manager.addDive(); + stackView.push(detailsWindow) + } + }, + + Action { + text: "Save Changes" + onTriggered: { + manager.saveChanges(); + } + }, + + MobileComponents.ActionGroup { + text: "GPS" + Action { + text: "Run location service" + checkable: true + checked: manager.locationServiceEnabled + onToggled: { + manager.locationServiceEnabled = checked; + } + } + Action { + text: "Apply GPS data to dives" + onTriggered: { + manager.applyGpsData(); + } + } + + Action { + text: "Send GPS data to server" + onTriggered: { + manager.sendGpsData(); + } + } + + Action { + text: "Clear stored GPS data" + onTriggered: { + manager.clearGpsData(); + } + } + }, + + Action { + text: "View Log" + onTriggered: { + stackView.push(logWindow) + } + }, - Theme.Theme { - id: theme - /* Added for subsurface */ - property color accentColor: "#2d5b9a" - property color accentTextColor: "#ececec" + Action { + text: "Theme Information" + onTriggered: { + stackView.push(themetest) + } + } + ] } +// MobileComponents.Units { +// id: units +// +// property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5) +// property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7) +// +// } +// +// MobileComponents.Theme { +// id: theme +// /* Added for subsurface */ +// property color accentColor: "#2d5b9a" +// property color accentTextColor: "#ececec" +// } Menu { id: prefsMenu @@ -138,7 +234,7 @@ Window { ColumnLayout { id: awLayout anchors.fill: parent - spacing: units.gridUnit / 2 + spacing: MobileComponents.Units.gridUnit / 2 Rectangle { id: detailsPage @@ -148,7 +244,7 @@ Window { DiveList { anchors.fill: detailsPage id: diveDetails - color: theme.backgroundColor + color: MobileComponents.Theme.backgroundColor } } @@ -156,14 +252,14 @@ Window { id: messageArea height: childrenRect.height Layout.fillWidth: true - color: theme.backgroundColor + color: MobileComponents.Theme.backgroundColor Text { id: message - color: theme.textColor + color: MobileComponents.Theme.textColor wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere - styleColor: theme.textColor - font.pointSize: units.smallPointSize + styleColor: MobileComponents.Theme.textColor + font.pointSize: MobileComponents.Units.smallPointSize } } } @@ -201,6 +297,6 @@ Window { } Component.onCompleted: { - print("units.gridUnit is: " + units.gridUnit); + print("MobileComponents.Units.gridUnit is: " + MobileComponents.Units.gridUnit); } } -- cgit v1.2.3-70-g09d2 From 5e5c9830a48e8f9c0a376863b4fa17c7f5056af3 Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 18:56:21 +0100 Subject: Sync with upstream mobilecomponents MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This updates to the state of bf7914b67c45e Signed-off-by: Sebastian Kügler --- qt-mobile/qml/mobilecomponents/Page.qml | 4 ---- qt-mobile/qml/mobilecomponents/PageRow.qml | 11 +++++++++-- qt-mobile/qml/mobilecomponents/Units.qml | 2 +- qt-mobile/qml/mobilecomponents/private/ActionButton.qml | 12 ++++++++++-- 4 files changed, 20 insertions(+), 9 deletions(-) (limited to 'qt-mobile') diff --git a/qt-mobile/qml/mobilecomponents/Page.qml b/qt-mobile/qml/mobilecomponents/Page.qml index 53cb04e2a..43ec43a49 100644 --- a/qt-mobile/qml/mobilecomponents/Page.qml +++ b/qt-mobile/qml/mobilecomponents/Page.qml @@ -59,10 +59,6 @@ Rectangle { target: flickable property real oldContentY: flickable.contentY onContentYChanged: { - print(flickable.contentY+" "+actionButton.transform[0] ) - if (flickable.atYBeginning || flickable.atYEnd) { - return; - } actionButton.transform[0].y = Math.min(actionButton.height, Math.max(0, actionButton.transform[0].y + (flickable.contentY - oldContentY))); oldContentY = flickable.contentY; diff --git a/qt-mobile/qml/mobilecomponents/PageRow.qml b/qt-mobile/qml/mobilecomponents/PageRow.qml index 941f77f73..4d6adf5a7 100644 --- a/qt-mobile/qml/mobilecomponents/PageRow.qml +++ b/qt-mobile/qml/mobilecomponents/PageRow.qml @@ -82,6 +82,7 @@ Item { // Returns the page instance. function push(page, properties, immediate) { + scrollAnimation.running = false; var item = Engine.push(page, properties, false, immediate) scrollToLevel(depth) return item @@ -93,6 +94,7 @@ Item { // Returns the page instance that was popped off the stack. function pop(page, immediate) { + scrollToLevel(depth-1); return Engine.pop(page, immediate); } @@ -100,6 +102,7 @@ Item { // See push() for details. function replace(page, properties, immediate) { + scrollAnimation.running = false; var item = Engine.push(page, properties, true, immediate); scrollToLevel(depth) return item @@ -128,8 +131,8 @@ Item { } var firstLevel = Math.max(0, level - mainFlickable.width/columnWidth + 1); - scrollAnimation.to = Math.max(0, Math.min(Math.max(0, columnWidth * (firstLevel - 1)), mainFlickable.contentWidth+1000)) - scrollAnimation.running = true + scrollAnimation.to = Math.max(0, Math.min(Math.max(0, columnWidth * (firstLevel - 1)), mainFlickable.contentWidth)); + scrollAnimation.running = true; } SequentialAnimation { @@ -173,6 +176,10 @@ Item { } } + onWidthChanged: { + var firstLevel = Math.max(0, depth - mainFlickable.width/columnWidth + 1); + mainFlickable.contentX = Math.max(0, Math.min(Math.max(0, columnWidth * (firstLevel - 1)), mainFlickable.contentWidth)); + } Component.onCompleted: { internal.completed = true if (initialPage && depth == 0) diff --git a/qt-mobile/qml/mobilecomponents/Units.qml b/qt-mobile/qml/mobilecomponents/Units.qml index 971336301..8b5032a71 100644 --- a/qt-mobile/qml/mobilecomponents/Units.qml +++ b/qt-mobile/qml/mobilecomponents/Units.qml @@ -81,7 +81,7 @@ QtObject { * use theme.mSize(theme.defaultFont), units.smallSpacing and units.largeSpacing. * The devicePixelRatio follows the definition of "device independent pixel" by Microsoft. */ - property real devicePixelRatio: Screen.devicePixelRatio + property real devicePixelRatio: fontMetrics.height / fontMetrics.font.pointSize /** * units.longDuration should be used for longer, screen-covering animations, for opening and diff --git a/qt-mobile/qml/mobilecomponents/private/ActionButton.qml b/qt-mobile/qml/mobilecomponents/private/ActionButton.qml index 5bf6ab086..bfc8c5875 100644 --- a/qt-mobile/qml/mobilecomponents/private/ActionButton.qml +++ b/qt-mobile/qml/mobilecomponents/private/ActionButton.qml @@ -73,10 +73,18 @@ MouseArea { } } } + Connections { + target: button.parent + onWidthChanged: button.x = button.parent.width/2 - button.width/2 + } onXChanged: { if (button.pressed) { - globalDrawer.position = Math.min(1, Math.max(0, (x - button.parent.width/2 + button.width/2)/globalDrawer.contentItem.width)); - contextDrawer.position = Math.min(1, Math.max(0, (button.parent.width/2 - button.width/2 - x)/contextDrawer.contentItem.width)); + if (globalDrawer) { + globalDrawer.position = Math.min(1, Math.max(0, (x - button.parent.width/2 + button.width/2)/globalDrawer.contentItem.width)); + } + if (contextDrawer) { + contextDrawer.position = Math.min(1, Math.max(0, (button.parent.width/2 - button.width/2 - x)/contextDrawer.contentItem.width)); + } } } -- cgit v1.2.3-70-g09d2 From 8fad349c82b0f681d6daa95bcfe843e806b48dd7 Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 19:09:59 +0100 Subject: new container for extended theme properties MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Move the properties we previously added to units and theme into their own container. This encapsulates these things that belong together and allows us to move it out later without many problems. Also, litter the global namespace a bit less. Signed-off-by: Sebastian Kügler --- qt-mobile/qml/main.qml | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) (limited to 'qt-mobile') diff --git a/qt-mobile/qml/main.qml b/qt-mobile/qml/main.qml index 0feaa002e..5f4cdd352 100644 --- a/qt-mobile/qml/main.qml +++ b/qt-mobile/qml/main.qml @@ -13,9 +13,6 @@ MobileComponents.ApplicationWindow { property bool fullscreen: true property alias messageText: message.text - property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5) - property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7) - FontMetrics { id: fontMetrics } @@ -111,20 +108,14 @@ MobileComponents.ApplicationWindow { } ] } -// MobileComponents.Units { -// id: units -// -// property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5) -// property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7) -// -// } -// -// MobileComponents.Theme { -// id: theme -// /* Added for subsurface */ -// property color accentColor: "#2d5b9a" -// property color accentTextColor: "#ececec" -// } + + QtObject { + id: subsurfaceTheme + property int titlePointSize: Math.round(fontMetrics.font.pointSize * 1.5) + property int smallPointSize: Math.round(fontMetrics.font.pointSize * 0.7) + property color accentColor: "#2d5b9a" + property color accentTextColor: "#ececec" + } Menu { id: prefsMenu -- cgit v1.2.3-70-g09d2 From 6580f078d0ae1d912d9a6b12e2769060b4c77f4b Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 19:21:27 +0100 Subject: Fix reference errors caused by moving properties around MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This makes things like accent(Text)Color and our two custom point sizes for fonts resolve correctly again. Signed-off-by: Sebastian Kügler --- qt-mobile/qml/CloudStorage.qml | 2 +- qt-mobile/qml/DiveDetails.qml | 2 +- qt-mobile/qml/DiveList.qml | 4 ++-- qt-mobile/qml/Preferences.qml | 4 ++-- qt-mobile/qml/TopBar.qml | 8 ++++---- qt-mobile/qml/main.qml | 2 +- 6 files changed, 11 insertions(+), 11 deletions(-) (limited to 'qt-mobile') diff --git a/qt-mobile/qml/CloudStorage.qml b/qt-mobile/qml/CloudStorage.qml index 3b94aa5e6..897ebfcee 100644 --- a/qt-mobile/qml/CloudStorage.qml +++ b/qt-mobile/qml/CloudStorage.qml @@ -22,7 +22,7 @@ Item { Label { text: "Cloud credentials" Layout.bottomMargin: MobileComponents.Units.largeSpacing - font.pointSize: MobileComponents.Units.titlePointSize + font.pointSize: subsurfaceTheme.titlePointSize Layout.columnSpan: 2 } diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml index 5b597a0df..401921c9f 100644 --- a/qt-mobile/qml/DiveDetails.qml +++ b/qt-mobile/qml/DiveDetails.qml @@ -44,7 +44,7 @@ Item { Label { Layout.columnSpan: 2 - font.pointSize: MobileComponents.Units.titlePointSize + font.pointSize: subsurfaceTheme.titlePointSize text: "Dive " + number + " (" + date + ")" } diff --git a/qt-mobile/qml/DiveList.qml b/qt-mobile/qml/DiveList.qml index 2a9c53de6..e0c8f4251 100644 --- a/qt-mobile/qml/DiveList.qml +++ b/qt-mobile/qml/DiveList.qml @@ -68,7 +68,7 @@ Rectangle { text: date opacity: 0.6 color: MobileComponents.Theme.textColor - font.pointSize: smallPointSize + font.pointSize: subsurfaceTheme.smallPointSize anchors { right: parent.right top: parent.top @@ -156,7 +156,7 @@ Rectangle { leftMargin: MobileComponents.Units.smallSpacing right: parent.right } - color: MobileComponents.Theme.accentColor + color: subsurfaceTheme.accentColor } } } diff --git a/qt-mobile/qml/Preferences.qml b/qt-mobile/qml/Preferences.qml index 1e1274e21..8cae95ff0 100644 --- a/qt-mobile/qml/Preferences.qml +++ b/qt-mobile/qml/Preferences.qml @@ -23,7 +23,7 @@ Item { Label { text: "Cloud credentials" Layout.bottomMargin: MobileComponents.Units.largeSpacing - font.pointSize: MobileComponents.Units.titlePointSize + font.pointSize: subsurfaceTheme.titlePointSize Layout.columnSpan: 2 } @@ -76,7 +76,7 @@ Item { Label { text: "Subsurface GPS data webservice" Layout.bottomMargin: MobileComponents.Units.largeSpacing - font.pointSize: MobileComponents.Units.titlePointSize + font.pointSize: subsurfaceTheme.titlePointSize Layout.columnSpan: 2 } diff --git a/qt-mobile/qml/TopBar.qml b/qt-mobile/qml/TopBar.qml index 43a5ad6af..f07a88e47 100644 --- a/qt-mobile/qml/TopBar.qml +++ b/qt-mobile/qml/TopBar.qml @@ -13,7 +13,7 @@ Rectangle { property bool goBack: (stackView.depth > 1) - color: MobileComponents.Theme.accentColor + color: subsurfaceTheme.accentColor Layout.minimumHeight: MobileComponents.Units.gridUnit * 2 + MobileComponents.Units.largeSpacing Layout.fillWidth: true Layout.margins: 0 @@ -47,7 +47,7 @@ Rectangle { font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 1.5 verticalAlignment: Text.AlignBottom Layout.fillWidth: false - color: MobileComponents.Theme.accentTextColor + color: subsurfaceTheme.accentTextColor } } Item { @@ -63,11 +63,11 @@ Rectangle { style: ButtonStyle { background: Rectangle { implicitWidth: MobileComponents.Units.gridUnit * 2 - color: MobileComponents.Theme.accentColor + color: subsurfaceTheme.accentColor } label: Text { id: txt - color: MobileComponents.Theme.accentTextColor + color: subsurfaceTheme.accentTextColor font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 2 font.bold: true text: control.text diff --git a/qt-mobile/qml/main.qml b/qt-mobile/qml/main.qml index 5f4cdd352..ac2e3eefd 100644 --- a/qt-mobile/qml/main.qml +++ b/qt-mobile/qml/main.qml @@ -250,7 +250,7 @@ MobileComponents.ApplicationWindow { color: MobileComponents.Theme.textColor wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere styleColor: MobileComponents.Theme.textColor - font.pointSize: MobileComponents.Units.smallPointSize + font.pointSize: subsurfaceTheme.smallPointSize } } } -- cgit v1.2.3-70-g09d2 From 3d3fce7152d2748818a668e4b3380f38541adca1 Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 21:24:55 +0100 Subject: Sync to mobilecomponents 67cf594b4ddc MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Sebastian Kügler --- qt-mobile/qml/mobilecomponents/ListItemWithActions.qml | 2 +- qt-mobile/qml/mobilecomponents/Page.qml | 2 +- qt-mobile/qml/mobilecomponents/Theme.qml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'qt-mobile') diff --git a/qt-mobile/qml/mobilecomponents/ListItemWithActions.qml b/qt-mobile/qml/mobilecomponents/ListItemWithActions.qml index 9d54fda24..97eba1c71 100644 --- a/qt-mobile/qml/mobilecomponents/ListItemWithActions.qml +++ b/qt-mobile/qml/mobilecomponents/ListItemWithActions.qml @@ -18,7 +18,7 @@ */ import QtQuick 2.1 -import QtQuick.Layouts 1.3 +import QtQuick.Layouts 1.2 import QtQuick.Controls 1.0 import org.kde.plasma.mobilecomponents 0.2 import QtGraphicalEffects 1.0 diff --git a/qt-mobile/qml/mobilecomponents/Page.qml b/qt-mobile/qml/mobilecomponents/Page.qml index 43ec43a49..784ce8037 100644 --- a/qt-mobile/qml/mobilecomponents/Page.qml +++ b/qt-mobile/qml/mobilecomponents/Page.qml @@ -18,7 +18,7 @@ */ import QtQuick 2.1 -import QtQuick.Layouts 1.3 +import QtQuick.Layouts 1.2 import org.kde.plasma.mobilecomponents 0.2 import "private" diff --git a/qt-mobile/qml/mobilecomponents/Theme.qml b/qt-mobile/qml/mobilecomponents/Theme.qml index 07bb561bd..fd8c49ba2 100644 --- a/qt-mobile/qml/mobilecomponents/Theme.qml +++ b/qt-mobile/qml/mobilecomponents/Theme.qml @@ -36,7 +36,7 @@ QtObject { property color textColor: Qt.rgba(0,0,0, 0.54) property color highlightColor: "#2196F3" - property color backgroundColor: "#f3f3f3" + property color backgroundColor: "#eff0f1" property color linkColor: "#2196F3" property color visitedLinkColor: "#2196F3" -- cgit v1.2.3-70-g09d2 From 32219f127634b7783b3967d94e35faeff36b51ef Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Sun, 29 Nov 2015 21:13:57 +0100 Subject: Port the page navigation to ApplicationWindow's one MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The ApplicationWindow component has an internal PageRow for the management of the application's pages, use that instead of an own StackView. Use shared components for common things in the app ListItem for the dive list Page for application pages, for correct background color and moving of the action button Signed-off-by: Marco Martin Signed-off-by: Sebastian Kügler --- qt-mobile/qml/DiveDetails.qml | 209 +++++++++++++++++++------------------ qt-mobile/qml/DiveList.qml | 92 ++++++++-------- qt-mobile/qml/main.qml | 85 +++++++-------- qt-mobile/qml/mobile-resources.qrc | 1 + 4 files changed, 194 insertions(+), 193 deletions(-) (limited to 'qt-mobile') diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml index 401921c9f..e69d0e672 100644 --- a/qt-mobile/qml/DiveDetails.qml +++ b/qt-mobile/qml/DiveDetails.qml @@ -3,13 +3,14 @@ import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 -import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents -Item { +MobileComponents.Page { id: diveDetailsWindow width: parent.width objectName: "DiveDetails" + flickable: flick property string location property string dive_id @@ -30,120 +31,130 @@ Item { Flickable { id: flick anchors.fill: parent - contentHeight: parent.height + contentHeight: content.height clip: true - ColumnLayout { - width: parent.width - spacing: 8 + Item { + id: content + width: flick.width + height: contentRect.height + MobileComponents.Units.smallSpacing * 2 + ColumnLayout { + anchors { + left: parent.left + right: parent.right + top: parent.top + margins: MobileComponents.Units.smallSpacing + } + spacing: MobileComponents.Units.smallSpacing - GridLayout { - id: editorDetails - width: parent.width - columns: 2 - Label { - Layout.columnSpan: 2 - font.pointSize: subsurfaceTheme.titlePointSize - text: "Dive " + number + " (" + date + ")" - } + GridLayout { + id: editorDetails + width: parent.width + columns: 2 - Item { - Layout.columnSpan: 2 - Layout.fillWidth: true - Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height - QMLProfile { - id: qmlProfile - height: MobileComponents.Units.gridUnit * 25 - anchors { - top: parent.top - left: parent.left - right: parent.right - } - //Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later + MobileComponents.Heading { + Layout.columnSpan: 2 + text: "Dive " + number + " (" + date + ")" } - Button { - id: profileHideButton - anchors { - right: parent.right - top: parent.top + + Item { + Layout.columnSpan: 2 + Layout.fillWidth: true + Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height + QMLProfile { + id: qmlProfile + height: MobileComponents.Units.gridUnit * 25 + anchors { + top: parent.top + left: parent.left + right: parent.right + } + //Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later } - text: "Hide Dive Profile" - onClicked: { - qmlProfile.visible = !qmlProfile.visible - if (qmlProfile.visible) { - text = "Hide Dive Profile" - } else { - text = "Show Dive Profile" + Button { + id: profileHideButton + anchors { + right: parent.right + top: parent.top + } + text: "Hide Dive Profile" + onClicked: { + qmlProfile.visible = !qmlProfile.visible + if (qmlProfile.visible) { + text = "Hide Dive Profile" + } else { + text = "Show Dive Profile" + } } } } - } - Label { - text: "Location:" - } - TextField { - id: txtLocation; text: location; - Layout.fillWidth: true - } + Label { + text: "Location:" + } + TextField { + id: txtLocation; text: location; + Layout.fillWidth: true + } - Label { - text: "Air Temp:" - } - TextField { - id: txtAirTemp - text: airtemp - Layout.fillWidth: true - } + Label { + text: "Air Temp:" + } + TextField { + id: txtAirTemp + text: airtemp + Layout.fillWidth: true + } - Label { - text: "Water Temp:" - } - TextField { - id: txtWaterTemp - text: watertemp - Layout.fillWidth: true - } + Label { + text: "Water Temp:" + } + TextField { + id: txtWaterTemp + text: watertemp + Layout.fillWidth: true + } - Label { - text: "Suit:" + Label { + text: "Suit:" - } - TextField { - id: txtSuit - text: suit - Layout.fillWidth: true - } + } + TextField { + id: txtSuit + text: suit + Layout.fillWidth: true + } - Label { - text: "Buddy:" - } - TextField { - id: txtBuddy - text: buddy - Layout.fillWidth: true - } + Label { + text: "Buddy:" + } + TextField { + id: txtBuddy + text: buddy + Layout.fillWidth: true + } - Label { - text: "Dive Master:" - } - TextField { - id: txtDiveMaster - text: divemaster - Layout.fillWidth: true - } + Label { + text: "Dive Master:" + } + TextField { + id: txtDiveMaster + text: divemaster + Layout.fillWidth: true + } - Label { - text: "Notes:" - } - TextEdit{ - id: txtNotes - text: notes - focus: true - Layout.fillWidth: true - Layout.fillHeight: true - selectByMouse: true - wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere + Label { + text: "Notes:" + } + TextEdit{ + id: txtNotes + text: notes + focus: true + Layout.fillWidth: true + Layout.fillHeight: true + selectByMouse: true + wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere + } } } } diff --git a/qt-mobile/qml/DiveList.qml b/qt-mobile/qml/DiveList.qml index e0c8f4251..75f4f809e 100644 --- a/qt-mobile/qml/DiveList.qml +++ b/qt-mobile/qml/DiveList.qml @@ -6,37 +6,37 @@ import QtQuick.Dialogs 1.2 import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 -Rectangle { +MobileComponents.Page { id: page objectName: "DiveList" + color: MobileComponents.Theme.viewBackgroundColor + flickable: diveListView Component { id: diveDelegate - Item { + MobileComponents.ListItem { id: dive + enabled: true + checked: diveListView.currentIndex == model.index property real detailsOpacity : 0 - width: diveListView.width - MobileComponents.Units.smallSpacing - height: childrenRect.height + //When clicked, the mode changes to details view - //Mouse region: When clicked, the mode changes to details view - MouseArea { - anchors.fill: parent - onClicked: { - detailsWindow.width = parent.width - detailsWindow.location = location - detailsWindow.dive_id = id - detailsWindow.buddy = buddy - detailsWindow.suit = suit - detailsWindow.airtemp = airtemp - detailsWindow.watertemp = watertemp - detailsWindow.divemaster = divemaster - detailsWindow.notes = notes - detailsWindow.number = diveNumber - detailsWindow.date = date - stackView.push(detailsWindow) - } + onClicked: { + diveListView.currentIndex = model.index + detailsWindow.width = parent.width + detailsWindow.location = location + detailsWindow.dive_id = id + detailsWindow.buddy = buddy + detailsWindow.suit = suit + detailsWindow.airtemp = airtemp + detailsWindow.watertemp = watertemp + detailsWindow.divemaster = divemaster + detailsWindow.notes = notes + detailsWindow.number = diveNumber + detailsWindow.date = date + stackView.push(detailsWindow) } //Layout of the page: (mini profile, dive no, date at the top @@ -115,17 +115,6 @@ Rectangle { top: locationText.bottom } } - //Text { text: location; width: parent.width } - Rectangle { - color: MobileComponents.Theme.textColor - opacity: .2 - height: Math.max(1, MobileComponents.Units.gridUnit / 24) // we really want a thin line - anchors { - left: parent.left - right: parent.right - top: numberText.bottom - } - } } } } @@ -136,7 +125,7 @@ Rectangle { width: page.width - MobileComponents.Units.smallSpacing * 2 height: childrenRect.height + MobileComponents.Units.smallSpacing * 2 - Text { + MobileComponents.Heading { id: sectionText text: section anchors { @@ -145,8 +134,7 @@ Rectangle { leftMargin: MobileComponents.Units.smallSpacing right: parent.right } - color: MobileComponents.Theme.textColor - font.pointSize: 16 + level: 2 } Rectangle { height: Math.max(2, MobileComponents.Units.gridUnit / 12) // we want a thicker line @@ -161,18 +149,30 @@ Rectangle { } } - ListView { - id: diveListView + Connections { + target: stackView + onDepthChanged: { + if (stackView.depth == 1) { + diveListView.currentIndex = -1; + } + } + } + ScrollView { anchors.fill: parent - model: diveModel - delegate: diveDelegate - boundsBehavior: Flickable.StopAtBounds - //highlight: Rectangle { color: MobileComponents.Theme.highlightColor; width: MobileComponents.Units.smallSpacing } - focus: true - clip: true - section.property: "trip" - section.criteria: ViewSection.FullString - section.delegate: tripHeading + ListView { + id: diveListView + anchors.fill: parent + model: diveModel + currentIndex: -1 + delegate: diveDelegate + boundsBehavior: Flickable.StopAtBounds + //highlight: Rectangle { color: MobileComponents.Theme.highlightColor; width: MobileComponents.Units.smallSpacing } + focus: true + clip: true + section.property: "trip" + section.criteria: ViewSection.FullString + section.delegate: tripHeading + } } StartPage { anchors.fill: parent diff --git a/qt-mobile/qml/main.qml b/qt-mobile/qml/main.qml index ac2e3eefd..53d872743 100644 --- a/qt-mobile/qml/main.qml +++ b/qt-mobile/qml/main.qml @@ -202,57 +202,46 @@ MobileComponents.ApplicationWindow { } } - ColumnLayout { - anchors.fill: parent + toolBar: TopBar { + width: parent.width + height: Layout.minimumHeight + } - TopBar { + property Item stackView: pageStack + initialPage: Item { + width: parent.width + height: parent.height + + ColumnLayout { + id: awLayout + anchors.fill: parent + spacing: MobileComponents.Units.gridUnit / 2 + + Rectangle { + id: detailsPage + Layout.fillHeight: true + Layout.fillWidth: true + + DiveList { + anchors.fill: detailsPage + id: diveDetails + color: MobileComponents.Theme.backgroundColor + } + } - } - StackView { - id: stackView - Layout.preferredWidth: parent.width - Layout.fillHeight: true - focus: true - Keys.onReleased: if (event.key == Qt.Key_Back && stackView.depth > 1) { - stackView.pop() - event.accepted = true; - } - initialItem: Item { - width: parent.width - height: parent.height - - ColumnLayout { - id: awLayout - anchors.fill: parent - spacing: MobileComponents.Units.gridUnit / 2 - - Rectangle { - id: detailsPage - Layout.fillHeight: true - Layout.fillWidth: true - - DiveList { - anchors.fill: detailsPage - id: diveDetails - color: MobileComponents.Theme.backgroundColor - } - } - - Rectangle { - id: messageArea - height: childrenRect.height - Layout.fillWidth: true - color: MobileComponents.Theme.backgroundColor - - Text { - id: message - color: MobileComponents.Theme.textColor - wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere - styleColor: MobileComponents.Theme.textColor - font.pointSize: subsurfaceTheme.smallPointSize - } - } + Rectangle { + id: messageArea + height: childrenRect.height + Layout.fillWidth: true + color: MobileComponents.Theme.backgroundColor + + Text { + id: message + color: MobileComponents.Theme.textColor + wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere + styleColor: MobileComponents.Theme.textColor + font.pointSize: MobileComponents.Units.smallPointSize } } } diff --git a/qt-mobile/qml/mobile-resources.qrc b/qt-mobile/qml/mobile-resources.qrc index d6c0825d4..971c2e427 100644 --- a/qt-mobile/qml/mobile-resources.qrc +++ b/qt-mobile/qml/mobile-resources.qrc @@ -19,6 +19,7 @@ mobilecomponents/ActionGroup.qml mobilecomponents/ApplicationWindow.qml mobilecomponents/GlobalDrawer.qml + mobilecomponents/Page.qml mobilecomponents/Icon.qml mobilecomponents/Heading.qml mobilecomponents/PageRow.qml -- cgit v1.2.3-70-g09d2