[AppLauncher] Add animation to folder opening. Uninstall & remove button like...

[AppLauncher] Add animation to folder opening. Uninstall & remove button like in spec. No functionality(DBus?) and icons(Depends on fontAwesome) yet

src/qml/AppLauncher.qml

@@ -57,38 +57,136 @@ GridView {
         height: Math.min(parent.width,parent.height)/10
     }
 
-    Item {//todo
+    Item {//Doesn't yet uninstall applications
         id: deleter
         anchors.top: parent.top
         property alias remove: remove
         property alias uninstall: uninstall
-        Rectangle {//todo
+        function uninstalling(action, caption) {
+            state = action
+            if (action==="remove") {
+                remove.text = qsTr("Removing") + " " + caption
+            } else if (action == "uninstall") {
+                uninstall.text = qsTr("Uninstalling") + " " + caption
+            }
+        }
+
+        states: [
+            State {
+                name: "remove"
+                PropertyChanges {
+                    target: remove
+                    color1: "#D9ff0000"
+                    color2: "#D9ff0000"
+                    color3: "#D9ff0000"
+                }
+                PropertyChanges {
+                    target: uninstall
+                    color1: "#D9ff0000"
+                    color2: "#80ff0000"
+                    color3: "#4Dff0000"
+                }
+                PropertyChanges {
+                    target: uninstall
+                    text: qsTr("Uninstall")
+                }
+            },
+            State {
+                name: "uninstall"
+                PropertyChanges {
+                    target: uninstall
+                    color1: "#D9ff0000"
+                    color2: "#D9ff0000"
+                    color3: "#D9ff0000"
+                }
+                PropertyChanges {
+                    target: remove
+                    color1: "#D9ff0000"
+                    color2: "#80ff0000"
+                    color3: "#4Dff0000"
+                }
+                PropertyChanges {
+                    target: remove
+                    text: qsTr("Remove")
+                }
+            },
+            State {
+                name:"basic"
+                PropertyChanges {
+                    target: remove
+                    color1: "#D9ff0000"
+                    color2: "#80ff0000"
+                    color3: "#4Dff0000"
+                }
+                PropertyChanges {
+                    target: remove
+                    text: qsTr("Remove")
+                }
+                PropertyChanges {
+                    target: uninstall
+                    color1: "#D9ff0000"
+                    color2: "#80ff0000"
+                    color3: "#4Dff0000"
+                }
+                PropertyChanges {
+                    target: uninstall
+                    text: qsTr("Uninstall")
+                }
+            }
+        ]
+
+        Rectangle {//WHY?
             id: remove
+            property color color1: "#D9ff0000"
+            property color color2: "#80ff0000"
+            property color color3: "#4Dff0000"
             property alias text: removeLabel.text
             visible: onUninstall
-            height: 110
-            color: "red"
+            height: Theme.itemHeightExtraLarge
             width: gridview.width / 2
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: remove.color1 }
+                GradientStop { position: 0.5; color: remove.color2 }
+                GradientStop { position: 1.0; color: remove.color3 }
+            }
+
             Label {
                 id: removeLabel
+                height: parent.height
+                width: parent.width
                 anchors.centerIn: parent
                 text: qsTr("Remove")
-                font.pointSize: 8
+                font.pixelSize: Theme.fontSizeLarge
+                elide:Text.ElideRight
+                horizontalAlignment:Text.AlignHCenter
+                verticalAlignment:Text.AlignVCenter
             }
         }
-        Rectangle {//todo
+        Rectangle {
             id: uninstall
+            property color color1: "#D9ff0000"
+            property color color2: "#80ff0000"
+            property color color3: "#4Dff0000"
             property alias text: uninstallLabel.text
             anchors.left: remove.right
             visible: onUninstall
-            color: "red"
             width: gridview.width / 2
-            height: 110
+            height: Theme.itemHeightExtraLarge
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: uninstall.color1 }
+                GradientStop { position: 0.5; color: uninstall.color2 }
+                GradientStop { position: 1.0; color: uninstall.color3 }
+            }
             Label {
                 id: uninstallLabel
+                height: parent.height
+                width: parent.width
                 anchors.centerIn: parent
                 text: qsTr("Uninstall")
-                font.pointSize: 8
+                font.pixelSize: Theme.fontSizeLarge
+                elide:Text.ElideRight
+                horizontalAlignment:Text.AlignHCenter
+                verticalAlignment:Text.AlignVCenter
             }
         }
     }

src/qml/LauncherItemFolder.qml

@@ -71,7 +71,7 @@ Item {
                     Lipstick.compositor.windowToFront(winId)
             } else {
                 folderLoader.model = modelData.object
-                folderLoader.visible = true
+                //folderLoader.visible = true
             }
         }
         Item {
@@ -182,10 +182,9 @@ Item {
         x: 0
         z: wrapper.z + 100
         width: gridview.width
-        height: count==0 ? 0 :  (Math.floor((count*wrapper.height-1)/width) + 1) * wrapper.height
+        height: count == 0 ? 0 :  (Math.floor((count*wrapper.height-1)/width) + 1) * wrapper.height
         cellWidth: wrapper.width
         cellHeight: wrapper.width
-        visible:false
 
         Rectangle {
             width: parent.width
@@ -211,6 +210,15 @@ Item {
             iconCaption.color: Theme.backgroundColor
             folderModel:folderLoader.model
             onReorderingChanged: if(!reordering) folderIconStack.icons=folderIconStack.addIcons()
+            visible: false
+        }
+
+        Behavior on height {
+            NumberAnimation {
+                easing.type: Easing.InQuad
+                duration: 100
+                onRunningChanged: if(!running && folderLoader.count>0) folderLauncherItem.visible = true
+            }
         }
     }
 
@@ -218,7 +226,6 @@ Item {
     Connections {
         target: Lipstick.compositor
         onDisplayOff: {
-            folderLoader.visible=false
             folderLoader.model = 0
         }
     }
@@ -228,7 +235,6 @@ Item {
         enabled: folderLoader.visible && folderLoader.count > 0
         parent:folderLoader.contentItem
         onPressed: {
-            folderLoader.visible=false
             folderLoader.model = 0
         }
     }

src/qml/LauncherItemWrapper.qml

@@ -72,7 +72,9 @@ MouseArea {
         drag.target = launcherItem
         z = 1000
         reordering = true
+        if(!isFolder){
             parentItem.onUninstall = true
+        }
 
         // don't allow dragging an icon out of pages with a horizontal flick
         pager.interactive = false
@@ -111,11 +113,14 @@ MouseArea {
             var idx = -1
             var folderIdx = -1
             var delPos = deleter.remove.mapFromItem(launcherItem, width/2, height/2)
-            var isdel = deleter.childAt(delPos.x, delPos.y)
-            if (isdel === deleter.remove) {
-                deleter.remove.text = qsTr("Removing") + " " + iconCaption
-            } else if (isdel === deleter.uninstall) {
-                deleter.uninstall.text = qsTr("Uninstalling") + " " + iconCaption
+            var isdel = deleter.childAt(delPos.x, delPos.y-height/4)
+            var isdel2 = deleter.childAt(delPos.x, delPos.y+height/4)//hjelp?
+            if(!isFolder) {
+                if (isdel === deleter.remove || isdel2 ===  deleter.remove) {
+                    deleter.uninstalling("remove", iconCaption.text)
+                } else if (isdel === deleter.uninstall || isdel2 ===  deleter.uninstall) {
+                    deleter.uninstalling("uninstall", iconCaption.text)
+                } else deleter.uninstalling("basic")
             }
             //When adding new icon to folder or creating new folder
             var offset = gridViewPos.x - item.x