summaryrefslogtreecommitdiffstats
path: root/qt-mobile/main.qml
blob: bf36e8866a500a4723d62209b0b9dc75542b10d6 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
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

ApplicationWindow {
	title: qsTr("Subsurface")
	width: 500;

	QMLManager {
		id: manager
	}

	Preferences {
		id: prefsWindow
	}

	ColumnLayout {
		id: layout
		anchors.fill: parent
		spacing: 4

		Rectangle {
			id: topPart
			height: 35
			Layout.fillWidth: true
			Layout.maximumHeight: 35

			RowLayout {
				Button {
					id: prefsButton
					text: "Preferences"
					onClicked: {
						prefsWindow.show()
					}
				}

				Button {
					id: loadDivesButton
					text: "Load Dives"
					onClicked: {
						manager.loadDives();
					}
				}
			}

		}

		Rectangle {
			id: page
			Layout.fillHeight: true
			Layout.fillWidth: true

			Component {
				id: diveDelegate

				Item {
					id: dive

					property real detailsOpacity : 0

					width: diveListView.width
					height: 70

					//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: "orange"
						radius: 5
					}

					//Mouse region: When clicked, the mode changes to details view
					MouseArea {
						anchors.fill: parent
						onClicked: dive.state = 'Details'
					}

					//Layout of the page: (mini profile, dive no, date at the tio
					//And other details at the bottom.
					Row {
						id: topLayout
						x: 10; y: 10; height: 60; width: parent.width
						spacing: 10

						Column {
							width: background.width; height: 60
							spacing: 5

							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: detailsView.height
							clip: true
							Row {
								Text { text:
									    '<b>Location: </b>' + location +
									    '<br><b>Air temp: </b>' + airtemp + ' <b> Water temp: </b>' + watertemp +
									    '<br><b>Suit: </b>' + suit +
									    '<br><b>Buddy: </b>' + buddy +
									    '<br><b>Dive Master: </b>' + divemaster +
									    '<br/><b>Notes:</b><br/>' + notes; wrapMode: Text.WordWrap; width: details.width }
							}
						}
					}

					TextButton {
						y: 10
						anchors { right: background.right; rightMargin: 10 }
						opacity: dive.detailsOpacity
						text: "Close"

						onClicked: 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"
							}
						}
					}
				}
			}

			Component {
				id: tripHeading
				Rectangle {
					width: page.width
					height: childrenRect.height
					color: "lightsteelblue"

					Text {
						text: section
						font.bold: true
						font.pointSize: 16
					}
				}
			}

			ListView {
				id: diveListView
				anchors.fill: parent
				model: diveModel
				delegate: diveDelegate
				focus: true

				section.property: "trip"
				section.criteria: ViewSection.FullString
				section.delegate: tripHeading
			}
		}
	}
}