more complete implementation of Plasma's Units

This is a currently work-in-progress attempt at making a minimal set of
Plasma components available.

The code needs a bunch of adjustments yet, which I'm making in tune with
upstream. The idea is to create a standardized sub-set of Plasma's QML
API for applications, which brings only minimal new dependencies (for
now: none).

Signed-off-by: Sebastian Kügler <sebas@kde.org>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

2 files changed, 158 insertions, 19 deletions

diff --git a/qt-mobile/theme/Theme.qml b/qt-mobile/theme/Theme.qml
index c4cfbf077..81c939505 100644
--- a/qt-mobile/theme/Theme.qml
+++ b/qt-mobile/theme/Theme.qml
@@ -1,10 +1,58 @@
-import QtQuick 2.3
-
-QtObject {
-	property color accentColor: "#2d5b9a"
-	property color accentTextColor: "#ececec"
-	property color textColor: "#333333"
-	property color backgroundColor: "#ececec"
-	property color highlightColor: "#91c4e1"
-	property color highlightTextColor: "#333333"
-}
\ No newline at end of file
+/*
+ *   Copyright 2015 Marco Martin <mart@kde.org>
+ *
+ *   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
+
+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.
+ */
+Object {
+    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"
+
+}
diff --git a/qt-mobile/theme/Units.qml b/qt-mobile/theme/Units.qml
index d4b4aa774..a8b8c629b 100644
--- a/qt-mobile/theme/Units.qml
+++ b/qt-mobile/theme/Units.qml
@@ -1,11 +1,102 @@
-import QtQuick 2.3
+/*
+ *   Copyright 2015 Marco Martin <mart@kde.org>
+ *
+ *   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.
+ */
 
-Item {
-	property int gridUnit: unitsM.paintedHeight
-	property int spacing: gridUnit / 3
+import QtQuick 2.0
+import QtQuick.Window 2.2
 
-	Text {
-		id: unitsM
-		text: "M"
-	}
-}
\ No newline at end of file
+pragma Singleton
+
+
+Object {
+    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: textSpacer.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: Object {
+        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
+
+    Text {
+        id: textSpacer
+        text: "M"
+    }
+}