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>
2019-07-15 15:29:14 +02:00
parent 6f8cbb6fd2
commit 66b546f341
9 changed files with 84 additions and 28 deletions
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ActionIndicator.qml
+++ b/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 {
+}
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir
+++ b/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
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml
+++ b/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
-    border.color: StudioTheme.Values.themeControlOutline
-    state: "default"
+    color: actionIndicator.showBackground ? StudioTheme.Values.themeControlBackground : "transparent"
+    border.color: actionIndicator.showBackground ? StudioTheme.Values.themeControlOutline : "transparent"

    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
-            }
        }
    ]
 }
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
+++ b/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
    }

--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml
+++ b/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
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml
+++ b/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
    }

--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml
+++ b/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
+            }
        }
    ]
 }
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml
+++ b/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
    }

--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml
+++ b/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 {