ItemDelegate for NavigationListDelegate

.gitignore

@@ -2,3 +2,4 @@
 build-LenaPi-Desktop-Debug
 build-LenaPi-RasPi-Debug
 build-LenaPi-RasPi-Release
+LenaPi/LenaPi.pro.user.4.8-pre1

LenaPi/Navigation.qml

@@ -1,5 +1,8 @@
 import QtQuick 2.0
 
+/**
+ * @brief Navigation view containing list view displaying artists or genres and albums
+ */
 Item {
     RoundButton{
         id: back
@@ -11,7 +14,7 @@ Item {
         visible: navigationList.pIsBackVisible
 
         onClicked: navigationList.navigateBack();
-    }
+    } // RoundButton: navigate back
 
     Rectangle{
         anchors.left: parent.left
@@ -38,8 +41,9 @@ Item {
                 NavigationListDelegate{
                 id: delegate
                 height: parent.height
+                width: height
                 model: navigationList.pModelItems[index]
-            }
-        }
-    }
-}
+            } // NavigationListDelegate
+        } // ListView
+    } // Rectangle: List background
+} // Item

LenaPi/NavigationListDelegate.qml

@@ -1,34 +1,36 @@
-import QtQuick 2.0
+import QtQuick 2.11
+import QtQuick.Controls 2.4
 import QtGraphicalEffects 1.0
 
-Rectangle{
+ItemDelegate{
     id: container
 
     property var model
     property alias imageSource: contentImage.source
 
-    width: height
-    height: 150
-    radius: model.pIsCircleDelegate ? height/2 : 0
-    color: "blue"
 
-    Image{
-        id: contentImage
-        source: model ? model.pImageSource : "qrc:/default_image"
-        anchors.centerIn: parent
-        width: parent.width-10
-        height: width
-        fillMode: Image.PreserveAspectCrop
-        layer.enabled: true
-        layer.effect: OpacityMask{
-            maskSource: container
-        }
-    }
-    MouseArea{
-        id: controlObject
-        anchors.fill: parent
+    padding: 5
     onClicked:{
         model.onClicked();
     }
+
+    background: Rectangle{
+        id: background
+        implicitWidth: 150
+        implicitHeight: implicitWidth
+        radius: model.pIsCircleDelegate ? height/2 : 0
+        color: "blue"
+        Image{
+            id: contentImage
+            source: model ? model.pImageSource : "qrc:/default_image"
+            anchors.fill: parent
+            anchors.margins: 5
+
+            fillMode: Image.PreserveAspectCrop
+                layer.enabled: true
+                layer.effect: OpacityMask{
+                    maskSource: background
+            }
+        }
     }
 }

LenaPi/main.qml

@@ -6,7 +6,7 @@ Window {
     visible: true
     width: 800
     height: 480
-    title: "LenaPi 1.1 - beta"
+    title: "LenaPi 1.2"
 
     Image{
         id: background