From d25ba46ae759e33fa50cdfad317f6ad1faca8476 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Wed, 6 Mar 2013 21:16:30 +0100 Subject: [PATCH] display a color picker for wallpaper color config --- .../contents/components/Configuration.qml | 14 +- .../ConfigurationContainmentAppearance.qml | 22 ++- .../wallpaper/contents/ui/config.qml | 151 +++++++++++++++++- 3 files changed, 177 insertions(+), 10 deletions(-) diff --git a/src/shell/qmlpackages/desktop/contents/components/Configuration.qml b/src/shell/qmlpackages/desktop/contents/components/Configuration.qml index b4e9176a1..94ae07038 100644 --- a/src/shell/qmlpackages/desktop/contents/components/Configuration.qml +++ b/src/shell/qmlpackages/desktop/contents/components/Configuration.qml @@ -209,14 +209,24 @@ Rectangle { iconSource: "dialog-ok" text: "Ok" onClicked: { - root.saveConfig() + if (main.currentPage.saveConfig !== undefined) { + main.currentPage.saveConfig() + } else { + root.saveConfig() + } configDialog.close() } } PlasmaComponents.Button { iconSource: "dialog-ok-apply" text: "Apply" - onClicked: root.saveConfig() + onClicked: { + if (main.currentPage.saveConfig !== undefined) { + main.currentPage.saveConfig() + } else { + root.saveConfig() + } + } } PlasmaComponents.Button { iconSource: "dialog-cancel" diff --git a/src/shell/qmlpackages/desktop/contents/components/ConfigurationContainmentAppearance.qml b/src/shell/qmlpackages/desktop/contents/components/ConfigurationContainmentAppearance.qml index 5780922a6..0b1f4fb23 100644 --- a/src/shell/qmlpackages/desktop/contents/components/ConfigurationContainmentAppearance.qml +++ b/src/shell/qmlpackages/desktop/contents/components/ConfigurationContainmentAppearance.qml @@ -21,10 +21,29 @@ import org.kde.plasma.components 0.1 as PlasmaComponents import org.kde.plasma.configuration 0.1 Column { - + id: root PlasmaComponents.Label { text: "Plugins" } + +//BEGIN functions + function saveConfig() { + for (var key in configDialog.wallpaperConfiguration) { + if (main.currentPage["cfg_"+key] !== undefined) { + configDialog.wallpaperConfiguration[key] = main.currentPage["cfg_"+key] + } + } + } + + function restoreConfig() { + for (var key in configDialog.wallpaperConfiguration) { + if (main.currentPage["cfg_"+key] !== undefined) { + main.currentPage["cfg_"+key] = configDialog.wallpaperConfiguration[key] + } + } + } +//END functions + ListView { id: categoriesView anchors { @@ -36,6 +55,7 @@ Column { model: configDialog.wallpaperConfigModel delegate: ConfigCategoryDelegate { + id: delegate anchors { top: parent.top bottom: parent.bottom diff --git a/src/shell/qmlpackages/wallpaper/contents/ui/config.qml b/src/shell/qmlpackages/wallpaper/contents/ui/config.qml index 8060e698b..0bf7966a6 100644 --- a/src/shell/qmlpackages/wallpaper/contents/ui/config.qml +++ b/src/shell/qmlpackages/wallpaper/contents/ui/config.qml @@ -19,13 +19,150 @@ import QtQuick 2.0 import org.kde.plasma.components 0.1 as PlasmaComponents -Row { +Column { id: root - PlasmaComponents.Label { - text: "Color" - } - PlasmaComponents.TextField { - text: configDialog.wallpaperConfiguration.Color - onTextChanged: configDialog.wallpaperConfiguration.Color = text + property alias cfg_Color: picker.color + + Column { + id: picker + + property color color + + property real hue + property real saturation + property real lightness + + onColorChanged: { + var min = Math.min(color.r, Math.min(color.g, color.b)) + var max = Math.max(color.r, Math.max(color.g, color.b)) + var c = max - min + var h + + if (c == 0) { + h = 0 + } else if (max == color.r) { + h = ((color.g - color.b) / c) % 6 + } else if (max == color.g) { + h = ((color.b - color.r) / c) + 2 + } else if (max == color.b) { + h = ((color.r - color.g) / c) + 4 + } + picker.hue = (1/6) * h + picker.saturation = c / (1 - Math.abs(2 * ((max+min)/2) - 1)) + picker.lightness = (max + min)/2 + } + onHueChanged: redrawTimer.restart() + onSaturationChanged: redrawTimer.restart() + onLightnessChanged: redrawTimer.restart() + Timer { + id: redrawTimer + interval: 10 + onTriggered: { + hsCanvas.requestPaint(); + vCanvas.requestPaint(); + hsMarker.x = Math.round(hsCanvas.width*picker.hue - 2) + hsMarker.y = Math.round(hsCanvas.width*(1-picker.saturation) - 2) + vMarker.y = Math.round(hsCanvas.height*(1-picker.lightness) - 2) + + //this to work assumes the above rgb->hsl conversion is correct + picker.color = Qt.hsla(picker.hue, picker.saturation, picker.lightness, 1) + } + } + Row { + MouseArea { + width: 255 + height: 255 + onPressed: { + hsMarker.x = mouse.x - 2 + hsMarker.y = mouse.y - 2 + picker.hue = mouse.x/width + picker.saturation = 1 - hsMarker.y/height + } + onPositionChanged: { + hsMarker.x = mouse.x - 2 + hsMarker.y = mouse.y - 2 + picker.hue = mouse.x/width + picker.saturation = 1 - hsMarker.y/height + } + Canvas { + id: hsCanvas + anchors.fill: parent + onPaint: { + var ctx = getContext('2d'); + var gradient = ctx.createLinearGradient(0, 0, width, 0) + for (var i = 0; i < 10; ++i) { + gradient.addColorStop(i/10, Qt.hsla(i/10, 1, picker.lightness, 1)); + } + + ctx.fillStyle = gradient + ctx.fillRect(0, 0, width, height); + + gradient = ctx.createLinearGradient(0, 0, 0, height) + gradient.addColorStop(0, Qt.hsla(0, 0, picker.lightness, 0)); + gradient.addColorStop(1, Qt.hsla(0, 0, picker.lightness, 1)); + + ctx.fillStyle = gradient + ctx.fillRect(0, 0, width, height); + } + } + Rectangle { + id: hsMarker + width: 5 + height: 5 + radius: 5 + color: "black" + border { + color: "white" + width: 1 + } + } + } + MouseArea { + width: 30 + height: 255 + onPressed: { + vMarker.y = mouse.y - 2 + picker.lightness = 1 - vMarker.y/height + } + onPositionChanged: { + vMarker.y = mouse.y - 2 + picker.lightness = 1 - vMarker.y/height + } + Canvas { + id: vCanvas + width: 30 + height: 255 + onPaint: { + var ctx = getContext('2d'); + var gradient = ctx.createLinearGradient(0, 0, 0, height) + gradient.addColorStop(0, Qt.hsla(picker.hue, picker.saturation, 1, 1)); + gradient.addColorStop(0.5, Qt.hsla(picker.hue, picker.saturation, 0.5, 1)); + gradient.addColorStop(1, Qt.hsla(picker.hue, picker.saturation, 0, 1)); + + ctx.fillStyle = gradient + ctx.fillRect(0, 0, width, height); + } + } + Rectangle { + id: vMarker + width: 30 + height: 5 + radius: 5 + color: "black" + border { + color: "white" + width: 1 + } + } + } + } + Rectangle { + anchors { + left: parent.left + right: parent.right + } + height: 30 + color: Qt.hsla(picker.hue, picker.saturation, picker.lightness, 1) + } } } \ No newline at end of file