increase horizontal spacing at the edges

Spacing around pages is half a grid unit, as consistent with (some of
the) other pages. For the dive list, it's slightly more complicated:

We want the list items to reach the edges on both side as to increase
the interactive area. We have to apply the spacing left and right inside
the listitems. This patch does that.

Another consistency fix with other pages is that we're now adding a
header at the top of the dive list, which scrolles with the list view.

Signed-off-by: Sebastian Kügler <sebas@kde.org>
This commit is contained in:
Sebastian Kügler 2015-12-08 01:10:56 +01:00
parent 1f41d933c0
commit fdd15d5d7a

View file

@ -45,7 +45,7 @@ MobileComponents.Page {
} }
Item { Item {
width: parent.width - MobileComponents.Units.smallSpacing * 2 width: parent.width - MobileComponents.Units.gridUnit
height: childrenRect.height - MobileComponents.Units.smallSpacing height: childrenRect.height - MobileComponents.Units.smallSpacing
MobileComponents.Label { MobileComponents.Label {
@ -56,6 +56,7 @@ MobileComponents.Page {
maximumLineCount: 1 // needed for elide to work at all maximumLineCount: 1 // needed for elide to work at all
anchors { anchors {
left: parent.left left: parent.left
leftMargin: MobileComponents.Units.gridUnit / 2
top: parent.top top: parent.top
right: dateLabel.left right: dateLabel.left
} }
@ -73,7 +74,9 @@ MobileComponents.Page {
Row { Row {
anchors { anchors {
left: parent.left left: parent.left
leftMargin: MobileComponents.Units.gridUnit / 2
right: parent.right right: parent.right
rightMargin: MobileComponents.Units.gridUnit / 2
bottom: numberText.bottom bottom: numberText.bottom
} }
MobileComponents.Label { MobileComponents.Label {
@ -104,6 +107,7 @@ MobileComponents.Page {
opacity: 0.6 opacity: 0.6
anchors { anchors {
right: parent.right right: parent.right
rightMargin: MobileComponents.Units.gridUnit / 2
top: locationText.bottom top: locationText.bottom
} }
} }
@ -114,7 +118,7 @@ MobileComponents.Page {
Component { Component {
id: tripHeading id: tripHeading
Item { Item {
width: page.width - MobileComponents.Units.smallSpacing * 2 width: page.width - MobileComponents.Units.gridUnit
height: childrenRect.height + MobileComponents.Units.smallSpacing * 2 height: childrenRect.height + MobileComponents.Units.smallSpacing * 2
MobileComponents.Heading { MobileComponents.Heading {
@ -123,7 +127,7 @@ MobileComponents.Page {
anchors { anchors {
top: parent.top top: parent.top
left: parent.left left: parent.left
leftMargin: MobileComponents.Units.smallSpacing leftMargin: MobileComponents.Units.gridUnit / 2
right: parent.right right: parent.right
} }
level: 2 level: 2
@ -133,7 +137,7 @@ MobileComponents.Page {
anchors { anchors {
top: sectionText.bottom top: sectionText.bottom
left: parent.left left: parent.left
leftMargin: MobileComponents.Units.smallSpacing leftMargin: MobileComponents.Units.gridUnit / 2
right: parent.right right: parent.right
} }
color: subsurfaceTheme.accentColor color: subsurfaceTheme.accentColor
@ -164,9 +168,17 @@ MobileComponents.Page {
section.property: "trip" section.property: "trip"
section.criteria: ViewSection.FullString section.criteria: ViewSection.FullString
section.delegate: tripHeading section.delegate: tripHeading
header: MobileComponents.Heading {
x: MobileComponents.Units.gridUnit / 2
y: x
text: "Dive Log"
opacity: 0.8 - startPage.opacity
visible: opacity > 0
}
} }
} }
StartPage { StartPage {
id: startPage
anchors.fill: parent anchors.fill: parent
opacity: (diveListView.count == 0) ? 1.0 : 0 opacity: (diveListView.count == 0) ? 1.0 : 0
visible: opacity > 0 visible: opacity > 0