QmlDesigner: Fix DoubleSpinBox in-/decrease issue

Change-Id: I072600fa8ca43828d6e03515af34caef6c8cefbe
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Henning Gruendl
2019-07-03 14:26:16 +02:00
committed by Thomas Hartmann
parent 5daae2cf6c
commit e62eeb5aeb
4 changed files with 61 additions and 77 deletions

View File

@@ -40,18 +40,14 @@ Item {
property int sliderMargins: 6
onHueChanged: {
//hueSlider.value = hue;
invalidateColor();
}
property bool block: false
signal clicked
onAlphaChanged: invalidateColor();
onSaturationChanged: invalidateColor();
onLightnessChanged: invalidateColor();
onHueChanged: invalidateColor();
onColorChanged: {
var myAlpha = color.a
@@ -60,8 +56,6 @@ Item {
colorButton.alpha = myAlpha
}
property bool block: false
function invalidateColor() {
if (block)
return;
@@ -145,14 +139,12 @@ Item {
onPaint: {
var ctx = hubeBox.getContext('2d')
ctx.save()
ctx.clearRect(0, 0, hubeBox.width, hubeBox.height);
for (var row = 0; row < hubeBox.height; row++){
var gradient = ctx.createLinearGradient(0, 0, hubeBox.width,0);
var l = Math.abs(row - hubeBox.height) / hubeBox.height
var l = Math.abs(row - hubeBox.height) / hubeBox.height
gradient.addColorStop(0, Qt.hsla(hubeBox.hue, 0, l, 1));
gradient.addColorStop(1, Qt.hsla(hubeBox.hue, 1, l, 1));
@@ -160,20 +152,15 @@ Item {
ctx.fillStyle = gradient;
ctx.fillRect(0, row, hubeBox.width, 1);
}
ctx.restore()
}
}
Canvas {
id: canvas
opacity: 0.8
anchors.fill: parent
antialiasing: true
property real cavnasSaturation: colorButton.saturation
@@ -197,7 +184,6 @@ Item {
ctx.strokeStyle = canvas.strokeStyle
ctx.lineWidth = 1
ctx.beginPath()
ctx.moveTo(0, yy)
ctx.lineTo(canvas.width, yy)
@@ -210,7 +196,6 @@ Item {
ctx.restore()
}
}
MouseArea {
@@ -221,12 +206,11 @@ Item {
var xx = Math.max(0, Math.min(mouse.x, parent.width))
var yy = Math.max(0, Math.min(mouse.y, parent.height))
colorButton.lightness = 1.0 - yy / parent.height;
colorButton.saturation = xx / parent.width;
colorButton.lightness = 1.0 - yy / parent.height;
colorButton.saturation = xx / parent.width;
}
}
onPressed: positionChanged(mouse)
onReleased: colorButton.clicked()
}
Rectangle {
@@ -238,7 +222,6 @@ Item {
}
}
HueSlider {
id: hueSlider
anchors.left: surround.right
@@ -250,7 +233,6 @@ Item {
colorButton.hue = value
}
onClicked: colorButton.clicked()
}
Row {
@@ -259,9 +241,7 @@ Item {
spacing: 10
Column {
spacing: 10
Row {
z: 3
spacing: 1
@@ -281,9 +261,10 @@ Item {
maximumValue: 255
decimals: 0
onCompressedValueModified: {
if (color.r !== value && !colorButton.block) {
color.r = (value / 255.0)
onValueModified: {
var tmp = redSlider.value / 255.0
if (colorButton.color.r !== tmp && !colorButton.block) {
colorButton.color.r = tmp
colorButton.clicked()
}
}
@@ -300,7 +281,6 @@ Item {
elide: Text.ElideRight
anchors.verticalCenter: parent.verticalCenter
}
DoubleSpinBox {
id: greenSlider
width: 64
@@ -310,9 +290,10 @@ Item {
maximumValue: 255
decimals: 0
onCompressedValueModified: {
if (color.g !== value && !colorButton.block) {
color.g = (value / 255.0)
onValueModified: {
var tmp = greenSlider.value / 255.0
if (colorButton.color.g !== tmp && !colorButton.block) {
colorButton.color.g = tmp
colorButton.clicked()
}
}
@@ -338,9 +319,10 @@ Item {
maximumValue: 255
decimals: 0
onCompressedValueModified: {
if (color.b !== value && !colorButton.block) {
color.b = (value / 255.0)
onValueModified: {
var tmp = blueSlider.value / 255.0
if (colorButton.color.b !== tmp && !colorButton.block) {
colorButton.color.b = tmp
colorButton.clicked()
}
}
@@ -357,13 +339,12 @@ Item {
elide: Text.ElideRight
anchors.verticalCenter: parent.verticalCenter
}
DoubleSpinBox {
id: alphaSlider
width: 64
onCompressedValueModified: {
if (colorButton.alpha !== value && !colorButton.block) {
colorButton.alpha = value
onValueModified: {
if (colorButton.alpha !== alphaSlider.value && !colorButton.block) {
colorButton.alpha = alphaSlider.value
colorButton.clicked()
}
}
@@ -372,7 +353,6 @@ Item {
}
Column {
spacing: 10
Row {
z: 3
@@ -387,9 +367,9 @@ Item {
DoubleSpinBox {
id: hueSlider2
width: 64
onCompressedValueModified: {
if (colorButton.hue !== value && !colorButton.block) {
colorButton.hue = value
onValueModified: {
if (colorButton.hue !== hueSlider2.value && !colorButton.block) {
colorButton.hue = hueSlider2.value
colorButton.clicked()
}
}
@@ -406,13 +386,12 @@ Item {
elide: Text.ElideRight
anchors.verticalCenter: parent.verticalCenter
}
DoubleSpinBox {
id: saturationSlider
width: 64
onCompressedValueModified: {
if (colorButton.saturation !== value && !colorButton.block) {
colorButton.saturation = value
onValueModified: {
if (colorButton.saturation !== saturationSlider.value && !colorButton.block) {
colorButton.saturation = saturationSlider.value
colorButton.clicked()
}
}
@@ -432,9 +411,9 @@ Item {
DoubleSpinBox {
id: lightnessSlider
width: 64
onCompressedValueModified: {
if (colorButton.lightness !== value && !colorButton.block) {
colorButton.lightness = value
onValueModified: {
if (colorButton.lightness !== lightnessSlider.value && !colorButton.block) {
colorButton.lightness = lightnessSlider.value
colorButton.clicked()
}
}

View File

@@ -33,15 +33,14 @@ Item {
property alias decimals: spinBox.decimals
property alias hasSlider: spinBox.hasSlider
property alias value: spinBox.realValue
property alias minimumValue: spinBox.realFrom
property alias maximumValue: spinBox.realTo
property alias stepSize: spinBox.realStepSize
property alias sliderIndicatorVisible: spinBox.sliderIndicatorVisible
property alias value: spinBox.realValue
signal compressedValueModified
signal valueModified
width: 90
@@ -50,17 +49,16 @@ Item {
StudioControls.RealSpinBox {
id: spinBox
property bool hasSlider: spinBox.sliderIndicatorVisible
width: wrapper.width
actionIndicatorVisible: false
realFrom: 0.0
realTo: 1.0
realStepSize: 0.1
decimals: 2
onRealValueModified: wrapper.valueModified()
onCompressedRealValueModified: wrapper.compressedValueModified()
width: wrapper.width
actionIndicatorVisible: false
property bool hasSlider: spinBox.sliderIndicatorVisible
}
}

View File

@@ -125,6 +125,25 @@ Rectangle {
origin.y: spinBoxIndicatorIcon.height / 2
yScale: 1
}
states: [
State {
name: "default"
when: myControl.enabled && spinBoxIndicator.enabled
PropertyChanges {
target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeTextColor
}
},
State {
name: "disabled"
when: !myControl.enabled || !spinBoxIndicator.enabled
PropertyChanges {
target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeTextColorDisabled
}
}
]
}
states: [
@@ -133,7 +152,7 @@ Rectangle {
when: myControl.enabled && !(spinBoxIndicator.hover
|| myControl.hover)
&& !spinBoxIndicator.pressed && !myControl.edit
&& !myControl.drag && spinBoxIndicator.enabled
&& !myControl.drag
PropertyChanges {
target: spinBoxIndicator
color: StudioTheme.Values.themeControlBackground
@@ -143,7 +162,7 @@ Rectangle {
name: "hovered"
when: (spinBoxIndicator.hover || myControl.hover)
&& !spinBoxIndicator.pressed && !myControl.edit
&& !myControl.drag && spinBoxIndicator.enabled
&& !myControl.drag
PropertyChanges {
target: spinBoxIndicator
color: StudioTheme.Values.themeHoverHighlight
@@ -151,7 +170,7 @@ Rectangle {
},
State {
name: "pressed"
when: spinBoxIndicator.pressed && spinBoxIndicator.enabled
when: spinBoxIndicator.pressed
PropertyChanges {
target: spinBoxIndicator
color: StudioTheme.Values.themeInteraction
@@ -159,7 +178,7 @@ Rectangle {
},
State {
name: "edit"
when: myControl.edit && spinBoxIndicator.enabled
when: myControl.edit
PropertyChanges {
target: spinBoxIndicator
color: StudioTheme.Values.themeFocusEdit
@@ -167,23 +186,11 @@ Rectangle {
},
State {
name: "drag"
when: myControl.drag && spinBoxIndicator.enabled
when: myControl.drag
PropertyChanges {
target: spinBoxIndicator
color: StudioTheme.Values.themeFocusDrag
}
},
State {
name: "disabled"
when: !myControl.enabled || !spinBoxIndicator.enabled
PropertyChanges {
target: spinBoxIndicator
color: StudioTheme.Values.themeControlBackgroundDisabled
}
PropertyChanges {
target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeTextColorDisabled
}
}
]
}

View File

@@ -87,7 +87,7 @@ QtObject {
property string themePanelBackground: "#2a2a2a"
property string themeHoverHighlight: "#313131"
property string themeColumnBackground: "#363636"
property string themeFocusEdit: "#606060"
property string themeFocusEdit: "#444444"
property string themeFocusDrag: "#565656"
property string themeControlBackgroundPressed: "#606060"