Overhaul of deco kcm

- align with system palette
- base color for buttons and preview individually
  to create a visual gap (make them more standalone)
- downsized button config buttons to match up w/ preview
  appearance (and because it was simply to huge for a desktop thing)
- upsized preview to preferably show two elements at once
  (current + 2*1/2context)
- made the titlebar a visible visual element
- label the titlebar "Titlebar"
- move the (altered) hint to the drag-from area
- hint draggability with a pointing hand cursor
- less hardcoded values
- brief animations on button adding/removing

BUG: 337544
REVIEW: 122064

kcmkwin/kwindecoration/declarative-plugin/previewclient.cpp

@@ -25,6 +25,8 @@
 #include <KColorSchemeManager>
 
 #include <QDebug>
+#include <QCoreApplication>
+#include <QEvent>
 #include <QModelIndex>
 
 namespace KDecoration2
@@ -120,6 +122,8 @@ PreviewClient::PreviewClient(DecoratedClient *c, Decoration *decoration)
     connect(this, &PreviewClient::bordersLeftEdgeChanged,   this, emitEdgesChanged);
     connect(this, &PreviewClient::bordersRightEdgeChanged,  this, emitEdgesChanged);
     connect(this, &PreviewClient::bordersBottomEdgeChanged, this, emitEdgesChanged);
+
+    qApp->installEventFilter(this);
 }
 
 PreviewClient::~PreviewClient() = default;
@@ -449,5 +453,14 @@ SETTER2(setProvidesContextHelp, providesContextHelp)
 #undef SETTER2
 #undef SETTER
 
+bool PreviewClient::eventFilter(QObject *watched, QEvent *e)
+{
+    if (e->type() == QEvent::ApplicationPaletteChange) {
+        m_palette = QPalette();
+        emit paletteChanged(m_palette);
+    }
+    return false;
+}
+
 } // namespace Preview
 } // namespace KDecoration2

kcmkwin/kwindecoration/declarative-plugin/previewclient.h

@@ -142,6 +142,8 @@ public:
     void setBordersRightEdge(bool enabled);
     void setBordersBottomEdge(bool enabled);
 
+    bool eventFilter(QObject *watched, QEvent *e) override;
+
 Q_SIGNALS:
     void captionChanged(const QString &);
     void iconChanged(const QIcon &);

kcmkwin/kwindecoration/kcm.cpp

@@ -31,6 +31,7 @@
 // Qt
 #include <QDBusConnection>
 #include <QDBusMessage>
+#include <QFontDatabase>
 #include <QMenu>
 #include <QQmlContext>
 #include <QQmlEngine>
@@ -83,9 +84,10 @@ ConfigurationModule::ConfigurationModule(QWidget *parent, const QVariantList &ar
 
     qmlRegisterType<QAbstractItemModel>();
     m_ui->view->rootContext()->setContextProperty(QStringLiteral("decorationsModel"), m_proxyModel);
-    m_ui->view->rootContext()->setContextProperty("highlightColor", QPalette().color(QPalette::Highlight));
+    updateColors();
     m_ui->view->rootContext()->setContextProperty("_borderSizesIndex", 3); // 3 is normal
     m_ui->view->rootContext()->setContextProperty("configurationModule", this);
+    m_ui->view->rootContext()->setContextProperty("titleFont", QFontDatabase::systemFont(QFontDatabase::TitleFont));
     m_ui->view->setResizeMode(QQuickWidget::SizeRootObjectToView);
     m_ui->view->setSource(QUrl::fromLocalFile(QStandardPaths::locate(QStandardPaths::GenericDataLocation, QStringLiteral("kwin/kcm_kwindecoration/main.qml"))));
     if (m_ui->view->status() == QQuickWidget::Ready) {
@@ -164,6 +166,8 @@ ConfigurationModule::ConfigurationModule(QWidget *parent, const QVariantList &ar
     QVBoxLayout *l = new QVBoxLayout(this);
     l->addWidget(m_ui);
     QMetaObject::invokeMethod(m_model, "init", Qt::QueuedConnection);
+
+    m_ui->installEventFilter(this);
 }
 
 ConfigurationModule::~ConfigurationModule() = default;
@@ -379,6 +383,23 @@ QAbstractItemModel *ConfigurationModule::availableButtons() const
     return m_availableButtons;
 }
 
+bool ConfigurationModule::eventFilter(QObject *watched, QEvent *e)
+{
+    if (watched != m_ui) {
+        return false;
+    }
+    if (e->type() == QEvent::PaletteChange) {
+        updateColors();
+    }
+    return false;
+}
+
+void ConfigurationModule::updateColors()
+{
+    m_ui->view->setClearColor(m_ui->view->palette().color(QPalette::Window));
+    m_ui->view->rootContext()->setContextProperty("highlightColor", QPalette().color(QPalette::Highlight));
+}
+
 }
 }
 

kcmkwin/kwindecoration/kcm.h

@@ -57,6 +57,8 @@ public:
     QAbstractItemModel *rightButtons() const;
     QAbstractItemModel *availableButtons() const;
 
+    bool eventFilter(QObject *watched, QEvent *e) override;
+
 public Q_SLOTS:
     void defaults() override;
     void load() override;
@@ -67,6 +69,7 @@ protected:
 
 private:
     void showKNS(const QString &config);
+    void updateColors();
     DecorationsModel *m_model;
     QSortFilterProxyModel *m_proxyModel;
     ConfigurationForm *m_ui;

kcmkwin/kwindecoration/qml/ButtonGroup.qml

@@ -21,6 +21,7 @@ import QtQuick 2.1
 import QtQuick.Controls 1.2
 import QtQuick.Layouts 1.1
 import org.kde.kwin.private.kdecoration 1.0 as KDecoration
+import org.kde.plasma.core 2.0 as PlasmaCore;
 
 ListView {
     id: view
@@ -28,9 +29,10 @@ ListView {
     property bool dragging: false
     orientation: ListView.Horizontal
     interactive: false
+    spacing: units.smallSpacing
     delegate: Item {
-        width: 32
-        height: 32
+        width: units.iconSizes.small
+        height: units.iconSizes.small
         KDecoration.Button {
             id: button
             property int itemIndex: index
@@ -45,6 +47,7 @@ ListView {
         }
         MouseArea {
             id: dragArea
+            cursorShape: Qt.PointingHandCursor
             anchors.fill: parent
             drag.target: button
             onReleased: {
@@ -56,5 +59,16 @@ ListView {
             }
         }
     }
-    Layout.preferredWidth: count * 32
+    add: Transition {
+        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: units.longDuration/2 }
+        NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: units.longDuration/2 }
+    }
+    move: Transition {
+        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: units.longDuration/2 }
+        NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: units.longDuration/2 }
+    }
+    displaced: Transition {
+        NumberAnimation { properties: "x,y"; duration: units.longDuration; easing.type: Easing.OutBounce }
+    }
+    Layout.preferredWidth: count * (units.iconSizes.small + units.smallSpacing) - Math.min(1, count) * units.smallSpacing
 }

kcmkwin/kwindecoration/qml/Buttons.qml

@@ -17,11 +17,12 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import QtQuick 2.1
+import QtQuick 2.4
 import QtQuick.Controls 1.2
 import QtQuick.Layouts 1.1
 import org.kde.kwin.private.kdecoration 1.0 as KDecoration
 import org.kde.kquickcontrolsaddons 2.0 as KQuickControlsAddons;
+import org.kde.plasma.core 2.0 as PlasmaCore;
 
 Item {
     Layout.preferredHeight: layout.height
@@ -33,154 +34,194 @@ Item {
         id: settingsItem
         bridge: bridgeItem
     }
-    ColumnLayout {
-        id: layout
-        width: parent.width
-        height: buttonPreviewRow.height + availableGrid.height
-        RowLayout {
-            id: buttonPreviewRow
-            height: 32
+    Rectangle {
+        anchors.fill: parent
+        anchors.topMargin: units.gridUnit / 2
+        border.width: Math.ceil(units.gridUnit / 16.0)
+        color: SystemPalette.base;
+        border.color: highlightColor;
+        ColumnLayout {
+            id: layout
             width: parent.width
-            ButtonGroup {
-                id: leftButtonsView
-                height: buttonPreviewRow.height
-                model: configurationModule.leftButtons
-                key: "decoButtonLeft"
-            }
-            Item {
+            height: titlebarRect.height + availableGrid.height + dragHint.height + 5*layout.spacing
+            Rectangle {
+                id: titlebarRect
+                height: buttonPreviewRow.height + units.smallSpacing
                 Layout.fillWidth: true
-                Label {
-                    anchors.centerIn: parent
-                    text: i18n("Drag to re-position buttons")
-                }
-            }
-            ButtonGroup {
-                id: rightButtonsView
-                height: buttonPreviewRow.height
-                model: configurationModule.rightButtons
-                key: "decoButtonRight"
-            }
-            DropArea {
-                anchors.fill: parent
-                keys: [ "decoButtonAdd", "decoButtonRight", "decoButtonLeft" ]
-                onEntered: {
-                    drag.accept();
-                }
-                onDropped: {
-                    var view = undefined;
-                    var left = drag.x - (leftButtonsView.x + leftButtonsView.width);
-                    var right = drag.x - rightButtonsView.x;
-                    if (Math.abs(left) <= Math.abs(right)) {
-                        view = leftButtonsView;
-                    } else {
-                        view = rightButtonsView;
+                border.width: Math.ceil(units.gridUnit / 16.0)
+                border.color: highlightColor
+                color: SystemPalette.base;
+                RowLayout {
+                    id: buttonPreviewRow
+                    anchors.top: parent.top;
+                    anchors.left: parent.left;
+                    anchors.right: parent.right;
+                    anchors.margins: units.smallSpacing / 2
+                    height: Math.max(units.iconSizes.small, titlebar.implicitHeight) + units.smallSpacing/2
+                    ButtonGroup {
+                        id: leftButtonsView
+                        height: buttonPreviewRow.height
+                        model: configurationModule.leftButtons
+                        key: "decoButtonLeft"
                     }
-                    if (!view) {
-                        return;
+                    Item {
+                        Layout.fillWidth: true
+                        height: titlebar.implicitHeight
+                        Label {
+                            id: titlebar
+                            anchors.centerIn: parent
+                            font: titleFont
+                            text: i18n("Titlebar")
+                        }
                     }
-                    var point = mapToItem(view, drag.x, drag.y);
-                    var index = view.indexAt(point.x, point.y);
-                    if (index == -1 && (view.x + view.width <= drag.x)) {
-                        index = view.count - 1;
+                    ButtonGroup {
+                        id: rightButtonsView
+                        height: buttonPreviewRow.height
+                        model: configurationModule.rightButtons
+                        key: "decoButtonRight"
                     }
-                    if (drop.keys.indexOf("decoButtonAdd") != -1) {
-                        view.model.add(index, drag.source.type);
-                    } else if (drop.keys.indexOf("decoButtonLeft") != -1) {
-                        if (view == leftButtonsView) {
-                            // move in same view
-                            if (index != drag.source.itemIndex) {
-                                drag.source.buttonsModel.move(drag.source.itemIndex, index);
-                            }
-                        } else  {
-                            // move to right view
-                            view.model.add(index, drag.source.type);
-                            drag.source.buttonsModel.remove(drag.source.itemIndex);
+                    DropArea {
+                        anchors.fill: parent
+                        keys: [ "decoButtonAdd", "decoButtonRight", "decoButtonLeft" ]
+                        onEntered: {
+                            drag.accept();
                         }
-                    } else if (drop.keys.indexOf("decoButtonRight") != -1) {
-                        if (view == rightButtonsView) {
-                            // move in same view
-                            if (index != drag.source.itemIndex) {
-                                drag.source.buttonsModel.move(drag.source.itemIndex, index);
+                        onDropped: {
+                            var view = undefined;
+                            var left = drag.x - (leftButtonsView.x + leftButtonsView.width);
+                            var right = drag.x - rightButtonsView.x;
+                            if (Math.abs(left) <= Math.abs(right)) {
+                                view = leftButtonsView;
+                            } else {
+                                view = rightButtonsView;
+                            }
+                            if (!view) {
+                                return;
+                            }
+                            var point = mapToItem(view, drag.x, drag.y);
+                            var index = view.indexAt(point.x, point.y);
+                            if (index == -1 && (view.x + view.width <= drag.x)) {
+                                index = view.count - 1;
+                            }
+                            if (drop.keys.indexOf("decoButtonAdd") != -1) {
+                                view.model.add(index, drag.source.type);
+                            } else if (drop.keys.indexOf("decoButtonLeft") != -1) {
+                                if (view == leftButtonsView) {
+                                    // move in same view
+                                    if (index != drag.source.itemIndex) {
+                                        drag.source.buttonsModel.move(drag.source.itemIndex, index);
+                                    }
+                                } else  {
+                                    // move to right view
+                                    view.model.add(index, drag.source.type);
+                                    drag.source.buttonsModel.remove(drag.source.itemIndex);
+                                }
+                            } else if (drop.keys.indexOf("decoButtonRight") != -1) {
+                                if (view == rightButtonsView) {
+                                    // move in same view
+                                    if (index != drag.source.itemIndex) {
+                                        drag.source.buttonsModel.move(drag.source.itemIndex, index);
+                                    }
+                                } else {
+                                    // move to right view
+                                    view.model.add(index, drag.source.type);
+                                    drag.source.buttonsModel.remove(drag.source.itemIndex);
+                                }
                             }
-                        } else {
-                            // move to right view
-                            view.model.add(index, drag.source.type);
-                            drag.source.buttonsModel.remove(drag.source.itemIndex);
                         }
                     }
                 }
             }
-        }
-        GridView {
-            id: availableGrid
-            Layout.fillWidth: true
-            model: configurationModule.availableButtons
-            cellWidth: 96
-            cellHeight: 96
-            height: cellHeight * 2.5
-            opacity: (leftButtonsView.dragging || rightButtonsView.dragging) ? 0.25 : 1.0
-            delegate: Item {
-                width: availableGrid.cellWidth
-                height: availableGrid.cellHeight
-                KDecoration.Button {
-                    anchors.centerIn: Drag.active ? undefined : parent
-                    id: availableButton
-                    bridge: bridgeItem
-                    settings: settingsItem
-                    type: model["button"]
-                    width: 32
-                    height: 32
-                    Drag.keys: [ "decoButtonAdd" ]
-                    Drag.active: dragArea.drag.active
-                }
-                Label {
-                    text: model["display"]
-                    horizontalAlignment: Text.AlignHCenter
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    elide: Text.ElideRight
-                    wrapMode: Text.Wrap
-                }
-                MouseArea {
-                    id: dragArea
-                    anchors.fill: parent
-                    drag.target: availableButton
-                    onReleased: {
-                        if (availableButton.Drag.target) {
-                            availableButton.Drag.drop();
-                        } else {
-                            availableButton.Drag.cancel();
+            Text {
+                id: iCannotBelieveIDoThis
+                text: "gnarf"
+                visible: false
+            }
+            GridView {
+                id: availableGrid
+                Layout.fillWidth: true
+                model: configurationModule.availableButtons
+                interactive: false
+                cellWidth: iconLabel.implicitWidth
+                cellHeight: units.iconSizes.small + iCannotBelieveIDoThis.implicitHeight + 4*units.smallSpacing
+                height: Math.ceil(cellHeight * 2.5)
+                opacity: (leftButtonsView.dragging || rightButtonsView.dragging) ? 0.25 : 1.0
+                delegate: Item {
+                    id: availableDelegate
+                    width: availableGrid.cellWidth
+                    height: availableGrid.cellHeight
+                    KDecoration.Button {
+                        id: availableButton
+                        anchors.centerIn: Drag.active ? undefined : parent
+                        bridge: bridgeItem
+                        settings: settingsItem
+                        type: model["button"]
+                        width: units.iconSizes.small
+                        height: units.iconSizes.small
+                        Drag.keys: [ "decoButtonAdd" ]
+                        Drag.active: dragArea.drag.active
+                    }
+                    Label {
+                        id: iconLabel
+                        text: model["display"]
+                        horizontalAlignment: Text.AlignHCenter
+                        anchors.bottom: parent.bottom
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        elide: Text.ElideRight
+                        wrapMode: Text.Wrap
+                    }
+                    MouseArea {
+                        id: dragArea
+                        anchors.fill: parent
+                        drag.target: availableButton
+                        cursorShape: Qt.PointingHandCursor
+                        onReleased: {
+                            if (availableButton.Drag.target) {
+                                availableButton.Drag.drop();
+                            } else {
+                                availableButton.Drag.cancel();
+                            }
                         }
                     }
                 }
             }
-        }
-        DropArea {
-            anchors.fill: availableGrid
-            keys: [ "decoButtonRemove" ]
-            onEntered: {
-                drag.accept();
-            }
-            onDropped: {
-                drag.source.buttonsModel.remove(drag.source.itemIndex);
+            Text {
+                id: dragHint
+                visible: !(leftButtonsView.dragging || rightButtonsView.dragging || availableGrid.dragging)
+                Layout.fillWidth: true
+                color: SystemPalette.text;
+                opacity: 0.66
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignTop
+                text: i18n("Drag buttons between here and the titlebar")
             }
-            ColumnLayout {
-                anchors.centerIn: parent
-                visible: leftButtonsView.dragging || rightButtonsView.dragging
-                Label {
-                    text: i18n("Drop here to remove button")
-                    font.bold: true
+            DropArea {
+                anchors.fill: availableGrid
+                keys: [ "decoButtonRemove" ]
+                onEntered: {
+                    drag.accept();
                 }
-                KQuickControlsAddons.QIconItem {
-                    id: icon
-                    width: 64
-                    height: 64
-                    icon: "list-remove"
-                    Layout.alignment: Qt.AlignHCenter
+                onDropped: {
+                    drag.source.buttonsModel.remove(drag.source.itemIndex);
                 }
-                Item {
-                    Layout.fillHeight: true
+                ColumnLayout {
+                    anchors.centerIn: parent
+                    visible: leftButtonsView.dragging || rightButtonsView.dragging
+                    Label {
+                        text: i18n("Drop here to remove button")
+                        font.bold: true
+                    }
+                    KQuickControlsAddons.QIconItem {
+                        id: icon
+                        width: 64
+                        height: 64
+                        icon: "list-remove"
+                        Layout.alignment: Qt.AlignHCenter
+                    }
+                    Item {
+                        Layout.fillHeight: true
+                    }
                 }
             }
         }

kcmkwin/kwindecoration/qml/Previews.qml

@@ -21,24 +21,30 @@ import QtQuick 2.1
 import QtQuick.Controls 1.2
 import QtQuick.Layouts 1.1
 import org.kde.kwin.private.kdecoration 1.0 as KDecoration
+import org.kde.plasma.core 2.0 as PlasmaCore;
 
 ScrollView {
     ListView {
         id: listView
         objectName: "listView"
         model: decorationsModel
+        Rectangle {
+            z: -1
+            anchors.fill: parent
+            color: SystemPalette.base;
+        }
         highlight: Rectangle {
             width: listView.width
-            height: 150
+            height: 10 * units.gridUnit
             color: highlightColor
             opacity: 0.5
         }
-        highlightMoveDuration: 250
+        highlightMoveDuration: units.longDuration
         boundsBehavior: Flickable.StopAtBounds
         property int borderSizesIndex: 3 // 3 == Normal
         delegate: Item {
             width: listView.width
-            height: 150
+            height: 10 * units.gridUnit
             KDecoration.Bridge {
                 id: bridgeItem
                 plugin: model["plugin"]
@@ -106,5 +112,6 @@ ScrollView {
             }
         }
     }
+    Layout.preferredHeight: 20 * units.gridUnit
 }