mirror of
https://github.com/subsurface/subsurface.git
synced 2025-02-19 22:16:15 +00:00
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 <gracie.karanja89@gmail.com>
This commit is contained in:
Grace Karanja
Dirk Hohndel
parent
956336ae1a
commit
f01ec470e7
1 changed files with 180 additions and 158 deletions
|
|
@ -2,12 +2,12 @@ import QtQuick 2.3
|
||||||
import QtQuick.Controls 1.2
|
import QtQuick.Controls 1.2
|
||||||
import QtQuick.Window 2.2
|
import QtQuick.Window 2.2
|
||||||
import QtQuick.Dialogs 1.2
|
import QtQuick.Dialogs 1.2
|
||||||
|
import QtQuick.Layouts 1.1
|
||||||
import org.subsurfacedivelog.mobile 1.0
|
import org.subsurfacedivelog.mobile 1.0
|
||||||
|
|
||||||
ApplicationWindow {
|
ApplicationWindow {
|
||||||
title: qsTr("Subsurface")
|
title: qsTr("Subsurface")
|
||||||
width: 500;
|
width: 500;
|
||||||
height: 700
|
|
||||||
|
|
||||||
FileDialog {
|
FileDialog {
|
||||||
id: fileOpen
|
id: fileOpen
|
||||||
|
|
@ -23,179 +23,201 @@ ApplicationWindow {
|
||||||
id: manager
|
id: manager
|
||||||
}
|
}
|
||||||
|
|
||||||
menuBar: MenuBar {
|
Preferences {
|
||||||
Menu {
|
id: prefsWindow
|
||||||
title: qsTr("File")
|
|
||||||
MenuItem {
|
|
||||||
text: qsTr("Open")
|
|
||||||
onTriggered: fileOpen.open()
|
|
||||||
}
|
|
||||||
|
|
||||||
MenuItem {
|
|
||||||
text: qsTr("Exit")
|
|
||||||
onTriggered: Qt.quit();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
ColumnLayout {
|
||||||
id: page
|
id: layout
|
||||||
width: parent.width; height: parent.height
|
anchors.fill: parent
|
||||||
|
spacing: 4
|
||||||
|
|
||||||
Component {
|
Rectangle {
|
||||||
id: diveDelegate
|
id: topPart
|
||||||
|
height: 35
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.maximumHeight: 35
|
||||||
|
|
||||||
Item {
|
RowLayout {
|
||||||
id: dive
|
Button {
|
||||||
|
id: prefsButton
|
||||||
property real detailsOpacity : 0
|
text: "Preferences"
|
||||||
|
onClicked: {
|
||||||
width: diveListView.width
|
prefsWindow.show()
|
||||||
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 }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Button {
|
||||||
|
id: openFile
|
||||||
|
text: "Open File"
|
||||||
|
onClicked: {
|
||||||
|
fileOpen.open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: page
|
||||||
|
Layout.fillHeight: true
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: diveDelegate
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: details
|
id: dive
|
||||||
x: 10; width: parent.width - 20
|
|
||||||
anchors { top: topLayout.bottom; topMargin: 10; bottom:parent.bottom; bottomMargin: 10 }
|
property real detailsOpacity : 0
|
||||||
opacity: dive.detailsOpacity
|
|
||||||
|
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 {
|
||||||
id: detailsTitle
|
text: section
|
||||||
anchors.top: parent.top
|
font.bold: true
|
||||||
text: "Dive Details"
|
font.pointSize: 16
|
||||||
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 {
|
ListView {
|
||||||
id: tripHeading
|
id: diveListView
|
||||||
Rectangle {
|
anchors.fill: parent
|
||||||
width: page.width
|
model: diveModel
|
||||||
height: childrenRect.height
|
delegate: diveDelegate
|
||||||
color: "lightsteelblue"
|
focus: true
|
||||||
|
|
||||||
Text {
|
section.property: "trip"
|
||||||
text: section
|
section.criteria: ViewSection.FullString
|
||||||
font.bold: true
|
section.delegate: tripHeading
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue