[Window Switcher] Cleanup

This cleans up and simplifies the tabbox code, mainly by replacing manual anchoring by QtQuick Layouts.
Spacing and fonts are also streamlined.

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

lookandfeel/contents/windowswitcher/WindowSwitcher.qml

@@ -4,6 +4,7 @@
 
 Copyright (C) 2011 Martin Gräßlin <mgraesslin@kde.org>
 Copyright (C) 2013 Marco Martin <mart@kde.org>
+Copyright (C) 2016 Kai Uwe Broulik <kde@privat.broulik.de>
 
 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
@@ -23,21 +24,14 @@ 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.plasma.extras 2.0 as PlasmaExtras
-import org.kde.kquickcontrolsaddons 2.0
 import org.kde.kwin 2.0 as KWin
 
 KWin.Switcher {
     id: tabBox
-    property real screenFactor: screenGeometry.width/screenGeometry.height
-    currentIndex: thumbnailListView.currentIndex
 
-    // just to get the margin sizes
+    readonly property real screenFactor: screenGeometry.width / screenGeometry.height
-    PlasmaCore.FrameSvgItem {
+
-        id: hoverItem
+    currentIndex: thumbnailListView.currentIndex
-        imagePath: "widgets/viewitem"
-        prefix: "hover"
-        visible: false
-    }
 
     PlasmaCore.Dialog {
         id: dialog
@@ -50,107 +44,76 @@ KWin.Switcher {
         mainItem: PlasmaExtras.ScrollArea {
             id: dialogMainItem
 
-            property bool canStretchX: false
-            property bool canStretchY: false
-            width: tabBox.screenGeometry.width * 0.15 + (__verticalScrollBar.visible ? __verticalScrollBar.width : 0)
-            height: tabBox.screenGeometry.height
-            clip: true
             focus: true
 
+            width: tabBox.screenGeometry.width * 0.15 + (__verticalScrollBar.visible ? __verticalScrollBar.width : 0)
+            height: tabBox.screenGeometry.height - dialog.margins.top - dialog.margins.bottom
+
             ListView {
                 id: thumbnailListView
-                orientation: ListView.Vertical
                 model: tabBox.model
-                anchors.fill: parent
+                spacing: units.smallSpacing
-                property int delegateWidth: thumbnailListView.width
-                spacing: 5
                 highlightMoveDuration: 250
+                highlightResizeDuration: 0
 
-                clip: true
-                delegate: Item {
-                    id: delegateItem
-                    width: thumbnailListView.delegateWidth
-                    height: Math.round(thumbnailItem.height + label.height + 30)
-                    Item {
-                        id: thumbnailItem
-                        width: parent.width - hoverItem.margins.left - hoverItem.margins.right
-                        height: Math.round(thumbnailListView.delegateWidth*(1.0/screenFactor) - hoverItem.margins.top)
-                        anchors {
-                            top: parent.top
-                            left: parent.left
-                            leftMargin: hoverItem.margins.left
-                            rightMargin: hoverItem.margins.right
-                            topMargin: hoverItem.margins.top
-                        }
-                        KWin.ThumbnailItem {
-                            wId: windowId
-                            anchors.fill: parent
-                        }
-                    }
-                    RowLayout {
-                        id: label
-                        spacing: 4
-
-                        anchors {
-                            left: parent.left
-                            right: parent.right
-                            bottom: parent.bottom
-                            leftMargin: hoverItem.margins.left
-                            rightMargin: hoverItem.margins.right
-                            bottomMargin: hoverItem.margins.bottom
-                        }
-                        QIconItem {
-                            id: iconItem
-                            icon: model.icon
-                            property int iconSize: 32
-                            width: iconSize
-                            height: iconSize
-                            Layout.preferredHeight: iconSize
-                            Layout.preferredWidth: iconSize
-                        }
-                        PlasmaComponents.Label {
-                            text: model.caption
-                            elide: Text.ElideMiddle
-
-                            Layout.fillWidth: true
-                            Layout.maximumWidth: label.maximumWidth - iconItem.iconSize - label.spacing * 2
-                        }
-                    }
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            thumbnailListView.currentIndex = index;
-                        }
-                    }
-                }
-                highlight: PlasmaCore.FrameSvgItem {
-                    id: highlightItem
-                    imagePath: "widgets/viewitem"
-                    prefix: "hover"
-                    width: thumbnailListView.currentItem.width
-                    height: thumbnailListView.currentItem.height
-                }
-                boundsBehavior: Flickable.StopAtBounds
                 Connections {
                     target: tabBox
                     onCurrentIndexChanged: {
                         thumbnailListView.currentIndex = tabBox.currentIndex;
-                        thumbnailListView.positionViewAtIndex(thumbnailListView.currentIndex, ListView.Contain);
+                        thumbnailListView.positionViewAtIndex(thumbnailListView.currentIndex, ListView.Contain)
                     }
                 }
-            }
 
-            /*
+                delegate: MouseArea {
-            * Key navigation on outer item for two reasons:
+                    width: thumbnailListView.width
-            * @li we have to emit the change signal
+                    height: delegateColumn.implicitHeight + 2 * delegateColumn.y
-            * @li on multiple invocation it does not work on the list view. Focus seems to be lost.
+
-            **/
+                    onClicked: thumbnailListView.currentIndex = index
-            Keys.onPressed: {
+
-                if (event.key == Qt.Key_Up) {
+                    ColumnLayout {
-                    thumbnailListView.decrementCurrentIndex();
+                        id: delegateColumn
-                } else if (event.key == Qt.Key_Down) {
+                        anchors.horizontalCenter: parent.horizontalCenter
-                    thumbnailListView.incrementCurrentIndex();
+                        // anchors.centerIn causes layouting glitches
+                        y: units.smallSpacing
+                        width: parent.width - 2 * units.smallSpacing
+                        spacing: units.smallSpacing
+
+                        Item {
+                            Layout.fillWidth: true
+                            Layout.preferredHeight: Math.round(width / tabBox.screenFactor)
+
+                            KWin.ThumbnailItem {
+                                anchors.fill: parent
+                                wId: windowId
+                            }
+                        }
+
+                        RowLayout {
+                            spacing: units.smallSpacing
+                            Layout.fillWidth: true
+
+                            PlasmaCore.IconItem {
+                                Layout.preferredHeight: units.iconSizes.medium
+                                Layout.preferredWidth: units.iconSizes.medium
+                                source: model.icon
+                                usesPlasmaTheme: false
+                            }
+
+                            PlasmaExtras.Heading {
+                                Layout.fillWidth: true
+                                height: undefined
+                                level: 4
+                                text: model.caption
+                                elide: Text.ElideRight
+                                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                                maximumLineCount: 2
+                                lineHeight: 0.95
+                            }
+                        }
+                    }
                 }
+
+                highlight: PlasmaComponents.Highlight {}
             }
         }
     }