[kcmkwin/compositing] Remove effect list item selection, fix list item size after hiding the effect video, use a real button as the play button and use the right busy indicator

Summary:
Makes some improvements to the Effects KCM (details in title).
{F6464106}
{F6464355}

Test Plan: Open the Effects KCM.

Reviewers: #kwin, #vdg, ngraham, davidedmundson

Reviewed By: #kwin, #vdg, ngraham, davidedmundson

Subscribers: davidedmundson, ngraham, #vdg, kwin, #kwin

Tags: #kwin, #vdg

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

kcmkwin/kwincompositing/qml/Effect.qml

@@ -29,17 +29,10 @@ Rectangle {
     id: item
     width: parent.width
     height: rowEffect.implicitHeight
-    color: item.ListView.isCurrentItem ? effectView.backgroundActiveColor : index % 2 ? effectView.backgroundNormalColor : effectView.backgroundAlternateColor
+    color: index % 2 ? effectView.backgroundNormalColor : effectView.backgroundAlternateColor
     signal changed()
     property int checkedState: model.EffectStatusRole
 
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            effectView.currentIndex = index;
-        }
-    }
-
     RowLayout {
         id: rowEffect
         property int maximumWidth: parent.width - 2 * spacing
@@ -125,12 +118,15 @@ Rectangle {
             Loader {
                 id: videoItem
                 active: false
+                visible: false
                 source: "Video.qml"
                 function showHide() {
                     if (!videoItem.active) {
                         videoItem.active = true;
+                        videoItem.visible = true;
                     } else {
-                        videoItem.item.showHide();
+                        videoItem.active = false;
+                        videoItem.visible = false;
                     }
                 }
                 onLoaded: {

kcmkwin/kwincompositing/qml/EffectView.qml

@@ -136,7 +136,6 @@ Rectangle {
                 }
                 id: effectView
                 property var exclusiveGroups: []
-                property color backgroundActiveColor: searchModel.backgroundActiveColor
                 property color backgroundNormalColor: searchModel.backgroundNormalColor
                 property color backgroundAlternateColor: searchModel.backgroundAlternateColor
                 anchors.fill: parent

kcmkwin/kwincompositing/qml/Video.qml

@@ -20,48 +20,31 @@
 **************************************************************************/
 import QtQuick 2.1
 import QtQuick.Controls 1.1
+import QtQuick.Controls 2.0 as QQC2
 import QtQuick.Layouts 1.0
 import QtMultimedia 5.0 as Multimedia
-import org.kde.kquickcontrolsaddons 2.0 as QtExtra
 
 Multimedia.Video {
     id: videoItem
-    function showHide() {
-        replayButton.visible = false;
-        if (videoItem.visible === true) {
-            videoItem.stop();
-            videoItem.visible = false;
-        } else {
-            videoItem.visible = true;
-            videoItem.play();
-        }
-    }
     autoLoad: false
     visible: false
     source: model.VideoRole
     width: 400
     height: 400
-    BusyIndicator {
+    QQC2.BusyIndicator {
         anchors.centerIn: parent
         visible: videoItem.status == Multimedia.MediaPlayer.Loading
         running: true
     }
-    MouseArea {
-        // it's a mouse area with icon inside to not have an ugly button background
+    Button {
         id: replayButton
         visible: false
-        anchors.fill: parent
+        anchors.centerIn: parent
+        iconName: "media-playback-start"
         onClicked: {
             replayButton.visible = false;
             videoItem.play();
         }
-        QtExtra.QIconItem {
-            id: replayIcon
-            anchors.centerIn: parent
-            width: 16
-            height: 16
-            icon: "media-playback-start"
-        }
         Connections {
             target: videoItem
             onStopped: {