kwin/kcmkwin/kwindecoration/qml/Previews.qml
Nathaniel Graham 7cde4b1028 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
2018-03-28 11:33:50 -06:00

152 lines
6.7 KiB
QML

/*
* Copyright 2014 Martin Gräßlin <mgraesslin@kde.org>
*
* 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 the Free Software Foundation; either version 2 of
* the License or (at your option) version 3 or any later version
* accepted by the membership of KDE e.V. (or its successor approved
* by the membership of KDE e.V.), which shall act as a proxy
* defined in Section 14 of version 3 of the license.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* 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.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 {
objectName: "themeList"
frameVisible: true
GridView {
id: gridView
objectName: "listView"
model: decorationsModel
cellWidth: 20 * units.gridUnit
cellHeight: cellWidth / 1.6
onContentHeightChanged: {
if (gridView.currentIndex == -1) {
gridView.currentIndex = savedIndex;
}
gridView.positionViewAtIndex(gridView.currentIndex, GridView.Visible);
}
Rectangle {
z: -1
anchors.fill: parent
color: baseColor
}
highlight: Rectangle {
color: highlightColor
opacity: 0.6
}
highlightMoveDuration: units.longDuration
boundsBehavior: Flickable.StopAtBounds
property int borderSizesIndex: 3 // 3 == Normal
delegate: Item {
width: gridView.cellWidth
height: gridView.cellHeight
KDecoration.Bridge {
id: bridgeItem
plugin: model["plugin"]
theme: model["theme"]
}
KDecoration.Settings {
id: settingsItem
bridge: bridgeItem.bridge
borderSizesIndex: gridView.borderSizesIndex
}
MouseArea {
hoverEnabled: false
anchors.fill: parent
onClicked: {
gridView.currentIndex = index;
}
}
ColumnLayout {
id: decorationPreviews
property string themeName: model["display"]
anchors.fill: parent
Item {
KDecoration.Decoration {
id: inactivePreview
bridge: bridgeItem.bridge
settings: settingsItem
anchors.fill: parent
Component.onCompleted: {
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);});
anchors.topMargin = Qt.binding(function() { return 10 - (inactivePreview.shadow ? inactivePreview.shadow.paddingTop : 0);});
anchors.bottomMargin = Qt.binding(function() { return 40 - (inactivePreview.shadow ? inactivePreview.shadow.paddingBottom : 0);});
}
}
KDecoration.Decoration {
id: activePreview
bridge: bridgeItem.bridge
settings: settingsItem
anchors.fill: parent
Component.onCompleted: {
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);});
anchors.topMargin = Qt.binding(function() { return 40 - (activePreview.shadow ? activePreview.shadow.paddingTop : 0);});
anchors.bottomMargin = Qt.binding(function() { return 10 - (activePreview.shadow ? activePreview.shadow.paddingBottom : 0);});
}
}
MouseArea {
hoverEnabled: false
anchors.fill: parent
onClicked: {
gridView.currentIndex = index;
}
}
Layout.fillWidth: true
Layout.fillHeight: true
/* 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
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()
}
}
}
}
}
}
}
Layout.preferredHeight: 20 * units.gridUnit
}