[applets/systemtray] Rewrite popups with layouts

Summary:
Currently the code that draws plasmoid popups utilizes an anchor based approach.

I think layouts are a more elegant solution so this patch makes use of them.

Test Plan:
{F7616902}

{F7616901}

{F7640510}

Reviewers: #plasma, #vdg, ngraham, mart

Reviewed By: #plasma, #vdg, ngraham, mart

Subscribers: safaalfulaij, manueljlin, ognarb, ngraham, kmaterka, mart, GB_2, plasma-devel

Tags: #plasma

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

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

@@ -17,15 +17,15 @@
  *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import QtQuick 2.1
+import QtQuick 2.13
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.13
+
 import org.kde.plasma.core 2.0 as PlasmaCore
-import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.kde.plasma.components 3.0 as PlasmaComponents
 import org.kde.plasma.extras 2.0 as PlasmaExtras
 
-Item {
+ColumnLayout {
     id: expandedRepresentation
-
     //set width/height to avoid an useless Dialog resize
     width: Layout.minimumWidth
     height: Layout.minimumHeight
@@ -33,46 +33,44 @@ Item {
     Layout.minimumHeight: units.gridUnit * 21
     Layout.preferredWidth: Layout.minimumWidth
     Layout.preferredHeight: Layout.minimumHeight * 1.5
+    spacing: 0 // avoid gap between title and content
 
     property alias activeApplet: container.activeApplet
     property alias hiddenLayout: hiddenItemsView.layout
 
-    PlasmaComponents.ToolButton {
+    RowLayout {
-        id: pinButton
+        Layout.maximumWidth: parent.width //otherwise the pin button disappears in noApplet mode
-        anchors.right: parent.right
-        width: Math.round(units.gridUnit * 1.25)
-        height: width
-        checkable: true
-        checked: plasmoid.configuration.pin
-        onCheckedChanged: plasmoid.configuration.pin = checked
-        iconSource: "window-pin"
-        z: 2
-        tooltip: i18n("Keep Open")
-    }
 
         PlasmaExtras.Heading {
             id: heading
             level: 1
-
+            Layout.leftMargin: {
-        anchors {
-            left: parent.left
-            top: parent.top
-            right: parent.right
-            topMargin: hiddenItemsView.visible ? units.smallSpacing : 0
-            leftMargin: {
                 //Menu mode
-                if (!activeApplet && hiddenItemsView.visible) {
+                if (!activeApplet && hiddenItemsView.visible && !LayoutMirroring.enabled) {
                     return units.smallSpacing;
 
                 //applet open, sidebar
-                } else if (activeApplet && hiddenItemsView.visible) {
+                } else if (activeApplet && hiddenItemsView.visible && !LayoutMirroring.enabled) {
-                    return hiddenItemsView.iconColumnWidth + units.largeSpacing;
+                    return hiddenItemsView.width + units.largeSpacing;
 
                 //applet open, no sidebar
                 } else {
                     return 0;
                 }
             }
+            Layout.rightMargin: {
+                //Menu mode
+                if (!activeApplet && hiddenItemsView.visible && LayoutMirroring.enabled) {
+                    return units.smallSpacing;
+
+                //applet open, sidebar
+                } else if (activeApplet && hiddenItemsView.visible && LayoutMirroring.enabled) {
+                    return hiddenItemsView.width + units.largeSpacing;
+
+                //applet open, no sidebar
+                } else {
+                    return 0;
+                }
             }
 
             visible: activeApplet
@@ -87,58 +85,57 @@ Item {
                 }
             }
         }
+
         PlasmaExtras.Heading {
             id: noAppletHeading
             level: 1
-        anchors {
-            left: parent.left
-            top: parent.top
-            right: parent.right
-            topMargin: hiddenItemsView.visible ? units.smallSpacing : 0
-            leftMargin: units.smallSpacing
-        }
             text: i18n("Status and Notifications")
             visible: !heading.visible
         }
 
-    PlasmaCore.SvgItem {
+        //spacer
-        anchors {
+        Item {
-            left: parent.left
+            Layout.fillWidth: true
-            leftMargin: hiddenLayout.width
-            top: parent.top
-            bottom: parent.bottom
-            margins: -units.gridUnit
         }
 
-        visible: hiddenItemsView.visible && activeApplet
+        PlasmaComponents.ToolButton {
-        width: lineSvg.elementSize("vertical-line").width
+            id: pinButton
-
+            checkable: true
-        elementId: "vertical-line"
+            checked: plasmoid.configuration.pin
-
+            onCheckedChanged: plasmoid.configuration.pin = checked
-        svg: PlasmaCore.Svg {
+            icon.name: "window-pin"
-            id: lineSvg;
+            PlasmaComponents.ToolTip {
-            imagePath: "widgets/line"
+                text: i18n("Keep Open")
+            }
         }
     }
 
+    RowLayout {
+        spacing: 0 // must be 0 so that the separator is as close to the indicator as possible
+
         HiddenItemsView {
             id: hiddenItemsView
-        anchors {
+            Layout.preferredWidth: visible && activeApplet ? iconColumnWidth : expandedRepresentation.width
-            left: parent.left
+            Layout.fillHeight: true
-            top: noAppletHeading.bottom
+        }
-            topMargin: units.smallSpacing
+
-            bottom: parent.bottom
+        PlasmaCore.SvgItem {
+            visible: hiddenItemsView.visible && activeApplet
+            Layout.fillHeight: true
+            Layout.preferredWidth: lineSvg.elementSize("vertical-line").width
+            elementId: "vertical-line"
+            svg: PlasmaCore.Svg {
+                id: lineSvg;
+                imagePath: "widgets/line"
             }
         }
 
         PlasmoidPopupsContainer {
             id: container
-        anchors {
+            Layout.fillWidth: true
-            left: parent.left
+            Layout.fillHeight: true
-            right: parent.right
+            Layout.leftMargin: hiddenItemsView.visible && activeApplet && !LayoutMirroring.enabled ? units.largeSpacing : 0
-            top: heading.bottom
+            Layout.rightMargin: hiddenItemsView.visible && activeApplet && LayoutMirroring.enabled ? units.largeSpacing : 0
-            bottom: parent.bottom
-            leftMargin: hiddenItemsView.visible ? hiddenItemsView.iconColumnWidth + units.largeSpacing : 0
         }
     }
 }