mifr/subsurface
1
0
Fork 0
mirror of https://github.com/subsurface/subsurface.git synced 2024-12-11 19:41:30 +00:00
Code Issues Projects Releases Packages Wiki Activity

Port the page navigation to ApplicationWindow's one

Browse source 
The ApplicationWindow component has an internal PageRow for the
management of the application's pages, use that instead of an
own StackView.
Use shared components for common things in the app
ListItem for the dive list
Page for application pages, for correct background color
and moving of the action button

Signed-off-by: Marco Martin <notmart@gmail.com>
Signed-off-by: Sebastian Kügler <sebas@kde.org>
This commit is contained in:
Marco Martin 2015-11-29 21:13:57 +01:00 committed by Sebastian Kügler
parent 3d3fce7152
commit 32219f1276
4 changed files with 191 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

211
qt-mobile/qml/DiveDetails.qml
View file

@ -3,13 +3,14 @@ import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2 import QtQuick.Controls.Styles 1.2
import QtQuick.Dialogs 1.2 import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1 import QtQuick.Layouts 1.1
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
import org.subsurfacedivelog.mobile 1.0 import org.subsurfacedivelog.mobile 1.0
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
Item { MobileComponents.Page {
id: diveDetailsWindow id: diveDetailsWindow
width: parent.width width: parent.width
objectName: "DiveDetails" objectName: "DiveDetails"
flickable: flick
property string location property string location
property string dive_id property string dive_id
@ -30,120 +31,130 @@ Item {
Flickable { Flickable {
id: flick id: flick
anchors.fill: parent anchors.fill: parent
contentHeight: parent.height contentHeight: content.height
clip: true clip: true
ColumnLayout { Item {
width: parent.width id: content
spacing: 8 width: flick.width
height: contentRect.height + MobileComponents.Units.smallSpacing * 2
ColumnLayout {
GridLayout { anchors {
id: editorDetails left: parent.left
width: parent.width right: parent.right
columns: 2 top: parent.top
margins: MobileComponents.Units.smallSpacing
Label {
Layout.columnSpan: 2
font.pointSize: subsurfaceTheme.titlePointSize
text: "Dive " + number + " (" + date + ")"
} }
spacing: MobileComponents.Units.smallSpacing
Item {
Layout.columnSpan: 2 GridLayout {
Layout.fillWidth: true id: editorDetails
Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height width: parent.width
QMLProfile { columns: 2
id: qmlProfile
height: MobileComponents.Units.gridUnit * 25 MobileComponents.Heading {
anchors { Layout.columnSpan: 2
top: parent.top text: "Dive " + number + " (" + date + ")"
left: parent.left
right: parent.right
}
//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
} }
Button {
id: profileHideButton Item {
anchors { Layout.columnSpan: 2
right: parent.right Layout.fillWidth: true
top: parent.top Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height
QMLProfile {
id: qmlProfile
height: MobileComponents.Units.gridUnit * 25
anchors {
top: parent.top
left: parent.left
right: parent.right
}
//Rectangle { color: "green"; opacity: 0.4; anchors.fill: parent } // used for debugging the dive profile sizing, will be removed later
} }
text: "Hide Dive Profile" Button {
onClicked: { id: profileHideButton
qmlProfile.visible = !qmlProfile.visible anchors {
if (qmlProfile.visible) { right: parent.right
text = "Hide Dive Profile" top: parent.top
} else { }
text = "Show Dive Profile" text: "Hide Dive Profile"
onClicked: {
qmlProfile.visible = !qmlProfile.visible
if (qmlProfile.visible) {
text = "Hide Dive Profile"
} else {
text = "Show Dive Profile"
}
} }
} }
} }
} Label {
Label { text: "Location:"
text: "Location:" }
} TextField {
TextField { id: txtLocation; text: location;
id: txtLocation; text: location; Layout.fillWidth: true
Layout.fillWidth: true }
}
Label { Label {
text: "Air Temp:" text: "Air Temp:"
} }
TextField { TextField {
id: txtAirTemp id: txtAirTemp
text: airtemp text: airtemp
Layout.fillWidth: true Layout.fillWidth: true
} }
Label { Label {
text: "Water Temp:" text: "Water Temp:"
} }
TextField { TextField {
id: txtWaterTemp id: txtWaterTemp
text: watertemp text: watertemp
Layout.fillWidth: true Layout.fillWidth: true
} }
Label { Label {
text: "Suit:" text: "Suit:"
} }
TextField { TextField {
id: txtSuit id: txtSuit
text: suit text: suit
Layout.fillWidth: true Layout.fillWidth: true
} }
Label { Label {
text: "Buddy:" text: "Buddy:"
} }
TextField { TextField {
id: txtBuddy id: txtBuddy
text: buddy text: buddy
Layout.fillWidth: true Layout.fillWidth: true
} }
Label { Label {
text: "Dive Master:" text: "Dive Master:"
} }
TextField { TextField {
id: txtDiveMaster id: txtDiveMaster
text: divemaster text: divemaster
Layout.fillWidth: true Layout.fillWidth: true
} }
Label { Label {
text: "Notes:" text: "Notes:"
} }
TextEdit{ TextEdit{
id: txtNotes id: txtNotes
text: notes text: notes
focus: true focus: true
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
selectByMouse: true selectByMouse: true
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
}
} }
} }
} }

92
qt-mobile/qml/DiveList.qml
View file

@ -6,37 +6,37 @@ import QtQuick.Dialogs 1.2
import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
import org.subsurfacedivelog.mobile 1.0 import org.subsurfacedivelog.mobile 1.0
Rectangle { MobileComponents.Page {
id: page id: page
objectName: "DiveList" objectName: "DiveList"
color: MobileComponents.Theme.viewBackgroundColor
flickable: diveListView
Component { Component {
id: diveDelegate id: diveDelegate
Item { MobileComponents.ListItem {
id: dive id: dive
enabled: true
checked: diveListView.currentIndex == model.index
property real detailsOpacity : 0 property real detailsOpacity : 0
width: diveListView.width - MobileComponents.Units.smallSpacing //When clicked, the mode changes to details view
height: childrenRect.height
//Mouse region: When clicked, the mode changes to details view onClicked: {
MouseArea { diveListView.currentIndex = model.index
anchors.fill: parent detailsWindow.width = parent.width
onClicked: { detailsWindow.location = location
detailsWindow.width = parent.width detailsWindow.dive_id = id
detailsWindow.location = location detailsWindow.buddy = buddy
detailsWindow.dive_id = id detailsWindow.suit = suit
detailsWindow.buddy = buddy detailsWindow.airtemp = airtemp
detailsWindow.suit = suit detailsWindow.watertemp = watertemp
detailsWindow.airtemp = airtemp detailsWindow.divemaster = divemaster
detailsWindow.watertemp = watertemp detailsWindow.notes = notes
detailsWindow.divemaster = divemaster detailsWindow.number = diveNumber
detailsWindow.notes = notes detailsWindow.date = date
detailsWindow.number = diveNumber stackView.push(detailsWindow)
detailsWindow.date = date
stackView.push(detailsWindow)
}
} }
//Layout of the page: (mini profile, dive no, date at the top //Layout of the page: (mini profile, dive no, date at the top
@ -115,17 +115,6 @@ Rectangle {
top: locationText.bottom top: locationText.bottom
} }
} }
//Text { text: location; width: parent.width }
Rectangle {
color: MobileComponents.Theme.textColor
opacity: .2
height: Math.max(1, MobileComponents.Units.gridUnit / 24) // we really want a thin line
anchors {
left: parent.left
right: parent.right
top: numberText.bottom
}
}
} }
} }
} }
@ -136,7 +125,7 @@ Rectangle {
width: page.width - MobileComponents.Units.smallSpacing * 2 width: page.width - MobileComponents.Units.smallSpacing * 2
height: childrenRect.height + MobileComponents.Units.smallSpacing * 2 height: childrenRect.height + MobileComponents.Units.smallSpacing * 2
Text { MobileComponents.Heading {
id: sectionText id: sectionText
text: section text: section
anchors { anchors {
@ -145,8 +134,7 @@ Rectangle {
leftMargin: MobileComponents.Units.smallSpacing leftMargin: MobileComponents.Units.smallSpacing
right: parent.right right: parent.right
} }
color: MobileComponents.Theme.textColor level: 2
font.pointSize: 16
} }
Rectangle { Rectangle {
height: Math.max(2, MobileComponents.Units.gridUnit / 12) // we want a thicker line height: Math.max(2, MobileComponents.Units.gridUnit / 12) // we want a thicker line
@ -161,18 +149,30 @@ Rectangle {
} }
} }
ListView { Connections {
id: diveListView target: stackView
onDepthChanged: {
if (stackView.depth == 1) {
diveListView.currentIndex = -1;
}
}
}
ScrollView {
anchors.fill: parent anchors.fill: parent
model: diveModel ListView {
delegate: diveDelegate id: diveListView
boundsBehavior: Flickable.StopAtBounds anchors.fill: parent
//highlight: Rectangle { color: MobileComponents.Theme.highlightColor; width: MobileComponents.Units.smallSpacing } model: diveModel
focus: true currentIndex: -1
clip: true delegate: diveDelegate
section.property: "trip" boundsBehavior: Flickable.StopAtBounds
section.criteria: ViewSection.FullString //highlight: Rectangle { color: MobileComponents.Theme.highlightColor; width: MobileComponents.Units.smallSpacing }
section.delegate: tripHeading focus: true
clip: true
section.property: "trip"
section.criteria: ViewSection.FullString
section.delegate: tripHeading
}
} }
StartPage { StartPage {
anchors.fill: parent anchors.fill: parent

77
qt-mobile/qml/main.qml
View file

@ -202,57 +202,46 @@ MobileComponents.ApplicationWindow {
} }
} }
ColumnLayout { toolBar: TopBar {
anchors.fill: parent width: parent.width
height: Layout.minimumHeight
}
TopBar { property Item stackView: pageStack
initialPage: Item {
width: parent.width
height: parent.height
} ColumnLayout {
id: awLayout
anchors.fill: parent
spacing: MobileComponents.Units.gridUnit / 2
StackView { Rectangle {
id: stackView id: detailsPage
Layout.preferredWidth: parent.width Layout.fillHeight: true
Layout.fillHeight: true Layout.fillWidth: true
focus: true
Keys.onReleased: if (event.key == Qt.Key_Back && stackView.depth > 1) {
stackView.pop()
event.accepted = true;
}
initialItem: Item {
width: parent.width
height: parent.height
ColumnLayout { DiveList {
id: awLayout anchors.fill: detailsPage
anchors.fill: parent id: diveDetails
spacing: MobileComponents.Units.gridUnit / 2 color: MobileComponents.Theme.backgroundColor
}
}
Rectangle {
id: detailsPage
Layout.fillHeight: true
Layout.fillWidth: true
DiveList { Rectangle {
anchors.fill: detailsPage id: messageArea
id: diveDetails height: childrenRect.height
color: MobileComponents.Theme.backgroundColor Layout.fillWidth: true
} color: MobileComponents.Theme.backgroundColor
}
Rectangle { Text {
id: messageArea id: message
height: childrenRect.height color: MobileComponents.Theme.textColor
Layout.fillWidth: true wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
color: MobileComponents.Theme.backgroundColor styleColor: MobileComponents.Theme.textColor
font.pointSize: MobileComponents.Units.smallPointSize
Text {
id: message
color: MobileComponents.Theme.textColor
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
styleColor: MobileComponents.Theme.textColor
font.pointSize: subsurfaceTheme.smallPointSize
}
}
} }
} }
} }

1
qt-mobile/qml/mobile-resources.qrc
View file

@ -19,6 +19,7 @@
<file alias="org/kde/plasma/mobilecomponents/ActionGroup.qml">mobilecomponents/ActionGroup.qml</file> <file alias="org/kde/plasma/mobilecomponents/ActionGroup.qml">mobilecomponents/ActionGroup.qml</file>
<file alias="org/kde/plasma/mobilecomponents/ApplicationWindow.qml">mobilecomponents/ApplicationWindow.qml</file> <file alias="org/kde/plasma/mobilecomponents/ApplicationWindow.qml">mobilecomponents/ApplicationWindow.qml</file>
<file alias="org/kde/plasma/mobilecomponents/GlobalDrawer.qml">mobilecomponents/GlobalDrawer.qml</file> <file alias="org/kde/plasma/mobilecomponents/GlobalDrawer.qml">mobilecomponents/GlobalDrawer.qml</file>
<file alias="org/kde/plasma/mobilecomponents/Page.qml">mobilecomponents/Page.qml</file>
<file alias="org/kde/plasma/mobilecomponents/Icon.qml">mobilecomponents/Icon.qml</file> <file alias="org/kde/plasma/mobilecomponents/Icon.qml">mobilecomponents/Icon.qml</file>
<file alias="org/kde/plasma/mobilecomponents/Heading.qml">mobilecomponents/Heading.qml</file> <file alias="org/kde/plasma/mobilecomponents/Heading.qml">mobilecomponents/Heading.qml</file>
<file alias="org/kde/plasma/mobilecomponents/PageRow.qml">mobilecomponents/PageRow.qml</file> <file alias="org/kde/plasma/mobilecomponents/PageRow.qml">mobilecomponents/PageRow.qml</file>