QML-UI: add more properties to Units and Theme

- colors for accentuation (background and text)
- text color to paint on highlights
- units.spacing (derived from gridUnit, so it's dpi-corrected)
- port main.qml, especially the application header to this theming and
  sizing

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

qt-mobile/main.qml

@@ -86,43 +86,39 @@ ApplicationWindow {
 			ColumnLayout {
 				id: awLayout
 				anchors.fill: parent
-				spacing: 8
+				spacing: units.gridUnit / 2
 				Rectangle {
 					id: topPart
-					color: "#2C4882"
+					color: theme.accentColor
-					Layout.minimumHeight: prefsButton.height * 1.2
+					Layout.minimumHeight: units.gridUnit * 2 + units.spacing * 2
 					Layout.fillWidth: true
-					anchors.bottom: detailsPage.top
-					anchors.bottomMargin: prefsButton.height * 0.1
 					Layout.margins: 0
 					RowLayout {
 						anchors.bottom: topPart.bottom
-						anchors.bottomMargin: prefsButton.height * 0.1
+						anchors.bottomMargin: units.spacing
 						anchors.left: topPart.left
-						anchors.leftMargin: prefsButton.height * 0.1
+						anchors.leftMargin: units.spacing
 						anchors.right: topPart.right
-						anchors.rightMargin: prefsButton.height * 0.1
+						anchors.rightMargin: units.spacing
 						Text {
 							text: qsTr("Subsurface mobile")
 							font.pointSize: 18
-							font.bold: true
+							color: theme.accentTextColor
-							color: "white"
-							anchors.horizontalCenter: parent.horizontalCenter
-							horizontalAlignment: Text.AlignHCenter
 						}
 						Button {
 							id: prefsButton
 							text: "\u22ee"
 							anchors.right: parent.right
-							Layout.preferredWidth: Screen.width * 0.1
+							Layout.preferredWidth: units.gridUnit * 2
+							Layout.preferredHeight: units.gridUnit * 2
 							style: ButtonStyle {
 								background: Rectangle {
-									implicitWidth: 50
+									implicitWidth: units.gridUnit * 2
-									color: "#2C4882"
+									color: theme.accentColor
 								}
 								label: Text {
 									id: txt
-									color: "white"
+									color: theme.accentTextColor
 									font.pointSize: 18
 									font.bold: true
 									text: control.text
@@ -146,7 +142,7 @@ ApplicationWindow {
 					DiveList {
 						anchors.fill: detailsPage
 						id: diveDetails
-						color: "#2C4882"
+						color: theme.backgroundColor
 					}
 				}
 
@@ -157,9 +153,9 @@ ApplicationWindow {
 
 					Text {
 						id: message
-						color: "#000000"
+						color: theme.textColor
 						text: ""
-						styleColor: "#ff0000"
+						styleColor: theme.textColor
 						font.pointSize: 10
 					}
 				}

qt-mobile/theme/Theme.qml

@@ -1,7 +1,10 @@
 import QtQuick 2.3
 
 QtObject {
+	property color accentColor: "#114d6f"
+	property color accentTextColor: "#ececec"
 	property color textColor: "#333333"
 	property color backgroundColor: "#ececec"
 	property color highlightColor: "#91c4e1"
+	property color highlightTextColor: "#333333"
 }

qt-mobile/theme/Units.qml

@@ -2,4 +2,5 @@ import QtQuick 2.3
 
 QtObject {
 	property int gridUnit: 24
+	property int spacing: gridUnit / 3
 }