styled progress bar; moved to correct position

still todo: show time and lenght as formatted number
refactor MusicPlayer.qml into components

LenaPi/MusicPlayer.qml

@@ -40,37 +40,6 @@ Item{
         }
     }
 
-    ProgressBar{
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.margins: container.margins
-        /*anchors.bottom: buttons.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.leftMargin: 40
-        anchors.rightMargin: 40
-        anchors.topMargin: 10
-        anchors.bottomMargin: 10
-        */
-        z:99
-
-        value: musicModel.pProgress
-        style:ProgressBarStyle {
-            background: Rectangle {
-                radius: 2
-                color: "magenta"
-                border.color: "gray"
-                border.width: 1
-                implicitWidth: 200
-                implicitHeight: 24
-            }
-            progress: Rectangle {
-                color: "lightsteelblue"
-                border.color: "steelblue"
-            }
-        }
-    }
-
     Rectangle {
         id: controlPannel
 
@@ -78,9 +47,40 @@ Item{
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         color: "#99ffffff"
-        height: 120
+        height: 140
 
 
+        ProgressBar{
+            id: progress
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.margins: container.margins
+
+            value: musicModel.pProgress
+
+            style:ProgressBarStyle {
+                background: Rectangle {
+                    radius: 5
+                    color: "lightgrey"
+                    border.color: "grey"
+                    border.width: 1
+                    implicitWidth: controlPannel.width - 2*container.margins
+                    implicitHeight: 10
+                }
+                progress: Rectangle {
+                    color: "blue"
+                    border.color: "blue"
+                    radius: 5
+                    implicitHeight: 8
+                }
+            }
+        }
+
+        Item{
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: progress.bottom
+            anchors.bottom: parent.bottom
             Row{
                 id: buttons
                 spacing: 20
@@ -135,6 +135,7 @@ Item{
                         musicModel.playNext();
                     }
                 }
-        }
+            } //Row
+        }// Item
     }
 }

LenaPi/models/MusicModel.cpp

@@ -62,13 +62,16 @@ void MusicModel::stopMusic()
 {
     if(mIsPlaying){
         mIsPlaying = false;
+        emit isPlayingChanged();
+
         mHasNext = false;
         mHasPrevious = false;
-        mCurrentMediaItemProgress = 0.0;
-        emit progressChanged();
         emit hasNextChanged();
         emit hasPreviousChanged();
-        emit isPlayingChanged();
+
+        mCurrentMediaItemProgress = 0.0;
+        emit progressChanged();
+
         emit stop();
     }
 }