fix #356,add offset option for the dock

-this patch provides the offset variable for
our qml side... The offset feature is not complete
the following are missing:
-expose offset at the dockview
-use offset in !compositing state
-update borders by taking into account the offset also
-update the automatic-positioning to take into account
the offset also

containment/contents/config/main.xml

@@ -78,6 +78,9 @@
     <entry name="maxLength" type="Int">
       <default>100</default>
     </entry>
+    <entry name="offset" type="Int">
+      <default>0</default>
+    </entry>
     <entry name="middleClickAction" type="Enum">
       <choices>
             <choice name="None"/>

containment/contents/ui/DebugWindow.qml

@@ -123,6 +123,14 @@ Window{
                 text: root.maxLength
             }
 
+            Text{
+                text: "Offset (pixels)"+space
+            }
+
+            Text{
+                text: root.offset
+            }
+
             Text{
                 text: "Mask"+space
             }

containment/contents/ui/EditModeVisual.qml

@@ -72,6 +72,7 @@ Image{
         target: root
         onIconSizeChanged: initializeEditPosition();
         onPanelAlignmentChanged: initializeEditPosition();
+        onOffsetChanged: initializeEditPosition();
     }
 
     onRootThicknessChanged: {
@@ -137,23 +138,23 @@ Image{
 
         if (root.isHorizontal) {
             if (plasmoid.configuration.panelPosition === Latte.Dock.Justify) {
-                x = root.width/2 - editVisual.editLength/2;
+                x = root.width/2 - editVisual.editLength/2 + root.offset;
             } else if (root.panelAlignment === Latte.Dock.Left) {
-                x = 0;
+                x = root.offset;
             } else if (root.panelAlignment === Latte.Dock.Center) {
-                x = root.width/2 - editVisual.editLength/2;
+                x = root.width/2 - editVisual.editLength/2 + root.offset;
             } else if (root.panelAlignment === Latte.Dock.Right) {
-                x = root.width - editVisual.editLength;
+                x = root.width - editVisual.editLength - root.offset;
             }
         } else if (root.isVertical) {
             if (plasmoid.configuration.panelPosition === Latte.Dock.Justify) {
-                y = root.height/2 - editVisual.editLength/2;
+                y = root.height/2 - editVisual.editLength/2 + root.offset;
             } else if (root.panelAlignment === Latte.Dock.Top) {
-                y = 0;
+                y = root.offset;
             } else if (root.panelAlignment === Latte.Dock.Center) {
-                y = root.height/2 - editVisual.editLength/2;
+                y = root.height/2 - editVisual.editLength/2 + root.offset;
             } else if (root.panelAlignment === Latte.Dock.Bottom) {
-                y = root.height - editVisual.editLength;
+                y = root.height - editVisual.editLength - root.offset;
             }
         }
     }
@@ -172,23 +173,23 @@ Image{
 
             if (root.isHorizontal) {
                 if (plasmoid.configuration.panelPosition === Latte.Dock.Justify) {
-                    x = root.width/2 - editVisual.width/2;
+                    x = root.width/2 - editVisual.width/2 + root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Left) {
-                    x = 0;
+                    x = root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Center) {
-                    x = root.width/2 - editVisual.width/2;
+                    x = root.width/2 - editVisual.width/2 + root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Right) {
-                    x = root.width - editVisual.width;
+                    x = root.width - editVisual.width - root.offset;
                 }
             } else if (root.isVertical) {
                 if (plasmoid.configuration.panelPosition === Latte.Dock.Justify) {
-                    y = root.height/2 - editVisual.height/2;
+                    y = root.height/2 - editVisual.height/2 + root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Top) {
-                    y = 0;
+                    y = root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Center) {
-                    y = root.height/2 - editVisual.height/2;
+                    y = root.height/2 - editVisual.height/2 + root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Bottom) {
-                    y = root.height - editVisual.height;
+                    y = root.height - editVisual.height - root.offset;
                 }
             }
         }

containment/contents/ui/PanelBox.qml

@@ -369,6 +369,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:undefined; bottom:undefined; left:parent.left; right:undefined; horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: root.offset;
+            }
         },
         ///Left
         State {
@@ -383,6 +388,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:parent.top; bottom:undefined; left:parent.left; right:undefined; horizontalCenter:undefined; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:root.offset;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
+            }
         },
         ///Left
         State {
@@ -397,6 +407,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:undefined; bottom:parent.bottom; left:parent.left; right:undefined; horizontalCenter:undefined; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:root.offset;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
+            }
         },
         State {
             name: "leftDouble"
@@ -410,6 +425,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:undefined; bottom:undefined; left:parent.left; right:undefined; horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: root.offset;
+            }
         },
         ///Right
         State {
@@ -424,6 +444,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:undefined; bottom:undefined; left:undefined; right:parent.right; horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: root.offset;
+            }
         },
         State {
             name: "rightTop"
@@ -437,6 +462,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:parent.top; bottom:undefined; left:undefined; right:parent.right; horizontalCenter:undefined; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:root.offset;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
+            }
         },
         State {
             name: "rightBottom"
@@ -450,6 +480,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:undefined; bottom:parent.bottom; left:undefined; right:parent.right; horizontalCenter:undefined; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:root.offset;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
+            }
         },
         State {
             name: "rightDouble"
@@ -463,6 +498,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:undefined; bottom:undefined; left:undefined; right:parent.right; horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: root.offset;
+            }
         },
         ///Bottom
         State {
@@ -477,6 +517,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:undefined; bottom:parent.bottom; left:undefined; right:undefined; horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: root.offset; anchors.verticalCenterOffset: 0;
+            }
         },
         State {
             name: "bottomLeft"
@@ -490,6 +535,12 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:undefined; bottom:parent.bottom; left:parent.left; right:undefined; horizontalCenter:undefined; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: root.offset;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
+            }
+
         },
         State {
             name: "bottomRight"
@@ -503,6 +554,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:undefined; bottom:parent.bottom; left:undefined; right:parent.right; horizontalCenter:undefined; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:root.offset;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
+            }
         },
         State {
             name: "bottomDouble"
@@ -516,6 +572,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:undefined; bottom:parent.bottom; left:undefined; right:undefined; horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: root.offset;
+            }
         },
         ///Top
         State {
@@ -530,6 +591,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:parent.top; bottom:undefined; left:undefined; right:undefined; horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: root.offset; anchors.verticalCenterOffset: 0;
+            }
         },
         State {
             name: "topLeft"
@@ -543,6 +609,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:parent.top; bottom:undefined; left:parent.left; right:undefined; horizontalCenter:undefined; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: root.offset;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
+            }
         },
         State {
             name: "topRight"
@@ -556,6 +627,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:parent.top; bottom:undefined; left:undefined; right:parent.right; horizontalCenter:undefined; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:root.offset;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
+            }
         },
         State {
             name: "topDouble"
@@ -569,6 +645,11 @@ Item{
                 target: shadowsSvgItem
                 anchors{ top:parent.top; bottom:undefined; left:undefined; right:undefined; horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
             }
+            PropertyChanges{
+                target: barLine
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: root.offset; anchors.verticalCenterOffset: 0;
+            }
         }
     ]
     //END states

containment/contents/ui/VisibilityManager.qml

@@ -237,13 +237,13 @@ Item{
                 if (noCompositingEdit) {
                     localX = 0;
                 } else if (plasmoid.configuration.panelPosition === Latte.Dock.Justify) {
-                    localX = (dock.width/2) - tempLength/2;
+                    localX = (dock.width/2) - tempLength/2 + root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Left) {
-                    localX = 0;
+                    localX = root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Center) {
-                    localX = (dock.width/2) - tempLength/2;
+                    localX = (dock.width/2) - tempLength/2 + root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Right) {
-                    localX = dock.width - mainLayout.width - space;
+                    localX = dock.width - mainLayout.width - space - root.offset;
                 }
             } else if ((plasmoid.location === PlasmaCore.Types.LeftEdge) || (plasmoid.location === PlasmaCore.Types.RightEdge)){
                 if (plasmoid.location === PlasmaCore.Types.LeftEdge) {
@@ -255,13 +255,13 @@ Item{
                 if (noCompositingEdit) {
                     localY = 0;
                 } else if (plasmoid.configuration.panelPosition === Latte.Dock.Justify) {
-                    localY = (dock.height/2) - tempLength/2;
+                    localY = (dock.height/2) - tempLength/2 + root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Top) {
-                    localY = 0;
+                    localY = root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Center) {
-                    localY = (dock.height/2) - tempLength/2;
+                    localY = (dock.height/2) - tempLength/2 + root.offset;
                 } else if (root.panelAlignment === Latte.Dock.Bottom) {
-                    localY = dock.height - mainLayout.height - space;
+                    localY = dock.height - mainLayout.height - space - root.offset;
                 }
             }
         } else {

containment/contents/ui/main.qml

@@ -110,6 +110,9 @@ DragDrop.DropArea {
     property int totalPanelEdgeSpacing: 0 //this is set by PanelBox
     //FIXME: this is not needed any more probably
     property int previousAllTasks: -1    //is used to forbit updateAutomaticIconSize when hovering
+    property int offset: root.isHorizontal ? width * (plasmoid.configuration.offset/100)
+                                           : height * (plasmoid.configuration.offset/100)
+
     property int realSize: iconSize + iconMargin
     property int realPanelSize: 0
     property int realPanelLength: 0
@@ -264,6 +267,7 @@ DragDrop.DropArea {
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignLeft; verticalItemAlignment: Grid.AlignVCenter;
                 anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: root.offset;
             }
         },
         State {
@@ -276,7 +280,8 @@ DragDrop.DropArea {
             }
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignLeft; verticalItemAlignment: Grid.AlignVCenter;
-                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:root.offset;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
             }
         },
         State {
@@ -289,7 +294,8 @@ DragDrop.DropArea {
             }
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignLeft; verticalItemAlignment: Grid.AlignVCenter;
-                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:root.offset;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
             }
         },
         ///Right Edge
@@ -304,6 +310,7 @@ DragDrop.DropArea {
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignRight; verticalItemAlignment: Grid.AlignVCenter;
                 anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: root.offset;
             }
         },
         State {
@@ -316,7 +323,8 @@ DragDrop.DropArea {
             }
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignRight; verticalItemAlignment: Grid.AlignVCenter;
-                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:root.offset;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
             }
         },
         State {
@@ -329,7 +337,8 @@ DragDrop.DropArea {
             }
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignRight; verticalItemAlignment: Grid.AlignVCenter;
-                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:root.offset;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
             }
         },
         ///Bottom Edge
@@ -344,6 +353,7 @@ DragDrop.DropArea {
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignHCenter; verticalItemAlignment: Grid.AlignBottom
                 anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: root.offset; anchors.verticalCenterOffset: 0;
             }
         },
         State {
@@ -356,7 +366,8 @@ DragDrop.DropArea {
             }
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignHCenter; verticalItemAlignment: Grid.AlignBottom
-                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.leftMargin: root.offset;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
             }
         },
         State {
@@ -369,7 +380,8 @@ DragDrop.DropArea {
             }
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignHCenter; verticalItemAlignment: Grid.AlignBottom
-                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.leftMargin: 0;    anchors.rightMargin:root.offset;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
             }
         },
         ///Top Edge
@@ -384,6 +396,7 @@ DragDrop.DropArea {
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignHCenter; verticalItemAlignment: Grid.AlignTop
                 anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: root.offset; anchors.verticalCenterOffset: 0;
             }
         },
         State {
@@ -396,7 +409,8 @@ DragDrop.DropArea {
             }
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignHCenter; verticalItemAlignment: Grid.AlignTop
-                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.leftMargin: root.offset;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
             }
         },
         State {
@@ -409,7 +423,8 @@ DragDrop.DropArea {
             }
             PropertyChanges{
                 target: mainLayout; horizontalItemAlignment: Grid.AlignHCenter; verticalItemAlignment: Grid.AlignTop
-                anchors.leftMargin: 0;    anchors.rightMargin:0;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.leftMargin: 0;    anchors.rightMargin:root.offset;     anchors.topMargin:0;    anchors.bottomMargin:0;
+                anchors.horizontalCenterOffset: 0; anchors.verticalCenterOffset: 0;
             }
         }
     ]
@@ -1286,7 +1301,7 @@ DragDrop.DropArea {
         x: {
             if ( dock && (plasmoid.configuration.panelPosition === Latte.Dock.Justify) && root.isHorizontal
                     && !root.editMode && !root.drawShadowsExternal ){
-                return ((dock.width/2) - (root.maxLength/2))
+                return ((dock.width/2) - (root.maxLength/2) + root.offset)
             } else {
                 if ((visibilityManager.inSlidingIn || visibilityManager.inSlidingOut) && root.isVertical){
                     return;
@@ -1311,7 +1326,7 @@ DragDrop.DropArea {
         y: {
             if ( dock && (plasmoid.configuration.panelPosition === Latte.Dock.Justify) && root.isVertical
                     && !root.editMode && !root.drawShadowsExternal ) {
-                return ((dock.height/2) - (root.maxLength/2));
+                return ((dock.height/2) - (root.maxLength/2) + root.offset);
             } else {
                 if ((visibilityManager.inSlidingIn || visibilityManager.inSlidingOut) && root.isHorizontal){
                     return;

shell/contents/configuration/AppearanceConfig.qml

@@ -384,7 +384,7 @@ PlasmaComponents.Page {
         }
         //! END: Background
 
-        //! BEGIN: Max Length
+        //! BEGIN: Length
         ColumnLayout {
             Layout.fillWidth: true
             spacing: units.smallSpacing
@@ -399,6 +399,11 @@ PlasmaComponents.Page {
                 Layout.rightMargin: units.smallSpacing * 2
                 spacing: units.smallSpacing
 
+                PlasmaComponents.Label {
+                    text: i18n("Max: ")
+                    horizontalAlignment: Text.AlignLeft
+                }
+
                 PlasmaComponents.Slider {
                     Layout.fillWidth: true
                     id: maxLengthSlider
@@ -409,11 +414,37 @@ PlasmaComponents.Page {
                     value: plasmoid.configuration.maxLength
                     minimumValue: 30
                     maximumValue: 100
-                    stepSize: 5
+                    stepSize: 2
 
                     function updateMaxLength() {
                         if (!pressed) {
                             plasmoid.configuration.maxLength = value;
+                            var newTotal = Math.abs(plasmoid.configuration.offset) + value;
+
+                            //centered and justify alignments based on offset and get out of the screen in some cases
+                            var centeredCheck = ((plasmoid.configuration.panelPosition === Latte.Dock.Center)
+                                                 || (plasmoid.configuration.panelPosition === Latte.Dock.Justify))
+                                    && ((Math.abs(plasmoid.configuration.offset) + value/2) > 50);
+
+                            if (newTotal > 100 || centeredCheck) {
+                                if ((plasmoid.configuration.panelPosition === Latte.Dock.Center)
+                                        || (plasmoid.configuration.panelPosition === Latte.Dock.Justify)) {
+
+                                    var suggestedValue = (plasmoid.configuration.offset<0) ? Math.min(0, -(100-value)): Math.max(0, 100-value);
+
+                                    if ((Math.abs(suggestedValue) + value/2) > 50) {
+                                        if (suggestedValue < 0) {
+                                            suggestedValue = - (50 - value/2);
+                                        } else {
+                                            suggestedValue = 50 - value/2;
+                                        }
+                                    }
+
+                                    plasmoid.configuration.offset = suggestedValue;
+                                } else {
+                                    plasmoid.configuration.offset = Math.max(0, 100-value);
+                                }
+                            }
                         }
                     }
 
@@ -432,9 +463,66 @@ PlasmaComponents.Page {
                     Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
                 }
             }
+
+            RowLayout {
+                Layout.fillWidth: true
+                Layout.leftMargin: units.smallSpacing * 2
+                Layout.rightMargin: units.smallSpacing * 2
+                spacing: units.smallSpacing
+
+                PlasmaComponents.Label {
+                    text: i18n("Offset: ")
+                    horizontalAlignment: Text.AlignLeft
                 }
-        //! END: Zoom On Hover
 
+                PlasmaComponents.Slider {
+                    Layout.fillWidth: true
+                    id: offsetSlider
+
+                    valueIndicatorText: i18n("Offset")
+                    valueIndicatorVisible: true
+
+                    value: plasmoid.configuration.offset
+                    minimumValue: ((plasmoid.configuration.panelPosition === Latte.Dock.Center)
+                                   || (plasmoid.configuration.panelPosition === Latte.Dock.Justify)) ? -20 :  0
+                    maximumValue: ((plasmoid.configuration.panelPosition === Latte.Dock.Center)
+                                   || (plasmoid.configuration.panelPosition === Latte.Dock.Justify)) ? 20 :  40
+                    stepSize: 2
+
+                    function updateOffset() {
+                        if (!pressed) {
+                            plasmoid.configuration.offset = value;
+                            var newTotal = Math.abs(value) + plasmoid.configuration.maxLength;
+
+                            //centered and justify alignments based on offset and get out of the screen in some cases
+                            var centeredCheck = ((plasmoid.configuration.panelPosition === Latte.Dock.Center)
+                                                 || (plasmoid.configuration.panelPosition === Latte.Dock.Justify))
+                                    && ((Math.abs(value) + plasmoid.configuration.maxLength/2) > 50);
+                            if (newTotal > 100 || centeredCheck) {
+                                plasmoid.configuration.maxLength = ((plasmoid.configuration.panelPosition === Latte.Dock.Center)
+                                                                    || (plasmoid.configuration.panelPosition === Latte.Dock.Justify)) ?
+                                            2*(50 - Math.abs(value)) :100 - Math.abs(value);
+                            }
+                        }
+                    }
+
+                    onPressedChanged: {
+                        updateOffset();
+                    }
+
+                    Component.onCompleted: {
+                        valueChanged.connect(updateOffset);
+                    }
+                }
+
+                PlasmaComponents.Label {
+                    text: offsetSlider.value + "%"
+                    horizontalAlignment: Text.AlignRight
+                    Layout.minimumWidth: theme.mSize(theme.defaultFont).width * 4
+                }
+            }
+        }
+        //! END: Length
 
         //! BEGIN: Shadows
         ColumnLayout {