[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.Layouts 1.1
+import QtQuick 2.13
+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,112 +33,109 @@ 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 {
-        id: pinButton
-        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")
-    }
+    RowLayout {
+        Layout.maximumWidth: parent.width //otherwise the pin button disappears in noApplet mode
 
-    PlasmaExtras.Heading {
-        id: heading
-        level: 1
+        PlasmaExtras.Heading {
+            id: heading
+            level: 1
+            Layout.leftMargin: {
+                //Menu mode
+                if (!activeApplet && hiddenItemsView.visible && !LayoutMirroring.enabled) {
+                    return units.smallSpacing;
 
-        anchors {
-            left: parent.left
-            top: parent.top
-            right: parent.right
-            topMargin: hiddenItemsView.visible ? units.smallSpacing : 0
-            leftMargin: {
+                //applet open, sidebar
+                } else if (activeApplet && hiddenItemsView.visible && !LayoutMirroring.enabled) {
+                    return hiddenItemsView.width + units.largeSpacing;
+
+                //applet open, no sidebar
+                } else {
+                    return 0;
+                }
+            }
+            Layout.rightMargin: {
                 //Menu mode
-                if (!activeApplet && hiddenItemsView.visible) {
+                if (!activeApplet && hiddenItemsView.visible && LayoutMirroring.enabled) {
                     return units.smallSpacing;
 
                 //applet open, sidebar
-                } else if (activeApplet && hiddenItemsView.visible) {
-                    return hiddenItemsView.iconColumnWidth + units.largeSpacing;
+                } else if (activeApplet && hiddenItemsView.visible && LayoutMirroring.enabled) {
+                    return hiddenItemsView.width + units.largeSpacing;
 
                 //applet open, no sidebar
                 } else {
                     return 0;
                 }
             }
-        }
 
-        visible: activeApplet
-        text: activeApplet ? activeApplet.title : ""
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                if (activeApplet) {
-                    activeApplet.expanded = false;
-                    dialog.visible = true;
+            visible: activeApplet
+            text: activeApplet ? activeApplet.title : ""
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    if (activeApplet) {
+                        activeApplet.expanded = false;
+                        dialog.visible = true;
+                    }
                 }
             }
         }
-    }
-    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
+
+        PlasmaExtras.Heading {
+            id: noAppletHeading
+            level: 1
+            text: i18n("Status and Notifications")
+            visible: !heading.visible
         }
-        text: i18n("Status and Notifications")
-        visible: !heading.visible
-    }
 
-    PlasmaCore.SvgItem {
-        anchors {
-            left: parent.left
-            leftMargin: hiddenLayout.width
-            top: parent.top
-            bottom: parent.bottom
-            margins: -units.gridUnit
+        //spacer
+        Item {
+            Layout.fillWidth: true
         }
 
-        visible: hiddenItemsView.visible && activeApplet
-        width: lineSvg.elementSize("vertical-line").width
+        PlasmaComponents.ToolButton {
+            id: pinButton
+            checkable: true
+            checked: plasmoid.configuration.pin
+            onCheckedChanged: plasmoid.configuration.pin = checked
+            icon.name: "window-pin"
+            PlasmaComponents.ToolTip {
+                text: i18n("Keep Open")
+            }
+        }
+    }
 
-        elementId: "vertical-line"
+    RowLayout {
+        spacing: 0 // must be 0 so that the separator is as close to the indicator as possible
 
-        svg: PlasmaCore.Svg {
-            id: lineSvg;
-            imagePath: "widgets/line"
+        HiddenItemsView {
+            id: hiddenItemsView
+            Layout.preferredWidth: visible && activeApplet ? iconColumnWidth : expandedRepresentation.width
+            Layout.fillHeight: true
         }
-    }
 
-    HiddenItemsView {
-        id: hiddenItemsView
-        anchors {
-            left: parent.left
-            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 {
-            left: parent.left
-            right: parent.right
-            top: heading.bottom
-            bottom: parent.bottom
-            leftMargin: hiddenItemsView.visible ? hiddenItemsView.iconColumnWidth + units.largeSpacing : 0
+        PlasmoidPopupsContainer {
+            id: container
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.leftMargin: hiddenItemsView.visible && activeApplet && !LayoutMirroring.enabled ? units.largeSpacing : 0
+            Layout.rightMargin: hiddenItemsView.visible && activeApplet && LayoutMirroring.enabled ? units.largeSpacing : 0
         }
     }
 }