[kcmkwin/kwindecoration] Clean up QML code

Various fixes:
- Remove unneeded PlasmaCore import
- Re-arrange imports to be alphabetical and grouped consistently
- Use standard import names
- Use Kirigami units explicitly
- Remove unused ids
- Remove unneeded cases of setting aproperty to its default value
- Use Layouts where appropriate instead of lots of anchors
- Reduce number of unnecessary items
- Fix inappropriate mutation of `width` and `height` inside layouts

Visual changes are extremely minor and of a bugfixy nature.

BUG: 428883
FIXED-IN: 5.21
This commit is contained in:
Nate Graham 2020-11-10 13:53:48 -07:00
parent 99c5f0aed6
commit 592c82abeb
4 changed files with 227 additions and 236 deletions

View file

@ -17,8 +17,8 @@ ListView {
implicitHeight: iconSize implicitHeight: iconSize
implicitWidth: count * (iconSize + units.smallSpacing) - Math.min(1, count) * units.smallSpacing implicitWidth: count * (iconSize + units.smallSpacing) - Math.min(1, count) * units.smallSpacing
delegate: Item { delegate: Item {
width: iconSize width: view.iconSize
height: iconSize height: view.iconSize
KDecoration.Button { KDecoration.Button {
id: button id: button
property int itemIndex: index property int itemIndex: index
@ -26,8 +26,8 @@ ListView {
bridge: bridgeItem.bridge bridge: bridgeItem.bridge
settings: settingsItem settings: settingsItem
type: model["button"] type: model["button"]
width: iconSize width: view.iconSize
height: iconSize height: view.iconSize
anchors.fill: Drag.active ? undefined : parent anchors.fill: Drag.active ? undefined : parent
Drag.keys: [ "decoButtonRemove", view.key ] Drag.keys: [ "decoButtonRemove", view.key ]
Drag.active: dragArea.drag.active Drag.active: dragArea.drag.active

View file

@ -6,21 +6,24 @@
*/ */
import QtQuick 2.7 import QtQuick 2.7
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import QtQuick.Controls 2.4 as Controls import QtQuick.Controls 2.4 as QQC2
import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.kcm 1.3 as KCM
import org.kde.kirigami 2.5 as Kirigami import org.kde.kirigami 2.5 as Kirigami
import org.kde.kwin.private.kdecoration 1.0 as KDecoration import org.kde.kwin.private.kdecoration 1.0 as KDecoration
import org.kde.kcm 1.3 as KCM
ColumnLayout { // Fake Window
Layout.fillWidth: true Rectangle {
Layout.fillHeight: true id: baseLayout
property int buttonIconSize: units.iconSizes.medium
property int titleBarSpacing: units.smallSpacing * 2 readonly property int buttonIconSize: Kirigami.Units.iconSizes.medium
readonly property int titleBarSpacing: Kirigami.Units.largeSpacing
readonly property bool draggingTitlebarButtons: leftButtonsView.dragging || rightButtonsView.dragging readonly property bool draggingTitlebarButtons: leftButtonsView.dragging || rightButtonsView.dragging
readonly property bool hideDragHint: draggingTitlebarButtons || availableButtonsGrid.dragging readonly property bool hideDragHint: draggingTitlebarButtons || availableButtonsGrid.dragging
color: palette.base
radius: Kirigami.Units.smallSpacing
KDecoration.Bridge { KDecoration.Bridge {
id: bridgeItem id: bridgeItem
plugin: "org.kde.breeze" plugin: "org.kde.breeze"
@ -30,245 +33,230 @@ ColumnLayout {
bridge: bridgeItem.bridge bridge: bridgeItem.bridge
} }
Rectangle { ColumnLayout {
Layout.fillWidth: true anchors.fill: parent
color: palette.base
radius: units.smallSpacing
height: fakeWindow.height
Layout.margins: units.smallSpacing
ColumnLayout { // Fake titlebar
id: fakeWindow Rectangle {
width: parent.width Layout.fillWidth: true
implicitHeight: buttonPreviewRow.implicitHeight + 2 * baseLayout.titleBarSpacing
radius: Kirigami.Units.smallSpacing
gradient: Gradient {
GradientStop { position: 0.0; color: palette.midlight }
GradientStop { position: 1.0; color: palette.window }
}
Rectangle { RowLayout {
id: titleBar id: buttonPreviewRow
Layout.fillWidth: true anchors {
height: buttonPreviewRow.height + 2 * titleBarSpacing margins: baseLayout.titleBarSpacing
radius: units.smallSpacing left: parent.left
gradient: Gradient { right: parent.right
GradientStop { position: 0.0; color: palette.midlight } top: parent.top
GradientStop { position: 1.0; color: palette.window }
} }
RowLayout { ButtonGroup {
id: buttonPreviewRow id: leftButtonsView
anchors { iconSize: baseLayout.buttonIconSize
margins: titleBarSpacing model: kcm.leftButtonsModel
left: parent.left key: "decoButtonLeft"
right: parent.right
top: parent.top Rectangle {
visible: stateBindingButtonLeft.nonDefaultHighlightVisible
anchors.fill: parent
Layout.margins: Kirigami.Units.smallSpacing
color: "transparent"
border.color: Kirigami.Theme.neutralTextColor
border.width: Kirigami.Units.devicePixelRatio
radius: Kirigami.Units.smallSpacing
} }
ButtonGroup { KCM.SettingStateBinding {
id: leftButtonsView id: stateBindingButtonLeft
iconSize: buttonIconSize configObject: kcm.settings
model: kcm.leftButtonsModel settingName: "buttonsOnLeft"
key: "decoButtonLeft"
Rectangle {
visible: stateBindingButtonLeft.nonDefaultHighlightVisible
anchors.fill: parent
Layout.margins: units.smallSpacing
color: "transparent"
border.color: Kirigami.Theme.neutralTextColor
border.width: Kirigami.Units.devicePixelRatio
radius: units.smallSpacing
}
KCM.SettingStateBinding {
id: stateBindingButtonLeft
configObject: kcm.settings
settingName: "buttonsOnLeft"
}
}
Controls.Label {
id: titleBarLabel
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
font.bold: true
text: i18n("Titlebar")
}
ButtonGroup {
id: rightButtonsView
iconSize: buttonIconSize
model: kcm.rightButtonsModel
key: "decoButtonRight"
Rectangle {
visible: stateBindingButtonRight.nonDefaultHighlightVisible
anchors.fill: parent
Layout.margins: units.smallSpacing
color: "transparent"
border.color: Kirigami.Theme.neutralTextColor
border.width: Kirigami.Units.devicePixelRatio
radius: units.smallSpacing
}
KCM.SettingStateBinding {
id: stateBindingButtonRight
configObject: kcm.settings
settingName: "buttonsOnRight"
}
} }
} }
DropArea {
id: titleBarDropArea QQC2.Label {
anchors { Layout.fillWidth: true
fill: parent horizontalAlignment: Text.AlignHCenter
margins: -titleBarSpacing font.bold: true
text: i18n("Titlebar")
}
ButtonGroup {
id: rightButtonsView
iconSize: baseLayout.buttonIconSize
model: kcm.rightButtonsModel
key: "decoButtonRight"
Rectangle {
visible: stateBindingButtonRight.nonDefaultHighlightVisible
anchors.fill: parent
Layout.margins: Kirigami.Units.smallSpacing
color: "transparent"
border.color: Kirigami.Theme.neutralTextColor
border.width: Kirigami.Units.devicePixelRatio
radius: Kirigami.Units.smallSpacing
} }
keys: [ "decoButtonAdd", "decoButtonRight", "decoButtonLeft" ]
onEntered: { KCM.SettingStateBinding {
drag.accept(); id: stateBindingButtonRight
configObject: kcm.settings
settingName: "buttonsOnRight"
} }
onDropped: { }
var view = undefined; }
var left = drag.x - (leftButtonsView.x + leftButtonsView.width); DropArea {
var right = drag.x - rightButtonsView.x; id: titleBarDropArea
if (Math.abs(left) <= Math.abs(right)) { anchors {
if (leftButtonsView.enabled) { fill: parent
view = leftButtonsView; margins: -baseLayout.titleBarSpacing
}
keys: [ "decoButtonAdd", "decoButtonRight", "decoButtonLeft" ]
onEntered: {
drag.accept();
}
onDropped: {
var view = undefined;
var left = drag.x - (leftButtonsView.x + leftButtonsView.width);
var right = drag.x - rightButtonsView.x;
if (Math.abs(left) <= Math.abs(right)) {
if (leftButtonsView.enabled) {
view = leftButtonsView;
}
} else {
if (rightButtonsView.enabled) {
view = rightButtonsView;
}
}
if (!view) {
return;
}
var point = mapToItem(view, drag.x, drag.y);
var index = 0
for(var childIndex = 0 ; childIndex < (view.count - 1) ; childIndex++) {
var child = view.contentItem.children[childIndex]
if (child.x > point.x) {
break
}
index = childIndex + 1
}
if (drop.keys.indexOf("decoButtonAdd") !== -1) {
view.model.add(index, drag.source.type);
} else if (drop.keys.indexOf("decoButtonLeft") !== -1) {
if (view === leftButtonsView) {
// move in same view
if (index !== drag.source.itemIndex) {
drag.source.buttonsModel.move(drag.source.itemIndex, index);
}
} else {
// move to right view
view.model.add(index, drag.source.type);
drag.source.buttonsModel.remove(drag.source.itemIndex);
}
} else if (drop.keys.indexOf("decoButtonRight") !== -1) {
if (view === rightButtonsView) {
// move in same view
if (index !== drag.source.itemIndex) {
drag.source.buttonsModel.move(drag.source.itemIndex, index);
} }
} else { } else {
if (rightButtonsView.enabled) { // move to left view
view = rightButtonsView;
}
}
if (!view) {
return;
}
var point = mapToItem(view, drag.x, drag.y);
var index = 0
for(var childIndex = 0 ; childIndex < (view.count - 1) ; childIndex++) {
var child = view.contentItem.children[childIndex]
if (child.x > point.x) {
break
}
index = childIndex + 1
}
if (drop.keys.indexOf("decoButtonAdd") !== -1) {
view.model.add(index, drag.source.type); view.model.add(index, drag.source.type);
} else if (drop.keys.indexOf("decoButtonLeft") !== -1) { drag.source.buttonsModel.remove(drag.source.itemIndex);
if (view === leftButtonsView) {
// move in same view
if (index !== drag.source.itemIndex) {
drag.source.buttonsModel.move(drag.source.itemIndex, index);
}
} else {
// move to right view
view.model.add(index, drag.source.type);
drag.source.buttonsModel.remove(drag.source.itemIndex);
}
} else if (drop.keys.indexOf("decoButtonRight") !== -1) {
if (view === rightButtonsView) {
// move in same view
if (index !== drag.source.itemIndex) {
drag.source.buttonsModel.move(drag.source.itemIndex, index);
}
} else {
// move to left view
view.model.add(index, drag.source.type);
drag.source.buttonsModel.remove(drag.source.itemIndex);
}
} }
} }
} }
} }
GridView { }
id: availableButtonsGrid GridView {
property bool dragging: false id: availableButtonsGrid
Layout.fillWidth: true property bool dragging: false
Layout.minimumHeight: availableButtonsGrid.cellHeight * 2 Layout.fillWidth: true
Layout.margins: units.largeSpacing Layout.fillHeight: true
model: kcm.availableButtonsModel Layout.minimumHeight: availableButtonsGrid.cellHeight * 2
interactive: false Layout.margins: Kirigami.Units.largeSpacing
delegate: Item { model: kcm.availableButtonsModel
id: availableDelegate interactive: false
Layout.margins: units.largeSpacing
width: availableButtonsGrid.cellWidth
height: availableButtonsGrid.cellHeight
opacity: draggingTitlebarButtons ? 0.15 : 1.0
Rectangle {
id: availableButtonFrame
anchors.horizontalCenter: parent.horizontalCenter
color: palette.window
radius: units.smallSpacing
width: buttonIconSize + units.largeSpacing
height: buttonIconSize + units.largeSpacing
KDecoration.Button { delegate: ColumnLayout {
id: availableButton width: availableButtonsGrid.cellWidth
anchors.centerIn: Drag.active ? undefined : availableButtonFrame height: availableButtonsGrid.cellHeight
bridge: bridgeItem.bridge opacity: baseLayout.draggingTitlebarButtons ? 0.15 : 1.0
settings: settingsItem
type: model["button"] Rectangle {
width: buttonIconSize Layout.alignment: Qt.AlignHCenter
height: buttonIconSize color: palette.window
Drag.keys: [ "decoButtonAdd" ] radius: Kirigami.Units.smallSpacing
Drag.active: dragArea.drag.active implicitWidth: baseLayout.buttonIconSize + Kirigami.Units.largeSpacing
Drag.onActiveChanged: availableButtonsGrid.dragging = Drag.active implicitHeight: baseLayout.buttonIconSize + Kirigami.Units.largeSpacing
color: palette.windowText
} KDecoration.Button {
MouseArea { id: availableButton
id: dragArea anchors.centerIn: Drag.active ? undefined : parent
anchors.fill: availableButton bridge: bridgeItem.bridge
drag.target: availableButton settings: settingsItem
cursorShape: Qt.SizeAllCursor type: model["button"]
onReleased: { width: baseLayout.buttonIconSize
if (availableButton.Drag.target) { height: baseLayout.buttonIconSize
availableButton.Drag.drop(); Drag.keys: [ "decoButtonAdd" ]
} else { Drag.active: dragArea.drag.active
availableButton.Drag.cancel(); Drag.onActiveChanged: availableButtonsGrid.dragging = Drag.active
} color: palette.windowText
}
MouseArea {
id: dragArea
anchors.fill: availableButton
drag.target: availableButton
cursorShape: Qt.SizeAllCursor
onReleased: {
if (availableButton.Drag.target) {
availableButton.Drag.drop();
} else {
availableButton.Drag.cancel();
} }
} }
} }
Controls.Label {
id: iconLabel
text: model["display"]
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignTop
anchors.top: availableButtonFrame.bottom
anchors.topMargin: units.smallSpacing
anchors.left: parent.left
anchors.right: parent.right
elide: Text.ElideRight
wrapMode: Text.Wrap
height: 2 * implicitHeight + lineHeight
}
} }
DropArea { QQC2.Label {
anchors.fill: parent id: iconLabel
keys: [ "decoButtonRemove" ] text: model["display"]
onEntered: { Layout.fillWidth: true
drag.accept(); Layout.fillHeight: true
} horizontalAlignment: Text.AlignHCenter
onDropped: { verticalAlignment: Text.AlignTop
drag.source.buttonsModel.remove(drag.source.itemIndex); elide: Text.ElideRight
} wrapMode: Text.Wrap
Kirigami.Heading {
text: i18n("Drop button here to remove it")
font.weight: Font.Bold
level: 2
anchors.centerIn: parent
opacity: draggingTitlebarButtons ? 1.0 : 0.0
}
} }
} }
Text { DropArea {
id: dragHint anchors.fill: parent
readonly property real dragHintOpacitiy: enabled ? 1.0 : 0.3 keys: [ "decoButtonRemove" ]
color: palette.windowText onEntered: {
opacity: hideDragHint ? 0.0 : dragHintOpacitiy drag.accept();
Layout.fillWidth: true }
Layout.topMargin: titleBarSpacing onDropped: {
Layout.bottomMargin: titleBarSpacing drag.source.buttonsModel.remove(drag.source.itemIndex);
horizontalAlignment: Text.AlignHCenter }
wrapMode: Text.NoWrap Kirigami.Heading {
text: i18n("Drag buttons between here and the titlebar") text: i18n("Drop button here to remove it")
font.weight: Font.Bold
level: 2
anchors.centerIn: parent
opacity: baseLayout.draggingTitlebarButtons ? 1.0 : 0.0
}
} }
} }
Text {
id: dragHint
readonly property real dragHintOpacitiy: enabled ? 1.0 : 0.3
color: palette.windowText
opacity: baseLayout.hideDragHint ? 0.0 : dragHintOpacitiy
Layout.fillWidth: true
Layout.margins: Kirigami.Units.gridUnit * 3
horizontalAlignment: Text.AlignHCenter
text: i18n("Drag buttons between here and the titlebar")
}
} }
} }

View file

@ -5,6 +5,7 @@
SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
*/ */
import QtQuick 2.7 import QtQuick 2.7
import org.kde.kcm 1.3 as KCM import org.kde.kcm 1.3 as KCM
import org.kde.kirigami 2.2 as Kirigami import org.kde.kirigami 2.2 as Kirigami
import org.kde.kwin.private.kdecoration 1.0 as KDecoration import org.kde.kwin.private.kdecoration 1.0 as KDecoration

View file

@ -6,7 +6,8 @@
import QtQuick 2.7 import QtQuick 2.7
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import QtQuick.Controls 2.4 as Controls import QtQuick.Controls 2.4 as QQC2
import org.kde.kcm 1.5 as KCM import org.kde.kcm 1.5 as KCM
import org.kde.kconfig 1.0 // for KAuthorized import org.kde.kconfig 1.0 // for KAuthorized
import org.kde.kirigami 2.4 as Kirigami import org.kde.kirigami 2.4 as Kirigami
@ -38,7 +39,7 @@ Kirigami.Page {
anchors.fill: parent anchors.fill: parent
spacing: 0 spacing: 0
Controls.TabBar { QQC2.TabBar {
id: tabBar id: tabBar
// Tab styles generally assume that they're touching the inner layout, // Tab styles generally assume that they're touching the inner layout,
// not the frame, so we need to move the tab bar down a pixel and make // not the frame, so we need to move the tab bar down a pixel and make
@ -47,15 +48,15 @@ Kirigami.Page {
Layout.bottomMargin: -1 Layout.bottomMargin: -1
Layout.fillWidth: true Layout.fillWidth: true
Controls.TabButton { QQC2.TabButton {
text: i18nc("tab label", "Theme") text: i18nc("tab label", "Theme")
} }
Controls.TabButton { QQC2.TabButton {
text: i18nc("tab label", "Titlebar Buttons") text: i18nc("tab label", "Titlebar Buttons")
} }
} }
Controls.Frame { QQC2.Frame {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
@ -81,10 +82,10 @@ Kirigami.Page {
} }
RowLayout { RowLayout {
Controls.Label { QQC2.Label {
text: i18nc("Selector label", "Window border size:") text: i18nc("Selector label", "Window border size:")
} }
Controls.ComboBox { QQC2.ComboBox {
id: borderSizeComboBox id: borderSizeComboBox
model: kcm.borderSizesModel model: kcm.borderSizesModel
currentIndex: kcm.borderIndex currentIndex: kcm.borderIndex
@ -98,7 +99,7 @@ Kirigami.Page {
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
} }
Controls.Button { QQC2.Button {
text: i18nc("button text", "Get New Window Decorations...") text: i18nc("button text", "Get New Window Decorations...")
icon.name: "get-hot-new-stuff" icon.name: "get-hot-new-stuff"
onClicked: kcm.getNewStuff(this) onClicked: kcm.getNewStuff(this)
@ -112,9 +113,10 @@ Kirigami.Page {
Buttons { Buttons {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.margins: Kirigami.Units.smallSpacing
} }
Controls.CheckBox { QQC2.CheckBox {
id: closeOnDoubleClickOnMenuCheckBox id: closeOnDoubleClickOnMenuCheckBox
text: i18nc("checkbox label", "Close windows by double clicking the menu button") text: i18nc("checkbox label", "Close windows by double clicking the menu button")
checked: kcm.settings.closeOnDoubleClickOnMenu checked: kcm.settings.closeOnDoubleClickOnMenu
@ -138,7 +140,7 @@ Kirigami.Page {
visible: false visible: false
} }
Controls.CheckBox { QQC2.CheckBox {
id: showToolTipsCheckBox id: showToolTipsCheckBox
text: i18nc("checkbox label", "Show titlebar button tooltips") text: i18nc("checkbox label", "Show titlebar button tooltips")
checked: kcm.settings.showToolTips checked: kcm.settings.showToolTips