show applet paddings inConfigureApplets mode

containment/package/contents/ui/applet/AppletItem.qml

@@ -768,6 +768,14 @@ Item {
                 }
             }
 
+            //! InConfigureApplets visual paddings
+            Loader {
+                anchors.fill: _wrapper
+                active: root.inConfigureAppletsMode
+                sourceComponent: PaddingsInConfigureApplets{}
+            }
+
+
             ItemWrapper{
                 id: _wrapper
 

containment/package/contents/ui/applet/ItemWrapper.qml

@@ -111,6 +111,9 @@ Item{
 
     property real zoomScale: 1
 
+    readonly property alias headThicknessMargin: _wrapperContainer.headThicknessMargin
+    readonly property alias tailThicknessMargin: _wrapperContainer.tailThicknessMargin
+
     property int index: appletItem.index
 
     property Item wrapperContainer: _wrapperContainer
@@ -300,6 +303,7 @@ Item{
         }
     }
 
+    //! Applet Main Container
     Item{
         id:_wrapperContainer
         width: root.isHorizontal ? _length : _thickness
@@ -310,7 +314,8 @@ Item{
         property int _thickness:0 // through Binding to avoid binding loops
 
         readonly property int appliedEdgeMargin: appletItem.screenEdgeMarginSupported ? 0 : appletItem.metrics.margin.screenEdge
-        readonly property int tailThicknessMargin: appliedEdgeMargin + (wrapper.zoomScaleThickness * metrics.margin.thickness)
+        readonly property int tailThicknessMargin: appletItem.screenEdgeMarginSupported ? 0 : appliedEdgeMargin + (wrapper.zoomScaleThickness * metrics.margin.thickness)
+        readonly property int headThicknessMargin: appletItem.canFillThickness || appletItem.screenEdgeMarginSupported ? 0 : appletItem.metrics.margin.thickness
 
         Binding {
             target: _wrapperContainer

containment/package/contents/ui/applet/PaddingsInConfigureApplets.qml

@@ -0,0 +1,88 @@
+/*
+*  Copyright 2020  Michail Vourlakos <mvourlakos@gmail.com>
+*
+*  This file is part of Latte-Dock
+*
+*  Latte-Dock is free software; you can redistribute it and/or
+*  modify it under the terms of the GNU General Public License as
+*  published by the Free Software Foundation; either version 2 of
+*  the License, or (at your option) any later version.
+*
+*  Latte-Dock is distributed in the hope that it will be useful,
+*  but WITHOUT ANY WARRANTY; without even the implied warranty of
+*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+*  GNU General Public License for more details.
+*
+*  You should have received a copy of the GNU General Public License
+*  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import QtQuick 2.7
+import org.kde.plasma.core 2.0 as PlasmaCore
+
+
+Item {
+
+    readonly property int thickness: wrapper.marginsThickness / 2
+    readonly property int length: root.isHorizontal ? wrapper.width : wrapper.height
+
+    Rectangle {
+        id: headPadding
+        width: root.isHorizontal ? length : wrapper.headThicknessMargin
+        height: root.isHorizontal ? wrapper.headThicknessMargin : length
+        color: colorizerManager.highlightColor
+
+        states:[
+            State{
+                name: "horizontal"
+                when: root.isHorizontal
+
+                AnchorChanges{
+                    target: headPadding
+                    anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: undefined;
+                    anchors.right: undefined; anchors.left: undefined; anchors.top: parent.top; anchors.bottom: undefined;
+                }
+            },
+            State{
+                name: "vertical"
+                when: root.isVertical
+
+                AnchorChanges{
+                    target: headPadding
+                    anchors.horizontalCenter: undefined; anchors.verticalCenter: parent.verticalCenter;
+                    anchors.right: parent.right; anchors.left: undefined; anchors.top: undefined; anchors.bottom: undefined;
+                }
+            }
+        ]
+    }
+
+    Rectangle {
+        id: tailPadding
+        width: root.isHorizontal ? length : wrapper.tailThicknessMargin
+        height: root.isHorizontal ? wrapper.tailThicknessMargin : length
+        color: colorizerManager.highlightColor
+
+        states:[
+            State{
+                name: "horizontal"
+                when: root.isHorizontal
+
+                AnchorChanges{
+                    target: tailPadding
+                    anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: undefined;
+                    anchors.right: undefined; anchors.left: undefined; anchors.top: undefined; anchors.bottom: parent.bottom;
+                }                
+            },
+            State{
+                name: "vertical"
+                when: root.isVertical
+
+                AnchorChanges{
+                    target: tailPadding
+                    anchors.horizontalCenter: undefined; anchors.verticalCenter: parent.verticalCenter;
+                    anchors.right: undefined; anchors.left: parent.left; anchors.top: undefined; anchors.bottom: undefined;
+                }
+            }
+        ]
+    }
+}