feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Fix DoubleSpinBox in-/decrease issue

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

79
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorButton.qml
View File

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

16
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml
View File

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

41
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml
View File

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

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
View File

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