Commit 7cde4b10 authored by Nate Graham's avatar Nate Graham
Browse files

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
parent a2b82d35
......@@ -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()
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment