QmlDesigner: Use studio controls for property editor

* CheckBox
 * ComboBox
 * LineEdit

Adjusting some details in property editor.

Change-Id: I8f9d6ef87c187f5a3be7c5fb368a1813e6dba92c
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/RectangleSpecifics.qml

@@ -73,7 +73,7 @@ Column {
                 SpinBox {
                     backendValue: backendValues.border_width
                     hasSlider: true
-                    Layout.preferredWidth: 80
+                    Layout.preferredWidth: 120
                 }
                 ExpandingSpacer {
 
@@ -86,7 +86,7 @@ Column {
                 SpinBox {
                     backendValue: backendValues.radius
                     hasSlider: true
-                    Layout.preferredWidth: 80
+                    Layout.preferredWidth: 120
                     minimumValue: 0
                     maximumValue: Math.min(backendValues.height.value, backendValues.width.value) / 2
                 }

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

@@ -24,26 +24,25 @@
 ****************************************************************************/
 
 import QtQuick 2.1
-import QtQuick.Controls 1.1 as Controls
+import StudioControls 1.0 as Controls
 import QtQuick.Controls.Styles 1.1
 
 Controls.CheckBox {
-
     id: checkBox
 
-    property color textColor: colorLogic.textColor
-
-    opacity: enabled ? 1 : 0.5
-
     property variant backendValue
+    property string tooltip
 
-    ExtendedFunctionButton {
+    ExtendedFunctionLogic {
-        x: 22
+        id: extFuncLogic
-        anchors.verticalCenter: parent.verticalCenter
         backendValue: checkBox.backendValue
-        visible: checkBox.enabled
     }
 
+    actionIndicator.icon.color: extFuncLogic.color
+    actionIndicator.icon.text: extFuncLogic.glyph
+    actionIndicator.onClicked: extFuncLogic.show()
+
+    labelColor: colorLogic.textColor
     ColorLogic {
         id: colorLogic
         backendValue: checkBox.backendValue
@@ -58,8 +57,4 @@ Controls.CheckBox {
             backendValue.value = checkBox.checked;
     }
 
-    style: CustomCheckBoxStyle {
-    }
-
-
 }

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

@@ -24,7 +24,7 @@
 ****************************************************************************/
 
 import QtQuick 2.1
-import QtQuick.Controls 1.1 as Controls
+import StudioControls 1.0 as Controls
 import QtQuick.Controls.Styles 1.1
 
 Controls.ComboBox {
@@ -32,7 +32,7 @@ Controls.ComboBox {
 
     property variant backendValue
 
-    property color textColor: colorLogic.textColor
+    labelColor: colorLogic.textColor
     property string scope: "Qt"
 
     property bool useInteger: false
@@ -45,6 +45,15 @@ Controls.ComboBox {
 
     property bool block: false
 
+    ExtendedFunctionLogic {
+        id: extFuncLogic
+        backendValue: comboBox.backendValue
+    }
+
+    actionIndicator.icon.color: extFuncLogic.color
+    actionIndicator.icon.text: extFuncLogic.glyph
+    actionIndicator.onClicked: extFuncLogic.show()
+
     ColorLogic {
         id: colorLogic
         backendValue: comboBox.backendValue
@@ -84,7 +93,7 @@ Controls.ComboBox {
         }
     }
 
-    onCurrentTextChanged: {
+    onActivated: {
         if (!__isCompleted)
             return;
 
@@ -106,14 +115,4 @@ Controls.ComboBox {
         __isCompleted = true;
     }
 
-    style: CustomComboBoxStyle {
-        textColor: comboBox.textColor
-    }
-
-    ExtendedFunctionButton {
-        x: 2
-        anchors.verticalCenter: parent.verticalCenter
-        backendValue: comboBox.backendValue
-        visible: comboBox.enabled
-    }
 }

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

@@ -26,7 +26,7 @@
 import QtQuick 2.1
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
-
+import QtQuickDesignerTheme 1.0
 
 Item {
     id: extendedFunctionButton

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

@@ -28,6 +28,7 @@ import QtQuick.Controls 1.1 as Controls
 import QtQuick.Layouts 1.0
 import QtQuick.Controls.Private 1.0
 import QtQuickDesignerTheme 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Controls.Label {
     id: label
@@ -40,6 +41,8 @@ Controls.Label {
     color: Theme.color(Theme.PanelTextColorLight)
     elide: Text.ElideRight
 
+    font.pixelSize: StudioTheme.Values.myFontSize
+
     Layout.preferredWidth: width
     Layout.minimumWidth: width
     Layout.maximumWidth: width

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

@@ -24,24 +24,20 @@
 ****************************************************************************/
 
 import QtQuick 2.2
-import QtQuick.Controls 1.1 as Controls
+import StudioControls 1.0 as Controls
 import QtQuick.Controls.Styles 1.0
 import QtQuickDesignerTheme 1.0
 
 Controls.TextField {
-
-    Controls.Action {
-        //Workaround to avoid that "Delete" deletes the item.
-        shortcut: "Delete"
-    }
-
     id: lineEdit
+
     property variant backendValue
     property color borderColor: "#222"
     property color highlightColor: "orange"
-    property color textColor: colorLogic.textColor
+    color: colorLogic.textColor
 
     property bool showTranslateCheckBox: true
+    translationIndicatorVisible: showTranslateCheckBox
 
     property bool writeValueManually: false
 
@@ -58,19 +54,21 @@ Controls.TextField {
         if (translateFunction() === "qsTranslate") {
             backendValue.expression = translateFunction()
                     + "(\"" + backendValue.getTranslationContext()
-                    + "\", " + "\"" + trCheckbox.escapeString(text) + "\")"
+                    + "\", " + "\"" + escapeString(text) + "\")"
         } else {
-            backendValue.expression = translateFunction() + "(\"" + trCheckbox.escapeString(text) + "\")"
+            backendValue.expression = translateFunction() + "(\"" + escapeString(text) + "\")"
         }
     }
 
-    ExtendedFunctionButton {
+    ExtendedFunctionLogic {
-        x: 4
+        id: extFuncLogic
-        anchors.verticalCenter: parent.verticalCenter
         backendValue: lineEdit.backendValue
-        visible: lineEdit.enabled && showExtendedFunctionButton
     }
 
+    actionIndicator.icon.color: extFuncLogic.color
+    actionIndicator.icon.text: extFuncLogic.glyph
+    actionIndicator.onClicked: extFuncLogic.show()
+
     ColorLogic {
         id: colorLogic
         backendValue: lineEdit.backendValue
@@ -102,7 +100,6 @@ Controls.TextField {
     }
 
     onEditingFinished: {
-
         if (writeValueManually)
             return
 
@@ -118,87 +115,35 @@ Controls.TextField {
         __dirty = false
     }
 
-    style: TextFieldStyle {
+    property bool isTranslated: colorLogic.backendValue.isTranslated
 
-        selectionColor: Theme.color(Theme.PanelTextColorLight)
+    translationIndicator.onClicked: {
-        selectedTextColor: Theme.color(Theme.PanelTextColorMid)
+        if (translationIndicator.checked) {
-        textColor: lineEdit.textColor
+            setTranslateExpression()
-        placeholderTextColor: Theme.color(Theme.PanelTextColorMid)
+        } else {
-
+            var textValue = lineEdit.text
-        padding.top: 2
+            lineEdit.backendValue.value = textValue
-        padding.bottom: 2
-        padding.left: 18
-        padding.right: lineEdit.showTranslateCheckBox ? 16 : 1
-        background: Rectangle {
-            implicitWidth: 100
-            implicitHeight: 24
-            color: Theme.qmlDesignerBackgroundColorDarker()
-            border.color: Theme.qmlDesignerBorderColor()
         }
+        colorLogic.evaluate();
     }
 
-    Controls.CheckBox {
+    property variant backendValueValueInternal: backendValue.value
-        anchors.right: parent.right
+    onBackendValueValueInternalChanged: {
-        anchors.verticalCenter: parent.verticalCenter
+        lineEdit.translationIndicator.checked = lineEdit.backendValue.isTranslated
-        id: trCheckbox
-
-
-        property bool isTranslated: colorLogic.backendValue.isTranslated
-        property bool backendValueValue: colorLogic.backendValue.value
-
-        onIsTranslatedChanged: {
-            checked = lineEdit.backendValue.isTranslated
-        }
-
-        onBackendValueValueChanged: {
-            checked = lineEdit.backendValue.isTranslated
-        }
-
-        onClicked: {
-            if (trCheckbox.checked) {
-                setTranslateExpression()
-            } else {
-                var textValue = lineEdit.text
-                lineEdit.backendValue.value = textValue
-            }
-            colorLogic.evaluate();
-        }
-
-        function escapeString(string) {
-            var str  = string;
-            str = str.replace(/\\/g, "\\\\");
-            str.replace(/\"/g, "\\\"");
-            str = str.replace(/\t/g, "\\t");
-            str = str.replace(/\r/g, "\\r");
-            str = str.replace(/\n/g, '\\n');
-            return str;
-        }
-
-        visible: showTranslateCheckBox
-
-
-        style: CheckBoxStyle {
-            spacing: 8
-            indicator: Item {
-                implicitWidth: 15
-                implicitHeight: 15
-                x: 7
-                y: 1
-                Rectangle {
-                    anchors.fill: parent
-                    border.color: Theme.qmlDesignerBorderColor()
-                    color: Theme.qmlDesignerBackgroundColorDarker()
-                    opacity: control.hovered || control.pressed ? 1 : 0.75
-                }
-                Image {
-                    x: 1
-                    y: 1
-                    width: 13
-                    height: 13
-                    source: "image://icons/tr"
-                    opacity: control.checked ? 1 : 0.3;
-                }
-            }
-        }
     }
+
+    onIsTranslatedChanged: {
+        lineEdit.translationIndicator.checked = lineEdit.backendValue.isTranslated
+    }
+
+    function escapeString(string) {
+        var str  = string;
+        str = str.replace(/\\/g, "\\\\");
+        str.replace(/\"/g, "\\\"");
+        str = str.replace(/\t/g, "\\t");
+        str = str.replace(/\r/g, "\\r");
+        str = str.replace(/\n/g, '\\n');
+        return str;
+    }
+
 }

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

@@ -27,6 +27,7 @@ import QtQuick 2.1
 import QtQuick.Controls 1.1 as Controls
 import QtQuick.Layouts 1.0
 import QtQuickDesignerTheme 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Item {
     id: section
@@ -54,6 +55,7 @@ Item {
             color: Theme.color(Theme.PanelTextColorLight)
             x: 22
             font.bold: true
+            font.pixelSize: StudioTheme.Values.myFontSize
         }
 
         Image {

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

@@ -39,7 +39,7 @@ Item {
 
     property alias backendValue: spinBox.backendValue
 
-    width: 100
+    width: 120
     implicitHeight: spinBox.height
 
     property bool __initialized: false
@@ -60,7 +60,7 @@ Item {
         if (!wrapper.__initialized)
             return
         spinBox[target] = Math.round(value * spinBox.factor)
-    }
+    }    
 
     StudioControls.SpinBox {
         id: spinBox

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

@@ -27,6 +27,7 @@ import QtQuick 2.1
 import QtQuick.Controls 1.0 as Controls
 import QtQuick.Controls.Styles 1.1
 import QtQuickDesignerTheme 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Controls.TabView {
     id: root
@@ -42,6 +43,7 @@ Controls.TabView {
             Text {
                 id: text
                 font.bold: true
+                font.pixelSize: StudioTheme.Values.myFontSize
                 anchors.centerIn: parent
                 anchors.verticalCenterOffset: -1
                 text: styleData.title

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

@@ -30,7 +30,7 @@ import StudioTheme 1.0 as StudioTheme
 T.CheckBox {
     id: myCheckBox
 
-    property alias actionIcon: actionIndicator.icon
+    property alias actionIndicator: actionIndicator
 
     property bool hover: myCheckBox.hovered // TODO two underscores
 
@@ -39,6 +39,7 @@ T.CheckBox {
     property real __actionIndicatorHeight: StudioTheme.Values.height
 
     property alias labelVisible: checkBoxLabel.visible
+    property alias labelColor: checkBoxLabel.color
 
     font.pixelSize: StudioTheme.Values.myFontSize
 

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

@@ -31,7 +31,9 @@ import StudioTheme 1.0 as StudioTheme
 T.ComboBox {
     id: myComboBox
 
-    property alias actionIcon: actionIndicator.icon
+    property alias actionIndicator: actionIndicator
+
+    property alias labelColor: comboBoxInput.color
 
     property bool hover: false // This property is used to indicate the global hover state
 

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

@@ -30,7 +30,9 @@ import StudioTheme 1.0 as StudioTheme
 T.TextField {
     id: myTextField
 
-    property alias actionIcon: actionIndicator.icon
+    property alias actionIndicator: actionIndicator
+
+    property alias translationIndicator: translationIndicator
 
     property bool edit: false
     property bool hover: false // This property is used to indicate the global hover state

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

@@ -34,6 +34,9 @@ Item {
 
     property bool hover: false
     property bool pressed: false
+    property bool checked: false
+
+    signal clicked
 
     state: "default"
 
@@ -67,6 +70,10 @@ Item {
             hoverEnabled: true
             onContainsMouseChanged: translationIndicator.hover = containsMouse
             onPressed: mouse.accepted = true // TODO
+            onClicked: {
+                translationIndicator.checked = !translationIndicator.checked
+                translationIndicator.clicked()
+            }
         }
     }
 
@@ -88,12 +95,23 @@ Item {
             when: myControl.enabled && !translationIndicator.hover
                   && !translationIndicator.pressed && !myControl.hover
                   && !myControl.edit && !myControl.drag
+                  && !translationIndicator.checked
             PropertyChanges {
                 target: translationIndicatorBackground
                 color: StudioTheme.Values.themeColumnBackground
                 border.color: StudioTheme.Values.themeTranslationIndicatorBorder
             }
         },
+        State {
+            name: "checked"
+            when: translationIndicator.checked
+
+            PropertyChanges {
+                target: translationIndicatorBackground
+                //color: StudioTheme.Values.themeFocusDrag // TODO
+                color: "red"
+            }
+        },
         State {
             name: "hovered"
             when: translationIndicator.hover && !translationIndicator.pressed