improve TasksArea Visual for containment

containment/package/contents/ui/AddWidgetVisual.qml

@@ -24,7 +24,6 @@ import "../code/ColorizerTools.js" as ColorizerTools
 
 Item{
     id: newDroppedLauncherVisual
-    anchors.fill: parent
 
     Rectangle{
         width: Math.min(parent.width, parent.height)
@@ -33,9 +32,9 @@ Item{
 
         radius: Math.max(width,height)/2
 
-        color: theme.backgroundColor // "#aa222222"
+        color: theme.backgroundColor
         border.width: 1
-        border.color: outlineColor // "#ff656565"
+        border.color: outlineColor
 
         property int crossSize: Math.min(0.4*parent.width, 0.4 * parent.height)
 

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

@@ -25,7 +25,6 @@ import QtGraphicalEffects 1.0
 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.plasma.extras 2.0 as PlasmaExtras
 import org.kde.kquickcontrolsaddons 2.0
 
 import org.kde.latte 0.2 as Latte
@@ -728,43 +727,10 @@ Item {
         height: width
     }
 
-    //! The Launchers Area Indicator
-    Rectangle{
+    Loader {
         anchors.fill: parent
-        radius: root.iconSize/10
-
-        property color tempColor: "#aa222222"
-        color: tempColor
-        border.width: 1
-        border.color: "#ff656565"
-
-        opacity: latteApplet && root.addLaunchersMessage ? 1 : 0
-
-        Behavior on opacity{
-            NumberAnimation { duration: 2*root.durationTime*appletItem.animationTime }
-        }
-
-        PlasmaExtras.Heading {
-            width: parent.width
-            height: parent.height
-
-            text: i18n("Tasks Area")
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            wrapMode: Text.WordWrap
-            elide: Text.ElideRight
-            fontSizeMode: Text.Fit
-            color: colorizerManager.textColor
-
-            rotation: {
-                if (root.isHorizontal)
-                    return 0;
-                else if (plasmoid.location === PlasmaCore.Types.LeftEdge)
-                    return -90;
-                else if (plasmoid.location === PlasmaCore.Types.RightEdge)
-                    return 90;
-            }
-        }
+        active: isLattePlasmoid
+        sourceComponent: TasksArea{}
     }
 
     MouseArea{

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

@@ -0,0 +1,82 @@
+/*
+*  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.plasmoid 2.0
+import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.plasma.extras 2.0 as PlasmaExtras
+
+import "../" as RootElements
+
+Rectangle{
+    anchors.fill: parent
+    radius: root.iconSize/10
+    opacity: root.addLaunchersMessage ? 1 : 0
+
+    color: Qt.rgba(theme.backgroundColor.r, theme.backgroundColor.g, theme.backgroundColor.b, 0.75)
+    border.width: 1
+    border.color: outlineColor
+
+    readonly property color outlineColorBase: theme.backgroundColor
+    readonly property real outlineColorBaseBrightness: ColorizerTools.colorBrightness(outlineColorBase)
+    readonly property color outlineColor: {
+        if (outlineColorBaseBrightness > 127.5) {
+            return Qt.darker(outlineColorBase, 1.5);
+        } else {
+            return Qt.lighter(outlineColorBase, 2.2);
+        }
+    }
+
+    Behavior on opacity{
+        NumberAnimation { duration: 2*root.durationTime*appletItem.animationTime }
+    }
+
+    PlasmaExtras.Heading {
+        id: heading
+        width: parent.width
+        height: parent.height * 0.4
+
+        text: i18n("Tasks Area")
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.WordWrap
+        elide: Text.ElideRight
+        fontSizeMode: Text.Fit
+        color: theme.textColor
+
+        rotation: {
+            if (root.isHorizontal)
+                return 0;
+            else if (plasmoid.location === PlasmaCore.Types.LeftEdge)
+                return -90;
+            else if (plasmoid.location === PlasmaCore.Types.RightEdge)
+                return 90;
+        }
+    }
+
+    RootElements.AddWidgetVisual {
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: heading.bottom
+        anchors.topMargin: units.smallSpacing
+
+        width: height
+        height: (parent.height * 0.5) - 2 * units.smallSpacing
+    }
+}

containment/package/contents/ui/main.qml

@@ -1772,7 +1772,9 @@ Item {
         opacity: 0
         z:1500
 
-        AddWidgetVisual{}
+        AddWidgetVisual{
+            anchors.fill: parent
+        }
     }
 
     ///////////////END UI elements