Improve appearance of sessions plasmoid

- Use PlasmoidHeading for displaying search bar
- Stop using variables from 'units'
- Remove unused "Item"s
- Use better paddings and spacings

addons/sessionapplet/applet/contents/ui/KateSessionsItemDelegate.qml

@@ -12,6 +12,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
 import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.kde.plasma.components 3.0 as PlasmaComponents3
 import org.kde.kquickcontrolsaddons 2.0 as KQuickControlsAddons
 import org.kde.plasma.core 2.0 as PlasmaCore
 
@@ -24,11 +25,8 @@ PlasmaComponents.ListItem {
     signal remove(string uuid)
     
     property bool showInput: false
-    
-    width: parent.width - units.gridUnit * 2
-    height: Math.max(Math.max(label.height, toolButtonsLayout.implicitHeight),sessionnameditlayout.implicitHeight) + 2 * units.smallSpacing
 
-    x: -listMargins.left
+    height: Math.max(Math.max(label.height, toolButtonsLayout.implicitHeight), sessionnameditlayout.implicitHeight) + 2 * PlasmaCore.Units.smallSpacing
 
     MouseArea {
         anchors.fill: parent
@@ -49,17 +47,19 @@ PlasmaComponents.ListItem {
             height: childrenRect.height
             anchors {
                 left: parent.left
-                leftMargin: units.gridUnit / 2
+                leftMargin: PlasmaCore.Units.smallSpacing
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            PlasmaComponents.Label {
+
+            PlasmaComponents3.Label {
                 height: implicitHeight
                 anchors {
                     left: parent.left
                     right: parent.right
-                    rightMargin: units.gridUnit * 2
-                    leftMargin: units.gridUnit * 2
+                    rightMargin: PlasmaCore.Units.gridUnit * 2
+                    leftMargin: PlasmaCore.Units.iconSizes.small + PlasmaCore.Units.smallSpacing * 2
+                    verticalCenter: parent.verticalCenter
                 }
                 maximumLineCount: 1
                 text: DisplayRole.trim()
@@ -69,14 +69,13 @@ PlasmaComponents.ListItem {
             }
 
             PlasmaCore.IconItem {
-                width: units.iconSizes.small
+                width: PlasmaCore.Units.iconSizes.small
                 height: width
-                z: 900
+                anchors.verticalCenter: parent.verticalCenter
                 source: DecorationRole
                 enabled: true
                 visible: true
             }
-
         }
 
         RowLayout {
@@ -87,30 +86,34 @@ PlasmaComponents.ListItem {
                     left: parent.left
                     right: parent.right
                     rightMargin: 0
-                    leftMargin: units.gridUnit * 2
+                    leftMargin: PlasmaCore.Units.iconSizes.small + PlasmaCore.Units.smallSpacing * 2
+                    verticalCenter: parent.verticalCenter
                 }
-                /*Layout.fillWidth: true*/
-                Item {
-                    width: units.gridUnit / 2 - parent.spacing
-                    height: 1
-                }
-                PlasmaComponents.TextField {
+
+                PlasmaComponents3.TextField {
                     id: sessionname
                     placeholderText: i18n("Session name")
                     clearButtonShown: true
                     Layout.fillWidth: true
-                    
                 }
-                PlasmaComponents.ToolButton {
-                    iconSource: "dialog-ok"
-                    tooltip: i18n("Create new session and start Kate")
+
+                PlasmaComponents3.ToolButton {
+                    icon.name: "dialog-ok"
                     enabled: sessionname.text.replace(/^\s+|\s+$/g, '').length>0
                     onClicked: {menuItem.newSession(sessionname.text.replace(/^\s+|\s+$/g, '')); showInput=false;}
+
+                    PlasmaComponents3.ToolTip {
+                        text: i18n("Create new session and start Kate")
+                    }
                 }
-                PlasmaComponents.ToolButton {
-                    iconSource: "dialog-cancel"
-                    tooltip: i18n("Cancel session creation")
+
+                PlasmaComponents3.ToolButton {
+                    icon.name: "dialog-cancel"
                     onClicked: showInput=false
+
+                    PlasmaComponents3.ToolTip {
+                        text: i18n("Cancel session creation")
+                    }
                 }
         }
         
@@ -121,10 +124,13 @@ PlasmaComponents.ListItem {
                 verticalCenter: parent.verticalCenter
             }
 
-            PlasmaComponents.ToolButton {
-                iconSource: "edit-delete"
-                tooltip: i18n("Delete session")
+            PlasmaComponents3.ToolButton {
+                icon.name: "edit-delete"
                 onClicked: menuItem.remove(UuidRole)
+
+                PlasmaComponents3.ToolTip {
+                    text: i18n("Delete session")
+                }
             }
 
             Component.onCompleted: {

addons/sessionapplet/applet/contents/ui/Menu.qml

@@ -10,7 +10,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
 *********************************************************************/
 import QtQuick 2.0
 import org.kde.plasma.extras 2.0 as PlasmaExtras
-import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.kde.plasma.components 2.0 as PlasmaComponents // for Highlight
 
 PlasmaExtras.ScrollArea {
     id: menu

addons/sessionapplet/applet/contents/ui/katesessions.qml

@@ -11,18 +11,19 @@ SPDX-License-Identifier: GPL-2.0-or-later
 *********************************************************************/
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
+
 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.components 3.0 as PlasmaComponents3
 import org.kde.plasma.extras 2.0 as PlasmaExtras
 
 Item {
     id: main
-    width: (Plasmoid.formFactor==PlasmaCore.Types.Planar)? units.gridUnit * 14 : undefined
-    height: (Plasmoid.formFactor==PlasmaCore.Types.Planar)? units.gridUnit * 16: undefined
+    width: (Plasmoid.formFactor==PlasmaCore.Types.Planar)? PlasmaCore.Units.gridUnit * 14 : undefined
+    height: (Plasmoid.formFactor==PlasmaCore.Types.Planar)? PlasmaCore.Units.gridUnit * 16: undefined
     
-    Plasmoid.switchWidth: units.gridUnit * 11
-    Plasmoid.switchHeight: units.gridUnit * 11    
+    Plasmoid.switchWidth: PlasmaCore.Units.gridUnit * 11
+    Plasmoid.switchHeight: PlasmaCore.Units.gridUnit * 11
     Plasmoid.status: PlasmaCore.Types.ActiveStatus
     Plasmoid.toolTipMainText: i18n("Kate Sessions")
     Plasmoid.icon: "kate"
@@ -51,13 +52,28 @@ Item {
         
     }
 
-    Plasmoid.fullRepresentation: Item {
+    property var searchHeader: PlasmaExtras.PlasmoidHeading {
+        RowLayout {
+            anchors.fill: parent
+            enabled: true
+
+            PlasmaComponents3.TextField {
+                id: filter
+                placeholderText: i18n("Search…")
+                clearButtonShown: true
+                Layout.fillWidth: true
+            }
+        }
+    }
+
+    Plasmoid.fullRepresentation: PlasmaComponents3.Page {
 
         id: dialogItem
-        Layout.minimumWidth: units.gridUnit * 12
-        Layout.minimumHeight: units.gridUnit * 12
+        Layout.minimumWidth: PlasmaCore.Units.gridUnit * 12
+        Layout.minimumHeight: PlasmaCore.Units.gridUnit * 12
 
         focus: true
+        header: searchHeader
 
         property alias listMargins: listItemSvg.margins
 
@@ -130,6 +146,7 @@ Item {
                 }
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                Layout.topMargin: PlasmaCore.Units.smallSpacing
                 onItemSelected: {
                     sessionsSource.service(uuid, "invoke")
                     plasmoid.expanded = false;
@@ -137,9 +154,6 @@ Item {
                 onRemove: sessionsSource.service(uuid, "remove")
                 onNewSession: sessionsSource.newSession(sessionName)
             }
-            //NewSessionDialog {
-            //    id: newsessiondialog
-            //}
         }
     }
 }