[calendar] Replace deprecated Style.*span() with NeptuneStyle.dp()

 - Replace the deprecated Style.*span() functions with the new
   NeptuneStyle.dp() in The Calendar application

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

8 files changed, 62 insertions, 60 deletions

diff --git a/apps/com.pelagicore.calendar/controls/EventList.qml b/apps/com.pelagicore.calendar/controls/EventList.qml
index dc87b3cb..3d641307 100644
--- a/apps/com.pelagicore.calendar/controls/EventList.qml
+++ b/apps/com.pelagicore.calendar/controls/EventList.qml
@@ -34,12 +34,14 @@ import QtQuick.Controls 2.2
 import utils 1.0
 import controls 1.0
 
+import com.pelagicore.styles.neptune 3.0
+
 ListView {
     id: root
 
     delegate: EventListItem {
-        width: Style.hspan(15)
-        height: Style.vspan(1)
+        width: NeptuneStyle.dp(675)
+        height: NeptuneStyle.dp(80)
         eventTimeStart: timeStart
         eventTimeEnd: timeEnd
         eventLabel: event
@@ -48,7 +50,7 @@ ListView {
         parent: root.parent
         anchors.top: root.top
         anchors.left: root.right
-        anchors.leftMargin: Style.hspan(0.5)
+        anchors.leftMargin: NeptuneStyle.dp(23)
         anchors.bottom: root.bottom
     }
 }
diff --git a/apps/com.pelagicore.calendar/controls/EventListItem.qml b/apps/com.pelagicore.calendar/controls/EventListItem.qml
index ff607aac..bd3be913 100644
--- a/apps/com.pelagicore.calendar/controls/EventListItem.qml
+++ b/apps/com.pelagicore.calendar/controls/EventListItem.qml
@@ -51,11 +51,11 @@ ItemDelegate {
         RowLayout {
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            anchors.leftMargin: Style.hspan(1)
-            spacing: Style.hspan(1)
+            anchors.leftMargin: NeptuneStyle.dp(45)
+            spacing: NeptuneStyle.dp(45)
 
             ColumnLayout {
-                Layout.preferredWidth: Style.hspan(1)
+                Layout.preferredWidth: NeptuneStyle.dp(45)
                 Label {
                     text: root.eventTimeStart
                     font.pixelSize: NeptuneStyle.fontSizeXS
diff --git a/apps/com.pelagicore.calendar/controls/WeatherWidget.qml b/apps/com.pelagicore.calendar/controls/WeatherWidget.qml
index d31be289..e18cb41a 100644
--- a/apps/com.pelagicore.calendar/controls/WeatherWidget.qml
+++ b/apps/com.pelagicore.calendar/controls/WeatherWidget.qml
@@ -53,9 +53,9 @@ Item {
     Image {
         id: imgWeather
         anchors.verticalCenter: parent.top
-        anchors.verticalCenterOffset: Style.vspan(66/80)//Style.vspan(66/80)
+        anchors.verticalCenterOffset: NeptuneStyle.dp(66)
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.horizontalCenterOffset: Style.hspan(-61/45)
+        anchors.horizontalCenterOffset: NeptuneStyle.dp(-61)
         fillMode: Image.Pad
     }
 
@@ -64,11 +64,11 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
-        anchors.topMargin: Style.vspan(120/80)//Style.vspan(140/80)
+        anchors.topMargin: NeptuneStyle.dp(120)
 
         Label {
             id: temperatureLabel
-            height: Style.vspan(33/80)
+            height: NeptuneStyle.dp(33)
             anchors.left: parent.left
             anchors.right: parent.right
             font.pixelSize: NeptuneStyle.fontSizeS
@@ -79,7 +79,7 @@ Item {
         }
         Label {
             id: weatherLabel
-            height: Style.vspan(33/80)
+            height: NeptuneStyle.dp(33)
             anchors.left: parent.left
             anchors.right: parent.right
             font.pixelSize: NeptuneStyle.fontSizeS //Todo: font size in the plugin is not correct.
@@ -101,9 +101,9 @@ Item {
 
             Label {
                 id: precipitationText
-                height: Style.vspan(33/80)
+                height: NeptuneStyle.dp(33)
                 anchors.left: precipitationIcon.right
-                anchors.leftMargin: Style.hspan(13/45)
+                anchors.leftMargin: NeptuneStyle.dp(13)
                 anchors.right: parent.right
                 font.pixelSize: NeptuneStyle.fontSizeS
                 font.weight: Font.Light
diff --git a/apps/com.pelagicore.calendar/panels/CalendarGridPanel.qml b/apps/com.pelagicore.calendar/panels/CalendarGridPanel.qml
index 8d455f13..7a6f2b03 100644
--- a/apps/com.pelagicore.calendar/panels/CalendarGridPanel.qml
+++ b/apps/com.pelagicore.calendar/panels/CalendarGridPanel.qml
@@ -42,12 +42,12 @@ Item {
     Component {
         id: delegatedCalendar
         Item {
-            width: Style.hspan(7)
-            height: Style.vspan(3)
+            width: NeptuneStyle.dp(315)
+            height: NeptuneStyle.dp(240)
             ColumnLayout {
 
                 Label {
-                    Layout.preferredWidth: Style.hspan(6)
+                    Layout.preferredWidth: NeptuneStyle.dp(270)
                     text: Qt.locale().standaloneMonthName(index) + " " + grid.year
                     horizontalAlignment: Text.AlignHCenter
                     font.pixelSize: NeptuneStyle.fontSizeS
@@ -96,8 +96,8 @@ Item {
         clip: true
         model: 12
         delegate: delegatedCalendar
-        cellWidth: Style.hspan(7)
-        cellHeight: Style.vspan(3)
+        cellWidth: NeptuneStyle.dp(315)
+        cellHeight: NeptuneStyle.dp(240)
         ScrollIndicator.vertical: ScrollIndicator {
             parent: gridView.parent
             anchors.top: gridView.top
diff --git a/apps/com.pelagicore.calendar/panels/CalendarWidgetPanel.qml b/apps/com.pelagicore.calendar/panels/CalendarWidgetPanel.qml
index 53af10ae..a403b1d8 100644
--- a/apps/com.pelagicore.calendar/panels/CalendarWidgetPanel.qml
+++ b/apps/com.pelagicore.calendar/panels/CalendarWidgetPanel.qml
@@ -107,14 +107,14 @@ Item {
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.left: parent.left
-            anchors.leftMargin: Style.hspan(1)
+            anchors.leftMargin: NeptuneStyle.dp(45)
             anchors.right: parent.right
-            anchors.rightMargin: Style.hspan(30/45)
+            anchors.rightMargin: NeptuneStyle.dp(30)
 
             Label {
                 id: firstRowOfText
                 anchors.baseline: parent.top
-                anchors.baselineOffset: Style.vspan(87/80)
+                anchors.baselineOffset: NeptuneStyle.dp(87)
                 anchors.left: parent.left
                 anchors.right: parent.right
                 elide: Text.ElideRight
@@ -124,7 +124,7 @@ Item {
 
             Label {
                 anchors.baseline: parent.top
-                anchors.baselineOffset: Style.vspan(120/80)
+                anchors.baselineOffset: NeptuneStyle.dp(120)
                 anchors.left: parent.left
                 anchors.right: parent.right
                 elide: Text.ElideRight
@@ -136,9 +136,9 @@ Item {
             WeatherWidget {
                 // weather info when in left area (size 2 & 3)
                 anchors.top: parent.top
-                anchors.topMargin: Style.vspan(252/80)
+                anchors.topMargin: NeptuneStyle.dp(252)
                 anchors.left: parent.left
-                width: Style.hspan(175/45)
+                width: NeptuneStyle.dp(175)
 
                 opacity: calendarEvents.isMultiLineWidget ? 1 : 0
                 Behavior on opacity { DefaultNumberAnimation { } }
@@ -161,10 +161,10 @@ Item {
         //weather info when in right area (size 1)
         id: weatherColumn
         anchors.left: leftColoredArea.right
-        anchors.leftMargin: Style.hspan(59/45)
-        width: Style.hspan(175/45)
+        anchors.leftMargin: NeptuneStyle.dp(59)
+        width: NeptuneStyle.dp(175)
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: Style.vspan(1)
+        anchors.bottomMargin: NeptuneStyle.dp(80)
         opacity: !calendarEvents.isMultiLineWidget
         Behavior on opacity { DefaultNumberAnimation { } }
         visible: opacity > 0
@@ -183,17 +183,17 @@ Item {
     Item {
         id: calendarEvents
 
-        readonly property bool isMultiLineWidget: root.height > Style.hspan(6)
-        readonly property real rowHeight: Style.vspan(38/80)
+        readonly property bool isMultiLineWidget: root.height > NeptuneStyle.dp(270)
+        readonly property real rowHeight: NeptuneStyle.dp(38)
 
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: isMultiLineWidget ? Style.vspan(77/80) : Style.vspan(75/80)
+        anchors.bottomMargin: isMultiLineWidget ? NeptuneStyle.dp(77) : NeptuneStyle.dp(75)
         anchors.left: leftColoredArea.right
-        anchors.leftMargin: isMultiLineWidget ? Style.hspan(45/45) : Style.hspan(340/45)
+        anchors.leftMargin: isMultiLineWidget ? NeptuneStyle.dp(45) : NeptuneStyle.dp(340)
         anchors.right: parent.right
-        anchors.rightMargin: Style.hspan(45/45)
+        anchors.rightMargin: NeptuneStyle.dp(45)
 
-        readonly property real _height: root.height < Style.vspan(300/80) ? rowHeight : root.height < Style.vspan(680/80) ? parent.height - Style.vspan(2) : parent.height - weatherGraphPlaceholder.height - Style.vspan(1.6)
+        readonly property real _height: root.height < NeptuneStyle.dp(300) ? rowHeight : root.height < NeptuneStyle.dp(680) ? parent.height - NeptuneStyle.dp(160) : parent.height - weatherGraphPlaceholder.height - NeptuneStyle.dp(128)
         height: Math.min(eventList.count * rowHeight, _height - (_height % rowHeight))
 
         Behavior on anchors.bottomMargin { DefaultNumberAnimation {} }
@@ -207,7 +207,7 @@ Item {
             model: {
                 if (eventModel.count === 0) {
                     return 0
-                } else if (root.height < Style.vspan(300/80)) {
+                } else if (root.height < NeptuneStyle.dp(300)) {
                     return 1
                 } else {
                     return eventModel.count
@@ -222,8 +222,8 @@ Item {
                     id: eventTimeStart
                     anchors.left: parent.left
                     anchors.bottom: parent.bottom
-                    width: Style.hspan(68/45)
-                    height: Style.vspan(33/80)
+                    width: NeptuneStyle.dp(68)
+                    height: NeptuneStyle.dp(33)
                     horizontalAlignment: Text.AlignRight
                     opacity: NeptuneStyle.fontSizeS
                     font.pixelSize: NeptuneStyle.fontSizeS
@@ -234,8 +234,8 @@ Item {
                     id: eventName
                     anchors.right: parent.right
                     anchors.bottom: parent.bottom
-                    width: calendarEvents.width - eventTimeStart.width - Style.hspan(26/45)
-                    height: Style.vspan(33/80)
+                    width: calendarEvents.width - eventTimeStart.width - NeptuneStyle.dp(26)
+                    height: NeptuneStyle.dp(33)
                     font.pixelSize: NeptuneStyle.fontSizeS
                     font.weight: Font.Light
                     elide: Text.ElideRight
@@ -247,9 +247,9 @@ Item {
 
     Image {
         id: weatherGraphPlaceholder
-        readonly property bool graphActive: (root.height > (sourceSize.height + calendarEvents.height + Style.hspan(1))) && (root.state === "Widget3Rows")
+        readonly property bool graphActive: (root.height > (sourceSize.height + calendarEvents.height + NeptuneStyle.dp(45))) && (root.state === "Widget3Rows")
         anchors.top: parent.top
-        anchors.topMargin: graphActive ? 0 : -Style.vspan(0.5)
+        anchors.topMargin: graphActive ? 0 : -NeptuneStyle.dp(40)
         anchors.right: parent.right
         opacity: graphActive ? 1 : 0
         visible: opacity > 0
diff --git a/apps/com.pelagicore.calendar/panels/NextCalendarPanel.qml b/apps/com.pelagicore.calendar/panels/NextCalendarPanel.qml
index d4cd3512..016aa33f 100644
--- a/apps/com.pelagicore.calendar/panels/NextCalendarPanel.qml
+++ b/apps/com.pelagicore.calendar/panels/NextCalendarPanel.qml
@@ -46,11 +46,11 @@ Item {
     Component {
         id: delegatedCalendar
         Item {
-            width: Style.hspan(7)
-            height: Style.vspan(3)
+            width: NeptuneStyle.dp(315)
+            height: NeptuneStyle.dp(240)
             ColumnLayout {
                 Label {
-                    Layout.preferredWidth: Style.hspan(6)
+                    Layout.preferredWidth: NeptuneStyle.dp(270)
                     text: Qt.locale().standaloneMonthName(index) + " " + grid.year
                     horizontalAlignment: Text.AlignHCenter
                     font.pixelSize: NeptuneStyle.fontSizeS
@@ -95,14 +95,14 @@ Item {
         anchors.top: parent.top
         GridView {
             id: gridView
-            Layout.preferredWidth: Style.hspan(7)
+            Layout.preferredWidth: NeptuneStyle.dp(315)
             Layout.preferredHeight: root.height
             anchors.top: parent.top
             clip: true
             model: 12
             delegate: delegatedCalendar
-            cellWidth: Style.hspan(7)
-            cellHeight: Style.vspan(3)
+            cellWidth: NeptuneStyle.dp(315)
+            cellHeight: NeptuneStyle.dp(240)
             ScrollIndicator.vertical: ScrollIndicator {
                 parent: gridView.parent
                 anchors.top: gridView.top
@@ -113,12 +113,12 @@ Item {
 
         EventList {
             id: eventList
-            Layout.preferredWidth: Style.hspan(10)
+            Layout.preferredWidth: NeptuneStyle.dp(450)
             Layout.preferredHeight: root.height
             anchors.top: parent.top
             delegate: EventListItem {
-                width: Style.hspan(10)
-                height: Style.vspan(1)
+                width: NeptuneStyle.dp(450)
+                height: NeptuneStyle.dp(80)
                 eventTimeStart: timeStart
                 eventTimeEnd: timeEnd
                 eventLabel: event
diff --git a/apps/com.pelagicore.calendar/panels/TopCalendarPanel.qml b/apps/com.pelagicore.calendar/panels/TopCalendarPanel.qml
index daca51b1..346236bd 100644
--- a/apps/com.pelagicore.calendar/panels/TopCalendarPanel.qml
+++ b/apps/com.pelagicore.calendar/panels/TopCalendarPanel.qml
@@ -40,7 +40,7 @@ import com.pelagicore.styles.neptune 3.0
 RowLayout {
     id: root
 
-    spacing: Style.hspan(3)
+    spacing: NeptuneStyle.dp(135)
 
     ColumnLayout {
         DayOfWeekRow {
@@ -80,7 +80,7 @@ RowLayout {
 
     RowLayout {
         anchors.verticalCenter: parent.verticalCenter
-        anchors.verticalCenterOffset: - Style.vspan(0.5)
+        anchors.verticalCenterOffset: - NeptuneStyle.dp(45)
         Tool {
             anchors.verticalCenter: parent.verticalCenter
             symbol: Style.symbol("ic_skipprevious")
@@ -94,7 +94,7 @@ RowLayout {
             }
         }
         Label {
-            Layout.preferredWidth: Style.hspan(6)
+            Layout.preferredWidth: NeptuneStyle.dp(270)
             text: Qt.locale().standaloneMonthName(grid.month) + " " + grid.year
             horizontalAlignment: Text.AlignHCenter
             font.pixelSize: NeptuneStyle.fontSizeM
diff --git a/apps/com.pelagicore.calendar/views/CalendarView.qml b/apps/com.pelagicore.calendar/views/CalendarView.qml
index 7acf00f8..0306c28f 100644
--- a/apps/com.pelagicore.calendar/views/CalendarView.qml
+++ b/apps/com.pelagicore.calendar/views/CalendarView.qml
@@ -74,9 +74,9 @@ Item {
     TopCalendarPanel {
         id: calendarOnTop
         anchors.top: parent.top
-        anchors.topMargin: Style.vspan(1)
+        anchors.topMargin: NeptuneStyle.dp(80)
         anchors.left: parent.left
-        anchors.leftMargin: Style.hspan(3)
+        anchors.leftMargin: NeptuneStyle.dp(135)
         visible: root.state === "Maximized"
     }
 
@@ -85,13 +85,13 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: calendarOnTop.bottom
-        anchors.topMargin: Style.vspan(0.8)
+        anchors.topMargin: NeptuneStyle.dp(64)
         anchors.bottom: root.bottom
         visible: root.state === "Maximized"
 
         Item {
             anchors.left: parent.left
-            width: Style.hspan(264/45)
+            width: NeptuneStyle.dp(264)
             anchors.top: parent.top
             anchors.bottom: parent.bottom
 
@@ -99,7 +99,7 @@ Item {
                 id: toolsColumn
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
-                anchors.topMargin: Style.vspan(53/80)
+                anchors.topMargin: NeptuneStyle.dp(53)
 
                 translationContext: "CalendarToolsColumn"
                 model: ListModel {
@@ -113,11 +113,11 @@ Item {
 
         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