Commit 1750cdc1 authored by Thomas Hartmann's avatar Thomas Hartmann

QmlDesigner.PropertyEditor: using GradientModel in QML

Change-Id: I939fe8952e12f20d4a4ca6d6a41ee578cee0f7b5
Reviewed-by: default avatarThomas Hartmann <Thomas.Hartmann@digia.com>
parent fec1187e
...@@ -65,7 +65,9 @@ Column { ...@@ -65,7 +65,9 @@ Column {
onColorChanged: { onColorChanged: {
textField.text = gradientLine.colorToString(color); textField.text = gradientLine.colorToString(color);
gradientLine.currentColor = color
if (supportGradient && gradientLine.visible)
gradientLine.currentColor = color
if (buttonRow.checkedIndex !== 1) if (buttonRow.checkedIndex !== 1)
//Delay setting the color to keep ui responsive //Delay setting the color to keep ui responsive
...@@ -79,8 +81,22 @@ Column { ...@@ -79,8 +81,22 @@ Column {
width: parent.width width: parent.width
onCurrentColorChanged: { onCurrentColorChanged: {
if (supportGradient && gradientLine.visible)
colorEditor.color = gradientLine.currentColor colorEditor.color = gradientLine.currentColor
} }
onHasGradientChanged: {
if (!supportGradient)
return
print("onHasGradientChanged")
print(gradientLine.hasGradient)
if (gradientLine.hasGradient)
buttonRow.initalChecked = 1
else
buttonRow.initalChecked = 0
buttonRow.checkedIndex = buttonRow.initalChecked
}
} }
SectionLayout { SectionLayout {
...@@ -112,8 +128,6 @@ Column { ...@@ -112,8 +128,6 @@ Column {
backendValue: colorEditor.backendendValue backendValue: colorEditor.backendendValue
onAccepted: { onAccepted: {
print("color")
print(textField.text)
colorEditor.color = textField.text colorEditor.color = textField.text
} }
Layout.preferredWidth: 80 Layout.preferredWidth: 80
...@@ -131,7 +145,8 @@ Column { ...@@ -131,7 +145,8 @@ Column {
ButtonRowButton { ButtonRowButton {
iconSource: "images/icon_color_solid.png" iconSource: "images/icon_color_solid.png"
onClicked: { onClicked: {
colorEditor.backendendValue.resetValue(); colorEditor.backendendValue.resetValue()
gradientLine.deleteGradient()
} }
} }
...@@ -139,7 +154,8 @@ Column { ...@@ -139,7 +154,8 @@ Column {
visible: supportGradient visible: supportGradient
iconSource: "images/icon_color_gradient.png" iconSource: "images/icon_color_gradient.png"
onClicked: { onClicked: {
print("gradient") colorEditor.backendendValue.resetValue()
gradientLine.addGradient()
} }
} }
...@@ -147,10 +163,10 @@ Column { ...@@ -147,10 +163,10 @@ Column {
iconSource: "images/icon_color_none.png" iconSource: "images/icon_color_none.png"
onClicked: { onClicked: {
colorEditor.color = "#00000000" colorEditor.color = "#00000000"
gradientLine.deleteGradient()
} }
} }
} }
ExpandingSpacer { ExpandingSpacer {
......
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
****************************************************************************/ ****************************************************************************/
import QtQuick 2.1 import QtQuick 2.1
import HelperWidgets 2.0
Item { Item {
width: 300 width: 300
...@@ -36,11 +37,22 @@ Item { ...@@ -36,11 +37,22 @@ Item {
property color currentColor property color currentColor
property alias model: repeater.model property alias model: repeater.model
property bool hasGradient: gradientModel.hasGradient
onCurrentColorChanged: { onCurrentColorChanged: {
repeater.model.setProperty(colorLine.selectedIndex, "color", colorToString(currentColor)) gradientModel.setColor(colorLine.selectedIndex, currentColor)
colorLine.invalidate() colorLine.invalidate()
} }
function addGradient() {
gradientModel.addGradient()
colorLine.invalidate()
}
function deleteGradient() {
gradientModel.deleteGradient()
}
function dec2hex(integer) { function dec2hex(integer) {
var string = Math.round(integer).toString(16) var string = Math.round(integer).toString(16)
if (integer < 16) { if (integer < 16) {
...@@ -72,26 +84,29 @@ Item { ...@@ -72,26 +84,29 @@ Item {
for (var i = 0; i < repeater.model.count; i++) { for (var i = 0; i < repeater.model.count; i++) {
repeater.itemAt(i).item.highlighted = false repeater.itemAt(i).item.highlighted = false
} }
if (repeater.model.count < index + 1)
return;
repeater.itemAt(index).item.highlighted = true repeater.itemAt(index).item.highlighted = true
colorLine.selectedIndex = index colorLine.selectedIndex = index
currentColor = repeater.itemAt(index).item.color currentColor = repeater.itemAt(index).item.color
} }
function invalidate() { function invalidate() {
var gradientString = "import QtQuick 2.0; Gradient {" var gradientString = "import QtQuick 2.0; Gradient {"
for (var i = 0; i < repeater.model.count; i++) { for (var i = 0; i < gradientModel.count; i++) {
gradientString += "GradientStop {}" gradientString += "GradientStop {}"
} }
gradientString += "}" gradientString += "}"
var gradientObject = Qt.createQmlObject(gradientString, gradientRectangle, "test"); var gradientObject = Qt.createQmlObject(gradientString, gradientRectangle, "test");
for (var i = 0; i < repeater.model.count; i++) { for (i = 0; i < gradientModel.count; i++) {
repeater.itemAt(i).item.y = 20 //fixes corner case for dragging overlapped items repeater.itemAt(i).item.y = 20 //fixes corner case for dragging overlapped items
gradientObject.stops[i].color = repeater.model.get(i).color gradientObject.stops[i].color = gradientModel.getColor(i)
gradientObject.stops[i].position = repeater.model.get(i).position gradientObject.stops[i].position = gradientModel.getPosition(i)
} }
gradientRectangle.gradient = gradientObject; gradientRectangle.gradient = gradientObject;
...@@ -103,10 +118,12 @@ Item { ...@@ -103,10 +118,12 @@ Item {
height: 40 height: 40
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
onClicked: { onClicked: {
var currentPosition = mouseX / colorLine.effectiveWidth var currentPosition = mouseX / colorLine.effectiveWidth
repeater.model.append({ "position": currentPosition, "color": colorToString(currentColor) })
colorLine.select(repeater.model.count - 1) gradientModel.addStop(currentPosition, currentColor)
colorLine.select(gradientModel.count - 1)
colorLine.invalidate() colorLine.invalidate()
} }
Item { Item {
...@@ -116,22 +133,13 @@ Item { ...@@ -116,22 +133,13 @@ Item {
Repeater { Repeater {
id: repeater id: repeater
model: ListModel { model: GradientModel {
id: gradientListModel anchorBackendProperty: anchorBackend
ListElement { gradientPropertyName: "gradient"
position: 0 id: gradientModel
readOnly: true
color: "black"
}
ListElement {
position: 1
readOnly: true
color: "white"
}
} }
delegate: Loader { delegate: Loader {
id: loader id: loader
...@@ -144,7 +152,7 @@ Item { ...@@ -144,7 +152,7 @@ Item {
Binding { Binding {
target: loader.item target: loader.item
property: "x" property: "x"
value: colorLine.effectiveWidth * position value: position === undefined ? 0 : colorLine.effectiveWidth * position
} }
Binding { Binding {
target: loader.item target: loader.item
...@@ -279,11 +287,12 @@ Item { ...@@ -279,11 +287,12 @@ Item {
onReleased: { onReleased: {
if (drag.active) { if (drag.active) {
repeater.model.setProperty(index, "position", parent.x / colorLine.effectiveWidth) gradientModel.setPosition(colorLine.selectedIndex, parent.x / colorLine.effectiveWidth)
if (parent.y < 10) { if (parent.y < 10) {
if (!readOnly) { if (!readOnly) {
colorLine.select(index - 1) colorLine.select(index - 1)
repeater.model.remove(index) gradientModel.removeStop(index)
} }
} }
parent.y = 20 parent.y = 20
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment