add animation and shadow for edit mode visual

containment/contents/ui/EditModeVisual.qml

@@ -1,10 +1,166 @@
 import QtQuick 2.1
 
+import org.kde.plasma.core 2.0 as PlasmaCore
+import QtGraphicalEffects 1.0
+
 Image{
-    anchors.fill: parent
+    id: editVisual
+    width: root.isHorizontal ? parent.width : visibilityManager.thicknessNormal
+    height: root.isVertical ? parent.height : visibilityManager.thicknessNormal
+
     fillMode: Image.Tile
-    horizontalAlignment: Image.AlignLeft
-    verticalAlignment: Image.AlignTop
     source: "../icons/blueprint.jpg"
-    opacity: 0.5
+    opacity: 0
+
+    property int location: plasmoid.location
+    property int speed: root.durationTime*4*units.longDuration
+    property int thickness: visibilityManager.thicknessNormal + shadowSize
+    property int rootThickness: root.isHorizontal ? root.height : root.width
+    property int shadowSize : Math.ceil(root.iconSize / 5)
+
+    property bool animationSent: false
+    property bool farEdge: (plasmoid.location===PlasmaCore.Types.BottomEdge) || (plasmoid.location===PlasmaCore.Types.RightEdge)
+    property bool editAnimationEnded: false
+
+    layer.enabled: true
+    layer.effect: DropShadow {
+        radius: editVisual.shadowSize
+        samples: 2 * radius
+        color: "#ee080808"
+    }
+
+    onLocationChanged:{
+        initializeEditPosition();
+    }
+
+    function initializeNormalPosition() {
+        if (location === PlasmaCore.Types.BottomEdge) {
+            x = 0;
+            y = editVisual.rootThickness;
+        } else if (location === PlasmaCore.Types.RightEdge) {
+            x = editVisual.rootThickness;
+            y = 0;
+        } else if (location === PlasmaCore.Types.LeftEdge) {
+            x = -editVisual.thickness;
+            y = 0;
+        } else if (location === PlasmaCore.Types.TopEdge) {
+            x = 0;
+            y = -editVisual.thickness;
+        }
+    }
+
+    function initializeEditPosition() {
+        if (root.editMode) {
+            if ((location === PlasmaCore.Types.LeftEdge) || (location === PlasmaCore.Types.TopEdge)){
+                x = 0;
+                y = 0;
+            } else if (location === PlasmaCore.Types.BottomEdge) {
+                x = 0;
+                y = rootThickness - thickness + shadowSize;
+            } else if (location === PlasmaCore.Types.RightEdge) {
+                x = rootThickness - thickness + shadowSize;
+                y = 0;
+            }
+        }
+    }
+
+
+    //////////// States ////////////////////
+
+    states: [
+        State{
+            name: "*"
+            when:  !root.editMode
+        },
+
+        State{
+            name: "edit"
+            when: root.editMode
+        }
+    ]
+
+    transitions: [
+        Transition{
+            id: editTransition
+            from: "*"
+            to: "edit"
+
+            SequentialAnimation{
+                ScriptAction{
+                    script:{
+                        editVisual.opacity = 0
+
+                        initializeNormalPosition();
+
+                        if(!animationSent) {
+                            animationSent = true;
+                            var anim = root.animationsNeedLength+1;
+                            root.slotAnimationsNeedLength(anim);
+                        }
+                    }
+                }
+
+                ParallelAnimation{
+                    PropertyAnimation {
+                        target: editVisual
+                        property: "opacity"
+                        to: 0.6
+                        duration: editVisual.speed / 2
+                        easing.type: Easing.OutQuad
+                    }
+
+                    PropertyAnimation {
+                        target: editVisual
+                        property: root.isHorizontal ? "y" : "x"
+                        to: editVisual.farEdge ? editVisual.rootThickness - editVisual.thickness + editVisual.shadowSize : 0
+                        duration: editVisual.speed
+                        easing.type: Easing.OutBounce
+
+
+                    }
+                }
+
+                ScriptAction{
+                    script:{
+                        editVisual.editAnimationEnded = true;
+                        visibilityManager.updateMaskArea();
+                    }
+                }
+            }
+        },
+        Transition{
+            from: "edit"
+            to: "*"
+            SequentialAnimation{
+                ParallelAnimation{
+                    PropertyAnimation {
+                        target: editVisual
+                        property: root.isHorizontal ? "y" : "x"
+                        to: editVisual.farEdge ? editVisual.rootThickness : -editVisual.thickness
+                        duration: editVisual.speed
+                        easing.type: Easing.OutBounce
+                    }
+                    PropertyAnimation {
+                        target: editVisual
+                        property: "opacity"
+                        to: 0
+                        duration: editVisual.speed
+                        easing.type: Easing.OutQuad
+                    }
+                }
+
+                ScriptAction{
+                    script:{
+                        editVisual.editAnimationEnded = false;
+                        if (editVisual.animationSent) {
+                            var anim = root.animationsNeedLength-1;
+                            root.slotAnimationsNeedLength(anim);
+                            editVisual.animationSent = false;
+                        }
+                    }
+                }
+            }
+
+        }
+    ]
 }

containment/contents/ui/VisibilityManager.qml

@@ -178,7 +178,13 @@ Item{
             //grow only on length and not thickness
             if(mainLayout.animatedLength || root.editMode
                     || (root.animationsNeedLength>0 && root.animationsNeedBothAxis === 0)) {
-                tempThickness = thicknessNormalOriginal;
+
+                //this is used to fix a bug with shadow showing when the animation of edit mode
+                //is triggered
+                var editModeThickness = editModeVisual.editAnimationEnded ? thicknessNormalOriginal + editModeVisual.shadowSize :
+                                                                            thicknessNormalOriginal
+
+                tempThickness = root.editMode ? editModeThickness : thicknessNormalOriginal;
 
                 if (root.animationsNeedThickness > 0) {
                     tempThickness = thicknessMidOriginal;

containment/contents/ui/main.qml

@@ -65,7 +65,7 @@ DragDrop.DropArea {
     property int appletsAnimations: 0 //zoomed applets it is used basically on masking for magic window
     property int automaticIconSizeBasedSize: -1 //it is not set, this is the defautl
     property int iconSize: (automaticIconSizeBasedSize > 0 && !root.editMode) ? Math.min(automaticIconSizeBasedSize, plasmoid.configuration.iconSize) :
-                                                                                          plasmoid.configuration.iconSize
+                                                                                plasmoid.configuration.iconSize
     property int iconStep: 8
     property int panelEdgeSpacing: iconSize / 3
     //FIXME: this is not needed any more probably
@@ -79,8 +79,8 @@ DragDrop.DropArea {
     //property int panelAlignment: plasmoid.configuration.panelPosition !== Latte.Dock.Double ? plasmoid.configuration.panelPosition : mainLayoutPosition
 
     property int panelAlignment: !root.editMode ? plasmoid.configuration.panelPosition :
-                                                            ( plasmoid.configuration.panelPosition === Latte.Dock.Double ?
+                                                  ( plasmoid.configuration.panelPosition === Latte.Dock.Double ?
-                                                                 Latte.Dock.Center :plasmoid.configuration.panelPosition )
+                                                       Latte.Dock.Center :plasmoid.configuration.panelPosition )
 
     property real zoomFactor: windowSystem.compositingActive ? ( 1 + (plasmoid.configuration.zoomLevel / 20) ) : 1
 
@@ -391,6 +391,9 @@ DragDrop.DropArea {
     onAppletsAnimationsChanged: visibilityManager.updateMaskArea();
 
     onEditModeChanged: {
+        if (editMode) {
+            visibilityManager.updateMaskArea();
+        }
         updateLayouts();
     }
 
@@ -533,9 +536,9 @@ DragDrop.DropArea {
         }
 
         if (plasmoid.userConfiguring) {
-            console.log("applets------");
+          //  console.log("applets------");
             for (var i = 0; i < plasmoid.applets.length; ++i) {
-                console.log("applet:"+i);
+            //    console.log("applet:"+i);
                 plasmoid.applets[i].expanded = false;
             }
             if (!dragOverlay) {
@@ -806,7 +809,8 @@ DragDrop.DropArea {
             return;
         }
 
-        animationsNeedBothAxis = value;
+        animationsNeedBothAxis = Math.max(value, 0);
+
         visibilityManager.updateMaskArea();
     }
 
@@ -815,7 +819,8 @@ DragDrop.DropArea {
             return;
         }
 
-        animationsNeedLength = value;
+        animationsNeedLength = Math.max(value, 0);
+
         visibilityManager.updateMaskArea();
     }
 
@@ -824,7 +829,8 @@ DragDrop.DropArea {
             return;
         }
 
-        animationsNeedThickness = value;
+        animationsNeedThickness = Math.max(value, 0);
+
         visibilityManager.updateMaskArea();
     }
 
@@ -942,14 +948,16 @@ DragDrop.DropArea {
 
     ///////////////BEGIN UI elements
 
-    Loader{
+    /*Loader{
         anchors.fill: parent
         active: root.editMode
 
-        sourceComponent: EditModeVisual{
+        sourceComponent:
-        }
+    }*/
-    }
 
+    EditModeVisual{
+        id:editModeVisual
+    }
 
     Item {
         id: lastSpacer