diff --git a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml index be45e30679b..b982e3424eb 100644 --- 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"] } diff --git a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml index c9c9030897b..a54baa55c31 100644 --- 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 diff --git a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml index 2c83ec167bd..e1fa90265bc 100644 --- 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 diff --git a/share/qtcreator/qmldesigner/connectionseditor/Main.qml b/share/qtcreator/qmldesigner/connectionseditor/Main.qml index a124228b3ea..6e47848b12e 100644 --- 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 diff --git a/share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml b/share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml index 5d0663e2a35..2119f56e88c 100644 --- 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 { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ConnectionPopupButtonStyle.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ConnectionPopupButtonStyle.qml new file mode 100644 index 00000000000..dd7f15247d0 --- /dev/null +++ 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 + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ConnectionPopupControlStyle.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ConnectionPopupControlStyle.qml new file mode 100644 index 00000000000..9aaea8dae2c --- /dev/null +++ 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 + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml index 41f09f45a4d..03a1d078fcc 100644 --- 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 {} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir index 2814e7809bb..60138d86d0f 100755 --- 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 diff --git a/share/qtcreator/themes/design-light.creatortheme b/share/qtcreator/themes/design-light.creatortheme index eeac285a5fe..b0f34fcfbdd 100644 --- 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 diff --git a/share/qtcreator/themes/design.creatortheme b/share/qtcreator/themes/design.creatortheme index 5e8294efa55..9a7065311ac 100644 --- 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 diff --git a/src/libs/utils/theme/theme.h b/src/libs/utils/theme/theme.h index 2604780a2d5..7a24c7fbd03 100644 --- 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,