Changeset 47a01b1d in subsurface


Ignore:
Timestamp:
Jun 18, 2017, 5:06:53 PM (2 months ago)
Author:
Dirk Hohndel <dirk@…>
Branches:
master
Children:
d74ef97
Parents:
6afe6ba
Message:

QML UI: improve the dive list layout

Based on Davide's ideas, but with a few tweaks:
I really like the dive number on the far right; that gives a clean
consistent look. I tried it with date on the left and depth/duration in
the middle and liked the result.

This doesn't change the font, just addresses the layout and bold heading
vs smaller sub-heading.

See #427

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

File:
1 edited

Legend:

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

    r8525805 r47a01b1d  
    6565                                                id: locationText
    6666                                                text: dive.location
    67                                                 font.weight: Font.Light
     67                                                font.weight: Font.Bold
    6868                                                elide: Text.ElideRight
    6969                                                maximumLineCount: 1 // needed for elide to work at all
     
    7373                                                        leftMargin: horizontalPadding
    7474                                                        top: parent.top
    75                                                         right: dateLabel.left
    76                                                 }
    77                                         }
    78                                         Kirigami.Label {
    79                                                 id: dateLabel
    80                                                 text: dive.date + " " + dive.time
    81                                                 font.pointSize: subsurfaceTheme.smallPointSize
    82                                                 color: textColor
    83                                                 anchors {
    8475                                                        right: parent.right
    85                                                         top: parent.top
    8676                                                }
    8777                                        }
    8878                                        Row {
    8979                                                anchors {
    90                                                         left: parent.left
    91                                                         leftMargin: horizontalPadding
    92                                                         right: parent.right
    93                                                         rightMargin: horizontalPadding
     80                                                        left: locationText.left
     81                                                        top: locationText.bottom
    9482                                                        topMargin: - Kirigami.Units.smallSpacing * 2
    95                                                         bottom: numberText.bottom
    96                                                 }
     83                                                }
     84
    9785                                                Kirigami.Label {
    98                                                         text: qsTr('Depth: ')
     86                                                        id: dateLabel
     87                                                        text: dive.date + " " + dive.time
     88                                                        width: Math.max(locationText.width * 0.45, paintedWidth) // helps vertical alignment throughout listview
    9989                                                        font.pointSize: subsurfaceTheme.smallPointSize
    10090                                                        color: textColor
    10191                                                }
     92                                                // let's try to show the depth / duration very compact
    10293                                                Kirigami.Label {
    103                                                         text: dive.depth
     94                                                        text: dive.depth + ' / ' + dive.duration
    10495                                                        width: Math.max(Kirigami.Units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview
    105                                                         font.pointSize: subsurfaceTheme.smallPointSize
    106                                                         color: textColor
    107                                                 }
    108                                                 Kirigami.Label {
    109                                                         text: qsTr('Duration: ')
    110                                                         font.pointSize: subsurfaceTheme.smallPointSize
    111                                                         color: textColor
    112                                                 }
    113                                                 Kirigami.Label {
    114                                                         text: dive.duration
    11596                                                        font.pointSize: subsurfaceTheme.smallPointSize
    11697                                                        color: textColor
     
    124105                                                anchors {
    125106                                                        right: parent.right
     107                                                        rightMargin: horizontalPadding
    126108                                                        top: locationText.bottom
    127109                                                        topMargin: - Kirigami.Units.smallSpacing * 2
Note: See TracChangeset for help on using the changeset viewer.