[sysui] Support any pixel density in sysui/home

Task-number: AUTOSUITE-262
Change-Id: Id1ffef9961cfcae10fe8addc1095f35b5ac81234
Reviewed-by: Daniel d'Andrada <daniel.dandrada@luxoft.com>

4 files changed, 24 insertions, 20 deletions

diff --git a/sysui/home/AddWidgetPopup.qml b/sysui/home/AddWidgetPopup.qml
index c71fa739..6aa7b492 100644
--- a/sysui/home/AddWidgetPopup.qml
+++ b/sysui/home/AddWidgetPopup.qml
@@ -81,7 +81,7 @@ NeptunePopup {
 
         delegate: ListItem {
             width: ListView.view.width
-            height: Style.vspan(1)
+            height: NeptuneStyle.dp(80)
             symbol: model.appInfo ? Qt.resolvedUrl(model.appInfo.icon) : null
             text: model.appInfo ? model.appInfo.name : null
             enabled: model.appInfo ? !model.appInfo.asWidget : false
@@ -101,7 +101,7 @@ NeptunePopup {
         Label {
             id: header
             anchors.baseline: parent.top
-            anchors.baselineOffset: Style.vspan(78/80)
+            anchors.baselineOffset: NeptuneStyle.dp(78)
             width: parent.width
             horizontalAlignment: Text.AlignHCenter
             elide: Text.ElideRight
diff --git a/sysui/home/ApplicationWidget.qml b/sysui/home/ApplicationWidget.qml
index 5413e4eb..862e7f90 100644
--- a/sysui/home/ApplicationWidget.qml
+++ b/sysui/home/ApplicationWidget.qml
@@ -100,8 +100,8 @@ Item {
         var window = root.appInfo.window
         if (window) {
             window.parent = windowSlot;
-            window.width = Qt.binding(function() { return Style.hspan(24); });
-            window.height = Qt.binding(function() { return Style.vspan(24); });
+            window.width = Qt.binding(function() { return NeptuneStyle.dp(1080); });
+            window.height = Qt.binding(function() { return NeptuneStyle.dp(1920); });
             window.visible = true;
             loadingStateGroup.state = "live"
         } else {
@@ -211,7 +211,7 @@ Item {
     MouseArea {
         id: dragHandle
         anchors.fill: widgetStripe
-        anchors.margins: -Style.hspan(0.2)
+        anchors.margins: NeptuneStyle.dp(-9)
         visible: root.buttonsVisible
 
         onMouseYChanged: root.draggedOntoPos(dragHandle.mapToItem(root, mouseX, mouseY))
@@ -231,7 +231,7 @@ Item {
         anchors.horizontalCenter: widgetStripe.horizontalCenter
         anchors.bottom: parent.bottom
 
-        width: widgetStripe.width + Style.hspan(.4)
+        width: widgetStripe.width + NeptuneStyle.dp(18)
         height: width
         visible: root.buttonsVisible
 
@@ -266,9 +266,9 @@ Item {
 
         Image {
             anchors.right: parent.right
-            anchors.rightMargin: Style.hspan(.5)
+            anchors.rightMargin: NeptuneStyle.dp(23)
             anchors.top: parent.top
-            anchors.topMargin: Style.vspan(.3)
+            anchors.topMargin: NeptuneStyle.dp(24)
             width: NeptuneStyle.dp(sourceSize.width)
             height: NeptuneStyle.dp(sourceSize.height)
             source: Style.symbol("ic-expand-to-fullscreen")
diff --git a/sysui/home/HomePage.qml b/sysui/home/HomePage.qml
index fb051503..906dbdbd 100644
--- a/sysui/home/HomePage.qml
+++ b/sysui/home/HomePage.qml
@@ -36,6 +36,8 @@ import controls 1.0
 import utils 1.0
 import animations 1.0
 
+import com.pelagicore.styles.neptune 3.0
+
 Item {
     id: root
 
@@ -53,13 +55,13 @@ Item {
         id: widgetGrid
 
         anchors.top: parent.top
-        anchors.topMargin: Style.vspan(76/80)
+        anchors.topMargin: NeptuneStyle.dp(76)
         anchors.bottom: addWidgetButton.top
-        anchors.bottomMargin: Style.vspan(5/80)
+        anchors.bottomMargin: NeptuneStyle.dp(5)
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.leftMargin: Style.hspan(40/45)
-        anchors.rightMargin: Style.hspan(40/45)
+        anchors.leftMargin: NeptuneStyle.dp(40)
+        anchors.rightMargin: NeptuneStyle.dp(40)
 
         applicationModel: root.applicationModel
     }
@@ -67,9 +69,9 @@ Item {
     Tool {
         id: addWidgetButton
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: Style.vspan(40/80)
+        anchors.bottomMargin: NeptuneStyle.dp(40)
         anchors.horizontalCenter: parent.horizontalCenter
-        width: Style.hspan(1)
+        width: NeptuneStyle.dp(45)
         height: width
         symbol: Style.symbol("ic-addwidget-plus")
         onClicked: popup.open()
diff --git a/sysui/home/WidgetGrid.qml b/sysui/home/WidgetGrid.qml
index 1b5461fe..9f9922b6 100644
--- a/sysui/home/WidgetGrid.qml
+++ b/sysui/home/WidgetGrid.qml
@@ -38,6 +38,8 @@ import animations 1.0
 
 import NeptuneWidgetGrid 1.0
 
+import com.pelagicore.styles.neptune 3.0
+
 Item {
     id: root
 
@@ -47,7 +49,7 @@ Item {
     readonly property int widgetCount: widgetsList.count
     readonly property int maxWidgetCount: widgetsList.numRows
 
-    readonly property real resizerHandleHeight: Style.vspan(0.4)
+    readonly property real resizerHandleHeight: NeptuneStyle.dp(32)
 
     property Item activeApplicationParent
     property bool moveBottomWidgetToDrawer: false
@@ -72,7 +74,7 @@ Item {
         id: column
         anchors.fill: parent
 
-        readonly property real swapThreshold: Style.vspan(0.4)
+        readonly property real swapThreshold: NeptuneStyle.dp(32)
         function onWidgetMoved(draggedDelegate) {
             var draggedWidget = draggedDelegate.widget;
             var deltaY = draggedWidget.y - draggedDelegate.y
@@ -588,8 +590,8 @@ Item {
                     // TODO: need to be replaced with an icon
                     Rectangle {
                         id: handlerIcon
-                        width: Style.vspan(1)
-                        height: 2
+                        width: NeptuneStyle.dp(80)
+                        height: NeptuneStyle.dp(2)
                         color: "grey"
                         anchors.centerIn: parent
                     }
@@ -599,8 +601,8 @@ Item {
 
                         // don't let it cover the area near widget corners as they can have buttons
                         // like widget-drag and widget-close
-                        anchors.leftMargin: Style.hspan(2)
-                        anchors.rightMargin: Style.hspan(2)
+                        anchors.leftMargin: NeptuneStyle.dp(90)
+                        anchors.rightMargin: NeptuneStyle.dp(90)
 
                         // touch area spills out beyond resizeHandle's geometry so that it's easier to hit
                         anchors.topMargin: -parent.height