QML UI: better list of downloaded dives

Not the lsit is much more compact and shows a lot more dives even on
smaller screens. And it's similar in style to the dive list.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Dirk Hohndel 2017-07-23 07:54:43 -07:00
parent b9e90441ca
commit 8c0a1c2e6d

View file

@ -17,16 +17,19 @@ Kirigami.AbstractListItem {
enabled: true
supportsMouseEvents: true
width: parent.width
height: Math.round(Kirigami.Units.gridUnit * 1.8)
padding: 0
property real detailsOpacity : 0
property int horizontalPadding: Kirigami.Units.gridUnit / 2 - Kirigami.Units.smallSpacing + 1
property color textColor: subsurfaceTheme.textColor
property color textColor: subsurfaceTheme.secondaryTextColor
Row {
id: downloadedDive
width: parent.width
height: childrenRect.height + Kirigami.Units.smallSpacing
spacing: horizontalPadding
spacing: Kirigami.Units.largeSpacing
padding: 0
anchors.leftMargin: Math.round (Kirigami.Units.largeSpacing / 2)
anchors.fill: parent
add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
@ -36,6 +39,7 @@ Kirigami.AbstractListItem {
checked: innerListItem.selected;
width: childrenRect.width - Kirigami.Units.smallSpacing;
height: childrenRect.heigh - Kirigami.Units.smallSpacing;
anchors.verticalCenter: parent.verticalCenter
indicator: Rectangle {
visible: diveIsSelected
implicitWidth: 20
@ -61,52 +65,18 @@ Kirigami.AbstractListItem {
importModel.selectRow(index)
}
}
Item {
id: diveListEntry
width: parent.width - diveIsSelected.width - Kirigami.Units.gridUnit * (innerListItem.deleteButtonVisible ? 3 : 1)
height: childrenRect.height - Kirigami.Units.smallSpacing
Kirigami.Label {
id: depthLabel
text: "Depth " + innerListItem.depth
font.weight: Font.Light
elide: Text.ElideRight
maximumLineCount: 1 // needed for elide to work at all
anchors {
left: parent.left
leftMargin: horizontalPadding
top: parent.top
right: dateLabel.left
}
}
Kirigami.Label {
id: dateLabel
text: innerListItem.datetime
font.pointSize: subsurfaceTheme.smallPointSize
anchors {
bottom: parent.bottom
right: parent.right
top: parent.top
}
}
Row {
anchors {
top: depthLabel.bottom
left: parent.left
leftMargin: horizontalPadding
right: parent.right
rightMargin: horizontalPadding
topMargin: - Kirigami.Units.smallSpacing * 2
}
Kirigami.Label {
text: qsTr('Duration: ')
font.pointSize: subsurfaceTheme.smallPointSize
}
Kirigami.Label {
text: innerListItem.duration
font.pointSize: subsurfaceTheme.smallPointSize
}
}
Kirigami.Label {
id: dateLabel
text: innerListItem.datetime
width: Math.round(parent.width * 0.35)
font.pointSize: subsurfaceTheme.smallPointSize
color: textColor
}
Kirigami.Label {
text: innerListItem.depth + ' / ' + innerListItem.duration
width: Math.round(parent.width * 0.35)
font.pointSize: subsurfaceTheme.smallPointSize
color: textColor
}
}
}