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>
2023-09-15 13:28:28 +02:00
parent 5aa3e573ce
commit a496ac5d02
13 changed files with 272 additions and 34 deletions
--- a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml
+++ b/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
--- a/share/qtcreator/qmldesigner/connectionseditor/Pill.qml
+++ b/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
-                                       : StudioTheme.Values.themeTextColor
+                color: root.isShadow() ? StudioTheme.Values.themePillTextSelected
+                                       : 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
-                                                         : StudioTheme.Values.themeTextColor
+                color: {
+                    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
-                                                             : StudioTheme.Values.themeTextColor
+                    color: root.isInvalid() && root.selected ? StudioTheme.Values.themePillTextSelected
+                                                             : StudioTheme.Values.themePillText
                    text: StudioTheme.Constants.close_small
                    anchors.centerIn: parent
                }
--- a/share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml
+++ b/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
+
+        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)) {
--- a/share/qtcreator/qmldesigner/connectionseditor/SuggestionPopup.qml
+++ b/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
                        }
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
+++ b/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 themePillDefaultBackgroundHover: "#ff2c2c2c"
-    property color themePillOperatorBackgroundIdle: "#ff6b2a7b"
-    property color themePillOperatorBackgroundHover: "#ff7e478b"
-    property color themePillLiteralBackgroundIdle: "#ffb2005c"
-    property color themePillLiteralBackgroundHover: "#ffb24e81"
+    property color themePillDefaultBackgroundIdle: Theme.color(Theme.DSpillDefaultBackgroundIdle)
+    property color themePillDefaultBackgroundHover: Theme.color(Theme.DSpillDefaultBackgroundHover)
+    property color themePillOperatorBackgroundIdle: Theme.color(Theme.DSpillOperatorBackgroundIdle)
+    property color themePillOperatorBackgroundHover: Theme.color(Theme.DSpillOperatorBackgroundHover)
+    property color themePillLiteralBackgroundIdle: Theme.color(Theme.DSpillLiteralBackgroundIdle)
+    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 {}
--- a/share/qtcreator/themes/dark.creatortheme
+++ b/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
--- a/share/qtcreator/themes/default.creatortheme
+++ b/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

--- a/share/qtcreator/themes/design-light.creatortheme
+++ b/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
--- a/share/qtcreator/themes/design.creatortheme
+++ b/share/qtcreator/themes/design.creatortheme
@@ -90,8 +90,8 @@ DSpopoutControlBackground_interaction=highlightBlue
 DSpopoutControlBackground_disabled=offBlack
 DSpopoutPopupBackground=nearBlack

-DSpopoutControlBorder_idle=nearBlack
-DSpopoutControlBorder_hover=midnightGrey
+DSpopoutControlBorder_idle=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
--- a/share/qtcreator/themes/flat-dark.creatortheme
+++ b/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
--- a/share/qtcreator/themes/flat-light.creatortheme
+++ b/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

--- a/share/qtcreator/themes/flat.creatortheme
+++ b/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
--- a/src/libs/utils/theme/theme.h
+++ b/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,