QmlDesigner: Design fixes for connections popout

Change-Id: I06968cfef23f8b296f1ba6b07e57cdc96701447b
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>

share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml

@@ -11,7 +11,7 @@ Column {
     id: root
 
     readonly property real horizontalSpacing: 10
-    readonly property real verticalSpacing: 16
+    readonly property real verticalSpacing: 12
     readonly property real columnWidth: (root.width - root.horizontalSpacing) / 2
 
     property var backend
@@ -217,7 +217,7 @@ Column {
         id: editor
         width: parent.width
         height: 150
-        color: StudioTheme.Values.themeToolbarBackground
+        color: StudioTheme.Values.themeConnectionCodeEditor
 
         Text {
             id: code

share/qtcreator/qmldesigner/connectionseditor/Pill.qml

@@ -116,8 +116,8 @@ FocusScope {
                 height: StudioTheme.Values.flowPillHeight
                 verticalAlignment: Text.AlignVCenter
                 font.pixelSize: StudioTheme.Values.baseFontSize
-                color: root.isShadow() ? StudioTheme.Values.themeTextSelectedTextColor
+                color: root.isShadow() ? StudioTheme.Values.themePillTextSelected
-                                       : StudioTheme.Values.themeTextColor
+                                       : StudioTheme.Values.themePillText
                 text: root.isOperator() ? root.operatorModel.convertValueToName(root.value)
                                         : root.value
                 visible: root.isOperator() || root.isProperty() || root.isShadow()
@@ -130,8 +130,17 @@ FocusScope {
                 height: StudioTheme.Values.flowPillHeight
                 topPadding: 1
                 font.pixelSize: StudioTheme.Values.baseFontSize
-                color: root.isInvalid() && root.selected ? StudioTheme.Values.themeTextSelectedTextColor
+                color: {
-                                                         : StudioTheme.Values.themeTextColor
+                    if (root.isIntermediate())
+                        return StudioTheme.Values.themePillTextEdit
+                    if (root.isInvalid() && root.selected)
+                        return StudioTheme.Values.themePillTextSelected
+                    return StudioTheme.Values.themePillText
+                }
+
+                selectedTextColor:StudioTheme.Values.themePillTextSelected
+                selectionColor: StudioTheme.Values.themeInteraction
+
                 text: root.value
                 visible: !textItem.visible
                 enabled: root.isEditable()
@@ -160,8 +169,8 @@ FocusScope {
                 Text {
                     font.family: StudioTheme.Constants.iconFont.family
                     font.pixelSize: StudioTheme.Values.smallIconFontSize
-                    color: root.isInvalid() && root.selected ? StudioTheme.Values.themeTextSelectedTextColor
+                    color: root.isInvalid() && root.selected ? StudioTheme.Values.themePillTextSelected
-                                                             : StudioTheme.Values.themeTextColor
+                                                             : StudioTheme.Values.themePillText
                     text: StudioTheme.Constants.close_small
                     anchors.centerIn: parent
                 }

share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml

@@ -14,11 +14,16 @@ Window {
     default property alias content: mainContent.children
     property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
 
-    width: 320
+    width: 300
     height: column.implicitHeight
     visible: true
     flags: Qt.FramelessWindowHint | Qt.Dialog
-    color: StudioTheme.Values.themePopoutBackground
+
+        Rectangle {
+            anchors.fill: parent
+            color: StudioTheme.Values.themePopoutBackground
+            border.color: "#636363"//StudioTheme.Values.themeTextColor
+        }
 
     function ensureVerticalPosition() {
         if ((window.y + window.height) > (Screen.height - window.style.dialogScreenMargin)) {

share/qtcreator/qmldesigner/connectionseditor/SuggestionPopup.qml

@@ -71,7 +71,7 @@ Controls.Popup {
                     width: stack.width
                     height: 30
                     visible: root.listModel.parentName !== ""
-                    color: backMouseArea.containsMouse ? "#4DBFFF" : "transparent"
+                    color: backMouseArea.containsMouse ? StudioTheme.Values.themeInteraction : "transparent"
 
                     MouseArea {
                         id: backMouseArea
@@ -95,7 +95,8 @@ Controls.Popup {
                                 id: chevronLeft
                                 font.family: StudioTheme.Constants.iconFont.family
                                 font.pixelSize: root.style.baseIconFontSize
-                                color: backMouseArea.containsMouse ? "#111111" : "white" // TODO colors
+                                color: backMouseArea.containsMouse ? StudioTheme.Values.themeTextSelectedTextColor
+                                                                   : StudioTheme.Values.themeTextColor
                                 text: StudioTheme.Constants.back_medium
                                 anchors.centerIn: parent
                             }
@@ -104,7 +105,8 @@ Controls.Popup {
                         Text {
                             anchors.verticalCenter: parent.verticalCenter
                             text: root.listModel.parentName
-                            color: backMouseArea.containsMouse ? "#111111" : "white" // TODO colors
+                            color: backMouseArea.containsMouse ? StudioTheme.Values.themeTextSelectedTextColor
+                                                               : StudioTheme.Values.themeTextColor
                             horizontalAlignment: Text.AlignLeft
                             verticalAlignment: Text.AlignVCenter
                             elide: Text.ElideRight
@@ -272,12 +274,9 @@ Controls.Popup {
 
                         width: textItem.contentWidth + 2 * StudioTheme.Values.flowPillMargin
                         height: StudioTheme.Values.flowPillHeight
-                        color: "#161616"
+                        color: mouseArea.containsMouse ? StudioTheme.Values.themePillOperatorBackgroundHover
+                                                       : StudioTheme.Values.themePillOperatorBackgroundIdle
                         radius: StudioTheme.Values.flowPillRadius
-                        border {
-                            color: "white"
-                            width: mouseArea.containsMouse ? 1 : 0
-                        }
 
                         HelperWidgets.ToolTipArea {
                             id: mouseArea
@@ -291,7 +290,7 @@ Controls.Popup {
                         Text {
                             id: textItem
                             font.pixelSize: StudioTheme.Values.baseFontSize
-                            color: StudioTheme.Values.themeTextColor
+                            color: StudioTheme.Values.themePillText
                             text: delegate.name
                             anchors.centerIn: parent
                         }

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

@@ -221,7 +221,7 @@ QtObject {
     property real colorEditorPopupSpinBoxWidth: 54
 
     // Popup Window
-    property real titleBarHeight: values.height + 10
+    property real titleBarHeight: values.height + 20
     property real popupMargin: 10
 
     // Toolbar
@@ -339,6 +339,7 @@ QtObject {
     // Panels & Panes
     property color themeBackgroundColorNormal: Theme.color(Theme.DSBackgroundColorNormal)
     property color themeBackgroundColorAlternate: Theme.color(Theme.DSBackgroundColorAlternate)
+    property color themeConnectionCodeEditor: Theme.color(Theme.DSconnectionCodeEditor)
 
     // Text colors
     property color themeTextColor: Theme.color(Theme.DStextColor)
@@ -442,17 +443,23 @@ QtObject {
     property color themeDialogOutline: values.themeInteraction
 
     // Expression Builder
-    property color themePillDefaultBackgroundIdle: "#ff000000"
+    property color themePillDefaultBackgroundIdle: Theme.color(Theme.DSpillDefaultBackgroundIdle)
-    property color themePillDefaultBackgroundHover: "#ff2c2c2c"
+    property color themePillDefaultBackgroundHover: Theme.color(Theme.DSpillDefaultBackgroundHover)
-    property color themePillOperatorBackgroundIdle: "#ff6b2a7b"
+    property color themePillOperatorBackgroundIdle: Theme.color(Theme.DSpillOperatorBackgroundIdle)
-    property color themePillOperatorBackgroundHover: "#ff7e478b"
+    property color themePillOperatorBackgroundHover: Theme.color(Theme.DSpillOperatorBackgroundHover)
-    property color themePillLiteralBackgroundIdle: "#ffb2005c"
+    property color themePillLiteralBackgroundIdle: Theme.color(Theme.DSpillLiteralBackgroundIdle)
-    property color themePillLiteralBackgroundHover: "#ffb24e81"
+    property color themePillLiteralBackgroundHover: Theme.color(Theme.DSpillLiteralBackgroundHover)
 
     property color themePillShadowBackground: values.themeInteraction
 
     property color themePillOutline: "#ffffffff"
 
+    property color themePillText: Theme.color(Theme.DSpillText)
+    property color themePillTextSelected: Theme.color(Theme.DSpillTextSelected)
+    property color themePillTextEdit: Theme.color(Theme.DspillTextEdit)
+
+
+
 
     // Control Style Mapping
     property ControlStyle controlStyle: DefaultStyle {}

share/qtcreator/themes/dark.creatortheme

@@ -75,9 +75,44 @@ DSstateBackgroundColor_hover=ashGrey
 DSstateControlBackgroundColor_globalHover=ashGrey
 DSstateControlBackgroundColor_hover=raincloudGrey
 DSpanelBackground=dawnGrey
-;END NEW FOR QtDS 4.0
 
-DSpanelBackground=dawnGrey
+;4.3
+DSpopoutBackground=offBlack
+DSpopoutControlBackground_idle=offBlack
+DSpopoutControlBackground_hover=dawnGrey
+DSpopoutControlBackground_globalHover=dawnGrey
+DSpopoutControlBackground_interaction=highlightBlue
+DSpopoutControlBackground_disabled=offBlack
+DSpopoutPopupBackground=nearBlack
+
+DSpopoutControlBorder_idle=midnightGrey
+DSpopoutControlBorder_hover=raincloudGrey
+DSpopoutControlBorder_interaction=highlightBlue
+DSpopoutControlBorder_disabled=offBlack
+
+DSpopoutButtonBackground_idle=offBlack
+DSpopoutButtonBackground_hover=dawnGrey
+DSpopoutButtonBackground_interaction=highlightBlue
+DSpopoutButtonBackground_disabled=offBlack
+
+DSpopoutButtonBorder_idle=slateGrey
+DSpopoutButtonBorder_hover=lightWhite
+DSpopoutButtonBorder_interaction=highlightBlue
+DSpopoutButtonBorder_disabled=offBlack
+
+;4.4
+DSconnectionCodeEditor=midnightGrey
+DSpillText=fullWhite
+DSpillTextSelected=fullBlack
+DspillTextEdit=fullWhite
+DSpillDefaultBackgroundIdle=graniteGrey
+DSpillDefaultBackgroundHover=raincloudGrey
+DSpillOperatorBackgroundIdle=ff6b2a7b
+DSpillOperatorBackgroundHover=ff7e478b
+DSpillLiteralBackgroundIdle=ff447953
+DSpillLiteralBackgroundHover=ff61866B
+
+;END NEW FOR QtDS 4
 
 DSwelcomeScreenBackground=ff242424
 DSsubPanelBackground=ff1c1c1c

share/qtcreator/themes/default.creatortheme

@@ -68,7 +68,44 @@ DSstateBackgroundColor_hover=concreteGrey
 DSstateControlBackgroundColor_globalHover=concreteGrey
 DSstateControlBackgroundColor_hover=smokeGrey
 DSpanelBackground=dawnGrey
-;END NEW FOR QtDS 4.0
+
+;4.3
+DSpopoutBackground=offWhite
+DSpopoutControlBackground_idle=offWhite
+DSpopoutControlBackground_hover=lightWhite
+DSpopoutControlBackground_globalHover=lightWhite
+DSpopoutControlBackground_interaction=highlightBlue
+DSpopoutControlBackground_disabled=offWhite
+DSpopoutPopupBackground=lightWhite
+
+DSpopoutControlBorder_idle=slateGrey
+DSpopoutControlBorder_hover=concreteGrey
+DSpopoutControlBorder_interaction=highlightBlue
+DSpopoutControlBorder_disabled=offWhite
+
+DSpopoutButtonBackground_idle=offWhite
+DSpopoutButtonBackground_hover=lightWhite
+DSpopoutButtonBackground_interaction=highlightBlue
+DSpopoutButtonBackground_disabled=offWhite
+
+DSpopoutButtonBorder_idle=smokeGrey
+DSpopoutButtonBorder_hover=shadowGrey
+DSpopoutButtonBorder_interaction=highlightBlue
+DSpopoutButtonBorder_disabled=offWhite
+
+;4.4
+DSconnectionCodeEditor=lightWhite
+DSpillText=fullWhite
+DSpillTextSelected=fullBlack
+DspillTextEdit=fullBlack
+DSpillDefaultBackgroundIdle=shadowGrey
+DSpillDefaultBackgroundHover=smokeGrey
+DSpillOperatorBackgroundIdle=ff6b2a7b
+DSpillOperatorBackgroundHover=ff7e478b
+DSpillLiteralBackgroundIdle=ff447953
+DSpillLiteralBackgroundHover=ff61866B
+
+;END NEW FOR QtDS 4
 
 DSpanelBackground=ffeaeaea
 

share/qtcreator/themes/design-light.creatortheme

@@ -107,6 +107,18 @@ DSpopoutButtonBorder_hover=shadowGrey
 DSpopoutButtonBorder_interaction=highlightBlue
 DSpopoutButtonBorder_disabled=offWhite
 
+;4.4
+DSconnectionCodeEditor=lightWhite
+DSpillText=fullWhite
+DSpillTextSelected=fullBlack
+DspillTextEdit=fullBlack
+DSpillDefaultBackgroundIdle=shadowGrey
+DSpillDefaultBackgroundHover=smokeGrey
+DSpillOperatorBackgroundIdle=ff6b2a7b
+DSpillOperatorBackgroundHover=ff7e478b
+DSpillLiteralBackgroundIdle=ff447953
+DSpillLiteralBackgroundHover=ff61866B
+
 ;END NEW FOR QtDS 4
 
 DSpanelBackground=ffeaeaea

share/qtcreator/themes/design.creatortheme

@@ -90,8 +90,8 @@ DSpopoutControlBackground_interaction=highlightBlue
 DSpopoutControlBackground_disabled=offBlack
 DSpopoutPopupBackground=nearBlack
 
-DSpopoutControlBorder_idle=nearBlack
+DSpopoutControlBorder_idle=midnightGrey
-DSpopoutControlBorder_hover=midnightGrey
+DSpopoutControlBorder_hover=raincloudGrey
 DSpopoutControlBorder_interaction=highlightBlue
 DSpopoutControlBorder_disabled=offBlack
 
@@ -105,6 +105,18 @@ DSpopoutButtonBorder_hover=lightWhite
 DSpopoutButtonBorder_interaction=highlightBlue
 DSpopoutButtonBorder_disabled=offBlack
 
+;4.4
+DSconnectionCodeEditor=midnightGrey
+DSpillText=fullWhite
+DSpillTextSelected=fullBlack
+DspillTextEdit=fullWhite
+DSpillDefaultBackgroundIdle=graniteGrey
+DSpillDefaultBackgroundHover=raincloudGrey
+DSpillOperatorBackgroundIdle=ff6b2a7b
+DSpillOperatorBackgroundHover=ff7e478b
+DSpillLiteralBackgroundIdle=ff447953
+DSpillLiteralBackgroundHover=ff61866B
+
 ;END NEW FOR QtDS 4
 
 ;REMAPPED

share/qtcreator/themes/flat-dark.creatortheme

@@ -80,7 +80,44 @@ DSstateBackgroundColor_hover=ashGrey
 DSstateControlBackgroundColor_globalHover=ashGrey
 DSstateControlBackgroundColor_hover=raincloudGrey
 DSpanelBackground=dawnGrey
-;END NEW FOR QtDS 4.0
+
+;4.3
+DSpopoutBackground=offBlack
+DSpopoutControlBackground_idle=offBlack
+DSpopoutControlBackground_hover=dawnGrey
+DSpopoutControlBackground_globalHover=dawnGrey
+DSpopoutControlBackground_interaction=highlightBlue
+DSpopoutControlBackground_disabled=offBlack
+DSpopoutPopupBackground=nearBlack
+
+DSpopoutControlBorder_idle=midnightGrey
+DSpopoutControlBorder_hover=raincloudGrey
+DSpopoutControlBorder_interaction=highlightBlue
+DSpopoutControlBorder_disabled=offBlack
+
+DSpopoutButtonBackground_idle=offBlack
+DSpopoutButtonBackground_hover=dawnGrey
+DSpopoutButtonBackground_interaction=highlightBlue
+DSpopoutButtonBackground_disabled=offBlack
+
+DSpopoutButtonBorder_idle=slateGrey
+DSpopoutButtonBorder_hover=lightWhite
+DSpopoutButtonBorder_interaction=highlightBlue
+DSpopoutButtonBorder_disabled=offBlack
+
+;4.4
+DSconnectionCodeEditor=midnightGrey
+DSpillText=fullWhite
+DSpillTextSelected=fullBlack
+DspillTextEdit=fullWhite
+DSpillDefaultBackgroundIdle=graniteGrey
+DSpillDefaultBackgroundHover=raincloudGrey
+DSpillOperatorBackgroundIdle=ff6b2a7b
+DSpillOperatorBackgroundHover=ff7e478b
+DSpillLiteralBackgroundIdle=ff447953
+DSpillLiteralBackgroundHover=ff61866B
+
+;END NEW FOR QtDS 4
 
 DSwelcomeScreenBackground=ff242424
 DSsubPanelBackground=ff1c1c1c

share/qtcreator/themes/flat-light.creatortheme

@@ -77,7 +77,44 @@ DSstateBackgroundColor_hover=concreteGrey
 DSstateControlBackgroundColor_globalHover=concreteGrey
 DSstateControlBackgroundColor_hover=smokeGrey
 DSpanelBackground=dawnGrey
-;END NEW FOR QtDS 4.0
+
+;4.3
+DSpopoutBackground=offWhite
+DSpopoutControlBackground_idle=offWhite
+DSpopoutControlBackground_hover=lightWhite
+DSpopoutControlBackground_globalHover=lightWhite
+DSpopoutControlBackground_interaction=highlightBlue
+DSpopoutControlBackground_disabled=offWhite
+DSpopoutPopupBackground=lightWhite
+
+DSpopoutControlBorder_idle=slateGrey
+DSpopoutControlBorder_hover=concreteGrey
+DSpopoutControlBorder_interaction=highlightBlue
+DSpopoutControlBorder_disabled=offWhite
+
+DSpopoutButtonBackground_idle=offWhite
+DSpopoutButtonBackground_hover=lightWhite
+DSpopoutButtonBackground_interaction=highlightBlue
+DSpopoutButtonBackground_disabled=offWhite
+
+DSpopoutButtonBorder_idle=smokeGrey
+DSpopoutButtonBorder_hover=shadowGrey
+DSpopoutButtonBorder_interaction=highlightBlue
+DSpopoutButtonBorder_disabled=offWhite
+
+;4.4
+DSconnectionCodeEditor=lightWhite
+DSpillText=fullWhite
+DSpillTextSelected=fullBlack
+DspillTextEdit=fullBlack
+DSpillDefaultBackgroundIdle=shadowGrey
+DSpillDefaultBackgroundHover=smokeGrey
+DSpillOperatorBackgroundIdle=ff6b2a7b
+DSpillOperatorBackgroundHover=ff7e478b
+DSpillLiteralBackgroundIdle=ff447953
+DSpillLiteralBackgroundHover=ff61866B
+
+;END NEW FOR QtDS 4
 
 DSpanelBackground=ffeaeaea
 

share/qtcreator/themes/flat.creatortheme

@@ -74,7 +74,44 @@ DSstateBackgroundColor_hover=ashGrey
 DSstateControlBackgroundColor_globalHover=ashGrey
 DSstateControlBackgroundColor_hover=raincloudGrey
 DSpanelBackground=dawnGrey
-;END NEW FOR QtDS 4.0
+
+;4.3
+DSpopoutBackground=offBlack
+DSpopoutControlBackground_idle=offBlack
+DSpopoutControlBackground_hover=dawnGrey
+DSpopoutControlBackground_globalHover=dawnGrey
+DSpopoutControlBackground_interaction=highlightBlue
+DSpopoutControlBackground_disabled=offBlack
+DSpopoutPopupBackground=nearBlack
+
+DSpopoutControlBorder_idle=midnightGrey
+DSpopoutControlBorder_hover=raincloudGrey
+DSpopoutControlBorder_interaction=highlightBlue
+DSpopoutControlBorder_disabled=offBlack
+
+DSpopoutButtonBackground_idle=offBlack
+DSpopoutButtonBackground_hover=dawnGrey
+DSpopoutButtonBackground_interaction=highlightBlue
+DSpopoutButtonBackground_disabled=offBlack
+
+DSpopoutButtonBorder_idle=slateGrey
+DSpopoutButtonBorder_hover=lightWhite
+DSpopoutButtonBorder_interaction=highlightBlue
+DSpopoutButtonBorder_disabled=offBlack
+
+;4.4
+DSconnectionCodeEditor=midnightGrey
+DSpillText=fullWhite
+DSpillTextSelected=fullBlack
+DspillTextEdit=fullWhite
+DSpillDefaultBackgroundIdle=graniteGrey
+DSpillDefaultBackgroundHover=raincloudGrey
+DSpillOperatorBackgroundIdle=ff6b2a7b
+DSpillOperatorBackgroundHover=ff7e478b
+DSpillLiteralBackgroundIdle=ff447953
+DSpillLiteralBackgroundHover=ff61866B
+
+;END NEW FOR QtDS 4
 
 DSwelcomeScreenBackground=ff242424
 DSsubPanelBackground=ff1c1c1c

src/libs/utils/theme/theme.h

@@ -345,6 +345,17 @@ public:
         DSscrollBarTrack,
         DSscrollBarHandle,
         DSscrollBarHandle_idle,
+        DSconnectionCodeEditor,
+        DSpillText,
+        DSpillTextSelected,
+        DspillTextEdit,
+        DSpillDefaultBackgroundIdle,
+        DSpillDefaultBackgroundHover,
+        DSpillOperatorBackgroundIdle,
+        DSpillOperatorBackgroundHover,
+        DSpillLiteralBackgroundIdle,
+        DSpillLiteralBackgroundHover,
+
 
         /*Legacy QtDS*/
         DSiconColor,