mirror of
https://github.com/subsurface/subsurface.git
synced 2025-02-19 22:16:15 +00:00
redesign dive details view
This change cleans up the layout optimized for viewing dive details. The top part contains brief and essential dive info (location, depth, duration, dive no.), then the profile, then a table with more details, and finally the notes. The goal here is to present the dive's data more efficiently and attractively now that the edit part is factored out. Signed-off-by: Sebastian Kügler <sebas@kde.org>
This commit is contained in:
Sebastian Kügler
parent
936c9cee1f
commit
04b6446e72
2 changed files with 78 additions and 51 deletions
|
|
@ -45,11 +45,12 @@ MobileComponents.Page {
|
|||
|
||||
contextualActions: [
|
||||
Action {
|
||||
text: "Save Changes"
|
||||
text: "Save"
|
||||
enabled: diveDetailsWindow.state == "edit"
|
||||
iconName: "document-save"
|
||||
onTriggered: {
|
||||
manager.saveChanges();
|
||||
contextDrawer.close();
|
||||
}
|
||||
},
|
||||
Action {
|
||||
|
|
@ -57,7 +58,9 @@ MobileComponents.Page {
|
|||
checkable: true
|
||||
iconName: checked ? "view-readermode" : "document-edit"
|
||||
onTriggered: {
|
||||
diveDetailsWindow.state = checked ? "edit" : "view"
|
||||
diveDetailsWindow.state = checked ? "edit" : "view";
|
||||
contextDrawer.close();
|
||||
// close drawer?
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,6 +72,7 @@ MobileComponents.Page {
|
|||
id: flick
|
||||
anchors.fill: parent
|
||||
contentHeight: content.height
|
||||
interactive: contentHeight > height
|
||||
clip: true
|
||||
Item {
|
||||
id: content
|
||||
|
|
@ -81,8 +85,9 @@ MobileComponents.Page {
|
|||
left: parent.left
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
margins: MobileComponents.Units.smallSpacing
|
||||
margins: MobileComponents.Units.gridUnit / 2
|
||||
}
|
||||
visible: opacity > 0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation { duration: MobileComponents.Units.shortDuration }
|
||||
|
|
@ -94,8 +99,9 @@ MobileComponents.Page {
|
|||
left: parent.left
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
margins: MobileComponents.Units.smallSpacing
|
||||
margins: MobileComponents.Units.gridUnit / 2
|
||||
}
|
||||
visible: opacity > 0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation { duration: MobileComponents.Units.shortDuration }
|
||||
|
|
|
|||
|
|
@ -6,10 +6,14 @@ import QtQuick.Layouts 1.1
|
|||
import org.subsurfacedivelog.mobile 1.0
|
||||
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
|
||||
|
||||
ColumnLayout {
|
||||
GridLayout {
|
||||
id: detailsView
|
||||
|
||||
spacing: MobileComponents.Units.smallSpacing
|
||||
columns: 4
|
||||
rowSpacing: MobileComponents.Units.smallSpacing * 2
|
||||
columnSpacing: MobileComponents.Units.smallSpacing
|
||||
|
||||
property int labelWidth: MobileComponents.Units.gridUnit * 10
|
||||
|
||||
Connections {
|
||||
target: diveDetailsWindow
|
||||
|
|
@ -21,28 +25,27 @@ ColumnLayout {
|
|||
|
||||
MobileComponents.Heading {
|
||||
id: detailsViewHeading
|
||||
Layout.columnSpan: 2
|
||||
Layout.fillWidth: true
|
||||
text: location
|
||||
Layout.columnSpan: 4
|
||||
}
|
||||
|
||||
MobileComponents.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
id: depthLabel
|
||||
text: "Depth: "
|
||||
opacity: 0.6
|
||||
}
|
||||
MobileComponents.Label {
|
||||
text: depth
|
||||
Layout.minimumWidth: Math.max(MobileComponents.Units.gridUnit * 4, paintedWidth) // helps vertical alignment throughout listview
|
||||
}
|
||||
MobileComponents.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text: "Duration: "
|
||||
opacity: 0.6
|
||||
}
|
||||
RowLayout {
|
||||
// anchors {
|
||||
// left: parent.left
|
||||
// right: parent.right
|
||||
// bottom: numberText.bottom
|
||||
// }
|
||||
Layout.columnSpan: 2
|
||||
MobileComponents.Label {
|
||||
text: 'Depth: '
|
||||
opacity: 0.6
|
||||
}
|
||||
MobileComponents.Label {
|
||||
text: depth
|
||||
Layout.minimumWidth: Math.max(MobileComponents.Units.gridUnit * 4, paintedWidth) // helps vertical alignment throughout listview
|
||||
}
|
||||
MobileComponents.Label {
|
||||
text: 'Duration: '
|
||||
opacity: 0.6
|
||||
}
|
||||
MobileComponents.Label {
|
||||
text: duration
|
||||
}
|
||||
|
|
@ -54,38 +57,37 @@ ColumnLayout {
|
|||
id: numberText
|
||||
text: "#" + diveNumber
|
||||
color: MobileComponents.Theme.textColor
|
||||
//opacity: 0.6
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.columnSpan: 2
|
||||
QMLProfile {
|
||||
id: qmlProfile
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: qmlProfile.height
|
||||
QMLProfile {
|
||||
id: qmlProfile
|
||||
//height: MobileComponents.Units.gridUnit * 25
|
||||
height: width * 0.66
|
||||
anchors {
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
}
|
||||
//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
|
||||
Layout.preferredHeight: width * 0.66
|
||||
Layout.columnSpan: 4
|
||||
|
||||
Rectangle {
|
||||
color: "transparent"
|
||||
opacity: 0.6
|
||||
border.width: 1
|
||||
border.color: MobileComponents.Theme.textColor;
|
||||
anchors.fill: parent
|
||||
|
||||
}
|
||||
//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
|
||||
}
|
||||
MobileComponents.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text: "Location:"
|
||||
}
|
||||
MobileComponents.Label {
|
||||
id: txtLocation; text: location;
|
||||
|
||||
MobileComponents.Heading {
|
||||
Layout.fillWidth: true
|
||||
level: 3
|
||||
text: "Dive Details"
|
||||
Layout.columnSpan: 4
|
||||
}
|
||||
|
||||
MobileComponents.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text: "Air Temp:"
|
||||
opacity: 0.6
|
||||
}
|
||||
MobileComponents.Label {
|
||||
id: txtAirTemp
|
||||
|
|
@ -96,6 +98,7 @@ ColumnLayout {
|
|||
MobileComponents.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text: "Water Temp:"
|
||||
opacity: 0.6
|
||||
}
|
||||
MobileComponents.Label {
|
||||
id: txtWaterTemp
|
||||
|
|
@ -106,7 +109,7 @@ ColumnLayout {
|
|||
MobileComponents.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text: "Suit:"
|
||||
|
||||
opacity: 0.6
|
||||
}
|
||||
MobileComponents.Label {
|
||||
id: txtSuit
|
||||
|
|
@ -114,9 +117,21 @@ ColumnLayout {
|
|||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
MobileComponents.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text: "Weight:"
|
||||
opacity: 0.6
|
||||
}
|
||||
MobileComponents.Label {
|
||||
id: txtWeight
|
||||
text: weight
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
MobileComponents.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text: "Buddy:"
|
||||
opacity: 0.6
|
||||
}
|
||||
MobileComponents.Label {
|
||||
id: txtBuddy
|
||||
|
|
@ -127,6 +142,7 @@ ColumnLayout {
|
|||
MobileComponents.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text: "Dive Master:"
|
||||
opacity: 0.6
|
||||
}
|
||||
MobileComponents.Label {
|
||||
id: txtDiveMaster
|
||||
|
|
@ -134,21 +150,26 @@ ColumnLayout {
|
|||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
MobileComponents.Label {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text: "Notes:"
|
||||
MobileComponents.Heading {
|
||||
Layout.fillWidth: true
|
||||
level: 3
|
||||
text: "Notes"
|
||||
Layout.columnSpan: 4
|
||||
}
|
||||
|
||||
MobileComponents.Label {
|
||||
id: txtNotes
|
||||
text: notes
|
||||
focus: true
|
||||
Layout.columnSpan: 4
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
//selectByMouse: true
|
||||
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
|
||||
}
|
||||
Item {
|
||||
height: MobileComponents.Units.gridUnit * 3
|
||||
width: height // just to make sure the spacer doesn't produce scrollbars, but also isn't null
|
||||
Layout.columnSpan: 4
|
||||
Layout.fillWidth: true
|
||||
Layout.minimumHeight: MobileComponents.Units.gridUnit * 3
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue