QmlDesigner: Add flag to ActionIndicator

* Add ActionIndicator flag to control drawing of background and border
 * Adapt controls layout to support ActionIndicator without background
   and border
 * Fix non-editable ComboBox input tap behavior
 * Fix RealSpinBoxIndicator disable state
 * Add ActionIndicator wrapper in HelperWidgets

Change-Id: I2c2b299a3588791492d8e53a858477306ea38f0a
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ActionIndicator.qml

@@ -0,0 +1,31 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import StudioControls 1.0 as StudioControls
+import QtQuick.Controls.Styles 1.1
+
+StudioControls.ActionIndicator {
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir

@@ -1,3 +1,4 @@
+ActionIndicator 2.0 ActionIndicator.qml
 AligmentHorizontalButtons 2.0 AligmentHorizontalButtons.qml
 AligmentVerticalButtons 2.0 AligmentVerticalButtons.qml
 AnchorButtons 2.0 AnchorButtons.qml

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml

@@ -32,14 +32,14 @@ Rectangle {
 
     property Item myControl
 
+    property bool showBackground: true
     property alias icon: actionIndicatorIcon
 
     property bool hover: false
     property bool pressed: false
 
-    color: StudioTheme.Values.themeControlBackground
+    color: actionIndicator.showBackground ? StudioTheme.Values.themeControlBackground : "transparent"
-    border.color: StudioTheme.Values.themeControlOutline
+    border.color: actionIndicator.showBackground ? StudioTheme.Values.themeControlOutline : "transparent"
-    state: "default"
 
     implicitWidth: StudioTheme.Values.height
     implicitHeight: StudioTheme.Values.height
@@ -55,6 +55,26 @@ Rectangle {
         font.pixelSize: StudioTheme.Values.myIconFontSize
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
+
+        states: [
+            State {
+                name: "hovered"
+                when: actionIndicator.hover && !actionIndicator.pressed
+                      && !myControl.edit && !myControl.drag && myControl.enabled
+                PropertyChanges {
+                    target: actionIndicatorIcon
+                    scale: 1.2
+                }
+            },
+            State {
+                name: "disabled"
+                when: !myControl.enabled
+                PropertyChanges {
+                    target: actionIndicatorIcon
+                    color: StudioTheme.Values.themeTextColorDisabled
+                }
+            }
+        ]
     }
 
     MouseArea {
@@ -70,27 +90,18 @@ Rectangle {
             name: "default"
             when: myControl.enabled && !actionIndicator.hover
                   && !actionIndicator.pressed && !myControl.hover
-                  && !myControl.edit && !myControl.drag
+                  && !myControl.edit && !myControl.drag && actionIndicator.showBackground
             PropertyChanges {
                 target: actionIndicator
                 color: StudioTheme.Values.themeControlBackground
                 border.color: StudioTheme.Values.themeControlOutline
             }
         },
-        State {
-            name: "hovered"
-            when: actionIndicator.hover && !actionIndicator.pressed
-                  && !myControl.edit && !myControl.drag
-            PropertyChanges {
-                target: actionIndicatorIcon
-                scale: 1.2
-            }
-        },
         State {
             name: "globalHover"
             when: myControl.hover && !actionIndicator.hover
                   && !actionIndicator.pressed && !myControl.edit
-                  && !myControl.drag
+                  && !myControl.drag && actionIndicator.showBackground
             PropertyChanges {
                 target: actionIndicator
                 color: StudioTheme.Values.themeHoverHighlight
@@ -99,7 +110,7 @@ Rectangle {
         },
         State {
             name: "edit"
-            when: myControl.edit
+            when: myControl.edit && actionIndicator.showBackground
             PropertyChanges {
                 target: actionIndicator
                 color: StudioTheme.Values.themeFocusEdit
@@ -108,7 +119,7 @@ Rectangle {
         },
         State {
             name: "drag"
-            when: myControl.drag
+            when: myControl.drag && actionIndicator.showBackground
             PropertyChanges {
                 target: actionIndicator
                 color: StudioTheme.Values.themeFocusDrag
@@ -117,16 +128,12 @@ Rectangle {
         },
         State {
             name: "disabled"
-            when: !myControl.enabled
+            when: !myControl.enabled && actionIndicator.showBackground
             PropertyChanges {
                 target: actionIndicator
                 color: StudioTheme.Values.themeControlBackgroundDisabled
                 border.color: StudioTheme.Values.themeControlOutlineDisabled
             }
-            PropertyChanges {
-                target: actionIndicatorIcon
-                color: StudioTheme.Values.themeTextColorDisabled
-            }
         }
     ]
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml

@@ -87,7 +87,8 @@ T.ComboBox {
         color: StudioTheme.Values.themeControlOutline
         border.color: StudioTheme.Values.themeControlOutline
         border.width: StudioTheme.Values.border
-        width: myComboBox.width
+        x: actionIndicator.width - (actionIndicatorVisible ? StudioTheme.Values.border : 0)
+        width: myComboBox.width - actionIndicator.width
         height: myComboBox.height
     }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml

@@ -74,8 +74,8 @@ TextInput {
                 if (myControl.popup.opened) {
                     myControl.popup.close()
                 } else {
-                    myControl.popup.open()
                     myControl.forceActiveFocus()
+                    myControl.popup.open()
                 }
             } else {
                 textInput.forceActiveFocus()
@@ -106,6 +106,10 @@ TextInput {
                 color: StudioTheme.Values.themeControlBackground
                 border.color: StudioTheme.Values.themeControlOutline
             }
+            PropertyChanges {
+                target: tapHandler
+                enabled: true
+            }
             PropertyChanges {
                 target: mouseArea
                 cursorShape: Qt.PointingHandCursor

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml

@@ -151,7 +151,8 @@ T.SpinBox {
         color: StudioTheme.Values.themeControlOutline
         border.color: StudioTheme.Values.themeControlOutline
         border.width: StudioTheme.Values.border
-        width: mySpinBox.width
+        x: actionIndicator.width - (actionIndicatorVisible ? StudioTheme.Values.border : 0)
+        width: mySpinBox.width - actionIndicator.width
         height: mySpinBox.height
     }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml

@@ -53,7 +53,7 @@ Rectangle {
             pressAndHoldTimer.stop()
     }
 
-    // This function is meant to synchronize enabled with realEnable to avoid
+    // This function is meant to synchronize enabled with realEnabled to avoid
     // the internal logic messing with the actual state.
     function invalidateEnabled() {
         spinBoxIndicator.enabled = spinBoxIndicator.realEnabled
@@ -191,6 +191,14 @@ Rectangle {
                 target: spinBoxIndicator
                 color: StudioTheme.Values.themeFocusDrag
             }
+        },
+        State {
+            name: "disabled"
+            when: !myControl.enabled
+            PropertyChanges {
+                target: spinBoxIndicator
+                color: StudioTheme.Values.themeControlBackgroundDisabled
+            }
         }
     ]
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml

@@ -143,7 +143,8 @@ T.SpinBox {
         color: StudioTheme.Values.themeControlOutline
         border.color: StudioTheme.Values.themeControlOutline
         border.width: StudioTheme.Values.border
-        width: mySpinBox.width
+        x: actionIndicator.width - (actionIndicatorVisible ? StudioTheme.Values.border : 0)
+        width: mySpinBox.width - actionIndicator.width
         height: mySpinBox.height
     }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml

@@ -58,9 +58,9 @@ T.TextField {
     persistentSelection: focus // QTBUG-73807
     clip: true
 
+    width: StudioTheme.Values.height * 5
     height: StudioTheme.Values.height
     implicitHeight: StudioTheme.Values.height
-    width: StudioTheme.Values.height * 5
 
     leftPadding: StudioTheme.Values.inputHorizontalPadding + actionIndicator.width
                  - (actionIndicatorVisible ? StudioTheme.Values.border : 0)
@@ -108,7 +108,9 @@ T.TextField {
         color: StudioTheme.Values.themeControlBackground
         border.color: StudioTheme.Values.themeControlOutline
         border.width: StudioTheme.Values.border
-        anchors.fill: parent
+        x: actionIndicator.width - (actionIndicatorVisible ? StudioTheme.Values.border : 0)
+        width: myTextField.width - actionIndicator.width
+        height: myTextField.height
     }
 
     TranslationIndicator {