Created a top area based on widgets/toparea.svg

Summary:
This add a top area based on the current theme. If the file is not in the current theme, said area is not shown.

Problem: the header is moved to the right by the Svg element, and I'm not sure how to align it correctly anymore.

Depends on D27695

Test Plan: {F8088058}

Reviewers: #vdg, #plasma, ngraham

Reviewed By: #vdg, ngraham

Subscribers: mart, ngraham, ndavis, plasma-devel

Tags: #plasma

Maniphest Tasks: T10470

Differential Revision: https://phabricator.kde.org/D27189

applets/systemtray/package/contents/ui/ExpandedRepresentation.qml

@@ -40,72 +40,76 @@ ColumnLayout {
     property alias activeApplet: container.activeApplet
     property alias hiddenLayout: hiddenItemsView.layout
 
-    RowLayout {
+    PlasmaExtras.PlasmoidHeading {
-
+
-        PlasmaExtras.Heading {
+        RowLayout {
-            id: heading
+            anchors.fill: parent
-            Layout.fillWidth: true
+
-            level: 1
+            PlasmaExtras.Heading {
-            Layout.leftMargin: {
+                id: heading
-                //Menu mode
+                Layout.fillWidth: true
-                if (!activeApplet && hiddenItemsView.visible && !LayoutMirroring.enabled) {
+                level: 1
-                    return units.smallSpacing;
+                Layout.leftMargin: {
-
+                    //Menu mode
-                //applet open, sidebar
+                    if (!activeApplet && hiddenItemsView.visible && !LayoutMirroring.enabled) {
-                } else if (activeApplet && hiddenItemsView.visible && !LayoutMirroring.enabled) {
+                        return units.smallSpacing;
-                    return hiddenItemsView.width + units.largeSpacing;
+
-
+                    //applet open, sidebar
-                //applet open, no sidebar
+                    } else if (activeApplet && hiddenItemsView.visible && !LayoutMirroring.enabled) {
-                } else {
+                        return hiddenItemsView.width + units.largeSpacing;
-                    return units.smallSpacing;
+
+                    //applet open, no sidebar
+                    } else {
+                        return units.smallSpacing;
+                    }
                 }
-            }
+                Layout.rightMargin: {
-            Layout.rightMargin: {
+                    //Menu mode
-                //Menu mode
+                    if (!activeApplet && hiddenItemsView.visible && LayoutMirroring.enabled) {
-                if (!activeApplet && hiddenItemsView.visible && LayoutMirroring.enabled) {
+                        return units.smallSpacing;
-                    return units.smallSpacing;
+
-
+                    //applet open, sidebar
-                //applet open, sidebar
+                    } else if (activeApplet && hiddenItemsView.visible && LayoutMirroring.enabled) {
-                } else if (activeApplet && hiddenItemsView.visible && LayoutMirroring.enabled) {
+                        return hiddenItemsView.width + units.largeSpacing;
-                    return hiddenItemsView.width + units.largeSpacing;
+
-
+                    //applet open, no sidebar
-                //applet open, no sidebar
+                    } else {
-                } else {
+                        return 0;
-                    return 0;
+                    }
                 }
-            }
 
-            visible: activeApplet
+                visible: activeApplet
-            text: activeApplet ? activeApplet.title : ""
+                text: activeApplet ? activeApplet.title : ""
-            MouseArea {
+                MouseArea {
-                anchors.fill: parent
+                    anchors.fill: parent
-                onClicked: {
+                    onClicked: {
-                    if (activeApplet) {
+                        if (activeApplet) {
-                        activeApplet.expanded = false;
+                            activeApplet.expanded = false;
-                        dialog.visible = true;
+                            dialog.visible = true;
+                        }
                     }
                 }
             }
-        }
 
-        PlasmaExtras.Heading {
+            PlasmaExtras.Heading {
-            id: noAppletHeading
+                id: noAppletHeading
-            visible: !activeApplet
+                visible: !activeApplet
-            Layout.fillWidth: true
+                Layout.fillWidth: true
-            level: 1
+                level: 1
-            text: i18n("Status and Notifications")
+                text: i18n("Status and Notifications")
-        }
+            }
 
-        PlasmaComponents.ToolButton {
+            PlasmaComponents.ToolButton {
-            id: pinButton
+                id: pinButton
-            implicitHeight: Math.round(units.gridUnit * 1.25)
+                implicitHeight: Math.round(units.gridUnit * 1.25)
-            implicitWidth: implicitHeight
+                implicitWidth: implicitHeight
-            checkable: true
+                checkable: true
-            checked: plasmoid.configuration.pin
+                checked: plasmoid.configuration.pin
-            onToggled: plasmoid.configuration.pin = checked
+                onToggled: plasmoid.configuration.pin = checked
-            icon.name: "window-pin"
+                icon.name: "window-pin"
-            PlasmaComponents.ToolTip {
+                PlasmaComponents.ToolTip {
-                text: i18n("Keep Open")
+                    text: i18n("Keep Open")
+                }
             }
         }
     }