QML UI: make dives outside of dive trips always visible

Create small visible separation from the dive trip before. And make the dive
trip header a slightly different color so they stand out between dives.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Dirk Hohndel 2016-03-29 20:08:15 -05:00
parent 83c72e7a79
commit a065b97472

View file

@ -21,8 +21,8 @@ MobileComponents.Page {
enabled: true enabled: true
checked: diveListView.currentIndex === model.index checked: diveListView.currentIndex === model.index
width: parent.width width: parent.width
height: dive.tripMeta == activeTrip ? diveDelegateItem.height : 0 height: dive.tripMeta == activeTrip || dive.tripMeta === "--" ? diveDelegateItem.height : 0
visible: dive.tripMeta == activeTrip ? true : false visible: dive.tripMeta == activeTrip || dive.tripMeta === "--" ? true : false
property real detailsOpacity : 0 property real detailsOpacity : 0
property int horizontalPadding: MobileComponents.Units.gridUnit / 2 - MobileComponents.Units.smallSpacing + 1 property int horizontalPadding: MobileComponents.Units.gridUnit / 2 - MobileComponents.Units.smallSpacing + 1
@ -113,8 +113,10 @@ MobileComponents.Page {
id: tripHeading id: tripHeading
Item { Item {
width: page.width - MobileComponents.Units.gridUnit width: page.width - MobileComponents.Units.gridUnit
height: childrenRect.height + MobileComponents.Units.smallSpacing * 2 + Math.max(2, MobileComponents.Units.gridUnit / 2) height: (section !== "--") ?
childrenRect.height + MobileComponents.Units.smallSpacing * 2 + Math.max(2, MobileComponents.Units.gridUnit / 2) :
Math.max(2, MobileComponents.Units.gridUnit / 2)
visible: section !== "---"
MobileComponents.Heading { MobileComponents.Heading {
id: sectionText id: sectionText
text: { text: {
@ -137,19 +139,23 @@ MobileComponents.Page {
leftMargin: MobileComponents.Units.gridUnit / 2 leftMargin: MobileComponents.Units.gridUnit / 2
right: parent.right right: parent.right
} }
color: textColor color: subsurfaceTheme.accentColor
level: 2 level: 2
MouseArea { MouseArea {
anchors.fill: sectionText anchors.fill: sectionText
enabled: section !== "--"
onClicked: { onClicked: {
activeTrip = section if (activeTrip != section)
activeTrip = section
else
activeTrip = ""
} }
} }
} }
Rectangle { Rectangle {
height: Math.max(2, MobileComponents.Units.gridUnit / 12) // we want a thicker line height: Math.max(2, MobileComponents.Units.gridUnit / 12) // we want a thicker line
anchors { anchors {
top: sectionText.bottom top: section !== "--" ? sectionText.bottom : sectionText.top
left: parent.left left: parent.left
leftMargin: MobileComponents.Units.gridUnit * -2 leftMargin: MobileComponents.Units.gridUnit * -2
rightMargin: MobileComponents.Units.gridUnit * -2 rightMargin: MobileComponents.Units.gridUnit * -2