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/Units.qml | 101 +++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 qt-mobile/qml/mobilecomponents/Units.qml (limited to 'qt-mobile/qml/mobilecomponents/Units.qml') 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" + } +} -- 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/qml/mobilecomponents/Units.qml') 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