Changeset 4ea4e8f in subsurface


Ignore:
Timestamp:
Apr 11, 2017, 5:24:44 PM (13 days ago)
Author:
Dirk Hohndel <dirk@…>
Branches:
master
Children:
e355037
Parents:
f99aedc
git-author:
Dirk Hohndel <dirk@…> (04/10/17 11:15:58)
git-committer:
Dirk Hohndel <dirk@…> (04/11/17 17:24:44)
Message:

QML UI: re-layout the details view

This is a different take that seems to deal much better with different
width and font size combinations.

Signed-off-by: Dirk Hohndel <dirk@…>

File:
1 edited

Legend:

Unmodified
Added
Removed
  • mobile-widgets/qml/DiveDetailsView.qml

    rf99aedc r4ea4e8f  
    1111        id: detailsView
    1212        property real gridWidth: detailsView.width - 2 * Kirigami.Units.gridUnit
    13         property real col1Width: gridWidth * 0.23
    14         property real col2Width: gridWidth * 0.37
    15         property real col3Width: gridWidth * 0.20
    16         property real col4Width: gridWidth * 0.20
     13        property real col1Width: gridWidth * 0.40
     14        property real col2Width: gridWidth * 0.30
     15        property real col3Width: gridWidth * 0.30
    1716
    1817        width: diveDetailsPage.width - diveDetailsPage.leftPadding - diveDetailsPage.rightPadding
     
    128127                        margins: Math.round(Kirigami.Units.gridUnit / 2)
    129128                }
    130                 columns: 4
     129                columns: 3
    131130                rowSpacing: Kirigami.Units.smallSpacing * 2
    132131                columnSpacing: Kirigami.Units.smallSpacing
     
    136135                        level: 3
    137136                        text: qsTr("Dive Details")
    138                         Layout.columnSpan: 4
    139                 }
    140 
     137                        Layout.columnSpan: 3
     138                }
     139
     140                // first row
     141                //-----------
    141142                Kirigami.Label {
    142143                        text: qsTr("Suit:")
     
    144145                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    145146                        Layout.maximumWidth: detailsView.col1Width
    146                         Layout.alignment: Qt.AlignRight
    147                 }
     147                }
     148                Kirigami.Label {
     149                        text: qsTr("Air Temp:")
     150                        opacity: 0.6
     151                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
     152                        Layout.maximumWidth: detailsView.col2Width
     153                }
     154                Kirigami.Label {
     155                        text: qsTr("Water Temp:")
     156                        opacity: 0.6
     157                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
     158                        Layout.maximumWidth: detailsView.col3Width
     159                }
     160
     161                // second row
     162                //------------
    148163                Kirigami.Label {
    149164                        id: txtSuit
    150165                        text: dive.suit
    151166                        wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
    152                         Layout.maximumWidth: detailsView.col2Width
    153                 }
    154 
    155                 Kirigami.Label {
    156                         text: qsTr("Air Temp:")
    157                         opacity: 0.6
    158                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    159                         Layout.maximumWidth: detailsView.col3Width
    160                         Layout.alignment: Qt.AlignRight
     167                        Layout.maximumWidth: detailsView.col1Width
    161168                }
    162169                Kirigami.Label {
     
    164171                        text: dive.airTemp
    165172                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    166                         Layout.maximumWidth: detailsView.col4Width
    167                 }
    168 
     173                        Layout.maximumWidth: detailsView.col2Width
     174                }
     175                Kirigami.Label {
     176                        id: txtWaterTemp
     177                        text: dive.waterTemp
     178                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
     179                        Layout.maximumWidth: detailsView.col3Width
     180                }
     181
     182                Rectangle {
     183                        color: subsurfaceTheme.accentColor
     184                        height: 1
     185                        opacity: 0.5
     186                        Layout.columnSpan: 3
     187                        Layout.fillWidth: true
     188                }
     189
     190                // thrid row
     191                //------------
    169192                Kirigami.Label {
    170193                        text: qsTr("Cylinder:")
     
    172195                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    173196                        Layout.maximumWidth: detailsView.col1Width
    174                         Layout.alignment: Qt.AlignRight
    175                 }
     197                        Layout.bottomMargin: 0
     198                }
     199                Kirigami.Label {
     200                        text: qsTr("Weight:")
     201                        opacity: 0.6
     202                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
     203                        Layout.maximumWidth: detailsView.col2Width
     204                        Layout.bottomMargin: 0
     205                }
     206                Kirigami.Label {
     207                        text: qsTr("SAC:")
     208                        opacity: 0.6
     209                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
     210                        Layout.maximumWidth: detailsView.col3Width
     211                        Layout.bottomMargin: 0
     212                }
     213
     214                // fourth row
     215                //------------
    176216                Kirigami.Label {
    177217                        id: txtCylinder
    178218                        text: dive.getCylinder
    179219                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
     220                        Layout.maximumWidth: detailsView.col1Width
     221                }
     222                Kirigami.Label {
     223                        id: txtWeight
     224                        text: dive.sumWeight
     225                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    180226                        Layout.maximumWidth: detailsView.col2Width
    181227                }
    182 
    183                 Kirigami.Label {
    184                         text: qsTr("Water Temp:")
    185                         opacity: 0.6
     228                Kirigami.Label {
     229                        id: txtSAC
     230                        text: dive.sac
    186231                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    187232                        Layout.maximumWidth: detailsView.col3Width
    188                         Layout.alignment: Qt.AlignRight
    189                 }
    190                 Kirigami.Label {
    191                         id: txtWaterTemp
    192                         text: dive.waterTemp
    193                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    194                         Layout.maximumWidth: detailsView.col4Width
    195                 }
    196 
     233                }
     234
     235                Rectangle {
     236                        color: subsurfaceTheme.accentColor
     237                        height: 1
     238                        opacity: 0.5
     239                        Layout.columnSpan: 3
     240                        Layout.fillWidth: true
     241                }
     242
     243                // fifth row
     244                //-----------
    197245                Kirigami.Label {
    198246                        text: qsTr("Divemaster:")
     
    200248                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    201249                        Layout.maximumWidth: detailsView.col1Width
    202                         Layout.alignment: Qt.AlignRight
    203                 }
     250                        Layout.bottomMargin: 0
     251                }
     252                Kirigami.Label {
     253                        text: qsTr("Buddy:")
     254                        opacity: 0.6
     255                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
     256                        Layout.columnSpan: 2
     257                        Layout.maximumWidth: detailsView.col2Width + detailsView.col3Width
     258                        Layout.bottomMargin: 0
     259                }
     260
     261                // sixth row
     262                //-----------
    204263                Kirigami.Label {
    205264                        id: txtDiveMaster
    206265                        text: dive.divemaster
    207266                        wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
    208                         Layout.maximumWidth: detailsView.col2Width
    209                 }
    210 
    211                 Kirigami.Label {
    212                         text: qsTr("Weight:")
    213                         opacity: 0.6
    214                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    215                         Layout.maximumWidth: detailsView.col3Width
    216                         Layout.alignment: Qt.AlignRight
    217                 }
    218                 Kirigami.Label {
    219                         id: txtWeight
    220                         text: dive.sumWeight
    221                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    222                         Layout.maximumWidth: detailsView.col4Width
    223                 }
    224 
    225                 Kirigami.Label {
    226                         text: qsTr("Buddy:")
    227                         opacity: 0.6
    228                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    229                         Layout.maximumWidth: detailsView.col1Width
    230                         Layout.alignment: Qt.AlignRight
     267                        Layout.maximumWidth: detailsView.col1Width
    231268                }
    232269                Kirigami.Label {
     
    234271                        text: dive.buddy
    235272                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    236                         Layout.maximumWidth: detailsView.col2Width
    237                 }
    238 
    239                 Kirigami.Label {
    240                         text: qsTr("SAC:")
    241                         opacity: 0.6
    242                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    243                         Layout.maximumWidth: detailsView.col3Width
    244                         Layout.alignment: Qt.AlignRight
    245                 }
    246                 Kirigami.Label {
    247                         id: txtSAC
    248                         text: dive.sac
    249                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    250                         Layout.maximumWidth: detailsView.col4Width
    251                 }
     273                        Layout.columnSpan: 2
     274                        Layout.maximumWidth: detailsView.col2Width + detailsView.col3Width
     275                }
     276
     277                Rectangle {
     278                        color: subsurfaceTheme.accentColor
     279                        height: 1
     280                        opacity: 0.5
     281                        Layout.columnSpan: 3
     282                        Layout.fillWidth: true
     283                }
     284
    252285
    253286                Kirigami.Heading {
     
    256289                        text: qsTr("Notes")
    257290                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
    258                         Layout.columnSpan: 4
     291                        Layout.columnSpan: 3
    259292                }
    260293
     
    263296                        text: dive.notes
    264297                        focus: true
    265                         Layout.columnSpan: 4
     298                        Layout.columnSpan: 3
    266299                        Layout.fillWidth: true
    267300                        wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
    268301                }
    269302                Item {
    270                         Layout.columnSpan: 4
     303                        Layout.columnSpan: 3
    271304                        Layout.fillWidth: true
    272305                        Layout.minimumHeight: Kirigami.Units.gridUnit * 3
Note: See TracChangeset for help on using the changeset viewer.