[ExpandableListItem] make it touch-friendly

Summary:
Right now ExpandableListItem is not very touch-friendly due to use of a mousearea
hover effect for choosing the selected item. This patch fixes that by using a `TapHandler`
to handle left-clicks and  touch input. We still need a MouseArea inside it to handle
non-touch hover and right-click behaviors.

FEATURE: 393749
FIXED-IN: 5.70

Test Plan: Click behavior is identical to how it was before, but now touch works too: {F8234452}

Reviewers: #plasma, apol, #vdg, niccolove

Subscribers: kde-frameworks-devel

Tags: #frameworks

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

src/declarativeimports/plasmaextracomponents/qml/ExpandableListItem.qml

@@ -17,7 +17,7 @@
  *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import QtQuick 2.6
+import QtQuick 2.14
 import QtQuick.Layouts 1.1
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents // for Highlight
@@ -89,7 +89,7 @@ import org.kde.plasma.extras 2.0 as PlasmaExtras
  * [...]
  * @endcode
  */
-MouseArea {
+Item {
     id: listItem
 
     /*
@@ -321,33 +321,43 @@ MouseArea {
     width: parent.width // Assume that we will be used as a delegate, not placed in a layout
     height: mainLayout.height
 
-    acceptedButtons: Qt.LeftButton | Qt.RightButton
+    onIsEnabledChanged: if (!listItem.isEnabled) { collapse() }
+
+    // Handle left clicks and taps
+    TapHandler {
+        enabled: listItem.isEnabled
+
+        acceptedButtons: Qt.LeftButton
+
+        onSingleTapped: {
+            listItem.ListView.view.currentIndex = index
+            listItem.toggleExpanded()
+        }
+    }
+
+    // We still need a MouseArea to handle mouse hover and right-click
+    MouseArea {
+        id: clickAndHoverHandler
+
+        anchors.fill: parent
+
+        enabled: listItem.isEnabled
+
+        acceptedButtons: Qt.RightButton
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor // To indicate that the whole thing is clickable
 
         onContainsMouseChanged: listItem.ListView.view.currentIndex = (containsMouse ? index : -1)
 
-    onIsEnabledChanged: if (!listItem.isEnabled) { collapse() }
-
+        // Handle right-click, if so defined
         onClicked: {
-        // Item is disabled: do nothing
-        if (!listItem.isEnabled) return
-
-        // Left click: toggle expanded state
-        if (mouse.button & Qt.LeftButton) {
-            listItem.toggleExpanded()
-        }
-
-        // Right-click: show context menu, if defined
             if (contextMenu != undefined) {
-            if (mouse.button & Qt.RightButton) {
                 contextMenu.visualParent = parent
                 contextMenu.prepare();
                 contextMenu.open(mouse.x, mouse.y)
                 return
             }
         }
-    }
 
         ColumnLayout {
             id: mainLayout
@@ -449,7 +459,7 @@ MouseArea {
                     enabled: listItem.isEnabled
                     visible: defaultActionButtonAction
                             && listItem.defaultActionButtonVisible
-                         && listItem.containsMouse
+                            && (clickAndHoverHandler.containsMouse || expandedView.visible)
                             && (!busyIndicator.visible || listItem.showDefaultActionButtonWhenBusy)
 
                     icon.width: units.iconSizes.smallMedium
@@ -458,7 +468,7 @@ MouseArea {
 
                 // Expand/collapse button
                 PlasmaComponents3.Button {
-                visible: listItem.containsMouse
+                    visible: clickAndHoverHandler.containsMouse
 
                     icon.name: expandedView.visible? "collapse" : "expand"
                     icon.width: units.iconSizes.smallMedium
@@ -490,6 +500,7 @@ MouseArea {
                 }
             }
         }
+    }
 
     // Default expanded view content: contextual actions list
     Component {