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 id: colorLogic
backendValue: checkBox.backendValue backendValue: checkBox.backendValue
onValueFromBackendChanged: { onValueFromBackendChanged: {
if (checkBox.checked !== valueFromBackend) if (checkBox.checked !== colorLogic.valueFromBackend)
checkBox.checked = 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: { onCompressedValueModified: {
if (backendValue.value !== realValue) 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 height: StudioTheme.Values.height
width: StudioTheme.Values.height width: StudioTheme.Values.height
z: myButton.checked ? 10 : 3 z: myButton.checked ? 10 : 3
activeFocusOnTab: false // TODO Decision pending. Focus for AbstractButtons? activeFocusOnTab: false
background: Rectangle { background: Rectangle {
id: buttonBackground id: buttonBackground

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

@@ -70,7 +70,7 @@ Rectangle {
name: "default" name: "default"
when: myControl.enabled && !actionIndicator.hover when: myControl.enabled && !actionIndicator.hover
&& !actionIndicator.pressed && !myControl.hover && !actionIndicator.pressed && !myControl.hover
&& !myControl.activeFocus && !myControl.drag && !myControl.edit && !myControl.drag
PropertyChanges { PropertyChanges {
target: actionIndicator target: actionIndicator
color: StudioTheme.Values.themeControlBackground color: StudioTheme.Values.themeControlBackground
@@ -80,7 +80,7 @@ Rectangle {
State { State {
name: "hovered" name: "hovered"
when: actionIndicator.hover && !actionIndicator.pressed when: actionIndicator.hover && !actionIndicator.pressed
&& !myControl.activeFocus && !myControl.drag && !myControl.edit && !myControl.drag
PropertyChanges { PropertyChanges {
target: actionIndicatorIcon target: actionIndicatorIcon
scale: 1.2 scale: 1.2
@@ -89,7 +89,7 @@ Rectangle {
State { State {
name: "globalHover" name: "globalHover"
when: myControl.hover && !actionIndicator.hover when: myControl.hover && !actionIndicator.hover
&& !actionIndicator.pressed && !myControl.activeFocus && !actionIndicator.pressed && !myControl.edit
&& !myControl.drag && !myControl.drag
PropertyChanges { PropertyChanges {
target: actionIndicator target: actionIndicator
@@ -99,7 +99,7 @@ Rectangle {
}, },
State { State {
name: "edit" name: "edit"
when: myControl.activeFocus when: myControl.edit
PropertyChanges { PropertyChanges {
target: actionIndicator target: actionIndicator
color: StudioTheme.Values.themeFocusEdit 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 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 alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth
@@ -43,21 +44,23 @@ T.CheckBox {
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: StudioTheme.Values.myFontSize
height: StudioTheme.Values.height implicitWidth: Math.max(
width: StudioTheme.Values.height * 5 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 spacing: StudioTheme.Values.checkBoxSpacing
hoverEnabled: true hoverEnabled: true
activeFocusOnTab: false // TODO Decision pending. Focus for CheckBoxes? activeFocusOnTab: false
contentItem: T.Label { contentItem: T.Label {
id: checkBoxLabel id: checkBoxLabel
leftPadding: 0 leftPadding: 0
rightPadding: 0 rightPadding: 0
width: 20 // TODO Not working
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
text: myCheckBox.text text: myCheckBox.text
font: myCheckBox.font font: myCheckBox.font
@@ -68,9 +71,7 @@ T.CheckBox {
id: actionIndicator id: actionIndicator
myControl: myCheckBox // TODO global hover issue. Can be solved with extra property in ActionIndicator myControl: myCheckBox // TODO global hover issue. Can be solved with extra property in ActionIndicator
x: checkBoxLabel.visible ? checkBoxLabel.contentWidth x: checkBoxLabel.visible ? checkBoxLabel.contentWidth + myCheckBox.spacing : 0
+ (myCheckBox.spacing
* StudioTheme.Values.scaleFactor) : 0 // TODO scale factor
y: 0 y: 0
width: actionIndicator.visible ? __actionIndicatorWidth : 0 width: actionIndicator.visible ? __actionIndicatorWidth : 0
height: actionIndicator.visible ? __actionIndicatorHeight : 0 height: actionIndicator.visible ? __actionIndicatorHeight : 0
@@ -125,6 +126,7 @@ T.CheckBox {
State { State {
name: "hovered" name: "hovered"
when: myCheckBox.hovered && !myCheckBox.pressed when: myCheckBox.hovered && !myCheckBox.pressed
&& !actionIndicator.hover
PropertyChanges { PropertyChanges {
target: checkBoxBackground target: checkBoxBackground
color: StudioTheme.Values.themeHoverHighlight color: StudioTheme.Values.themeHoverHighlight

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

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

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

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

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

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

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

@@ -41,11 +41,10 @@ T.Menu {
margins: 0 margins: 0
overlap: 1 overlap: 1
padding: 0
closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnEscape closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnEscape
padding: 0
delegate: MenuItem { 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 string __inactiveColor: StudioTheme.Values.themeSliderInactiveTrack
property bool hover: false // This property is used to indicate the global hover state 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 alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth
@@ -223,7 +224,7 @@ T.Slider {
states: [ states: [
State { State {
name: "default" name: "default"
when: slider.enabled && !slider.hover && !slider.activeFocus when: slider.enabled && !slider.hover && !slider.edit
PropertyChanges { PropertyChanges {
target: slider target: slider
wheelEnabled: false wheelEnabled: false
@@ -231,7 +232,7 @@ T.Slider {
}, },
State { State {
name: "hovered" name: "hovered"
when: slider.enabled && slider.hover && !slider.activeFocus when: slider.enabled && slider.hover && !slider.edit
PropertyChanges { PropertyChanges {
target: slider target: slider
__activeColor: StudioTheme.Values.themeSliderActiveTrackHover __activeColor: StudioTheme.Values.themeSliderActiveTrackHover
@@ -244,7 +245,7 @@ T.Slider {
}, },
State { State {
name: "focus" name: "focus"
when: slider.enabled && slider.activeFocus when: slider.enabled && slider.edit
PropertyChanges { PropertyChanges {
target: slider target: slider
wheelEnabled: true wheelEnabled: true

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

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

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

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

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

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

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

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