add close button

LenaPi/MusicPlayer.qml

@@ -16,6 +16,17 @@ Item{
         }
     }
 
+    RoundButton{
+        id: closeApp
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: container.margins
+        imageSource: "qrc:/icon_close"
+        onClicked: {
+            Qt.quit();
+        }
+    }
+
     Rectangle{
         id: coverBorder
         anchors.horizontalCenter: parent.horizontalCenter

LenaPi/Navigation.qml

@@ -4,18 +4,31 @@ import QtQuick 2.0
  * @brief Navigation view containing list view displaying artists or genres and albums
  */
 Item {
+    id: container
+    property int margins: 20
     RoundButton{
         id: back
 
         anchors.top: parent.top
         anchors.left: parent.left
-        anchors.margins: 20
+        anchors.margins: container.margins
 
         visible: navigationList.pIsBackVisible
 
         onClicked: navigationList.navigateBack();
     } // RoundButton: navigate back
 
+    RoundButton{
+        id: closeApp
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: container.margins
+        imageSource: "qrc:/icon_close"
+        onClicked: {
+            Qt.quit();
+        }
+    } // RoundButton: closeApp
+
     Rectangle{
         anchors.left: parent.left
         anchors.right: parent.right

LenaPi/RoundButton.qml

@@ -1,41 +1,40 @@
 import QtQuick 2.0
+import QtQuick.Controls 2.4
 
-Rectangle {
+/**
+ * @brief Round button containing an image
+ */
+Button {
     id: container
     property alias imageSource: image.source
-    signal clicked();
 
-    border.width: 2
-    border.color: "grey"
+    background: Rectangle{
 
-    color: "white"
+        border.width: 2
+        border.color: "grey"
 
-    width: 65
-    height: width
-    radius: width/2
+        color: "white"
 
-    Image{
-        id: image
-        anchors.centerIn: parent
-        width: 30
-        height: width
-        source: "qrc:/icon_back"
-    }
-    Rectangle{
-        id: overlay
-        z: 1
-        visible: !container.enabled
-        anchors.centerIn: parent
-        width: 30
-        height: width
-        color: "#99ffffff"
-    }
+        implicitWidth: 65
+        implicitHeight: width
+        radius: width/2
 
-    MouseArea{
-        id: controlObject
-        anchors.fill: parent
-        onClicked:{
-           container.clicked();
+        Image{
+            id: image
+            anchors.centerIn: parent
+            width: 30
+            height: width
+            source: "qrc:/icon_back"
         }
+        Rectangle{
+            id: overlay
+            z: 1
+            visible: !container.enabled
+            anchors.centerIn: parent
+            width: 30
+            height: width
+            color: "#99ffffff"
+        }
+
     }
 }

LenaPi/lenapi.qrc

@@ -8,5 +8,6 @@
         <file alias="icon_next">resources/next.jpg</file>
         <file alias="icon_previous">resources/previous.jpg</file>
         <file alias="icon_stop">resources/stop.jpg</file>
+        <file alias="icon_close">resources/close.png</file>
     </qresource>
 </RCC>

LenaPi/main.qml

@@ -8,6 +8,8 @@ Window {
     height: 480
     title: "LenaPi 1.2"
 
+    Component.onCompleted: showMaximized();
+
     Image{
         id: background