[AppLauncher] Folder icon like in spec

src/qml/AppLauncher.qml

@@ -103,7 +103,7 @@ GridView {
         onXChanged: item.x = x
         onYChanged: item.y = y
         property QtObject modelData : model
-        property int cellSize: gridview.cellHeight //delete
+        property int cellSize: gridview.cellHeight
         property int cellIndex: index
         sourceComponent: object.type == LauncherModel.Folder ? folder : app
     }
@@ -117,11 +117,9 @@ GridView {
             iconCaption.color:Theme.textColor
             iconCaption.text: modelData.object.title
             isFolder: modelData.object.type == LauncherModel.Folder
-            folderAppsCount: isFolder && modelData.object ? modelData.object.itemCount : 0
-            source: modelData.object.iconId == "" || isFolder ? "/usr/share/lipstick-glacier-home-qt5/qml/theme/default-icon.png" : (modelData.object.iconId.indexOf("/") == 0 ? "file://" : "image://theme/") + modelData.object.iconId
+            source: modelData.object.iconId == "" ? "/usr/share/lipstick-glacier-home-qt5/qml/theme/default-icon.png" : (modelData.object.iconId.indexOf("/") == 0 ? "file://" : "image://theme/") + modelData.object.iconId
             notNemoIcon:  isFolder || modelData.object.iconId == "" ? false : modelData.object.iconId.indexOf("harbour") > -1  ||  modelData.object.iconId.indexOf("apkd_launcher") > -1 ? true : false
             folderModel:launcherModel
-
         }
     }
     Component {
@@ -133,7 +131,6 @@ GridView {
             iconCaption.text: modelData.object.title
             isFolder: modelData.object.type == LauncherModel.Folder
             folderAppsCount: isFolder && modelData.object ? modelData.object.itemCount : 0
-            source: modelData.object.iconId == "" || isFolder ? "/usr/share/lipstick-glacier-home-qt5/qml/theme/default-icon.png" : (modelData.object.iconId.indexOf("/") == 0 ? "file://" : "image://theme/") + modelData.object.iconId
             notNemoIcon:  isFolder || modelData.object.iconId == "" ? false : modelData.object.iconId.indexOf("harbour") > -1  ||  modelData.object.iconId.indexOf("apkd_launcher") > -1 ? true : false
             folderModel:launcherModel
         }

src/qml/LauncherItemDelegate.qml

@@ -31,11 +31,10 @@ import org.nemomobile.lipstick 0.1
 
 Item {
     id: wrapper
-    property string source
-    property alias iconCaption: launcherItem.iconCaption
+    property alias source: iconImage.source
+    property alias iconCaption: iconText
     property bool reordering: launcherItem.reordering
     property bool isFolder
-    property int folderAppsCount
     //Sailfish and other app icons are larger than nemo icons. Thats why this property could be used to scale them
     property bool notNemoIcon
     property alias parentItem: launcherItem.parentItem
@@ -63,10 +62,64 @@ Item {
         id: launcherItem
         width: wrapper.width
         height: wrapper.height
-        folderAppsCount: wrapper.folderAppsCount
         isFolder: wrapper.isFolder
         notNemoIcon: wrapper.notNemoIcon
-        source: wrapper.source
+
+        Item {
+            id: iconWrapper
+            width: parent.width -parent.width/10
+            height: width - iconText.height
+            anchors.centerIn:  parent
+            Image {
+                id: iconImage
+                anchors {
+                    // centerIn:  launcherItem.n.otNemoIcon ? parent : undefined
+                    horizontalCenter: /* launcherItemnotNemoIcon ? undefined : */parent.horizontalCenter
+                    top: parent.top
+                    //topMargin: Theme.itemSpacingExtraSmall
+                }
+                width:/*launcherItem.notNemoIcon ? parent.width-parent.width/3 :  */parent.width - parent.width/4
+                height: width
+                asynchronous: true
+            }
+            Spinner {
+                id: spinnerr
+                anchors {
+                    centerIn:  iconImage
+                    top: iconImage.top
+                    topMargin: Theme.itemSpacingExtraSmall
+                }
+                width: iconWrapper.width
+                height: width
+                enabled: (modelData.object.type === LauncherModel.Application) ? modelData.object.isLaunching ? switcher.switchModel.getWindowIdForTitle(modelData.object.title) == 0 : false : false
+
+                Connections {
+                    target: Lipstick.compositor
+                    onWindowAdded: {
+                        if(window.category=="" && window.title !== "Home"){
+                            spinnerr.stop()
+                        }
+                    }
+                }
+            }
+
+        }
+        // Caption for the icon
+        Text {
+            id: iconText
+            // elide only works if an explicit width is set
+            width: iconWrapper.width
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.textColor
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+                topMargin: Theme.itemSpacingExtraSmall
+            }
+        }
     }
 
 

src/qml/LauncherItemFolder.qml

@@ -28,15 +28,13 @@ import org.nemomobile.lipstick 0.1
 
 Item {
     id: wrapper
-    property string source
-    property alias iconCaption: launcherItem.iconCaption
+    property alias iconCaption: iconText
     property bool reordering: launcherItem.reordering
     property bool isFolder
     property int folderAppsCount
     property bool notNemoIcon
     property alias folderLoader: folderLoader
     property alias folderModel:launcherItem.folderModel
-
     onXChanged: moveTimer.start()
     onYChanged: moveTimer.start()
 
@@ -58,11 +56,10 @@ Item {
         id: launcherItem
         width: wrapper.width
         height: wrapper.height
-        folderAppsCount:wrapper.folderAppsCount
         isFolder: wrapper.isFolder
         notNemoIcon:wrapper.notNemoIcon
         parentItem: wrapper.parent
-        source: wrapper.source
+
         clip: true
         onClicked: {
             // TODO: disallow if close mode enabled
@@ -77,6 +74,91 @@ Item {
                 folderLoader.visible = true
             }
         }
+        Item {
+            id:folderIconStack
+            width: size
+            height: size
+            property int size: parent.width -parent.width/10
+            property int iconSize: (/*launcherItem.notNemoIcon ? size-size/3 : */ (size - size/4)) * 0.9
+            property real transparency: 0.6
+            property int iconCount: 4
+            property var icons: addIcons()
+
+            function addIcons() {
+                var iconsList = []
+                for (var i = 0; i < modelData.object.itemCount && i < iconCount; i++) {
+                    var icon = (modelData.object.get(i).iconId.indexOf("/") == 0 ? "file://" : "image://theme/") + modelData.object.get(i).iconId
+                    iconsList.push(icon)
+                }
+                return iconsList
+            }
+
+            Image {
+                width: folderIconStack.iconSize
+                height: folderIconStack.iconSize
+                opacity: folderIconStack.transparency
+                x:toppestIcon.x+Theme.itemSpacingSmall
+                y:toppestIcon.y+Theme.itemSpacingSmall
+                visible: folderIconStack.icons.length > folderIconStack.iconCount-1
+                source: visible ? folderIconStack.icons[folderIconStack.iconCount-1] : ""
+            }
+
+            Image {
+                width: folderIconStack.iconSize
+                height: folderIconStack.iconSize
+                opacity: folderIconStack.transparency
+                x:toppestIcon.x-Theme.itemSpacingSmall
+                y:toppestIcon.y+Theme.itemSpacingSmall
+                visible: folderIconStack.icons.length > folderIconStack.iconCount-2
+                source: visible ? folderIconStack.icons[folderIconStack.iconCount-2] : ""
+            }
+
+            Image {
+                width: folderIconStack.iconSize
+                height: folderIconStack.iconSize
+                opacity: folderIconStack.transparency
+                x:toppestIcon.x+Theme.itemSpacingSmall
+                y:toppestIcon.y-Theme.itemSpacingSmall
+                visible: folderIconStack.icons.length > folderIconStack.iconCount-3
+                source: visible ? folderIconStack.icons[folderIconStack.iconCount-3] : ""
+            }
+
+            Image {
+                id:toppestIcon
+                width: folderIconStack.iconSize
+                height: folderIconStack.iconSize
+                opacity: folderIconStack.transparency
+                anchors.centerIn: parent
+                visible: icons.length > 0
+                source: visible ? folderIconStack.icons[0]: ""
+            }
+            Text{
+                id: itemsCount
+                visible: false// launcherItem.isFolder
+                text: wrapper.folderAppsCount
+                anchors.centerIn: parent
+                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: folderIconStack.iconSize.width/4
+                color: "white"
+            }
+        }
+        // Caption for the icon
+        Text {
+            id: iconText
+            // elide only works if an explicit width is set
+            width: iconWrapper.width
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.textColor
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+                topMargin: Theme.itemSpacingExtraSmall
+            }
+        }
+
         Rectangle {
             id:triangle
             width: wrapper.height/4
@@ -124,11 +206,11 @@ Item {
             height: wrapper.height
             notNemoIcon:  isFolder || model.object.iconId == "" ? false : model.object.iconId.indexOf("harbour") > -1  ||  model.object.iconId.indexOf("apkd_launcher") > -1 ? true : false //Dirty but works most of the times
             isFolder: model.object.type == LauncherModel.Folder
-            folderAppsCount: isFolder && model.object ? model.object.itemCount : 0
             source: model.object.iconId == "" || isFolder ? "/usr/share/lipstick-glacier-home-qt5/qml/theme/default-icon.png" : (model.object.iconId.indexOf("/") == 0 ? "file://" : "image://theme/") + model.object.iconId
             iconCaption.text: model.object.title
             iconCaption.color: Theme.backgroundColor
             folderModel:folderLoader.model
+            onReorderingChanged: if(!reordering) folderIconStack.icons=folderIconStack.addIcons()
         }
     }
 

src/qml/LauncherItemWrapper.qml

@@ -29,14 +29,11 @@ import QtQuick.Controls.Styles.Nemo 1.0
 import org.nemomobile.lipstick 0.1
 
 MouseArea {
-    property alias source: iconImage.source
-    property alias iconCaption: iconText
     property bool reordering
     property int newIndex: -1
     property int newFolderIndex: -1
     property real oldY
     property bool isFolder
-    property int folderAppsCount
     property bool notNemoIcon
     property Item parentItem
     property alias slideMoveAnim: slideMoveAnim
@@ -163,7 +160,7 @@ MouseArea {
                 folderModel.moveToFolder(modelData.object, folderModel.get(folderIndex))
             }
             folderIndex = -1
-           newFolderActive = false
+            newFolderActive = false
         }
         //To drop appicon out of the folder
         var realY = parseInt(parentItem.mapFromItem(launcherItem, 0, 0).y) + parseInt(((launcherItem.height*launcherItem.scale-launcherItem.height)/2).toFixed(2))
@@ -179,7 +176,7 @@ MouseArea {
         onTriggered: {
             if (newFolderIndex >= 0 && newFolderIndex !== cellIndex) {
                 if (!folderItem.isFolder) {
-                   newFolderActive = true
+                    newFolderActive = true
                 } else {
                     newFolderActive = false
                 }
@@ -214,73 +211,5 @@ MouseArea {
             }
         }
     }
-
-    Item {
-        id: iconWrapper
-        width: parent.width -parent.width/10
-        height: width - iconText.height
-        anchors.centerIn:  parent
-        Image {
-            id: iconImage
-            anchors {
-               // centerIn:  notNemoIcon ? parent : undefined
-                horizontalCenter: /* notNemoIcon ? undefined : */parent.horizontalCenter
-                top: parent.top
-                //topMargin: Theme.itemSpacingExtraSmall
-            }
-            width:/* notNemoIcon ? parent.width-parent.width/3 :  */parent.width - parent.width/4
-            height: width
-            asynchronous: true
-
-            Spinner {
-                id: spinnerr
-                anchors {
-                    centerIn:  parent
-                    top: parent.top
-                    topMargin: Theme.itemSpacingExtraSmall
-                }
-                width: parent.cellWidth - parent.cellWidth/10
-                height: width
-                enabled: (modelData.object.type === LauncherModel.Application) ? modelData.object.isLaunching ? switcher.switchModel.getWindowIdForTitle(modelData.object.title) == 0 : false : false
-
-                Connections {
-                    target: Lipstick.compositor
-                    onWindowAdded: {
-                        if(window.category=="" && window.title !== "Home"){
-                            spinnerr.stop()
-                        }
-                    }
-                }
-            }
-
-
-            Text{
-                id: itemsCount
-                visible: isFolder
-                text: folderAppsCount
-                anchors.centerIn: parent
-
-                horizontalAlignment: Text.AlignHCenter
-                font.pixelSize: iconImage.width/4
-                color: "white"
-            }
-        }
-    }
-    // Caption for the icon
-    Text {
-        id: iconText
-        // elide only works if an explicit width is set
-        width: iconWrapper.width
-        elide: Text.ElideRight
-        horizontalAlignment: Text.AlignHCenter
-        font.pixelSize: Theme.fontSizeSmall
-        color: Theme.textColor
-        anchors {
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            topMargin: Theme.itemSpacingExtraSmall
-        }
-    }
 }