mifr/subsurface
1
0
Fork 0
mirror of https://github.com/subsurface/subsurface.git synced 2025-02-08 02:46:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

QML UI: improve the dive list layout

Browse source 
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@hohndel.org>
This commit is contained in:
Dirk Hohndel 2017-06-18 17:06:53 -07:00
parent 6afe6baa14
commit 47a01b1dcd
1 changed files with 10 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
mobile-widgets/qml/DiveList.qml
View file

@ -64,7 +64,7 @@ Kirigami.ScrollablePage {
Kirigami.Label { Kirigami.Label {
id: locationText id: locationText
text: dive.location text: dive.location
font.weight: Font.Light font.weight: Font.Bold
elide: Text.ElideRight elide: Text.ElideRight
maximumLineCount: 1 // needed for elide to work at all maximumLineCount: 1 // needed for elide to work at all
color: textColor color: textColor
@ -72,49 +72,30 @@ Kirigami.ScrollablePage {
left: parent.left left: parent.left
leftMargin: horizontalPadding leftMargin: horizontalPadding
top: parent.top top: parent.top
right: dateLabel.left
}
}
Kirigami.Label {
id: dateLabel
text: dive.date + " " + dive.time
font.pointSize: subsurfaceTheme.smallPointSize
color: textColor
anchors {
right: parent.right right: parent.right
top: parent.top
} }
} }
Row { Row {
anchors { anchors {
left: parent.left left: locationText.left
leftMargin: horizontalPadding top: locationText.bottom
right: parent.right
rightMargin: horizontalPadding
topMargin: - Kirigami.Units.smallSpacing * 2 topMargin: - Kirigami.Units.smallSpacing * 2
bottom: numberText.bottom
} }
Kirigami.Label { Kirigami.Label {
text: qsTr('Depth: ') id: dateLabel
text: dive.date + " " + dive.time
width: Math.max(locationText.width * 0.45, paintedWidth) // helps vertical alignment throughout listview
font.pointSize: subsurfaceTheme.smallPointSize font.pointSize: subsurfaceTheme.smallPointSize
color: textColor color: textColor
} }
// let's try to show the depth / duration very compact
Kirigami.Label { Kirigami.Label {
text: dive.depth text: dive.depth + ' / ' + dive.duration
width: Math.max(Kirigami.Units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview width: Math.max(Kirigami.Units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview
font.pointSize: subsurfaceTheme.smallPointSize font.pointSize: subsurfaceTheme.smallPointSize
color: textColor color: textColor
} }
Kirigami.Label {
text: qsTr('Duration: ')
font.pointSize: subsurfaceTheme.smallPointSize
color: textColor
}
Kirigami.Label {
text: dive.duration
font.pointSize: subsurfaceTheme.smallPointSize
color: textColor
}
} }
Kirigami.Label { Kirigami.Label {
id: numberText id: numberText
@ -123,6 +104,7 @@ Kirigami.ScrollablePage {
color: textColor color: textColor
anchors { anchors {
right: parent.right right: parent.right
rightMargin: horizontalPadding
top: locationText.bottom top: locationText.bottom
topMargin: - Kirigami.Units.smallSpacing * 2 topMargin: - Kirigami.Units.smallSpacing * 2
} }