new architecture for Indicators

--indicators now support both Back/Front
layers. Back layer is the usual layer
behind the current Item and the Front layer is
a layer above the current Item (overlay)
--update Unity to follow new architecture

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

@@ -32,6 +32,7 @@ import org.kde.latte 0.2 as Latte
 
 import "colorizer" as Colorizer
 import "communicator" as Communicator
+import "indicator" as Indicator
 
 Item {
     id: appletItem
@@ -64,6 +65,7 @@ Item {
     property bool lockZoom: false
 
     property bool indicatorNeedsIconColors: false
+    property bool indicatorProvidesFrontLayer: false
 
     property bool isActive: (isExpanded
                              && applet.pluginName !== root.plasmoidName
@@ -495,9 +497,14 @@ Item {
             width: wrapper.width
             height: wrapper.height
 
+            Indicator.Manager{
+                id: indicatorManager
+            }
+
             //! Indicator Back Layer
-            IndicatorLoader{
+            Indicator.Loader{
                 id: indicatorBackLayer
+                manager: indicatorManager
             }
 
             ItemWrapper{
@@ -527,6 +534,13 @@ Item {
                 }
             }
 
+            //! Indicator Front Layer
+            Indicator.Loader{
+                id: indicatorFrontLayer
+                manager: indicatorManager
+                isBackLayer: false
+            }
+
             //! Applet Shortcut Visual Badge
             ShortcutBadge{
                 anchors.fill: wrapper

containment/package/contents/ui/applet/indicator/Loader.qml

@@ -0,0 +1,84 @@
+/*
+*  Copyright 2019  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.latte 0.2 as Latte
+
+Loader{
+    id: indicatorLoader
+    anchors.fill: parent
+
+    active: manager && manager.active && (isBackLayer || (!isBackLayer && indicatorProvidesFrontLayer))
+    sourceComponent: manager.sourceComponent
+
+    property bool isBackLayer: true
+    property Item manager
+
+    //! Used when the indicators require more thickness in the view mask
+    //! e.g. when the Latte indicators are glowing in reverse order
+    Binding {
+        target: visibilityManager
+        property: "indicatorsExtraThickMask"
+        value: {
+            if (indicatorLoader.isBackLayer
+                    && indicatorLoader.active
+                    && indicatorLoader.item
+                    && indicatorLoader.item.hasOwnProperty("extraMaskThickness")) {
+                return indicatorLoader.item.extraMaskThickness;
+            }
+
+            return 0;
+        }
+    }
+
+    //! Used when the indicators need icon colors in orde to be painted
+    //! properly, for example the Unity indicator
+    Binding {
+        target: appletItem
+        property: "indicatorNeedsIconColors"
+        value: {
+            if (indicatorLoader.isBackLayer
+                    && indicatorLoader.active
+                    && indicatorLoader.item
+                    && indicatorLoader.item.hasOwnProperty("needsIconColors")) {
+                return indicatorLoader.item.needsIconColors;
+            }
+
+            return false;
+        }
+    }
+
+    //! Used when the indicators property also a front layer
+    //! to be drawn above the icon
+    Binding {
+        target: appletItem
+        property: "indicatorProvidesFrontLayer"
+        value: {
+            if (indicatorLoader.isBackLayer
+                    && indicatorLoader.active
+                    && indicatorLoader.item
+                    && indicatorLoader.item.hasOwnProperty("providesFrontLayer")) {
+                return indicatorLoader.item.providesFrontLayer;
+            }
+
+            return false;
+        }
+    }
+}

containment/package/contents/ui/applet/indicator/Manager.qml

@@ -21,14 +21,14 @@ import QtQuick 2.7
 
 import org.kde.latte 0.2 as Latte
 
-Loader{
-    id: indicatorLoader
+Item{
+    id: indicatorManager
     anchors.fill: parent
 
-    active: (root.indicatorsEnabled && appletItem.communicatorAlias.activeIndicatorEnabled && root.indicatorsForApplets)
-            || (!root.indicatorsForApplets && appletItem.communicatorAlias.overlayLatteIconIsActive)
+    readonly property bool active: (root.indicatorsEnabled && appletItem.communicatorAlias.activeIndicatorEnabled && root.indicatorsForApplets)
+                                   || (!root.indicatorsForApplets && appletItem.communicatorAlias.overlayLatteIconIsActive)
 
-    sourceComponent: {
+    readonly property Component sourceComponent: {
         if (!root.indicatorsForApplets && appletItem.communicatorAlias.overlayLatteIconIsActive) {
             return plasmaStyleIndicator;
         }
@@ -101,36 +101,4 @@ Loader{
         id:unityStyleIndicator
         Latte.UnityIndicator{}
     }
-
-    //! Used when the indicators require more thickness in the view mask
-    //! e.g. when the Latte indicators are glowing in reverse order
-    Binding {
-        target: visibilityManager
-        property: "indicatorsExtraThickMask"
-        value: {
-            if (indicatorLoader.active
-                    && indicatorLoader.item
-                    && indicatorLoader.item.hasOwnProperty("extraMaskThickness")) {
-                return indicatorLoader.item.extraMaskThickness;
-            }
-
-            return 0;
-        }
-    }
-
-    //! Used when the indicators need icon colors in orde to be painted
-    //! properly, for example the Unity indicator
-    Binding {
-        target: appletItem
-        property: "indicatorNeedsIconColors"
-        value: {
-            if (indicatorLoader.active
-                    && indicatorLoader.item
-                    && indicatorLoader.item.hasOwnProperty("needsIconColors")) {
-                return indicatorLoader.item.needsIconColors;
-            }
-
-            return false;
-        }
-    }
 }

liblatte2/qml/indicators/UnityIndicator.qml

@@ -29,272 +29,294 @@ import "../code/ColorizerTools.js" as ColorizerTools
 
 Item{
     id: indicatorItem
+    property Item parentItem: parent.manager
     property Item rootItem: parent
 
     readonly property bool needsIconColors: true
+    readonly property bool providesFrontLayer: true
 
     readonly property int thickness: plasmoid.formFactor === PlasmaCore.Types.Vertical ? width : height
-    readonly property int freedThickness: (thickness - rectangleItem.size) / 2
 
-    readonly property int shownWindows: rootItem.windowsCount - rootItem.windowsMinimizedCount
-    readonly property int maxDrawnMinimizedWindows: shownWindows > 0 ? Math.min(rootItem.windowsMinimizedCount,2) : 3
+    readonly property int shownWindows: parentItem.windowsCount - parentItem.windowsMinimizedCount
+    readonly property int maxDrawnMinimizedWindows: shownWindows > 0 ? Math.min(parentItem.windowsMinimizedCount,2) : 3
 
     readonly property real backColorBrightness: ColorizerTools.colorBrightness(theme.backgroundColor)
     readonly property color backgroundColor: backColorBrightness < 127 ? theme.backgroundColor : theme.textColor
 
-    Item{
-        id: rectangleItem
-        width: rootItem.isTask ? Math.min(parent.width, parent.height) : parent.width
-        height: rootItem.isTask ? width : parent.height
-        anchors.centerIn: parent
+    //! Background Layer
+    Loader{
+        id: backLayer
+        anchors.fill: parent
+        active: rootItem.isBackLayer
 
-        property bool isActive: rootItem.isActive || (rootItem.isWindow && rootItem.hasActive)
-        readonly property int size: Math.min(parent.width, parent.height)
+        sourceComponent: Item{
+            Item{
+                id: rectangleItem
+                width: parentItem.isTask ? Math.min(parent.width, parent.height) : parent.width
+                height: parentItem.isTask ? width : parent.height
+                anchors.centerIn: parent
 
-        Rectangle {
-            id: unityRect
-            anchors.fill: parent
-            visible: rootItem.isActive || (rootItem.isWindow && rootItem.hasShown)
+                property bool isActive: parentItem.isActive || (parentItem.isWindow && parentItem.hasActive)
+                readonly property int size: Math.min(parent.width, parent.height)
 
-            radius: rootItem.currentIconSize / 12
-            color: rootItem.backgroundColor
-            clip: true
+                Rectangle {
+                    id: unityRect
+                    anchors.fill: parent
+                    visible: parentItem.isActive || (parentItem.isWindow && parentItem.hasShown)
+
+                    radius: parentItem.currentIconSize / 12
+                    color: parentItem.backgroundColor
+                    clip: true
+                }
+
+                RadialGradient{
+                    id: glowGradient
+                    anchors.verticalCenter: parent.top
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    width: parent.width - unityRect.anchors.margins * 2 - 1
+                    height: (width * 0.85) - unityRect.anchors.margins * 2 - 1
+                    visible: false
+
+                    gradient: Gradient {
+                        GradientStop { position: 0.0;
+                            color: {
+                                if (parentItem.isMinimized) {
+                                    return "#aafcfcfc";
+                                }
+
+                                return parentItem.glowColor;
+                            }
+                        }
+                        GradientStop { position: 0.6; color: "transparent" }
+                    }
+                }
+
+                Item {
+                    id: gradientMask
+                    anchors.fill: glowGradient
+
+                    Rectangle {
+                        anchors.top: gradientMask.verticalCenter
+                        anchors.topMargin: unityRect.anchors.margins
+                        width: glowGradient.width
+                        height: glowGradient.height / 2
+                        radius: unityRect.radius
+                    }
+
+                    visible: false
+                }
+
+                OpacityMask {
+                    anchors.fill: glowGradient
+                    source: glowGradient
+                    maskSource: gradientMask
+                    visible: unityRect.visible || borderRectangle.visible
+                }
+
+                Rectangle {
+                    id: borderRectangle
+                    anchors.fill: parent
+                    visible: (parentItem.isTask && parentItem.isWindow) || (parentItem.isApplet && parentItem.isActive)
+                    color: "transparent"
+                    border.width: 1
+                    border.color: "#303030"
+                    radius: unityRect.radius
+                    clip: true
+
+                    Rectangle {
+                        anchors.fill: parent
+                        anchors.margins: parent.border.width
+                        radius: unityRect.radius
+                        color: "transparent"
+                        border.width: 1
+                        border.color: "#25dedede"
+                    }
+                }
+            }
         }
+    }
 
-        RadialGradient{
-            id: glowGradient
-            anchors.verticalCenter: parent.top
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: parent.width - unityRect.anchors.margins * 2 - 1
-            height: (width * 0.85) - unityRect.anchors.margins * 2 - 1
-            visible: false
 
-            gradient: Gradient {
-                GradientStop { position: 0.0;
-                    color: {
-                        if (rootItem.isMinimized) {
-                            return "#aafcfcfc";
+    //! Foreground Layer to draw Triangles
+    Loader{
+        id: frontLayer
+        anchors.fill: parent
+        active: !rootItem.isBackLayer
+
+        sourceComponent: Item {
+            anchors.fill: parent
+
+            Row {
+                id: upperIndicators
+                spacing: 2
+                readonly property bool alwaysActive: true
+                readonly property bool reversed: true
+
+                Repeater {
+                    model: parentItem.isActive || parentItem.hasActive ? 1 : 0
+                    delegate: triangleComponent
+                }
+            }
+
+            Grid {
+                id: lowerIndicators
+                rows: plasmoid.formFactor === PlasmaCore.Types.Horizontal ? 1 : Math.min(3, parentItem.windowsCount)
+                columns: plasmoid.formFactor === PlasmaCore.Types.Horizontal ? Math.min(3, parentItem.windowsCount) : 1
+                rowSpacing: 2
+                columnSpacing: 2
+
+                readonly property bool alwaysActive: false
+                readonly property bool reversed: false
+
+                Repeater {
+                    model: Math.min(3, parentItem.windowsCount)
+                    delegate: triangleComponent
+                }
+            }
+
+
+            //! Triangle Indicator Component
+            Component {
+                id: triangleComponent
+                Canvas {
+                    id: canvas
+                    width: parentItem.currentIconSize / 6
+                    height: width
+
+                    rotation: {
+                        if (!parent.reversed) {
+                            if (plasmoid.location === PlasmaCore.Types.BottomEdge) {
+                                return 0;
+                            } else if (plasmoid.location === PlasmaCore.Types.LeftEdge) {
+                                return 90;
+                            } else if (plasmoid.location === PlasmaCore.Types.TopEdge) {
+                                return 180;
+                            } else if (plasmoid.location === PlasmaCore.Types.RightEdge) {
+                                return 270;
+                            }
+                        } else {
+                            if (plasmoid.location === PlasmaCore.Types.BottomEdge) {
+                                return 180;
+                            } else if (plasmoid.location === PlasmaCore.Types.LeftEdge) {
+                                return 270;
+                            } else if (plasmoid.location === PlasmaCore.Types.TopEdge) {
+                                return 0;
+                            } else if (plasmoid.location === PlasmaCore.Types.RightEdge) {
+                                return 90;
+                            }
                         }
 
-                        return rootItem.glowColor;
-                    }
-                }
-                GradientStop { position: 0.6; color: "transparent" }
-            }
-        }
-
-        Item {
-            id: gradientMask
-            anchors.fill: glowGradient
-
-            Rectangle {
-                anchors.top: gradientMask.verticalCenter
-                anchors.topMargin: unityRect.anchors.margins
-                width: glowGradient.width
-                height: glowGradient.height / 2
-                radius: unityRect.radius
-            }
-
-            visible: false
-        }
-
-        OpacityMask {
-            anchors.fill: glowGradient
-            source: glowGradient
-            maskSource: gradientMask
-            visible: unityRect.visible || borderRectangle.visible
-        }
-
-        Rectangle {
-            id: borderRectangle
-            anchors.fill: parent
-            visible: (rootItem.isTask && rootItem.isWindow) || (rootItem.isApplet && rootItem.isActive)
-            color: "transparent"
-            border.width: 1
-            border.color: "#303030"
-            radius: unityRect.radius
-            clip: true
-
-            Rectangle {
-                anchors.fill: parent
-                anchors.margins: parent.border.width
-                radius: unityRect.radius
-                color: "transparent"
-                border.width: 1
-                border.color: "#25dedede"
-            }
-        }
-    }
-
-    Row {
-        id: upperIndicators
-        spacing: 2
-        readonly property bool alwaysActive: true
-        readonly property bool reversed: true
-
-        Repeater {
-            model: rootItem.isActive || rootItem.hasActive ? 1 : 0
-            delegate: triangleComponent
-        }
-    }
-
-    Grid {
-        id: lowerIndicators
-        rows: plasmoid.formFactor === PlasmaCore.Types.Horizontal ? 1 : Math.min(3, rootItem.windowsCount)
-        columns: plasmoid.formFactor === PlasmaCore.Types.Horizontal ? Math.min(3, rootItem.windowsCount) : 1
-        rowSpacing: 2
-        columnSpacing: 2
-
-        readonly property bool alwaysActive: false
-        readonly property bool reversed: false
-
-        Repeater {
-            model: Math.min(3, rootItem.windowsCount)
-            delegate: triangleComponent
-        }
-    }
-
-
-    //! Triangle Indicator Component
-    Component {
-        id: triangleComponent
-        Canvas {
-            id: canvas
-            width: rootItem.currentIconSize / 6
-            height: width
-
-            rotation: {
-                if (!parent.reversed) {
-                    if (plasmoid.location === PlasmaCore.Types.BottomEdge) {
                         return 0;
-                    } else if (plasmoid.location === PlasmaCore.Types.LeftEdge) {
-                        return 90;
-                    } else if (plasmoid.location === PlasmaCore.Types.TopEdge) {
-                        return 180;
-                    } else if (plasmoid.location === PlasmaCore.Types.RightEdge) {
-                        return 270;
                     }
-                } else {
-                    if (plasmoid.location === PlasmaCore.Types.BottomEdge) {
-                        return 180;
-                    } else if (plasmoid.location === PlasmaCore.Types.LeftEdge) {
-                        return 270;
-                    } else if (plasmoid.location === PlasmaCore.Types.TopEdge) {
-                        return 0;
-                    } else if (plasmoid.location === PlasmaCore.Types.RightEdge) {
-                        return 90;
+
+                    property color drawColor:  theme.buttonFocusColor;
+                    property bool fillTriangle: {
+                        if (!parent.alwaysActive && parentItem.windowsMinimizedCount!==0
+                                && ((index < maxDrawnMinimizedWindows)
+                                    || (parentItem.windowsCount === parentItem.windowsMinimizedCount))) {
+                            return false;
+                        }
+
+                        return true;
+                    }
+
+                    readonly property int lineWidth: 2
+
+                    onFillTriangleChanged: requestPaint();
+                    onDrawColorChanged: requestPaint();
+
+                    onPaint: {
+                        var ctx = getContext('2d');
+                        ctx.clearRect(0, 0, canvas.width, canvas.height);
+                        ctx.strokeStyle = indicatorItem.backgroundColor;
+                        ctx.lineWidth = lineWidth;
+
+                        ctx.beginPath();
+                        ctx.moveTo(0, canvas.height);
+                        ctx.lineTo(canvas.width/2, 0);
+                        ctx.lineTo(canvas.width, canvas.height);
+                        ctx.lineTo(0, canvas.height);
+                        ctx.closePath();
+                        ctx.stroke();
+
+                        ctx.strokeStyle = drawColor;
+                        ctx.fillStyle = fillTriangle ? drawColor : indicatorItem.backgroundColor;
+
+                        ctx.beginPath();
+                        ctx.moveTo(lineWidth, canvas.height - lineWidth);
+                        ctx.lineTo(canvas.width/2, lineWidth);
+                        ctx.lineTo(canvas.width - lineWidth, canvas.height - lineWidth);
+                        ctx.lineTo(lineWidth, canvas.height - lineWidth);
+                        ctx.closePath();
+                        ctx.stroke();
+                        ctx.fill();
                     }
                 }
-
-                return 0;
             }
 
-            property color drawColor:  theme.buttonFocusColor;
-            property bool fillTriangle: {
-                if (!parent.alwaysActive && rootItem.windowsMinimizedCount!==0
-                        && ((index < maxDrawnMinimizedWindows)
-                            || (rootItem.windowsCount === rootItem.windowsMinimizedCount))) {
-                    return false;
+            //! States
+            states: [
+                State {
+                    name: "bottom"
+                    when: (plasmoid.location === PlasmaCore.Types.BottomEdge)
+
+                    AnchorChanges {
+                        target: lowerIndicators
+                        anchors{ top:undefined; bottom:parent.bottom; left:undefined; right:undefined;
+                            horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
+                    }
+                    AnchorChanges {
+                        target: upperIndicators
+                        anchors{ top:parent.top; bottom:undefined; left:undefined; right:undefined;
+                            horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
+                    }
+                },
+                State {
+                    name: "top"
+                    when: (plasmoid.location === PlasmaCore.Types.TopEdge)
+
+                    AnchorChanges {
+                        target: lowerIndicators
+                        anchors{ top:parent.top; bottom:undefined; left:undefined; right:undefined;
+                            horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
+                    }
+                    AnchorChanges {
+                        target: upperIndicators
+                        anchors{ top:undefined; bottom:parent.bottom; left:undefined; right:undefined;
+                            horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
+                    }
+                },
+                State {
+                    name: "left"
+                    when: (plasmoid.location === PlasmaCore.Types.LeftEdge)
+
+                    AnchorChanges {
+                        target: lowerIndicators
+                        anchors{ top:undefined; bottom:undefined; left:parent.left; right:undefined;
+                            horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
+                    }
+                    AnchorChanges {
+                        target: upperIndicators
+                        anchors{ top:undefined; bottom:undefined; left:undefined; right:parent.right;
+                            horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
+                    }
+                },
+                State {
+                    name: "right"
+                    when: (plasmoid.location === PlasmaCore.Types.RightEdge)
+
+                    AnchorChanges {
+                        target: lowerIndicators
+                        anchors{ top:undefined; bottom:undefined; left:undefined; right:parent.right;
+                            horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
+                    }
+                    AnchorChanges {
+                        target: upperIndicators
+                        anchors{ top:undefined; bottom:undefined; left:parent.left; right:undefined;
+                            horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
+                    }
                 }
-
-                return true;
-            }
-
-            readonly property int lineWidth: 2
-
-            onFillTriangleChanged: requestPaint();
-            onDrawColorChanged: requestPaint();
-
-            onPaint: {
-                var ctx = getContext('2d');
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                ctx.strokeStyle = indicatorItem.backgroundColor;
-                ctx.lineWidth = lineWidth;
-
-                ctx.beginPath();
-                ctx.moveTo(0, canvas.height);
-                ctx.lineTo(canvas.width/2, 0);
-                ctx.lineTo(canvas.width, canvas.height);
-                ctx.lineTo(0, canvas.height);
-                ctx.closePath();
-                ctx.stroke();
-
-                ctx.strokeStyle = drawColor;
-                ctx.fillStyle = fillTriangle ? drawColor : indicatorItem.backgroundColor;
-
-                ctx.beginPath();
-                ctx.moveTo(lineWidth, canvas.height - lineWidth);
-                ctx.lineTo(canvas.width/2, lineWidth);
-                ctx.lineTo(canvas.width - lineWidth, canvas.height - lineWidth);
-                ctx.lineTo(lineWidth, canvas.height - lineWidth);
-                ctx.closePath();
-                ctx.stroke();
-                ctx.fill();
-            }
+            ]
         }
     }
-
-    //! States
-    states: [
-        State {
-            name: "bottom"
-            when: (plasmoid.location === PlasmaCore.Types.BottomEdge)
-
-            AnchorChanges {
-                target: lowerIndicators
-                anchors{ top:undefined; bottom:parent.bottom; left:undefined; right:undefined;
-                    horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
-            }
-            AnchorChanges {
-                target: upperIndicators
-                anchors{ top:parent.top; bottom:undefined; left:undefined; right:undefined;
-                    horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
-            }
-        },
-        State {
-            name: "top"
-            when: (plasmoid.location === PlasmaCore.Types.TopEdge)
-
-            AnchorChanges {
-                target: lowerIndicators
-                anchors{ top:parent.top; bottom:undefined; left:undefined; right:undefined;
-                    horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
-            }
-            AnchorChanges {
-                target: upperIndicators
-                anchors{ top:undefined; bottom:parent.bottom; left:undefined; right:undefined;
-                    horizontalCenter:parent.horizontalCenter; verticalCenter:undefined}
-            }
-        },
-        State {
-            name: "left"
-            when: (plasmoid.location === PlasmaCore.Types.LeftEdge)
-
-            AnchorChanges {
-                target: lowerIndicators
-                anchors{ top:undefined; bottom:undefined; left:parent.left; right:undefined;
-                    horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
-            }
-            AnchorChanges {
-                target: upperIndicators
-                anchors{ top:undefined; bottom:undefined; left:undefined; right:parent.right;
-                    horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
-            }
-        },
-        State {
-            name: "right"
-            when: (plasmoid.location === PlasmaCore.Types.RightEdge)
-
-            AnchorChanges {
-                target: lowerIndicators
-                anchors{ top:undefined; bottom:undefined; left:undefined; right:parent.right;
-                    horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
-            }
-            AnchorChanges {
-                target: upperIndicators
-                anchors{ top:undefined; bottom:undefined; left:parent.left; right:undefined;
-                    horizontalCenter:undefined; verticalCenter:parent.verticalCenter}
-            }
-        }
-    ]
 }

plasmoid/package/contents/ui/task/TaskItem.qml

@@ -31,6 +31,7 @@ import org.kde.plasma.private.taskmanager 0.1 as TaskManagerApplet
 import org.kde.latte 0.2 as Latte
 
 import "animations" as TaskAnimations
+import "indicator" as Indicator
 
 MouseArea{
     id: taskItem
@@ -104,6 +105,7 @@ MouseArea{
     property bool inRemoveStage: false
 
     property bool indicatorNeedsIconColors: false
+    property bool indicatorProvidesFrontLayer: false
 
     property bool isAbleToShowPreview: true
     property bool isActive: (IsActive === true) ? true : false
@@ -422,9 +424,22 @@ MouseArea{
             width: wrapper.width
             height: wrapper.height
 
-            IndicatorLoader{id: indicatorBackLayer}
+            Indicator.Manager{
+                id: indicatorManager
+            }
+
+            Indicator.Loader{
+                id: indicatorBackLayer
+                manager: indicatorManager
+            }
 
             Wrapper{id: wrapper}
+
+            Indicator.Loader{
+                id: indicatorFrontLayer
+                manager: indicatorManager
+                isBackLayer: false
+            }
         }
 
         // a hidden spacer on the right for the last item to add stability

plasmoid/package/contents/ui/task/indicator/Loader.qml

@@ -0,0 +1,96 @@
+/*
+*  Copyright 2019  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
+
+import org.kde.latte 0.2 as Latte
+
+Loader {
+    id: indicatorLoader
+    anchors.bottom: (root.position === PlasmaCore.Types.BottomPositioned) ? parent.bottom : undefined
+    anchors.top: (root.position === PlasmaCore.Types.TopPositioned) ? parent.top : undefined
+    anchors.left: (root.position === PlasmaCore.Types.LeftPositioned) ? parent.left : undefined
+    anchors.right: (root.position === PlasmaCore.Types.RightPositioned) ? parent.right : undefined
+
+    anchors.horizontalCenter: !root.vertical ? parent.horizontalCenter : undefined
+    anchors.verticalCenter: root.vertical ? parent.verticalCenter : undefined
+
+    property bool isBackLayer: true
+    property Item manager
+
+    active: manager && manager.active && (isBackLayer || (!isBackLayer && taskItem.indicatorProvidesFrontLayer))
+    sourceComponent: manager.sourceComponent
+
+    width: {
+        if (locked) {
+            return visualLockedWidth;
+        }
+
+        return !root.vertical ? taskItem.wrapperAlias.width - 2*taskItem.wrapperAlias.mScale*root.lengthExtMargin : taskItem.wrapperAlias.width;
+    }
+
+    height: {
+        if (locked) {
+            return visualLockedHeight;
+        }
+
+        return root.vertical ? taskItem.wrapperAlias.height - 2*taskItem.wrapperAlias.mScale*root.lengthExtMargin : taskItem.wrapperAlias.height;
+    }
+
+    readonly property bool locked: inAttentionAnimation || inNewWindowAnimation
+
+    property real visualLockedWidth: root.iconSize + root.internalWidthMargins
+    property real visualLockedHeight: root.iconSize + root.internalHeightMargins
+
+    //! Used when the indicators need icon colors in orde to be painted
+    //! properly, for example the Unity indicator
+    Binding {
+        target: taskItem
+        property: "indicatorNeedsIconColors"
+        value: {
+            if (indicatorLoader.isBackLayer
+                    && indicatorLoader.active
+                    && indicatorLoader.item
+                    && indicatorLoader.item.hasOwnProperty("needsIconColors")) {
+                return indicatorLoader.item.needsIconColors;
+            }
+
+            return false;
+        }
+    }
+
+    //! Used when the indicators property also a front layer
+    //! to be drawn above the icon
+    Binding {
+        target: taskItem
+        property: "indicatorProvidesFrontLayer"
+        value: {
+            if (indicatorLoader.isBackLayer
+                    && indicatorLoader.active
+                    && indicatorLoader.item
+                    && indicatorLoader.item.hasOwnProperty("providesFrontLayer")) {
+                return indicatorLoader.item.providesFrontLayer;
+            }
+
+            return false;
+        }
+    }
+}

plasmoid/package/contents/ui/task/indicator/Manager.qml

@@ -23,40 +23,12 @@ import org.kde.plasma.core 2.0 as PlasmaCore
 
 import org.kde.latte 0.2 as Latte
 
-Loader {
-    id: indicatorLoader
-    anchors.bottom: (root.position === PlasmaCore.Types.BottomPositioned) ? parent.bottom : undefined
-    anchors.top: (root.position === PlasmaCore.Types.TopPositioned) ? parent.top : undefined
-    anchors.left: (root.position === PlasmaCore.Types.LeftPositioned) ? parent.left : undefined
-    anchors.right: (root.position === PlasmaCore.Types.RightPositioned) ? parent.right : undefined
-
-    anchors.horizontalCenter: !root.vertical ? parent.horizontalCenter : undefined
-    anchors.verticalCenter: root.vertical ? parent.verticalCenter : undefined
-
-    width: {
-        if (locked) {
-            return visualLockedWidth;
-        }
-
-        return !root.vertical ? taskItem.wrapperAlias.width - 2*taskItem.wrapperAlias.mScale*root.lengthExtMargin : taskItem.wrapperAlias.width;
-    }
-
-    height: {
-        if (locked) {
-            return visualLockedHeight;
-        }
-
-        return root.vertical ? taskItem.wrapperAlias.height - 2*taskItem.wrapperAlias.mScale*root.lengthExtMargin : taskItem.wrapperAlias.height;
-    }
-
-    active: root.indicatorsEnabled
-
+Item {
+    id: indicatorManager
+    readonly property bool active: root.indicatorsEnabled
     readonly property bool locked: inAttentionAnimation || inNewWindowAnimation
 
-    property real visualLockedWidth: root.iconSize + root.internalWidthMargins
-    property real visualLockedHeight: root.iconSize + root.internalHeightMargins
-
-    /* Indicators Properties in order use them*/
+    /* Indicators Properties in order for indicators to use them*/
     readonly property bool isTask: true
     readonly property bool isApplet: false
 
@@ -98,7 +70,7 @@ Loader {
     property color backgroundColor: taskItem.wrapperAlias.backgroundColor
     property color glowColor: taskItem.wrapperAlias.glowColor
 
-    sourceComponent: {
+    readonly property Component sourceComponent: {
         switch (root.indicatorStyle) {
         case Latte.Types.LatteIndicator:
             return latteIndicatorComponent;
@@ -125,20 +97,4 @@ Loader {
         id:unityIndicatorComponent
         Latte.UnityIndicator{}
     }
-
-    //! Used when the indicators need icon colors in orde to be painted
-    //! properly, for example the Unity indicator
-    Binding {
-        target: taskItem
-        property: "indicatorNeedsIconColors"
-        value: {
-            if (indicatorLoader.active
-                    && indicatorLoader.item
-                    && indicatorLoader.item.hasOwnProperty("needsIconColors")) {
-                return indicatorLoader.item.needsIconColors;
-            }
-
-            return false;
-        }
-    }
 }