[phone] scalability fixes

ports the hardcoded pixel values and Style.hspan/vspan to
NeptuneStyle.dp() method

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

9 files changed, 63 insertions, 61 deletions

diff --git a/apps/com.pelagicore.phone/Main.qml b/apps/com.pelagicore.phone/Main.qml
index 98e4bc59..9281d3f1 100644
--- a/apps/com.pelagicore.phone/Main.qml
+++ b/apps/com.pelagicore.phone/Main.qml
@@ -32,6 +32,7 @@
 import QtQuick 2.8
 import utils 1.0
 import animations 1.0
+import controls 1.0
 import QtGraphicalEffects 1.0
 
 import com.pelagicore.styles.neptune 3.0
@@ -46,7 +47,7 @@ AppUIScreen {
     MultiPointTouchArea {
         id: multiPoint
         anchors.fill: parent
-        anchors.margins: 30
+        anchors.margins: NeptuneStyle.dp(30)
         touchPoints: [ TouchPoint { id: touchPoint1 } ]
 
         property int count: 0
@@ -56,16 +57,16 @@ AppUIScreen {
         }
     }
 
-    BorderImage {
+    ScalableBorderImage {
         id: fullscreenTopPartBackground
 
         x: root.exposedRect.x
-        y: root.exposedRect.y - 224
+        y: root.exposedRect.y - NeptuneStyle.dp(224)
         width: root.exposedRect.width
-        height: Math.max(sourceSize.height, ((660 - 224) + root.exposedRect.y))
+        height: Math.max(NeptuneStyle.dp(sourceSize.height), NeptuneStyle.dp(660 - 224) + root.exposedRect.y)
 
         border.bottom: 0
-        border.top: sourceSize.height - 1
+        border.top: height - NeptuneStyle.dp(1)
         border.left: 0
         border.right: 0
 
diff --git a/apps/com.pelagicore.phone/controls/BlurredImageBackground.qml b/apps/com.pelagicore.phone/controls/BlurredImageBackground.qml
index bb233409..ddbb40cc 100644
--- a/apps/com.pelagicore.phone/controls/BlurredImageBackground.qml
+++ b/apps/com.pelagicore.phone/controls/BlurredImageBackground.qml
@@ -32,6 +32,8 @@
 import QtQuick 2.8
 import QtGraphicalEffects 1.0
 
+import com.pelagicore.styles.neptune 3.0
+
 Item {
     id: root
 
@@ -49,7 +51,7 @@ Item {
         id: contactImageBlur
         anchors.fill: contactImage
         source: contactImage
-        radius: 64
+        radius: NeptuneStyle.dp(64)
         visible: false
     }
 
diff --git a/apps/com.pelagicore.phone/controls/KeypadButton.qml b/apps/com.pelagicore.phone/controls/KeypadButton.qml
index 408d983f..f3de0053 100644
--- a/apps/com.pelagicore.phone/controls/KeypadButton.qml
+++ b/apps/com.pelagicore.phone/controls/KeypadButton.qml
@@ -40,8 +40,8 @@ import com.pelagicore.styles.neptune 3.0
 
 Item {
     id: root
-    width: 160
-    height: Style.vspan(100/80)
+    width: NeptuneStyle.dp(160)
+    height: NeptuneStyle.dp(100)
 
     property alias primaryText: primaryLabel.text
     property alias secondaryText: secondaryLabel.text
diff --git a/apps/com.pelagicore.phone/panels/KeypadViewPanel.qml b/apps/com.pelagicore.phone/panels/KeypadViewPanel.qml
index 5d32c34b..861f557d 100644
--- a/apps/com.pelagicore.phone/panels/KeypadViewPanel.qml
+++ b/apps/com.pelagicore.phone/panels/KeypadViewPanel.qml
@@ -50,10 +50,10 @@ Item {
         id: cursor
         visible: textedit.text !== ""
         anchors.right: textedit.right
-        anchors.rightMargin: Style.hspan(0.4)
+        anchors.rightMargin: NeptuneStyle.dp(18)
         anchors.verticalCenter: textedit.verticalCenter
-        width: 2
-        height: 60
+        width: NeptuneStyle.dp(2)
+        height: NeptuneStyle.dp(60)
         color: NeptuneStyle.contrastColor
         opacity: 0
         SequentialAnimation {
@@ -70,9 +70,9 @@ Item {
         anchors.left: gridlayout.left
         anchors.right: gridlayout.right
         anchors.top: parent.top
-        anchors.topMargin: Style.vspan(0.5)
-        leftPadding: Style.hspan(0.5)
-        rightPadding: Style.hspan(0.5)
+        anchors.topMargin: NeptuneStyle.dp(40)
+        leftPadding: NeptuneStyle.dp(45 * 0.5)
+        rightPadding: NeptuneStyle.dp(45 * 0.5)
         readOnly: true
         color: NeptuneStyle.primaryTextColor
         inputMethodHints: Qt.ImhDialableCharactersOnly
@@ -86,7 +86,7 @@ Item {
     Tool {
         anchors.right: parent.right
         anchors.verticalCenter: textedit.verticalCenter
-        width: Style.hspan(2)
+        width: NeptuneStyle.dp(90)
         symbol: Style.symbol("ic-erase")
         opacity: textedit.text ? 1.0 : 0.0
         visible: opacity > 0
@@ -97,14 +97,14 @@ Item {
     GridLayout {
         id: gridlayout
 
-        width: 500
-        height: 540
+        width: NeptuneStyle.dp(500)
+        height: NeptuneStyle.dp(540)
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: textedit.bottom
-        anchors.topMargin: Style.vspan(1)
+        anchors.topMargin: NeptuneStyle.dp(80)
         columns: 3
-        columnSpacing: 10
-        rowSpacing: 10
+        columnSpacing: NeptuneStyle.dp(10)
+        rowSpacing: NeptuneStyle.dp(10)
         KeypadButton {
             primaryText: "1"
             secondaryText: " " // to keep the "1" above
diff --git a/apps/com.pelagicore.phone/views/CallWidgetView.qml b/apps/com.pelagicore.phone/views/CallWidgetView.qml
index b2fbf06b..dfce038c 100644
--- a/apps/com.pelagicore.phone/views/CallWidgetView.qml
+++ b/apps/com.pelagicore.phone/views/CallWidgetView.qml
@@ -80,10 +80,10 @@ Item {
                 target: buttonRow; anchors.right: parent.right; anchors.verticalCenter: parent.verticalCenter
             }
             PropertyChanges {
-                target: contactImage; width: Style.hspan(200/45); height: width
+                target: contactImage; width: NeptuneStyle.dp(200); height: width
             }
             PropertyChanges {
-                target: textColumn; anchors.leftMargin: Style.hspan(.7)
+                target: textColumn; anchors.leftMargin: NeptuneStyle.dp(45 * .7)
             }
         },
         State {
@@ -99,7 +99,7 @@ Item {
                 anchors.verticalCenter: contactImage.bottom
             }
             PropertyChanges {
-                target: contactImage; width: 258; height: width; anchors.topMargin: Style.vspan(1)
+                target: contactImage; width: NeptuneStyle.dp(258); height: width; anchors.topMargin: NeptuneStyle.dp(80)
             }
             PropertyChanges {
                 target: textColumn; anchors.leftMargin: 0
@@ -109,7 +109,7 @@ Item {
             name: "Widget3Rows"
             extend: "Widget2Rows"
             PropertyChanges {
-                target: contactImage; width: 413; height: width; anchors.topMargin: Style.vspan(1.6)
+                target: contactImage; width: NeptuneStyle.dp(413); height: width; anchors.topMargin: NeptuneStyle.dp(128)
             }
         },
         State {
@@ -119,7 +119,7 @@ Item {
                 target: buttonRow; scale: .8
             }
             PropertyChanges {
-                target: contactImage; width: Style.hspan(200/45); height: width; anchors.topMargin: Style.vspan(0.3)
+                target: contactImage; width: NeptuneStyle.dp(200); height: width; anchors.topMargin: NeptuneStyle.dp(24)
             }
         }
     ]
@@ -175,7 +175,7 @@ Item {
         id: buttonRow
 
         Tool {
-            Layout.rightMargin: root.state !== "Widget1Row" ? Style.hspan(2) : 0
+            Layout.rightMargin: root.state !== "Widget1Row" ? NeptuneStyle.dp(90) : 0
             symbol: Style.symbol("ic-mute-ongoing")
         }
 
@@ -190,7 +190,7 @@ Item {
         }
 
         Tool {
-            Layout.leftMargin: root.state !== "Widget1Row" ? Style.hspan(2) : 0
+            Layout.leftMargin: root.state !== "Widget1Row" ? NeptuneStyle.dp(90) : 0
             symbol: Style.symbol("ic-keypad-ongoing")
             //onClicked: root.keypadRequested() // TODO, disabled for now
         }
diff --git a/apps/com.pelagicore.phone/views/ContactsView.qml b/apps/com.pelagicore.phone/views/ContactsView.qml
index d32bace4..74ee006f 100644
--- a/apps/com.pelagicore.phone/views/ContactsView.qml
+++ b/apps/com.pelagicore.phone/views/ContactsView.qml
@@ -53,11 +53,11 @@ ListView {
         width: ListView.view.width
         bottomPadding: 0
         contentItem: Column {
-            spacing: Style.vspan(.2)
+            spacing: NeptuneStyle.dp(16)
             RowLayout {
                 anchors.left: parent.left
                 anchors.right: parent.right
-                spacing: Style.hspan(.5)
+                spacing: NeptuneStyle.dp(45 * .5)
                 RoundImage {
                     height: parent.height
                     width: height
@@ -80,7 +80,7 @@ ListView {
             }
             Image {
                 width: parent.width
-                height: 2
+                height: NeptuneStyle.dp(2)
                 source: Style.gfx2("list-divider", NeptuneStyle.theme)
             }
         }
diff --git a/apps/com.pelagicore.phone/views/FavoritesWidgetView.qml b/apps/com.pelagicore.phone/views/FavoritesWidgetView.qml
index b298c318..2751dec2 100644
--- a/apps/com.pelagicore.phone/views/FavoritesWidgetView.qml
+++ b/apps/com.pelagicore.phone/views/FavoritesWidgetView.qml
@@ -48,22 +48,22 @@ Item {
     states: [
         State {
             name: "Widget1Row"
-            PropertyChanges { target: root; height: 260 }
+            PropertyChanges { target: root; height: NeptuneStyle.dp(260) }
         },
         State {
             name: "Widget2Rows"
-            PropertyChanges { target: root; height: 550 }
+            PropertyChanges { target: root; height: NeptuneStyle.dp(550) }
             PropertyChanges { target: favorites1Row; opacity: 0 }
             PropertyChanges { target: favoritesMoreRows; opacity: 1 }
         },
         State {
             name: "Widget3Rows"
             extend: "Widget2Rows"
-            PropertyChanges { target: root; height: 840 }
+            PropertyChanges { target: root; height: NeptuneStyle.dp(840) }
         },
         State {
             name: "Maximized"
-            PropertyChanges { target: root; height: 436 }
+            PropertyChanges { target: root; height: NeptuneStyle.dp(436) }
         }
 
     ]
@@ -103,11 +103,11 @@ Item {
             top: parent.top
             left: parent.left
             right: parent.right
-            leftMargin: Style.hspan(50/45)
-            rightMargin: Style.hspan(50/45)
+            leftMargin: NeptuneStyle.dp(50)
+            rightMargin: NeptuneStyle.dp(50)
         }
 
-        height: Math.min(436, root.exposedRectHeight)
+        height: Math.min(NeptuneStyle.dp(436), root.exposedRectHeight)
 
         opacity: 1.0
         visible: opacity > 0
@@ -115,11 +115,11 @@ Item {
         orientation: ListView.Horizontal
         interactive: false
         clip: true
-        spacing: Style.hspan(50/45)
+        spacing: NeptuneStyle.dp(50)
         model: root.store.favoritesModel
         delegate: RoundImage {
-            height: Style.hspan(130/45)
-            width: height
+            width: NeptuneStyle.dp(130)
+            height: width
             anchors.verticalCenter: parent.verticalCenter
             source: "../assets/profile_photos/%1.jpg".arg(model.handle)
             onClicked: root.store.startCall(model.handle)
@@ -136,12 +136,12 @@ Item {
             top: parent.top
             left: parent.left
             right: parent.right
-            leftMargin: Style.hspan(58/45)
-            rightMargin: Style.hspan(58/45)
-            topMargin: Style.vspan(45/80)
+            leftMargin: NeptuneStyle.dp(58)
+            rightMargin: NeptuneStyle.dp(58)
+            topMargin: NeptuneStyle.dp(45)
         }
 
-        height: root.exposedRectHeight - anchors.topMargin - Style.vspan(25/80)
+        height: root.exposedRectHeight - anchors.topMargin - NeptuneStyle.dp(25)
 
         ListView {
             id: listviewMoreRows
@@ -168,18 +168,18 @@ Item {
                         source: "../assets/profile_photos/%1.jpg".arg(model.handle)
                     }
                     Label {
-                        Layout.leftMargin: Style.hspan(22/45)
+                        Layout.leftMargin: NeptuneStyle.dp(22)
                         Layout.fillWidth: true
                         text: model.firstName + " " + model.surname
                         color: enabled ? NeptuneStyle.contrastColor : NeptuneStyle.disabledTextColor
                     }
                     Tool {
-                        Layout.preferredWidth: Style.hspan(100/45)
+                        Layout.preferredWidth: NeptuneStyle.dp(100)
                         height: parent.height
                         symbol: Style.symbol("ic-message-contrast")
                     }
                     Tool {
-                        Layout.preferredWidth: Style.hspan(100/45)
+                        Layout.preferredWidth: NeptuneStyle.dp(100)
                         height: parent.height
                         symbol: Style.symbol("ic-call-contrast")
                         onClicked: root.store.startCall(model.handle)
@@ -201,7 +201,7 @@ Item {
             Behavior on opacity { DefaultNumberAnimation {} }
             visible: opacity > 0
             text: qsTr("more", "more contacts")
-            font.pixelSize: 22//NeptuneStyle.fontSizeS   //TODO change to NeptuneStyle when that one has a correct value
+            font.pixelSize: NeptuneStyle.dp(22)//NeptuneStyle.fontSizeS   //TODO change to NeptuneStyle when that one has a correct value
             //TODO make it a button that takes the user to fullscreen with the favorites page.
         }
     }
diff --git a/apps/com.pelagicore.phone/views/PhoneView.qml b/apps/com.pelagicore.phone/views/PhoneView.qml
index 4259e414..f455ffab 100644
--- a/apps/com.pelagicore.phone/views/PhoneView.qml
+++ b/apps/com.pelagicore.phone/views/PhoneView.qml
@@ -75,7 +75,7 @@ Item {
     FavoritesWidgetView {
         id: favoritesWidget
         anchors.horizontalCenter: parent.horizontalCenter
-        width: Style.hspan(960/45)
+        width: NeptuneStyle.dp(960)
         anchors.top: parent.top
         state: root.state
 
@@ -91,7 +91,7 @@ Item {
         id: callWidget
         anchors.fill: root.state === "Widget1Row" ? parent : undefined
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.rightMargin: Style.hspan(0.9)
+        anchors.rightMargin: NeptuneStyle.dp(45 * 0.9)
         state: root.state
         store: root.store
         ongoingCall: root.store.ongoingCall
@@ -109,12 +109,12 @@ Item {
     Item {
         id: fullscreenBottom
 
-        width: Style.hspan(1080/45)
+        width: NeptuneStyle.dp(1080)
         anchors.left: parent.left
-        anchors.leftMargin: root.state === "Maximized" ? 0 : -80
+        anchors.leftMargin: root.state === "Maximized" ? 0 : NeptuneStyle.dp(-80)
         Behavior on anchors.leftMargin { DefaultSmoothedAnimation {} }
         anchors.top: parent.top
-        anchors.topMargin: 660 - 224
+        anchors.topMargin: NeptuneStyle.dp(660 - 224)
         anchors.bottom: parent.bottom
 
 
@@ -128,13 +128,13 @@ Item {
             anchors.left: parent.left
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            width: Style.hspan(264/45)
+            width: NeptuneStyle.dp(264)
 
             ToolsColumn {
                 id: toolsColumnComponent
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
-                anchors.topMargin: Style.vspan(53/80)
+                anchors.topMargin: NeptuneStyle.dp(53)
 
                 translationContext: "PhoneToolsColumn"
                 model: ListModel {
@@ -170,9 +170,9 @@ Item {
             id: stackView
             anchors.left: toolsColumn.right
             anchors.top: parent.top
-            anchors.topMargin: Style.vspan(53/80)
+            anchors.topMargin: NeptuneStyle.dp(53)
             anchors.bottom: parent.bottom
-            width: Style.hspan(720/45)
+            width: NeptuneStyle.dp(720)
             pushEnter: Transition {
                 PropertyAnimation {
                     property: "opacity"
@@ -208,4 +208,3 @@ Item {
         }
     }
 }
-
diff --git a/apps/com.pelagicore.phone/views/RecentCallsView.qml b/apps/com.pelagicore.phone/views/RecentCallsView.qml
index 6ac47191..2a68c088 100644
--- a/apps/com.pelagicore.phone/views/RecentCallsView.qml
+++ b/apps/com.pelagicore.phone/views/RecentCallsView.qml
@@ -55,11 +55,11 @@ ListView {
         width: ListView.view.width
         bottomPadding: 0
         contentItem: Column {
-            spacing: Style.vspan(.2)
+            spacing: NeptuneStyle.dp(16)
             RowLayout {
                 anchors.left: parent.left
                 anchors.right: parent.right
-                spacing: Style.hspan(.5)
+                spacing: NeptuneStyle.dp(45 * .5)
                 Tool {
                     symbol: model.type ? Style.symbol("ic-phone-%1".arg(model.type)) : ""
                 }
@@ -78,7 +78,7 @@ ListView {
             }
             Image {
                 width: parent.width
-                height: 2
+                height: NeptuneStyle.dp(2)
                 source: Style.gfx2("list-divider", NeptuneStyle.theme)
             }
         }