QmlDesigner: Pill redesign

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

share/qtcreator/qmldesigner/connectionseditor/Pill.qml

@@ -33,15 +33,10 @@ FocusScope {
     readonly property int margin: StudioTheme.Values.flowPillMargin
     property var operatorModel
 
-    width: {
+    property bool hovered: rootMouseArea.containsMouse
-        if (root.isEditable()) {
+    property bool selected: root.focus
-            if (root.isInvalid())
+
-                return textInput.width + 1 + 2 * root.margin
+    width: row.width
-            else
-                return textInput.width + 1
-        }
-        return textItem.contentWidth + icon.width + root.margin
-    }
     height: StudioTheme.Values.flowPillHeight
 
     onActiveFocusChanged: {
@@ -69,14 +64,34 @@ FocusScope {
         id: pill
         anchors.fill: parent
         color: {
-            if (root.isShadow())
+            if (root.isIntermediate())
-                return StudioTheme.Values.themeInteraction
-            if (root.isEditable())
                 return "transparent"
 
-            return StudioTheme.Values.themePillBackground
+            if (root.isShadow())
+                return StudioTheme.Values.themePillShadowBackground
+
+            if (root.isInvalid() && root.selected)
+                return StudioTheme.Values.themeWarning
+
+            if (root.hovered) {
+                if (root.isOperator())
+                    return StudioTheme.Values.themePillOperatorBackgroundHover
+                if (root.isLiteral())
+                    return StudioTheme.Values.themePillLiteralBackgroundHover
+
+                return StudioTheme.Values.themePillDefaultBackgroundHover
+            }
+
+            if (root.isLiteral())
+                return StudioTheme.Values.themePillLiteralBackgroundIdle
+
+            if (root.isOperator())
+                return StudioTheme.Values.themePillOperatorBackgroundIdle
+
+            return StudioTheme.Values.themePillDefaultBackgroundIdle
         }
-        border.color: root.isInvalid() ? StudioTheme.Values.themeWarning : "white" // TODO colors
+        border.color: root.isInvalid() ? StudioTheme.Values.themeWarning
+                                       : StudioTheme.Values.themePillOutline
         border.width: {
             if (root.isShadow())
                 return 0
@@ -84,7 +99,7 @@ FocusScope {
                  return 1
             if (root.isEditable())
                 return 0
-            if (rootMouseArea.containsMouse || root.focus)
+            if (root.selected)
                 return 1
 
             return 0
@@ -93,31 +108,60 @@ FocusScope {
 
         Row {
             id: row
-            anchors.left: parent.left
+            leftPadding: root.margin
-            anchors.leftMargin: root.margin
+            rightPadding: icon.visible ? 0 : root.margin
-            anchors.verticalCenter: parent.verticalCenter
-            visible: root.isOperator() || root.isProperty() || root.isShadow()
 
             Text {
                 id: textItem
+                height: StudioTheme.Values.flowPillHeight
+                verticalAlignment: Text.AlignVCenter
                 font.pixelSize: StudioTheme.Values.baseFontSize
                 color: root.isShadow() ? StudioTheme.Values.themeTextSelectedTextColor
                                        : StudioTheme.Values.themeTextColor
                 text: root.isOperator() ? root.operatorModel.convertValueToName(root.value)
                                         : root.value
-                anchors.verticalCenter: parent.verticalCenter
+                visible: root.isOperator() || root.isProperty() || root.isShadow()
+            }
+
+            TextInput {
+                id: textInput
+
+                x: root.isInvalid() ? root.margin : 0
+                height: StudioTheme.Values.flowPillHeight
+                topPadding: 1
+                font.pixelSize: StudioTheme.Values.baseFontSize
+                color: root.isInvalid() && root.selected ? StudioTheme.Values.themeTextSelectedTextColor
+                                                         : StudioTheme.Values.themeTextColor
+                text: root.value
+                visible: !textItem.visible
+                enabled: root.isEditable()
+
+                onEditingFinished: {
+                    root.update(textInput.text) // emit
+                    root.submit(textInput.cursorPosition) // emit
+                }
+
+                Keys.onPressed: function (event) {
+                    if (event.key === Qt.Key_Backspace) {
+                        if (textInput.text !== "")
+                            return
+
+                        root.remove() // emit
+                    }
+                }
             }
 
             Item {
                 id: icon
-                width: root.isShadow() ? root.margin : StudioTheme.Values.flowPillHeight
+                width: StudioTheme.Values.flowPillHeight
                 height: StudioTheme.Values.flowPillHeight
-                visible: !root.isShadow()
+                visible: !root.isShadow() && !root.isIntermediate()
 
                 Text {
                     font.family: StudioTheme.Constants.iconFont.family
                     font.pixelSize: StudioTheme.Values.smallIconFontSize
-                    color: StudioTheme.Values.themeIconColor
+                    color: root.isInvalid() && root.selected ? StudioTheme.Values.themeTextSelectedTextColor
+                                                             : StudioTheme.Values.themeTextColor
                     text: StudioTheme.Constants.close_small
                     anchors.centerIn: parent
                 }
@@ -129,35 +173,5 @@ FocusScope {
                 }
             }
         }
-
-        TextInput {
-            id: textInput
-
-            x: root.isInvalid() ? root.margin : 0
-            height: StudioTheme.Values.flowPillHeight
-            topPadding: 1
-            font.pixelSize: StudioTheme.Values.baseFontSize
-            color: (rootMouseArea.containsMouse || textInput.activeFocus) ? StudioTheme.Values.themeIconColor
-                                                                          : StudioTheme.Values.themeTextColor
-            text: root.value
-            visible: root.isEditable()
-            enabled: root.isEditable()
-
-            //validator: RegularExpressionValidator { regularExpression: /^\S+/ }
-
-            onEditingFinished: {
-                root.update(textInput.text) // emit
-                root.submit(textInput.cursorPosition) // emit
-            }
-
-            Keys.onPressed: function (event) {
-                if (event.key === Qt.Key_Backspace) {
-                    if (textInput.text !== "")
-                        return
-
-                    root.remove() // emit
-                }
-            }
-        }
     }
 }

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

@@ -442,7 +442,16 @@ QtObject {
     property color themeDialogOutline: values.themeInteraction
 
     // Expression Builder
-    property color themePillBackground: Theme.color(Theme.DSdockWidgetSplitter)
+    property color themePillDefaultBackgroundIdle: "#ff000000"
+    property color themePillDefaultBackgroundHover: "#ff2c2c2c"
+    property color themePillOperatorBackgroundIdle: "#ff6b2a7b"
+    property color themePillOperatorBackgroundHover: "#ff7e478b"
+    property color themePillLiteralBackgroundIdle: "#ffb2005c"
+    property color themePillLiteralBackgroundHover: "#ffb24e81"
+
+    property color themePillShadowBackground: values.themeInteraction
+
+    property color themePillOutline: "#ffffffff"
 
 
     // Control Style Mapping