QML UI: DiveDetailsView - calculate better width and set everywhere

Even setting things up in the first row isn't enough. Every field in the
grid needs an explicit width. How dumb is that.

To make this more manageable calculate the correct widths at the beginning
and then just reference those properties.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Dirk Hohndel 2016-02-08 13:25:29 -08:00
parent 3e46361518
commit 0f6b8a8f6f

View file

@ -12,6 +12,12 @@ import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
Item { Item {
id: detailsView id: detailsView
property int labelWidth: MobileComponents.Units.gridUnit * 10 property int labelWidth: MobileComponents.Units.gridUnit * 10
property real gridWidth: subsurfaceTheme.columnWidth - 2 * MobileComponents.Units.gridUnit
property real col1Width: gridWidth * 0.20
property real col2Width: gridWidth * 0.40
property real col3Width: gridWidth * 0.20
property real col4Width: gridWidth * 0.20
width: SubsurfaceTheme.columnWidth width: SubsurfaceTheme.columnWidth
height: mainLayout.implicitHeight + bottomLayout.implicitHeight + MobileComponents.Units.iconSizes.large height: mainLayout.implicitHeight + bottomLayout.implicitHeight + MobileComponents.Units.iconSizes.large
Rectangle { Rectangle {
@ -144,82 +150,91 @@ Item {
text: "Suit:" text: "Suit:"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
opacity: 0.6 opacity: 0.6
Layout.maximumWidth: subsurfaceTheme.columnWidth * 0.18 Layout.maximumWidth: detailsView.col1Width
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
MobileComponents.Label { MobileComponents.Label {
id: txtSuit id: txtSuit
text: dive.suit text: dive.suit
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
Layout.maximumWidth: subsurfaceTheme.columnWidth * 0.36 Layout.maximumWidth: detailsView.col2Width
} }
MobileComponents.Label { MobileComponents.Label {
text: "Air Temp:" text: "Air Temp:"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
opacity: 0.6 opacity: 0.6
Layout.maximumWidth: subsurfaceTheme.columnWidth * 0.18 Layout.maximumWidth: detailsView.col3Width
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
MobileComponents.Label { MobileComponents.Label {
id: txtAirTemp id: txtAirTemp
text: dive.airTemp text: dive.airTemp
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
Layout.maximumWidth: subsurfaceTheme.columnWidth * 0.18 Layout.maximumWidth: detailsView.col4Width
} }
MobileComponents.Label { MobileComponents.Label {
text: "Cylinder:" text: "Cylinder:"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
opacity: 0.6 opacity: 0.6
Layout.maximumWidth: detailsView.col1Width
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
MobileComponents.Label { MobileComponents.Label {
id: txtCylinder id: txtCylinder
text: dive.getCylinder text: dive.getCylinder
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
Layout.maximumWidth: detailsView.col2Width
} }
MobileComponents.Label { MobileComponents.Label {
text: "Water Temp:" text: "Water Temp:"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
opacity: 0.6 opacity: 0.6
Layout.maximumWidth: detailsView.col3Width
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
MobileComponents.Label { MobileComponents.Label {
id: txtWaterTemp id: txtWaterTemp
text: dive.waterTemp text: dive.waterTemp
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
Layout.maximumWidth: detailsView.col4Width
} }
MobileComponents.Label { MobileComponents.Label {
text: "Dive Master:" text: "Dive Master:"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
opacity: 0.6 opacity: 0.6
Layout.maximumWidth: detailsView.col1Width
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
MobileComponents.Label { MobileComponents.Label {
id: txtDiveMaster id: txtDiveMaster
text: dive.divemaster text: dive.divemaster
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
Layout.maximumWidth: detailsView.col2Width
} }
MobileComponents.Label { MobileComponents.Label {
text: "Weight:" text: "Weight:"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
opacity: 0.6 opacity: 0.6
Layout.maximumWidth: detailsView.col3Width
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
MobileComponents.Label { MobileComponents.Label {
id: txtWeight id: txtWeight
text: dive.sumWeight text: dive.sumWeight
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
Layout.maximumWidth: detailsView.col4Width
} }
MobileComponents.Label { MobileComponents.Label {
text: "Buddy:" text: "Buddy:"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
opacity: 0.6 opacity: 0.6
Layout.maximumWidth: detailsView.col1Width
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
MobileComponents.Label { MobileComponents.Label {
@ -227,6 +242,7 @@ Item {
text: dive.buddy text: dive.buddy
Layout.columnSpan: 3 Layout.columnSpan: 3
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
Layout.maximumWidth: detailsView.col2Width + detailsView.col3Width + detailsView.col4Width
} }
MobileComponents.Heading { MobileComponents.Heading {