mifr/subsurface
1
0
Fork 0
mirror of https://github.com/subsurface/subsurface.git synced 2025-02-19 22:16:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

mobile, QML UI: Settings page scalability

Browse source 
A relatively big change for such a simple page. Most relevant
changes are:

1) Do not use Kirigami.Header anymore. It appears that this header
has word wrapping on (and we cannot override that). This is
annoying on this page, as headings seems randomly be split over
2 lines, even in cases where there is more than enhough room to
display it on one line. And as the Kirigami.Header is just a
trivial wrapper of a Text field, we can simple replace it.

2) A lot of the toplevel GridLayouts had width properties set. These
are not needed (and confused my debugging code), so they are removed
withput any visual change. As a general rule, do not try to set
properties that are not needed. In general, it can only lead to
binding loops or undefined behavior.

3) Add a font size to our Theme. The step from regular to title size
was a little too big.

4) And, obviously, numerous font.pointSize lines are added to actually
resize the font.

Signed-off-by: Jan Mulder <jlmulder@xs4all.nl>
This commit is contained in:
Jan Mulder 2018-09-27 11:54:28 +02:00 • committed by Dirk Hohndel
parent 890d4c3d64
commit 0ad7df9859
2 changed files with 53 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

90
mobile-widgets/qml/Settings.qml
View file

@ -28,31 +28,28 @@ Kirigami.ScrollablePage {
GridLayout { GridLayout {
id: cloudSetting id: cloudSetting
columns: 3 columns: 3
Layout.bottomMargin: Kirigami.Units.gridUnit
Kirigami.Heading { Controls.Label {
text: qsTr("Cloud status") text: qsTr("Cloud status")
font.pointSize: subsurfaceTheme.headingPointSize
font.weight: Font.Light
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 3 Layout.columnSpan: 3
} }
Controls.Label { Controls.Label {
text: qsTr("Email") text: qsTr("Email")
Layout.alignment: Qt.AlignRight font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.15 Layout.preferredWidth: gridWidth * 0.15
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
} }
Controls.Label { Controls.Label {
text: prefs.credentialStatus === CloudStatus.CS_NOCLOUD ? qsTr("Not applicable") : prefs.cloudUserName text: prefs.credentialStatus === CloudStatus.CS_NOCLOUD ? qsTr("Not applicable") : prefs.cloudUserName
Layout.alignment: Qt.AlignRight font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.60 Layout.preferredWidth: gridWidth * 0.60
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
} }
SsrfButton { SsrfButton {
id: changeCloudSettings id: changeCloudSettings
Layout.alignment: Qt.AlignRight
text: qsTr("Change") text: qsTr("Change")
onClicked: { onClicked: {
prefs.cancelCredentialsPinSetup() prefs.cancelCredentialsPinSetup()
@ -61,15 +58,15 @@ Kirigami.ScrollablePage {
} }
Controls.Label { Controls.Label {
text: qsTr("Status") text: qsTr("Status")
Layout.alignment: Qt.AlignRight font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.15 Layout.preferredWidth: gridWidth * 0.15
Layout.preferredHeight: Kirigami.Units.gridUnit * 2 Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
} }
Controls.Label { Controls.Label {
text: describe[prefs.credentialStatus] text: describe[prefs.credentialStatus]
Layout.alignment: Qt.AlignRight font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.60 Layout.preferredWidth: gridWidth * 0.60
Layout.preferredHeight: Kirigami.Units.gridUnit * 2 Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
} }
} }
@ -82,18 +79,19 @@ Kirigami.ScrollablePage {
GridLayout { GridLayout {
id: themeSettings id: themeSettings
columns: 3 columns: 3
Layout.bottomMargin: Kirigami.Units.gridUnit
Kirigami.Heading { Controls.Label {
text: qsTr("Theme") text: qsTr("Theme")
font.pointSize: subsurfaceTheme.headingPointSize
font.weight: Font.Light
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 3 Layout.columnSpan: 3
} }
Controls.Label { Controls.Label {
text: qsTr("Blue") text: qsTr("Blue")
font.pointSize: subsurfaceTheme.regularPointSize
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: gridWidth * 0.15 Layout.preferredWidth: gridWidth * 0.15
@ -109,6 +107,7 @@ Kirigami.ScrollablePage {
Text { Text {
id: sampleRegularBlue id: sampleRegularBlue
text: qsTr("regular text") text: qsTr("regular text")
font.pointSize: subsurfaceTheme.regularPointSize
color: subsurfaceTheme.blueTextColor color: subsurfaceTheme.blueTextColor
anchors { anchors {
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
@ -124,6 +123,7 @@ Kirigami.ScrollablePage {
Text { Text {
id: sampleHighlightBlue id: sampleHighlightBlue
text: qsTr("Highlight") text: qsTr("Highlight")
font.pointSize: subsurfaceTheme.regularPointSize
color: subsurfaceTheme.bluePrimaryTextColor color: subsurfaceTheme.bluePrimaryTextColor
anchors { anchors {
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
@ -146,6 +146,7 @@ Kirigami.ScrollablePage {
Controls.Label { Controls.Label {
id: pinkLabel id: pinkLabel
text: qsTr("Pink") text: qsTr("Pink")
font.pointSize: subsurfaceTheme.regularPointSize
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: gridWidth * 0.15 Layout.preferredWidth: gridWidth * 0.15
} }
@ -160,6 +161,7 @@ Kirigami.ScrollablePage {
Text { Text {
id: sampleRegularPink id: sampleRegularPink
text: qsTr("regular text") text: qsTr("regular text")
font.pointSize: subsurfaceTheme.regularPointSize
color: subsurfaceTheme.pinkTextColor color: subsurfaceTheme.pinkTextColor
anchors { anchors {
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
@ -175,6 +177,7 @@ Kirigami.ScrollablePage {
Text { Text {
id: sampleHighlightPink id: sampleHighlightPink
text: qsTr("Highlight") text: qsTr("Highlight")
font.pointSize: subsurfaceTheme.regularPointSize
color: subsurfaceTheme.pinkPrimaryTextColor color: subsurfaceTheme.pinkPrimaryTextColor
anchors { anchors {
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
@ -197,6 +200,7 @@ Kirigami.ScrollablePage {
Controls.Label { Controls.Label {
text: qsTr("Dark") text: qsTr("Dark")
font.pointSize: subsurfaceTheme.regularPointSize
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: gridWidth * 0.15 Layout.preferredWidth: gridWidth * 0.15
@ -212,6 +216,7 @@ Kirigami.ScrollablePage {
Text { Text {
id: sampleRegularDark id: sampleRegularDark
text: qsTr("regular text") text: qsTr("regular text")
font.pointSize: subsurfaceTheme.regularPointSize
color: subsurfaceTheme.darkTextColor color: subsurfaceTheme.darkTextColor
anchors { anchors {
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
@ -227,6 +232,7 @@ Kirigami.ScrollablePage {
Text { Text {
id: sampleHighlightDark id: sampleHighlightDark
text: qsTr("Highlight") text: qsTr("Highlight")
font.pointSize: subsurfaceTheme.regularPointSize
color: subsurfaceTheme.darkPrimaryTextColor color: subsurfaceTheme.darkPrimaryTextColor
anchors { anchors {
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
@ -245,10 +251,11 @@ Kirigami.ScrollablePage {
PrefDisplay.theme = subsurfaceTheme.currentTheme PrefDisplay.theme = subsurfaceTheme.currentTheme
} }
} }
Kirigami.Heading { Controls.Label {
text: qsTr("Scaling") text: qsTr("Scaling")
font.pointSize: subsurfaceTheme.headingPointSize
font.weight: Font.Light
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 3 Layout.columnSpan: 3
@ -294,12 +301,12 @@ Kirigami.ScrollablePage {
GridLayout { GridLayout {
id: gpsPrefs id: gpsPrefs
columns: 2 columns: 2
width: parent.width
Kirigami.Heading { Controls.Label {
text: qsTr("GPS location service") text: qsTr("GPS location service")
font.pointSize: subsurfaceTheme.headingPointSize
font.weight: Font.Light
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 2 Layout.columnSpan: 2
@ -307,13 +314,14 @@ Kirigami.ScrollablePage {
Controls.Label { Controls.Label {
text: qsTr("Distance threshold (meters)") text: qsTr("Distance threshold (meters)")
Layout.alignment: Qt.AlignRight font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.75 Layout.preferredWidth: gridWidth * 0.75
} }
Controls.TextField { Controls.TextField {
id: distanceThreshold id: distanceThreshold
text: PrefLocationService.distance_threshold text: PrefLocationService.distance_threshold
font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.25 Layout.preferredWidth: gridWidth * 0.25
onEditingFinished: { onEditingFinished: {
PrefLocationService.distance_threshold = distanceThreshold.text PrefLocationService.distance_threshold = distanceThreshold.text
@ -322,13 +330,14 @@ Kirigami.ScrollablePage {
Controls.Label { Controls.Label {
text: qsTr("Time threshold (minutes)") text: qsTr("Time threshold (minutes)")
Layout.alignment: Qt.AlignRight font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.75 Layout.preferredWidth: gridWidth * 0.75
} }
Controls.TextField { Controls.TextField {
id: timeThreshold id: timeThreshold
text: PrefLocationService.time_threshold / 60 text: PrefLocationService.time_threshold / 60
font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.25 Layout.preferredWidth: gridWidth * 0.25
onEditingFinished: { onEditingFinished: {
PrefLocationService.time_threshold = timeThreshold.text * 60 PrefLocationService.time_threshold = timeThreshold.text * 60
@ -342,27 +351,29 @@ Kirigami.ScrollablePage {
opacity: 0.5 opacity: 0.5
Layout.fillWidth: true Layout.fillWidth: true
} }
GridLayout { GridLayout {
id: defaultCylinder id: defaultCylinder
columns: 2 columns: 2
width: parent.width - Kirigami.Units.gridUnit Layout.rightMargin: Kirigami.Units.gridUnit * 1.5
Kirigami.Heading { Controls.Label {
text: qsTr("Default Cylinder") text: qsTr("Default Cylinder")
font.pointSize: subsurfaceTheme.headingPointSize
font.weight: Font.Light
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 2 Layout.columnSpan: 2
} }
Controls.Label { Controls.Label {
Layout.alignment: Qt.AlignRight
text: qsTr("Cylinder:") text: qsTr("Cylinder:")
font.pointSize: subsurfaceTheme.smallPointSize font.pointSize: subsurfaceTheme.regularPointSize
} }
Controls.ComboBox { Controls.ComboBox {
id: defaultCylinderBox id: defaultCylinderBox
flat: true font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredHeight: fontMetrics.height * 2.5
inputMethodHints: Qt.ImhNoPredictiveText inputMethodHints: Qt.ImhNoPredictiveText
Layout.fillWidth: true Layout.fillWidth: true
onActivated: { onActivated: {
@ -370,7 +381,6 @@ Kirigami.ScrollablePage {
} }
} }
} }
Rectangle { Rectangle {
color: subsurfaceTheme.darkerPrimaryColor color: subsurfaceTheme.darkerPrimaryColor
height: 1 height: 1
@ -381,17 +391,18 @@ Kirigami.ScrollablePage {
GridLayout { GridLayout {
id: divecomputers id: divecomputers
columns: 2 columns: 2
width: parent.width - Kirigami.Units.gridUnit Controls.Label {
Kirigami.Heading {
text: qsTr("Dive computers") text: qsTr("Dive computers")
font.pointSize: subsurfaceTheme.headingPointSize
font.weight: Font.Light
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing
Layout.columnSpan: 2 Layout.columnSpan: 2
} }
Controls.Label { Controls.Label {
text: qsTr("Forget remembered dive computers") text: qsTr("Forget remembered dive computers")
font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.75 Layout.preferredWidth: gridWidth * 0.75
} }
SsrfButton { SsrfButton {
@ -417,11 +428,11 @@ Kirigami.ScrollablePage {
GridLayout { GridLayout {
id: unit_system id: unit_system
columns: 2 columns: 2
width: parent.width - Kirigami.Units.gridUnit Controls.Label {
Kirigami.Heading {
text: qsTr("Units") text: qsTr("Units")
font.pointSize: subsurfaceTheme.headingPointSize
font.weight: Font.Light
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 2 Layout.columnSpan: 2
@ -429,6 +440,7 @@ Kirigami.ScrollablePage {
Controls.Label { Controls.Label {
text: qsTr("Use Imperial Units") text: qsTr("Use Imperial Units")
font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.75 Layout.preferredWidth: gridWidth * 0.75
} }
SsrfSwitch { SsrfSwitch {
@ -444,6 +456,7 @@ Kirigami.ScrollablePage {
} }
Controls.Label { Controls.Label {
text: qsTr("Use Metric Units") text: qsTr("Use Metric Units")
font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.75 Layout.preferredWidth: gridWidth * 0.75
} }
SsrfSwitch { SsrfSwitch {
@ -469,11 +482,11 @@ Kirigami.ScrollablePage {
GridLayout { GridLayout {
id: developer id: developer
columns: 2 columns: 2
width: parent.width - Kirigami.Units.gridUnit Controls.Label {
Kirigami.Heading {
text: qsTr("Developer") text: qsTr("Developer")
font.pointSize: subsurfaceTheme.headingPointSize
font.weight: Font.Light
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 2 Layout.columnSpan: 2
@ -481,6 +494,7 @@ Kirigami.ScrollablePage {
Controls.Label { Controls.Label {
text: qsTr("Display Developer menu") text: qsTr("Display Developer menu")
font.pointSize: subsurfaceTheme.regularPointSize
Layout.preferredWidth: gridWidth * 0.75 Layout.preferredWidth: gridWidth * 0.75
} }
SsrfSwitch { SsrfSwitch {

1
mobile-widgets/qml/main.qml
View file

@ -455,6 +455,7 @@ if you have network connectivity and want to sync your data to cloud storage."),
property double regularPointSize: fontMetrics.font.pointSize property double regularPointSize: fontMetrics.font.pointSize
property double titlePointSize: regularPointSize * 1.5 property double titlePointSize: regularPointSize * 1.5
property double headingPointSize: regularPointSize * 1.2
property double smallPointSize: regularPointSize * 0.8 property double smallPointSize: regularPointSize * 0.8
// colors currently in use // colors currently in use