From 9f3a5656010e6e6b3ad378de0f521837e0cad29e Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Fri, 14 Jul 2017 15:41:00 +0200 Subject: QML UI: Add right handle icon This adds the right handle icon that is needed for the swipe list items not to report an error when activated. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/mobile-resources.qrc | 1 + 1 file changed, 1 insertion(+) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/mobile-resources.qrc b/mobile-widgets/qml/mobile-resources.qrc index 6fd506219..de14c7c05 100644 --- a/mobile-widgets/qml/mobile-resources.qrc +++ b/mobile-widgets/qml/mobile-resources.qrc @@ -29,6 +29,7 @@ kirigami/icons/go-previous.svg kirigami/icons/go-up.svg kirigami/icons/handle-left.svg + kirigami/icons/handle-right.svg kirigami/icons/distribute-horizontal-x.svg kirigami/icons/document-edit.svg kirigami/icons/document-save.svg -- cgit v1.2.3-70-g09d2 From 2ecd7e58d4bcead350364cfbc218e082b4edd088 Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Fri, 14 Jul 2017 15:44:40 +0200 Subject: QML UI: Change the pink color This changes the pink primary color to match the tone of the blue primary color. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/main.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml index 70b19b18a..101e4cb4f 100644 --- a/mobile-widgets/qml/main.qml +++ b/mobile-widgets/qml/main.qml @@ -375,7 +375,7 @@ if you have network connectivity and want to sync your data to cloud storage."), property color blueSecondaryTextColor: "#757575" // colors for the pink theme - property color pinkDarkerPrimaryColor: "#FF1493" + property color pinkDarkerPrimaryColor: "#C2185B" property color pinkDarkerPrimaryTextColor: "#ECECEC" property color pinkPrimaryColor: "#FF69B4" property color pinkPrimaryTextColor: "#212121" -- cgit v1.2.3-70-g09d2 From 60b64ceca4cdfdabefcb4951fb8ba8f8a4aa2d54 Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Fri, 14 Jul 2017 16:28:44 +0200 Subject: QML UI: Hide map it text if no coordinates exists This hides the text for the map it button if ther are no coordinates for a dive. Needed as for the dark theme the map it text was still visible. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/DiveDetailsView.qml | 1 + 1 file changed, 1 insertion(+) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/DiveDetailsView.qml b/mobile-widgets/qml/DiveDetailsView.qml index adea41168..0e5c90de6 100644 --- a/mobile-widgets/qml/DiveDetailsView.qml +++ b/mobile-widgets/qml/DiveDetailsView.qml @@ -70,6 +70,7 @@ Item { Kirigami.Label { id: buttonText text: qsTr("Map it") + visible: dive.gps !== "" color: subsurfaceTheme.darkerPrimaryTextColor anchors { horizontalCenter: parent.horizontalCenter -- cgit v1.2.3-70-g09d2 From b889bf117dca8ae01be9edc13d1236c31f0b0f7f Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Sat, 15 Jul 2017 16:27:12 +0200 Subject: QML UI: style the DC download dialog This sets the checkboxes in the dive computer download dialog to match the rest of the theme. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/DownloadedDiveDelegate.qml | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/DownloadedDiveDelegate.qml b/mobile-widgets/qml/DownloadedDiveDelegate.qml index 630382e34..f6ed3c663 100644 --- a/mobile-widgets/qml/DownloadedDiveDelegate.qml +++ b/mobile-widgets/qml/DownloadedDiveDelegate.qml @@ -36,6 +36,26 @@ Kirigami.AbstractListItem { checked: innerListItem.selected; width: childrenRect.heigh - Kirigami.Units.smallSpacing; height: childrenRect.heigh - Kirigami.Units.smallSpacing; + indicator: Rectangle { + visible: diveIsSelected + implicitWidth: 20 + implicitHeight: 20 + x: isBluetooth.leftPadding + y: parent.height / 2 - height / 2 + radius: 4 + border.color: diveIsSelected.down ? subsurfaceTheme.PrimaryColor : subsurfaceTheme.darkerPrimaryColor + color: subsurfaceTheme.backgroundColor + + Rectangle { + width: 12 + height: 12 + x: 4 + y: 4 + radius: 3 + color: diveIsSelected.down ? subsurfaceTheme.PrimaryColor : subsurfaceTheme.darkerPrimaryColor + visible: diveIsSelected && diveIsSelected.checked + } + } } Item { id: diveListEntry -- cgit v1.2.3-70-g09d2 From 0c31167e722368ca8ac24739654b39492b498555 Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Sat, 15 Jul 2017 16:28:54 +0200 Subject: QML UI: style the GPS services checkbox This adds style to the GPS services checkbox so that it matches the theme. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/main.qml | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml index 101e4cb4f..e9d43156a 100644 --- a/mobile-widgets/qml/main.qml +++ b/mobile-widgets/qml/main.qml @@ -287,6 +287,25 @@ if you have network connectivity and want to sync your data to cloud storage."), onCheckedChanged: { manager.locationServiceEnabled = checked; } + indicator: Rectangle { + implicitWidth: 20 + implicitHeight: 20 + x: locationCheckbox.leftPadding + y: parent.height / 2 - height / 2 + radius: 4 + border.color: locationCheckbox.down ? subsurfaceTheme.PrimaryColor : subsurfaceTheme.darkerPrimaryColor + color: subsurfaceTheme.drawerColor + + Rectangle { + width: 12 + height: 12 + x: 4 + y: 4 + radius: 3 + color: locationCheckbox.down ? subsurfaceTheme.PrimaryColor : subsurfaceTheme.darkerPrimaryColor + visible: locationCheckbox && locationCheckbox.checked + } + } } Kirigami.Label { x: Kirigami.Units.gridUnit * 1.5 -- cgit v1.2.3-70-g09d2 From 1f20350849f0da83612a5d061f76dcf465fb33cd Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Sat, 15 Jul 2017 16:31:51 +0200 Subject: QML UI: style the overlay drawer This adds separate colors for the overlay drawer background for light and dark themes. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/main.qml | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml index e9d43156a..d607eb4ac 100644 --- a/mobile-widgets/qml/main.qml +++ b/mobile-widgets/qml/main.qml @@ -335,6 +335,7 @@ if you have network connectivity and want to sync your data to cloud storage."), subsurfaceTheme.textColor = subsurfaceTheme.blueTextColor subsurfaceTheme.secondaryTextColor = subsurfaceTheme.blueSecondaryTextColor manager.setStatusbarColor(subsurfaceTheme.darkerPrimaryColor) + subsurfaceTheme.drawerColor = subsurfaceTheme.lightDrawerColor } function pinkTheme() { @@ -349,6 +350,7 @@ if you have network connectivity and want to sync your data to cloud storage."), subsurfaceTheme.textColor = subsurfaceTheme.pinkTextColor subsurfaceTheme.secondaryTextColor = subsurfaceTheme.pinkSecondaryTextColor manager.setStatusbarColor(subsurfaceTheme.darkerPrimaryColor) + subsurfaceTheme.drawerColor = subsurfaceTheme.lightDrawerColor } function darkTheme() { @@ -363,6 +365,7 @@ if you have network connectivity and want to sync your data to cloud storage."), subsurfaceTheme.textColor = subsurfaceTheme.darkTextColor subsurfaceTheme.secondaryTextColor = subsurfaceTheme.darkSecondaryTextColor manager.setStatusbarColor(subsurfaceTheme.darkerPrimaryColor) + subsurfaceTheme.drawerColor = subsurfaceTheme.darkDrawerColor } QtObject { @@ -381,6 +384,7 @@ if you have network connectivity and want to sync your data to cloud storage."), property color backgroundColor property color textColor property color secondaryTextColor + property color drawerColor // colors for the blue theme property color blueDarkerPrimaryColor: "#303F9f" @@ -416,6 +420,8 @@ if you have network connectivity and want to sync your data to cloud storage."), property color darkSecondaryTextColor: "#757575" property color contrastAccentColor: "#FF5722" // used for delete button + property color lightDrawerColor: "#FFFFFF" + property color darkDrawerColor: "#424242" property int columnWidth: Math.round(rootItem.width/(Kirigami.Units.gridUnit*28)) > 0 ? Math.round(rootItem.width / Math.round(rootItem.width/(Kirigami.Units.gridUnit*28))) : rootItem.width Component.onCompleted: { @@ -424,6 +430,7 @@ if you have network connectivity and want to sync your data to cloud storage."), Kirigami.Theme.backgroundColor = Qt.binding(function() { return backgroundColor }) Kirigami.Theme.textColor = Qt.binding(function() { return textColor }) Kirigami.Theme.buttonHoverColor = Qt.binding(function() { return darkerPrimaryColor }) + Kirigami.Theme.viewBackgroundColor = Qt.binding(function() { return drawerColor }) // this needs to pick the theme from persistent preference settings var theme = manager.theme -- cgit v1.2.3-70-g09d2 From 745e29958aabda62f3c45cd1cb9e81cab117bba9 Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Sat, 15 Jul 2017 16:33:50 +0200 Subject: QML UI: define the material accent colors for each theme THe editable textboxes rely on the material theme to set the correct colors. This sets the appropriate colors for each theme. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/main.qml | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml index d607eb4ac..6851e78e7 100644 --- a/mobile-widgets/qml/main.qml +++ b/mobile-widgets/qml/main.qml @@ -324,6 +324,8 @@ if you have network connectivity and want to sync your data to cloud storage."), } function blueTheme() { + Material.theme = Material.Light + Material.accent = subsurfaceTheme.blueDarkerPrimaryColor subsurfaceTheme.currentTheme = "Blue" subsurfaceTheme.darkerPrimaryColor = subsurfaceTheme.blueDarkerPrimaryColor subsurfaceTheme.darkerPrimaryTextColor= subsurfaceTheme.blueDarkerPrimaryTextColor @@ -339,6 +341,8 @@ if you have network connectivity and want to sync your data to cloud storage."), } function pinkTheme() { + Material.theme = Material.Light + Material.accent = subsurfaceTheme.pinkDarkerPrimaryColor subsurfaceTheme.currentTheme = "Pink" subsurfaceTheme.darkerPrimaryColor = subsurfaceTheme.pinkDarkerPrimaryColor subsurfaceTheme.darkerPrimaryTextColor = subsurfaceTheme.pinkDarkerPrimaryTextColor @@ -354,6 +358,8 @@ if you have network connectivity and want to sync your data to cloud storage."), } function darkTheme() { + Material.theme = Material.Dark + Material.accent = subsurfaceTheme.darkDarkerPrimaryColor subsurfaceTheme.currentTheme = "Dark" subsurfaceTheme.darkerPrimaryColor = subsurfaceTheme.darkDarkerPrimaryColor subsurfaceTheme.darkerPrimaryTextColor= subsurfaceTheme.darkDarkerPrimaryTextColor -- cgit v1.2.3-70-g09d2 From c0a9426ad31e13c9cc7a0d3b3a424d9844fd3beb Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Sat, 15 Jul 2017 16:35:38 +0200 Subject: QML UI: add Kirkigami theme variables The built in theme in Kirigami has special variables for sertain objects, this sets the correct color for each object to match our themes. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/main.qml | 3 +++ 1 file changed, 3 insertions(+) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml index 6851e78e7..909c570f2 100644 --- a/mobile-widgets/qml/main.qml +++ b/mobile-widgets/qml/main.qml @@ -437,6 +437,9 @@ if you have network connectivity and want to sync your data to cloud storage."), Kirigami.Theme.textColor = Qt.binding(function() { return textColor }) Kirigami.Theme.buttonHoverColor = Qt.binding(function() { return darkerPrimaryColor }) Kirigami.Theme.viewBackgroundColor = Qt.binding(function() { return drawerColor }) + Kirigami.Theme.viewTextColor = Qt.binding(function() { return textColor }) + Kirigami.Theme.buttonBackgroundColor = Qt.binding(function() { return darkerPrimaryColor }) + Kirigami.Theme.buttonTextColor = Qt.binding(function() { return textColor }) // this needs to pick the theme from persistent preference settings var theme = manager.theme -- cgit v1.2.3-70-g09d2 From 4a1b675b862bccc1dae1b1c2e36b8433e8f21402 Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Sat, 15 Jul 2017 16:36:35 +0200 Subject: Fix typo Simple typo. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/main.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml index 909c570f2..7ccb0c1ed 100644 --- a/mobile-widgets/qml/main.qml +++ b/mobile-widgets/qml/main.qml @@ -432,7 +432,7 @@ if you have network connectivity and want to sync your data to cloud storage."), property int columnWidth: Math.round(rootItem.width/(Kirigami.Units.gridUnit*28)) > 0 ? Math.round(rootItem.width / Math.round(rootItem.width/(Kirigami.Units.gridUnit*28))) : rootItem.width Component.onCompleted: { Kirigami.Theme.highlightColor = Qt.binding(function() { return darkerPrimaryColor }) - Kirigami.Theme.highlighedTextColor = Qt.binding(function() { return darkerPrimaryTextColor }) + Kirigami.Theme.highlightedTextColor = Qt.binding(function() { return darkerPrimaryTextColor }) Kirigami.Theme.backgroundColor = Qt.binding(function() { return backgroundColor }) Kirigami.Theme.textColor = Qt.binding(function() { return textColor }) Kirigami.Theme.buttonHoverColor = Qt.binding(function() { return darkerPrimaryColor }) -- cgit v1.2.3-70-g09d2 From 03a52b37bc193a56371532734641fd4e1c0072b4 Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Sat, 15 Jul 2017 18:11:13 +0200 Subject: QML UI: add material theme controls In order for the theme styilng to work we need the materials definitions. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/main.qml | 1 + 1 file changed, 1 insertion(+) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml index 7ccb0c1ed..2cce06607 100644 --- a/mobile-widgets/qml/main.qml +++ b/mobile-widgets/qml/main.qml @@ -1,6 +1,7 @@ // SPDX-License-Identifier: GPL-2.0 import QtQuick 2.4 import QtQuick.Controls 2.0 +import QtQuick.Controls.Material 2.1 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 -- cgit v1.2.3-70-g09d2 From a4e3a4cb255e5112bd09a918dba9959f2caba120 Mon Sep 17 00:00:00 2001 From: Joakim Bygdell Date: Sat, 15 Jul 2017 18:20:52 +0200 Subject: QML UI: style the GPS fixes page Add styling to the GPS fixes page. The background color of the swipe list objects is wrong and also the icon overlay. This is a Kirigami issue. Signed-off-by: Joakim Bygdell --- mobile-widgets/qml/GpsList.qml | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/GpsList.qml b/mobile-widgets/qml/GpsList.qml index 5ed641481..7ad97e14c 100644 --- a/mobile-widgets/qml/GpsList.qml +++ b/mobile-widgets/qml/GpsList.qml @@ -1,5 +1,6 @@ // SPDX-License-Identifier: GPL-2.0 -import QtQuick 2.3 +import QtQuick 2.6 +import QtQuick.Controls 2.0 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.1 @@ -26,40 +27,48 @@ Kirigami.ScrollablePage { width: parent.width Kirigami.Label { text: qsTr('Date: ') + color: subsurfaceTheme.textColor opacity: 0.6 font.pointSize: subsurfaceTheme.smallPointSize } Kirigami.Label { text: date + color: subsurfaceTheme.textColor Layout.preferredWidth: Math.max(parent.width / 5, paintedWidth) font.pointSize: subsurfaceTheme.smallPointSize } Kirigami.Label { text: qsTr('Name: ') + color: subsurfaceTheme.textColor opacity: 0.6 font.pointSize: subsurfaceTheme.smallPointSize } Kirigami.Label { text: name + color: subsurfaceTheme.textColor Layout.preferredWidth: Math.max(parent.width / 5, paintedWidth) font.pointSize: subsurfaceTheme.smallPointSize } Kirigami.Label { text: qsTr('Latitude: ') + color: subsurfaceTheme.textColor opacity: 0.6 font.pointSize: subsurfaceTheme.smallPointSize } Kirigami.Label { text: latitude + color: subsurfaceTheme.textColor font.pointSize: subsurfaceTheme.smallPointSize } Kirigami.Label { text: qsTr('Longitude: ') + color: subsurfaceTheme.textColor opacity: 0.6 font.pointSize: subsurfaceTheme.smallPointSize } Kirigami.Label { text: longitude + color: subsurfaceTheme.textColor font.pointSize: subsurfaceTheme.smallPointSize } } -- cgit v1.2.3-70-g09d2