yukijoou/kwin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the Window Decoration themes' Configure buttons more obvious

Browse source 
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
This commit is contained in:
Nathaniel Graham 2018-03-09 21:48:45 -07:00
parent a2b82d3583
commit 7cde4b1028
1 changed files with 29 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
kcmkwin/kwindecoration/qml/Previews.qml
View file

@ -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()
}
}
}