From 2668da3f60d0dc28d1777c1d6cf67e1ee8f88447 Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 17:27:20 +0100 Subject: use mobilecomponents for our pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is a dumb port of a number of properties to use the new theme and units API. - import the plugin - change accessors from units and theme to MobileComponents.Unit and MobileComponents.Theme Signed-off-by: Sebastian Kügler --- qt-mobile/qml/DiveDetails.qml | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'qt-mobile/qml/DiveDetails.qml') diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml index 32fa73042..5b597a0df 100644 --- a/qt-mobile/qml/DiveDetails.qml +++ b/qt-mobile/qml/DiveDetails.qml @@ -1,10 +1,9 @@ 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 -import QtQuick.Window 2.2 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 Item { @@ -45,7 +44,7 @@ Item { Label { Layout.columnSpan: 2 - font.pointSize: units.titlePointSize + font.pointSize: MobileComponents.Units.titlePointSize text: "Dive " + number + " (" + date + ")" } @@ -55,7 +54,7 @@ Item { Layout.preferredHeight: qmlProfile.visible ? qmlProfile.height : profileHideButton.height QMLProfile { id: qmlProfile - height: units.gridUnit * 25 + height: MobileComponents.Units.gridUnit * 25 anchors { top: parent.top left: parent.left -- cgit v1.2.3-70-g09d2 From 6580f078d0ae1d912d9a6b12e2769060b4c77f4b Mon Sep 17 00:00:00 2001 From: Sebastian Kügler Date: Sun, 29 Nov 2015 19:21:27 +0100 Subject: Fix reference errors caused by moving properties around MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This makes things like accent(Text)Color and our two custom point sizes for fonts resolve correctly again. Signed-off-by: Sebastian Kügler --- qt-mobile/qml/CloudStorage.qml | 2 +- qt-mobile/qml/DiveDetails.qml | 2 +- qt-mobile/qml/DiveList.qml | 4 ++-- qt-mobile/qml/Preferences.qml | 4 ++-- qt-mobile/qml/TopBar.qml | 8 ++++---- qt-mobile/qml/main.qml | 2 +- 6 files changed, 11 insertions(+), 11 deletions(-) (limited to 'qt-mobile/qml/DiveDetails.qml') diff --git a/qt-mobile/qml/CloudStorage.qml b/qt-mobile/qml/CloudStorage.qml index 3b94aa5e6..897ebfcee 100644 --- a/qt-mobile/qml/CloudStorage.qml +++ b/qt-mobile/qml/CloudStorage.qml @@ -22,7 +22,7 @@ Item { Label { text: "Cloud credentials" Layout.bottomMargin: MobileComponents.Units.largeSpacing - font.pointSize: MobileComponents.Units.titlePointSize + font.pointSize: subsurfaceTheme.titlePointSize Layout.columnSpan: 2 } diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml index 5b597a0df..401921c9f 100644 --- a/qt-mobile/qml/DiveDetails.qml +++ b/qt-mobile/qml/DiveDetails.qml @@ -44,7 +44,7 @@ Item { Label { Layout.columnSpan: 2 - font.pointSize: MobileComponents.Units.titlePointSize + font.pointSize: subsurfaceTheme.titlePointSize text: "Dive " + number + " (" + date + ")" } diff --git a/qt-mobile/qml/DiveList.qml b/qt-mobile/qml/DiveList.qml index 2a9c53de6..e0c8f4251 100644 --- a/qt-mobile/qml/DiveList.qml +++ b/qt-mobile/qml/DiveList.qml @@ -68,7 +68,7 @@ Rectangle { text: date opacity: 0.6 color: MobileComponents.Theme.textColor - font.pointSize: smallPointSize + font.pointSize: subsurfaceTheme.smallPointSize anchors { right: parent.right top: parent.top @@ -156,7 +156,7 @@ Rectangle { leftMargin: MobileComponents.Units.smallSpacing right: parent.right } - color: MobileComponents.Theme.accentColor + color: subsurfaceTheme.accentColor } } } diff --git a/qt-mobile/qml/Preferences.qml b/qt-mobile/qml/Preferences.qml index 1e1274e21..8cae95ff0 100644 --- a/qt-mobile/qml/Preferences.qml +++ b/qt-mobile/qml/Preferences.qml @@ -23,7 +23,7 @@ Item { Label { text: "Cloud credentials" Layout.bottomMargin: MobileComponents.Units.largeSpacing - font.pointSize: MobileComponents.Units.titlePointSize + font.pointSize: subsurfaceTheme.titlePointSize Layout.columnSpan: 2 } @@ -76,7 +76,7 @@ Item { Label { text: "Subsurface GPS data webservice" Layout.bottomMargin: MobileComponents.Units.largeSpacing - font.pointSize: MobileComponents.Units.titlePointSize + font.pointSize: subsurfaceTheme.titlePointSize Layout.columnSpan: 2 } diff --git a/qt-mobile/qml/TopBar.qml b/qt-mobile/qml/TopBar.qml index 43a5ad6af..f07a88e47 100644 --- a/qt-mobile/qml/TopBar.qml +++ b/qt-mobile/qml/TopBar.qml @@ -13,7 +13,7 @@ Rectangle { property bool goBack: (stackView.depth > 1) - color: MobileComponents.Theme.accentColor + color: subsurfaceTheme.accentColor Layout.minimumHeight: MobileComponents.Units.gridUnit * 2 + MobileComponents.Units.largeSpacing Layout.fillWidth: true Layout.margins: 0 @@ -47,7 +47,7 @@ Rectangle { font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 1.5 verticalAlignment: Text.AlignBottom Layout.fillWidth: false - color: MobileComponents.Theme.accentTextColor + color: subsurfaceTheme.accentTextColor } } Item { @@ -63,11 +63,11 @@ Rectangle { style: ButtonStyle { background: Rectangle { implicitWidth: MobileComponents.Units.gridUnit * 2 - color: MobileComponents.Theme.accentColor + color: subsurfaceTheme.accentColor } label: Text { id: txt - color: MobileComponents.Theme.accentTextColor + color: subsurfaceTheme.accentTextColor font.pointSize: MobileComponents.Units.fontMetrics.font.pointSize * 2 font.bold: true text: control.text diff --git a/qt-mobile/qml/main.qml b/qt-mobile/qml/main.qml index 5f4cdd352..ac2e3eefd 100644 --- a/qt-mobile/qml/main.qml +++ b/qt-mobile/qml/main.qml @@ -250,7 +250,7 @@ MobileComponents.ApplicationWindow { color: MobileComponents.Theme.textColor wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere styleColor: MobileComponents.Theme.textColor - font.pointSize: MobileComponents.Units.smallPointSize + font.pointSize: subsurfaceTheme.smallPointSize } } } -- cgit v1.2.3-70-g09d2 From 32219f127634b7783b3967d94e35faeff36b51ef Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Sun, 29 Nov 2015 21:13:57 +0100 Subject: Port the page navigation to ApplicationWindow's one MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Signed-off-by: Sebastian Kügler --- qt-mobile/qml/DiveDetails.qml | 209 +++++++++++++++++++------------------ qt-mobile/qml/DiveList.qml | 92 ++++++++-------- qt-mobile/qml/main.qml | 85 +++++++-------- qt-mobile/qml/mobile-resources.qrc | 1 + 4 files changed, 194 insertions(+), 193 deletions(-) (limited to 'qt-mobile/qml/DiveDetails.qml') diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml index 401921c9f..e69d0e672 100644 --- a/qt-mobile/qml/DiveDetails.qml +++ b/qt-mobile/qml/DiveDetails.qml @@ -3,13 +3,14 @@ import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 -import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 +import org.kde.plasma.mobilecomponents 0.2 as MobileComponents -Item { +MobileComponents.Page { id: diveDetailsWindow width: parent.width objectName: "DiveDetails" + flickable: flick property string location property string dive_id @@ -30,120 +31,130 @@ Item { Flickable { id: flick anchors.fill: parent - contentHeight: parent.height + contentHeight: content.height clip: true - ColumnLayout { - width: parent.width - spacing: 8 + Item { + id: content + width: flick.width + height: contentRect.height + MobileComponents.Units.smallSpacing * 2 + ColumnLayout { + anchors { + left: parent.left + right: parent.right + top: parent.top + margins: MobileComponents.Units.smallSpacing + } + spacing: MobileComponents.Units.smallSpacing - GridLayout { - id: editorDetails - width: parent.width - columns: 2 - Label { - Layout.columnSpan: 2 - font.pointSize: subsurfaceTheme.titlePointSize - text: "Dive " + number + " (" + date + ")" - } + GridLayout { + id: editorDetails + width: parent.width + columns: 2 - Item { - Layout.columnSpan: 2 - Layout.fillWidth: true - 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 + MobileComponents.Heading { + Layout.columnSpan: 2 + text: "Dive " + number + " (" + date + ")" } - Button { - id: profileHideButton - anchors { - right: parent.right - top: parent.top + + Item { + Layout.columnSpan: 2 + Layout.fillWidth: true + 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" - onClicked: { - qmlProfile.visible = !qmlProfile.visible - if (qmlProfile.visible) { - text = "Hide Dive Profile" - } else { - text = "Show Dive Profile" + Button { + id: profileHideButton + anchors { + right: parent.right + top: parent.top + } + text: "Hide Dive Profile" + onClicked: { + qmlProfile.visible = !qmlProfile.visible + if (qmlProfile.visible) { + text = "Hide Dive Profile" + } else { + text = "Show Dive Profile" + } } } } - } - Label { - text: "Location:" - } - TextField { - id: txtLocation; text: location; - Layout.fillWidth: true - } + Label { + text: "Location:" + } + TextField { + id: txtLocation; text: location; + Layout.fillWidth: true + } - Label { - text: "Air Temp:" - } - TextField { - id: txtAirTemp - text: airtemp - Layout.fillWidth: true - } + Label { + text: "Air Temp:" + } + TextField { + id: txtAirTemp + text: airtemp + Layout.fillWidth: true + } - Label { - text: "Water Temp:" - } - TextField { - id: txtWaterTemp - text: watertemp - Layout.fillWidth: true - } + Label { + text: "Water Temp:" + } + TextField { + id: txtWaterTemp + text: watertemp + Layout.fillWidth: true + } - Label { - text: "Suit:" + Label { + text: "Suit:" - } - TextField { - id: txtSuit - text: suit - Layout.fillWidth: true - } + } + TextField { + id: txtSuit + text: suit + Layout.fillWidth: true + } - Label { - text: "Buddy:" - } - TextField { - id: txtBuddy - text: buddy - Layout.fillWidth: true - } + Label { + text: "Buddy:" + } + TextField { + id: txtBuddy + text: buddy + Layout.fillWidth: true + } - Label { - text: "Dive Master:" - } - TextField { - id: txtDiveMaster - text: divemaster - Layout.fillWidth: true - } + Label { + text: "Dive Master:" + } + TextField { + id: txtDiveMaster + text: divemaster + Layout.fillWidth: true + } - Label { - text: "Notes:" - } - TextEdit{ - id: txtNotes - text: notes - focus: true - Layout.fillWidth: true - Layout.fillHeight: true - selectByMouse: true - wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere + Label { + text: "Notes:" + } + TextEdit{ + id: txtNotes + text: notes + focus: true + Layout.fillWidth: true + Layout.fillHeight: true + selectByMouse: true + wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere + } } } } diff --git a/qt-mobile/qml/DiveList.qml b/qt-mobile/qml/DiveList.qml index e0c8f4251..75f4f809e 100644 --- a/qt-mobile/qml/DiveList.qml +++ b/qt-mobile/qml/DiveList.qml @@ -6,37 +6,37 @@ import QtQuick.Dialogs 1.2 import org.kde.plasma.mobilecomponents 0.2 as MobileComponents import org.subsurfacedivelog.mobile 1.0 -Rectangle { +MobileComponents.Page { id: page objectName: "DiveList" + color: MobileComponents.Theme.viewBackgroundColor + flickable: diveListView Component { id: diveDelegate - Item { + MobileComponents.ListItem { id: dive + enabled: true + checked: diveListView.currentIndex == model.index property real detailsOpacity : 0 - width: diveListView.width - MobileComponents.Units.smallSpacing - height: childrenRect.height + //When clicked, the mode changes to details view - //Mouse region: When clicked, the mode changes to details view - MouseArea { - anchors.fill: parent - onClicked: { - detailsWindow.width = parent.width - detailsWindow.location = location - detailsWindow.dive_id = id - detailsWindow.buddy = buddy - detailsWindow.suit = suit - detailsWindow.airtemp = airtemp - detailsWindow.watertemp = watertemp - detailsWindow.divemaster = divemaster - detailsWindow.notes = notes - detailsWindow.number = diveNumber - detailsWindow.date = date - stackView.push(detailsWindow) - } + onClicked: { + diveListView.currentIndex = model.index + detailsWindow.width = parent.width + detailsWindow.location = location + detailsWindow.dive_id = id + detailsWindow.buddy = buddy + detailsWindow.suit = suit + detailsWindow.airtemp = airtemp + detailsWindow.watertemp = watertemp + detailsWindow.divemaster = divemaster + detailsWindow.notes = notes + detailsWindow.number = diveNumber + detailsWindow.date = date + stackView.push(detailsWindow) } //Layout of the page: (mini profile, dive no, date at the top @@ -115,17 +115,6 @@ Rectangle { 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 height: childrenRect.height + MobileComponents.Units.smallSpacing * 2 - Text { + MobileComponents.Heading { id: sectionText text: section anchors { @@ -145,8 +134,7 @@ Rectangle { leftMargin: MobileComponents.Units.smallSpacing right: parent.right } - color: MobileComponents.Theme.textColor - font.pointSize: 16 + level: 2 } Rectangle { height: Math.max(2, MobileComponents.Units.gridUnit / 12) // we want a thicker line @@ -161,18 +149,30 @@ Rectangle { } } - ListView { - id: diveListView + Connections { + target: stackView + onDepthChanged: { + if (stackView.depth == 1) { + diveListView.currentIndex = -1; + } + } + } + ScrollView { anchors.fill: parent - model: diveModel - delegate: diveDelegate - boundsBehavior: Flickable.StopAtBounds - //highlight: Rectangle { color: MobileComponents.Theme.highlightColor; width: MobileComponents.Units.smallSpacing } - focus: true - clip: true - section.property: "trip" - section.criteria: ViewSection.FullString - section.delegate: tripHeading + ListView { + id: diveListView + anchors.fill: parent + model: diveModel + currentIndex: -1 + delegate: diveDelegate + boundsBehavior: Flickable.StopAtBounds + //highlight: Rectangle { color: MobileComponents.Theme.highlightColor; width: MobileComponents.Units.smallSpacing } + focus: true + clip: true + section.property: "trip" + section.criteria: ViewSection.FullString + section.delegate: tripHeading + } } StartPage { anchors.fill: parent diff --git a/qt-mobile/qml/main.qml b/qt-mobile/qml/main.qml index ac2e3eefd..53d872743 100644 --- a/qt-mobile/qml/main.qml +++ b/qt-mobile/qml/main.qml @@ -202,57 +202,46 @@ MobileComponents.ApplicationWindow { } } - ColumnLayout { - anchors.fill: parent + toolBar: TopBar { + 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 + + Rectangle { + id: detailsPage + Layout.fillHeight: true + Layout.fillWidth: true + + DiveList { + anchors.fill: detailsPage + id: diveDetails + color: MobileComponents.Theme.backgroundColor + } + } - } - StackView { - id: stackView - Layout.preferredWidth: parent.width - Layout.fillHeight: 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 { - id: awLayout - anchors.fill: parent - spacing: MobileComponents.Units.gridUnit / 2 - - Rectangle { - id: detailsPage - Layout.fillHeight: true - Layout.fillWidth: true - - DiveList { - anchors.fill: detailsPage - id: diveDetails - color: MobileComponents.Theme.backgroundColor - } - } - - Rectangle { - id: messageArea - height: childrenRect.height - Layout.fillWidth: true - color: MobileComponents.Theme.backgroundColor - - Text { - id: message - color: MobileComponents.Theme.textColor - wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere - styleColor: MobileComponents.Theme.textColor - font.pointSize: subsurfaceTheme.smallPointSize - } - } + Rectangle { + id: messageArea + height: childrenRect.height + Layout.fillWidth: true + color: MobileComponents.Theme.backgroundColor + + Text { + id: message + color: MobileComponents.Theme.textColor + wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere + styleColor: MobileComponents.Theme.textColor + font.pointSize: MobileComponents.Units.smallPointSize } } } diff --git a/qt-mobile/qml/mobile-resources.qrc b/qt-mobile/qml/mobile-resources.qrc index d6c0825d4..971c2e427 100644 --- a/qt-mobile/qml/mobile-resources.qrc +++ b/qt-mobile/qml/mobile-resources.qrc @@ -19,6 +19,7 @@ mobilecomponents/ActionGroup.qml mobilecomponents/ApplicationWindow.qml mobilecomponents/GlobalDrawer.qml + mobilecomponents/Page.qml mobilecomponents/Icon.qml mobilecomponents/Heading.qml mobilecomponents/PageRow.qml -- cgit v1.2.3-70-g09d2