diff --git a/kcmkwin/kwindecoration/package/contents/ui/ButtonGroup.qml b/kcmkwin/kwindecoration/package/contents/ui/ButtonGroup.qml index 9a8f9d559e..9a1ef66ac0 100644 --- a/kcmkwin/kwindecoration/package/contents/ui/ButtonGroup.qml +++ b/kcmkwin/kwindecoration/package/contents/ui/ButtonGroup.qml @@ -17,8 +17,8 @@ ListView { implicitHeight: iconSize implicitWidth: count * (iconSize + units.smallSpacing) - Math.min(1, count) * units.smallSpacing delegate: Item { - width: iconSize - height: iconSize + width: view.iconSize + height: view.iconSize KDecoration.Button { id: button property int itemIndex: index @@ -26,8 +26,8 @@ ListView { bridge: bridgeItem.bridge settings: settingsItem type: model["button"] - width: iconSize - height: iconSize + width: view.iconSize + height: view.iconSize anchors.fill: Drag.active ? undefined : parent Drag.keys: [ "decoButtonRemove", view.key ] Drag.active: dragArea.drag.active diff --git a/kcmkwin/kwindecoration/package/contents/ui/Buttons.qml b/kcmkwin/kwindecoration/package/contents/ui/Buttons.qml index 372baef79a..da26a85c09 100644 --- a/kcmkwin/kwindecoration/package/contents/ui/Buttons.qml +++ b/kcmkwin/kwindecoration/package/contents/ui/Buttons.qml @@ -6,21 +6,24 @@ */ import QtQuick 2.7 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.kwin.private.kdecoration 1.0 as KDecoration -import org.kde.kcm 1.3 as KCM -ColumnLayout { - Layout.fillWidth: true - Layout.fillHeight: true - property int buttonIconSize: units.iconSizes.medium - property int titleBarSpacing: units.smallSpacing * 2 +// Fake Window +Rectangle { + id: baseLayout + + 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 hideDragHint: draggingTitlebarButtons || availableButtonsGrid.dragging + color: palette.base + radius: Kirigami.Units.smallSpacing + KDecoration.Bridge { id: bridgeItem plugin: "org.kde.breeze" @@ -30,245 +33,230 @@ ColumnLayout { bridge: bridgeItem.bridge } - Rectangle { - Layout.fillWidth: true - color: palette.base - radius: units.smallSpacing - height: fakeWindow.height - Layout.margins: units.smallSpacing + ColumnLayout { + anchors.fill: parent - ColumnLayout { - id: fakeWindow - width: parent.width + // Fake titlebar + Rectangle { + 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 { - id: titleBar - Layout.fillWidth: true - height: buttonPreviewRow.height + 2 * titleBarSpacing - radius: units.smallSpacing - gradient: Gradient { - GradientStop { position: 0.0; color: palette.midlight } - GradientStop { position: 1.0; color: palette.window } + RowLayout { + id: buttonPreviewRow + anchors { + margins: baseLayout.titleBarSpacing + left: parent.left + right: parent.right + top: parent.top } - RowLayout { - id: buttonPreviewRow - anchors { - margins: titleBarSpacing - left: parent.left - right: parent.right - top: parent.top + ButtonGroup { + id: leftButtonsView + iconSize: baseLayout.buttonIconSize + model: kcm.leftButtonsModel + key: "decoButtonLeft" + + 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 { - id: leftButtonsView - iconSize: buttonIconSize - model: kcm.leftButtonsModel - 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" - } + KCM.SettingStateBinding { + id: stateBindingButtonLeft + configObject: kcm.settings + settingName: "buttonsOnLeft" } } - DropArea { - id: titleBarDropArea - anchors { - fill: parent - margins: -titleBarSpacing + + QQC2.Label { + Layout.fillWidth: true + horizontalAlignment: Text.AlignHCenter + 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: { - drag.accept(); + + KCM.SettingStateBinding { + id: stateBindingButtonRight + configObject: kcm.settings + settingName: "buttonsOnRight" } - 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; + } + } + DropArea { + id: titleBarDropArea + anchors { + fill: parent + 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 { - 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) { + // move to left view 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 { - // move to left view - view.model.add(index, drag.source.type); - drag.source.buttonsModel.remove(drag.source.itemIndex); - } + drag.source.buttonsModel.remove(drag.source.itemIndex); } } } } - GridView { - id: availableButtonsGrid - property bool dragging: false - Layout.fillWidth: true - Layout.minimumHeight: availableButtonsGrid.cellHeight * 2 - Layout.margins: units.largeSpacing - model: kcm.availableButtonsModel - interactive: false - delegate: Item { - id: availableDelegate - 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 + } + GridView { + id: availableButtonsGrid + property bool dragging: false + Layout.fillWidth: true + Layout.fillHeight: true + Layout.minimumHeight: availableButtonsGrid.cellHeight * 2 + Layout.margins: Kirigami.Units.largeSpacing + model: kcm.availableButtonsModel + interactive: false - KDecoration.Button { - id: availableButton - anchors.centerIn: Drag.active ? undefined : availableButtonFrame - bridge: bridgeItem.bridge - settings: settingsItem - type: model["button"] - width: buttonIconSize - height: buttonIconSize - Drag.keys: [ "decoButtonAdd" ] - Drag.active: dragArea.drag.active - 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(); - } + delegate: ColumnLayout { + width: availableButtonsGrid.cellWidth + height: availableButtonsGrid.cellHeight + opacity: baseLayout.draggingTitlebarButtons ? 0.15 : 1.0 + + Rectangle { + Layout.alignment: Qt.AlignHCenter + color: palette.window + radius: Kirigami.Units.smallSpacing + implicitWidth: baseLayout.buttonIconSize + Kirigami.Units.largeSpacing + implicitHeight: baseLayout.buttonIconSize + Kirigami.Units.largeSpacing + + KDecoration.Button { + id: availableButton + anchors.centerIn: Drag.active ? undefined : parent + bridge: bridgeItem.bridge + settings: settingsItem + type: model["button"] + width: baseLayout.buttonIconSize + height: baseLayout.buttonIconSize + Drag.keys: [ "decoButtonAdd" ] + Drag.active: dragArea.drag.active + 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 { - anchors.fill: parent - keys: [ "decoButtonRemove" ] - onEntered: { - drag.accept(); - } - onDropped: { - drag.source.buttonsModel.remove(drag.source.itemIndex); - } - 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 - } + QQC2.Label { + id: iconLabel + text: model["display"] + Layout.fillWidth: true + Layout.fillHeight: true + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignTop + elide: Text.ElideRight + wrapMode: Text.Wrap } } - Text { - id: dragHint - readonly property real dragHintOpacitiy: enabled ? 1.0 : 0.3 - color: palette.windowText - opacity: hideDragHint ? 0.0 : dragHintOpacitiy - Layout.fillWidth: true - Layout.topMargin: titleBarSpacing - Layout.bottomMargin: titleBarSpacing - horizontalAlignment: Text.AlignHCenter - wrapMode: Text.NoWrap - text: i18n("Drag buttons between here and the titlebar") + DropArea { + anchors.fill: parent + keys: [ "decoButtonRemove" ] + onEntered: { + drag.accept(); + } + onDropped: { + drag.source.buttonsModel.remove(drag.source.itemIndex); + } + Kirigami.Heading { + 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") + } } } diff --git a/kcmkwin/kwindecoration/package/contents/ui/Themes.qml b/kcmkwin/kwindecoration/package/contents/ui/Themes.qml index 17b573dce6..6fa3a94c79 100644 --- a/kcmkwin/kwindecoration/package/contents/ui/Themes.qml +++ b/kcmkwin/kwindecoration/package/contents/ui/Themes.qml @@ -5,6 +5,7 @@ SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL */ import QtQuick 2.7 + import org.kde.kcm 1.3 as KCM import org.kde.kirigami 2.2 as Kirigami import org.kde.kwin.private.kdecoration 1.0 as KDecoration diff --git a/kcmkwin/kwindecoration/package/contents/ui/main.qml b/kcmkwin/kwindecoration/package/contents/ui/main.qml index 4fa14d4316..1f23fb0dd2 100644 --- a/kcmkwin/kwindecoration/package/contents/ui/main.qml +++ b/kcmkwin/kwindecoration/package/contents/ui/main.qml @@ -6,7 +6,8 @@ import QtQuick 2.7 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.kconfig 1.0 // for KAuthorized import org.kde.kirigami 2.4 as Kirigami @@ -38,7 +39,7 @@ Kirigami.Page { anchors.fill: parent spacing: 0 - Controls.TabBar { + QQC2.TabBar { id: tabBar // 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 @@ -47,15 +48,15 @@ Kirigami.Page { Layout.bottomMargin: -1 Layout.fillWidth: true - Controls.TabButton { + QQC2.TabButton { text: i18nc("tab label", "Theme") } - Controls.TabButton { + QQC2.TabButton { text: i18nc("tab label", "Titlebar Buttons") } } - Controls.Frame { + QQC2.Frame { Layout.fillWidth: true Layout.fillHeight: true @@ -81,10 +82,10 @@ Kirigami.Page { } RowLayout { - Controls.Label { + QQC2.Label { text: i18nc("Selector label", "Window border size:") } - Controls.ComboBox { + QQC2.ComboBox { id: borderSizeComboBox model: kcm.borderSizesModel currentIndex: kcm.borderIndex @@ -98,7 +99,7 @@ Kirigami.Page { Item { Layout.fillWidth: true } - Controls.Button { + QQC2.Button { text: i18nc("button text", "Get New Window Decorations...") icon.name: "get-hot-new-stuff" onClicked: kcm.getNewStuff(this) @@ -112,9 +113,10 @@ Kirigami.Page { Buttons { Layout.fillWidth: true Layout.fillHeight: true + Layout.margins: Kirigami.Units.smallSpacing } - Controls.CheckBox { + QQC2.CheckBox { id: closeOnDoubleClickOnMenuCheckBox text: i18nc("checkbox label", "Close windows by double clicking the menu button") checked: kcm.settings.closeOnDoubleClickOnMenu @@ -138,7 +140,7 @@ Kirigami.Page { visible: false } - Controls.CheckBox { + QQC2.CheckBox { id: showToolTipsCheckBox text: i18nc("checkbox label", "Show titlebar button tooltips") checked: kcm.settings.showToolTips