QmlDesigner: Add style to Connection View popout

Change-Id: Ib6d8d9f11337a319bdaf8208880be45756d87e9b Reviewed-by: Henning Gründl <henning.gruendl@qt.io>
2023-08-14 11:03:02 +02:00
parent 82ee90b875
commit 1ac682d02d
12 changed files with 203 additions and 14 deletions
--- a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml
+++ b/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"]
        }
--- 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: 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
-        color: "#333333"
+        height: 150
+        color: StudioTheme.Values.themeToolbarBackground

        Text {
            anchors.centerIn: parent
--- a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml
+++ b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml
@@ -16,6 +16,7 @@ ListView {
    clip: true
    interactive: true
    highlightMoveDuration: 0
+    highlightResizeDuration: 0

    ScrollBar.vertical: ScrollBar {
        id: comboBoxPopupScrollBar
--- a/share/qtcreator/qmldesigner/connectionseditor/Main.qml
+++ b/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
--- a/share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml
+++ b/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 {
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ConnectionPopupButtonStyle.qml
+++ b/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
+    }
+}
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ConnectionPopupControlStyle.qml
+++ b/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
+    }
+}
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
+++ b/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 {}
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir
+++ b/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
--- a/share/qtcreator/themes/design-light.creatortheme
+++ b/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

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