use mobilecomponents for our pages

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 <sebas@kde.org>

5 files changed, 38 insertions, 36 deletions

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