[applets] Improve consistency of scrollview with Kickoff

This makes sure that the device notifier/clipboard applets use the same scrollbar style as kickoff and
other KDE apps.

Related to https://invent.kde.org/plasma/plasma-nm/-/merge_requests/96

applets/clipboard/contents/ui/ClipboardPage.qml

@@ -13,9 +13,8 @@ import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 3.0 as PlasmaComponents3
 import org.kde.plasma.extras 2.0 as PlasmaExtras
 
-ColumnLayout {
-    id: clipboardPage
-    property alias view: clipboardMenu.view
+Menu {
+    id: clipboardMenu
     Keys.onPressed: {
         function goToCurrent() {
             clipboardMenu.view.positionViewAtIndex(clipboardMenu.view.currentIndex, ListView.Contain);
@@ -40,7 +39,7 @@ ColumnLayout {
                 event.accepted = true;
             }
         }
-        if (stack.currentPage !== clipboardPage) {
+        if (stack.currentItem !== clipboardMenu) {
             event.accepted = false;
             return;
         }
@@ -104,7 +103,7 @@ ColumnLayout {
         }
     }
 
-    Keys.forwardTo: [stack.currentPage]
+    Keys.forwardTo: [stack.currentItem]
 
     property var header: PlasmaExtras.PlasmoidHeading {
         RowLayout {
@@ -155,42 +154,39 @@ ColumnLayout {
         }
     }
 
-    Menu {
-        id: clipboardMenu
-        model: PlasmaCore.SortFilterModel {
-            sourceModel: clipboardSource.models.clipboard
-            filterRole: "DisplayRole"
-            filterRegExp: filter.text
-        }
-        supportsBarcodes: {
-            try {
-                let prisonTest = Qt.createQmlObject("import QtQml 2.0; import org.kde.prison 1.0; QtObject {}", this);
-                prisonTest.destroy();
-            } catch (e) {
-                console.log("Barcodes not supported:", e);
-                return false;
-            }
-            return true;
-        }
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-        Layout.topMargin: PlasmaCore.Units.smallSpacing
-        onItemSelected: clipboardSource.service(uuid, "select")
-        onRemove: clipboardSource.service(uuid, "remove")
-        onEdit: {
-            stack.push(Qt.resolvedUrl("EditPage.qml"), {
-                text: clipboardMenu.model.get(clipboardMenu.view.currentIndex).DisplayRole,
-                uuid: uuid
-            });
-        }
-        onBarcode: {
-            stack.push(Qt.resolvedUrl("BarcodePage.qml"), {
-                text: text
-            });
-        }
-        onAction: {
-            clipboardSource.service(uuid, "action")
-            clipboardMenu.view.currentIndex = 0
+    model: PlasmaCore.SortFilterModel {
+        sourceModel: clipboardSource.models.clipboard
+        filterRole: "DisplayRole"
+        filterRegExp: filter.text
+    }
+    supportsBarcodes: {
+        try {
+            let prisonTest = Qt.createQmlObject("import QtQml 2.0; import org.kde.prison 1.0; QtObject {}", this);
+            prisonTest.destroy();
+        } catch (e) {
+            console.log("Barcodes not supported:", e);
+            return false;
         }
+        return true;
+    }
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+    Layout.topMargin: PlasmaCore.Units.smallSpacing
+    onItemSelected: clipboardSource.service(uuid, "select")
+    onRemove: clipboardSource.service(uuid, "remove")
+    onEdit: {
+        stack.push(Qt.resolvedUrl("EditPage.qml"), {
+            text: clipboardMenu.model.get(clipboardMenu.view.currentIndex).DisplayRole,
+            uuid: uuid
+        });
+    }
+    onBarcode: {
+        stack.push(Qt.resolvedUrl("BarcodePage.qml"), {
+            text: text
+        });
+    }
+    onAction: {
+        clipboardSource.service(uuid, "action")
+        clipboardMenu.view.currentIndex = 0
     }
 }

applets/clipboard/contents/ui/EditPage.qml

@@ -12,8 +12,11 @@ import org.kde.kquickcontrolsaddons 2.0
 import org.kde.plasma.extras 2.0 as PlasmaExtras
 
 ColumnLayout {
+    spacing: 0
     property alias text: textArea.text
-    required property string uuid
+    property string uuid
+
+    property var header: Item {}
 
     Keys.onPressed: {
         if (event.key === Qt.Key_Escape) {
@@ -32,36 +35,34 @@ ColumnLayout {
     Component.onCompleted: {
         textArea.forceActiveFocus();
         textArea.cursorPosition = textArea.text.length;
-        header.enabled = false;
     }
 
     function done() {
-        stack.initialPage.view.currentIndex = 0;
-        stack.initialPage.view.currentItem.forceActiveFocus();
-        header.enabled = true;
+        stack.initialItem.view.currentIndex = 0;
+        stack.initialItem.view.currentItem.forceActiveFocus();
     }
 
-    Item {
+    PlasmaComponents3.TextArea {
+        id: textArea
         Layout.fillWidth: true
         Layout.fillHeight: true
-        Layout.topMargin: PlasmaCore.Units.smallSpacing
+        Layout.leftMargin: PlasmaCore.Units.smallSpacing * 2
+        Layout.rightMargin: PlasmaCore.Units.smallSpacing * 2
+        Layout.topMargin: PlasmaCore.Units.smallSpacing * 2
 
-        PlasmaComponents3.TextArea {
-            id: textArea
-            anchors.fill: parent
-            Keys.onPressed: {
-                if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && !(event.modifiers & Qt.ShiftModifier)) {
-                    saveAndExit();
-                    event.accepted = true;
-                } else {
-                    event.accepted = false;
-                }
+        Keys.onPressed: {
+            if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && !(event.modifiers & Qt.ShiftModifier)) {
+                saveAndExit();
+                event.accepted = true;
+            } else {
+                event.accepted = false;
             }
         }
     }
 
     RowLayout {
         Layout.alignment: Qt.AlignRight
+        Layout.margins: PlasmaCore.Units.smallSpacing * 2
         PlasmaComponents3.Button {
             text: i18nc("@action:button", "Save")
             icon.name: "document-save"

applets/clipboard/contents/ui/Menu.qml

@@ -30,19 +30,24 @@ PlasmaComponents3.ScrollView {
     // HACK: workaround for https://bugreports.qt.io/browse/QTBUG-83890
     PlasmaComponents3.ScrollBar.horizontal.policy: PlasmaComponents3.ScrollBar.AlwaysOff
 
-    ListView {
+    leftPadding: PlasmaCore.Units.smallSpacing * 2
+    rightPadding: PlasmaCore.Units.smallSpacing * 2
+
+    contentItem: ListView {
         id: menuListView
         focus: true
 
-        boundsBehavior: Flickable.StopAtBounds
-        interactive: contentHeight > height
         highlight: PlasmaComponents.Highlight { }
         highlightMoveDuration: 0
         highlightResizeDuration: 0
         currentIndex: -1
 
+        topMargin: PlasmaCore.Units.smallSpacing * 2
+        bottomMargin: PlasmaCore.Units.smallSpacing * 2
+        spacing: PlasmaCore.Units.smallSpacing
+
         delegate: ClipboardItemDelegate {
-            width: menuListView.width
+            width: menuListView.width - (menu.PlasmaComponents3.ScrollBar.vertical.visible ? PlasmaCore.Units.smallSpacing * 4 : 0)
             supportsBarcodes: menu.supportsBarcodes
 
             onItemSelected: menu.itemSelected(uuid)

applets/clipboard/contents/ui/clipboard.qml

@@ -7,9 +7,9 @@
 
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.15 as QQC2 // For StackView
 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 // For PageStack
 import org.kde.plasma.components 3.0 as PlasmaComponents3
 import org.kde.plasma.extras 2.0 as PlasmaExtras
 
@@ -82,14 +82,15 @@ Item {
         }
     }
 
-    Plasmoid.fullRepresentation: PlasmaComponents3.Page {
+    Plasmoid.fullRepresentation: PlasmaExtras.Representation {
         id: dialogItem
         Layout.minimumWidth: PlasmaCore.Units.gridUnit * 5
         Layout.minimumHeight: PlasmaCore.Units.gridUnit * 5
+        collapseMarginsHint: true
 
         focus: true
 
-        header: stack.currentPage.header
+        header: stack.currentItem.header
 
         property alias listMargins: listItemSvg.margins
 
@@ -100,14 +101,12 @@ Item {
             visible: false
         }
 
-        Keys.forwardTo: [stack.currentPage]
+        Keys.forwardTo: [stack.currentItem]
 
-        PlasmaComponents.PageStack {
+        QQC2.StackView {
             id: stack
             anchors.fill: parent
-            initialPage: ClipboardPage {
-                anchors.fill: parent
-            }
+            initialItem: ClipboardPage {}
         }
     }
 }

applets/devicenotifier/package/contents/ui/FullRepresentation.qml

@@ -17,13 +17,15 @@ import org.kde.plasma.components 2.0 as PlasmaComponents // For Highlight
 import org.kde.plasma.components 3.0 as PlasmaComponents3
 import org.kde.plasma.extras 2.0 as PlasmaExtras
 
-PlasmaComponents3.Page {
+PlasmaExtras.Representation {
     id: fullRep
     property bool spontaneousOpen: false
 
     Layout.minimumWidth: PlasmaCore.Units.gridUnit * 12
     Layout.minimumHeight: PlasmaCore.Units.gridUnit * 12
 
+    collapseMarginsHint: true
+
     header: PlasmaExtras.PlasmoidHeading {
         visible: !(plasmoid.containmentDisplayHints & PlasmaCore.Types.ContainmentDrawsPlasmoidHeading) && devicenotifier.mountedRemovables > 1
         PlasmaComponents3.ToolButton {
@@ -39,7 +41,7 @@ PlasmaComponents3.Page {
             }
         }
     }
-    
+
     MouseArea {
         id: fullRepMouseArea
         hoverEnabled: true
@@ -112,25 +114,34 @@ PlasmaComponents3.Page {
     }
 
     PlasmaComponents3.ScrollView {
-        anchors.fill: parent
+        id: scrollView
+
         // HACK: workaround for https://bugreports.qt.io/browse/QTBUG-83890
         PlasmaComponents3.ScrollBar.horizontal.policy: PlasmaComponents3.ScrollBar.AlwaysOff
 
-        ListView {
+        anchors.fill: parent
+        leftPadding: PlasmaCore.Units.smallSpacing * 2
+        rightPadding: PlasmaCore.Units.smallSpacing * 2
+
+
+        contentItem: ListView {
             id: notifierDialog
             focus: true
-            boundsBehavior: Flickable.StopAtBounds
 
             model: filterModel
 
             delegate: DeviceItem {
-                width: notifierDialog.width
+                width: notifierDialog.width - (scrollView.PlasmaComponents3.ScrollBar.vertical.visible ? PlasmaCore.Units.smallSpacing * 4 : 0)
                 udi: DataEngineSource
             }
             highlight: PlasmaComponents.Highlight { }
             highlightMoveDuration: 0
             highlightResizeDuration: 0
 
+            topMargin: PlasmaCore.Units.smallSpacing * 2
+            bottomMargin: PlasmaCore.Units.smallSpacing * 2
+            spacing: PlasmaCore.Units.smallSpacing
+
             currentIndex: devicenotifier.currentIndex
 
             //this is needed to make SectionScroller actually work
@@ -141,7 +152,7 @@ PlasmaComponents3.Page {
                 property: "Type Description"
                 delegate: Item {
                     height: Math.floor(childrenRect.height)
-                    width: notifierDialog.width
+                    width: notifierDialog.width - (scrollView.PlasmaComponents3.ScrollBar.vertical.visible ? PlasmaCore.Units.smallSpacing * 4 : 0)
                     PlasmaExtras.Heading {
                         level: 3
                         opacity: 0.6