Commit 436b2660 authored by Devin Lin's avatar Devin Lin 🎨
Browse files

shell: Update configuration dialogs based on desktop, use new UI for wallpaper selector

parent dee476e7
Pipeline #194320 passed with stage
in 1 minute and 23 seconds
/*
* SPDX-FileCopyrightText: 2013 Marco Martin <mart@kde.org>
*
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.3 as QtControls
import QtQuick.Window 2.2
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.kquickcontrolsaddons 2.0
import org.kde.kirigami 2.5 as Kirigami
MouseArea {
id: delegate
//BEGIN properties
implicitWidth: delegateContents.implicitWidth + 4 * PlasmaCore.Units.smallSpacing
implicitHeight: delegateContents.height + PlasmaCore.Units.smallSpacing * 4
Layout.fillWidth: true
hoverEnabled: true
property bool current: (model.kcm && pageStack.currentItem.kcm && model.kcm == pageStack.currentItem.kcm) || (model.source == pageStack.sourceFile)
//END properties
//BEGIN functions
function openCategory() {
if (current) {
return;
}
if (typeof(categories.currentItem) !== "undefined") {
pageStack.invertAnimations = (categories.currentItem.x > delegate.x);
categories.currentItem = delegate;
}
if (model.source) {
pageStack.sourceFile = model.source;
} else if (model.kcm) {
pageStack.sourceFile = "";
pageStack.sourceFile = Qt.resolvedUrl("ConfigurationKcmPage.qml");
pageStack.currentItem.kcm = model.kcm;
} else {
pageStack.sourceFile = "";
}
pageStack.title = model.name
}
//END functions
//BEGIN connections
onPressed: {
categoriesScroll.forceActiveFocus()
if (current) {
return;
}
openCategory();
}
onCurrentChanged: {
if (current) {
categories.currentItem = delegate;
}
}
//END connections
//BEGIN UI components
Rectangle {
anchors.fill: parent
color: Kirigami.Theme.highlightColor
opacity: { // try to match Breeze style hover handling
var active = categoriesScroll.activeFocus && Window.active
if (current) {
if (active) {
return 1
} else if (delegate.containsMouse) {
return 0.6
} else {
return 0.3
}
} else if (delegate.containsMouse) {
if (active) {
return 0.3
} else {
return 0.1
}
}
return 0
}
Behavior on opacity {
NumberAnimation {
duration: PlasmaCore.Units.longDuration
easing.type: Easing.InOutQuad
}
}
}
ColumnLayout {
id: delegateContents
spacing: PlasmaCore.Units.smallSpacing
width: parent.width
anchors.verticalCenter: parent.verticalCenter
QIconItem {
id: iconItem
Layout.alignment: Qt.AlignHCenter
width: PlasmaCore.Units.iconSizes.medium
height: width
icon: model.icon
state: current && categoriesScroll.activeFocus ? QIconItem.SelectedState : QIconItem.DefaultState
}
QtControls.Label {
id: nameLabel
Layout.fillWidth: true
text: model.name
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
color: current && categoriesScroll.activeFocus ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor
Behavior on color {
ColorAnimation {
duration: PlasmaCore.Units.longDuration
easing.type: Easing.InOutQuad
}
}
}
}
//END UI components
}
// SPDX-FileCopyrightText: 2020 Nicolas Fella <nicolas.fella@gmx.de>
// SPDX-License-Identifier: GPL-2.0-or-later
import QtQuick 2.0
import org.kde.kirigami 2.10 as Kirigami
Kirigami.ScrollablePage {
id: root
title: configItem.name
required property var configItem
signal settingValueChanged()
function saveConfig() {
for (let key in plasmoid.configuration) {
if (loader.item["cfg_" + key] != undefined) {
plasmoid.configuration[key] = loader.item["cfg_" + key]
}
}
// For ConfigurationContainmentActions.qml
if (loader.item.hasOwnProperty("saveConfig")) {
loader.item.saveConfig()
}
}
implicitHeight: loader.height
padding: Kirigami.Units.largeSpacing
bottomPadding: 0
Loader {
id: loader
width: parent.width
// HACK the height of the loader is based on the implicitHeight of the content.
// Unfortunately not all content items have a sensible implicitHeight.
// If it is zero fall back to the height of its children
// Also make it at least as high as the page itself. Some existing configs assume they fill the whole space
// TODO KF6 clean this up by making all configs based on SimpleKCM/ScrollViewKCM/GridViewKCM
height: Math.max(root.availableHeight, item.implicitHeight ? item.implicitHeight : item.childrenRect.height)
Component.onCompleted: {
const plasmoidConfig = plasmoid.configuration
const props = {}
for (let key in plasmoidConfig) {
props["cfg_" + key] = plasmoid.configuration[key]
}
setSource(configItem.source, props)
}
onLoaded: {
const plasmoidConfig = plasmoid.configuration;
for (let key in plasmoidConfig) {
const changedSignal = item["cfg_" + key + "Changed"]
if (changedSignal) {
changedSignal.connect(root.settingValueChanged)
}
}
const configurationChangedSignal = item.configurationChanged
if (configurationChangedSignal) {
configurationChangedSignal.connect(root.settingValueChanged)
}
}
}
}
......@@ -136,12 +136,6 @@ ColumnLayout {
text: i18nd("plasma_shell_org.kde.plasma.desktop", "Apply now")
onClicked: saveConfig()
}
Binding {
target: categoriesScroll //from parent scope AppletConfiguration
property: "enabled"
value: !switchContainmentWarning.visible
}
}
Item {
......
// SPDX-FileCopyrightText: 2015 Marco Martin <mart@kde.org>
// SPDX-FileCopyrightText: 2020 Nicolas Fella <nicolas.fella@gmx.de>
// SPDX-FileCopyrightText: 2020 Carl Schwan <carlschwan@kde.org>
// SPDX-License-Identifier: GPL-2.0-or-later
import QtQuick 2.6
import QtQuick.Controls 2.2 as QQC2
import org.kde.kirigami 2.5 as Kirigami
Kirigami.Page {
id: container
required property QtObject kcm
required property Item internalPage
signal settingValueChanged()
title: kcm.name
topPadding: 0
leftPadding: 0
rightPadding: 0
bottomPadding: 0
flickable: internalPage.flickable
actions.main: internalPage.actions.main
actions.contextualActions: internalPage.contextualActions
onInternalPageChanged: {
internalPage.parent = contentItem;
internalPage.anchors.fill = contentItem;
}
onActiveFocusChanged: {
if (activeFocus) {
internalPage.forceActiveFocus();
}
}
Component.onCompleted: {
kcm.load()
}
function saveConfig() {
kcm.save();
}
data: [
Connections {
target: kcm
onPagePushed: {
app.pageStack.push(configurationKcmPageComponent.createObject(app.pageStack, {"kcm": kcm, "internalPage": page}));
}
onPageRemoved: app.pageStack.pop();
},
Connections {
target: app.pageStack
onPageRemoved: {
if (kcm.needsSave) {
kcm.save()
}
if (page == container) {
page.destroy();
}
}
}
]
Connections {
target: kcm
function onNeedsSaveChanged() {
if (kcm.needsSave) {
container.settingValueChanged()
}
}
}
}
/*
* SPDX-FileCopyrightText: 2013 Marco Martin <mart@kde.org>
*
* SPDX-License-Identifier: GPL-2.0-or-later
*/
// SPDX-FileCopyrightText: 2013 Marco Martin <mart@kde.org>
// SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
// SPDX-License-Identifier: GPL-2.0-or-later
import QtQuick 2.12
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.3 as Controls
import org.kde.plasma.extras 2.0 as PlasmaExtras
import QtQuick.Controls 2.15 as Controls
import org.kde.plasma.components 3.0 as PlasmaComponents3
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.configuration 2.0
//for the "simple mode"
import org.kde.plasma.wallpapers.image 2.0 as Wallpaper
import org.kde.kquickcontrolsaddons 2.0 as Addons
import org.kde.kcm 1.1 as KCM
AppletConfiguration {
id: root
isContainment: true
internalDialog.visible: false
internalDialog.width: root.width < root.height ? root.width : Math.min(root.width, Math.max(internalDialog.implicitWidth, PlasmaCore.Units.gridUnit * 45))
internalDialog.height: Math.min(root.height, Math.max(internalDialog.implicitHeight, PlasmaCore.Units.gridUnit * 29))
appComponent.visible: false
appComponent.width: root.width < root.height ? root.width : Math.min(root.width, Math.max(appComponent.implicitWidth, PlasmaCore.Units.gridUnit * 45))
appComponent.height: Math.min(root.height, Math.max(appComponent.implicitHeight, PlasmaCore.Units.gridUnit * 29))
readonly property bool horizontal: root.width > root.height
......@@ -40,126 +34,74 @@ AppletConfiguration {
}
//END model
Controls.Drawer {
id: imageWallpaperDrawer
edge: root.horizontal ? Qt.LeftEdge : Qt.BottomEdge
visible: true
dragMargin: 0
onClosed: {
if (!root.internalDialog.visible) {
configDialog.close()
}
}
onOpened: {
wallpapersView.forceActiveFocus()
}
implicitWidth: PlasmaCore.Units.gridUnit * 10
implicitHeight: PlasmaCore.Units.gridUnit * 8
width: root.horizontal ? implicitWidth : root.width
height: root.horizontal ? root.height : implicitHeight
Wallpaper.ImageBackend {
id: imageWallpaper
Loader {
id: wallpaperSelectorLoader
asynchronous: true
active: true
sourceComponent: WallpaperSelector {
visible: false
horizontal: root.horizontal
}
background: null
ListView {
id: wallpapersView
anchors.fill: parent
orientation: root.horizontal ? ListView.Vertical : ListView.Horizontal
keyNavigationEnabled: true
highlightFollowsCurrentItem: true
snapMode: ListView.SnapToItem
model: imageWallpaper.wallpaperModel
onCountChanged: currentIndex = Math.min(model.indexOf(configDialog.wallpaperConfiguration["Image"]), model.rowCount()-1)
footer: Controls.Control {
z: 999
width: root.horizontal ? parent.width : implicitWidth
height: root.horizontal ? implicitHeight : parent.height
leftPadding: PlasmaCore.Units.gridUnit
topPadding: PlasmaCore.Units.gridUnit
rightPadding: PlasmaCore.Units.gridUnit
bottomPadding: PlasmaCore.Units.gridUnit
contentItem: ColumnLayout {
Controls.Button {
icon.name: "configure"
text: i18nd("plasma_shell_org.kde.plasma.desktop", "Customize...")
onClicked: {
print(wallpapersView.currentIndex)
internalDialog.visible = true;
imageWallpaperDrawer.close()
}
}
}
background: Rectangle {
color: Qt.rgba (0, 0, 0, 0.3)
}
}
MouseArea {
z: -1
anchors.fill: parent
onClicked: configDialog.close()
Controls.Control {
anchors.centerIn: parent
leftPadding: PlasmaCore.Units.largeSpacing
rightPadding: PlasmaCore.Units.largeSpacing
topPadding: PlasmaCore.Units.largeSpacing
bottomPadding: PlasmaCore.Units.largeSpacing
NumberAnimation on opacity {
id: opacityAnim
running: true
from: 0
to: 1
duration: PlasmaCore.Units.longDuration
}
headerPositioning: ListView.PullBackHeader
delegate: Controls.ItemDelegate {
width: root.horizontal ? parent.width : height * (root.Screen.width / root.Screen.height)
height: root.horizontal ? width / (root.Screen.width / root.Screen.height) : parent.height
padding: wallpapersView.currentIndex === index ? PlasmaCore.Units.gridUnit / 4 : PlasmaCore.Units.gridUnit / 2
leftPadding: padding
topPadding: padding
rightPadding: padding
bottomPadding: padding
Behavior on padding {
NumberAnimation {
duration: PlasmaCore.Units.longDuration
easing.type: Easing.InOutQuad
}
}
property bool isCurrent: configDialog.wallpaperConfiguration["Image"] == model.path
onIsCurrentChanged: {
if (isCurrent) {
wallpapersView.currentIndex = index;
background: PlasmaCore.FrameSvgItem {
enabledBorders: PlasmaCore.FrameSvg.AllBorders
imagePath: "widgets/background"
}
contentItem: RowLayout {
PlasmaComponents3.Button {
Layout.alignment: Qt.AlignRight
Layout.preferredHeight: PlasmaCore.Units.gridUnit * 4
Layout.preferredWidth: PlasmaCore.Units.gridUnit * 8
display: PlasmaComponents3.ToolButton.TextUnderIcon
icon.name: "viewimage"
icon.width: PlasmaCore.Units.iconSizes.medium
icon.height: PlasmaCore.Units.iconSizes.medium
text: i18n("Change Wallpaper")
onClicked: {
opacityAnim.from = 1;
opacityAnim.to = 0;
opacityAnim.restart();
wallpaperSelectorLoader.item.open();
}
}
z: wallpapersView.currentIndex === index ? 2 : 0
contentItem: Item {
Addons.QIconItem {
anchors.centerIn: parent
width: PlasmaCore.Units.iconSizes.large
height: width
icon: "view-preview"
visible: !walliePreview.visible
}
Addons.QPixmapItem {
id: walliePreview
anchors.fill: parent
visible: model.screenshot != null
smooth: true
pixmap: model.screenshot
fillMode: Image.PreserveAspectCrop
}
}
onClicked: {
configDialog.currentWallpaper = "org.kde.image";
configDialog.wallpaperConfiguration["Image"] = model.path;
configDialog.applyWallpaper()
}
Keys.onReturnPressed: {
clicked();
}
background: Item {
Rectangle {
anchors {
fill: parent
margins: wallpapersView.currentIndex === index ? 0 : PlasmaCore.Units.gridUnit / 4
Behavior on margins {
NumberAnimation {
duration: PlasmaCore.Units.longDuration
easing.type: Easing.InOutQuad
}
}
}
radius: PlasmaCore.Units.gridUnit / 4
PlasmaComponents3.Button {
Layout.alignment: Qt.AlignLeft
Layout.preferredHeight: PlasmaCore.Units.gridUnit * 4
Layout.preferredWidth: PlasmaCore.Units.gridUnit * 8
display: PlasmaComponents3.ToolButton.TextUnderIcon
icon.name: "configure"
icon.width: PlasmaCore.Units.iconSizes.medium
icon.height: PlasmaCore.Units.iconSizes.medium
text: i18n("Configure")
onClicked: {
appComponent.visible = true;
wallpaperSelectorLoader.item.close()
}
}
}
......
// SPDX-FileCopyrightText: 2013 Marco Martin <mart@kde.org>
// SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
// SPDX-License-Identifier: GPL-2.0-or-later
import QtQuick 2.12
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.3 as Controls
import org.kde.plasma.extras 2.0 as PlasmaExtras
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.configuration 2.0
import org.kde.plasma.wallpapers.image 2.0 as Wallpaper
import org.kde.kquickcontrolsaddons 2.0 as Addons
import org.kde.kcm 1.1 as KCM
Controls.Drawer {
id: imageWallpaperDrawer
edge: root.horizontal ? Qt.LeftEdge : Qt.BottomEdge
dragMargin: 0
required property bool horizontal
onClosed: {
if (!root.appComponent.visible) {
configDialog.close()
}
}
onOpened: {
wallpapersView.forceActiveFocus()
}
implicitWidth: PlasmaCore.Units.gridUnit * 10
implicitHeight: PlasmaCore.Units.gridUnit * 8
width: imageWallpaperDrawer.horizontal ? implicitWidth : root.width
height: imageWallpaperDrawer.horizontal ? root.height : implicitHeight
Wallpaper.ImageBackend {
id: imageWallpaper
}
background: null
ListView {
id: wallpapersView
anchors.fill: parent
orientation: imageWallpaperDrawer.horizontal ? ListView.Vertical : ListView.Horizontal
keyNavigationEnabled: true
highlightFollowsCurrentItem: true
snapMode: ListView.SnapToItem
model: imageWallpaper.wallpaperModel
onCountChanged: currentIndex = Math.min(model.indexOf(configDialog.wallpaperConfiguration["Image"]), model.rowCount()-1)
headerPositioning: ListView.PullBackHeader
delegate: Controls.ItemDelegate {
width: imageWallpaperDrawer.horizontal ? parent.width : height * (root.Screen.width / root.Screen.height)
height: imageWallpaperDrawer.horizontal ? width / (root.Screen.width / root.Screen.height) : parent.height
padding: wallpapersView.currentIndex === index ? PlasmaCore.Units.gridUnit / 4 : PlasmaCore.Units.gridUnit / 2
leftPadding: padding
topPadding: padding
rightPadding: padding
bottomPadding: padding
Behavior on padding {
NumberAnimation {
duration: PlasmaCore.Units.longDuration
<