From 7cde4b1028e2a8875bbae28c933f37d1e656502f Mon Sep 17 00:00:00 2001
From: Nathaniel Graham <nate@kde.org>
Date: Fri, 9 Mar 2018 21:48:45 -0700
Subject: [PATCH] Make the Window Decoration themes' Configure buttons more
 obvious

Summary:
As documented via bug reports and online support requests, many users have difficulty learning that window decorations are customizable, because they don't notice or understand the little icon-only button in the bottom-left corner of each theme preview.

This patch centers the buttons and adds text including the theme name , making it obvious what the buttons are for.

Also, clicking on one of the buttons now automatically selects its corresponding theme, because configuring an un-selected theme doesn't make a lot of sense and could lead to user confusion once this UI is more obvious and widely-used.

BUG: 390245

Test Plan:
{F5761897}

- Clicked on the configure buttons; each one selects its parent theme and opens its configuration dialog

Reviewers: #kwin, #plasma, #vdg, cfeck, graesslin

Reviewed By: #kwin, #plasma, graesslin

Subscribers: richardbowen, zzag, kigwana, rkflx, matheusm, fabianr, abetts, Fuchs, graesslin, kwin

Tags: #kwin

Differential Revision: https://phabricator.kde.org/D11201
---
 kcmkwin/kwindecoration/qml/Previews.qml | 37 +++++++++++++++++++------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/kcmkwin/kwindecoration/qml/Previews.qml b/kcmkwin/kwindecoration/qml/Previews.qml
index cfb417236e..700e726563 100644
--- a/kcmkwin/kwindecoration/qml/Previews.qml
+++ b/kcmkwin/kwindecoration/qml/Previews.qml
@@ -72,6 +72,8 @@ ScrollView {
                 }
             }
             ColumnLayout {
+                id: decorationPreviews
+                property string themeName: model["display"]
                 anchors.fill: parent
                 Item {
                     KDecoration.Decoration {
@@ -80,7 +82,7 @@ ScrollView {
                         settings: settingsItem
                         anchors.fill: parent
                         Component.onCompleted: {
-                            client.caption = Qt.binding(function() { return model["display"]; });
+                            client.caption = decorationPreviews.themeName
                             client.active = false;
                             anchors.leftMargin = Qt.binding(function() { return 40 - (inactivePreview.shadow ? inactivePreview.shadow.paddingLeft : 0);});
                             anchors.rightMargin = Qt.binding(function() { return 10 - (inactivePreview.shadow ? inactivePreview.shadow.paddingRight : 0);});
@@ -94,7 +96,7 @@ ScrollView {
                         settings: settingsItem
                         anchors.fill: parent
                         Component.onCompleted: {
-                            client.caption = Qt.binding(function() { return model["display"]; });
+                            client.caption = decorationPreviews.themeName
                             client.active = true;
                             anchors.leftMargin = Qt.binding(function() { return 10 - (activePreview.shadow ? activePreview.shadow.paddingLeft : 0);});
                             anchors.rightMargin = Qt.binding(function() { return 40 - (activePreview.shadow ? activePreview.shadow.paddingRight : 0);});
@@ -111,16 +113,35 @@ ScrollView {
                     }
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    Button {
-                        id: configureButton
+                    /* Create an invisible rectangle that's the same size as the inner content rect
+                       of the foreground window preview so that we can center the button within it.
+                       We have to center rather than using anchors because the button width varies
+                       with different localizations */
+                    Item {
                         anchors {
                             left: parent.left
+                            leftMargin: 10
+                            right: parent.right
+                            rightMargin: 40
+                            top: parent.top
+                            topMargin: 68
                             bottom: parent.bottom
-                            margins: 20
+                            bottomMargin: 10
+                        }
+                        Button {
+                            id: configureButton
+                            anchors {
+                                horizontalCenter: parent.horizontalCenter
+                                verticalCenter: parent.verticalCenter
+                            }
+                            enabled: model["configureable"]
+                            iconName: "configure"
+                            text: i18n("Configure %1...", decorationPreviews.themeName)
+                            onClicked: {
+                                gridView.currentIndex = index
+                                bridgeItem.bridge.configure()
+                            }
                         }
-                        enabled: model["configureable"]
-                        iconName: "configure"
-                        onClicked: bridgeItem.bridge.configure()
                     }
                 }
             }