From f01ec470e7b018443fad127a3b3e0f3f862e56e2 Mon Sep 17 00:00:00 2001 From: Grace Karanja Date: Fri, 10 Jul 2015 11:05:13 +0300 Subject: 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 | 298 ++++++++++++++++++++++++++++------------------------- 1 file changed, 160 insertions(+), 138 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 + + Rectangle { + id: topPart + height: 35 + Layout.fillWidth: true + Layout.maximumHeight: 35 + + RowLayout { + Button { + id: prefsButton + text: "Preferences" + onClicked: { + prefsWindow.show() + } + } - Component { - id: diveDelegate + Button { + id: openFile + text: "Open File" + onClicked: { + fileOpen.open(); + } + } + } - Item { - id: dive + } - property real detailsOpacity : 0 + Rectangle { + id: page + Layout.fillHeight: true + Layout.fillWidth: true - width: diveListView.width - height: 70 + Component { + id: diveDelegate - //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 - } + Item { + id: dive - //Mouse region: When clicked, the mode changes to details view - MouseArea { - anchors.fill: parent - onClicked: dive.state = 'Details' - } + property real detailsOpacity : 0 - //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 + width: diveListView.width + height: 70 - Column { - width: background.width; height: 60 - spacing: 5 + //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 + } - Text { - text: diveNumber + ' (' + date + ')' + //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 } } - 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 + 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 - } + 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 } + 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" + TextButton { + y: 10 + anchors { right: background.right; rightMargin: 10 } + opacity: dive.detailsOpacity + text: "Close" - onClicked: dive.state = ''; - } + onClicked: dive.state = ''; + } - states: State { - name: "Details" + states: State { + name: "Details" - PropertyChanges { - target: background - color: "white" - } + 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 - } + 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 - } + //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 + //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" + 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 + 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 + ListView { + id: diveListView + anchors.fill: parent + model: diveModel + delegate: diveDelegate + focus: true - section.property: "trip" - section.criteria: ViewSection.FullString - section.delegate: tripHeading + section.property: "trip" + section.criteria: ViewSection.FullString + section.delegate: tripHeading + } } } } -- cgit v1.2.3-70-g09d2