refactor(config): improve selection for click action

This improve #12.

package/contents/ui/components/ApplicationDelegateItem.qml

@@ -0,0 +1,39 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.12 as QtControls
+import QtQuick.Layouts 1.1 as QtLayouts
+import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.kde.kirigami 2.6 as Kirigami
+
+MouseArea {
+  id: root
+  height: childrenRect.height
+
+  hoverEnabled: true
+  cursorShape: Qt.PointingHandCursor
+
+  property string serviceName: ""
+  property string name: ""
+  property string comment: ""
+  property string iconName: ""
+  property bool selected: false
+
+  QtLayouts.RowLayout {
+      spacing: Kirigami.Units.smallSpacing
+
+      QtControls.ToolTip.text: (comment !== "" ? comment + "\n\n" : "") +
+        "ID: " + serviceName + ".desktop"
+      QtControls.ToolTip.visible: root.containsMouse
+
+      PlasmaCore.IconItem {
+          id: icon
+
+          source: iconName
+          implicitHeight: 16
+          implicitWidth: 16
+      }
+      PlasmaComponents.Label {
+          text: selected ? "<strong>" + name + "</strong>" : name
+      }
+  }
+}

package/contents/ui/components/AppsDetector.qml

@@ -0,0 +1,32 @@
+import QtQuick 2.0
+import org.kde.plasma.core 2.1 as PlasmaCore
+
+PlasmaCore.SortFilterModel {
+	id: appsDetector
+
+	sourceModel: PlasmaCore.DataModel {
+			dataSource: source
+	}
+
+	filterRole: "name"
+	sortColumn: 0
+	sortRole: "name"
+	sortOrder: Qt.AscendingOrder
+
+	// https://github.com/KDE/plasma-framework/blob/master/src/declarativeimports/core/datasource.h
+	property var dataSource: PlasmaCore.DataSource {
+			id: source
+			engine: "apps"
+			connectedSources: {
+					// Explude folder
+					var result = []
+					for (var i = 0; i < sources.length; i++) {
+							if (sources[i].indexOf(".desktop") !== -1) {
+									result.push(sources[i])
+							}
+					}
+					return result
+			}
+			interval: 0
+	}
+}

package/contents/ui/config/ConfigGeneral.qml

@@ -4,141 +4,218 @@ import QtQuick.Layouts 1.1 as QtLayouts
 import org.kde.kirigami 2.6 as Kirigami
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.kde.plasma.extras 2.0 as PlasmaExtras
 
+import "../components" as RMComponents
 import "../controls" as RMControls
 
 QtLayouts.ColumnLayout {
-    spacing: Kirigami.Units.largeSpacing
+    id: page
+
+    signal configurationChanged
 
     property alias cfg_updateInterval: updateInterval.valueReal
-    property alias cfg_actionService: customActionService.text
+    property string cfg_actionService: plasmoid.configuration.actionService
 
     property alias cfg_showCpuMonitor: showCpuMonitor.checked
     property alias cfg_showClock: showClock.checked
     property alias cfg_showRamMonitor: showRamMonitor.checked
     property alias cfg_memoryInPercent: memoryInPercent.checked
     property alias cfg_showNetMonitor: showNetMonitor.checked
 
-    // TODO: find way to use `.desktop` transltation for programs
-    readonly property var actionServiceOptions: [
-        {
-            "label": i18n("Custom"),
-            "value": ""
-        }, {
-            "label": i18n("Plasma System Monitor"),
-            "value": "org.kde.plasma-systemmonitor"
-        }, {
-            "label": "KSysGuard",
-            "value": "org.kde.ksysguard"
-        }, {
-            "label": i18n("System Monitor"),
-            "value": "org.kde.systemmonitor"
+    // Apps model
+    RMComponents.AppsDetector {
+        id: appsModel
+        filterCallback: function (index, value) {
+            var search = appsFilter.text.toLowerCase()
+
+            if (value.toLowerCase().indexOf(search) !== -1) {
+                return true
+            }
+            if (datasource.get(index).menuId.replace(".desktop", "").toLowerCase().indexOf(search) !== -1) {
+                return true
+            }
+            return false
         }
-    ]
+    }
 
+    // Tab bar
+    PlasmaComponents.TabBar {
+        id: bar
 
-    Kirigami.FormLayout {
-        wideMode: true
+        PlasmaComponents.TabButton {
+            tab: generalPage
+            iconSource: "preferences-system-windows"
+            text: i18n("General")
+        }
+        PlasmaComponents.TabButton {
+            tab: clickPage
+            iconSource: "input-mouse-click-left"
+            text: i18n("Click action")
+        }
+    }
 
-        RMControls.SpinBox {
-            id: updateInterval
-            Kirigami.FormData.label: i18n("Update interval:")
-            QtLayouts.Layout.fillWidth: true
+    // Views
+    PlasmaComponents.TabGroup {
+        QtLayouts.Layout.fillWidth: true
+        QtLayouts.Layout.fillHeight: true
 
-            decimals: 1
-            minimumValue: 0.1
-            maximumValue: 3600.0
-            stepSize: Math.round(0.1 * factor)
+        // General
+        QtLayouts.ColumnLayout {
+            id: generalPage
+            spacing: Kirigami.Units.largeSpacing
 
-            textFromValue: function(value) {
-                return i18n("%1 seconds", valueToText(value))
-            }
-        }
+            Kirigami.FormLayout {
+                wideMode: true
 
-        // click action
-        PlasmaComponents.Label {
-            text: i18n("Click action")
-            font.pointSize: PlasmaCore.Theme.defaultFont.pointSize * 1.2
-        }
+                RMControls.SpinBox {
+                    id: updateInterval
+                    Kirigami.FormData.label: i18n("Update interval:")
+                    QtLayouts.Layout.fillWidth: true
 
-        QtControls.ComboBox {
-            id: actionService
-            Kirigami.FormData.label: i18n("Program:")
-            textRole: "label"
-            model: actionServiceOptions
-            QtLayouts.Layout.fillWidth: true
-
-            onCurrentIndexChanged: {
-                var current = model[currentIndex]
-                if (current && current.value !== "") {
-                    customActionService.text = current.value
+                    decimals: 1
+                    minimumValue: 0.1
+                    maximumValue: 3600.0
+                    stepSize: Math.round(0.1 * factor)
+
+                    textFromValue: function(value) {
+                        return i18n("%1 seconds", valueToText(value))
+                    }
                 }
             }
 
-            Component.onCompleted: {
-                for (var i = 0; i < model.length; i++) {
-                    if (model[i]["value"] === plasmoid.configuration.actionService) {
-                        actionService.currentIndex = i;
-                        return
-                    }
+            // Charts
+            PlasmaComponents.Label {
+                text: i18n("Charts")
+                font.pointSize: PlasmaCore.Theme.defaultFont.pointSize * 1.2
+            }
+
+            QtLayouts.GridLayout {
+                QtLayouts.Layout.fillWidth: true
+                columns: 2
+                rowSpacing: Kirigami.Units.smallSpacing
+                columnSpacing: Kirigami.Units.largeSpacing
+
+                // CPU
+                QtControls.CheckBox {
+                    id: showCpuMonitor
+                    text: i18n("Show CPU monitor")
+                }
+                QtControls.CheckBox {
+                    id: showClock
+                    text: i18n("Show CPU clock")
+                    enabled: showCpuMonitor.checked
+                }
+
+                // Memory
+                QtControls.CheckBox {
+                    id: showRamMonitor
+                    text: i18n("Show memory monitor")
+                }
+                QtControls.CheckBox {
+                    id: memoryInPercent
+                    text: i18n("Memory in percentage")
+                    enabled: showRamMonitor.checked
+                }
+
+                QtControls.CheckBox {
+                    id: showNetMonitor
+                    text: i18n("Show network monitor")
                 }
+            }
 
-                actionService.currentIndex = 0 // Custom
+            Item {
+                QtLayouts.Layout.fillWidth: true
+                QtLayouts.Layout.fillHeight: true
             }
         }
-        QtControls.TextField {
-            id: customActionService
-            Kirigami.FormData.label: i18n("Custom program:")
-            QtLayouts.Layout.fillWidth: true
-            visible: actionService.currentIndex === 0
-        }
-        PlasmaComponents.Label {
-            text: i18n("NOTE: The is name should same as filename\nin \"%1\"", "/usr/share/applications/")
-        }
-    }
 
-    // Charts
-    PlasmaComponents.Label {
-        text: i18n("Charts")
-        font.pointSize: PlasmaCore.Theme.defaultFont.pointSize * 1.2
-    }
+        // CLick action
+        QtLayouts.ColumnLayout {
+            id: clickPage
+            spacing: Kirigami.Units.largeSpacing
 
-    QtLayouts.GridLayout {
-        QtLayouts.Layout.fillWidth: true
-        columns: 2
-        rowSpacing: Kirigami.Units.smallSpacing
-        columnSpacing: Kirigami.Units.largeSpacing
-
-        // CPU
-        QtControls.CheckBox {
-            id: showCpuMonitor
-            text: i18n("Show CPU monitor")
-        }
-        QtControls.CheckBox {
-            id: showClock
-            text: i18n("Show CPU clock")
-            enabled: showCpuMonitor.checked
-        }
+            Kirigami.FormLayout {
+                wideMode: true
 
-        // Memory
-        QtControls.CheckBox {
-            id: showRamMonitor
-            text: i18n("Show memory monitor")
-        }
-        QtControls.CheckBox {
-            id: memoryInPercent
-            text: i18n("Memory in percentage")
-            enabled: showRamMonitor.checked
-        }
+                QtControls.TextField {
+                    id: appsFilter
+                    Kirigami.FormData.label: i18n("Search an application:")
+                    QtLayouts.Layout.fillWidth: true
+                    placeholderText: i18n("Application name")
 
-        QtControls.CheckBox {
-            id: showNetMonitor
-            text: i18n("Show network monitor")
-        }
-    }
+                    onTextChanged: appsList.updateCurrentIndex()
+                }
+            }
 
-    Item {
-        QtLayouts.Layout.fillWidth: true
-        QtLayouts.Layout.fillHeight: true
+            // Apps list
+            PlasmaComponents.Label {
+                text: i18n("Applications")
+                font.pointSize: PlasmaCore.Theme.defaultFont.pointSize * 1.2
+            }
+
+            Item {
+                QtLayouts.Layout.fillWidth: true
+                QtLayouts.Layout.fillHeight: true
+
+                Rectangle {
+                    anchors.fill: parent
+                    color: theme.headerBackgroundColor
+                    border.color: theme.complementaryBackgroundColor
+                    border.width: 1
+                    radius: 4
+                }
+
+                PlasmaExtras.ScrollArea {
+                    anchors.fill: parent
+                    anchors.margins: 10
+                    anchors.rightMargin: 5
+
+                    ListView {
+                        id: appsList
+
+                        model: appsModel
+                        clip: true
+
+                        highlight: PlasmaComponents.Highlight {
+                        }
+                        highlightMoveDuration: 0
+                        highlightMoveVelocity: -1
+
+                        delegate: RMComponents.ApplicationDelegateItem {
+                            width: root.width
+
+                            serviceName: model.menuId.replace(".desktop", "")
+                            name: model.name
+                            comment: model.comment
+                            iconName: model.iconName
+                            selected: ListView.isCurrentItem
+
+                            onClicked: {
+                                appsList.currentIndex = index
+
+                                var oldValue = cfg_actionService
+                                cfg_actionService = serviceName
+                                if (cfg_actionService !== oldValue) {
+                                    page.configurationChanged()
+                                }
+                            }
+                        }
+
+                        Component.onCompleted: updateCurrentIndex()
+
+                        function updateCurrentIndex() {
+                            for (var i = 0; i < model.count; i++) {
+                                if (model.get(i).menuId === cfg_actionService + ".desktop") {
+                                    currentIndex = i
+                                    return
+                                }
+                            }
+                            currentIndex = -1
+                        }
+                    }
+                }
+            }
+        }
     }
 }