[kcmkwin/compositing] Port Effects KCM to QQC2

Summary:
This patch ports the Effects KCM to QQC2, which yields the following benefits:
1. General performance enhancements of only using QQC2 rather than a mix of 1 and 2
2. Some code simplification is possible
3. Improves the appearance of the checkable menu items in the dropdown menu, fixing https://bugs.kde.org/show_bug.cgi?id=402701
4. Improves the appearance when using a fractional scale factor, fixing https://bugs.kde.org/show_bug.cgi?id=396725
5. Fixes the incorrect size when opened from `kcmshell5`

Along the way, two visual changes are introduced as a by-product of porting:
1. The scrollbar is inline, so it overlaps some of the buttons in the content. This is somewhat undesirable, but adopting a Kirigami scrollview would fix this.
2. The button that displays a dropdown menu no longer has a downward-pointing arrow to indicate as such. This is not my preference, but there's a benefit to being consistent, and eventually we could can change this in one place to impeove the appearance of buttons that display dropdown menus everywhere in one fell swoop.

BUG: 396725
BUG: 402701
BUG: 396076
FIXED-IN: 5.15.0

Test Plan:
All functionality still works

In System Settings, showing improved checkable menu item appearance:
{F6523385}

In `kcmshell` at 1x scale:
{F6523386}

In `kcmshell` at 1.5x scale:
{F6523387}

Reviewers: #kwin, #plasma, davidedmundson

Reviewed By: #kwin, #plasma, davidedmundson

Subscribers: davidedmundson, kwin

Tags: #kwin

Differential Revision: https://phabricator.kde.org/D17928
This commit is contained in:
Nate Graham 2019-01-06 15:42:46 -07:00
parent 90306f5c08
commit d288276269

View file

@ -19,34 +19,14 @@
**************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls 2.0 as QQC2
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.0
import org.kde.kwin.kwincompositing 1.0
Rectangle {
signal changed
implicitWidth: col.implicitWidth
implicitHeight: col.implicitHeight
Component {
id: sectionHeading
Rectangle {
width: parent.width
implicitHeight: sectionText.implicitHeight + 2 * col.spacing
color: searchModel.backgroundNormalColor
QQC2.Label {
id: sectionText
x: col.spacing
y: col.spacing
text: section
font.weight: Font.Bold
color: searchModel.sectionColor
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
implicitHeight: 500
implicitWidth: 400
EffectConfig {
id: effectConfig
@ -59,17 +39,17 @@ Rectangle {
id: col
anchors.fill: parent
QQC2.Label {
Label {
id: hint
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft
text: i18n("Hint: To find out or configure how to activate an effect, look at the effect's settings.")
anchors {
top: parent.top
left: parent.left
}
elide: Text.ElideRight
}
RowLayout {
QQC2.TextField {
TextField {
// TODO: needs clear button, missing in Qt
id: searchField
placeholderText: i18n("Search...")
@ -78,45 +58,43 @@ Rectangle {
}
Button {
iconName: "configure"
tooltip: i18n("Configure filter")
menu: Menu {
MenuItem {
text: i18n("Exclude Desktop Effects not supported by the Compositor")
checkable: true
checked: searchModel.filterOutUnsupported
onTriggered: {
searchModel.filterOutUnsupported = !searchModel.filterOutUnsupported;
}
id: configureButton
icon.name: "configure"
ToolTip.visible: hovered
ToolTip.text: i18n("Configure filter")
onClicked: menu.opened ? menu.close() : menu.open()
}
Menu {
id: menu
y: configureButton.height
x: parent.width - width
MenuItem {
text: i18n("Exclude Desktop Effects not supported by the Compositor")
checkable: true
checked: searchModel.filterOutUnsupported
onToggled: {
searchModel.filterOutUnsupported = !searchModel.filterOutUnsupported;
}
MenuItem {
text: i18n("Exclude internal Desktop Effects")
checkable: true
checked: searchModel.filterOutInternal
onTriggered: {
searchModel.filterOutInternal = !searchModel.filterOutInternal
}
}
MenuItem {
text: i18n("Exclude internal Desktop Effects")
checkable: true
checked: searchModel.filterOutInternal
onToggled: {
searchModel.filterOutInternal = !searchModel.filterOutInternal
}
}
}
}
EffectFilterModel {
id: searchModel
objectName: "filterModel"
filter: searchField.text
}
ScrollView {
id: scroll
frameVisible: true
highlightOnFocus: true
Layout.fillWidth: true
Layout.fillHeight: true
Rectangle {
color: effectView.backgroundNormalColor
anchors.fill: parent
}
clip: true
// Draw a frame around the scrollview
Component.onCompleted: background.visible = true;
ListView {
function exclusiveGroupForCategory(category) {
for (var i = 0; i < effectView.exclusiveGroups.length; ++i) {
@ -139,7 +117,11 @@ Rectangle {
property color backgroundNormalColor: searchModel.backgroundNormalColor
property color backgroundAlternateColor: searchModel.backgroundAlternateColor
anchors.fill: parent
model: searchModel
model: EffectFilterModel {
id: searchModel
objectName: "filterModel"
filter: searchField.text
}
delegate: Effect{
id: effectDelegate
Connections {
@ -155,7 +137,22 @@ Rectangle {
}
section.property: "CategoryRole"
section.delegate: sectionHeading
section.delegate: Rectangle {
width: parent.width
implicitHeight: sectionText.implicitHeight + 2 * col.spacing
color: searchModel.backgroundNormalColor
Label {
id: sectionText
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: section
font.weight: Font.Bold
color: searchModel.sectionColor
}
}
spacing: col.spacing
focus: true
}
@ -170,7 +167,7 @@ Rectangle {
Button {
id: ghnsButton
text: i18n("Get New Desktop Effects...")
iconName: "get-hot-new-stuff"
icon.name: "get-hot-new-stuff"
onClicked: effectConfig.openGHNS()
}
}
@ -179,4 +176,4 @@ Rectangle {
target: searchModel
onDataChanged: changed()
}
}//End item
}//End Rectangle