QML UI: make readonly fields more obvious in dive edit

Remove the border and make them look more like labels. This adds a
StyledTextField for that purpose. And while we are at it, we can make that
StyledTextField a little prettier.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

5 files changed, 38 insertions, 21 deletions

diff --git a/mobile-widgets/qml/CloudCredentials.qml b/mobile-widgets/qml/CloudCredentials.qml
index 9a6ddc7f1..d63227619 100644
--- a/mobile-widgets/qml/CloudCredentials.qml
+++ b/mobile-widgets/qml/CloudCredentials.qml
@@ -44,7 +44,7 @@ Item {
 			text: "Email"
 		}
 
-		TextField {
+		StyledTextField {
 			id: login
 			text: manager.cloudUserName
 			Layout.fillWidth: true
@@ -56,7 +56,7 @@ Item {
 			text: "Password"
 		}
 
-		TextField {
+		StyledTextField {
 			id: password
 			text: manager.cloudPassword
 			echoMode: TextInput.Password
diff --git a/mobile-widgets/qml/DiveDetailsEdit.qml b/mobile-widgets/qml/DiveDetailsEdit.qml
index d8d4c0f30..5672cdae6 100644
--- a/mobile-widgets/qml/DiveDetailsEdit.qml
+++ b/mobile-widgets/qml/DiveDetailsEdit.qml
@@ -76,7 +76,7 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Date:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtDate;
 				Layout.fillWidth: true
 			}
@@ -84,7 +84,7 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Location:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtLocation;
 				Layout.fillWidth: true
 			}
@@ -109,7 +109,7 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Depth:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtDepth
 				Layout.fillWidth: true
 				validator: RegExpValidator { regExp: /[^-]*/ }
@@ -118,7 +118,7 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Duration:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtDuration
 				Layout.fillWidth: true
 				validator: RegExpValidator { regExp: /[^-]*/ }
@@ -128,7 +128,7 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Air Temp:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtAirTemp
 				Layout.fillWidth: true
 			}
@@ -137,7 +137,7 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Water Temp:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtWaterTemp
 				Layout.fillWidth: true
 			}
@@ -146,7 +146,7 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Suit:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtSuit
 				Layout.fillWidth: true
 			}
@@ -155,7 +155,7 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Buddy:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtBuddy
 				Layout.fillWidth: true
 			}
@@ -164,7 +164,7 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Dive Master:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtDiveMaster
 				Layout.fillWidth: true
 			}
@@ -173,9 +173,9 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Weight:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtWeight
-				readOnly: (text == "cannot edit multiple weight systems" ? true : false)
+				fixed: text === "cannot edit multiple weight systems"
 				Layout.fillWidth: true
 			}
 
@@ -183,9 +183,9 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Gas mix:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtGasMix
-				readOnly: (text == "cannot edit multiple gases" ? true : false)
+				fixed: (text == "cannot edit multiple gases" ? true : false)
 				Layout.fillWidth: true
 				validator: RegExpValidator { regExp: /(EAN100|EAN\d\d|AIR|100|\d{1,2}|\d{1,2}\/\d{1,2})/i }
 			}
@@ -194,9 +194,9 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "Start Pressure:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtStartPressure
-				readOnly: (text == "cannot edit multiple cylinders" ? true : false)
+				fixed: (text == "cannot edit multiple cylinders" ? true : false)
 				Layout.fillWidth: true
 			}
 
@@ -204,13 +204,12 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: "End Pressure:"
 			}
-			TextField {
+			StyledTextField {
 				id: txtEndPressure
 				readOnly: (text == "cannot edit multiple cylinders" ? true : false)
 				Layout.fillWidth: true
 			}
 
-
 			Kirigami.Label {
 				Layout.columnSpan: 2
 				Layout.alignment: Qt.AlignLeft
diff --git a/mobile-widgets/qml/Preferences.qml b/mobile-widgets/qml/Preferences.qml
index 3ec96d198..979a49b1d 100644
--- a/mobile-widgets/qml/Preferences.qml
+++ b/mobile-widgets/qml/Preferences.qml
@@ -50,7 +50,7 @@ Kirigami.Page {
 			Layout.alignment: Qt.AlignRight
 		}
 
-		TextField {
+		StyledTextField {
 			id: distanceThreshold
 			text: manager.distanceThreshold
 			Layout.fillWidth: true
@@ -61,7 +61,7 @@ Kirigami.Page {
 			Layout.alignment: Qt.AlignRight
 		}
 
-		TextField {
+		StyledTextField {
 			id: timeThreshold
 			text: manager.timeThreshold
 			Layout.fillWidth: true
diff --git a/mobile-widgets/qml/StyledTextField.qml b/mobile-widgets/qml/StyledTextField.qml
new file mode 100644
index 000000000..fdb61b7b8
--- /dev/null
+++ b/mobile-widgets/qml/StyledTextField.qml
@@ -0,0 +1,17 @@
+import QtQuick 2.3
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+
+TextField {
+	property bool fixed: false
+	readOnly: fixed
+	style: TextFieldStyle {
+		background: Rectangle {
+			color: fixed ? "transparent" : "white"
+			radius: 4
+			border.width: 0.5
+			border.color: fixed ? "transparent" : "#c0c0c0"
+		}
+	}
+
+}
diff --git a/mobile-widgets/qml/mobile-resources.qrc b/mobile-widgets/qml/mobile-resources.qrc
index 1d54403c9..3735c40ab 100644
--- a/mobile-widgets/qml/mobile-resources.qrc
+++ b/mobile-widgets/qml/mobile-resources.qrc
@@ -15,6 +15,7 @@
 		<file>TopBar.qml</file>
 		<file>ThemeTest.qml</file>
 		<file>StartPage.qml</file>
+		<file>StyledTextField.qml</file>
 		<file>dive.jpg</file>
 		<file>SubsurfaceButton.qml</file>
 		<file alias="subsurface-mobile-icon.png">../../icons/subsurface-mobile-icon.png</file>