mirror of
https://github.com/subsurface/subsurface.git
synced 2025-02-19 22:16:15 +00:00
QML UI: Move DiveDetails to the StackView
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
parent
ea11eff279
commit
ab44c78993
4 changed files with 105 additions and 123 deletions
85
qt-mobile/DiveDetails.qml
Normal file
85
qt-mobile/DiveDetails.qml
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Dialogs 1.2
|
||||
import QtQuick.Layouts 1.1
|
||||
import org.subsurfacedivelog.mobile 1.0
|
||||
|
||||
Item {
|
||||
id: diveDetailsWindow
|
||||
width: parent.width
|
||||
|
||||
property string location
|
||||
property string dive_id
|
||||
property string airtemp
|
||||
property string watertemp
|
||||
property string suit
|
||||
property string buddy
|
||||
property string divemaster;
|
||||
property string notes;
|
||||
|
||||
onDive_idChanged: {
|
||||
qmlProfile.diveId = dive_id
|
||||
qmlProfile.update()
|
||||
}
|
||||
|
||||
Flickable {
|
||||
id: flick
|
||||
width: parent.width
|
||||
anchors { top: parent.top; bottom: parent.bottom }
|
||||
contentHeight: parent.height
|
||||
clip: true
|
||||
ColumnLayout {
|
||||
width: parent.width
|
||||
RowLayout {
|
||||
Button {
|
||||
text: "Back"
|
||||
onClicked: {
|
||||
manager.commitChanges(
|
||||
dive_id,
|
||||
suit,
|
||||
buddy,
|
||||
divemaster,
|
||||
notes
|
||||
)
|
||||
stackView.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GridLayout {
|
||||
id: editorDetails
|
||||
width: parent.width
|
||||
columns: 2
|
||||
Text { }
|
||||
QMLProfile {
|
||||
id: qmlProfile
|
||||
height: 500
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,4 +104,8 @@ ApplicationWindow {
|
|||
visible: false
|
||||
}
|
||||
|
||||
DiveDetails {
|
||||
id: detailsWindow
|
||||
visible: false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,6 @@
|
|||
<file>TextButton.qml</file>
|
||||
<file>Preferences.qml</file>
|
||||
<file>DiveList.qml</file>
|
||||
<file>DiveDetails.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue