[settings] Support any pixel density

Task-number: AUTOSUITE-258
Change-Id: Id43c0ad2379d21b1503f460e4c1021e755b29abe
Reviewed-by: Lukáš Tinkl <ltinkl@luxoft.com>
Reviewed-by: Bramastyo Harimukti Santoso <bramastyo.harimukti.santoso@pelagicore.com>

5 files changed, 34 insertions, 20 deletions

diff --git a/apps/com.pelagicore.apps.settings/Main.qml b/apps/com.pelagicore.apps.settings/Main.qml
index 480172b9..ef16c3b8 100644
--- a/apps/com.pelagicore.apps.settings/Main.qml
+++ b/apps/com.pelagicore.apps.settings/Main.qml
@@ -32,6 +32,8 @@
 import QtQuick 2.8
 import utils 1.0
 
+import com.pelagicore.styles.neptune 3.0
+
 import "views"
 import "store"
 import "assets"
@@ -45,7 +47,7 @@ AppUIScreen {
         x: root.exposedRect.x
         y: 0
         width: root.exposedRect.width
-        height: 660 - 224 + exposedRect.y
+        height: NeptuneStyle.dp(436) + exposedRect.y
         fillMode: Image.Pad
 
         source: Assets.gfx("hero-settings")
diff --git a/apps/com.pelagicore.apps.settings/panels/DateTimePanel.qml b/apps/com.pelagicore.apps.settings/panels/DateTimePanel.qml
index 6d29fa76..cd153fb0 100644
--- a/apps/com.pelagicore.apps.settings/panels/DateTimePanel.qml
+++ b/apps/com.pelagicore.apps.settings/panels/DateTimePanel.qml
@@ -50,7 +50,7 @@ Control {
     contentItem: Column {
         SwitchDelegate {
             id: twentyFourHourTime
-            height: Style.vspan(95/80)
+            height: NeptuneStyle.dp(95)
             width: parent.width
             text: qsTr("24h time")
             onToggled: root.twentyFourHourTimeFormatRequested(checked)
@@ -64,7 +64,7 @@ Control {
         }
 
         SwitchDelegate {
-            height: Style.vspan(95/80)
+            height: NeptuneStyle.dp(95)
             width: parent.width
             enabled: false // TODO
             text: qsTr("Set Automatically")
@@ -78,7 +78,7 @@ Control {
         }
 
         ItemDelegate {
-            height: Style.vspan(95/80)
+            height: NeptuneStyle.dp(95)
             width: parent.width
             enabled: false // TODO
             text: qsTr("Time Zone")
@@ -86,7 +86,7 @@ Control {
             Image {
                 opacity: NeptuneStyle.fontOpacityDisabled
                 anchors.right: parent.right
-                anchors.rightMargin: Style.hspan(22/45)
+                anchors.rightMargin: NeptuneStyle.dp(22)
                 height: parent.height
                 fillMode: Image.Pad
                 Layout.alignment: Qt.AlignVCenter
diff --git a/apps/com.pelagicore.apps.settings/panels/LanguagePanel.qml b/apps/com.pelagicore.apps.settings/panels/LanguagePanel.qml
index 1373287d..3b97a452 100644
--- a/apps/com.pelagicore.apps.settings/panels/LanguagePanel.qml
+++ b/apps/com.pelagicore.apps.settings/panels/LanguagePanel.qml
@@ -56,14 +56,14 @@ Control {
             id: languageDelegate
 
             width: ListView.view.width
-            height: Style.vspan(110/80)
+            height: NeptuneStyle.dp(110)
             onClicked: root.languageRequested(model.language)
 
             contentItem: Item {
                 RadioButton {
                     id: radio
                     checked: model.language === root.currentLanguage
-                    width: Style.hspan(100/45)
+                    width: NeptuneStyle.dp(100)
                     height: parent.height
 
                     onToggled: languageDelegate.clicked()
@@ -75,13 +75,13 @@ Control {
 
                     Label {
                         anchors.verticalCenter: parent.verticalCenter
-                        anchors.verticalCenterOffset: -20
+                        anchors.verticalCenterOffset: NeptuneStyle.dp(-20)
                         text: model.title
                         font.weight: Style.fontWeight
                     }
                     Label {
                         anchors.verticalCenter: parent.verticalCenter
-                        anchors.verticalCenterOffset: 20
+                        anchors.verticalCenterOffset: NeptuneStyle.dp(20)
                         text: model.subtitle
                         font.pixelSize: NeptuneStyle.fontSizeS
                         font.weight: Style.fontWeight
diff --git a/apps/com.pelagicore.apps.settings/panels/ThemesPanel.qml b/apps/com.pelagicore.apps.settings/panels/ThemesPanel.qml
index 966e9498..4d28e656 100644
--- a/apps/com.pelagicore.apps.settings/panels/ThemesPanel.qml
+++ b/apps/com.pelagicore.apps.settings/panels/ThemesPanel.qml
@@ -57,7 +57,12 @@ Control {
         delegate: ItemDelegate {
             id: delegate
             onClicked: root.themeRequested(index)
+            width: ListView.view.width
+
             contentItem: ColumnLayout {
+                id: columnContent
+                anchors.fill: parent
+
                 RowLayout {
                     RadioButton {
                         checked: index === root.currentTheme
@@ -67,11 +72,16 @@ Control {
                         text: qsTranslate("RootStore", model.title)
                     }
                 }
+
                 Image {
+                    Layout.maximumWidth: columnContent.width
+                    Layout.minimumWidth: columnContent.width
+                    Layout.maximumHeight: NeptuneStyle.dp(sourceSize.height)
                     source: Assets.gfx("theme_" + model.theme)
                 }
                 Image {
-                    Layout.fillWidth: true
+                    Layout.maximumWidth: columnContent.width
+                    Layout.minimumWidth: columnContent.width
                     source: Style.gfx2("list-divider", NeptuneStyle.theme)
                     visible: index !== view.count - 1
                 }
diff --git a/apps/com.pelagicore.apps.settings/views/SettingsView.qml b/apps/com.pelagicore.apps.settings/views/SettingsView.qml
index 32a1c492..f3a6cbb8 100644
--- a/apps/com.pelagicore.apps.settings/views/SettingsView.qml
+++ b/apps/com.pelagicore.apps.settings/views/SettingsView.qml
@@ -35,14 +35,16 @@ import QtQuick.Layouts 1.3
 import utils 1.0
 import controls 1.0
 
+import com.pelagicore.styles.neptune 3.0
+
 import "../assets"
 import "../store"
 import "../panels"
 
 Control {
     id: root
-    implicitWidth: Style.hspan(12)
-    implicitHeight: Style.vspan(12)
+    implicitWidth: NeptuneStyle.dp(960)
+    implicitHeight: NeptuneStyle.dp(540)
 
     property RootStore store
 
@@ -51,18 +53,18 @@ Control {
     }
 
     Item {
-        width: Style.hspan(1080/45)
+        width: NeptuneStyle.dp(1080)
         anchors.left: parent.left
         anchors.top: parent.top
-        anchors.topMargin: Style.vspan(436/80)
+        anchors.topMargin: NeptuneStyle.dp(436)
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: Style.vspan(20/80)
+        anchors.bottomMargin: NeptuneStyle.dp(20)
 
         clip: true
 
         Item {
             anchors.left: parent.left
-            width: Style.hspan(264/45)
+            width: NeptuneStyle.dp(264)
             anchors.top: parent.top
             anchors.bottom: parent.bottom
 
@@ -70,7 +72,7 @@ Control {
                 id: toolsColumn
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
-                anchors.topMargin: Style.vspan(53/80)
+                anchors.topMargin: NeptuneStyle.dp(53)
 
                 translationContext: "SettingsToolsColumn"
                 model: ListModel {
@@ -84,11 +86,11 @@ Control {
 
         StackLayout {
             anchors.top: parent.top
-            anchors.topMargin: Style.vspan(53/80)
+            anchors.topMargin: NeptuneStyle.dp(53)
             anchors.right: parent.right
-            anchors.rightMargin: Style.hspan(96/45)
+            anchors.rightMargin: NeptuneStyle.dp(96)
             anchors.bottom: parent.bottom
-            width: Style.hspan(16)
+            width: NeptuneStyle.dp(720)
 
             currentIndex: toolsColumn.currentIndex