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

QML-UI: improve list painting

Browse source 
- section headers get underline with a thick line
- items are separated by spacing and a thin grey line at the bottom
- spacing on both sides, aligning with header

Signed-off-by: Sebastian Kügler <sebas@kde.org>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Sebastian Kügler 2015-10-09 03:56:36 +02:00 • committed by Dirk Hohndel
parent 0ed2584231
commit 5195fcf919
1 changed files with 41 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
qt-mobile/DiveList.qml
View file

@ -16,18 +16,9 @@ Rectangle {
property real detailsOpacity : 0 property real detailsOpacity : 0
width: diveListView.width width: diveListView.width - units.spacing
height: childrenRect.height height: childrenRect.height
//Bounded rect for the background
Rectangle {
id: background
x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2;
color: "ivory"
border.color: "lightblue"
radius: 5
}
//Mouse region: When clicked, the mode changes to details view //Mouse region: When clicked, the mode changes to details view
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -49,19 +40,23 @@ Rectangle {
//Layout of the page: (mini profile, dive no, date at the top //Layout of the page: (mini profile, dive no, date at the top
//And other details at the bottom. //And other details at the bottom.
Row { Column {
id: topLayout x: units.spacing
x: 10; y: 10; height: childrenRect.height; width: parent.width width: parent.width - units.spacing * 2
height: childrenRect.height + units.spacing * 2
spacing: units.spacing / 2
anchors.margins: units.spacing
Column { Text {
width: background.width; height: childrenRect.height * 1.1 text: diveNumber + ' (' + date + ')'
spacing: 5 }
Text { text: location; width: parent.width }
Text { Text { text: '<b>Depth:</b> ' + depth + ' <b>Duration:</b> ' + duration; width: parent.width }
text: diveNumber + ' (' + date + ')' Rectangle {
} color: theme.textColor
Text { text: location; width: parent.width } opacity: .2
Text { text: '<b>Depth:</b> ' + depth + ' <b>Duration:</b> ' + duration; width: parent.width } width: parent.width
height: Math.max(1, units.gridUnit / 24) // we really want a thin line
} }
} }
} }
@ -69,16 +64,32 @@ Rectangle {
Component { Component {
id: tripHeading id: tripHeading
Rectangle { Item {
width: page.width width: page.width - units.spacing * 2
height: childrenRect.height height: childrenRect.height + units.spacing * 2
color: "lightsteelblue"
Text { Text {
id: sectionText
text: section text: section
font.bold: true anchors {
top: parent.top
left: parent.left
leftMargin: units.spacing
right: parent.right
}
color: theme.textColor
font.pointSize: 16 font.pointSize: 16
} }
Rectangle {
height: Math.max(2, units.gridUnit / 12) // we want a thicker line
anchors {
top: sectionText.bottom
left: parent.left
leftMargin: units.spacing
right: parent.right
}
color: theme.accentColor
}
} }
} }
@ -87,8 +98,10 @@ Rectangle {
anchors.fill: parent anchors.fill: parent
model: diveModel model: diveModel
delegate: diveDelegate delegate: diveDelegate
boundsBehavior: Flickable.StopAtBounds
//highlight: Rectangle { color: theme.highlightColor; width: units.spacing }
focus: true focus: true
clip: true
section.property: "trip" section.property: "trip"
section.criteria: ViewSection.FullString section.criteria: ViewSection.FullString
section.delegate: tripHeading section.delegate: tripHeading