Added plasmoidHeading to clipboard and ported to Page

Summary:
{F8256246}
{F8256249}

Reviewers: #vdg, ngraham

Reviewed By: #vdg, ngraham

Subscribers: plasma-devel

Tags: #plasma

Maniphest Tasks: T10470

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

applets/clipboard/contents/ui/BarcodePage.qml

@@ -21,6 +21,7 @@ import QtQuick.Layouts 1.1
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 import org.kde.kquickcontrolsaddons 2.0
+import org.kde.plasma.extras 2.0 as PlasmaExtras
 
 ColumnLayout {
     id: barcodeView
@@ -46,74 +47,78 @@ ColumnLayout {
         });
     }
 
-    RowLayout {
+    property var header: PlasmaExtras.PlasmoidHeading {
-        Layout.fillWidth: true
+        RowLayout {
-        PlasmaComponents.Button {
+            anchors.fill: parent
-            Layout.fillWidth: true
+            PlasmaComponents.Button {
-            iconSource: "go-previous-view"
+                Layout.fillWidth: true
-            text: i18n("Return to Clipboard")
+                iconSource: "go-previous-view"
-            onClicked: stack.pop()
+                text: i18n("Return to Clipboard")
-        }
+                onClicked: stack.pop()
-        PlasmaComponents.ContextMenu {
-            id: menu
-            visualParent: configureButton
-            placement: PlasmaCore.Types.BottomPosedLeftAlignedPopup
-            onStatusChanged: {
-                if (status == PlasmaComponents.DialogStatus.Closed) {
-                    configureButton.checked = false;
-                }
             }
+            PlasmaComponents.ContextMenu {
+                id: menu
+                visualParent: configureButton
+                placement: PlasmaCore.Types.BottomPosedLeftAlignedPopup
+                onStatusChanged: {
+                    if (status == PlasmaComponents.DialogStatus.Closed) {
+                        configureButton.checked = false;
+                    }
+                }
 
-            function change(type) {
+                function change(type) {
-                barcodeView.barcodeType = type;
+                    barcodeView.barcodeType = type;
-                barcodeView.show(barcodeView.uuid);
+                    barcodeView.show(barcodeView.uuid);
-            }
+                }
 
-            PlasmaComponents.MenuItem {
+                PlasmaComponents.MenuItem {
-                text: i18n("QR Code")
+                    text: i18n("QR Code")
-                checkable: true
+                    checkable: true
-                checked: barcodeView.barcodeType == 0
+                    checked: barcodeView.barcodeType == 0
-                onClicked: menu.change(0)
+                    onClicked: menu.change(0)
-            }
+                }
-            PlasmaComponents.MenuItem {
+                PlasmaComponents.MenuItem {
-                text: i18n("Data Matrix")
+                    text: i18n("Data Matrix")
-                checkable: true
+                    checkable: true
-                checked: barcodeView.barcodeType == 1
+                    checked: barcodeView.barcodeType == 1
-                onClicked: menu.change(1)
+                    onClicked: menu.change(1)
-            }
+                }
-            PlasmaComponents.MenuItem {
+                PlasmaComponents.MenuItem {
-                text: i18nc("Aztec barcode", "Aztec")
+                    text: i18nc("Aztec barcode", "Aztec")
-                checkable: true
+                    checkable: true
-                checked: barcodeView.barcodeType == 4
+                    checked: barcodeView.barcodeType == 4
-                onClicked: menu.change(4)
+                    onClicked: menu.change(4)
-            }
+                }
-            PlasmaComponents.MenuItem {
+                PlasmaComponents.MenuItem {
-                text: i18n("Code 39")
+                    text: i18n("Code 39")
-                checkable: true
+                    checkable: true
-                checked: barcodeView.barcodeType == 2
+                    checked: barcodeView.barcodeType == 2
-                onClicked: menu.change(2)
+                    onClicked: menu.change(2)
+                }
+                PlasmaComponents.MenuItem {
+                    text: i18n("Code 93")
+                    checkable: true
+                    checked: barcodeView.barcodeType == 3
+                    onClicked: menu.change(3)
+                }
             }
-            PlasmaComponents.MenuItem {
+            PlasmaComponents.ToolButton {
-                text: i18n("Code 93")
+                id: configureButton
                 checkable: true
-                checked: barcodeView.barcodeType == 3
+                iconSource: "configure"
-                onClicked: menu.change(3)
+                tooltip: i18n("Change the barcode type")
+                onClicked: menu.openRelative()
             }
         }
-        PlasmaComponents.ToolButton {
-            id: configureButton
-            checkable: true
-            iconSource: "configure"
-            tooltip: i18n("Change the barcode type")
-            onClicked: menu.openRelative()
-        }
     }
+
     QImageItem {
         id: barcodePreview
         property alias busy: busyIndicator.visible
         fillMode: QImageItem.PreserveAspectFit
         Layout.fillWidth: true
         Layout.fillHeight: true
+        Layout.topMargin: units.smallSpacing
         onWidthChanged: barcodeView.show(barcodeView.uuid)
         onHeightChanged: barcodeView.show(barcodeView.uuid)
         PlasmaComponents.BusyIndicator {

applets/clipboard/contents/ui/ClipboardPage.qml

@@ -76,22 +76,25 @@ ColumnLayout {
         }
     }
 
-    RowLayout {
+    property var header: PlasmaExtras.PlasmoidHeading {
-        Layout.fillWidth: true
+        RowLayout {
-        visible: clipboardMenu.model.count > 0
+            anchors.fill: parent
+            enabled: clipboardMenu.model.count > 0
 
-        PlasmaComponents.TextField {
+            PlasmaComponents.TextField {
-            id: filter
+                id: filter
-            placeholderText: i18n("Search...")
+                placeholderText: i18n("Search...")
-            clearButtonShown: true
+                clearButtonShown: true
-            Layout.fillWidth: true
+                Layout.fillWidth: true
-        }
+            }
-        PlasmaComponents.ToolButton {
+            PlasmaComponents.ToolButton {
-            iconSource: "edit-clear-history"
+                iconSource: "edit-clear-history"
-            tooltip: i18n("Clear history")
+                tooltip: i18n("Clear history")
-            onClicked: clipboardSource.service("", "clearHistory")
+                onClicked: clipboardSource.service("", "clearHistory")
+            }
         }
     }
+
     Menu {
         id: clipboardMenu
         model: PlasmaCore.SortFilterModel {
@@ -102,6 +105,7 @@ ColumnLayout {
         supportsBarcodes: clipboardSource.data["clipboard"]["supportsBarcodes"]
         Layout.fillWidth: true
         Layout.fillHeight: true
+        Layout.topMargin: units.smallSpacing
         onItemSelected: clipboardSource.service(uuid, "select")
         onRemove: clipboardSource.service(uuid, "remove")
         onEdit: clipboardSource.edit(uuid)

applets/clipboard/contents/ui/clipboard.qml

@@ -22,6 +22,7 @@ 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 {
@@ -63,13 +64,15 @@ Item {
         }
     }
 
-    Plasmoid.fullRepresentation: Item {
+    Plasmoid.fullRepresentation: PlasmaComponents3.Page {
         id: dialogItem
         Layout.minimumWidth: units.gridUnit * 5
         Layout.minimumHeight: units.gridUnit * 5
 
         focus: true
 
+        header: stack.currentPage.header
+
         property alias listMargins: listItemSvg.margins
 
         PlasmaCore.FrameSvgItem {