plasmoid: Add context menu for top-level list views

Might be useful to add further actions because the
space for buttons is limited.

plasmoid/package/contents/ui/DevicesPage.qml

@@ -81,6 +81,24 @@ Item {
                     }
                 }
             }
+
+            PlasmaComponents.Menu {
+                id: contextMenu
+
+                function init(item) {
+                    // use value for properties depending on paused state from buttons
+                    resumePauseItem.text = item.resumePauseButton.tooltip
+                    resumePauseItem.icon = item.resumePauseButton.iconSource
+                }
+
+                PlasmaComponents.MenuItem {
+                    id: resumePauseItem
+                    text: qsTr("Pause")
+                    icon: "media-playback-pause"
+                    onClicked: deviceView.clickCurrentItemButton(
+                                   "resumePauseButton")
+                }
+            }
         }
     }
 }

plasmoid/package/contents/ui/DirectoriesPage.qml

@@ -126,6 +126,39 @@ ColumnLayout {
                     }
                 }
             }
+
+            PlasmaComponents.Menu {
+                id: contextMenu
+
+                function init(item) {
+                    // use value for properties depending on paused state from buttons
+                    rescanItem.enabled = item.rescanButton.enabled
+                    resumePauseItem.text = item.resumePauseButton.tooltip
+                    resumePauseItem.icon = item.resumePauseButton.iconSource
+                }
+
+                PlasmaComponents.MenuItem {
+                    id: rescanItem
+                    text: qsTr('Rescan')
+                    icon: "view-refresh"
+                    onClicked: directoryView.clickCurrentItemButton(
+                                   "rescanButton")
+                }
+                PlasmaComponents.MenuItem {
+                    id: resumePauseItem
+                    text: qsTr("Pause")
+                    icon: "media-playback-pause"
+                    onClicked: directoryView.clickCurrentItemButton(
+                                   "resumePauseButton")
+                }
+                PlasmaComponents.MenuItem {
+                    id: openItem
+                    text: qsTr('Open in file browser')
+                    icon: "folder"
+                    onClicked: directoryView.clickCurrentItemButton(
+                                   "openButton")
+                }
+            }
         }
     }
 

plasmoid/package/contents/ui/DownloadsPage.qml

@@ -128,6 +128,17 @@ Item {
                     }
                 }
             }
+
+            PlasmaComponents.Menu {
+                id: contextMenu
+
+                PlasmaComponents.MenuItem {
+                    id: openItem
+                    text: qsTr('Open in file browser')
+                    icon: "folder"
+                    onClicked: downloadView.clickCurrentItemButton("openButton")
+                }
+            }
         }
     }
 }

plasmoid/package/contents/ui/FullRepresentation.qml

@@ -20,13 +20,9 @@ ColumnLayout {
     function updateSize() {
         switch (plasmoid.location) {
         case PlasmaCore.Types.Floating:
-
         case PlasmaCore.Types.TopEdge:
-
         case PlasmaCore.Types.BottomEdge:
-
         case PlasmaCore.Types.LeftEdge:
-
         case PlasmaCore.Types.RightEdge:
             var size = plasmoid.nativeInterface.size
             parent.width = units.gridUnit * size.width
@@ -52,14 +48,7 @@ ColumnLayout {
 
     // define shortcuts to trigger actions for currently selected item
     function clickCurrentItemButton(buttonName) {
-        var currentItem = currentItem = mainTabGroup.currentTab.item.view.currentItem
+        mainTabGroup.currentTab.item.view.clickCurrentItemButton(buttonName)
-        if (!currentItem) {
-            return
-        }
-        var button = currentItem[buttonName]
-        if (button && button.enabled) {
-            button.clicked()
-        }
     }
     Shortcut {
         sequence: "Ctrl+R"
@@ -133,7 +122,6 @@ ColumnLayout {
             break
         case Qt.Key_Enter:
 
-
             // fallthrough
         case Qt.Key_Return:
             // toggle expanded state of current item
@@ -226,7 +214,6 @@ ColumnLayout {
             state: {
                 switch (plasmoid.nativeInterface.connection.status) {
                 case SyncthingPlasmoid.Data.Disconnected:
-
                 case SyncthingPlasmoid.Data.Reconnecting:
                     return "disconnected"
                 case SyncthingPlasmoid.Data.Paused:
@@ -239,7 +226,6 @@ ColumnLayout {
             onClicked: {
                 switch (plasmoid.nativeInterface.connection.status) {
                 case SyncthingPlasmoid.Data.Disconnected:
-
                 case SyncthingPlasmoid.Data.Reconnecting:
                     plasmoid.nativeInterface.connection.connect()
                     break

plasmoid/package/contents/ui/TopLevelItem.qml

@@ -1,12 +1,116 @@
+// Based on PlasmaComponents.ListItem from Plasma 5.44.0
+// (Can't use PlasmaComponents.ListItem itself because creating a MouseArea filling
+//  the entire entire item for detecting right-mouse-click is not possible due to binding
+//  loop of width and height properties.)
 import QtQuick 2.7
 import QtQuick.Layouts 1.1
 import org.kde.plasma.plasmoid 2.0
-import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.kde.plasma.core 2.0 as PlasmaCore
 
-PlasmaComponents.ListItem {
+Item {
-    id: item
+    id: listItem
     property bool expanded: false
-    enabled: true
+    default property alias content: paddingItem.data
-    onClicked: expanded = !expanded
+
-    onContainsMouseChanged: view.currentIndex = containsMouse ? index : -1
+    /**
+     * If true makes the list item look as checked or pressed. It has to be set
+     * from the code, it won't change by itself.
+     */
+    //plasma extension
+    //always look pressed?
+    property bool checked: false
+
+    /**
+     * If true the item will be a delegate for a section, so will look like a
+     * "title" for the otems under it.
+     */
+    //is this to be used as section delegate?
+    property bool sectionDelegate: false
+
+    /**
+     * type: bool
+     * True if the separator between items is visible
+     * default: true
+     */
+    property bool separatorVisible: true
+
+    width: parent ? parent.width : childrenRect.width
+    height: paddingItem.childrenRect.height + background.margins.top + background.margins.bottom
+
+    implicitHeight: paddingItem.childrenRect.height + background.margins.top
+                    + background.margins.bottom
+
+    function activate(containsMouse) {
+        view.activate(containsMouse ? index : -1)
+    }
+
+    PlasmaCore.FrameSvgItem {
+        id: background
+        imagePath: "widgets/listitem"
+        prefix: (listItem.sectionDelegate ? "section" : (itemMouse.pressed
+                                                         || listItem.checked) ? "pressed" : "normal")
+
+        anchors.fill: parent
+        visible: listItem.ListView.view ? listItem.ListView.view.highlight === null : true
+        Behavior on opacity {
+            NumberAnimation {
+                duration: units.longDuration
+            }
+        }
+    }
+    PlasmaCore.SvgItem {
+        svg: PlasmaCore.Svg {
+            imagePath: "widgets/listitem"
+        }
+        elementId: "separator"
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+        height: naturalSize.height
+        visible: separatorVisible && (listItem.sectionDelegate
+                                      || (typeof (index) != "undefined"
+                                          && index > 0 && !listItem.checked
+                                          && !itemMouse.pressed))
+    }
+
+    MouseArea {
+        id: itemMouse
+        property bool changeBackgroundOnPress: !listItem.checked
+                                               && !listItem.sectionDelegate
+        anchors.fill: background
+        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+
+        onClicked: {
+            switch (mouse.button) {
+            case Qt.LeftButton:
+                expanded = !expanded
+                break
+            case Qt.RightButton:
+                var view = listItem.ListView.view
+                var coordinates = mapToItem(view, mouseX, mouseY)
+                view.showContextMenu(listItem, coordinates.x, coordinates.y)
+                break
+            }
+        }
+
+        onContainsMouseChanged: {
+            listItem.activate(containsMouse)
+        }
+
+        Item {
+            id: paddingItem
+            anchors {
+                fill: parent
+                leftMargin: background.margins.left
+                topMargin: background.margins.top
+                rightMargin: background.margins.right
+                bottomMargin: background.margins.bottom
+            }
+        }
+    }
+
+    Accessible.role: Accessible.ListItem
 }

plasmoid/package/contents/ui/TopLevelView.qml

@@ -14,4 +14,32 @@ ListView {
     highlightResizeDuration: 0
     highlight: PlasmaComponents.Highlight {
     }
+
+    function activate(index) {
+        if (typeof contextMenu !== "undefined"
+                && contextMenu.status !== PlasmaComponents.DialogStatus.Closed) {
+            return
+        }
+        currentIndex = index
+    }
+
+    function clickCurrentItemButton(buttonName) {
+        if (!currentItem) {
+            return
+        }
+        var button = currentItem[buttonName]
+        if (button && button.enabled) {
+            button.clicked()
+        }
+    }
+
+    function showContextMenu(item, x, y) {
+        if (typeof contextMenu === "undefined") {
+            return
+        }
+        if (typeof contextMenu.init !== "undefined") {
+            contextMenu.init(item)
+        }
+        contextMenu.open(x, y)
+    }
 }