From bdf87ff60e0bfc027ddeffa8ba3c80fb0b1ab6e0 Mon Sep 17 00:00:00 2001 From: Grace Karanja Date: Fri, 10 Jul 2015 11:40:30 +0300 Subject: QML UI: move the dive list to a separate file Move the dive list qml code to a separate file for easier management. Signed-off-by: Grace Karanja --- qt-mobile/main.qml | 163 +++-------------------------------------------------- 1 file changed, 8 insertions(+), 155 deletions(-) (limited to 'qt-mobile/main.qml') diff --git a/qt-mobile/main.qml b/qt-mobile/main.qml index bf36e8866..85fae51e4 100644 --- a/qt-mobile/main.qml +++ b/qt-mobile/main.qml @@ -49,165 +49,18 @@ ApplicationWindow { } Rectangle { - id: page + id: detailsPage Layout.fillHeight: true Layout.fillWidth: true + Layout.minimumWidth: 100 + Layout.preferredHeight: 400 + Layout.preferredWidth: 200 - 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: 'Depth: ' + depth + ' Duration:' + 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: - 'Location: ' + location + - '
Air temp: ' + airtemp + ' Water temp: ' + watertemp + - '
Suit: ' + suit + - '
Buddy: ' + buddy + - '
Dive Master: ' + divemaster + - '
Notes:
' + 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 + DiveList { + anchors.fill: detailsPage + id: diveDetails } } + } } -- cgit v1.2.3-70-g09d2