alecs/plasma-framework
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

display a color picker for wallpaper color config

Browse Source
This commit is contained in:
Marco Martin 2013-03-06 21:16:30 +01:00
parent 424868cecd
commit d25ba46ae7
3 changed files with 177 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/shell/qmlpackages/desktop/contents/components/Configuration.qml
View File

@ -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"

22
src/shell/qmlpackages/desktop/contents/components/ConfigurationContainmentAppearance.qml
View File

@ -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

151
src/shell/qmlpackages/wallpaper/contents/ui/config.qml
View File

@ -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)
}
}
}