From 20b1941aeda2a6ad5bd498cd2206e9847c184173 Mon Sep 17 00:00:00 2001 From: Henning Gruendl Date: Fri, 7 Jun 2019 09:57:27 +0200 Subject: [PATCH] QmlDesigner: Fix studio controls * 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 --- .../imports/HelperWidgets/CheckBox.qml | 4 ++-- .../imports/HelperWidgets/SpinBox.qml | 2 +- .../imports/StudioControls/AbstractButton.qml | 2 +- .../StudioControls/ActionIndicator.qml | 8 +++---- .../imports/StudioControls/CheckBox.qml | 24 ++++++++++--------- .../imports/StudioControls/CheckIndicator.qml | 6 ++--- .../imports/StudioControls/ComboBox.qml | 8 +++---- .../imports/StudioControls/ComboBoxInput.qml | 10 ++++---- .../imports/StudioControls/Menu.qml | 3 +-- .../imports/StudioControls/Slider.qml | 7 +++--- .../imports/StudioControls/SliderPopup.qml | 1 - .../imports/StudioControls/SpinBox.qml | 15 ++++-------- .../StudioControls/SpinBoxIndicator.qml | 5 +++- .../imports/StudioControls/SpinBoxInput.qml | 10 ++++---- .../imports/StudioControls/TextField.qml | 11 ++++----- 15 files changed, 56 insertions(+), 60 deletions(-) diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CheckBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CheckBox.qml index 48d8ffaa53d..8642b9d924c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CheckBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CheckBox.qml @@ -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; } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml index 29ef06451ce..eb941166fe2 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml @@ -91,7 +91,7 @@ Item { } } - textColor: colorLogic.textColor + labelColor: colorLogic.textColor onCompressedValueModified: { if (backendValue.value !== realValue) diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml index 3241eb405d5..6746508be26 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml @@ -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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml index e263f9337aa..c2a660228d1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml @@ -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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml index 2f122a7b89d..142421ee997 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml @@ -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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml index 73788710bdb..4c314b9101e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml @@ -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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml index 3ee5a02b7cd..c61e7e0dbf6 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml @@ -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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml index 06e6ecb2b68..2ea123f90d2 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml @@ -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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml index 5b0bc5875ac..01a86847fc3 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml @@ -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 { } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml index 955d73d6c72..7e111b6851a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml @@ -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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml index 27e8185da3a..beb6da4a8fb 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml @@ -33,7 +33,6 @@ T.Popup { property T.Control myControl dim: false - closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent background: Rectangle { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml index ef98c0f9ffd..e10a334bd66 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml @@ -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() } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml index ab1e90f3860..f75b8b47fd1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml @@ -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 { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml index 599f6fd5b5f..e2f718176ee 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml @@ -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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml index 3525bfa41bc..80ca6fd1c7b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml @@ -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