From f01ec470e7b018443fad127a3b3e0f3f862e56e2 Mon Sep 17 00:00:00 2001 From: Grace Karanja Date: Fri, 10 Jul 2015 11:05:13 +0300 Subject: [PATCH] QML UI: add button to show the preferences window Add a button in the main qml file to show the preferences window. This window is linked to the QMLManager class, so any changes made will be saved to the user's settings file. Signed-off-by: Grace Karanja --- qt-mobile/main.qml | 338 ++++++++++++++++++++++++--------------------- 1 file changed, 180 insertions(+), 158 deletions(-) diff --git a/qt-mobile/main.qml b/qt-mobile/main.qml index 4efa34093..d3447a0c7 100644 --- a/qt-mobile/main.qml +++ b/qt-mobile/main.qml @@ -2,12 +2,12 @@ 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; - height: 700 FileDialog { id: fileOpen @@ -23,179 +23,201 @@ ApplicationWindow { id: manager } - menuBar: MenuBar { - Menu { - title: qsTr("File") - MenuItem { - text: qsTr("Open") - onTriggered: fileOpen.open() - } - - MenuItem { - text: qsTr("Exit") - onTriggered: Qt.quit(); - } - } + Preferences { + id: prefsWindow } - Rectangle { - id: page - width: parent.width; height: parent.height + ColumnLayout { + id: layout + anchors.fill: parent + spacing: 4 - Component { - id: diveDelegate + Rectangle { + id: topPart + height: 35 + Layout.fillWidth: true + Layout.maximumHeight: 35 - 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 } + RowLayout { + Button { + id: prefsButton + text: "Preferences" + onClicked: { + prefsWindow.show() } } + Button { + id: openFile + text: "Open File" + onClicked: { + fileOpen.open(); + } + } + } + + } + + Rectangle { + id: page + Layout.fillHeight: true + Layout.fillWidth: true + + Component { + id: diveDelegate + Item { - id: details - x: 10; width: parent.width - 20 - anchors { top: topLayout.bottom; topMargin: 10; bottom:parent.bottom; bottomMargin: 10 } - opacity: dive.detailsOpacity + 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 { - 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" - } + text: section + font.bold: true + font.pointSize: 16 } } } - } - Component { - id: tripHeading - Rectangle { - width: page.width - height: childrenRect.height - color: "lightsteelblue" + ListView { + id: diveListView + anchors.fill: parent + model: diveModel + delegate: diveDelegate + focus: true - Text { - text: section - font.bold: true - font.pointSize: 16 - } + section.property: "trip" + section.criteria: ViewSection.FullString + section.delegate: tripHeading } } - - ListView { - id: diveListView - anchors.fill: parent - model: diveModel - delegate: diveDelegate - focus: true - - section.property: "trip" - section.criteria: ViewSection.FullString - section.delegate: tripHeading - } } }