QmlDesigner: Add style to Connection View popout

Change-Id: Ib6d8d9f11337a319bdaf8208880be45756d87e9b
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>

share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml

@@ -19,7 +19,8 @@ PopupDialog {
 
         StudioControls.TopLevelComboBox {
             id: target
-            width: 210
+            style: StudioTheme.Values.connectionPopupControlStyle
+            width: 180
             anchors.verticalCenter: parent.verticalCenter
             model: ["mySpinbox", "foo", "backendObject"]
         }

share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml

@@ -11,7 +11,7 @@ Column {
     id: root
 
     readonly property real horizontalSpacing: 10
-    readonly property real verticalSpacing: 10
+    readonly property real verticalSpacing: 16
     readonly property real columnWidth: (root.width - root.horizontalSpacing) / 2
 
     component PopupLabel : Text {
@@ -45,12 +45,14 @@ Column {
 
         StudioControls.TopLevelComboBox {
             id: signal
+            style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
             model: ["Clicked", "Pressed", "Released"]
         }
 
         StudioControls.TopLevelComboBox {
             id: action
+            style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
             textRole: "text"
             valueRole: "value"
@@ -80,11 +82,13 @@ Column {
         spacing: root.horizontalSpacing
 
         StudioControls.TopLevelComboBox {
+            style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
             model: ["mySpinBox", "myAnimation", "myCustomComponent"]
         }
 
         StudioControls.TopLevelComboBox {
+            style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
             model: ["start", "stop", "reset"]
         }
@@ -104,11 +108,13 @@ Column {
         spacing: root.horizontalSpacing
 
         StudioControls.TopLevelComboBox {
+            style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
             model: ["value", "foo", "bar"]
         }
 
         StudioControls.TopLevelComboBox {
+            style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
             model: ["myValue", "yourValue", "ourValue"]
         }
@@ -128,11 +134,13 @@ Column {
         spacing: root.horizontalSpacing
 
         StudioControls.TopLevelComboBox {
+            style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
             model: ["main", "group1", "group2"]
         }
 
         StudioControls.TopLevelComboBox {
+            style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
             model: ["state1", "state2", "state3", "state4"]
         }
@@ -152,11 +160,13 @@ Column {
         spacing: root.horizontalSpacing
 
         StudioControls.TopLevelComboBox {
+            style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
             model: ["value", "foo", "bar"]
         }
 
         StudioControls.TopLevelComboBox {
+            style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
             model: ["myValue", "yourValue", "ourValue"]
         }
@@ -193,12 +203,16 @@ Column {
     PopupLabel {
         visible: action.currentValue === ConnectionsDialogForm.Custom
         text: qsTr("Custom Connections can only be edited with the binding editor")
-        width: root.width
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 30
         horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.WordWrap
     }
 
     HelperWidgets.AbstractButton {
-        width: 200
+        style: StudioTheme.Values.connectionPopupButtonStyle
+        width: 160
         buttonIcon: qsTr("Add Condition")
         iconSize: StudioTheme.Values.baseFontSize
         iconFont: StudioTheme.Constants.font
@@ -212,8 +226,8 @@ Column {
     Rectangle {
         id: editor
         width: parent.width
-        height: 200
+        height: 150
-        color: "#333333"
+        color: StudioTheme.Values.themeToolbarBackground
 
         Text {
             anchors.centerIn: parent

share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml

@@ -16,6 +16,7 @@ ListView {
     clip: true
     interactive: true
     highlightMoveDuration: 0
+    highlightResizeDuration: 0
 
     ScrollBar.vertical: ScrollBar {
         id: comboBoxPopupScrollBar

share/qtcreator/qmldesigner/connectionseditor/Main.qml

@@ -68,7 +68,7 @@ Rectangle {
 
                     TabCheckButton {
                         id: properties
-                        buttonIcon: StudioTheme.Constants.connections_medium
+                        buttonIcon: StudioTheme.Constants.properties_medium
                         text: qsTr("Properties")
                         tooltip: qsTr("This is a tooltip.")
                         autoExclusive: true

share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml

@@ -13,11 +13,11 @@ Window {
     property alias titleBar: titleBarContent.children
     default property alias content: mainContent.children
 
-    width: 400
+    width: 320
     height: column.implicitHeight
     visible: true
     flags: Qt.FramelessWindowHint | Qt.Dialog
-    color: "#060606"
+    color: StudioTheme.Values.themePopoutBackground
 
     function popup(item) {
         print("popup " + item)
@@ -55,6 +55,7 @@ Window {
                 id: row
                 anchors.fill: parent
                 anchors.leftMargin: StudioTheme.Values.popupMargin
+                anchors.rightMargin: StudioTheme.Values.popupMargin
                 spacing: 0
 
                 Item {

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

@@ -0,0 +1,34 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
+
+import QtQuick
+
+ControlStyle {
+
+    baseIconFontSize: Values.bigFont
+    controlSize: Qt.size(Values.viewBarComboWidth, Values.viewBarComboHeight)
+    smallIconFontSize: Values.viewBarComboIcon
+
+    radius: Values.smallRadius
+
+    icon: ControlStyle.IconColors {
+        idle: Values.themeTextColor
+        hover: Values.themeTextColor
+        interaction: Values.themeIconColor
+        disabled: "#636363"
+    }
+
+    background: ControlStyle.BackgroundColors {
+        idle: Values.themePopoutButtonBackground_idle
+        hover: Values.themePopoutButtonBackground_hover
+        interaction: Values.themeInteraction
+        disabled: Values.themePopoutButtonBackground_disabled
+    }
+
+    border: ControlStyle.BorderColors {
+        idle: Values.themePopoutButtonBorder_idle
+        hover: Values.themePopoutButtonBorder_hover
+        interaction: Values.themeInteraction
+        disabled: Values.themecontrolBackground_statusbarIdle
+    }
+}

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

@@ -0,0 +1,39 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
+
+import QtQuick
+
+ControlStyle {
+
+    radius: Values.smallRadius
+
+    baseIconFontSize: Values.baseFont
+    controlSize: Qt.size(Values.viewBarComboWidth, Values.viewBarComboHeight)
+    smallIconFontSize: Values.baseFont
+
+    background: ControlStyle.BackgroundColors {
+        idle: Values.themePopoutControlBackground_idle
+        hover: Values.themePopoutControlBackground_hover
+        globalHover: Values.themePopoutControlBackground_globalHover
+        interaction: Values.themeInteraction
+        disabled: Values.themePopoutControlBackground_disabled
+    }
+
+    popup: ControlStyle.PopupColors {
+        background: Values.themePopoutPopupBackground
+    }
+
+    icon: ControlStyle.IconColors {
+        idle: Values.themeTextColor
+        hover: Values.themeTextColor
+        interaction: Values.themeTextSelectedTextColor
+        disabled: Values.themeTextColorDisabled
+    }
+
+    border: ControlStyle.BorderColors {
+        idle: Values.themePopoutControlBorder_idle
+        hover: Values.themePopoutControlBorder_hover
+        interaction: Values.themeInteraction
+        disabled: Values.themePopoutControlBorder_disabled
+    }
+}

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

@@ -219,7 +219,7 @@ QtObject {
     property real colorEditorPopupSpinBoxWidth: 54
 
     // Popup Window
-    property real titleBarHeight: values.height + 4
+    property real titleBarHeight: values.height + 10
     property real popupMargin: 10
 
     // Toolbar
@@ -275,6 +275,30 @@ QtObject {
     property color themeIdleGreen: Theme.color(Theme.DSidleGreen)
     property color themeRunningGreen: Theme.color(Theme.DSrunningGreen)
 
+    //popoutWindow (connections)
+    property color themePopoutBackground: Theme.color(Theme.DSpopoutBackground)
+    property color themePopoutControlBackground_idle: Theme.color(Theme.DSpopoutControlBackground_idle)
+    property color themePopoutControlBackground_hover: Theme.color(Theme.DSpopoutControlBackground_hover)
+    property color themePopoutControlBackground_globalHover: Theme.color(Theme.DSpopoutControlBackground_globalHover)
+    property color themePopoutControlBackground_interaction: Theme.color(Theme.DSpopoutControlBackground_interaction)
+    property color themePopoutControlBackground_disabled: Theme.color(Theme.DSpopoutControlBackground_disabled)
+
+    property color themePopoutPopupBackground: Theme.color(Theme.DSpopoutPopupBackground)
+
+    property color themePopoutControlBorder_idle: Theme.color(Theme.DSpopoutControlBorder_idle)
+    property color themePopoutControlBorder_hover: Theme.color(Theme.DSpopoutControlBorder_hover)
+    property color themePopoutControlBorder_interaction: Theme.color(Theme.DSpopoutControlBorder_interaction)
+    property color themePopoutControlBorder_disabled: Theme.color(Theme.DSpopoutControlBorder_disabled)
+
+    property color themePopoutButtonBackground_idle: Theme.color(Theme.DSpopoutButtonBackground_idle)
+    property color themePopoutButtonBackground_hover: Theme.color(Theme.DSpopoutButtonBackground_hover)
+    property color themePopoutButtonBackground_interaction: Theme.color(Theme.DSpopoutButtonBackground_interaction)
+    property color themePopoutButtonBackground_disabled: Theme.color(Theme.DSpopoutButtonBackground_disabled)
+
+    property color themePopoutButtonBorder_idle: Theme.color(Theme.DSpopoutButtonBorder_idle)
+    property color themePopoutButtonBorder_hover: Theme.color(Theme.DSpopoutButtonBorder_hover)
+    property color themePopoutButtonBorder_interaction: Theme.color(Theme.DSpopoutButtonBorder_interaction)
+
     //END NEW COLORS QtDS 4.0
 
     property color themePanelBackground: Theme.color(Theme.DSpanelBackground)
@@ -409,6 +433,8 @@ QtObject {
 
     // Control Style Mapping
     property ControlStyle controlStyle: DefaultStyle {}
+    property ControlStyle connectionPopupControlStyle: ConnectionPopupControlStyle {}
+    property ControlStyle connectionPopupButtonStyle: ConnectionPopupButtonStyle {}
     property ControlStyle toolbarStyle: ToolbarStyle {}
     property ControlStyle primaryToolbarStyle: PrimaryButtonStyle {}
     property ControlStyle toolbarButtonStyle: TopToolbarButtonStyle {}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir

@@ -1,6 +1,8 @@
 singleton Values 1.0 Values.qml
 singleton Constants 1.0 Constants.qml
 ControlStyle 1.0 ControlStyle.qml
+ConnectionPopupControlStyle 1.0 ConnectionPopupControlStyle.qml
+ConnectionPopupButtonStyle 1.0 ConnectionPopupButtonStyle.qml
 DefaultStyle 1.0 DefaultStyle.qml
 InternalConstants 1.0 InternalConstants.qml
 ToolbarStyle 1.0 ToolbarStyle.qml

share/qtcreator/themes/design-light.creatortheme

@@ -61,7 +61,8 @@ highlightHover=ff74CBFC
 [Colors]
 ;DS controls theme START
 
-;NEW FOR QtDS 4.0
+;NEW FOR QtDS 4
+;4.0
 DScontrolBackground_toolbarIdle=offWhite
 DScontrolBackground_toolbarHover=offWhite
 DScontrolBackground_topToolbarHover=concreteGrey
@@ -81,7 +82,32 @@ 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
+
+;END NEW FOR QtDS 4
 
 DSpanelBackground=ffeaeaea
 

share/qtcreator/themes/design.creatortheme

@@ -59,7 +59,8 @@ highlightHover=ff74CBFC
 [Colors]
 ;DS controls theme
 
-;NEW FOR QtDS 4.0
+;NEW FOR QtDS 4
+;4.0
 DScontrolBackground_toolbarIdle=midnightGrey
 DScontrolBackground_toolbarHover=midnightGrey
 DScontrolBackground_topToolbarHover=ashGrey
@@ -79,7 +80,32 @@ 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=nearBlack
+DSpopoutControlBorder_hover=midnightGrey
+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
+
+;END NEW FOR QtDS 4
 
 ;REMAPPED
 DSinteraction=highlightBlue

src/libs/utils/theme/theme.h

@@ -323,6 +323,25 @@ public:
         DSstateControlBackgroundColor_globalHover,
         DSplaceholderTextColor,
         DSplaceholderTextColorInteraction,
+        DSpopoutBackground,
+        DSpopoutControlBackground_idle,
+        DSpopoutControlBackground_hover,
+        DSpopoutControlBackground_globalHover,
+        DSpopoutControlBackground_interaction,
+        DSpopoutControlBackground_disabled,
+        DSpopoutPopupBackground,
+        DSpopoutControlBorder_idle,
+        DSpopoutControlBorder_hover,
+        DSpopoutControlBorder_interaction,
+        DSpopoutControlBorder_disabled,
+        DSpopoutButtonBackground_idle,
+        DSpopoutButtonBackground_hover,
+        DSpopoutButtonBackground_interaction,
+        DSpopoutButtonBackground_disabled,
+        DSpopoutButtonBorder_idle,
+        DSpopoutButtonBorder_hover,
+        DSpopoutButtonBorder_interaction,
+        DSpopoutButtonBorder_disabled,
 
         /*Legacy QtDS*/
         DSiconColor,