QmlDesigner: Add more studio controls

* Add alignment button rows with new controls
 * Add font style buttons with new controls
 * Add anchor button rows with new controls
 * Fix CheckBox error about undefined assignment
 * Add new colors in ColorLogic
 * Fix low contrast for edit mode text color ComboBox, SpinBox, LineEdit
 * Add new icon font
 * Fix TranslationIcon background color
 * Some minor import refactoring

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

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

@@ -29,6 +29,9 @@ import QtQuick.Layouts 1.0
 import QtQuick.Controls 1.0 as Controls
 import QtQuickDesignerTheme 1.0
 
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
 RowLayout {
     id: anchorRow
 
@@ -71,7 +74,7 @@ RowLayout {
         rows: 2
         columns: 2
 
-        Controls.Label {
+        Label {
             text: qsTr("Target")
             color: __defaultTextColor
             elide: Text.ElideRight
@@ -85,7 +88,7 @@ RowLayout {
             }
         }
 
-        Controls.Label {
+        Label {
             text: "Margin"
             color: __defaultTextColor
             elide: Text.ElideRight
@@ -99,6 +102,80 @@ RowLayout {
                 backendValue: anchorMargin
             }
 
+            StudioControls.ButtonRow {
+                id: buttonRow
+                actionIndicatorVisible: false
+
+                property variant relativeTarget: anchorBackend.relativeAnchorTargetTop
+
+                onRelativeTargetChanged: {
+
+                    buttonSameEdge.checked = false
+                    buttonCenter.checked = false
+                    buttonOppositeEdge.checked = false
+
+                    if (relativeTarget == AnchorBindingProxy.SameEdge) {
+                        if (!invertRelativeTargets) {
+                            buttonSameEdge.checked = true
+                        } else {
+                            buttonOppositeEdge.checked = true
+                        }
+                    } else if (relativeTarget == AnchorBindingProxy.OppositeEdge) {
+                        if (!invertRelativeTargets) {
+                            buttonOppositeEdge.checked = true
+                        } else {
+                            buttonSameEdge.checked = true
+                        }
+                    } else if (relativeTarget == AnchorBindingProxy.Center) {
+                        buttonCenter.checked = true
+                    }
+                }
+
+                StudioControls.ButtonGroup {
+                    id: group
+                }
+
+                StudioControls.AbstractButton {
+                    id: buttonSameEdge
+                    buttonIcon: verticalAnchor ? StudioTheme.Constants.anchorTop : StudioTheme.Constants.anchorLeft
+                    checkable: true
+                    autoExclusive: true
+                    StudioControls.ButtonGroup.group: group
+                    //tooltip: verticalAnchor ? qsTr("Anchor to the top of the target.") : qsTr("Anchor to the left of the target.")
+                    onClicked: {
+                        if (!invertRelativeTargets)
+                            sameEdgeButtonClicked();
+                        else
+                            oppositeEdgeButtonClicked();
+                    }
+                }
+                StudioControls.AbstractButton {
+                    id: buttonCenter
+                    buttonIcon: verticalAnchor ? StudioTheme.Constants.centerVertical : StudioTheme.Constants.centerHorizontal
+                    checkable: true
+                    autoExclusive: true
+                    StudioControls.ButtonGroup.group: group
+                    //tooltip: verticalAnchor ? qsTr("Anchor to the vertical center of the target.") : qsTr("Anchor to the horizontal center of the target.")
+                    onClicked: centerButtonClicked();
+                }
+                StudioControls.AbstractButton {
+                    id: buttonOppositeEdge
+                    buttonIcon: verticalAnchor ? StudioTheme.Constants.anchorBottom : StudioTheme.Constants.anchorRight
+                    checkable: true
+                    autoExclusive: true
+                    StudioControls.ButtonGroup.group: group
+                    //tooltip: verticalAnchor ? qsTr("Anchor to the bottom of the target.") : qsTr("Anchor to the right of the target.")
+                    onClicked: {
+                        if (!invertRelativeTargets)
+                            oppositeEdgeButtonClicked();
+                        else
+                            sameEdgeButtonClicked();
+                    }
+                }
+            }
+
+
+/*
             ButtonRow {
                 id: buttonRow
 
@@ -157,6 +234,7 @@ RowLayout {
                     }
                 }
             }
+*/
         }
     }
 }

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

@@ -25,21 +25,12 @@
 
 import QtQuick 2.1
 import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Row {
     id: alignmentHorizontalButtons
 
-    RoundedPanel {
-        width: 16
-        height: parent.height
-        roundLeft: true
-        ExtendedFunctionButton {
-            x: 2
-            anchors.verticalCenter: parent.verticalCenter
-            backendValue: alignmentHorizontalButtons.backendValue
-        }
-    }
-
     property bool blueHighlight: false
 
     property variant backendValue: backendValues.horizontalAlignment;
@@ -48,19 +39,20 @@ Row {
 
     property bool baseStateFlag: isBaseState;
 
+    property color __currentColor: blueHighlight ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor
+
     onValueChanged: {
-        buttonRow.initalChecked = 0
+        buttonAlignLeft.checked = true
-        buttonRow.checkedIndex = 0
+        buttonAlignHCenter.checked = false
+        buttonAlignRight.checked = false
+
         if (value !== undefined) {
             if (value === "AlignLeft") {
-                buttonRow.initalChecked = 0
+                buttonAlignLeft.checked = true
-                buttonRow.checkedIndex = 0
             } else if (value === "AlignHCenter") {
-                buttonRow.initalChecked = 1
+                buttonAlignHCenter.checked = true
-                buttonRow.checkedIndex = 1
             } else if (value === "AlignRight") {
-                buttonRow.initalChecked = 2
+                buttonAlignRight.checked = true
-                buttonRow.checkedIndex = 2
             }
         }
         evaluate()
@@ -89,27 +81,54 @@ Row {
         }
     }
 
-    ButtonRow {
+    ExtendedFunctionLogic {
-        id: buttonRow
+        id: extFuncLogic
-        exclusive: true
+        backendValue: alignmentHorizontalButtons.backendValue
+    }
 
-        ButtonRowButton {
+    StudioControls.ButtonRow {
-            roundLeftButton: false
+        id: buttonRow
-            iconSource: "image://icons/alignment-left" + (blueHighlight ? "-h" : "")
+        actionIndicatorVisible: true
+
+        actionIndicator.icon.color: extFuncLogic.color
+        actionIndicator.icon.text: extFuncLogic.glyph
+        actionIndicator.onClicked: extFuncLogic.show()
+
+        StudioControls.ButtonGroup {
+            id: group
+        }
+
+        StudioControls.AbstractButton {
+            id: buttonAlignLeft
+            buttonIcon: StudioTheme.Constants.textAlignLeft
+            checkable: true
+            autoExclusive: true
+            StudioControls.ButtonGroup.group: group
+            iconColor: __currentColor
             onClicked: {
                 if (checked)
                     backendValue.setEnumeration("Text", "AlignLeft")
             }
         }
-        ButtonRowButton {
+        StudioControls.AbstractButton {
-            iconSource: "image://icons/alignment-center" + (blueHighlight ? "-h" : "")
+            id: buttonAlignHCenter
+            buttonIcon: StudioTheme.Constants.textAlignCenter
+            checkable: true
+            autoExclusive: true
+            StudioControls.ButtonGroup.group: group
+            iconColor: __currentColor
             onClicked: {
                 if (checked)
                     backendValue.setEnumeration("Text", "AlignHCenter")
             }
         }
-        ButtonRowButton {
+        StudioControls.AbstractButton {
-            iconSource: "image://icons/alignment-right" + (blueHighlight ? "-h" : "")
+            id: buttonAlignRight
+            buttonIcon: StudioTheme.Constants.textAlignRight
+            checkable: true
+            autoExclusive: true
+            StudioControls.ButtonGroup.group: group
+            iconColor: __currentColor
             onClicked: {
                 if (checked)
                     backendValue.setEnumeration("Text", "AlignRight")

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

@@ -25,22 +25,12 @@
 
 import QtQuick 2.1
 import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Row {
     id: alignmentVerticalButtons
 
-    RoundedPanel {
-        width: 16
-        height: parent.height
-        roundLeft: true
-
-        ExtendedFunctionButton {
-            x: 2
-            anchors.verticalCenter: parent.verticalCenter
-            backendValue: alignmentVerticalButtons.backendValue
-        }
-    }
-
     property bool blueHighlight: false
 
     property variant backendValue: backendValues.verticalAlignment;
@@ -49,19 +39,20 @@ Row {
 
     property bool baseStateFlag: isBaseState;
 
+    property color __currentColor: blueHighlight ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor
+
     onValueChanged: {
-        buttonRow.initalChecked = 0
+        buttonAlignTop.checked = true
-        buttonRow.checkedIndex = 0
+        buttonAlignVCenter.checked = false
+        buttonAlignBottom.checked = false
+
         if (value !== undefined) {
             if (value === "AlignTop") {
-                buttonRow.initalChecked = 0
+                buttonAlignTop.checked = true
-                buttonRow.checkedIndex = 0
             } else if (value === "AlignVCenter") {
-                buttonRow.initalChecked = 1
+                buttonAlignVCenter.checked = true
-                buttonRow.checkedIndex = 1
             } else if (value === "AlignBottom") {
-                buttonRow.initalChecked = 2
+                buttonAlignBottom.checked = true
-                buttonRow.checkedIndex = 2
             }
         }
         evaluate()
@@ -90,27 +81,54 @@ Row {
         }
     }
 
-    ButtonRow {
+    ExtendedFunctionLogic {
-        id: buttonRow
+        id: extFuncLogic
-        exclusive: true
+        backendValue: alignmentVerticalButtons.backendValue
+    }
 
-        ButtonRowButton {
+    StudioControls.ButtonRow {
-            roundLeftButton: false
+        id: buttonRow
-            iconSource: "image://icons/alignment-top" + (blueHighlight ? "-h" : "")
+        actionIndicatorVisible: true
+
+        actionIndicator.icon.color: extFuncLogic.color
+        actionIndicator.icon.text: extFuncLogic.glyph
+        actionIndicator.onClicked: extFuncLogic.show()
+
+        StudioControls.ButtonGroup {
+            id: group
+        }
+
+        StudioControls.AbstractButton {
+            id: buttonAlignTop
+            buttonIcon: StudioTheme.Constants.textAlignTop
+            checkable: true
+            autoExclusive: true
+            StudioControls.ButtonGroup.group: group
+            iconColor: __currentColor
             onClicked: {
                 if (checked)
                     backendValue.setEnumeration("Text", "AlignTop")
             }
         }
-        ButtonRowButton {
+        StudioControls.AbstractButton {
-            iconSource: "image://icons/alignment-middle" + (blueHighlight ? "-h" : "")
+            id: buttonAlignVCenter
+            buttonIcon: StudioTheme.Constants.textAlignMiddle
+            checkable: true
+            autoExclusive: true
+            StudioControls.ButtonGroup.group: group
+            iconColor: __currentColor
             onClicked: {
                 if (checked)
                     backendValue.setEnumeration("Text", "AlignVCenter")
             }
         }
-        ButtonRowButton {
+        StudioControls.AbstractButton {
-            iconSource: "image://icons/alignment-bottom" + (blueHighlight ? "-h" : "")
+            id: buttonAlignBottom
+            buttonIcon: StudioTheme.Constants.textAlignBottom
+            checkable: true
+            autoExclusive: true
+            StudioControls.ButtonGroup.group: group
+            iconColor: __currentColor
             onClicked: {
                 if (checked)
                     backendValue.setEnumeration("Text", "AlignBottom")

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

@@ -25,23 +25,32 @@
 
 import QtQuick 2.1
 import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+StudioControls.ButtonRow {
+    id: buttonRow
 
-ButtonRow {
     enabled: anchorBackend.hasParent
     opacity: enabled ? 1 : 0.5
 
-    id: buttonRow
+    actionIndicatorVisible: false
 
-    ButtonRowButton {
+    StudioControls.ButtonGroup {
-        iconSource: "image://icons/anchor-top"
+        id: group
-        tooltip: qsTr("Anchor item to the top.")
+    }
+
+    StudioControls.AbstractButton {
+        checkable: true
+        buttonIcon: StudioTheme.Constants.anchorTop
+        //tooltip: qsTr("Anchor item to the top.")
 
         property bool topAnchored: anchorBackend.topAnchored
         onTopAnchoredChanged: {
             checked = topAnchored
         }
 
-        onClicked:  {
+        onClicked: {
             if (checked) {
                 if (anchorBackend.bottomAnchored)
                     anchorBackend.verticalCentered = false;
@@ -52,9 +61,10 @@ ButtonRow {
         }
     }
 
-    ButtonRowButton {
+    StudioControls.AbstractButton {
-        iconSource: "image://icons/anchor-bottom"
+        checkable: true
-        tooltip: qsTr("Anchor item to the bottom.")
+        buttonIcon: StudioTheme.Constants.anchorBottom
+        //tooltip: qsTr("Anchor item to the bottom.")
 
         property bool bottomAnchored: anchorBackend.bottomAnchored
         onBottomAnchoredChanged: {
@@ -73,9 +83,10 @@ ButtonRow {
 
     }
 
-    ButtonRowButton {
+    StudioControls.AbstractButton {
-        iconSource: "image://icons/anchor-left"
+        checkable: true
-        tooltip: qsTr("Anchor item to the left.")
+        buttonIcon: StudioTheme.Constants.anchorLeft
+        //tooltip: qsTr("Anchor item to the left.")
 
         property bool leftAnchored: anchorBackend.leftAnchored
         onLeftAnchoredChanged: {
@@ -93,9 +104,10 @@ ButtonRow {
         }
     }
 
-    ButtonRowButton {
+    StudioControls.AbstractButton {
-        iconSource: "image://icons/anchor-right"
+        checkable: true
-        tooltip: qsTr("Anchor item to the right.")
+        buttonIcon: StudioTheme.Constants.anchorRight
+        //tooltip: qsTr("Anchor item to the right.")
 
         property bool rightAnchored: anchorBackend.rightAnchored
         onRightAnchoredChanged: {
@@ -113,14 +125,15 @@ ButtonRow {
         }
     }
 
-    ButtonRowButton {
+    StudioControls.AbstractButton {
         enabled: false
     }
 
 
-    ButtonRowButton {
+    StudioControls.AbstractButton {
-        iconSource: "image://icons/anchor-fill"
+        checkable: true
-        tooltip: qsTr("Fill parent item.")
+        buttonIcon: StudioTheme.Constants.anchorFill
+        //tooltip: qsTr("Fill parent item.")
 
         property bool isFilled: anchorBackend.isFilled
         onIsFilledChanged: {
@@ -136,13 +149,14 @@ ButtonRow {
         }
     }
 
-    ButtonRowButton {
+    StudioControls.AbstractButton {
         enabled: false
     }
 
-    ButtonRowButton {
+    StudioControls.AbstractButton {
-        iconSource: "image://icons/anchor-vertical"
+        checkable: true
-        tooltip: qsTr("Anchor item vertically.")
+        buttonIcon: StudioTheme.Constants.centerVertical
+        //tooltip: qsTr("Anchor item vertically.")
 
         property bool verticalCentered: anchorBackend.verticalCentered;
         onVerticalCenteredChanged: {
@@ -162,9 +176,10 @@ ButtonRow {
         }
     }
 
-    ButtonRowButton {
+    StudioControls.AbstractButton {
-        iconSource: "image://icons/anchor-horizontal"
+        checkable: true
-        tooltip: qsTr("Anchor item horizontally.")
+        buttonIcon: StudioTheme.Constants.centerHorizontal
+        //tooltip: qsTr("Anchor item horizontally.")
 
         property bool horizontalCentered: anchorBackend.horizontalCentered;
         onHorizontalCenteredChanged: {

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

@@ -25,33 +25,31 @@
 
 import QtQuick 2.1
 import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
-ButtonRowButton {
+StudioControls.Button {
-    id: boolButtonRowButton
+    id: button
 
     property variant backendValue
-
     property bool isHighlighted: false
 
-    property string standardIconSource
+    iconColor: isHighlighted ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor
-    property string highlightedIconSource
+    actionIndicatorVisible: true
-
+    checkable: true
-    leftPadding: 18
-
-    iconSource: isHighlighted ? highlightedIconSource : standardIconSource
 
     QtObject {
         id: innerObject
         function evaluate() {
             if (innerObject.baseStateFlag) {
-                if (boolButtonRowButton.backendValue !== null
+                if (button.backendValue !== null
                         && innerObject.isInModel) {
                     isHighlighted = true
                 } else {
                     isHighlighted = false
                 }
             } else {
-                if (boolButtonRowButton.backendValue !== null
+                if (button.backendValue !== null
                         && innerObject.isInSubState) {
                     isHighlighted = true
                 } else {
@@ -63,27 +61,30 @@ ButtonRowButton {
         property bool baseStateFlag: isBaseState
         onBaseStateFlagChanged: evaluate()
 
-        property bool isInModel: boolButtonRowButton.backendValue.isInModel
+        property bool isInModel: button.backendValue.isInModel
         onIsInModelChanged: evaluate()
 
 
-        property bool isInSubState: boolButtonRowButton.backendValue.isInSubState
+        property bool isInSubState: button.backendValue.isInSubState
         onIsInSubStateChanged: evaluate()
 
-        property variant theValue: boolButtonRowButton.backendValue.value
+        property variant theValue: button.backendValue.value
         onTheValueChanged: {
             evaluate()
-            boolButtonRowButton.checked = innerObject.theValue
+            button.checked = innerObject.theValue
         }
     }
 
     onCheckedChanged: {
-        boolButtonRowButton.backendValue.value = checked
+        button.backendValue.value = button.checked
     }
 
-    ExtendedFunctionButton {
+    ExtendedFunctionLogic {
-        backendValue: boolButtonRowButton.backendValue
+        id: extFuncLogic
-        x: 2
+        backendValue: button.backendValue
-        anchors.verticalCenter: parent.verticalCenter
     }
+
+    actionIndicator.icon.color: extFuncLogic.color
+    actionIndicator.icon.text: extFuncLogic.glyph
+    actionIndicator.onClicked: extFuncLogic.show()
 }

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

@@ -24,10 +24,10 @@
 ****************************************************************************/
 
 import QtQuick 2.1
-import StudioControls 1.0 as Controls
+import StudioControls 1.0 as StudioControls
 import QtQuick.Controls.Styles 1.1
 
-Controls.CheckBox {
+StudioControls.CheckBox {
     id: checkBox
 
     property variant backendValue
@@ -47,14 +47,14 @@ Controls.CheckBox {
         id: colorLogic
         backendValue: checkBox.backendValue
         onValueFromBackendChanged: {
-            if (checkBox.checked !== colorLogic.valueFromBackend)
+            if (colorLogic.valueFromBackend !== undefined
-                checkBox.checked = colorLogic.valueFromBackend;
+                    && checkBox.checked !== colorLogic.valueFromBackend)
+                checkBox.checked = colorLogic.valueFromBackend
         }
     }
 
     onCheckedChanged: {
         if (backendValue.value !== checkBox.checked)
-            backendValue.value = checkBox.checked;
+            backendValue.value = checkBox.checked
     }
-
 }

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

@@ -28,20 +28,21 @@ import QtQuick.Controls 1.1 as Controls
 import QtQuick.Controls.Styles 1.0
 import QtQuickDesignerTheme 1.0
 import "Constants.js" as Constants
+import StudioTheme 1.0 as StudioTheme
 
 QtObject {
     id: innerObject
 
     property variant backendValue
-    property color textColor: Theme.color(Theme.PanelTextColorLight)
+    property color textColor: StudioTheme.Values.themeTextColor//Theme.color(Theme.PanelTextColorLight)
     property variant valueFromBackend: backendValue.value;
     property bool baseStateFlag: isBaseState;
     property bool isInModel: backendValue.isInModel;
     property bool isInSubState: backendValue.isInSubState;
     property bool highlight: textColor === __changedTextColor
 
-    property color __defaultTextColor: Theme.color(Theme.PanelTextColorLight)
+    property color __defaultTextColor: StudioTheme.Values.themeTextColor//Theme.color(Theme.PanelTextColorLight)
-    readonly property color __changedTextColor: Theme.color(Theme.QmlDesigner_HighlightColor)
+    readonly property color __changedTextColor: StudioTheme.Values.themeInteraction//Theme.color(Theme.QmlDesigner_HighlightColor)
 
     onBackendValueChanged: {
         evaluate();

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

@@ -24,15 +24,16 @@
 ****************************************************************************/
 
 import QtQuick 2.1
-import StudioControls 1.0 as Controls
 import QtQuick.Controls.Styles 1.1
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
-Controls.ComboBox {
+StudioControls.ComboBox {
     id: comboBox
 
     property variant backendValue
 
-    labelColor: colorLogic.textColor
+    labelColor: edit ? StudioTheme.Values.themeTextColor : colorLogic.textColor
     property string scope: "Qt"
 
     property bool useInteger: false

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

@@ -54,7 +54,7 @@ Item {
                 // translations are a special case
                 extendedFunctionButton.glyph = StudioTheme.Constants.actionIcon
             } else {
-                extendedFunctionButton.glyph = StudioTheme.Constants.closeCross
+                extendedFunctionButton.glyph = StudioTheme.Constants.actionIconBinding
                 extendedFunctionButton.color = StudioTheme.Values.themeInteraction
             }
         } else {

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

@@ -25,6 +25,7 @@
 
 import QtQuick 2.1
 import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
 
 ButtonRow {
 
@@ -34,25 +35,31 @@ ButtonRow {
     property variant strikeout: backendValues.font_strikeout
 
     BoolButtonRowButton {
-        standardIconSource: "image://icons/style-bold"
+        buttonIcon: StudioTheme.Constants.fontStyleBold
-        highlightedIconSource: "image://icons/style-bold-h"
         backendValue: bold
     }
+    Item {
+        width: 4
+        height: 4
+    }
     BoolButtonRowButton {
-        standardIconSource: "image://icons/style-italic"
+        buttonIcon: StudioTheme.Constants.fontStyleItalic
-        highlightedIconSource: "image://icons/style-italic-h"
         backendValue: italic
     }
+    Item {
+        width: 4
+        height: 4
+    }
     BoolButtonRowButton {
-        standardIconSource: "image://icons/style-underline"
+        buttonIcon: StudioTheme.Constants.fontStyleUnderline
-        highlightedIconSource: "image://icons/style-underline-h"
         backendValue: underline
     }
-
+    Item {
+        width: 4
+        height: 4
+    }
     BoolButtonRowButton {
-        standardIconSource: "image://icons/style-strikeout"
+        buttonIcon: StudioTheme.Constants.fontStyleStrikethrough
-        highlightedIconSource: "image://icons/style-strikeout-h"
         backendValue: strikeout
     }
-
 }

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

@@ -24,17 +24,18 @@
 ****************************************************************************/
 
 import QtQuick 2.2
-import StudioControls 1.0 as Controls
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 import QtQuick.Controls.Styles 1.0
 import QtQuickDesignerTheme 1.0
 
-Controls.TextField {
+StudioControls.TextField {
     id: lineEdit
 
     property variant backendValue
     property color borderColor: "#222"
     property color highlightColor: "orange"
-    color: colorLogic.textColor
+    color: lineEdit.edit ? StudioTheme.Values.themeTextColor : colorLogic.textColor
 
     property bool showTranslateCheckBox: true
     translationIndicatorVisible: showTranslateCheckBox

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

@@ -26,6 +26,7 @@
 import QtQuick 2.1
 import QtQuick.Controls.Styles 1.1
 import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Item {
     id: wrapper
@@ -91,7 +92,7 @@ Item {
             }
         }
 
-        labelColor: colorLogic.textColor
+        labelColor: edit ? StudioTheme.Values.themeTextColor : colorLogic.textColor
 
         onCompressedValueModified: {
             if (backendValue.value !== realValue)

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

@@ -31,6 +31,7 @@ T.AbstractButton {
     id: myButton
 
     property alias buttonIcon: buttonIcon.text
+    property alias iconColor: buttonIcon.color
     property alias backgroundVisible: buttonBackground.visible
 
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,

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

@@ -31,9 +31,14 @@ ButtonRow {
     id: myButtonRow
 
     property alias buttonIcon: myAbstractButton.buttonIcon
+    property alias iconColor: myAbstractButton.iconColor
     property alias checkable: myAbstractButton.checkable
+    property alias checked: myAbstractButton.checked
+
+    signal onCheckedChanged()
 
     AbstractButton {
         id: myAbstractButton
+        onCheckedChanged: myButtonRow.onCheckedChanged()
     }
 }

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

@@ -32,9 +32,8 @@ Row {
     // TODO When using Item as root it won't react to outer layout
     id: myButtonGroup
 
-    property alias actionIcon: actionIndicator.icon
+    property alias actionIndicator: actionIndicator
 
-    //property bool hover: myCheckBox.hovered // TODO
     property alias actionIndicatorVisible: actionIndicator.visible
     property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth
     property real __actionIndicatorHeight: StudioTheme.Values.height

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

@@ -108,8 +108,7 @@ Item {
 
             PropertyChanges {
                 target: translationIndicatorBackground
-                //color: StudioTheme.Values.themeFocusDrag // TODO
+                color: StudioTheme.Values.themeInteraction // TODO
-                color: "red"
             }
         },
         State {

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Constants.qml

@@ -37,24 +37,30 @@ QtObject {
     }
 
     readonly property string actionIcon: "\u0021"
-    readonly property string anchorBottom: "\u0022"
+    readonly property string actionIconBinding: "\u0022"
-    readonly property string anchorFill: "\u0023"
+    readonly property string anchorBaseline: "\u0023"
-    readonly property string anchorLeft: "\u0024"
+    readonly property string anchorBottom: "\u0024"
-    readonly property string anchorRight: "\u0025"
+    readonly property string anchorFill: "\u0025"
-    readonly property string anchorTop: "\u0026"
+    readonly property string anchorLeft: "\u0026"
-    readonly property string centerHorizontal: "\u0027"
+    readonly property string anchorRight: "\u0027"
-    readonly property string centerVertical: "\u0028"
+    readonly property string anchorTop: "\u0028"
-    readonly property string closeCross: "\u0029"
+    readonly property string centerHorizontal: "\u0029"
-    readonly property string fontStyleBold: "\u002A"
+    readonly property string centerVertical: "\u002A"
-    readonly property string fontStyleItalic: "\u002B"
+    readonly property string closeCross: "\u002B"
-    readonly property string fontStyleStrikethrough: "\u002C"
+    readonly property string fontStyleBold: "\u002C"
-    readonly property string fontStyleUnderline: "\u002D"
+    readonly property string fontStyleItalic: "\u002D"
-    readonly property string textAlignCenter: "\u002E"
+    readonly property string fontStyleStrikethrough: "\u002E"
-    readonly property string textAlignLeft: "\u002F"
+    readonly property string fontStyleUnderline: "\u002F"
-    readonly property string textAlignRight: "\u0030"
+    readonly property string textAlignBottom: "\u0030"
-    readonly property string tickIcon: "\u0031"
+    readonly property string textAlignCenter: "\u0031"
-    readonly property string upDownIcon: "\u0032"
+    readonly property string textAlignLeft: "\u0032"
-    readonly property string upDownSquare2: "\u0033"
+    readonly property string textAlignMiddle: "\u0033"
+    readonly property string textAlignRight: "\u0034"
+    readonly property string textAlignTop: "\u0035"
+    readonly property string tickIcon: "\u0036"
+    readonly property string triState: "\u0037"
+    readonly property string upDownIcon: "\u0038"
+    readonly property string upDownSquare2: "\u0039"
 
     readonly property font iconFont: Qt.font({
                                                  "family": controlIcons.name,