improvements for new ruler

containment/package/contents/ui/EditModeVisual.qml

@@ -28,8 +28,8 @@ import org.kde.latte 0.1 as Latte
 
 Item{
     id: editVisual
-    width: root.isHorizontal ? editLength : visibilityManager.thicknessNormalOriginal + theme.defaultFont.pixelSize
-    height: root.isVertical ? editLength : visibilityManager.thicknessNormalOriginal + theme.defaultFont.pixelSize
+    width: root.isHorizontal ? dock.width : visibilityManager.thicknessNormalOriginal + theme.defaultFont.pixelSize
+    height: root.isVertical ? dock.height : visibilityManager.thicknessNormalOriginal + theme.defaultFont.pixelSize
 
     opacity: 0
 
@@ -322,8 +322,6 @@ Item{
                         to: editVisual.farEdge ? editVisual.rootThickness - editVisual.thickness : 0
                         duration: editVisual.speed
                         easing.type: Easing.OutQuad
-
-
                     }
                 }
 

containment/package/contents/ui/LayoutsContainer.qml

@@ -353,6 +353,13 @@ Item{
         onSizeWithNoFillAppletsChanged: HeuristicTools.updateSizeForAppletsInFill();
 
 
+        transitions: Transition {
+            NumberAnimation {
+                duration: root.animationTime
+                easing.type: Easing.OutQuad
+            }
+        }
+
         //////////////////////////BEGIN states
         //user set Panel Positions
         // 0-Center, 1-Left, 2-Right, 3-Top, 4-Bottom

containment/package/contents/ui/Ruler.qml

@@ -26,10 +26,48 @@ import org.kde.plasma.plasmoid 2.0
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 
+import org.kde.latte 0.1 as Latte
+
 Item{
-    property color foregroundColor: "#d7e3ff"
+    id: rulerItem
+
     opacity: behaveAsPlasmaPanel ? 0.7 : 1
 
+    property int length: root.isHorizontal ? (root.behaveAsPlasmaPanel ? root.width - root.maxIconSize/4 : root.maxLength):
+                                             (root.behaveAsPlasmaPanel ? root.height - root.maxIconSize/4 : root.maxLength)
+
+    property color foregroundColor: "#d7e3ff"
+
+    Connections{
+        target: plasmoid
+        onLocationChanged: initializeEditPosition();
+    }
+
+    Connections{
+        target: root
+        onMaxIconSizeChanged: initializeEditPosition();
+        onPanelAlignmentChanged: initializeEditPosition();
+        onOffsetChanged: initializeEditPosition();
+        onMaxLengthChanged: initializeEditPosition();
+        onEditModeChanged: {
+            if (editMode) {
+                initializeEditPosition();
+            }
+        }
+    }
+
+    Connections{
+        target: editModeVisual
+
+        onRootThicknessChanged: {
+            rulerItem.initializeEditPosition();
+        }
+
+        onThicknessChanged: {
+            rulerItem.initializeEditPosition();
+        }
+    }
+
     RowLayout{
         width: parent.width
 
@@ -106,4 +144,40 @@ Item{
         }
     }
 
+
+    function initializeEditPosition() {
+        if (root.editMode) {
+            if (plasmoid.location === PlasmaCore.Types.LeftEdge){
+                x = 0;
+            } else if (plasmoid.location === PlasmaCore.Types.TopEdge) {
+                y =editModeVisual.thickness - 1.5 *theme.defaultFont.pixelSize;
+            } else if (plasmoid.location === PlasmaCore.Types.BottomEdge) {
+                y = editModeVisual.rootThickness - editModeVisual.thickness + 0.5 * theme.defaultFont.pixelSize;
+            } else if (plasmoid.location === PlasmaCore.Types.RightEdge) {
+                x = editModeVisual.rootThickness - editModeVisual.thickness + 0.5 * theme.defaultFont.pixelSize;
+            }
+
+            if (root.isHorizontal) {
+                if (plasmoid.configuration.panelPosition === Latte.Dock.Justify) {
+                    x = root.width/2 - rulerItem.length/2 + root.offset;
+                } else if (root.panelAlignment === Latte.Dock.Left) {
+                    x = root.offset;
+                } else if (root.panelAlignment === Latte.Dock.Center) {
+                    x = root.width/2 - rulerItem.length/2 + root.offset;
+                } else if (root.panelAlignment === Latte.Dock.Right) {
+                    x = root.width - rulerItem.length - root.offset;
+                }
+            } else if (root.isVertical) {
+                if (plasmoid.configuration.panelPosition === Latte.Dock.Justify) {
+                    y = root.height/2 - rulerItem.length/2 + root.offset;
+                } else if (root.panelAlignment === Latte.Dock.Top) {
+                    y = root.offset;
+                } else if (root.panelAlignment === Latte.Dock.Center) {
+                    y = root.height/2 - rulerItem.length/2 + root.offset;
+                } else if (root.panelAlignment === Latte.Dock.Bottom) {
+                    y = root.height - rulerItem.length - root.offset;
+                }
+            }
+        }
+    }
 }

containment/package/contents/ui/VisibilityManager.qml

@@ -127,7 +127,7 @@ Item{
         target: dock
         property: "maxLength"
         when: dock
-        value: plasmoid.configuration.maxLength/100
+        value: root.editMode ? 1 : plasmoid.configuration.maxLength/100
     }
 
 

containment/package/contents/ui/main.qml

@@ -128,6 +128,8 @@ DragDrop.DropArea {
     property int animationsNeedLength: 0 // animations need length, e.g. adding a task
     property int animationsNeedThickness: 0 // animations need thickness, e.g. bouncing animation
 
+    property int animationTime: durationTime*2.8*units.longDuration
+
     property int automaticIconSizeBasedSize: -1 //it is not set, this is the defautl
 
     //what is the highest icon size based on what icon size is used, screen calculated or user specified
@@ -1532,9 +1534,9 @@ DragDrop.DropArea {
 
     Ruler{
         width: behaveAsPlasmaPanel ? panelBox.width : root.maxLength
-        anchors.top: editModeVisual.top
-        anchors.topMargin: 0.2*theme.defaultFont.pixelSize
-        anchors.horizontalCenter: parent.horizontalCenter
+       // anchors.top: editModeVisual.top
+       // anchors.topMargin: 0.2*theme.defaultFont.pixelSize
+      //  anchors.horizontalCenter: parent.horizontalCenter
 
         opacity: root.editMode && plasmoid.configuration.advanced ? 1 : 0
 
@@ -1542,14 +1544,35 @@ DragDrop.DropArea {
 
         Behavior on width {
             NumberAnimation {
-                duration: 4 * container.animationTime
+                duration: 250
+                easing.type: Easing.OutCubic
+            }
+        }
+
+        Behavior on height {
+            NumberAnimation {
+                duration: 250
+                easing.type: Easing.OutCubic
+            }
+        }
+
+        Behavior on x {
+            NumberAnimation {
+                duration: 250
+                easing.type: Easing.OutCubic
+            }
+        }
+
+        Behavior on y {
+            NumberAnimation {
+                duration: 250
                 easing.type: Easing.OutCubic
             }
         }
 
         Behavior on opacity {
             NumberAnimation {
-                duration: 4 * container.animationTime
+                duration: 250
                 easing.type: Easing.OutCubic
             }
         }