Hi all,
as promised, this patch makes the dive edits view fully functional again and
ports most of the things to QtQuickcontrols2 (advantage is that it would look
way more at home with android material apps
some issues:
* combobox in the edit view is still not ported, it's a bit tricky with qqc2
comboboxes as they are not editable. however, it seemed it wasn't really
semantically a combobox, rather a textfield that used the combo for typing
suggestions? that could be reimplmented easily with a textfiled that has an
internal listview for displaying suggestions
* downloadfromdivecomputer.qml is not ported, as it didn't seem to be used at
all in the app?
* StyledTextField and subsurfacebutton components would go, making code a bit
simpler (in qqc2 they are styled more android-like, is still possible to write
a text field styled completely different, if needed)
screenshot: http://imgur.com/a/yX6Kb
--
Marco Martin
>From 5f773d9e4549c82ba92434a9e69d8a94d41a3f1f Mon Sep 17 00:00:00 2001
From: Marco Martin <[email protected]>
Date: Fri, 31 Mar 2017 14:12:17 +0200
Subject: [PATCH] Fully port dive edit to Kirigami2
completely adapt to the api changes of OverlaySheet in Kirigami2
in order to achieve the same look and behavior for the dive
edits that had with kirigami1
port most components to QtQuickContrls2, except comboboxes
in the dive edit sheet that will be a bit more complicated
---
mobile-widgets/qml/About.qml | 1 -
mobile-widgets/qml/CloudCredentials.qml | 8 ++--
mobile-widgets/qml/DiveDetails.qml | 72 +++++++++++++++-----------------
mobile-widgets/qml/DiveDetailsEdit.qml | 35 ++++++++--------
mobile-widgets/qml/DiveDetailsView.qml | 3 +-
mobile-widgets/qml/DiveList.qml | 13 +++---
mobile-widgets/qml/GpsList.qml | 2 -
mobile-widgets/qml/Log.qml | 2 -
mobile-widgets/qml/Preferences.qml | 8 ++--
mobile-widgets/qml/StartPage.qml | 2 -
mobile-widgets/qml/ThemeTest.qml | 1 -
mobile-widgets/qml/main.qml | 3 +-
mobile-widgets/qml/mobile-resources.qrc | 1 +
mobile-widgets/qml/qtquickcontrols2.conf | 11 +++++
14 files changed, 82 insertions(+), 80 deletions(-)
create mode 100644 mobile-widgets/qml/qtquickcontrols2.conf
diff --git a/mobile-widgets/qml/About.qml b/mobile-widgets/qml/About.qml
index 113eac7..0d978bc 100644
--- a/mobile-widgets/qml/About.qml
+++ b/mobile-widgets/qml/About.qml
@@ -1,5 +1,4 @@
import QtQuick 2.3
-import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import org.kde.kirigami 2.0 as Kirigami
import org.subsurfacedivelog.mobile 1.0
diff --git a/mobile-widgets/qml/CloudCredentials.qml b/mobile-widgets/qml/CloudCredentials.qml
index 980e64c..e1d2e04 100644
--- a/mobile-widgets/qml/CloudCredentials.qml
+++ b/mobile-widgets/qml/CloudCredentials.qml
@@ -1,5 +1,5 @@
import QtQuick 2.3
-import QtQuick.Controls 1.2
+import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
@@ -56,7 +56,7 @@ Item {
text: qsTr("Email")
}
- StyledTextField {
+ TextField {
id: login
text: manager.cloudUserName
Layout.fillWidth: true
@@ -68,7 +68,7 @@ Item {
text: qsTr("Password")
}
- StyledTextField {
+ TextField {
id: password
text: manager.cloudPassword
echoMode: TextInput.Password
@@ -97,7 +97,7 @@ Item {
text: qsTr("PIN")
visible: rootItem.showPin
}
- StyledTextField {
+ TextField {
id: pin
text: ""
Layout.fillWidth: true
diff --git a/mobile-widgets/qml/DiveDetails.qml b/mobile-widgets/qml/DiveDetails.qml
index d6695c5..73e4f4f 100644
--- a/mobile-widgets/qml/DiveDetails.qml
+++ b/mobile-widgets/qml/DiveDetails.qml
@@ -1,6 +1,5 @@
import QtQuick 2.4
-import QtQuick.Controls 1.4
-import QtQuick.Controls.Styles 1.4
+import QtQuick.Controls 2.0
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.2
import org.subsurfacedivelog.mobile 1.0
@@ -52,23 +51,23 @@ Kirigami.Page {
left: diveDetailsListView.currentItem.modelData.dive.gps !== "" ? mapAction : null
}
}
- PropertyChanges { target: detailsEditScroll; opened: false }
+ PropertyChanges { target: detailsEditScroll; sheetOpen: false }
PropertyChanges { target: pageStack.contentItem; interactive: true }
},
State {
name: "edit"
- PropertyChanges { target: detailsEditScroll; opened: true }
+ PropertyChanges { target: detailsEditScroll; sheetOpen: true }
PropertyChanges { target: pageStack.contentItem; interactive: false }
},
State {
name: "add"
- PropertyChanges { target: detailsEditScroll; opened: true }
+ PropertyChanges { target: detailsEditScroll; sheetOpen: true }
PropertyChanges { target: pageStack.contentItem; interactive: false }
}
]
- property QtObject deleteAction: Action {
+ property QtObject deleteAction: Kirigami.Action {
text: qsTr("Delete dive")
iconName: "trash-empty"
onTriggered: {
@@ -85,7 +84,7 @@ Kirigami.Page {
}
}
- property QtObject mapAction: Action {
+ property QtObject mapAction: Kirigami.Action {
text: qsTr("Show on map")
iconName: "gps"
onTriggered: {
@@ -93,7 +92,7 @@ Kirigami.Page {
}
}
- actions.main: Action {
+ actions.main: Kirigami.Action {
iconName: state !== "view" ? "document-save" : "document-edit"
onTriggered: {
manager.appendTextToLog("save/edit button triggered")
@@ -182,45 +181,42 @@ Kirigami.Page {
Item {
anchors.fill: parent
- ScrollView {
- id: diveDetailList
+ ListView {
+ id: diveDetailsListView
anchors.fill: parent
- ListView {
- id: diveDetailsListView
- anchors.fill: parent
- model: diveModel
- currentIndex: -1
+ model: diveModel
+ currentIndex: -1
+ boundsBehavior: Flickable.StopAtBounds
+ maximumFlickVelocity: parent.width * 5
+ orientation: ListView.Horizontal
+ focus: true
+ clip: true
+ snapMode: ListView.SnapOneItem
+ onMovementEnded: {
+ currentIndex = indexAt(contentX+1, 1);
+ }
+ delegate: Flickable {
+ id: internalScrollView
+ width: diveDetailsListView.width
+ height: diveDetailsListView.height
+ property var modelData: model
+ contentHeight: diveDetails.height
boundsBehavior: Flickable.StopAtBounds
- maximumFlickVelocity: parent.width * 5
- orientation: ListView.Horizontal
- focus: true
- clip: true
- snapMode: ListView.SnapOneItem
- onMovementEnded: {
- currentIndex = indexAt(contentX+1, 1);
- }
- delegate: ScrollView {
- id: internalScrollView
- width: diveDetailsListView.width
- height: diveDetailsListView.height
- property var modelData: model
- Flickable {
- //contentWidth: parent.width
- contentHeight: diveDetails.height
- boundsBehavior: Flickable.StopAtBounds
- DiveDetailsView {
- id: diveDetails
- width: internalScrollView.width
- }
- }
+ DiveDetailsView {
+ id: diveDetails
+ width: internalScrollView.width
}
+ ScrollBar.vertical: ScrollBar { }
}
+ ScrollIndicator.horizontal: ScrollIndicator { }
}
Kirigami.OverlaySheet {
id: detailsEditScroll
+ parent: diveDetailsPage
+ rootItem.z: 0
// anchors.fill: parent
onSheetOpenChanged: {
- if (!opened) {
+ if (!sheetOpen) {
endEditMode()
}
}
diff --git a/mobile-widgets/qml/DiveDetailsEdit.qml b/mobile-widgets/qml/DiveDetailsEdit.qml
index 94b1baa..51d087a 100644
--- a/mobile-widgets/qml/DiveDetailsEdit.qml
+++ b/mobile-widgets/qml/DiveDetailsEdit.qml
@@ -1,5 +1,6 @@
import QtQuick 2.3
-import QtQuick.Controls 1.2
+import QtQuick.Controls 2.0
+import QtQuick.Controls 1.2 as QQC1
import QtQuick.Controls.Styles 1.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
@@ -83,7 +84,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Date:")
}
- StyledTextField {
+ TextField {
id: txtDate;
Layout.fillWidth: true
}
@@ -91,7 +92,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Location:")
}
- StyledTextField {
+ TextField {
id: txtLocation;
Layout.fillWidth: true
}
@@ -100,7 +101,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Coordinates:")
}
- StyledTextField {
+ TextField {
id: txtGps
Layout.fillWidth: true
}
@@ -123,7 +124,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Depth:")
}
- StyledTextField {
+ TextField {
id: txtDepth
Layout.fillWidth: true
validator: RegExpValidator { regExp: /[^-]*/ }
@@ -132,7 +133,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Duration:")
}
- StyledTextField {
+ TextField {
id: txtDuration
Layout.fillWidth: true
validator: RegExpValidator { regExp: /[^-]*/ }
@@ -142,7 +143,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Air Temp:")
}
- StyledTextField {
+ TextField {
id: txtAirTemp
Layout.fillWidth: true
}
@@ -151,7 +152,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Water Temp:")
}
- StyledTextField {
+ TextField {
id: txtWaterTemp
Layout.fillWidth: true
}
@@ -160,7 +161,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Suit:")
}
- ComboBox {
+ QQC1.ComboBox {
id: suitBox
editable: true
model: diveDetailsListView.currentItem.modelData.dive.suitList
@@ -175,7 +176,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Buddy:")
}
- ComboBox {
+ QQC1.ComboBox {
id: buddyBox
editable: true
model: diveDetailsListView.currentItem.modelData.dive.buddyList
@@ -190,7 +191,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Dive Master:")
}
- ComboBox {
+ QQC1.ComboBox {
id: divemasterBox
editable: true
model: diveDetailsListView.currentItem.modelData.dive.divemasterList
@@ -205,9 +206,9 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Weight:")
}
- StyledTextField {
+ TextField {
id: txtWeight
- fixed: text === "cannot edit multiple weight systems"
+ readOnly: text === "cannot edit multiple weight systems"
Layout.fillWidth: true
}
@@ -215,7 +216,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Cylinder:")
}
- ComboBox {
+ QQC1.ComboBox {
id: cylinderBox
editable: true
model: diveDetailsListView.currentItem.modelData.dive.cylinderList
@@ -230,7 +231,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Gas mix:")
}
- StyledTextField {
+ TextField {
id: txtGasMix
Layout.fillWidth: true
validator: RegExpValidator { regExp: /(EAN100|EAN\d\d|AIR|100|\d{1,2}|\d{1,2}\/\d{1,2})/i }
@@ -240,7 +241,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("Start Pressure:")
}
- StyledTextField {
+ TextField {
id: txtStartPressure
Layout.fillWidth: true
}
@@ -249,7 +250,7 @@ Item {
Layout.alignment: Qt.AlignRight
text: qsTr("End Pressure:")
}
- StyledTextField {
+ TextField {
id: txtEndPressure
Layout.fillWidth: true
}
diff --git a/mobile-widgets/qml/DiveDetailsView.qml b/mobile-widgets/qml/DiveDetailsView.qml
index 4afc7d4..f9935c2 100644
--- a/mobile-widgets/qml/DiveDetailsView.qml
+++ b/mobile-widgets/qml/DiveDetailsView.qml
@@ -2,8 +2,7 @@ import QtQuick 2.3
/*
import QtWebView 1.0
*/
-import QtQuick.Controls 1.2
-import QtQuick.Controls.Styles 1.2
+
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import org.subsurfacedivelog.mobile 1.0
diff --git a/mobile-widgets/qml/DiveList.qml b/mobile-widgets/qml/DiveList.qml
index 49753b8..245eb41 100644
--- a/mobile-widgets/qml/DiveList.qml
+++ b/mobile-widgets/qml/DiveList.qml
@@ -1,5 +1,5 @@
import QtQuick 2.4
-import QtQuick.Controls 1.2
+import QtQuick.Controls 2.0
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
@@ -209,11 +209,13 @@ Kirigami.ScrollablePage {
}
}
- ScrollView {
+ Flickable {
id: startPageWrapper
anchors.fill: parent
opacity: credentialStatus === QMLManager.NOCLOUD || (credentialStatus === QMLManager.VALID || credentialStatus === QMLManager.VALID_EMAIL) ? 0 : 1
visible: opacity > 0
+ contentWidth: width
+ contentHeight: startPage.height
Behavior on opacity { NumberAnimation { duration: Kirigami.Units.shortDuration } }
onVisibleChanged: {
print("startPageWrapper onVisibleChanged credentialStatus " + credentialStatus + " diveListView.count " + diveListView.count)
@@ -242,6 +244,7 @@ Kirigami.ScrollablePage {
page.actions.main = page.saveAction
page.actions.right = page.offlineAction
}
+ ScrollBar.vertical: ScrollBar { }
}
Kirigami.Label {
@@ -278,14 +281,14 @@ Kirigami.ScrollablePage {
}
}
- property QtObject addDiveAction: Action {
+ property QtObject addDiveAction: Kirigami.Action {
iconName: "list-add"
onTriggered: {
startAddDive()
}
}
- property QtObject saveAction: Action {
+ property QtObject saveAction: Kirigami.Action {
iconName: "document-save"
onTriggered: {
Qt.inputMethod.hide()
@@ -293,7 +296,7 @@ Kirigami.ScrollablePage {
}
}
- property QtObject offlineAction: Action {
+ property QtObject offlineAction: Kirigami.Action {
iconName: "qrc:/qml/nocloud.svg"
onTriggered: {
manager.syncToCloud = false
diff --git a/mobile-widgets/qml/GpsList.qml b/mobile-widgets/qml/GpsList.qml
index 411677f..866b5be 100644
--- a/mobile-widgets/qml/GpsList.qml
+++ b/mobile-widgets/qml/GpsList.qml
@@ -1,6 +1,4 @@
import QtQuick 2.3
-import QtQuick.Controls 1.2
-import QtQuick.Controls.Styles 1.2
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
diff --git a/mobile-widgets/qml/Log.qml b/mobile-widgets/qml/Log.qml
index cd45424..a0260e5 100644
--- a/mobile-widgets/qml/Log.qml
+++ b/mobile-widgets/qml/Log.qml
@@ -1,6 +1,4 @@
import QtQuick 2.3
-import QtQuick.Controls 1.2
-import QtQuick.Controls.Styles 1.2
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
diff --git a/mobile-widgets/qml/Preferences.qml b/mobile-widgets/qml/Preferences.qml
index 17b9e2d..ad21f81 100644
--- a/mobile-widgets/qml/Preferences.qml
+++ b/mobile-widgets/qml/Preferences.qml
@@ -1,5 +1,5 @@
import QtQuick 2.3
-import QtQuick.Controls 1.2
+import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
@@ -10,7 +10,7 @@ Kirigami.Page {
title: qsTr("Preferences")
actions {
- main: Action {
+ main: Kirigami.Action {
text: qsTr("Save")
iconName: "document-save"
onTriggered: {
@@ -52,7 +52,7 @@ Kirigami.Page {
Layout.alignment: Qt.AlignRight
}
- StyledTextField {
+ TextField {
id: distanceThreshold
text: manager.distanceThreshold
Layout.fillWidth: true
@@ -63,7 +63,7 @@ Kirigami.Page {
Layout.alignment: Qt.AlignRight
}
- StyledTextField {
+ TextField {
id: timeThreshold
text: manager.timeThreshold
Layout.fillWidth: true
diff --git a/mobile-widgets/qml/StartPage.qml b/mobile-widgets/qml/StartPage.qml
index f8ee614..26ebb08 100644
--- a/mobile-widgets/qml/StartPage.qml
+++ b/mobile-widgets/qml/StartPage.qml
@@ -1,6 +1,4 @@
import QtQuick 2.5
-import QtQuick.Controls 1.2
-import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1
import org.kde.kirigami 2.0 as Kirigami
import org.subsurfacedivelog.mobile 1.0
diff --git a/mobile-widgets/qml/ThemeTest.qml b/mobile-widgets/qml/ThemeTest.qml
index 8684c1e..3005032 100644
--- a/mobile-widgets/qml/ThemeTest.qml
+++ b/mobile-widgets/qml/ThemeTest.qml
@@ -1,5 +1,4 @@
import QtQuick 2.5
-import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2
import org.kde.kirigami 2.0 as Kirigami
diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml
index 753e1d4..59c584d 100644
--- a/mobile-widgets/qml/main.qml
+++ b/mobile-widgets/qml/main.qml
@@ -1,6 +1,5 @@
import QtQuick 2.4
-import QtQuick.Controls 1.2
-import QtQuick.Controls.Styles 1.2
+import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
diff --git a/mobile-widgets/qml/mobile-resources.qrc b/mobile-widgets/qml/mobile-resources.qrc
index b95ce41..8354833 100644
--- a/mobile-widgets/qml/mobile-resources.qrc
+++ b/mobile-widgets/qml/mobile-resources.qrc
@@ -24,6 +24,7 @@
<file alias="nocloud.svg">icons/nocloud.svg</file>
</qresource>
<qresource prefix="/">
+ <file>qtquickcontrols2.conf</file>
<file alias="icons/go-next.svg">kirigami/icons/go-next.svg</file>
<file alias="icons/go-previous.svg">kirigami/icons/go-previous.svg</file>
<file alias="icons/handle-left.svg">kirigami/icons/handle-left.svg</file>
diff --git a/mobile-widgets/qml/qtquickcontrols2.conf b/mobile-widgets/qml/qtquickcontrols2.conf
new file mode 100644
index 0000000..777a4a5
--- /dev/null
+++ b/mobile-widgets/qml/qtquickcontrols2.conf
@@ -0,0 +1,11 @@
+[Controls]
+Style=Material
+
+[Material]
+Primary=#2d5b9a
+Accent=#2d5b9a
+Theme=System
+
+[Universal]
+Accent=#2d5b9a
+Theme=System
--
2.6.2
_______________________________________________
subsurface mailing list
[email protected]
http://lists.subsurface-divelog.org/cgi-bin/mailman/listinfo/subsurface