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>
This commit is contained in:
Dirk Hohndel 2016-04-08 07:30:08 -07:00
parent df2e7c052b
commit 829369c18a
5 changed files with 38 additions and 21 deletions

View file

@ -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

View file

@ -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

View file

@ -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

View file

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

View file

@ -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>