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>

1 files changed, 17 insertions, 0 deletions

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"
+		}
+	}
+
+}