[musicapp] Make MusicApp support any pixel density

* Also replaced AbstractButton with Tool for play button
in MusicControls.qml so that the play/pause symbols
(and the background) are aligned with the sizes of the
other tools (next and previous)

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

11 files changed, 96 insertions, 109 deletions

diff --git a/apps/com.pelagicore.music/Main.qml b/apps/com.pelagicore.music/Main.qml
index 3f0adc82..128a9b1a 100644
--- a/apps/com.pelagicore.music/Main.qml
+++ b/apps/com.pelagicore.music/Main.qml
@@ -32,6 +32,7 @@
 import QtQuick 2.8
 import utils 1.0
 import animations 1.0
+import controls 1.0
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.2
 import "stores"
@@ -46,7 +47,7 @@ QtObject {
         MultiPointTouchArea {
             id: multiPoint
             anchors.fill: parent
-            anchors.margins: 30
+            anchors.margins: NeptuneStyle.dp(30)
             touchPoints: [ TouchPoint { id: touchPoint1 } ]
 
             property int count: 0
@@ -56,17 +57,14 @@ QtObject {
             }
         }
 
-        BorderImage {
+        ScalableBorderImage {
             id: topImage
 
             x: mainWindow.exposedRect.x
-            y: mainWindow.exposedRect.y - 224
+            y: mainWindow.exposedRect.y - NeptuneStyle.dp(224)
             width: mainWindow.exposedRect.width
             height: musicAppContent.fullscreenTopHeight + mainWindow.exposedRect.y - y
-            border.bottom: 0
-            border.top: sourceSize.height - 1
-            border.left: 0
-            border.right: 0
+            border.top: sourceSize.height - NeptuneStyle.dp(1)
 
             opacity: (mainWindow.neptuneState === "Maximized") ? 1.0 : 0.0
             Behavior on opacity { DefaultNumberAnimation {} }
diff --git a/apps/com.pelagicore.music/controls/MusicControls.qml b/apps/com.pelagicore.music/controls/MusicControls.qml
index 293eb96d..e02abea1 100644
--- a/apps/com.pelagicore.music/controls/MusicControls.qml
+++ b/apps/com.pelagicore.music/controls/MusicControls.qml
@@ -33,17 +33,16 @@ import QtQuick 2.8
 import utils 1.0
 import controls 1.0
 import QtQuick.Controls 2.2
-
+import com.pelagicore.styles.neptune 3.0
 
 Row {
     id: root
 
     width: 3 * buttonWidth
-    height: Style.vspan(3)
+    height: NeptuneStyle.dp(240)
 
     property bool play: false
-    property real spacing: 0    //not used
-    property real buttonWidth: Style.hspan(100/45)
+    property real buttonWidth: NeptuneStyle.dp(100)
     signal previousClicked()
     signal playClicked()
     signal nextClicked()
@@ -55,27 +54,18 @@ Row {
         onClicked: root.previousClicked()
     }
 
-    AbstractButton {
+    Tool {
         width: root.buttonWidth
         height: parent.height
-
-        onClicked: root.playClicked()
-
-        contentItem: Item {
-            anchors.fill: parent
-
-            Image {
-                anchors.centerIn: parent
-                source: Style.symbol("ic_button-bg")
-                fillMode: Image.Pad
-            }
-
-            Image {
-                anchors.centerIn: parent
-                source: root.play ? Style.symbol("ic-pause") : Style.symbol("ic_play")
-                fillMode: Image.Pad
-            }
+        background: Image {
+            anchors.centerIn: parent
+            width: NeptuneStyle.dp(sourceSize.width)
+            height: NeptuneStyle.dp(sourceSize.height)
+            source: Style.symbol("ic_button-bg")
+            fillMode: Image.PreserveAspectFit
         }
+        symbol: root.play ? Style.symbol("ic-pause") : Style.symbol("ic_play")
+        onClicked: root.playClicked()
     }
 
     Tool {
diff --git a/apps/com.pelagicore.music/controls/MusicProgress.qml b/apps/com.pelagicore.music/controls/MusicProgress.qml
index fbea4c24..571aa021 100644
--- a/apps/com.pelagicore.music/controls/MusicProgress.qml
+++ b/apps/com.pelagicore.music/controls/MusicProgress.qml
@@ -41,12 +41,12 @@ Control {
     property bool labelOnTop: true
     property string progressText: "0:0 / 0:0"
     property real value // 0 <= value <=1
-    property int progressBarLabelLeftMargin: Style.hspan(10/45)
+    property int progressBarLabelLeftMargin: NeptuneStyle.dp(10)
     property int progressBarWidth: {
         if (root.labelOnTop) {
-            return root.width - Style.hspan(6/45);
+            return root.width - NeptuneStyle.dp(6);
         } else {
-            return root.width - Style.hspan(5);
+            return root.width - NeptuneStyle.dp(5);
         }
     }
 
@@ -57,10 +57,10 @@ Control {
         Label {
             id: progressLabel
             anchors.top: parent.top
-            anchors.topMargin: root.labelOnTop ? Style.vspan(0.6) : 0
+            anchors.topMargin: root.labelOnTop ? NeptuneStyle.dp(48) : 0
             anchors.left: parent.left
             anchors.leftMargin: root.progressBarLabelLeftMargin
-            font.pixelSize: 22 //Todo: Change to NeptuneStyle.fontSizeS when that value is corrected
+            font.pixelSize: NeptuneStyle.fontSizeS
             font.weight: Font.Light
             text: root.progressText
             opacity: NeptuneStyle.fontOpacityMedium
@@ -69,13 +69,13 @@ Control {
         Slider {
             id: trackProgressBar
             implicitWidth: root.progressBarWidth
-            implicitHeight: Style.vspan(0.5)
+            implicitHeight: NeptuneStyle.dp(40)
             anchors.centerIn: parent
-            anchors.verticalCenterOffset: Style.vspan(-24/80)
-            anchors.horizontalCenterOffset: root.labelOnTop ? 0 : Style.hspan(2)
+            anchors.verticalCenterOffset: NeptuneStyle.dp(-24)
+            anchors.horizontalCenterOffset: root.labelOnTop ? 0 : NeptuneStyle.dp(90)
             value: root.value
 
-            padding: 2
+            padding: NeptuneStyle.dp(2)
 
             onValueChanged: {
                 if (trackProgressBar.pressed) {
@@ -89,7 +89,7 @@ Control {
                 x: trackProgressBar.leftPadding
                 y: trackProgressBar.topPadding + trackProgressBar.availableHeight / 2 - height / 2
                 implicitWidth: root.progressBarWidth
-                implicitHeight: Style.hspan(0.02)
+                implicitHeight: NeptuneStyle.dp(0.9)
                 width: trackProgressBar.availableWidth
                 height: implicitHeight
                 color: "#828282"
@@ -97,7 +97,7 @@ Control {
 
                 Rectangle {
                     width: trackProgressBar.visualPosition * parent.width
-                    height: Style.hspan(0.15)
+                    height: NeptuneStyle.dp(6.75)
                     anchors.verticalCenter: parent.verticalCenter
                     radius: height
                     color: NeptuneStyle.accentColor
diff --git a/apps/com.pelagicore.music/controls/TitleColumn.qml b/apps/com.pelagicore.music/controls/TitleColumn.qml
index 9e189bb2..b74eefa5 100644
--- a/apps/com.pelagicore.music/controls/TitleColumn.qml
+++ b/apps/com.pelagicore.music/controls/TitleColumn.qml
@@ -38,9 +38,9 @@ import com.pelagicore.styles.neptune 3.0
 
 ColumnLayout {
     id: root
-    spacing: 15
+    spacing: NeptuneStyle.dp(15)
 
-    property int preferredWidth: Style.vspan(3)
+    property int preferredWidth: NeptuneStyle.dp(240)
     property alias currentSongTitle: songTitle.text
     property alias currentArtisName: artistName.text
 
diff --git a/apps/com.pelagicore.music/panels/AlbumArtPanel.qml b/apps/com.pelagicore.music/panels/AlbumArtPanel.qml
index c2db49db..2fe1f505 100644
--- a/apps/com.pelagicore.music/panels/AlbumArtPanel.qml
+++ b/apps/com.pelagicore.music/panels/AlbumArtPanel.qml
@@ -33,6 +33,7 @@ import QtQuick 2.8
 import QtQuick.Controls 2.2
 import utils 1.0
 import animations 1.0
+import com.pelagicore.styles.neptune 3.0
 
 import "../controls"
 
@@ -67,7 +68,7 @@ Item {
 
         Item {
             id: itemDelegated
-            height: Style.vspan(4)
+            height: NeptuneStyle.dp(180)
             width: height
 
             layer.enabled: true
@@ -88,7 +89,7 @@ Item {
                 opacity: (mediaReady && model.item.coverArtUrl) ? 1.0 : 0.0
                 Behavior on opacity {DefaultNumberAnimation {}}
                 anchors.centerIn: parent
-                width: Style.hspan(180/45)
+                width: NeptuneStyle.dp(180)
                 height: width
                 source: Style.gfx2("album-art-placeholder")
 
@@ -102,7 +103,7 @@ Item {
                 opacity: (mediaReady && model.item.coverArtUrl) ? 1.0 : 0.0
                 Behavior on opacity {DefaultNumberAnimation {}}
                 anchors.centerIn: parent
-                width: Style.hspan(180/45)
+                width: NeptuneStyle.dp(180)
                 height: width
                 source: model.item.coverArtUrl !== undefined ? model.item.coverArtUrl : ""
 
@@ -120,7 +121,7 @@ Item {
             width: height
             height: parent.height
             anchors.left: parent.left
-            anchors.leftMargin: parentStateMaximized ? 100 : 40
+            anchors.leftMargin: parentStateMaximized ? NeptuneStyle.dp(100) : NeptuneStyle.dp(40)
             Behavior on anchors.leftMargin { DefaultNumberAnimation { } }
             preferredHighlightBegin: 0.5
             preferredHighlightEnd: 0.5
@@ -158,7 +159,7 @@ Item {
 
         Item {
             id: searchingMedia
-            width: Style.hspan(180/45)
+            width: NeptuneStyle.dp(180)
             height: width
             opacity: root.mediaReady ? 0.0 : 1.0
             Behavior on opacity { DefaultNumberAnimation {} }
@@ -169,27 +170,27 @@ Item {
                 anchors.centerIn: parent
                 visible: parent.visible
                 running: visible
-                width: 60
-                height: 60
+                width: NeptuneStyle.dp(60)
+                height: NeptuneStyle.dp(60)
             }
         }
 
         TitleColumn {
             id: titleColumn
             anchors.left: coverslide.right
-            anchors.leftMargin: Style.hspan(100/45)
+            anchors.leftMargin: NeptuneStyle.dp(100)
             anchors.right: controlsRow.left
-            anchors.rightMargin: Style.hspan(20/45)
+            anchors.rightMargin: NeptuneStyle.dp(20)
             anchors.verticalCenter: parent.verticalCenter
-            anchors.verticalCenterOffset: Style.vspan(-4/80)
-            preferredWidth: Style.vspan(6)
+            anchors.verticalCenterOffset: NeptuneStyle.dp(-4)
+            preferredWidth: NeptuneStyle.dp(480)
         }
 
         MusicControls {
             id: controlsRow
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: parentStateMaximized ? Style.hspan(100/45) : Style.hspan(28/45)
+            anchors.rightMargin: parentStateMaximized ? NeptuneStyle.dp(100) : NeptuneStyle.dp(28)
             Behavior on anchors.rightMargin { DefaultNumberAnimation { } }
             play: root.musicPlaying
             onPreviousClicked: {
diff --git a/apps/com.pelagicore.music/panels/ICAlbumArtPanel.qml b/apps/com.pelagicore.music/panels/ICAlbumArtPanel.qml
index 56d7e3df..e5a5cb9a 100644
--- a/apps/com.pelagicore.music/panels/ICAlbumArtPanel.qml
+++ b/apps/com.pelagicore.music/panels/ICAlbumArtPanel.qml
@@ -31,6 +31,7 @@
 
 import QtQuick 2.8
 import utils 1.0
+import com.pelagicore.styles.neptune 3.0
 
 import "../controls"
 
@@ -65,7 +66,7 @@ Item {
 
         Item {
             id: itemDelegated
-            height: 320
+            height: NeptuneStyle.dp(320)
             width: height
             layer.enabled: true
             opacity: PathView.iconOpacity !== undefined ? PathView.iconOpacity : 0.0
@@ -91,7 +92,7 @@ Item {
             Image {
                 id: albumArt
                 anchors.centerIn: parent
-                width: 180
+                width: NeptuneStyle.dp(180)
                 height: width
                 source: model.item !== undefined ? model.item.coverArtUrl : ""
                 fillMode: Image.PreserveAspectCrop
@@ -104,7 +105,7 @@ Item {
         id: pathView
 
         width: root.width
-        height: 180
+        height: NeptuneStyle.dp(180)
         anchors.top: parent.top
 
         PathView {
@@ -147,10 +148,10 @@ Item {
     MusicProgress {
         id: musicProgress
         width: root.width
-        height: 220
+        height: NeptuneStyle.dp(220)
         anchors.top: pathView.bottom
-        anchors.leftMargin: 40
-        anchors.rightMargin: 40
+        anchors.leftMargin: NeptuneStyle.dp(40)
+        anchors.rightMargin: NeptuneStyle.dp(40)
         value: root.musicPosition
         progressBarLabelLeftMargin: 3
     }
@@ -158,10 +159,8 @@ Item {
     TitleColumn {
         id: titleColumn
         anchors.left: parent.left
-        anchors.leftMargin: 0
         anchors.right: parent.right
-        anchors.rightMargin: 0
         anchors.top: musicProgress.bottom
-        anchors.topMargin: -80
+        anchors.topMargin: NeptuneStyle.dp(-80)
     }
 }
diff --git a/apps/com.pelagicore.music/panels/MusicBrowseListPanel.qml b/apps/com.pelagicore.music/panels/MusicBrowseListPanel.qml
index 107f3385..ee53fe02 100644
--- a/apps/com.pelagicore.music/panels/MusicBrowseListPanel.qml
+++ b/apps/com.pelagicore.music/panels/MusicBrowseListPanel.qml
@@ -62,7 +62,7 @@ Control {
             ListItem {
                 id: delegatedSong
                 width: listView.width
-                height: Style.vspan(1.3)
+                height: NeptuneStyle.dp(104)
                 imageSource: {
                     if ((actualContentType === "album") && (toolsColumnText === "artists") && model.item) {
                         if (model.item.data.coverArtUrl !==  undefined) {
@@ -99,17 +99,17 @@ Control {
         Item {
             id: listHeader
             anchors.top:parent.top
-            anchors.topMargin: Style.vspan(53/80)
+            anchors.topMargin:NeptuneStyle.dp(53)
             anchors.left: parent.left
             opacity: visible ? 1.0 : 0.0
-            width: visible ? Style.hspan(720/45) : 0
-            height: visible ? Style.vspan(94/80) : 0
+            width: visible ? NeptuneStyle.dp(720) : 0
+            height: visible ? NeptuneStyle.dp(94) : 0
             visible: ((toolsColumnText.indexOf(actualContentType) === -1) && (toolsColumnText !== "favorites"))
 
             Tool {
                 id: backButton
                 anchors.left: parent.left
-                anchors.leftMargin: Style.hspan(0.3)
+                anchors.leftMargin: NeptuneStyle.dp(13.5)
                 anchors.verticalCenter: parent.verticalCenter
                 symbol: Style.symbol("ic_back")
                 onClicked: root.backClicked()
@@ -121,10 +121,10 @@ Control {
                 horizontalAlignment: Text.AlignHCenter
             }
             Tool {
-                width: Style.hspan(2.7)
-                height: Style.vspan(0.6)
+                width: NeptuneStyle.dp(121.5)
+                height: NeptuneStyle.dp(48)
                 anchors.right: parent.right
-                anchors.rightMargin: Style.hspan(0.3)
+                anchors.rightMargin: NeptuneStyle.dp(13.5)
                 anchors.verticalCenter: parent.verticalCenter
                 // Check if contentType has unique id (so is > 5) when in albums view.
                 // This means that the albums of a specific artist are displayed
@@ -143,7 +143,7 @@ Control {
 
             Rectangle {
                 width: parent.width
-                height: 1
+                height: NeptuneStyle.dp(1)
                 anchors.bottom: parent.bottom
                 color: "grey"   //todo: change to #contrast 60%
             }
@@ -152,7 +152,7 @@ Control {
         ListView {
             id: listView
             anchors.top:parent.top
-            anchors.topMargin: Style.vspan(53/80) + listHeader.height
+            anchors.topMargin: NeptuneStyle.dp(53) + listHeader.height
             anchors.bottom: parent.bottom
             anchors.left: parent.left
             width: Style.hspan(720/45)
@@ -163,7 +163,7 @@ Control {
                 parent: listView.parent
                 anchors.top: listView.top
                 anchors.left: listView.right
-                anchors.leftMargin: Style.hspan(1)
+                anchors.leftMargin: NeptuneStyle.dp(45)
                 anchors.bottom: listView.bottom
             }
         }
diff --git a/apps/com.pelagicore.music/views/FullScreenTopView.qml b/apps/com.pelagicore.music/views/FullScreenTopView.qml
index 79e0f23c..ceec95a7 100644
--- a/apps/com.pelagicore.music/views/FullScreenTopView.qml
+++ b/apps/com.pelagicore.music/views/FullScreenTopView.qml
@@ -46,17 +46,17 @@ Item {
 
     ToolButton {
         id: showPlayingQueueButton
-        width: contentItem.childrenRect.width + Style.hspan(1)
-        height: Style.hspan(0.5)
+        width: contentItem.childrenRect.width + NeptuneStyle.dp(45)
+        height: NeptuneStyle.dp(22.5)
         anchors.verticalCenter: parent.top
-        anchors.verticalCenterOffset: Style.vspan(370/80)
+        anchors.verticalCenterOffset: NeptuneStyle.dp(370)
         anchors.horizontalCenter: parent.horizontalCenter
 
         enabled: !root.topExpanded
         onClicked: { root.topExpanded = true; }
 
         contentItem: Row {
-            spacing: Style.hspan(10/45)
+            spacing: NeptuneStyle.dp(10)
             Label {
                 font.pixelSize: NeptuneStyle.fontSizeS
                 font.capitalization: Font.AllUppercase
@@ -75,12 +75,12 @@ Item {
     MusicPlayQueuePanel {
         id: playingQueueList    //playing queue
         anchors.top: parent.top
-        anchors.topMargin: 660 - 224
+        anchors.topMargin: NeptuneStyle.dp(660) - NeptuneStyle.dp(224)
         anchors.bottom: parent.bottom
         anchors.left: parent.left
-        anchors.leftMargin: 100
+        anchors.leftMargin: NeptuneStyle.dp(100)
         anchors.right: parent.right
-        anchors.rightMargin: 100
+        anchors.rightMargin: NeptuneStyle.dp(100)
         listView.model: store.musicPlaylist
         onItemClicked: {
             store.musicPlaylist.currentIndex = index;
@@ -90,10 +90,10 @@ Item {
 
     ToolButton {
         id: showNormalBrowseViewButton
-        width: contentItem.childrenRect.width + Style.hspan(1)
-        height: Style.hspan(0.5)
+        width: contentItem.childrenRect.width + NeptuneStyle.dp(45)
+        height: NeptuneStyle.dp(22.5)
         anchors.verticalCenter: parent.bottom
-        anchors.verticalCenterOffset: Style.vspan(44/80)
+        anchors.verticalCenterOffset: NeptuneStyle.dp(44)
         anchors.horizontalCenter: parent.horizontalCenter
         opacity: root.topExpanded ? 1.0 : 0.0
         Behavior on opacity {
@@ -107,7 +107,7 @@ Item {
         onClicked: { root.topExpanded = false; }
 
         contentItem: Row {
-            spacing: Style.hspan(10/45)
+            spacing: NeptuneStyle.dp(10)
             Label {
                 font.pixelSize: 22 //todo: change to NeptuneStyle.fontSizeS when the value is corrected in style plugin
                 font.capitalization: Font.AllUppercase
diff --git a/apps/com.pelagicore.music/views/ICMusicView.qml b/apps/com.pelagicore.music/views/ICMusicView.qml
index 0af4c550..7ad00b70 100644
--- a/apps/com.pelagicore.music/views/ICMusicView.qml
+++ b/apps/com.pelagicore.music/views/ICMusicView.qml
@@ -48,10 +48,10 @@ Item {
 
     ICAlbumArtPanel {
         id: albumArt
-        width: 540
-        height: 464
+        width: NeptuneStyle.dp(540)
+        height: NeptuneStyle.dp(464)
         anchors.centerIn: parent
-        anchors.verticalCenterOffset: 50
+        anchors.verticalCenterOffset: NeptuneStyle.dp(50)
         musicPlaying: root.store.playing
         musicPosition: root.store.currentTrackPosition
         mediaReady: root.store.searchAndBrowseModel.count > 0
diff --git a/apps/com.pelagicore.music/views/MusicView.qml b/apps/com.pelagicore.music/views/MusicView.qml
index 40b884d1..96ecbc99 100644
--- a/apps/com.pelagicore.music/views/MusicView.qml
+++ b/apps/com.pelagicore.music/views/MusicView.qml
@@ -58,7 +58,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
-        height: 260
+        height: NeptuneStyle.dp(260)
         state: root.state
         store: root.store
         onFlickableAreaClicked: { root.flickableAreaClicked(); }
@@ -69,7 +69,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
-        height: topExpanded ? (root.height - 100) : (660 - 224)
+        height: topExpanded ? (root.height - NeptuneStyle.dp(100)) : (NeptuneStyle.dp(660 - 224))
         Behavior on height { DefaultNumberAnimation { duration: 270 } }
         opacity: root.state === "Maximized" ? 1.0 : 0.0
         Behavior on opacity { DefaultNumberAnimation {} }
@@ -79,7 +79,7 @@ Item {
 
     FullScreenBottomView {
         id: fullscreenBottom
-        width: Style.hspan(1080/45)
+        width: NeptuneStyle.dp(1080)
         anchors.left: parent.left
         anchors.leftMargin: root.state === "Maximized" ? 0 : -80
         Behavior on anchors.leftMargin { DefaultNumberAnimation {} }
diff --git a/apps/com.pelagicore.music/views/WidgetContentView.qml b/apps/com.pelagicore.music/views/WidgetContentView.qml
index 0ce599f4..b71d4119 100644
--- a/apps/com.pelagicore.music/views/WidgetContentView.qml
+++ b/apps/com.pelagicore.music/views/WidgetContentView.qml
@@ -67,13 +67,13 @@ Item {
 
             Item { //spacer
                 width: nextListFlickable.width
-                height: 430
+                height: NeptuneStyle.dp(430)
             }
 
             MusicPlayQueuePanel { //playing queue
                 id: nextList
                 width: nextListFlickable.width
-                height: (listView.count * Style.vspan(1.3))
+                height: (listView.count * NeptuneStyle.dp(104))
                 listView.model: store.musicPlaylist
                 listView.interactive: false
                 onItemClicked: {
@@ -84,14 +84,14 @@ Item {
 
             Item { //spacer
                 width: nextListFlickable.width
-                height: 20
+                height: NeptuneStyle.dp(20)
             }
         }
     }
 
     Rectangle {
         id: artAndTitleBackground
-        height: 260
+        height: NeptuneStyle.dp(260)
         width: parent.width
         color: NeptuneStyle.offMainColor
         MouseArea {
@@ -117,7 +117,7 @@ Item {
 
     AlbumArtPanel {
         id: artAndTitlesBlock
-        height: 180
+        height: NeptuneStyle.dp(180)
         width: parent.width
         anchors.verticalCenter: parent.verticalCenter
         anchors.verticalCenterOffset: 0
@@ -139,13 +139,12 @@ Item {
 
     MusicProgress {
         id: progressBarBlock
-        //TODO use Style.hspan and Style.vspan instead
-        width: 880
-        height: 220
+        width: NeptuneStyle.dp(880)
+        height: NeptuneStyle.dp(220)
 
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
-        anchors.verticalCenterOffset: 200
+        anchors.verticalCenterOffset: NeptuneStyle.dp(200)
 
         opacity: 0
         visible: opacity > 0
@@ -169,28 +168,28 @@ Item {
         },
         State {
             name: "Widget2Rows"
-            PropertyChanges { target: root; height: 550 }
-            PropertyChanges { target: artAndTitlesBlock; anchors.verticalCenterOffset: - 62 }
-            PropertyChanges { target: progressBarBlock; anchors.verticalCenterOffset: 138 }
+            PropertyChanges { target: root; height: NeptuneStyle.dp(550) }
+            PropertyChanges { target: artAndTitlesBlock; anchors.verticalCenterOffset: NeptuneStyle.dp(-62) }
+            PropertyChanges { target: progressBarBlock; anchors.verticalCenterOffset: NeptuneStyle.dp(138) }
             PropertyChanges { target: progressBarBlock; opacity: 1 }
             PropertyChanges { target: musicTools; opacity: 1 }
         },
         State {
             name: "Widget3Rows"
-            PropertyChanges { target: root; height: 840 }
+            PropertyChanges { target: root; height: NeptuneStyle.dp(840) }
             PropertyChanges { target: nextListFlickable; opacity: 1 }
-            PropertyChanges { target: artAndTitlesBlock; anchors.verticalCenterOffset: - 271 - Math.min(20, nextListFlickable.contentY / 6) }
-            PropertyChanges { target: progressBarBlock; anchors.verticalCenterOffset: -71 - Math.min(60, nextListFlickable.contentY / 2) }
+            PropertyChanges { target: artAndTitlesBlock; anchors.verticalCenterOffset: NeptuneStyle.dp(-271) - Math.min(NeptuneStyle.dp(20), nextListFlickable.contentY / 6) }
+            PropertyChanges { target: progressBarBlock; anchors.verticalCenterOffset: NeptuneStyle.dp(-71) - Math.min(NeptuneStyle.dp(60), nextListFlickable.contentY / 2) }
             PropertyChanges { target: progressBarBlock; opacity: 1 - Math.max(0, Math.min(1, nextListFlickable.contentY / 140)) }
             PropertyChanges { target: musicTools; opacity: 1 - Math.max(0, Math.min(1, nextListFlickable.contentY / 140))}
             PropertyChanges { target: nextListShadow; opacity: 0 + Math.max(0, Math.min(1, nextListFlickable.contentY / 140))}
         },
         State {
             name: "Maximized"
-            PropertyChanges { target: root; height: 660 - 224 }
+            PropertyChanges { target: root; height: NeptuneStyle.dp(660) - NeptuneStyle.dp(224) }
             PropertyChanges { target: artAndTitleBackground; opacity: 0 }   //todo: do something else here because it is blocking the gray background.
-            PropertyChanges { target: artAndTitlesBlock; anchors.verticalCenterOffset: -110 }
-            PropertyChanges { target: progressBarBlock; anchors.verticalCenterOffset: 90 }
+            PropertyChanges { target: artAndTitlesBlock; anchors.verticalCenterOffset: NeptuneStyle.dp(-110) }
+            PropertyChanges { target: progressBarBlock; anchors.verticalCenterOffset: NeptuneStyle.dp(90) }
             PropertyChanges { target: progressBarBlock; opacity: 1 }
             PropertyChanges { target: musicTools; opacity: 1 }
         }