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

QmlDesigner: Fix studio controls

Browse Source 
* Fix CheckBox hover and focus behavior
 * Fix CheckBox long label issue
 * Refactor SpinBox wrapper property
 * Fix SpinBoxIndicator active focus on use
 * Refactor edit state in all controls

Change-Id: Ice12aac7b97a36a658dadfac68457aefe0d757a1
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Henning Gruendl
2019-06-07 09:57:27 +02:00
committed by Thomas Hartmann
parent 52f718fdcb
commit 20b1941aed
15 changed files with 56 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CheckBox.qml
View File

@@ -47,8 +47,8 @@ Controls.CheckBox {
id: colorLogic
backendValue: checkBox.backendValue
onValueFromBackendChanged: {
if (checkBox.checked !== valueFromBackend)
checkBox.checked = valueFromBackend;
if (checkBox.checked !== colorLogic.valueFromBackend)
checkBox.checked = colorLogic.valueFromBackend;
}
}

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml
View File

@@ -91,7 +91,7 @@ Item {
}
}
textColor: colorLogic.textColor
labelColor: colorLogic.textColor
onCompressedValueModified: {
if (backendValue.value !== realValue)

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml
View File

@@ -40,7 +40,7 @@ T.AbstractButton {
height: StudioTheme.Values.height
width: StudioTheme.Values.height
z: myButton.checked ? 10 : 3
activeFocusOnTab: false // TODO Decision pending. Focus for AbstractButtons?
activeFocusOnTab: false
background: Rectangle {
id: buttonBackground

8
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml
View File

@@ -70,7 +70,7 @@ Rectangle {
name: "default"
when: myControl.enabled && !actionIndicator.hover
&& !actionIndicator.pressed && !myControl.hover
&& !myControl.activeFocus && !myControl.drag
&& !myControl.edit && !myControl.drag
PropertyChanges {
target: actionIndicator
color: StudioTheme.Values.themeControlBackground
@@ -80,7 +80,7 @@ Rectangle {
State {
name: "hovered"
when: actionIndicator.hover && !actionIndicator.pressed
&& !myControl.activeFocus && !myControl.drag
&& !myControl.edit && !myControl.drag
PropertyChanges {
target: actionIndicatorIcon
scale: 1.2
@@ -89,7 +89,7 @@ Rectangle {
State {
name: "globalHover"
when: myControl.hover && !actionIndicator.hover
&& !actionIndicator.pressed && !myControl.activeFocus
&& !actionIndicator.pressed && !myControl.edit
&& !myControl.drag
PropertyChanges {
target: actionIndicator
@@ -99,7 +99,7 @@ Rectangle {
},
State {
name: "edit"
when: myControl.activeFocus
when: myControl.edit
PropertyChanges {
target: actionIndicator
color: StudioTheme.Values.themeFocusEdit

24
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml
View File

@@ -32,7 +32,8 @@ T.CheckBox {
property alias actionIndicator: actionIndicator
property bool hover: myCheckBox.hovered // TODO two underscores
property bool hover: myCheckBox.hovered
property bool edit: false
property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth
@@ -43,21 +44,23 @@ T.CheckBox {
font.pixelSize: StudioTheme.Values.myFontSize
height: StudioTheme.Values.height
width: StudioTheme.Values.height * 5
implicitWidth: Math.max(
implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding
+ implicitIndicatorWidth + spacing + actionIndicator.width)
implicitHeight: Math.max(
implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
spacing: StudioTheme.Values.checkBoxSpacing
hoverEnabled: true
activeFocusOnTab: false // TODO Decision pending. Focus for CheckBoxes?
activeFocusOnTab: false
contentItem: T.Label {
id: checkBoxLabel
leftPadding: 0
rightPadding: 0
width: 20 // TODO Not working
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
text: myCheckBox.text
font: myCheckBox.font
@@ -68,9 +71,7 @@ T.CheckBox {
id: actionIndicator
myControl: myCheckBox // TODO global hover issue. Can be solved with extra property in ActionIndicator
x: checkBoxLabel.visible ? checkBoxLabel.contentWidth
+ (myCheckBox.spacing
* StudioTheme.Values.scaleFactor) : 0 // TODO scale factor
x: checkBoxLabel.visible ? checkBoxLabel.contentWidth + myCheckBox.spacing : 0
y: 0
width: actionIndicator.visible ? __actionIndicatorWidth : 0
height: actionIndicator.visible ? __actionIndicatorHeight : 0
@@ -125,6 +126,7 @@ T.CheckBox {
State {
name: "hovered"
when: myCheckBox.hovered && !myCheckBox.pressed
&& !actionIndicator.hover
PropertyChanges {
target: checkBoxBackground
color: StudioTheme.Values.themeHoverHighlight

6
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml
View File

@@ -73,7 +73,7 @@ Rectangle {
name: "default"
when: myControl.enabled && !(checkIndicator.hover
|| myControl.hover)
&& !checkIndicator.checked && !myControl.activeFocus
&& !checkIndicator.checked && !myControl.edit
&& !myControl.drag
PropertyChanges {
target: checkIndicator
@@ -84,7 +84,7 @@ Rectangle {
State {
name: "hovered"
when: (checkIndicator.hover || myControl.hover)
&& !checkIndicator.checked && !myControl.activeFocus
&& !checkIndicator.checked && !myControl.edit
&& !myControl.drag
PropertyChanges {
target: checkIndicator
@@ -103,7 +103,7 @@ Rectangle {
},
State {
name: "edit"
when: myControl.activeFocus && !checkIndicator.checked
when: myControl.edit && !checkIndicator.checked
&& !(checkIndicator.hover && myControl.hover)
PropertyChanges {
target: checkIndicator

8
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
View File

@@ -32,10 +32,10 @@ T.ComboBox {
id: myComboBox
property alias actionIndicator: actionIndicator
property alias labelColor: comboBoxInput.color
property bool hover: false // This property is used to indicate the global hover state
property bool edit: myComboBox.activeFocus
property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth
@@ -203,7 +203,7 @@ T.ComboBox {
states: [
State {
name: "default"
when: !myComboBox.hover && !myComboBox.activeFocus
when: !myComboBox.hover && !myComboBox.edit
PropertyChanges {
target: myComboBox
wheelEnabled: false
@@ -220,7 +220,7 @@ T.ComboBox {
},
State {
name: "focus"
when: myComboBox.activeFocus && !myComboBox.editable
when: myComboBox.edit && !myComboBox.editable
PropertyChanges {
target: myComboBox
wheelEnabled: true
@@ -232,7 +232,7 @@ T.ComboBox {
},
State {
name: "edit"
when: myComboBox.activeFocus && myComboBox.editable
when: myComboBox.edit && myComboBox.editable
PropertyChanges {
target: myComboBox
wheelEnabled: true

10
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml
View File

@@ -32,7 +32,7 @@ TextInput {
property T.Control myControl
property bool edit: false
property bool edit: textInput.activeFocus
property bool drag: false
z: 2
@@ -99,7 +99,7 @@ TextInput {
states: [
State {
name: "default"
when: myControl.enabled && !textInput.activeFocus
when: myControl.enabled && !textInput.edit
&& !mouseArea.containsMouse && !myControl.drag
PropertyChanges {
target: textInputArea
@@ -113,7 +113,7 @@ TextInput {
},
State {
name: "hovered"
when: myControl.hover && !textInput.activeFocus && !myControl.drag
when: myControl.hover && !textInput.edit && !myControl.drag
PropertyChanges {
target: textInputArea
color: StudioTheme.Values.themeHoverHighlight
@@ -122,7 +122,7 @@ TextInput {
},
State {
name: "focus"
when: textInput.activeFocus && !myControl.editable
when: textInput.edit && !myControl.editable
PropertyChanges {
target: textInputArea
color: StudioTheme.Values.themeFocusEdit
@@ -131,7 +131,7 @@ TextInput {
},
State {
name: "edit"
when: textInput.activeFocus && myControl.editable
when: textInput.edit && myControl.editable
extend: "focus"
PropertyChanges {
target: tapHandler

3
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml
View File

@@ -41,11 +41,10 @@ T.Menu {
margins: 0
overlap: 1
padding: 0
closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnEscape
padding: 0
delegate: MenuItem {
}

7
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml
View File

@@ -47,6 +47,7 @@ T.Slider {
property string __inactiveColor: StudioTheme.Values.themeSliderInactiveTrack
property bool hover: false // This property is used to indicate the global hover state
property bool edit: slider.activeFocus
property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth
@@ -223,7 +224,7 @@ T.Slider {
states: [
State {
name: "default"
when: slider.enabled && !slider.hover && !slider.activeFocus
when: slider.enabled && !slider.hover && !slider.edit
PropertyChanges {
target: slider
wheelEnabled: false
@@ -231,7 +232,7 @@ T.Slider {
},
State {
name: "hovered"
when: slider.enabled && slider.hover && !slider.activeFocus
when: slider.enabled && slider.hover && !slider.edit
PropertyChanges {
target: slider
__activeColor: StudioTheme.Values.themeSliderActiveTrackHover
@@ -244,7 +245,7 @@ T.Slider {
},
State {
name: "focus"
when: slider.enabled && slider.activeFocus
when: slider.enabled && slider.edit
PropertyChanges {
target: slider
wheelEnabled: true

1
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml
View File

@@ -33,7 +33,6 @@ T.Popup {
property T.Control myControl
dim: false
closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent
background: Rectangle {

15
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml
View File

@@ -30,7 +30,7 @@ import StudioTheme 1.0 as StudioTheme
T.SpinBox {
id: mySpinBox
property alias textColor: spinBoxInput.color
property alias labelColor: spinBoxInput.color
property alias actionIndicator: actionIndicator
property int decimals: 0
@@ -40,7 +40,7 @@ T.SpinBox {
property real minStepSize: 1
property real maxStepSize: 10
property bool edit: false
property bool edit: spinBoxInput.activeFocus
property bool hover: false // This property is used to indicate the global hover state
property bool drag: false
@@ -91,11 +91,6 @@ T.SpinBox {
top: Math.max(mySpinBox.from, mySpinBox.to)
}
Connections {
target: spinBoxInput
onActiveFocusChanged: mySpinBox.edit = spinBoxInput.activeFocus
}
ActionIndicator {
id: actionIndicator
myControl: mySpinBox
@@ -188,7 +183,7 @@ T.SpinBox {
State {
name: "default"
when: mySpinBox.enabled && !mySpinBox.hover
&& !mySpinBox.activeFocus && !mySpinBox.drag
&& !mySpinBox.edit && !mySpinBox.drag
PropertyChanges {
target: mySpinBox
__wheelEnabled: false
@@ -205,7 +200,7 @@ T.SpinBox {
},
State {
name: "edit"
when: spinBoxInput.activeFocus
when: mySpinBox.edit
PropertyChanges {
target: mySpinBox
__wheelEnabled: true
@@ -245,7 +240,7 @@ T.SpinBox {
// QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason)
spinBoxInput.selectAll()
if (sliderPopup.opened && !activeFocus)
if (sliderPopup.opened && !mySpinBox.activeFocus)
sliderPopup.close()
}

5
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml
View File

@@ -47,7 +47,10 @@ Rectangle {
anchors.fill: parent
hoverEnabled: true
onContainsMouseChanged: spinBoxIndicator.hover = containsMouse
onPressed: mouse.accepted = false
onPressed: {
myControl.forceActiveFocus()
mouse.accepted = false
}
}
T.Label {

10
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml
View File

@@ -32,7 +32,7 @@ TextInput {
property T.Control myControl
property bool edit: false
property bool edit: textInput.activeFocus
property bool drag: false
z: 2
@@ -53,7 +53,7 @@ TextInput {
activeFocusOnPress: false
clip: true
// TextInput foucs needs to be set to activeFocus whenever it changes,
// TextInput focus needs to be set to activeFocus whenever it changes,
// otherwise TextInput will get activeFocus whenever the parent SpinBox gets
// activeFocus. This will lead to weird side effects.
onActiveFocusChanged: textInput.focus = activeFocus
@@ -139,7 +139,7 @@ TextInput {
states: [
State {
name: "default"
when: myControl.enabled && !textInput.activeFocus
when: myControl.enabled && !textInput.edit
&& !mouseArea.containsMouse && !myControl.drag
PropertyChanges {
target: textInputArea
@@ -161,7 +161,7 @@ TextInput {
},
State {
name: "hovered"
when: myControl.hover && !textInput.activeFocus && !myControl.drag
when: myControl.hover && !textInput.edit && !myControl.drag
PropertyChanges {
target: textInputArea
color: StudioTheme.Values.themeHoverHighlight
@@ -170,7 +170,7 @@ TextInput {
},
State {
name: "edit"
when: textInput.activeFocus
when: textInput.edit
PropertyChanges {
target: textInputArea
color: StudioTheme.Values.themeFocusEdit

11
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml
View File

@@ -31,10 +31,9 @@ T.TextField {
id: myTextField
property alias actionIndicator: actionIndicator
property alias translationIndicator: translationIndicator
property bool edit: false
property bool edit: myTextField.activeFocus
property bool hover: false // This property is used to indicate the global hover state
property alias actionIndicatorVisible: actionIndicator.visible
@@ -68,8 +67,6 @@ T.TextField {
rightPadding: StudioTheme.Values.inputHorizontalPadding + translationIndicator.width
- (translationIndicatorVisible ? StudioTheme.Values.border : 0)
onActiveFocusChanged: myTextField.edit = myTextField.activeFocus
MouseArea {
id: mouseArea
anchors.fill: parent
@@ -126,7 +123,7 @@ T.TextField {
State {
name: "default"
when: myTextField.enabled && !myTextField.hover
&& !myTextField.activeFocus
&& !myTextField.edit
PropertyChanges {
target: textFieldBackground
color: StudioTheme.Values.themeControlBackground
@@ -139,7 +136,7 @@ T.TextField {
},
State {
name: "hovered"
when: myTextField.hover && !myTextField.activeFocus
when: myTextField.hover && !myTextField.edit
PropertyChanges {
target: textFieldBackground
color: StudioTheme.Values.themeHoverHighlight
@@ -148,7 +145,7 @@ T.TextField {
},
State {
name: "edit"
when: myTextField.activeFocus
when: myTextField.edit
PropertyChanges {
target: textFieldBackground
color: StudioTheme.Values.themeFocusEdit