mirror of
https://github.com/subsurface/subsurface.git
synced 2025-02-19 22:16:15 +00:00
QML-UI: Layout improvements in app list and details header
- fix spacing and sizing in TopBar - use an anchor layout for the delegate and split out labels and values: this allows more uniform alignment - add the subsurface mobile icon to the first page - various visual touch-ups to taste Signed-off-by: Sebastian Kügler <sebas@kde.org> Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
parent
ac6b267d40
commit
38e1dc1589
4 changed files with 91 additions and 19 deletions
|
|
@ -40,23 +40,84 @@ Rectangle {
|
|||
|
||||
//Layout of the page: (mini profile, dive no, date at the top
|
||||
//And other details at the bottom.
|
||||
Column {
|
||||
Item {
|
||||
x: units.spacing
|
||||
width: parent.width - units.spacing * 2
|
||||
height: childrenRect.height + units.spacing * 2
|
||||
spacing: units.spacing / 2
|
||||
//spacing: units.spacing / 2
|
||||
anchors.margins: units.spacing
|
||||
|
||||
Text {
|
||||
text: diveNumber + ' (' + date + ')'
|
||||
id: locationText
|
||||
text: location
|
||||
color: theme.textColor
|
||||
scale: 1.1 // Let's see how this works, otherwise, we'll need the default point size somewhere
|
||||
transformOrigin: Item.TopLeft
|
||||
anchors {
|
||||
left: parent.left
|
||||
top: parent.top
|
||||
}
|
||||
}
|
||||
Text { text: location; width: parent.width }
|
||||
Text { text: '<b>Depth:</b> ' + depth + ' <b>Duration:</b> ' + duration; width: parent.width }
|
||||
Text {
|
||||
text: date
|
||||
opacity: 0.6
|
||||
color: theme.textColor
|
||||
anchors {
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
bottomMargin: units.spacing / 2
|
||||
}
|
||||
}
|
||||
Row {
|
||||
id: descriptionText
|
||||
anchors {
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottom: numberText.bottom
|
||||
}
|
||||
Text {
|
||||
text: 'Depth: '
|
||||
opacity: 0.6
|
||||
color: theme.textColor
|
||||
}
|
||||
Text {
|
||||
text: depth
|
||||
width: Math.max(units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview
|
||||
color: theme.textColor
|
||||
}
|
||||
Text {
|
||||
text: 'Duration: '
|
||||
opacity: 0.6
|
||||
color: theme.textColor
|
||||
}
|
||||
Text {
|
||||
text: duration
|
||||
color: theme.textColor
|
||||
}
|
||||
}
|
||||
Text {
|
||||
id: numberText
|
||||
text: "#" + diveNumber
|
||||
color: theme.textColor
|
||||
scale: 1.2
|
||||
transformOrigin: Item.BottomRight
|
||||
opacity: 0.4
|
||||
anchors {
|
||||
right: parent.right
|
||||
topMargin: units.spacing
|
||||
top: locationText.bottom
|
||||
}
|
||||
}
|
||||
//Text { text: location; width: parent.width }
|
||||
Rectangle {
|
||||
color: theme.textColor
|
||||
opacity: .2
|
||||
width: parent.width
|
||||
height: Math.max(1, units.gridUnit / 24) // we really want a thin line
|
||||
anchors {
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
top: numberText.bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue