QML-UI: Layout improvements in app list and details header

- fix spacing and sizing in TopBar
- use an anchor layout for the delegate and split out labels and values: this
  allows more uniform alignment
- add the subsurface mobile icon to the first page
- various visual touch-ups to taste

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

4 files changed, 91 insertions, 19 deletions

diff --git a/qt-mobile/DiveList.qml b/qt-mobile/DiveList.qml
index 6c03daa5f..86a57b614 100644
--- a/qt-mobile/DiveList.qml
+++ b/qt-mobile/DiveList.qml
@@ -40,23 +40,84 @@ Rectangle {
 
 			//Layout of the page: (mini profile, dive no, date at the top
 			//And other details at the bottom.
-			Column {
+			Item {
 				x: units.spacing
 				width: parent.width - units.spacing * 2
 				height: childrenRect.height + units.spacing * 2
-				spacing: units.spacing / 2
+				//spacing: units.spacing / 2
 				anchors.margins: units.spacing
 
 				Text {
-					text: diveNumber + ' (' + date + ')'
+					id: locationText
+					text: location
+					color: theme.textColor
+					scale: 1.1 // Let's see how this works, otherwise, we'll need the default point size somewhere
+					transformOrigin: Item.TopLeft
+					anchors {
+						left: parent.left
+						top: parent.top
+					}
+				}
+				Text {
+					text: date
+					opacity: 0.6
+					color: theme.textColor
+					anchors {
+						right: parent.right
+						top: parent.top
+						bottomMargin: units.spacing / 2
+					}
+				}
+				Row {
+					id: descriptionText
+					anchors {
+						left: parent.left
+						right: parent.right
+						bottom: numberText.bottom
+					}
+					Text {
+						text: 'Depth: '
+						opacity: 0.6
+						color: theme.textColor
+					}
+					Text {
+						text: depth
+						width: Math.max(units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview
+						color: theme.textColor
+					}
+					Text {
+						text: 'Duration: '
+						opacity: 0.6
+						color: theme.textColor
+					}
+					Text {
+						text: duration
+						color: theme.textColor
+					}
+				}
+				Text {
+					id: numberText
+					text: "#" + diveNumber
+					color: theme.textColor
+					scale: 1.2
+					transformOrigin: Item.BottomRight
+					opacity: 0.4
+					anchors {
+						right: parent.right
+						topMargin: units.spacing
+						top: locationText.bottom
+					}
 				}
-				Text { text: location; width: parent.width }
-				Text { text: '<b>Depth:</b> ' + depth + ' <b>Duration:</b> ' + duration; width: parent.width }
+				//Text { text: location; width: parent.width }
 				Rectangle {
 					color: theme.textColor
 					opacity: .2
-					width: parent.width
 					height: Math.max(1, units.gridUnit / 24) // we really want a thin line
+					anchors {
+						left: parent.left
+						right: parent.right
+						top: numberText.bottom
+					}
 				}
 			}
 		}
diff --git a/qt-mobile/TopBar.qml b/qt-mobile/TopBar.qml
index 1edd868c2..da000c469 100644
--- a/qt-mobile/TopBar.qml
+++ b/qt-mobile/TopBar.qml
@@ -9,31 +9,31 @@ import org.subsurfacedivelog.mobile 1.0
 
 Rectangle {
 	id: topBar
-	color: "#2C4882"
+	color: theme.accentColor
 	Layout.fillWidth: true
 	Layout.margins: 0
-	Layout.minimumHeight: prefsButton.height * 1.2
+	Layout.minimumHeight: prefsButton.height + units.spacing * 2
 	RowLayout {
 		anchors.bottom: topBar.bottom
-		anchors.bottomMargin: prefsButton.height * 0.1
+		anchors.bottomMargin: units.spacing
 		anchors.left: topBar.left
-		anchors.leftMargin: prefsButton.height * 0.1
+		anchors.leftMargin: units.spacing
 		anchors.right: topBar.right
-		anchors.rightMargin: prefsButton.height * 0.1
+		anchors.rightMargin: units.spacing
 		Button {
 			id: backButton
 			Layout.maximumHeight: prefsButton.height
 			Layout.minimumHeight: prefsButton.height
-			Layout.preferredWidth: Screen.width * 0.1
+			Layout.preferredWidth: units.gridUnit * 2
 			text: "\u2190"
 			style: ButtonStyle {
 				background: Rectangle {
-					color: "#2C4882"
-					implicitWidth: 50
+					color: theme.accentColor
+					implicitWidth: units.gridUnit * 2
 				}
 				label: Text {
 					id: txt
-					color: "white"
+					color: theme.accentTextColor
 					font.pointSize: 18
 					font.bold: true
 					text: control.text
@@ -58,10 +58,10 @@ Rectangle {
 		Text {
 			text: qsTr("Subsurface mobile")
 			font.pointSize: 18
-			font.bold: true
-			color: "white"
-			anchors.horizontalCenter: parent.horizontalCenter
-			horizontalAlignment: Text.AlignHCenter
+			color: theme.accentTextColor
+			anchors.left: backButton.right
+			anchors.leftMargin: units.spacing
+			//horizontalAlignment: Text.AlignHCenter
 		}
 	}
 }
diff --git a/qt-mobile/main.qml b/qt-mobile/main.qml
index 97f1da6bb..5c8c04b2c 100644
--- a/qt-mobile/main.qml
+++ b/qt-mobile/main.qml
@@ -100,11 +100,21 @@ ApplicationWindow {
 						anchors.leftMargin: units.spacing
 						anchors.right: topPart.right
 						anchors.rightMargin: units.spacing
+						Image {
+							source: "qrc:/qml/subsurface-mobile-icon.png"
+							Layout.maximumWidth: units.gridUnit * 2
+							Layout.preferredWidth: units.gridUnit * 2
+							Layout.preferredHeight: units.gridUnit * 2
+						}
 						Text {
 							text: qsTr("Subsurface mobile")
 							font.pointSize: 18
+							Layout.fillWidth: false
 							color: theme.accentTextColor
 						}
+						Item {
+							Layout.fillWidth: true
+						}
 						Button {
 							id: prefsButton
 							text: "\u22ee"
diff --git a/qt-mobile/mobile-resources.qrc b/qt-mobile/mobile-resources.qrc
index 93cda6dc9..2241fa667 100644
--- a/qt-mobile/mobile-resources.qrc
+++ b/qt-mobile/mobile-resources.qrc
@@ -8,6 +8,7 @@
         <file>DownloadFromDiveComputer.qml</file>
         <file>Log.qml</file>
         <file>TopBar.qml</file>
+        <file alias="subsurface-mobile-icon.png">../icons/subsurface-mobile-icon.png</file>
     </qresource>
     <qresource prefix="/qml/theme">
         <file alias="Theme.qml">theme/Theme.qml</file>