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: Move DiveDetails to the StackView

Browse source 
Add a DiveDetails.qml to hold the dive details, and display it in
the stack view when the user taps on a dive.

Signed-off-by: Grace Karanja <gracie.karanja89@gmail.com>
This commit is contained in:
Grace Karanja 2015-07-21 15:00:29 +03:00
parent ea11eff279
commit ab44c78993
4 changed files with 105 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

138
qt-mobile/DiveList.qml
View file

@ -10,7 +10,6 @@ Rectangle {
Component {
id: diveDelegate
Item {
id: dive
@ -24,14 +23,25 @@ Rectangle {
id: background
x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2;
color: "ivory"
border.color: "orange"
border.color: "lightblue"
radius: 5
}
//Mouse region: When clicked, the mode changes to details view
MouseArea {
anchors.fill: parent
onClicked: dive.state = 'Details'
onClicked: {
detailsWindow.width = parent.width
detailsWindow.location = location
detailsWindow.dive_id = id
detailsWindow.buddy = buddy
detailsWindow.suit = suit
detailsWindow.airtemp = airtemp
detailsWindow.watertemp = watertemp
detailsWindow.divemaster = divemaster
detailsWindow.notes = notes
stackView.push(detailsWindow)
}
}
//Layout of the page: (mini profile, dive no, date at the tio
@ -39,7 +49,6 @@ Rectangle {
Row {
id: topLayout
x: 10; y: 10; height: childrenRect.height; width: parent.width
spacing: 10
Column {
width: background.width; height: childrenRect.height * 1.1
@ -48,125 +57,8 @@ Rectangle {
Text {
text: diveNumber + ' (' + date + ')'
}
Text { text: location; width: details.width }
Text { text: '<b>Depth:</b> ' + depth + ' <b>Duration:</b>' + duration; width: details.width }
}
}
Item {
id: details
x: 10; width: parent.width - 20
anchors { top: topLayout.bottom; topMargin: 10; bottom:parent.bottom; bottomMargin: 10 }
opacity: dive.detailsOpacity
Text {
id: detailsTitle
anchors.top: parent.top
text: "Dive Details"
font.pointSize: 12; font.bold: true
}
Flickable {
id: flick
width: parent.width
anchors { top: detailsTitle.bottom; bottom: parent.bottom }
contentHeight: editorDetails.height
clip: true
GridLayout {
id: editorDetails
width: detailsPage.width
columns: 2
Text { }
QMLProfile {
diveId: id
height: 400
Layout.fillWidth: true
}
Text { text: "Location:"; font.bold: true }
TextField { id: txtLocation; text: location; Layout.fillWidth: true }
Text { text: "Air Temp:"; font.bold: true }
TextField { id: txtAirTemp; text: airtemp; Layout.fillWidth: true }
Text { text: "Water Temp:"; font.bold: true }
TextField { id: txtWaterTemp; text: watertemp; Layout.fillWidth: true }
Text { text: "Suit:"; font.bold: true }
TextField { id: txtSuit; text: suit; Layout.fillWidth: true }
Text { text: "Buddy:"; font.bold: true }
TextField { id: txtBuddy; text: buddy; Layout.fillWidth: true }
Text { text: "Dive Master:"; font.bold: true }
TextField { id: txtDiveMaster; text: divemaster; Layout.fillWidth: true}
Text { text: "Notes:"; font.bold: true }
TextEdit{
id: txtNotes
text: notes
focus: true
Layout.fillWidth: true
Layout.fillHeight: true
selectByMouse: true
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
}
}
}
}
TextButton {
y: 10
anchors { right: background.right; rightMargin: 10 }
opacity: dive.detailsOpacity
text: "Close"
onClicked: {
manager.commitChanges(
id,
txtSuit.text,
txtBuddy.text,
txtDiveMaster.text,
txtNotes.text
)
dive.state = '';
}
}
states: State {
name: "Details"
PropertyChanges {
target: background
color: "white"
}
PropertyChanges {
target: dive
detailsOpacity: 1; x:0 //Make details visible
height: diveListView.height //Fill entire list area with the details
}
//Move the list so that this item is at the top
PropertyChanges {
target: dive.ListView.view
explicit: true
contentY: dive.y
}
//Disable flicking while we are in detailed view
PropertyChanges {
target: dive.ListView.view
interactive: false
}
}
transitions: Transition {
//make the state changes smooth
ParallelAnimation {
ColorAnimation {
property: "color"
duration: 500
}
NumberAnimation {
duration: 300
properties: "detailsOpacity,x,contentY,height,width"
}
Text { text: location; width: parent.width }
Text { text: '<b>Depth:</b> ' + depth + ' <b>Duration:</b>' + duration; width: parent.width }
}
}
}