From d250e356dca786dbb8bbc46c27a33374ca5f51c7 Mon Sep 17 00:00:00 2001 From: Henning Gruendl Date: Thu, 15 Dec 2022 10:18:59 +0100 Subject: [PATCH] QmlDesigner: Add control style support * Add support for changing the style of StudioControls via property * Fix copyright headers * Refactor property names * Fix internal property references by adding id * Remove import version Change-Id: I25abbbe276fcf3a6eeac7cab7c59574bed91c33a Reviewed-by: Thomas Hartmann Reviewed-by: --- .../imports/HelperWidgets/OriginControl.qml | 2 +- .../imports/StudioControls/AbstractButton.qml | 108 +++--- .../StudioControls/ActionIndicator.qml | 55 +-- .../imports/StudioControls/Button.qml | 25 +- .../imports/StudioControls/ButtonGroup.qml | 6 +- .../imports/StudioControls/ButtonRow.qml | 45 +-- .../imports/StudioControls/CheckBox.qml | 125 +++---- .../imports/StudioControls/CheckIndicator.qml | 140 +++---- .../imports/StudioControls/ComboBox.qml | 203 ++++++----- .../imports/StudioControls/ComboBoxInput.qml | 116 +++--- .../imports/StudioControls/ContextMenu.qml | 74 ++-- .../imports/StudioControls/Dialog.qml | 59 +-- .../imports/StudioControls/DialogButton.qml | 98 ++--- .../StudioControls/DialogButtonBox.qml | 45 +-- .../imports/StudioControls/FilterComboBox.qml | 343 +++++++++--------- .../imports/StudioControls/Indicator.qml | 50 +-- .../StudioControls/InfinityLoopIndicator.qml | 38 +- .../imports/StudioControls/ItemDelegate.qml | 6 +- .../StudioControls/LinkIndicator2D.qml | 36 +- .../StudioControls/LinkIndicator3D.qml | 61 ++-- .../LinkIndicator3DComponent.qml | 34 +- .../imports/StudioControls/Menu.qml | 21 +- .../imports/StudioControls/MenuItem.qml | 37 +- .../StudioControls/MenuItemWithIcon.qml | 36 +- .../imports/StudioControls/MenuSeparator.qml | 12 +- .../imports/StudioControls/ProgressBar.qml | 32 +- .../imports/StudioControls/RadioButton.qml | 93 ++--- .../StudioControls/RealSliderPopup.qml | 38 +- .../imports/StudioControls/RealSpinBox.qml | 260 ++++++------- .../StudioControls/RealSpinBoxIndicator.qml | 135 +++---- .../StudioControls/RealSpinBoxInput.qml | 166 ++++----- .../imports/StudioControls/ScrollBar.qml | 12 +- .../imports/StudioControls/ScrollView.qml | 22 +- .../imports/StudioControls/SearchBox.qml | 79 ++-- .../StudioControls/SecondColumnLayout.qml | 6 +- .../imports/StudioControls/Section.qml | 49 +-- .../imports/StudioControls/SectionLabel.qml | 16 +- .../imports/StudioControls/SectionLayout.qml | 14 +- .../imports/StudioControls/Slider.qml | 187 +++++----- .../imports/StudioControls/SliderPopup.qml | 52 +-- .../StudioControls/SortFilterModel.qml | 2 +- .../imports/StudioControls/SpinBox.qml | 242 ++++++------ .../StudioControls/SpinBoxIndicator.qml | 122 ++++--- .../imports/StudioControls/SpinBoxInput.qml | 175 ++++----- .../imports/StudioControls/Switch.qml | 135 +++---- .../imports/StudioControls/TabBar.qml | 18 +- .../imports/StudioControls/TabButton.qml | 27 +- .../imports/StudioControls/TextArea.qml | 83 +++-- .../imports/StudioControls/TextField.qml | 180 ++++----- .../imports/StudioControls/ToolTip.qml | 45 +-- .../StudioControls/TranslationIndicator.qml | 111 +++--- .../StudioControls/VerticalScrollBar.qml | 30 +- .../imports/StudioTheme/Constants.qml | 4 +- .../imports/StudioTheme/ControlStyle.qml | 187 ++++++++++ .../imports/StudioTheme/DefaultStyle.qml | 6 + .../imports/StudioTheme/InternalConstants.qml | 4 +- .../imports/StudioTheme/ToolbarStyle.qml | 10 + .../imports/StudioTheme/Values.qml | 203 ++++++----- .../imports/StudioTheme/qmldir | 4 +- 59 files changed, 2384 insertions(+), 2140 deletions(-) create mode 100644 share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ControlStyle.qml create mode 100644 share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/DefaultStyle.qml create mode 100644 share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ToolbarStyle.qml diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginControl.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginControl.qml index ecdcb0403b2..d7fdc67d218 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginControl.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginControl.qml @@ -36,7 +36,7 @@ Row { ActionIndicator { id: actionIndicator - myControl: myButton + __parentControl: myButton x: 0 y: 0 width: actionIndicator.visible ? myButton.__actionIndicatorWidth : 0 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml index d4d898965c1..782e35b5f37 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml @@ -1,15 +1,17 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.AbstractButton { - id: myButton + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property bool globalHover: false - property bool hover: myButton.hovered + property bool hover: control.hovered property alias buttonIcon: buttonIcon.text property alias iconColor: buttonIcon.color @@ -28,34 +30,34 @@ T.AbstractButton { implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) - height: StudioTheme.Values.height - width: StudioTheme.Values.height - z: myButton.checked ? 10 : 3 + width: control.style.squareControlSize.width + height: control.style.squareControlSize.height + z: control.checked ? 10 : 3 activeFocusOnTab: false onHoverChanged: { - if (parent !== undefined && parent.hoverCallback !== undefined && myButton.enabled) + if (parent !== undefined && parent.hoverCallback !== undefined && control.enabled) parent.hoverCallback() } background: Rectangle { id: buttonBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth } indicator: Item { x: 0 y: 0 - width: myButton.width - height: myButton.height + width: control.width + height: control.height T.Label { id: buttonIcon - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.fill: parent @@ -64,35 +66,35 @@ T.AbstractButton { states: [ State { name: "default" - when: myButton.enabled && !myButton.pressed && !myButton.checked + when: control.enabled && !control.pressed && !control.checked PropertyChanges { target: buttonIcon - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } }, State { name: "press" - when: myButton.enabled && myButton.pressed + when: control.enabled && control.pressed PropertyChanges { target: buttonIcon - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } }, State { name: "check" - when: myButton.enabled && !myButton.pressed && myButton.checked + when: control.enabled && !control.pressed && control.checked PropertyChanges { target: buttonIcon - color: myButton.checkedInverted ? StudioTheme.Values.themeTextSelectedTextColor - : StudioTheme.Values.themeIconColorSelected + color: control.checkedInverted ? control.style.text.selectedText // TODO rather something in icon + : control.style.icon.selected } }, State { name: "disable" - when: !myButton.enabled + when: !control.enabled PropertyChanges { target: buttonIcon - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.icon.disabled } } ] @@ -102,78 +104,78 @@ T.AbstractButton { states: [ State { name: "default" - when: myButton.enabled && !myButton.globalHover && !myButton.hover - && !myButton.pressed && !myButton.checked + when: control.enabled && !control.globalHover && !control.hover + && !control.pressed && !control.checked PropertyChanges { target: buttonBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle } PropertyChanges { - target: myButton + target: control z: 3 } }, State { name: "globalHover" - when: myButton.globalHover && !myButton.hover && !myButton.pressed && myButton.enabled + when: control.globalHover && !control.hover && !control.pressed && control.enabled PropertyChanges { target: buttonBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle } }, State { name: "hover" - when: !myButton.checked && myButton.hover && !myButton.pressed && myButton.enabled + when: !control.checked && control.hover && !control.pressed && control.enabled PropertyChanges { target: buttonBackground - color: StudioTheme.Values.themeControlBackgroundHover - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.hover + border.color: control.style.border.idle } }, State { name: "hoverCheck" - when: myButton.checked && myButton.hover && !myButton.pressed && myButton.enabled + when: control.checked && control.hover && !control.pressed && control.enabled PropertyChanges { target: buttonBackground - color: myButton.checkedInverted ? StudioTheme.Values.themeInteractionHover - : StudioTheme.Values.themeControlBackgroundHover - border.color: myButton.checkedInverted ? StudioTheme.Values.themeInteractionHover - : StudioTheme.Values.themeControlOutline + color: control.checkedInverted ? control.style.interactionHover + : control.style.background.hover + border.color: control.checkedInverted ? control.style.interactionHover + : control.style.border.idle } }, State { name: "press" - when: myButton.hover && myButton.pressed && myButton.enabled + when: control.hover && control.pressed && control.enabled PropertyChanges { target: buttonBackground - color: StudioTheme.Values.themeInteraction - border.color: StudioTheme.Values.themeInteraction + color: control.style.interaction + border.color: control.style.interaction } PropertyChanges { - target: myButton + target: control z: 100 } }, State { name: "check" - when: myButton.enabled && !myButton.pressed && myButton.checked + when: control.enabled && !control.pressed && control.checked PropertyChanges { target: buttonBackground - color: myButton.checkedInverted ? StudioTheme.Values.themeInteraction - : StudioTheme.Values.themeControlBackground - border.color: myButton.checkedInverted ? StudioTheme.Values.themeInteraction - : StudioTheme.Values.themeControlOutline + color: control.checkedInverted ? control.style.interaction + : control.style.background.idle + border.color: control.checkedInverted ? control.style.interaction + : control.style.border.idle } }, State { name: "disable" - when: !myButton.enabled + when: !control.enabled PropertyChanges { target: buttonBackground - color: StudioTheme.Values.themeControlBackgroundDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + color: control.style.background.disabled + border.color: control.style.border.disabled } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml index 074e2dbde8d..61591529f04 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml @@ -1,16 +1,18 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Rectangle { - id: actionIndicator + id: control - property Item myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle - property alias icon: actionIndicatorIcon + property Item __parentControl + + property alias icon: icon property bool hover: false property bool pressed: false @@ -18,55 +20,56 @@ Rectangle { color: "transparent" - implicitWidth: StudioTheme.Values.actionIndicatorWidth - implicitHeight: StudioTheme.Values.actionIndicatorHeight + implicitWidth: control.style.actionIndicatorSize.width + implicitHeight: control.style.actionIndicatorSize.height signal clicked z: 10 T.Label { - id: actionIndicatorIcon + id: icon anchors.fill: parent text: StudioTheme.Constants.actionIcon - visible: text !== StudioTheme.Constants.actionIcon || actionIndicator.forceVisible - || (myControl !== undefined && - ((myControl.edit !== undefined && myControl.edit) - || (myControl.hover !== undefined && myControl.hover) - || (myControl.drag !== undefined && myControl.drag))) - color: StudioTheme.Values.themeTextColor + visible: text !== StudioTheme.Constants.actionIcon || control.forceVisible + || (control.__parentControl !== undefined && + ((control.__parentControl.edit !== undefined && control.__parentControl.edit) + || (control.__parentControl.hover !== undefined && control.__parentControl.hover) + || (control.__parentControl.drag !== undefined && control.__parentControl.drag))) + color: control.style.icon.idle font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter states: [ State { name: "hover" - when: actionIndicator.hover && !actionIndicator.pressed - && (!myControl || (!myControl.edit && !myControl.drag)) - && actionIndicator.enabled + when: control.hover && !control.pressed + && (!control.__parentControl + || (!control.__parentControl.edit && !control.__parentControl.drag)) + && control.enabled PropertyChanges { - target: actionIndicatorIcon + target: icon scale: 1.2 visible: true } }, State { name: "disable" - when: !actionIndicator.enabled + when: !control.enabled PropertyChanges { - target: actionIndicatorIcon - color: StudioTheme.Values.themeTextColorDisabled + target: icon + color: control.style.icon.disabled } } ] } MouseArea { - id: actionIndicatorMouseArea + id: mouseArea anchors.fill: parent hoverEnabled: true - onContainsMouseChanged: actionIndicator.hover = containsMouse - onClicked: actionIndicator.clicked() + onContainsMouseChanged: control.hover = mouseArea.containsMouse + onClicked: control.clicked() } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml index bcad24f38e4..67802c3448b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml @@ -1,24 +1,25 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import StudioControls 1.0 +import QtQuick ButtonRow { - id: myButtonRow + id: control - property alias buttonIcon: myAbstractButton.buttonIcon - property alias iconColor: myAbstractButton.iconColor - property alias iconRotation: myAbstractButton.iconRotation - property alias checkable: myAbstractButton.checkable - property alias checked: myAbstractButton.checked + property alias style: button.style + + property alias buttonIcon: button.buttonIcon + property alias iconColor: button.iconColor + property alias iconRotation: button.iconRotation + property alias checkable: button.checkable + property alias checked: button.checked signal onCheckedChanged() signal clicked AbstractButton { - id: myAbstractButton - onCheckedChanged: myButtonRow.onCheckedChanged() - onClicked: myButtonRow.clicked() + id: button + onCheckedChanged: control.onCheckedChanged() + onClicked: control.clicked() } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml index 8a960b927a4..80bec3e36a0 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml @@ -1,8 +1,8 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T T.ButtonGroup { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml index caf180bec76..276b85a8296 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml @@ -1,51 +1,54 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Layouts +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Row { - id: myButtonRow + id: control - property bool hover: (actionIndicator.hover || myButtonRow.childHover) && myButtonRow.enabled + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + property bool hover: (actionIndicator.hover || control.childHover) && control.enabled property bool childHover: false property alias actionIndicator: actionIndicator property alias actionIndicatorVisible: actionIndicator.visible - property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth - property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + property real __actionIndicatorWidth: control.style.actionIndicatorSize.width + property real __actionIndicatorHeight: control.style.actionIndicatorSize.height ActionIndicator { id: actionIndicator - myControl: myButtonRow + style: control.style + __parentControl: control x: 0 y: 0 - // + StudioTheme.Values.border on width because of negative spacing on the row - width: actionIndicator.visible ? myButtonRow.__actionIndicatorWidth + StudioTheme.Values.border : 0 - height: actionIndicator.visible ? myButtonRow.__actionIndicatorHeight : 0 + // + borderWidth because of negative spacing on the row + width: actionIndicator.visible ? control.__actionIndicatorWidth + control.style.borderWidth : 0 + height: actionIndicator.visible ? control.__actionIndicatorHeight : 0 - onHoverChanged: myButtonRow.hoverCallback() + onHoverChanged: control.hoverCallback() } - spacing: -StudioTheme.Values.border + spacing: -control.style.borderWidth function hoverCallback() { var hover = false - for (var i = 0; i < children.length; ++i) { - if (children[i].hover !== undefined) - hover = hover || children[i].hover + for (var i = 0; i < control.children.length; ++i) { + if (control.children[i].hover !== undefined) + hover = hover || control.children[i].hover } - myButtonRow.childHover = hover + control.childHover = hover } onHoverChanged: { - for (var i = 0; i < children.length; ++i) - if (children[i].globalHover !== undefined) - children[i].globalHover = myButtonRow.hover + for (var i = 0; i < control.children.length; ++i) + if (control.children[i].globalHover !== undefined) + control.children[i].globalHover = control.hover } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml index cf7c588a3ce..ce0783b4066 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml @@ -1,30 +1,32 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.CheckBox { - id: myCheckBox + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property alias actionIndicator: actionIndicator // This property is used to indicate the global hover state - property bool hover: myCheckBox.hovered && myCheckBox.enabled + property bool hover: control.hovered && control.enabled property bool edit: false property alias actionIndicatorVisible: actionIndicator.visible - property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth - property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + property real __actionIndicatorWidth: control.style.actionIndicatorSize.width + property real __actionIndicatorHeight: control.style.actionIndicatorSize.height - property alias labelVisible: checkBoxLabel.visible - property alias labelColor: checkBoxLabel.color + property alias labelVisible: label.visible + property alias labelColor: label.color - property alias fontFamily: checkBoxLabel.font.family - property alias fontPixelSize: checkBoxLabel.font.pixelSize + property alias fontFamily: label.font.family + property alias fontPixelSize: label.font.pixelSize - font.pixelSize: StudioTheme.Values.myFontSize + font.pixelSize: control.style.baseFontSize implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) @@ -32,15 +34,16 @@ T.CheckBox { implicitContentHeight + topPadding + bottomPadding, implicitIndicatorHeight + topPadding + bottomPadding) - spacing: checkBoxLabel.visible ? StudioTheme.Values.checkBoxSpacing : 0 + spacing: label.visible ? control.style.controlSpacing : 0 hoverEnabled: true activeFocusOnTab: false ActionIndicator { id: actionIndicator - myControl: myCheckBox - width: actionIndicator.visible ? myCheckBox.__actionIndicatorWidth : 0 - height: actionIndicator.visible ? myCheckBox.__actionIndicatorHeight : 0 + style: control.style + __parentControl: control + width: actionIndicator.visible ? control.__actionIndicatorWidth : 0 + height: actionIndicator.visible ? control.__actionIndicatorHeight : 0 } indicator: Rectangle { @@ -48,20 +51,20 @@ T.CheckBox { x: actionIndicator.width y: 0 z: 5 - implicitWidth: StudioTheme.Values.height - implicitHeight: StudioTheme.Values.height - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + implicitWidth: control.style.squareControlSize.width + implicitHeight: control.style.squareControlSize.height + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth T.Label { id: checkedIcon x: (parent.width - checkedIcon.width) / 2 y: (parent.height - checkedIcon.height) / 2 text: StudioTheme.Constants.tickIcon - visible: myCheckBox.checkState === Qt.Checked - color: StudioTheme.Values.themeTextColor - font.pixelSize: StudioTheme.Values.sliderControlSizeMulti + visible: control.checkState === Qt.Checked + color: control.style.icon.idle + font.pixelSize: control.style.baseIconFontSize font.family: StudioTheme.Constants.iconFont.family } @@ -70,113 +73,113 @@ T.CheckBox { x: (parent.width - checkedIcon.width) / 2 y: (parent.height - checkedIcon.height) / 2 text: StudioTheme.Constants.triState - visible: myCheckBox.checkState === Qt.PartiallyChecked - color: StudioTheme.Values.themeTextColor - font.pixelSize: StudioTheme.Values.sliderControlSizeMulti + visible: control.checkState === Qt.PartiallyChecked + color: control.style.icon.idle + font.pixelSize: control.style.baseIconFontSize font.family: StudioTheme.Constants.iconFont.family } } contentItem: T.Label { - id: checkBoxLabel - leftPadding: checkBoxBackground.x + checkBoxBackground.width + myCheckBox.spacing + id: label + leftPadding: checkBoxBackground.x + checkBoxBackground.width + control.spacing rightPadding: 0 verticalAlignment: Text.AlignVCenter - text: myCheckBox.text - font: myCheckBox.font - color: StudioTheme.Values.themeTextColor - visible: checkBoxLabel.text !== "" + text: control.text + font: control.font + color: control.style.text.idle + visible: label.text !== "" } states: [ State { name: "default" - when: myCheckBox.enabled && !myCheckBox.hover - && !myCheckBox.pressed && !actionIndicator.hover + when: control.enabled && !control.hover + && !control.pressed && !actionIndicator.hover PropertyChanges { target: checkBoxBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle } PropertyChanges { target: checkedIcon - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } PropertyChanges { target: partiallyCheckedIcon - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } }, State { name: "globalHover" - when: actionIndicator.hover && !myCheckBox.pressed && myCheckBox.enabled + when: actionIndicator.hover && !control.pressed && control.enabled PropertyChanges { target: checkBoxBackground - color: StudioTheme.Values.themeControlBackgroundGlobalHover - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.globalHover + border.color: control.style.border.idle } PropertyChanges { target: checkedIcon - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } PropertyChanges { target: partiallyCheckedIcon - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } }, State { name: "hover" - when: myCheckBox.hover && !actionIndicator.hover && !myCheckBox.pressed + when: control.hover && !actionIndicator.hover && !control.pressed PropertyChanges { target: checkBoxBackground - color: StudioTheme.Values.themeControlBackgroundHover - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.hover + border.color: control.style.border.idle } PropertyChanges { target: checkedIcon - color: StudioTheme.Values.themeIconColor // TODO naming + color: control.style.icon.idle } PropertyChanges { target: partiallyCheckedIcon - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } }, State { name: "press" - when: myCheckBox.hover && myCheckBox.pressed + when: control.hover && control.pressed PropertyChanges { target: checkBoxBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + color: control.style.background.interaction + border.color: control.style.border.interaction } PropertyChanges { target: checkedIcon - color: StudioTheme.Values.themeIconColorInteraction + color: control.style.icon.interaction } PropertyChanges { target: partiallyCheckedIcon - color: StudioTheme.Values.themeIconColorInteraction + color: control.style.icon.interaction } }, State { name: "disable" - when: !myCheckBox.enabled + when: !control.enabled PropertyChanges { target: checkBoxBackground - color: StudioTheme.Values.themeControlBackgroundDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + color: control.style.background.disabled + border.color: control.style.border.disabled } PropertyChanges { target: checkedIcon - color: StudioTheme.Values.themeIconColorDisabled + color: control.style.icon.disabled } PropertyChanges { target: partiallyCheckedIcon - color: StudioTheme.Values.themeIconColorDisabled + color: control.style.icon.disabled } PropertyChanges { - target: checkBoxLabel - color: StudioTheme.Values.themeTextColorDisabled + target: label + color: control.style.text.disabled } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml index 99673e9529c..8a39bdcc35e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml @@ -1,156 +1,160 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Rectangle { - id: checkIndicator + id: control - property T.Control myControl - property T.Popup myPopup + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle - property bool hover: checkIndicatorMouseArea.containsMouse && checkIndicator.enabled - property bool pressed: checkIndicatorMouseArea.containsPress + property T.Control __parentControl + property T.Popup __parentPopup + + property bool hover: mouseArea.containsMouse && control.enabled + property bool pressed: mouseArea.containsPress property bool checked: false - property bool hasActiveDrag: myControl.hasActiveDrag ?? false - property bool hasActiveHoverDrag: myControl.hasActiveHoverDrag ?? false + property bool hasActiveDrag: control.__parentControl.hasActiveDrag ?? false + property bool hasActiveHoverDrag: control.__parentControl.hasActiveHoverDrag ?? false - color: StudioTheme.Values.themeControlBackground + color: control.style.background.idle border.width: 0 Connections { - target: myPopup - function onClosed() { checkIndicator.checked = false } - function onOpened() { checkIndicator.checked = true } + target: control.__parentPopup + function onClosed() { control.checked = false } + function onOpened() { control.checked = true } } MouseArea { - id: checkIndicatorMouseArea + id: mouseArea anchors.fill: parent hoverEnabled: true onClicked: { - if (myControl.activeFocus) - myControl.focus = false + if (control.__parentControl.activeFocus) + control.__parentControl.focus = false - if (myPopup.opened) { - myPopup.close() + if (control.__parentPopup.opened) { + control.__parentPopup.close() } else { - myPopup.open() - myPopup.forceActiveFocus() + control.__parentPopup.open() + control.__parentPopup.forceActiveFocus() } } } T.Label { - id: checkIndicatorIcon + id: icon anchors.fill: parent - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle text: StudioTheme.Constants.upDownSquare2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - font.pixelSize: StudioTheme.Values.sliderControlSizeMulti + font.pixelSize: control.style.baseIconFontSize font.family: StudioTheme.Constants.iconFont.family } states: [ State { name: "default" - when: myControl.enabled && checkIndicator.enabled && !myControl.edit - && !checkIndicator.hover && !myControl.hover && !myControl.drag - && !checkIndicator.checked && !checkIndicator.hasActiveDrag + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.edit && !control.hover + && !control.__parentControl.hover && !control.__parentControl.drag + && !control.checked && !control.hasActiveDrag PropertyChanges { - target: checkIndicator - color: StudioTheme.Values.themeControlBackground + target: control + color: control.style.background.idle } }, State { name: "dragHover" - when: myControl.enabled && checkIndicator.hasActiveHoverDrag + when: control.__parentControl.enabled && control.hasActiveHoverDrag PropertyChanges { - target: checkIndicator - color: StudioTheme.Values.themeControlBackgroundInteraction + target: control + color: control.style.background.interaction } }, State { name: "globalHover" - when: myControl.enabled && checkIndicator.enabled && !myControl.drag - && !checkIndicator.hover && myControl.hover && !myControl.edit - && !checkIndicator.checked + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && !control.hover + && control.__parentControl.hover && !control.__parentControl.edit + && !control.checked PropertyChanges { - target: checkIndicator - color: StudioTheme.Values.themeControlBackgroundGlobalHover + target: control + color: control.style.background.globalHover } }, State { name: "hover" - when: myControl.enabled && checkIndicator.enabled && !myControl.drag - && checkIndicator.hover && myControl.hover && !checkIndicator.pressed - && !checkIndicator.checked + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && control.hover && control.__parentControl.hover + && !control.pressed && !control.checked PropertyChanges { - target: checkIndicator - color: StudioTheme.Values.themeControlBackgroundHover + target: control + color: control.style.background.hover } }, State { name: "check" - when: checkIndicator.checked + when: control.checked PropertyChanges { - target: checkIndicatorIcon - color: StudioTheme.Values.themeIconColor + target: icon + color: control.style.icon.idle } PropertyChanges { - target: checkIndicator - color: StudioTheme.Values.themeInteraction + target: control + color: control.style.interaction } }, State { name: "edit" - when: myControl.edit && !checkIndicator.checked - && !(checkIndicator.hover && myControl.hover) + when: control.__parentControl.edit && !control.checked + && !(control.hover && control.__parentControl.hover) PropertyChanges { - target: checkIndicatorIcon - color: StudioTheme.Values.themeTextColor + target: icon + color: control.style.icon.idle } PropertyChanges { - target: checkIndicator - color: StudioTheme.Values.themeControlBackground + target: control + color: control.style.background.idle } }, State { name: "press" - when: myControl.enabled && checkIndicator.enabled && !myControl.drag - && checkIndicator.pressed + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && control.pressed PropertyChanges { - target: checkIndicatorIcon - color: StudioTheme.Values.themeIconColor + target: icon + color: control.style.icon.idle } PropertyChanges { - target: checkIndicator - color: StudioTheme.Values.themeInteraction + target: control + color: control.style.interaction } }, State { name: "drag" - when: (myControl.drag !== undefined && myControl.drag) && !checkIndicator.checked - && !(checkIndicator.hover && myControl.hover) + when: (control.__parentControl.drag !== undefined && control.__parentControl.drag) + && !control.checked && !(control.hover && control.__parentControl.hover) PropertyChanges { - target: checkIndicator - color: StudioTheme.Values.themeControlBackgroundInteraction + target: control + color: control.style.background.idle } }, State { name: "disable" - when: !myControl.enabled + when: !control.__parentControl.enabled PropertyChanges { - target: checkIndicator - color: StudioTheme.Values.themeControlBackgroundDisabled + target: control + color: control.style.background.disabled } PropertyChanges { - target: checkIndicatorIcon - color: StudioTheme.Values.themeTextColorDisabled + target: icon + color: control.style.icon.disabled } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml index 38fd7777dc0..ea2c430004c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml @@ -1,21 +1,23 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Window 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Window +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.ComboBox { - id: myComboBox + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property alias actionIndicator: actionIndicator property alias labelColor: comboBoxInput.color // This property is used to indicate the global hover state property bool hover: (comboBoxInput.hover || actionIndicator.hover || popupIndicator.hover) - && myComboBox.enabled - property bool edit: myComboBox.activeFocus && myComboBox.editable + && control.enabled + property bool edit: control.activeFocus && control.editable property bool open: comboBoxPopup.opened property bool hasActiveDrag: false // an item that can be dropped on the combobox is being dragged property bool hasActiveHoverDrag: false // an item that can be dropped on the combobox is being hovered on the combobox @@ -23,8 +25,8 @@ T.ComboBox { property bool dirty: false // user modification flag property alias actionIndicatorVisible: actionIndicator.visible - property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth - property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + property real __actionIndicatorWidth: control.style.actionIndicatorSize.width + property real __actionIndicatorHeight: control.style.actionIndicatorSize.height property alias textInput: comboBoxInput @@ -32,31 +34,32 @@ T.ComboBox { enum ActivatedReason { EditingFinished, Other } - width: StudioTheme.Values.defaultControlWidth - height: StudioTheme.Values.defaultControlHeight + width: control.style.controlSize.width + height: control.style.controlSize.height leftPadding: actionIndicator.width - rightPadding: popupIndicator.width + StudioTheme.Values.border - font.pixelSize: StudioTheme.Values.myFontSize + rightPadding: popupIndicator.width + control.style.borderWidth + font.pixelSize: control.style.baseFontSize wheelEnabled: false onFocusChanged: { - if (!myComboBox.focus) + if (!control.focus) comboBoxPopup.close() } onActiveFocusChanged: { - if (myComboBox.activeFocus) - comboBoxInput.preFocusText = myComboBox.editText + if (control.activeFocus) + comboBoxInput.preFocusText = control.editText } ActionIndicator { id: actionIndicator - myControl: myComboBox + style: control.style + __parentControl: control x: 0 y: 0 - width: actionIndicator.visible ? myComboBox.__actionIndicatorWidth : 0 - height: actionIndicator.visible ? myComboBox.__actionIndicatorHeight : 0 + width: actionIndicator.visible ? control.__actionIndicatorWidth : 0 + height: actionIndicator.visible ? control.__actionIndicatorHeight : 0 } contentItem: ComboBoxInput { @@ -64,98 +67,102 @@ T.ComboBox { property string preFocusText: "" - myControl: myComboBox - text: myComboBox.editText + style: control.style + __parentControl: control + text: control.editText onEditingFinished: { comboBoxInput.deselect() comboBoxInput.focus = false - myComboBox.focus = false + control.focus = false // Only trigger the signal, if the value was modified - if (myComboBox.dirty) { - myTimer.stop() - myComboBox.dirty = false - myComboBox.accepted() + if (control.dirty) { + timer.stop() + control.dirty = false + control.accepted() } } - onTextEdited: myComboBox.dirty = true + onTextEdited: control.dirty = true } indicator: CheckIndicator { id: popupIndicator - myControl: myComboBox - myPopup: myComboBox.popup + style: control.style + __parentControl: control + __parentPopup: control.popup x: comboBoxInput.x + comboBoxInput.width - y: StudioTheme.Values.border - width: StudioTheme.Values.checkIndicatorWidth - StudioTheme.Values.border - height: StudioTheme.Values.checkIndicatorHeight - StudioTheme.Values.border * 2 + y: control.style.borderWidth + width: control.style.baseIconSize.width - control.style.borderWidth + height: control.style.baseIconSize.height - control.style.borderWidth * 2 } background: Rectangle { id: comboBoxBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth x: actionIndicator.width - width: myComboBox.width - actionIndicator.width - height: myComboBox.height + width: control.width - actionIndicator.width + height: control.height } Timer { - id: myTimer + id: timer property int activatedIndex repeat: false running: false interval: 100 - onTriggered: myComboBox.compressedActivated(myTimer.activatedIndex, - ComboBox.ActivatedReason.Other) + onTriggered: control.compressedActivated(timer.activatedIndex, + ComboBox.ActivatedReason.Other) } onActivated: function(index) { - myTimer.activatedIndex = index - myTimer.restart() + timer.activatedIndex = index + timer.restart() } delegate: ItemDelegate { - id: myItemDelegate + id: itemDelegate width: comboBoxPopup.width - comboBoxPopup.leftPadding - comboBoxPopup.rightPadding - (comboBoxPopupScrollBar.visible ? comboBoxPopupScrollBar.contentItem.implicitWidth + 2 : 0) // TODO Magic number - height: StudioTheme.Values.height - 2 * StudioTheme.Values.border + height: control.style.controlSize.height - 2 * control.style.borderWidth padding: 0 enabled: model.enabled === undefined ? true : model.enabled contentItem: Text { leftPadding: itemDelegateIconArea.width - text: myComboBox.textRole ? (Array.isArray(myComboBox.model) ? modelData[myComboBox.textRole] - : model[myComboBox.textRole]) : modelData + text: control.textRole ? (Array.isArray(control.model) + ? modelData[control.textRole] + : model[control.textRole]) + : modelData color: { - if (!myItemDelegate.enabled) - return StudioTheme.Values.themeTextColorDisabled + if (!itemDelegate.enabled) + return control.style.text.disabled - return myItemDelegate.highlighted ? StudioTheme.Values.themeTextSelectedTextColor - : StudioTheme.Values.themeTextColor + return itemDelegate.highlighted ? control.style.text.selectedText + : control.style.text.idle } - font: myComboBox.font + font: control.font elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } Item { id: itemDelegateIconArea - width: myItemDelegate.height - height: myItemDelegate.height + width: itemDelegate.height + height: itemDelegate.height T.Label { id: itemDelegateIcon text: StudioTheme.Constants.tickIcon - color: myItemDelegate.highlighted ? StudioTheme.Values.themeTextSelectedTextColor - : StudioTheme.Values.themeTextColor + color: itemDelegate.highlighted ? control.style.text.selectedText + : control.style.text.idle font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti - visible: myComboBox.currentIndex === index ? true : false + font.pixelSize: control.style.smallIconFontSize + visible: control.currentIndex === index ? true : false anchors.fill: parent renderType: Text.NativeRendering horizontalAlignment: Text.AlignHCenter @@ -163,31 +170,31 @@ T.ComboBox { } } - highlighted: myComboBox.highlightedIndex === index + highlighted: control.highlightedIndex === index background: Rectangle { id: itemDelegateBackground x: 0 y: 0 - width: myItemDelegate.width - height: myItemDelegate.height - color: myItemDelegate.highlighted ? StudioTheme.Values.themeInteraction : "transparent" + width: itemDelegate.width + height: itemDelegate.height + color: itemDelegate.highlighted ? control.style.interaction : "transparent" } } popup: T.Popup { id: comboBoxPopup - x: actionIndicator.width + StudioTheme.Values.border - y: myComboBox.height - width: myComboBox.width - actionIndicator.width - StudioTheme.Values.border * 2 + x: actionIndicator.width + control.style.borderWidth + y: control.height + width: control.width - actionIndicator.width - control.style.borderWidth * 2 // TODO Setting the height on the popup solved the problem with the popup of height 0, // but it has the problem that it sometimes extend over the border of the actual window // and is then cut off. height: Math.min(contentItem.implicitHeight + comboBoxPopup.topPadding + comboBoxPopup.bottomPadding, - myComboBox.Window.height - topMargin - bottomMargin, - StudioTheme.Values.maxComboBoxPopupHeight) - padding: StudioTheme.Values.border + control.Window.height - topMargin - bottomMargin, + control.style.maxComboBoxPopupHeight) + padding: control.style.borderWidth margins: 0 // If not defined margin will be -1 closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside @@ -197,8 +204,8 @@ T.ComboBox { id: listView clip: true implicitHeight: listView.contentHeight - model: myComboBox.popup.visible ? myComboBox.delegateModel : null - currentIndex: myComboBox.highlightedIndex + model: control.popup.visible ? control.delegateModel : null + currentIndex: control.highlightedIndex boundsBehavior: Flickable.StopAtBounds ScrollBar.vertical: ScrollBar { id: comboBoxPopupScrollBar @@ -207,7 +214,7 @@ T.ComboBox { } background: Rectangle { - color: StudioTheme.Values.themePopupBackground + color: control.style.popup.background border.width: 0 } @@ -218,10 +225,10 @@ T.ComboBox { states: [ State { name: "default" - when: myComboBox.enabled && !myComboBox.hover && !myComboBox.edit && !myComboBox.open - && !myComboBox.activeFocus && !myComboBox.hasActiveDrag + when: control.enabled && !control.hover && !control.edit && !control.open + && !control.activeFocus && !control.hasActiveDrag PropertyChanges { - target: myComboBox + target: control wheelEnabled: false } PropertyChanges { @@ -230,34 +237,34 @@ T.ComboBox { } PropertyChanges { target: comboBoxBackground - color: StudioTheme.Values.themeControlBackground + color: control.style.background.idle } }, State { name: "acceptsDrag" - when: myComboBox.enabled && myComboBox.hasActiveDrag && !myComboBox.hasActiveHoverDrag + when: control.enabled && control.hasActiveDrag && !control.hasActiveHoverDrag PropertyChanges { target: comboBoxBackground - border.color: StudioTheme.Values.themeControlOutlineInteraction + border.color: control.style.border.interaction } }, State { name: "dragHover" - when: myComboBox.enabled && myComboBox.hasActiveHoverDrag + when: control.enabled && control.hasActiveHoverDrag PropertyChanges { target: comboBoxBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + color: control.style.background.interaction + border.color: control.style.border.interaction } }, // This state is intended for ComboBoxes which aren't editable, but have focus e.g. via // tab focus. It is therefor possible to use the mouse wheel to scroll through the items. State { name: "focus" - when: myComboBox.enabled && myComboBox.activeFocus && !myComboBox.editable - && !myComboBox.open + when: control.enabled && control.activeFocus && !control.editable + && !control.open PropertyChanges { - target: myComboBox + target: control wheelEnabled: true } PropertyChanges { @@ -267,9 +274,9 @@ T.ComboBox { }, State { name: "edit" - when: myComboBox.enabled && myComboBox.edit && !myComboBox.open + when: control.enabled && control.edit && !control.open PropertyChanges { - target: myComboBox + target: control wheelEnabled: true } PropertyChanges { @@ -279,18 +286,18 @@ T.ComboBox { } PropertyChanges { target: comboBoxBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction - } + color: control.style.background.interaction + border.color: control.style.border.interaction + } StateChangeScript { script: comboBoxPopup.close() } }, State { name: "popup" - when: myComboBox.enabled && myComboBox.open + when: control.enabled && control.open PropertyChanges { - target: myComboBox + target: control wheelEnabled: true } PropertyChanges { @@ -300,26 +307,26 @@ T.ComboBox { } PropertyChanges { target: comboBoxBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction - } + color: control.style.background.interaction + border.color: control.style.border.interaction + } }, State { name: "disable" - when: !myComboBox.enabled + when: !control.enabled PropertyChanges { target: comboBoxBackground - color: StudioTheme.Values.themeControlBackgroundDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + color: control.style.background.disabled + border.color: control.style.border.disabled } } ] Keys.onPressed: function(event) { if (event.key === Qt.Key_Escape) { - myComboBox.editText = comboBoxInput.preFocusText - myComboBox.dirty = true - myComboBox.focus = false + control.editText = comboBoxInput.preFocusText + control.dirty = true + control.focus = false } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml index f29fc0311aa..ceb5565f276 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml @@ -1,44 +1,46 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme TextInput { - id: textInput + id: control - property T.Control myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle - property bool edit: textInput.activeFocus - property bool hover: mouseArea.containsMouse && textInput.enabled + property T.ComboBox __parentControl + + property bool edit: control.activeFocus + property bool hover: mouseArea.containsMouse && control.enabled z: 2 - font: myControl.font - color: StudioTheme.Values.themeTextColor - selectionColor: StudioTheme.Values.themeTextSelectionColor - selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor + font: control.__parentControl.font + color: control.style.text.idle + selectionColor: control.style.text.selection + selectedTextColor: control.style.text.selectedText horizontalAlignment: Qt.AlignLeft verticalAlignment: Qt.AlignVCenter - leftPadding: StudioTheme.Values.inputHorizontalPadding - rightPadding: StudioTheme.Values.inputHorizontalPadding + leftPadding: control.style.inputHorizontalPadding + rightPadding: control.style.inputHorizontalPadding - readOnly: !myControl.editable - validator: myControl.validator - inputMethodHints: myControl.inputMethodHints + readOnly: !control.__parentControl.editable + validator: control.__parentControl.validator + inputMethodHints: control.__parentControl.inputMethodHints selectByMouse: false activeFocusOnPress: false clip: true Rectangle { - id: textInputBackground - x: StudioTheme.Values.border - y: StudioTheme.Values.border + id: background + x: control.style.borderWidth + y: control.style.borderWidth z: -1 - width: textInput.width - height: StudioTheme.Values.height - StudioTheme.Values.border * 2 - color: StudioTheme.Values.themeControlBackground + width: control.width + height: control.style.controlSize.height - control.style.borderWidth * 2 + color: control.style.background.idle border.width: 0 } @@ -51,16 +53,16 @@ TextInput { acceptedButtons: Qt.LeftButton cursorShape: Qt.PointingHandCursor onPressed: function(mouse) { - if (!textInput.myControl.editable) { - if (myControl.popup.opened) { - myControl.popup.close() - myControl.focus = false + if (!control.__parentControl.editable) { + if (control.__parentControl.popup.opened) { + control.__parentControl.popup.close() + control.__parentControl.focus = false } else { - myControl.popup.open() - //myControl.forceActiveFocus() + control.__parentControl.popup.open() + //textInput.__control.forceActiveFocus() } } else { - textInput.forceActiveFocus() + control.forceActiveFocus() } mouse.accepted = false @@ -70,11 +72,12 @@ TextInput { states: [ State { name: "default" - when: myControl.enabled && !textInput.edit && !textInput.hover && !myControl.hover - && !myControl.open && !myControl.hasActiveDrag + when: control.__parentControl.enabled && !control.edit && !control.hover + && !control.__parentControl.hover && !control.__parentControl.open + && !control.__parentControl.hasActiveDrag PropertyChanges { - target: textInputBackground - color: StudioTheme.Values.themeControlBackground + target: background + color: control.style.background.idle } PropertyChanges { target: mouseArea @@ -84,44 +87,45 @@ TextInput { }, State { name: "dragHover" - when: myControl.enabled && myControl.hasActiveHoverDrag + when: control.__parentControl.enabled && control.__parentControl.hasActiveHoverDrag PropertyChanges { - target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundInteraction + target: background + color: control.style.background.interaction } }, State { name: "globalHover" - when: myControl.hover && !textInput.hover && !textInput.edit && !myControl.open + when: control.__parentControl.hover && !control.hover && !control.edit + && !control.__parentControl.open PropertyChanges { - target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundGlobalHover + target: background + color: control.style.background.globalHover } }, State { name: "hover" - when: textInput.hover && myControl.hover && !textInput.edit + when: control.hover && control.__parentControl.hover && !control.edit PropertyChanges { - target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundHover + target: background + color: control.style.background.hover } }, // This state is intended for ComboBoxes which aren't editable, but have focus e.g. via // tab focus. It is therefor possible to use the mouse wheel to scroll through the items. State { name: "focus" - when: textInput.edit && !myControl.editable + when: control.edit && !control.__parentControl.editable PropertyChanges { - target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundInteraction + target: background + color: control.style.background.interaction } }, State { name: "edit" - when: textInput.edit && myControl.editable + when: control.edit && control.__parentControl.editable PropertyChanges { - target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundInteraction + target: background + color: control.style.background.interaction } PropertyChanges { target: mouseArea @@ -131,22 +135,22 @@ TextInput { }, State { name: "popup" - when: myControl.open + when: control.__parentControl.open PropertyChanges { - target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundHover + target: background + color: control.style.background.hover } }, State { name: "disable" - when: !myControl.enabled + when: !control.__parentControl.enabled PropertyChanges { - target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundDisabled + target: background + color: control.style.background.disabled } PropertyChanges { - target: textInput - color: StudioTheme.Values.themeTextColorDisabled + target: control + color: control.style.text.disabled } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml index 12b847e072c..2905eae0272 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml @@ -1,69 +1,75 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 +import QtQuick Menu { - id: contextMenu + id: control - property Item myTextEdit + required property Item __parentControl // TextInput or TextEdit MenuItem { - text: "Undo" - enabled: myTextEdit.canUndo - onTriggered: myTextEdit.undo() + style: control.style + text: qsTr("Undo") + enabled: control.__parentControl.canUndo + onTriggered: control.__parentControl.undo() /* shortcut: StandardKey.Undo Shortcuts in QQC2 seem to override global shortcuts */ } MenuItem { - text: "Redo" - enabled: myTextEdit.canRedo - onTriggered: myTextEdit.redo() + style: control.style + text: qsTr("Redo") + enabled: control.__parentControl.canRedo + onTriggered: control.__parentControl.redo() /* shortcut: StandardKey.Redo Shortcuts in QQC2 seem to override global shortcuts */ } - MenuSeparator { - } + MenuSeparator { style: control.style } MenuItem { - text: "Copy" - enabled: myTextEdit.selectedText !== "" - onTriggered: myTextEdit.copy() + style: control.style + text: qsTr("Copy") + enabled: control.__parentControl.selectedText !== "" + onTriggered: control.__parentControl.copy() /* shortcut: StandardKey.Copy Shortcuts in QQC2 seem to override global shortcuts */ } MenuItem { - text: "Cut" - enabled: myTextEdit.selectedText !== "" && !myTextEdit.readOnly - onTriggered: myTextEdit.cut() + style: control.style + text: qsTr("Cut") + enabled: control.__parentControl.selectedText !== "" && !control.__parentControl.readOnly + onTriggered: control.__parentControl.cut() /* shortcut: StandardKey.Cut Shortcuts in QQC2 seem to override global shortcuts */ } MenuItem { - text: "Paste" - enabled: myTextEdit.canPaste - onTriggered: myTextEdit.paste() + style: control.style + text: qsTr("Paste") + enabled: control.__parentControl.canPaste + onTriggered: control.__parentControl.paste() /* shortcut: StandardKey.Paste Shortcuts in QQC2 seem to override global shortcuts */ } MenuItem { - text: "Delete" - enabled: myTextEdit.selectedText !== "" - onTriggered: myTextEdit.remove(myTextEdit.selectionStart, - myTextEdit.selectionEnd) + style: control.style + text: qsTr("Delete") + enabled: control.__parentControl.selectedText !== "" + onTriggered: control.__parentControl.remove(control.__parentControl.selectionStart, + control.__parentControl.selectionEnd) /* shortcut: StandardKey.Delete Shortcuts in QQC2 seem to override global shortcuts */ } MenuItem { - text: "Clear" - enabled: myTextEdit.text !== "" - onTriggered: myTextEdit.clear() + style: control.style + text: qsTr("Clear") + enabled: control.__parentControl.text !== "" + onTriggered: control.__parentControl.clear() /* shortcut: StandardKey.DeleteCompleteLine Shortcuts in QQC2 seem to override global shortcuts */ } - MenuSeparator { - } + MenuSeparator { style: control.style } MenuItem { - text: "Select All" - enabled: myTextEdit.text !== "" - && myTextEdit.selectedText !== myTextEdit.text - onTriggered: myTextEdit.selectAll() + style: control.style + text: qsTr("Select All") + enabled: control.__parentControl.text !== "" + && control.__parentControl.selectedText !== control.__parentControl.text + onTriggered: control.__parentControl.selectAll() /* shortcut: StandardKey.SelectAll Shortcuts in QQC2 seem to override global shortcuts */ } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Dialog.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Dialog.qml index 4320021f9d6..64e6ebfd4d8 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Dialog.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Dialog.qml @@ -1,34 +1,14 @@ -/**************************************************************************** -** -** Copyright (C) 2022 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of Qt Creator. -** -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU General Public License Usage -** Alternatively, this file may be used under the terms of the GNU -** General Public License version 3 as published by the Free Software -** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT -** included in the packaging of this file. Please review the following -** information to ensure the GNU General Public License requirements will -** be met: https://www.gnu.org/licenses/gpl-3.0.html. -** -****************************************************************************/ +// 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 import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.Dialog { - id: root + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, contentWidth + leftPadding + rightPadding, @@ -39,36 +19,37 @@ T.Dialog { + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0) + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0)) - padding: StudioTheme.Values.dialogPadding + padding: control.style.dialogPadding background: Rectangle { - color: StudioTheme.Values.themeDialogBackground - border.color: StudioTheme.Values.themeDialogOutline - border.width: StudioTheme.Values.border + color: control.style.dialog.background + border.color: control.style.dialog.border + border.width: control.style.borderWidth } header: T.Label { - text: root.title - visible: root.title + text: control.title + visible: control.title elide: T.Label.ElideRight font.bold: true - padding: StudioTheme.Values.dialogPadding - color: StudioTheme.Values.themeTextColor + padding: control.padding + color: control.style.text.idle background: Rectangle { - x: StudioTheme.Values.border - y: StudioTheme.Values.border - width: parent.width - (2 * StudioTheme.Values.border) - height: parent.height - (2 * StudioTheme.Values.border) - color: StudioTheme.Values.themeDialogBackground + x: control.style.borderWidth + y: control.style.borderWidth + width: parent.width - (2 * control.style.borderWidth) + height: parent.height - (2 * control.style.borderWidth) + color: control.style.dialog.background } } footer: DialogButtonBox { + style: control.style visible: count > 0 } T.Overlay.modal: Rectangle { - color: Qt.alpha(StudioTheme.Values.themeDialogBackground, 0.5) + color: Qt.alpha(control.style.dialog.overlay, 0.5) } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/DialogButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/DialogButton.qml index 173b4ffdf3d..4f0f17050de 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/DialogButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/DialogButton.qml @@ -1,58 +1,36 @@ -/**************************************************************************** -** -** Copyright (C) 2022 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of Qt Creator. -** -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU General Public License Usage -** Alternatively, this file may be used under the terms of the GNU -** General Public License version 3 as published by the Free Software -** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT -** included in the packaging of this file. Please review the following -** information to ensure the GNU General Public License requirements will -** be met: https://www.gnu.org/licenses/gpl-3.0.html. -** -****************************************************************************/ +// 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 import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.Button { - id: root + id: control - implicitWidth: Math.max( - background ? background.implicitWidth : 0, - textItem.implicitWidth + leftPadding + rightPadding) - implicitHeight: Math.max( - background ? background.implicitHeight : 0, - textItem.implicitHeight + topPadding + bottomPadding) - leftPadding: StudioTheme.Values.dialogButtonPadding - rightPadding: StudioTheme.Values.dialogButtonPadding + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + implicitWidth: Math.max(buttonBackground ? buttonBackground.implicitWidth : 0, + textItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(buttonBackground ? buttonBackground.implicitHeight : 0, + textItem.implicitHeight + topPadding + bottomPadding) + leftPadding: control.style.dialogPadding + rightPadding: control.style.dialogPadding background: Rectangle { - id: background + id: buttonBackground implicitWidth: 70 implicitHeight: 20 - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle anchors.fill: parent } contentItem: Text { id: textItem - text: root.text - font.pixelSize: StudioTheme.Values.baseFontSize - color: StudioTheme.Values.themeTextColor + text: control.text + font.pixelSize: control.style.baseFontSize + color: control.style.text.idle horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } @@ -60,58 +38,58 @@ T.Button { states: [ State { name: "default" - when: root.enabled && !root.down && !root.hovered && !root.checked + when: control.enabled && !control.down && !control.hovered && !control.checked PropertyChanges { - target: background - color: root.highlighted ? StudioTheme.Values.themeInteraction - : StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + target: buttonBackground + color: control.highlighted ? control.style.interaction + : control.style.background.idle + border.color: control.style.border.idle } PropertyChanges { target: textItem - color: StudioTheme.Values.themeTextColor + color: control.style.text.idle } }, State { name: "hover" - when: root.enabled && root.hovered && !root.checked && !root.down + when: control.enabled && control.hovered && !control.checked && !control.down PropertyChanges { - target: background - color: StudioTheme.Values.themeControlBackgroundHover - border.color: StudioTheme.Values.themeControlOutline + target: buttonBackground + color: control.style.background.hover + border.color: control.style.border.idle } PropertyChanges { target: textItem - color: StudioTheme.Values.themeTextColor + color: control.style.text.idle } }, State { name: "press" - when: root.enabled && (root.checked || root.down) + when: control.enabled && (control.checked || control.down) PropertyChanges { - target: background - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + target: buttonBackground + color: control.style.background.interaction + border.color: control.style.border.interaction } PropertyChanges { target: textItem - color: StudioTheme.Values.themeTextColor + color: control.style.text.idle } }, State { name: "disable" - when: !root.enabled + when: !control.enabled PropertyChanges { - target: background - color: StudioTheme.Values.themeControlBackgroundDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + target: buttonBackground + color: control.style.background.disabled + border.color: control.style.border.disabled } PropertyChanges { target: textItem - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.text.disabled } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/DialogButtonBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/DialogButtonBox.qml index c32eae2e987..199c8fbe6c3 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/DialogButtonBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/DialogButtonBox.qml @@ -1,27 +1,5 @@ -/**************************************************************************** -** -** Copyright (C) 2022 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of Qt Creator. -** -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU General Public License Usage -** Alternatively, this file may be used under the terms of the GNU -** General Public License version 3 as published by the Free Software -** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT -** included in the packaging of this file. Please review the following -** information to ensure the GNU General Public License requirements will -** be met: https://www.gnu.org/licenses/gpl-3.0.html. -** -****************************************************************************/ +// 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 import QtQuick.Templates as T @@ -30,20 +8,23 @@ import StudioTheme 1.0 as StudioTheme T.DialogButtonBox { id: control + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, (control.count === 1 ? implicitContentWidth * 2 : implicitContentWidth) + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) contentWidth: contentItem.contentWidth - spacing: StudioTheme.Values.dialogButtonSpacing - padding: StudioTheme.Values.dialogPadding + spacing: control.style.dialogButtonSpacing + padding: control.style.dialogPadding alignment: Qt.AlignRight | Qt.AlignBottom delegate: DialogButton { + style: control.style width: control.count === 1 ? control.availableWidth / 2 : undefined - implicitHeight: StudioTheme.Values.height + implicitHeight: control.style.controlSize.height highlighted: DialogButtonBox.buttonRole === DialogButtonBox.AcceptRole || DialogButtonBox.buttonRole === DialogButtonBox.ApplyRole } @@ -59,10 +40,10 @@ T.DialogButtonBox { background: Rectangle { implicitHeight: 30 - x: StudioTheme.Values.border - y: StudioTheme.Values.border - width: parent.width - (2 * StudioTheme.Values.border) - height: parent.height - (2 * StudioTheme.Values.border) - color: StudioTheme.Values.themeDialogBackground + x: control.style.borderWidth + y: control.style.borderWidth + width: parent.width - (2 * control.style.borderWidth) + height: parent.height - (2 * control.style.borderWidthr) + color: control.style.dialog.background } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/FilterComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/FilterComboBox.qml index a1e39a94525..0f56c4e395e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/FilterComboBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/FilterComboBox.qml @@ -1,12 +1,15 @@ -// Copyright (C) 2022 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 import QtQuick +import QtQuick.Controls import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Item { - id: root + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle enum Interaction { None, TextEdit, Key } @@ -23,7 +26,7 @@ Item { // This is the actual filter that is applied on the model property string filter: "" - property bool filterActive: root.filter !== "" + property bool filterActive: control.filter !== "" // Accept arbitrary input or only items from the model property bool allowUserInput: false @@ -40,13 +43,13 @@ Item { // This property is used to indicate the global hover state property bool hover: (actionIndicator.hover || textInput.hover || checkIndicator.hover) - && root.enabled + && control.enabled property alias edit: textInput.edit property alias open: popup.visible property alias actionIndicatorVisible: actionIndicator.visible - property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth - property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + property real __actionIndicatorWidth: control.style.actionIndicatorSize.width + property real __actionIndicatorHeight: control.style.actionIndicatorSize.height property bool dirty: false // user modification flag @@ -65,43 +68,43 @@ Item { property bool hasActiveDrag: false // an item that can be dropped here is being dragged property bool hasActiveHoverDrag: false // an item that can be dropped her is being hovered on top - width: StudioTheme.Values.defaultControlWidth - height: StudioTheme.Values.defaultControlHeight - implicitHeight: StudioTheme.Values.defaultControlHeight + width: control.style.controlSize.width + height: control.style.controlSize.height + implicitHeight: control.style.controlSize.width function selectItem(itemsIndex) { textInput.text = sortFilterModel.items.get(itemsIndex).model.name - root.currentIndex = itemsIndex - root.finishEditing() - root.activated(itemsIndex) + control.currentIndex = itemsIndex + control.finishEditing() + control.activated(itemsIndex) } function submitValue() { - if (!root.allowUserInput) { + if (!control.allowUserInput) { // If input isn't according to any item in the model, don't finish editing - if (root.highlightedIndex === -1) + if (control.highlightedIndex === -1) return - root.selectItem(root.highlightedIndex) + control.selectItem(control.highlightedIndex) } else { - root.currentIndex = -1 + control.currentIndex = -1 // Only trigger the signal, if the value was modified - if (root.dirty) { + if (control.dirty) { myTimer.stop() - root.dirty = false - root.editText = root.editText.trim() + control.dirty = false + control.editText = control.editText.trim() } - root.finishEditing() - root.accepted() + control.finishEditing() + control.accepted() } } function finishEditing() { - root.editing = false - root.filter = "" - root.autocompleteString = "" + control.editing = false + control.filter = "" + control.autocompleteString = "" textInput.focus = false // Remove focus from text field popup.close() } @@ -111,16 +114,16 @@ Item { if (!numItems) return - if (root.highlightedIndex === -1) // Nothing is selected - root.setHighlightedIndexVisible(0) + if (control.highlightedIndex === -1) // Nothing is selected + control.setHighlightedIndexVisible(0) else { - let currentVisibleIndex = sortFilterModel.items.get(root.highlightedIndex).visibleIndex + let currentVisibleIndex = sortFilterModel.items.get(control.highlightedIndex).visibleIndex ++currentVisibleIndex if (currentVisibleIndex > numItems - 1) currentVisibleIndex = 0 - root.setHighlightedIndexVisible(currentVisibleIndex) + control.setHighlightedIndexVisible(currentVisibleIndex) } } @@ -129,32 +132,32 @@ Item { if (!numItems) return - if (root.highlightedIndex === -1) // Nothing is selected - root.setHighlightedIndexVisible(numItems - 1) + if (control.highlightedIndex === -1) // Nothing is selected + control.setHighlightedIndexVisible(numItems - 1) else { - let currentVisibleIndex = sortFilterModel.items.get(root.highlightedIndex).visibleIndex + let currentVisibleIndex = sortFilterModel.items.get(control.highlightedIndex).visibleIndex --currentVisibleIndex if (currentVisibleIndex < 0) currentVisibleIndex = numItems - 1 - root.setHighlightedIndexVisible(currentVisibleIndex) + control.setHighlightedIndexVisible(currentVisibleIndex) } } function updateHighlightedIndex() { // Check if current index is still part of the filtered list, if not set it to 0 - if (root.highlightedIndex !== -1 && !sortFilterModel.items.get(root.highlightedIndex).inVisible) { - root.setHighlightedIndexVisible(0) + if (control.highlightedIndex !== -1 && !sortFilterModel.items.get(control.highlightedIndex).inVisible) { + control.setHighlightedIndexVisible(0) } else { // Needs to be set in order for ListView to keep its currenIndex up to date, so // scroll position gets updated according to the higlighted item - root.setHighlightedIndexItems(root.highlightedIndex) + control.setHighlightedIndexItems(control.highlightedIndex) } } function setHighlightedIndexItems(itemsIndex) { // items group index - root.highlightedIndex = itemsIndex + control.highlightedIndex = itemsIndex if (itemsIndex === -1) listView.currentIndex = -1 @@ -164,19 +167,19 @@ Item { function setHighlightedIndexVisible(visibleIndex) { // visible group index if (visibleIndex === -1) - root.highlightedIndex = -1 + control.highlightedIndex = -1 else - root.highlightedIndex = sortFilterModel.visibleGroup.get(visibleIndex).itemsIndex + control.highlightedIndex = sortFilterModel.visibleGroup.get(visibleIndex).itemsIndex listView.currentIndex = visibleIndex } function updateAutocomplete() { - if (root.highlightedIndex === -1) - root.autocompleteString = "" + if (control.highlightedIndex === -1) + control.autocompleteString = "" else { - let suggestion = sortFilterModel.items.get(root.highlightedIndex).model.name - root.autocompleteString = suggestion.substring(textInput.text.length) + let suggestion = sortFilterModel.items.get(control.highlightedIndex).model.name + control.autocompleteString = suggestion.substring(textInput.text.length) } } @@ -195,8 +198,8 @@ Item { repeat: false running: false interval: 100 - onTriggered: root.compressedActivated(myTimer.activatedIndex, - ComboBox.ActivatedReason.Other) + onTriggered: control.compressedActivated(myTimer.activatedIndex, + ComboBox.ActivatedReason.Other) } onActivated: function(index) { @@ -205,8 +208,8 @@ Item { } onHighlightedIndexChanged: { - if (root.editing || (root.editText === "" && root.allowUserInput)) - root.updateAutocomplete() + if (control.editing || (control.editText === "" && control.allowUserInput)) + control.updateAutocomplete() } DelegateModel { @@ -221,14 +224,14 @@ Item { width: popup.width - popup.leftPadding - popup.rightPadding - (popupScrollBar.visible ? popupScrollBar.contentItem.implicitWidth + 2 : 0) // TODO Magic number - height: StudioTheme.Values.height - 2 * StudioTheme.Values.border + height: control.style.controlSize.height - 2 * control.style.borderWidth padding: 0 contentItem: Text { - leftPadding: StudioTheme.Values.inputHorizontalPadding + leftPadding: control.style.inputHorizontalPadding text: name font.italic: true - color: StudioTheme.Values.themeTextColor + color: control.style.text.idle elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } @@ -247,7 +250,7 @@ Item { id: sortFilterModel filterAcceptsItem: function(item) { - return item.name.toLowerCase().startsWith(root.filter.toLowerCase()) + return item.name.toLowerCase().startsWith(control.filter.toLowerCase()) } lessThan: function(left, right) { @@ -263,17 +266,17 @@ Item { width: popup.width - popup.leftPadding - popup.rightPadding - (popupScrollBar.visible ? popupScrollBar.contentItem.implicitWidth + 2 : 0) // TODO Magic number - height: StudioTheme.Values.height - 2 * StudioTheme.Values.border + height: control.style.controlSize.height - 2 * control.style.borderWidth padding: 0 hoverEnabled: true - highlighted: root.highlightedIndex === delegateRoot.DelegateModel.itemsIndex + highlighted: control.highlightedIndex === delegateRoot.DelegateModel.itemsIndex onHoveredChanged: { if (delegateRoot.hovered && !popupMouseArea.active) - root.setHighlightedIndexItems(delegateRoot.DelegateModel.itemsIndex) + control.setHighlightedIndexItems(delegateRoot.DelegateModel.itemsIndex) } - onClicked: root.selectItem(delegateRoot.DelegateModel.itemsIndex) + onClicked: control.selectItem(delegateRoot.DelegateModel.itemsIndex) indicator: Item { id: itemDelegateIconArea @@ -283,12 +286,12 @@ Item { T.Label { id: itemDelegateIcon text: StudioTheme.Constants.tickIcon - color: delegateRoot.highlighted ? StudioTheme.Values.themeTextSelectedTextColor - : StudioTheme.Values.themeTextColor + color: delegateRoot.highlighted ? control.style.text.selectedText + : control.style.text.idle font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti - visible: root.currentIndex === delegateRoot.DelegateModel.itemsIndex ? true - : false + font.pixelSize: control.style.smallIconFontSize + visible: control.currentIndex === delegateRoot.DelegateModel.itemsIndex ? true + : false anchors.fill: parent renderType: Text.NativeRendering horizontalAlignment: Text.AlignHCenter @@ -299,8 +302,8 @@ Item { contentItem: Text { leftPadding: itemDelegateIconArea.width text: name - color: delegateRoot.highlighted ? StudioTheme.Values.themeTextSelectedTextColor - : StudioTheme.Values.themeTextColor + color: delegateRoot.highlighted ? control.style.text.selectedText + : control.style.text.idle font: textInput.font elide: Text.ElideRight verticalAlignment: Text.AlignVCenter @@ -311,20 +314,19 @@ Item { y: 0 width: delegateRoot.width height: delegateRoot.height - color: delegateRoot.highlighted ? StudioTheme.Values.themeInteraction - : "transparent" + color: delegateRoot.highlighted ? control.style.interaction : "transparent" } } onUpdated: { - if (!root.__isCompleted) + if (!control.__isCompleted) return if (sortFilterModel.count === 0) - root.setHighlightedIndexVisible(-1) + control.setHighlightedIndexVisible(-1) else { - if (root.highlightedIndex === -1 && !root.allowUserInput) - root.setHighlightedIndexVisible(0) + if (control.highlightedIndex === -1 && !control.allowUserInput) + control.setHighlightedIndexVisible(0) } } } @@ -332,11 +334,12 @@ Item { Row { ActionIndicator { id: actionIndicator - myControl: root + style: control.style + __parentControl: control x: 0 y: 0 - width: actionIndicator.visible ? root.__actionIndicatorWidth : 0 - height: actionIndicator.visible ? root.__actionIndicatorHeight : 0 + width: actionIndicator.visible ? control.__actionIndicatorWidth : 0 + height: actionIndicator.visible ? control.__actionIndicatorHeight : 0 } TextInput { @@ -349,16 +352,16 @@ Item { x: 0 y: 0 z: 2 - width: root.width - actionIndicator.width - height: root.height - leftPadding: StudioTheme.Values.inputHorizontalPadding - rightPadding: StudioTheme.Values.inputHorizontalPadding + checkIndicator.width - + StudioTheme.Values.border + width: control.width - actionIndicator.width + height: control.height + leftPadding: control.style.inputHorizontalPadding + rightPadding: control.style.inputHorizontalPadding + checkIndicator.width + + control.style.borderWidth horizontalAlignment: Qt.AlignLeft verticalAlignment: Qt.AlignVCenter - color: StudioTheme.Values.themeTextColor - selectionColor: StudioTheme.Values.themeTextSelectionColor - selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor + color: control.style.text.idle + selectionColor: control.style.text.selection + selectedTextColor: control.style.text.selectedText selectByMouse: true clip: true @@ -367,9 +370,9 @@ Item { z: -1 width: textInput.width height: textInput.height - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth } MouseArea { @@ -388,20 +391,20 @@ Item { // Stop scrollable views from scrolling while ComboBox is in edit mode and the mouse // pointer is on top of it. We might add wheel selection in the future. onWheel: function(wheel) { - wheel.accepted = root.edit + wheel.accepted = control.edit } } onEditingFinished: { - if (root.escapePressed) { - root.escapePressed = false - root.editText = textInput.preFocusText + if (control.escapePressed) { + control.escapePressed = false + control.editText = textInput.preFocusText } else { - if (root.currentInteraction === FilterComboBox.Interaction.TextEdit) { - if (root.dirty) - root.submitValue() - } else if (root.currentInteraction === FilterComboBox.Interaction.Key) { - root.selectItem(root.highlightedIndex) + if (control.currentInteraction === FilterComboBox.Interaction.TextEdit) { + if (control.dirty) + control.submitValue() + } else if (control.currentInteraction === FilterComboBox.Interaction.Key) { + control.selectItem(control.highlightedIndex) } } @@ -409,16 +412,16 @@ Item { } onTextEdited: { - root.currentInteraction = FilterComboBox.Interaction.TextEdit - root.editing = true + control.currentInteraction = FilterComboBox.Interaction.TextEdit + control.editing = true popupMouseArea.active = true - root.dirty = true + control.dirty = true if (textInput.text !== "") - root.filter = textInput.text + control.filter = textInput.text else { - root.filter = "" - root.autocompleteString = "" + control.filter = "" + control.autocompleteString = "" } if (!popup.visible) @@ -426,12 +429,12 @@ Item { sortFilterModel.update() - if (!root.allowUserInput) - root.updateHighlightedIndex() + if (!control.allowUserInput) + control.updateHighlightedIndex() else - root.setHighlightedIndexVisible(-1) + control.setHighlightedIndexVisible(-1) - root.updateAutocomplete() + control.updateAutocomplete() } onActiveFocusChanged: { @@ -445,12 +448,12 @@ Item { states: [ State { name: "default" - when: root.enabled && !textInput.edit && !root.hover && !root.open - && !root.hasActiveDrag + when: control.enabled && !textInput.edit && !control.hover && !control.open + && !control.hasActiveDrag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle } PropertyChanges { target: textInputMouseArea @@ -460,44 +463,44 @@ Item { }, State { name: "acceptsDrag" - when: root.enabled && root.hasActiveDrag && !root.hasActiveHoverDrag + when: control.enabled && control.hasActiveDrag && !control.hasActiveHoverDrag PropertyChanges { target: textInputBackground - border.color: StudioTheme.Values.themeInteraction + border.color: control.style.interaction } }, State { name: "dragHover" - when: root.enabled && root.hasActiveHoverDrag + when: control.enabled && control.hasActiveHoverDrag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeInteraction + color: control.style.background.interaction + border.color: control.style.interaction } }, State { name: "globalHover" - when: root.hover && !textInput.hover && !textInput.edit && !root.open + when: control.hover && !textInput.hover && !textInput.edit && !control.open PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundGlobalHover + color: control.style.background.globalHover } }, State { name: "hover" - when: textInput.hover && root.hover && !textInput.edit + when: textInput.hover && control.hover && !textInput.edit PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundHover + color: control.style.background.hover } }, State { name: "edit" - when: root.edit + when: control.edit PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + color: control.style.background.interaction + border.color: control.style.border.interaction } PropertyChanges { target: textInputMouseArea @@ -507,23 +510,23 @@ Item { }, State { name: "disable" - when: !root.enabled + when: !control.enabled PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + color: control.style.background.disabled + border.color: control.style.border.disabled } PropertyChanges { target: textInput - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.text.disabled } } ] Text { id: tmpSelectionName - visible: root.autocompleteString !== "" && root.open - text: root.autocompleteString + visible: control.autocompleteString !== "" && control.open + text: control.autocompleteString x: textInput.leftPadding + textMetrics.advanceWidth y: (textInput.height - Math.ceil(tmpSelectionTextMetrics.height)) / 2 color: "gray" // TODO proper color value @@ -542,7 +545,6 @@ Item { } } - Rectangle { id: checkIndicator @@ -550,11 +552,11 @@ Item { property bool pressed: checkIndicatorMouseArea.containsPress property bool checked: popup.visible - x: textInput.width - checkIndicator.width - StudioTheme.Values.border - y: StudioTheme.Values.border - width: StudioTheme.Values.height - StudioTheme.Values.border - height: textInput.height - (StudioTheme.Values.border * 2) - color: StudioTheme.Values.themeControlBackground + x: textInput.width - checkIndicator.width - control.style.borderWidth + y: control.style.borderWidth + width: control.style.squareControlSize.width - control.style.borderWidth + height: textInput.height - (control.style.borderWidth * 2) + color: control.style.background.idle border.width: 0 MouseArea { @@ -577,51 +579,51 @@ Item { T.Label { id: checkIndicatorIcon anchors.fill: parent - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle text: StudioTheme.Constants.upDownSquare2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - font.pixelSize: StudioTheme.Values.sliderControlSizeMulti + font.pixelSize: control.style.baseIconFontSize font.family: StudioTheme.Constants.iconFont.family } states: [ State { name: "default" - when: root.enabled && checkIndicator.enabled && !root.edit - && !checkIndicator.hover && !root.hover - && !checkIndicator.checked && !root.hasActiveHoverDrag + when: control.enabled && checkIndicator.enabled && !control.edit + && !checkIndicator.hover && !control.hover + && !checkIndicator.checked && !control.hasActiveHoverDrag PropertyChanges { target: checkIndicator - color: StudioTheme.Values.themeControlBackground + color: control.style.background.idle } }, State { name: "dragHover" - when: root.enabled && root.hasActiveHoverDrag + when: control.enabled && control.hasActiveHoverDrag PropertyChanges { target: checkIndicator - color: StudioTheme.Values.themeControlBackgroundInteraction + color: control.style.background.interaction } }, State { name: "globalHover" - when: root.enabled && checkIndicator.enabled - && !checkIndicator.hover && root.hover && !root.edit + when: control.enabled && checkIndicator.enabled + && !checkIndicator.hover && control.hover && !control.edit && !checkIndicator.checked PropertyChanges { target: checkIndicator - color: StudioTheme.Values.themeControlBackgroundGlobalHover + color: control.style.background.globalHover } }, State { name: "hover" - when: root.enabled && checkIndicator.enabled - && checkIndicator.hover && root.hover && !checkIndicator.pressed + when: control.enabled && checkIndicator.enabled + && checkIndicator.hover && control.hover && !checkIndicator.pressed && !checkIndicator.checked PropertyChanges { target: checkIndicator - color: StudioTheme.Values.themeControlBackgroundHover + color: control.style.background.hover } }, State { @@ -629,36 +631,36 @@ Item { when: checkIndicator.checked PropertyChanges { target: checkIndicatorIcon - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } PropertyChanges { target: checkIndicator - color: StudioTheme.Values.themeInteraction + color: control.style.interaction } }, State { name: "press" - when: root.enabled && checkIndicator.enabled + when: control.enabled && checkIndicator.enabled && checkIndicator.pressed PropertyChanges { target: checkIndicatorIcon - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } PropertyChanges { target: checkIndicator - color: StudioTheme.Values.themeInteraction + color: control.style.interaction } }, State { name: "disable" - when: !root.enabled + when: !control.enabled PropertyChanges { target: checkIndicator - color: StudioTheme.Values.themeControlBackgroundDisabled + color: control.style.background.disabled } PropertyChanges { target: checkIndicatorIcon - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.icon.disabled } } ] @@ -668,13 +670,13 @@ Item { T.Popup { id: popup - x: textInput.x + StudioTheme.Values.border + x: textInput.x + control.style.borderWidth y: textInput.height - width: textInput.width - (StudioTheme.Values.border * 2) + width: textInput.width - (control.style.borderWidth * 2) height: Math.min(popup.contentItem.implicitHeight + popup.topPadding + popup.bottomPadding, - root.Window.height - popup.topMargin - popup.bottomMargin, - StudioTheme.Values.maxComboBoxPopupHeight) - padding: StudioTheme.Values.border + control.Window.height - popup.topMargin - popup.bottomMargin, + control.style.maxComboBoxPopupHeight) + padding: control.style.borderWidth margins: 0 // If not defined margin will be -1 closePolicy: T.Popup.NoAutoClose @@ -700,20 +702,20 @@ Item { } background: Rectangle { - color: StudioTheme.Values.themePopupBackground + color: control.style.popup.background border.width: 0 } onOpened: { // Reset the highlightedIndex of ListView as binding with condition didn't work - if (root.highlightedIndex !== -1) - root.setHighlightedIndexItems(root.highlightedIndex) + if (control.highlightedIndex !== -1) + control.setHighlightedIndexItems(control.highlightedIndex) } onAboutToShow: { // Select first item in list - if (root.highlightedIndex === -1 && sortFilterModel.count && !root.allowUserInput) - root.setHighlightedIndexVisible(0) + if (control.highlightedIndex === -1 && sortFilterModel.count && !control.allowUserInput) + control.setHighlightedIndexVisible(0) } MouseArea { @@ -734,8 +736,8 @@ Item { if (!sortFilterModel.visibleGroup.count) return - root.currentInteraction = FilterComboBox.Interaction.Key - root.increaseVisibleIndex() + control.currentInteraction = FilterComboBox.Interaction.Key + control.increaseVisibleIndex() popupMouseArea.active = true } @@ -744,22 +746,21 @@ Item { if (!sortFilterModel.visibleGroup.count) return - root.currentInteraction = FilterComboBox.Interaction.Key - root.decreaseVisibleIndex() + control.currentInteraction = FilterComboBox.Interaction.Key + control.decreaseVisibleIndex() popupMouseArea.active = true } Keys.onEscapePressed: { - root.escapePressed = true - root.finishEditing() + control.escapePressed = true + control.finishEditing() } Component.onCompleted: { - let index = root.find(root.editText) - root.currentIndex = index - root.highlightedIndex = index // TODO might not be intended - - root.__isCompleted = true + let index = control.find(control.editText) + control.currentIndex = index + control.highlightedIndex = index // TODO might not be intended + control.__isCompleted = true } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Indicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Indicator.qml index cc5cf43b869..3ffab90ac9e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Indicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Indicator.qml @@ -1,41 +1,21 @@ -/**************************************************************************** -** -** Copyright (C) 2022 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of Qt Creator. -** -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU General Public License Usage -** Alternatively, this file may be used under the terms of the GNU -** General Public License version 3 as published by the Free Software -** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT -** included in the packaging of this file. Please review the following -** information to ensure the GNU General Public License requirements will -** be met: https://www.gnu.org/licenses/gpl-3.0.html. -** -****************************************************************************/ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 -import QtQuick 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Item { - id: root + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property alias icon: icon property bool hover: mouseArea.containsMouse property bool pressed: mouseArea.pressed - implicitWidth: StudioTheme.Values.height - implicitHeight: StudioTheme.Values.height + implicitWidth: control.style.squareControlSize.width + implicitHeight: control.style.squareControlSize.height signal clicked z: 10 @@ -44,16 +24,16 @@ Item { id: icon anchors.fill: parent text: StudioTheme.Constants.actionIcon - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter states: [ State { name: "hover" - when: root.hover && !root.pressed && root.enabled + when: control.hover && !control.pressed && control.enabled PropertyChanges { target: icon scale: 1.2 @@ -62,10 +42,10 @@ Item { }, State { name: "disable" - when: !root.enabled + when: !control.enabled PropertyChanges { target: icon - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.icon.disabled } } ] @@ -75,6 +55,6 @@ Item { id: mouseArea anchors.fill: parent hoverEnabled: true - onClicked: root.clicked() + onClicked: control.clicked() } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/InfinityLoopIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/InfinityLoopIndicator.qml index d3c21ba8745..1c59d32a917 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/InfinityLoopIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/InfinityLoopIndicator.qml @@ -1,33 +1,35 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Rectangle { - id: infinityLoopIndicator + id: control - property Item myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + property Item __parentControl property bool infinite: false color: "transparent" border.color: "transparent" - implicitWidth: StudioTheme.Values.infinityControlWidth - implicitHeight: StudioTheme.Values.infinityControlHeight + implicitWidth: control.style.indicatorIconSize.width + implicitHeight: control.style.indicatorIconSize.height z: 10 T.Label { - id: infinityLoopIndicatorIcon + id: icon anchors.fill: parent text: StudioTheme.Constants.infinity visible: true - color: StudioTheme.Values.themeTextColor + color: control.style.indicator.idle font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } @@ -36,32 +38,32 @@ Rectangle { id: mouseArea anchors.fill: parent hoverEnabled: true - onClicked: infinityLoopIndicator.infinite = !infinityLoopIndicator.infinite + onClicked: control.infinite = !control.infinite } states: [ State { name: "active" - when: infinityLoopIndicator.infinite && !mouseArea.containsMouse + when: control.infinite && !mouseArea.containsMouse PropertyChanges { - target: infinityLoopIndicatorIcon - color: StudioTheme.Values.themeInfiniteLoopIndicatorColorInteraction + target: icon + color: control.style.indicator.interaction } }, State { name: "default" when: !mouseArea.containsMouse PropertyChanges { - target: infinityLoopIndicatorIcon - color: StudioTheme.Values.themeInfiniteLoopIndicatorColor + target: icon + color: control.style.indicator.idle } }, State { name: "hover" when: mouseArea.containsMouse PropertyChanges { - target: infinityLoopIndicatorIcon - color: StudioTheme.Values.themeInfiniteLoopIndicatorColorHover + target: icon + color: control.style.indicator.hover } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml index 2a128fcdb12..ae4f2183daa 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml @@ -1,8 +1,8 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T T.ItemDelegate { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator2D.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator2D.qml index 651df773883..b62c26d6943 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator2D.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator2D.qml @@ -1,34 +1,36 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Rectangle { - id: linkIndicator + id: control - property Item myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + property Item __parentControl property bool linked: false color: "transparent" border.color: "transparent" - implicitWidth: StudioTheme.Values.linkControlWidth - implicitHeight: StudioTheme.Values.linkControlHeight + implicitWidth: control.style.indicatorIconSize.width + implicitHeight: control.style.indicatorIconSize.height z: 10 T.Label { - id: linkIndicatorIcon + id: icon anchors.fill: parent - text: linkIndicator.linked ? StudioTheme.Constants.linked - : StudioTheme.Constants.unLinked + text: control.linked ? StudioTheme.Constants.linked + : StudioTheme.Constants.unLinked visible: true - color: StudioTheme.Values.themeTextColor + color: control.style.indicator.idle font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } @@ -37,7 +39,7 @@ Rectangle { id: mouseArea anchors.fill: parent hoverEnabled: true - onPressed: linkIndicator.linked = !linkIndicator.linked + onPressed: control.linked = !control.linked } states: [ @@ -45,16 +47,16 @@ Rectangle { name: "default" when: !mouseArea.containsMouse PropertyChanges { - target: linkIndicatorIcon - color: StudioTheme.Values.themeLinkIndicatorColor + target: icon + color: control.style.indicator.idle } }, State { name: "hover" when: mouseArea.containsMouse PropertyChanges { - target: linkIndicatorIcon - color: StudioTheme.Values.themeLinkIndicatorColorHover + target: icon + color: control.style.indicator.hover } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3D.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3D.qml index ab5ea804e67..d71c8d5da3f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3D.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3D.qml @@ -1,23 +1,25 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Shapes 1.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Shapes +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Rectangle { - id: linkIndicator + id: control - property Item myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + property Item __parentControl property bool linked: linkXZ.linked || linkYZ.linked || linkXY.linked color: "transparent" border.color: "transparent" - implicitWidth: StudioTheme.Values.height - implicitHeight: StudioTheme.Values.height + implicitWidth: control.style.squareControlSize.width + implicitHeight: control.style.squareControlSize.height z: 10 @@ -32,12 +34,12 @@ Rectangle { T.Label { id: linkIndicatorIcon anchors.fill: parent - text: linkIndicator.linked ? StudioTheme.Constants.linked - : StudioTheme.Constants.unLinked + text: control.linked ? StudioTheme.Constants.linked + : StudioTheme.Constants.unLinked visible: true - color: StudioTheme.Values.themeTextColor + color: control.style.indicator.idle font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } @@ -56,10 +58,10 @@ Rectangle { y: 0 // TODO proper size - width: 20 + (3 * StudioTheme.Values.height) - height: 20 + (3 * StudioTheme.Values.height) + width: 20 + (3 * control.style.squareControlSize.width) + height: 20 + (3 * control.style.squareControlSize.height) - padding: StudioTheme.Values.border + padding: control.style.borderWidth margins: 0 // If not defined margin will be -1 closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent @@ -99,7 +101,7 @@ Rectangle { property vector2d center: Qt.vector2d(triangle.radius, triangle.radius) - strokeWidth: StudioTheme.Values.border + strokeWidth: control.style.borderWidth strokeColor: triangleMouseArea.containsMouse ? "white" : "gray" strokeStyle: ShapePath.SolidLine fillColor: "transparent" @@ -149,9 +151,9 @@ Rectangle { onClicked: { if (linkXZ.linked && linkYZ.linked && linkXY.linked) - linkIndicator.unlinkAll() + control.unlinkAll() else - linkIndicator.linkAll() + control.linkAll() } MouseArea { @@ -177,13 +179,14 @@ Rectangle { visible: true color: triangleMouseArea.containsMouse ? "white" : "gray" font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize * 3 + font.pixelSize: control.style.baseIconFontSize * 3 verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } LinkIndicator3DComponent { id: linkXZ + style: control.style pointA: path.pX pointB: path.pZ rotation: 105 // 60 @@ -191,6 +194,7 @@ Rectangle { LinkIndicator3DComponent { id: linkYZ + style: control.style pointA: path.pZ pointB: path.pY rotation: 45 // -180 @@ -198,6 +202,7 @@ Rectangle { LinkIndicator3DComponent { id: linkXY + style: control.style pointA: path.pY pointB: path.pX rotation: -15 // -60 @@ -211,7 +216,7 @@ Rectangle { color: StudioTheme.Values.theme3DAxisXColor font.family: StudioTheme.Constants.font.family - font.pixelSize: StudioTheme.Values.myFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } @@ -223,7 +228,7 @@ Rectangle { color: StudioTheme.Values.theme3DAxisYColor font.family: StudioTheme.Constants.font.family - font.pixelSize: StudioTheme.Values.myFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } @@ -235,7 +240,7 @@ Rectangle { color: StudioTheme.Values.theme3DAxisZColor font.family: StudioTheme.Constants.font.family - font.pixelSize: StudioTheme.Values.myFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } @@ -244,9 +249,9 @@ Rectangle { } background: Rectangle { - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeInteraction - border.width: StudioTheme.Values.border + color: control.style.background.idle + border.color: control.style.interaction + border.width: control.style.borderWidth } enter: Transition {} @@ -259,7 +264,7 @@ Rectangle { when: !mouseArea.containsMouse && !linkPopup.opened PropertyChanges { target: linkIndicatorIcon - color: StudioTheme.Values.themeLinkIndicatorColor + color: control.style.indicator.idle } }, State { @@ -267,7 +272,7 @@ Rectangle { when: mouseArea.containsMouse && !linkPopup.opened PropertyChanges { target: linkIndicatorIcon - color: StudioTheme.Values.themeLinkIndicatorColorHover + color: control.style.indicator.hover } }, State { @@ -275,7 +280,7 @@ Rectangle { when: linkPopup.opened PropertyChanges { target: linkIndicatorIcon - color: StudioTheme.Values.themeLinkIndicatorColorInteraction + color: control.style.indicator.interaction } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3DComponent.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3DComponent.qml index a0a7088bd23..7ca6fdf630f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3DComponent.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3DComponent.qml @@ -1,12 +1,14 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Rectangle { - id: root + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property var pointA: Qt.vector2d() property var pointB: Qt.vector2d() @@ -14,14 +16,14 @@ Rectangle { property bool linked: false property var middle: { - var ab = root.pointB.minus(root.pointA) // B - A - return root.pointA.plus(ab.normalized().times(ab.length() * 0.5)) + var ab = control.pointB.minus(control.pointA) // B - A + return control.pointA.plus(ab.normalized().times(ab.length() * 0.5)) } property var position: { // Calculate the middle point between A and B - var ab = root.pointB.minus(root.pointA) // B - A - var midAB = root.pointA.plus(ab.normalized().times(ab.length() * 0.5)) + var ab = control.pointB.minus(control.pointA) // B - A + var midAB = control.pointA.plus(ab.normalized().times(ab.length() * 0.5)) var perpendicularAB = Qt.vector2d(ab.y, -ab.x) return midAB.plus(perpendicularAB.normalized().times(8.0 * StudioTheme.Values.scaleFactor)) } @@ -29,23 +31,23 @@ Rectangle { color: "transparent" border.color: "transparent" - x: root.position.x - (StudioTheme.Values.height * 0.5) - y: root.position.y - (StudioTheme.Values.height * 0.5) + x: control.position.x - (control.style.squareControlSize.width * 0.5) + y: control.position.y - (control.style.squareControlSize.height * 0.5) - implicitWidth: StudioTheme.Values.height - implicitHeight: StudioTheme.Values.height + implicitWidth: control.style.squareControlSize.width + implicitHeight: control.style.squareControlSize.height transformOrigin: Item.Center T.Label { id: icon anchors.fill: parent - text: root.linked ? StudioTheme.Constants.linked - : StudioTheme.Constants.unLinked + text: control.linked ? StudioTheme.Constants.linked + : StudioTheme.Constants.unLinked visible: true color: "grey" font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } @@ -55,7 +57,7 @@ Rectangle { anchors.fill: parent anchors.margins: 4.0 * StudioTheme.Values.scaleFactor hoverEnabled: true - onPressed: root.linked = !root.linked + onPressed: control.linked = !control.linked } states: [ diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml index d0fb8719ad1..ca1e1eb07a9 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml @@ -1,21 +1,23 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Window 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Window +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.Menu { id: control + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, contentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, contentHeight + topPadding + bottomPadding) font.family: StudioTheme.Constants.font.family - font.pixelSize: StudioTheme.Values.myFontSize + font.pixelSize: control.style.baseFontSize margins: 0 overlap: 1 @@ -25,7 +27,7 @@ T.Menu { | T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside | T.Popup.CloseOnReleaseOutsideParent - delegate: MenuItem {} + delegate: MenuItem { style: control.style } contentItem: ListView { model: control.contentModel @@ -37,9 +39,10 @@ T.Menu { background: Rectangle { implicitWidth: contentItem.childrenRect.width implicitHeight: contentItem.childrenRect.height - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth + MouseArea { // This mouse area is here to eat clicks that are not handled by menu items // to prevent them going through to the underlying view. diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml index e9925741b55..140adb18cdf 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml @@ -1,15 +1,17 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.MenuItem { id: control - property int labelSpacing: StudioTheme.Values.contextMenuLabelSpacing + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + property int labelSpacing: control.style.contextMenuLabelSpacing implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) @@ -19,7 +21,7 @@ T.MenuItem { padding: 0 spacing: 0 - horizontalPadding: StudioTheme.Values.contextMenuHorizontalPadding + horizontalPadding: control.style.contextMenuHorizontalPadding action: Action {} contentItem: Item { @@ -27,8 +29,7 @@ T.MenuItem { id: textLabel text: control.text font: control.font - color: control.enabled ? StudioTheme.Values.themeTextColor - : StudioTheme.Values.themeTextColorDisabled + color: control.enabled ? control.style.text.idle : control.style.text.disabled anchors.verticalCenter: parent.verticalCenter } @@ -42,19 +43,19 @@ T.MenuItem { Shortcut { id: shortcut - property int shortcutWorkaround: control.action.shortcut ? control.action.shortcut : 0 - sequence: shortcutWorkaround + property int shortcutWorkaround: control.action.shortcut ?? 0 + sequence: shortcut.shortcutWorkaround } } } arrow: T.Label { id: arrow - x: parent.width - (StudioTheme.Values.height + arrow.width) / 2 + x: parent.width - (control.style.controlSize.height + arrow.width) / 2 y: (parent.height - arrow.height) / 2 visible: control.subMenu text: StudioTheme.Constants.startNode - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle font.pixelSize: 8 font.family: StudioTheme.Constants.iconFont.family } @@ -62,13 +63,13 @@ T.MenuItem { background: Rectangle { implicitWidth: textLabel.implicitWidth + control.labelSpacing + shortcutLabel.implicitWidth + control.leftPadding + control.rightPadding - implicitHeight: StudioTheme.Values.height - x: StudioTheme.Values.border - y: StudioTheme.Values.border - width: control.menu.width - (StudioTheme.Values.border * 2) - height: control.height - (StudioTheme.Values.border * 2) + implicitHeight: control.style.controlSize.height + x: control.style.borderWidth + y: control.style.borderWidth + width: control.menu.width - (control.style.borderWidth * 2) + height: control.height - (control.style.borderWidth * 2) color: control.down ? control.palette.midlight - : control.highlighted ? StudioTheme.Values.themeInteraction + : control.highlighted ? control.style.interaction : "transparent" } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItemWithIcon.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItemWithIcon.qml index 2dd8cdc7307..73f1364d37c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItemWithIcon.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItemWithIcon.qml @@ -1,15 +1,17 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Controls +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.MenuItem { id: control - property int labelSpacing: StudioTheme.Values.contextMenuLabelSpacing + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + property int labelSpacing: control.style.contextMenuLabelSpacing implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) @@ -20,7 +22,7 @@ T.MenuItem { padding: 0 spacing: 0 - horizontalPadding: StudioTheme.Values.contextMenuHorizontalPadding + horizontalPadding: control.style.contextMenuHorizontalPadding action: Action {} contentItem: Item { @@ -28,18 +30,18 @@ T.MenuItem { id: iconLabel text: control.checked ? StudioTheme.Constants.tickIcon : "" visible: true - color: control.enabled ? StudioTheme.Values.themeTextColor : StudioTheme.Values.themeTextColorDisabled + color: control.enabled ? control.style.icon.idle : control.style.icon.disabled font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize anchors.verticalCenter: parent.verticalCenter } Text { id: textLabel - x: StudioTheme.Values.height + x: control.style.squareControlSize.width text: control.text font: control.font - color: control.enabled ? StudioTheme.Values.themeTextColor : StudioTheme.Values.themeTextColorDisabled + color: control.enabled ? control.style.text.idle : control.style.text.disabled anchors.verticalCenter: parent.verticalCenter } } @@ -47,11 +49,13 @@ T.MenuItem { background: Rectangle { implicitWidth: iconLabel.implicitWidth + textLabel.implicitWidth + control.labelSpacing + control.leftPadding + control.rightPadding - implicitHeight: StudioTheme.Values.height - x: StudioTheme.Values.border - y: StudioTheme.Values.border - width: control.menu.width - (StudioTheme.Values.border * 2) - height: control.height - (StudioTheme.Values.border * 2) - color: control.down ? control.palette.midlight : control.highlighted ? StudioTheme.Values.themeInteraction : "transparent" + implicitHeight: control.style.controlSize.height + x: control.style.borderWidth + y: control.style.borderWidth + width: control.menu.width - (control.style.borderWidth * 2) + height: control.height - (control.style.borderWidth * 2) + color: control.down ? control.palette.midlight + : control.highlighted ? control.style.interaction + : "transparent" } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml index 8dcf6a0b73e..e37635b138b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml @@ -1,13 +1,15 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.MenuSeparator { id: control + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, @@ -16,7 +18,7 @@ T.MenuSeparator { contentItem: Rectangle { implicitWidth: control.parent.width - implicitHeight: StudioTheme.Values.border - color: StudioTheme.Values.themeControlOutline + implicitHeight: control.style.borderWidth + color: control.style.border.idle } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ProgressBar.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ProgressBar.qml index 01e2a3a1c55..6e98d60fc97 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ProgressBar.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ProgressBar.qml @@ -1,27 +1,5 @@ -/**************************************************************************** -** -** Copyright (C) 2022 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of Qt Creator. -** -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU General Public License Usage -** Alternatively, this file may be used under the terms of the GNU -** General Public License version 3 as published by the Free Software -** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT -** included in the packaging of this file. Please review the following -** information to ensure the GNU General Public License requirements will -** be met: https://www.gnu.org/licenses/gpl-3.0.html. -** -****************************************************************************/ +// 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 import QtQuick.Templates as T @@ -30,6 +8,8 @@ import StudioTheme 1.0 as StudioTheme T.ProgressBar { id: control + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, @@ -42,13 +22,13 @@ T.ProgressBar { Rectangle { width: control.visualPosition * parent.width height: parent.height - color: StudioTheme.Values.themeInteraction + color: control.style.interaction } } background: Rectangle { implicitWidth: 200 implicitHeight: 6 - color: StudioTheme.Values.themeThumbnailLabelBackground + color: control.style.thumbnailLabelBackground } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RadioButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RadioButton.qml index e3b5aae884f..cbb3be79a7c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RadioButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RadioButton.qml @@ -1,22 +1,24 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.RadioButton { - id: root + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property alias actionIndicator: actionIndicator // This property is used to indicate the global hover state - property bool hover: root.hovered && root.enabled + property bool hover: control.hovered && control.enabled property bool edit: false property alias actionIndicatorVisible: actionIndicator.visible - property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth - property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + property real __actionIndicatorWidth: control.style.actionIndicatorSize.width + property real __actionIndicatorHeight: control.style.actionIndicatorSize.height property alias labelVisible: radioButtonLabel.visible property alias labelColor: radioButtonLabel.color @@ -24,7 +26,7 @@ T.RadioButton { property alias fontFamily: radioButtonLabel.font.family property alias fontPixelSize: radioButtonLabel.font.pixelSize - font.pixelSize: StudioTheme.Values.myFontSize + font.pixelSize: control.style.baseFontSize implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) @@ -32,119 +34,120 @@ T.RadioButton { implicitContentHeight + topPadding + bottomPadding, implicitIndicatorHeight + topPadding + bottomPadding) - spacing: StudioTheme.Values.radioButtonSpacing + spacing: control.style.controlSpacing hoverEnabled: true activeFocusOnTab: false ActionIndicator { id: actionIndicator - myControl: root - width: actionIndicator.visible ? root.__actionIndicatorWidth : 0 - height: actionIndicator.visible ? root.__actionIndicatorHeight : 0 + style: control.style + __parentControl: control + width: actionIndicator.visible ? control.__actionIndicatorWidth : 0 + height: actionIndicator.visible ? control.__actionIndicatorHeight : 0 } indicator: Rectangle { id: radioButtonBackground - implicitWidth: StudioTheme.Values.radioButtonWidth - implicitHeight: StudioTheme.Values.radioButtonHeight + implicitWidth: control.style.squareControlSize.width + implicitHeight: control.style.squareControlSize.height x: actionIndicator.width y: 0 z: 5 radius: width / 2 - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth Rectangle { id: radioButtonIndicator x: (parent.width - width) / 2 y: (parent.height - height) / 2 - width: StudioTheme.Values.radioButtonIndicatorWidth - height: StudioTheme.Values.radioButtonIndicatorHeight + width: control.style.radioButtonIndicatorSize.width + height: control.style.radioButtonIndicatorSize.height radius: width / 2 - color: StudioTheme.Values.themeInteraction - visible: root.checked + color: control.style.interaction + visible: control.checked } } contentItem: T.Label { id: radioButtonLabel - leftPadding: radioButtonBackground.x + radioButtonBackground.width + root.spacing + leftPadding: radioButtonBackground.x + radioButtonBackground.width + control.spacing rightPadding: 0 verticalAlignment: Text.AlignVCenter - text: root.text - font: root.font - color: StudioTheme.Values.themeTextColor + text: control.text + font: control.font + color: control.style.text.idle visible: text !== "" } states: [ State { name: "default" - when: root.enabled && !root.hover && !root.pressed && !actionIndicator.hover + when: control.enabled && !control.hover && !control.pressed && !actionIndicator.hover PropertyChanges { target: radioButtonBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle } PropertyChanges { target: radioButtonIndicator - color: StudioTheme.Values.themeInteraction + color: control.style.interaction } }, State { name: "globalHover" - when: actionIndicator.hover && !root.pressed && root.enabled + when: actionIndicator.hover && !control.pressed && control.enabled PropertyChanges { target: radioButtonBackground - color: StudioTheme.Values.themeControlBackgroundGlobalHover - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.globalHover + border.color: control.style.border.idle } PropertyChanges { target: radioButtonIndicator - color: StudioTheme.Values.themeInteraction + color: control.style.interaction } }, State { name: "hover" - when: root.hover && !actionIndicator.hover && !root.pressed + when: control.hover && !actionIndicator.hover && !control.pressed PropertyChanges { target: radioButtonBackground - color: StudioTheme.Values.themeControlBackgroundHover - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.hover + border.color: control.style.border.idle } PropertyChanges { target: radioButtonIndicator - color: StudioTheme.Values.themeInteraction + color: control.style.interaction } }, State { name: "press" - when: root.hover && root.pressed + when: control.hover && control.pressed PropertyChanges { target: radioButtonBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + color: control.style.background.interaction + border.color: control.style.border.interaction } PropertyChanges { target: radioButtonIndicator - color: StudioTheme.Values.themeInteraction + color: control.style.interaction } }, State { name: "disable" - when: !root.enabled + when: !control.enabled PropertyChanges { target: radioButtonBackground - color: StudioTheme.Values.themeControlBackgroundDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + color: control.style.background.disabled + border.color: control.style.border.disabled } PropertyChanges { target: radioButtonIndicator - color: StudioTheme.Values.themeIconColorDisabled + color: control.style.icon.disabled } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml index 9999766ebf3..86d5e6ee277 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml @@ -1,14 +1,16 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.Popup { - id: sliderPopup + id: control - property T.Control myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + property T.Control __parentControl property bool drag: slider.pressed @@ -18,7 +20,7 @@ T.Popup { | T.Popup.CloseOnReleaseOutsideParent background: Rectangle { - color: StudioTheme.Values.themePopupBackground + color: control.style.popup.background border.width: 0 } @@ -31,41 +33,41 @@ T.Popup { rightPadding: 3 leftPadding: 3 - from: myControl.realFrom - value: myControl.realValue - to: myControl.realTo + from: control.__parentControl.realFrom + value: control.__parentControl.realValue + to: control.__parentControl.realTo focusPolicy: Qt.NoFocus handle: Rectangle { x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width) y: slider.topPadding + (slider.availableHeight / 2) - (height / 2) - width: StudioTheme.Values.sliderHandleWidth - height: StudioTheme.Values.sliderHandleHeight + width: control.style.sliderHandleSize.width + height: control.style.sliderHandleSize.height radius: 0 - color: slider.pressed ? StudioTheme.Values.themeSliderHandleInteraction - : StudioTheme.Values.themeSliderHandle + color: slider.pressed ? control.style.slider.handleInteraction + : control.style.slider.handle } background: Rectangle { x: slider.leftPadding y: slider.topPadding + (slider.availableHeight / 2) - (height / 2) width: slider.availableWidth - height: StudioTheme.Values.sliderTrackHeight + height: control.style.sliderTrackHeight radius: 0 - color: StudioTheme.Values.themeSliderInactiveTrack + color: control.style.slider.inactiveTrack Rectangle { width: slider.visualPosition * parent.width height: parent.height - color: StudioTheme.Values.themeSliderActiveTrack + color: control.style.slider.activeTrack radius: 0 } } onMoved: { - myControl.realValue = slider.value - myControl.realValueModified() + control.__parentControl.realValue = slider.value + control.__parentControl.realValueModified() } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml index b4c65b9f759..42df0bcde0e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml @@ -1,12 +1,14 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.SpinBox { - id: mySpinBox + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property real realFrom: 0.0 property real realTo: 99.0 @@ -19,38 +21,38 @@ T.SpinBox { property int decimals: 0 property real minStepSize: { - var tmpMinStepSize = Number((mySpinBox.realStepSize * 0.1).toFixed(mySpinBox.decimals)) - return (tmpMinStepSize) ? tmpMinStepSize : mySpinBox.realStepSize + var tmpMinStepSize = Number((control.realStepSize * 0.1).toFixed(control.decimals)) + return (tmpMinStepSize) ? tmpMinStepSize : control.realStepSize } property real maxStepSize: { - var tmpMaxStepSize = Number((mySpinBox.realStepSize * 10.0).toFixed(mySpinBox.decimals)) - return (tmpMaxStepSize < mySpinBox.realTo) ? tmpMaxStepSize : mySpinBox.realStepSize + var tmpMaxStepSize = Number((control.realStepSize * 10.0).toFixed(control.decimals)) + return (tmpMaxStepSize < control.realTo) ? tmpMaxStepSize : control.realStepSize } property bool edit: spinBoxInput.activeFocus // This property is used to indicate the global hover state property bool hover: (spinBoxInput.hover || actionIndicator.hover || spinBoxIndicatorUp.hover || spinBoxIndicatorDown.hover || sliderIndicator.hover) - && mySpinBox.enabled + && control.enabled property bool drag: false property bool sliderDrag: sliderPopup.drag property bool dirty: false // user modification flag // TODO Not used anymore. Will be removed when all dependencies were removed. - property real realDragRange: mySpinBox.realTo - mySpinBox.realFrom + property real realDragRange: control.realTo - control.realFrom property alias actionIndicatorVisible: actionIndicator.visible - property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth - property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + property real __actionIndicatorWidth: control.style.actionIndicatorSize.width + property real __actionIndicatorHeight: control.style.actionIndicatorSize.height property bool spinBoxIndicatorVisible: true - property real __spinBoxIndicatorWidth: StudioTheme.Values.spinBoxIndicatorWidth - property real __spinBoxIndicatorHeight: StudioTheme.Values.spinBoxIndicatorHeight + property real __spinBoxIndicatorWidth: control.style.spinBoxIndicatorSize.width + property real __spinBoxIndicatorHeight: control.style.spinBoxIndicatorSize.height property alias sliderIndicatorVisible: sliderIndicator.visible - property real __sliderIndicatorWidth: StudioTheme.Values.sliderIndicatorWidth - property real __sliderIndicatorHeight: StudioTheme.Values.sliderIndicatorHeight + property real __sliderIndicatorWidth: control.style.squareControlSize.width + property real __sliderIndicatorHeight: control.style.squareControlSize.height property alias __devicePixelRatio: spinBoxInput.devicePixelRatio property alias pixelsPerUnit: spinBoxInput.pixelsPerUnit @@ -71,13 +73,13 @@ T.SpinBox { wheelEnabled: false hoverEnabled: true - width: StudioTheme.Values.defaultControlWidth - height: StudioTheme.Values.defaultControlHeight + width: control.style.controlSize.width + height: control.style.controlSize.height leftPadding: spinBoxIndicatorDown.x + spinBoxIndicatorDown.width - rightPadding: sliderIndicator.width + StudioTheme.Values.border + rightPadding: sliderIndicator.width + control.style.borderWidth - font.pixelSize: StudioTheme.Values.myFontSize + font.pixelSize: control.style.baseFontSize editable: true // Leave this in for now @@ -87,107 +89,113 @@ T.SpinBox { validator: DoubleValidator { id: doubleValidator - locale: mySpinBox.locale.name + locale: control.locale.name notation: DoubleValidator.StandardNotation - decimals: mySpinBox.decimals - bottom: Math.min(mySpinBox.realFrom, mySpinBox.realTo) - top: Math.max(mySpinBox.realFrom, mySpinBox.realTo) + decimals: control.decimals + bottom: Math.min(control.realFrom, control.realTo) + top: Math.max(control.realFrom, control.realTo) } ActionIndicator { id: actionIndicator - myControl: mySpinBox + style: control.style + __parentControl: control x: 0 y: 0 - width: actionIndicator.visible ? mySpinBox.__actionIndicatorWidth : 0 - height: actionIndicator.visible ? mySpinBox.__actionIndicatorHeight : 0 + width: actionIndicator.visible ? control.__actionIndicatorWidth : 0 + height: actionIndicator.visible ? control.__actionIndicatorHeight : 0 } up.indicator: RealSpinBoxIndicator { id: spinBoxIndicatorUp - myControl: mySpinBox + style: control.style + __parentControl: control iconFlip: -1 - visible: mySpinBox.spinBoxIndicatorVisible - onRealPressed: mySpinBox.indicatorPressed() - onRealReleased: mySpinBox.realIncrease() - onRealPressAndHold: mySpinBox.realIncrease() - x: actionIndicator.width + StudioTheme.Values.border - y: StudioTheme.Values.border - width: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorWidth : 0 - height: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorHeight : 0 + visible: control.spinBoxIndicatorVisible + onRealPressed: control.indicatorPressed() + onRealReleased: control.realIncrease() + onRealPressAndHold: control.realIncrease() + x: actionIndicator.width + control.style.borderWidth + y: control.style.borderWidth + width: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorWidth : 0 + height: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorHeight : 0 - realEnabled: (mySpinBox.realFrom < mySpinBox.realTo) ? (mySpinBox.realValue < mySpinBox.realTo) - : (mySpinBox.realValue > mySpinBox.realTo) + realEnabled: (control.realFrom < control.realTo) ? (control.realValue < control.realTo) + : (control.realValue > control.realTo) } down.indicator: RealSpinBoxIndicator { id: spinBoxIndicatorDown - myControl: mySpinBox - visible: mySpinBox.spinBoxIndicatorVisible - onRealPressed: mySpinBox.indicatorPressed() - onRealReleased: mySpinBox.realDecrease() - onRealPressAndHold: mySpinBox.realDecrease() - x: actionIndicator.width + StudioTheme.Values.border + style: control.style + __parentControl: control + visible: control.spinBoxIndicatorVisible + onRealPressed: control.indicatorPressed() + onRealReleased: control.realDecrease() + onRealPressAndHold: control.realDecrease() + x: actionIndicator.width + control.style.borderWidth y: spinBoxIndicatorUp.y + spinBoxIndicatorUp.height - width: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorWidth : 0 - height: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorHeight : 0 + width: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorWidth : 0 + height: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorHeight : 0 - realEnabled: (mySpinBox.realFrom < mySpinBox.realTo) ? (mySpinBox.realValue > mySpinBox.realFrom) - : (mySpinBox.realValue < mySpinBox.realFrom) + realEnabled: (control.realFrom < control.realTo) ? (control.realValue > control.realFrom) + : (control.realValue < control.realFrom) } contentItem: RealSpinBoxInput { id: spinBoxInput - myControl: mySpinBox + style: control.style + __parentControl: control validator: doubleValidator function handleEditingFinished() { - mySpinBox.focus = false + control.focus = false // Keep the dirty state before calling setValueFromInput(), // it will be set to false (cleared) internally - var valueModified = mySpinBox.dirty + var valueModified = control.dirty - mySpinBox.setValueFromInput() + control.setValueFromInput() myTimer.stop() // Only trigger the signal, if the value was modified if (valueModified) - mySpinBox.compressedRealValueModified() + control.compressedRealValueModified() } onEditingFinished: spinBoxInput.handleEditingFinished() - onTextEdited: mySpinBox.dirty = true + onTextEdited: control.dirty = true } background: Rectangle { id: spinBoxBackground - color: StudioTheme.Values.themeControlOutline - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth x: actionIndicator.width - width: mySpinBox.width - actionIndicator.width - height: mySpinBox.height + width: control.width - actionIndicator.width + height: control.height } CheckIndicator { id: sliderIndicator - myControl: mySpinBox - myPopup: sliderPopup + style: control.style + __parentControl: control + __parentPopup: sliderPopup x: spinBoxInput.x + spinBoxInput.width - y: StudioTheme.Values.border - width: sliderIndicator.visible ? mySpinBox.__sliderIndicatorWidth - StudioTheme.Values.border : 0 - height: sliderIndicator.visible ? mySpinBox.__sliderIndicatorHeight - (StudioTheme.Values.border * 2) : 0 + y: control.style.borderWidth + width: sliderIndicator.visible ? control.__sliderIndicatorWidth - control.style.borderWidth : 0 + height: sliderIndicator.visible ? control.__sliderIndicatorHeight - (control.style.borderWidth * 2) : 0 visible: false // reasonable default } RealSliderPopup { id: sliderPopup - myControl: mySpinBox - x: actionIndicator.width + StudioTheme.Values.border - y: StudioTheme.Values.height - width: mySpinBox.width - actionIndicator.width - (StudioTheme.Values.border * 2) - height: StudioTheme.Values.sliderHeight + style: control.style + __parentControl: control + x: actionIndicator.width + control.style.borderWidth + y: control.style.controlSize.height + width: control.width - actionIndicator.width - (control.style.borderWidth * 2) + height: control.style.smallControlSize.height enter: Transition {} exit: Transition {} @@ -195,21 +203,21 @@ T.SpinBox { textFromValue: function (value, locale) { locale.numberOptions = Locale.OmitGroupSeparator - return Number(mySpinBox.realValue).toLocaleString(locale, 'f', mySpinBox.decimals) + return Number(control.realValue).toLocaleString(locale, 'f', control.decimals) } valueFromText: function (text, locale) { - mySpinBox.setRealValue(Number.fromLocaleString(locale, spinBoxInput.text)) + control.setRealValue(Number.fromLocaleString(locale, spinBoxInput.text)) return 0 } states: [ State { name: "default" - when: mySpinBox.enabled && !mySpinBox.hover && !mySpinBox.hovered - && !mySpinBox.edit && !mySpinBox.drag && !mySpinBox.sliderDrag + when: control.enabled && !control.hover && !control.hovered + && !control.edit && !control.drag && !control.sliderDrag PropertyChanges { - target: mySpinBox + target: control __wheelEnabled: false } PropertyChanges { @@ -218,15 +226,15 @@ T.SpinBox { } PropertyChanges { target: spinBoxBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle } }, State { name: "edit" - when: mySpinBox.edit + when: control.edit PropertyChanges { - target: mySpinBox + target: control __wheelEnabled: true } PropertyChanges { @@ -235,26 +243,26 @@ T.SpinBox { } PropertyChanges { target: spinBoxBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.interaction + border.color: control.style.border.idle } }, State { name: "drag" - when: mySpinBox.drag || mySpinBox.sliderDrag + when: control.drag || control.sliderDrag PropertyChanges { target: spinBoxBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + color: control.style.background.interaction + border.color: control.style.border.interaction } }, State { name: "disable" - when: !mySpinBox.enabled + when: !control.enabled PropertyChanges { target: spinBoxBackground - color: StudioTheme.Values.themeControlOutlineDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + color: control.style.background.disabled + border.color: control.style.border.disabled } } ] @@ -264,32 +272,32 @@ T.SpinBox { repeat: false running: false interval: 400 - onTriggered: mySpinBox.compressedRealValueModified() + onTriggered: control.compressedRealValueModified() } onRealValueChanged: { - mySpinBox.setRealValue(mySpinBox.realValue) // sanitize and clamp realValue - spinBoxInput.text = mySpinBox.textFromValue(mySpinBox.realValue, mySpinBox.locale) - mySpinBox.value = 0 // Without setting value back to 0, it can happen that one of + control.setRealValue(control.realValue) // sanitize and clamp realValue + spinBoxInput.text = control.textFromValue(control.realValue, control.locale) + control.value = 0 // Without setting value back to 0, it can happen that one of // the indicator will be disabled due to range logic. } onRealValueModified: myTimer.restart() onFocusChanged: { - if (mySpinBox.focus) { - mySpinBox.dirty = false + if (control.focus) { + control.dirty = false } else { // Make sure displayed value is correct after focus loss, as onEditingFinished // doesn't trigger when value is something validator doesn't accept. - spinBoxInput.text = mySpinBox.textFromValue(mySpinBox.realValue, mySpinBox.locale) + spinBoxInput.text = control.textFromValue(control.realValue, control.locale) - if (mySpinBox.dirty) + if (control.dirty) spinBoxInput.handleEditingFinished() } } - onDisplayTextChanged: spinBoxInput.text = mySpinBox.displayText + onDisplayTextChanged: spinBoxInput.text = control.displayText onActiveFocusChanged: { - if (mySpinBox.activeFocus) { // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason) - mySpinBox.preFocusText = spinBoxInput.text + if (control.activeFocus) { // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason) + control.preFocusText = spinBoxInput.text spinBoxInput.selectAll() } } @@ -299,27 +307,27 @@ T.SpinBox { event.accepted = true // Store current step size - var currStepSize = mySpinBox.realStepSize + var currStepSize = control.realStepSize // Set realStepSize according to used modifier key if (event.modifiers & Qt.ControlModifier) - mySpinBox.realStepSize = mySpinBox.minStepSize + control.realStepSize = control.minStepSize if (event.modifiers & Qt.ShiftModifier) - mySpinBox.realStepSize = mySpinBox.maxStepSize + control.realStepSize = control.maxStepSize if (event.key === Qt.Key_Up) - mySpinBox.realIncrease() + control.realIncrease() else - mySpinBox.realDecrease() + control.realDecrease() // Reset realStepSize - mySpinBox.realStepSize = currStepSize + control.realStepSize = currStepSize } if (event.key === Qt.Key_Escape) { - spinBoxInput.text = mySpinBox.preFocusText - mySpinBox.dirty = true + spinBoxInput.text = control.preFocusText + control.dirty = true spinBoxInput.handleEditingFinished() } } @@ -329,60 +337,60 @@ T.SpinBox { } function setValueFromInput() { - if (!mySpinBox.dirty) + if (!control.dirty) return // FIX: This is a temporary fix for QTBUG-74239 - var currValue = mySpinBox.realValue + var currValue = control.realValue // Call the function but don't use return value. The realValue property // will be implicitly set inside the function/procedure. - mySpinBox.valueFromText(spinBoxInput.text, mySpinBox.locale) + control.valueFromText(spinBoxInput.text, control.locale) - if (mySpinBox.realValue !== currValue) { - mySpinBox.realValueModified() + if (control.realValue !== currValue) { + control.realValueModified() } else { // Check if input text differs in format from the current value - var tmpInputValue = mySpinBox.textFromValue(mySpinBox.realValue, mySpinBox.locale) + var tmpInputValue = control.textFromValue(control.realValue, control.locale) if (tmpInputValue !== spinBoxInput.text) spinBoxInput.text = tmpInputValue } - mySpinBox.dirty = false + control.dirty = false } function setRealValue(value) { if (Number.isNaN(value)) value = 0 - if (mySpinBox.decimals === 0) + if (control.decimals === 0) value = Math.round(value) - mySpinBox.realValue = mySpinBox.clamp(value, - mySpinBox.validator.bottom, - mySpinBox.validator.top) + control.realValue = control.clamp(value, + control.validator.bottom, + control.validator.top) } function realDecrease() { // Store the current value for comparison - var currValue = mySpinBox.realValue - mySpinBox.valueFromText(spinBoxInput.text, mySpinBox.locale) + var currValue = control.realValue + control.valueFromText(spinBoxInput.text, control.locale) - mySpinBox.setRealValue(mySpinBox.realValue - mySpinBox.realStepSize) + control.setRealValue(control.realValue - control.realStepSize) - if (mySpinBox.realValue !== currValue) - mySpinBox.realValueModified() + if (control.realValue !== currValue) + control.realValueModified() } function realIncrease() { // Store the current value for comparison - var currValue = mySpinBox.realValue - mySpinBox.valueFromText(spinBoxInput.text, mySpinBox.locale) + var currValue = control.realValue + control.valueFromText(spinBoxInput.text, control.locale) - mySpinBox.setRealValue(mySpinBox.realValue + mySpinBox.realStepSize) + control.setRealValue(control.realValue + control.realStepSize) - if (mySpinBox.realValue !== currValue) - mySpinBox.realValueModified() + if (control.realValue !== currValue) + control.realValueModified() } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml index 72d06f8ecab..e9b98e175f9 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml @@ -1,14 +1,16 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Rectangle { - id: spinBoxIndicator + id: control - property T.Control myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + property T.Control __parentControl property bool hover: spinBoxIndicatorMouseArea.containsMouse property bool pressed: spinBoxIndicatorMouseArea.containsPress @@ -21,13 +23,13 @@ Rectangle { property alias iconFlip: spinBoxIndicatorIconScale.yScale - color: StudioTheme.Values.themeControlBackground + color: control.style.background.idle border.width: 0 - onEnabledChanged: syncEnabled() + onEnabledChanged: control.syncEnabled() onRealEnabledChanged: { - syncEnabled() - if (spinBoxIndicator.realEnabled === false) { + control.syncEnabled() + if (control.realEnabled === false) { pressAndHoldTimer.stop() spinBoxIndicatorMouseArea.pressedAndHeld = false } @@ -36,7 +38,7 @@ Rectangle { // This function is meant to synchronize enabled with realEnabled to avoid // the internal logic messing with the actual state. function syncEnabled() { - spinBoxIndicator.enabled = spinBoxIndicator.realEnabled + control.enabled = control.realEnabled } Timer { @@ -44,7 +46,7 @@ Rectangle { repeat: true running: false interval: 100 - onTriggered: spinBoxIndicator.realPressAndHold() + onTriggered: control.realPressAndHold() } // This MouseArea is a workaround to avoid some hover state related bugs @@ -58,26 +60,26 @@ Rectangle { hoverEnabled: true pressAndHoldInterval: 500 onPressed: function(mouse) { - if (myControl.activeFocus) - spinBoxIndicator.forceActiveFocus() + if (control.__parentControl.activeFocus) + control.forceActiveFocus() - spinBoxIndicator.realPressed() + control.realPressed() mouse.accepted = true } onPressAndHold: { pressAndHoldTimer.restart() - pressedAndHeld = true + spinBoxIndicatorMouseArea.pressedAndHeld = true } onReleased: function(mouse) { // Only trigger real released when pressAndHold isn't active if (!pressAndHoldTimer.running && containsMouse) - spinBoxIndicator.realReleased() + control.realReleased() pressAndHoldTimer.stop() mouse.accepted = true - pressedAndHeld = false + spinBoxIndicatorMouseArea.pressedAndHeld = false } onEntered: { - if (pressedAndHeld) + if (spinBoxIndicatorMouseArea.pressedAndHeld) pressAndHoldTimer.restart() } onExited: { @@ -89,10 +91,10 @@ Rectangle { T.Label { id: spinBoxIndicatorIcon text: StudioTheme.Constants.upDownSquare2 - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti + font.pixelSize: control.style.smallIconFontSize font.family: StudioTheme.Constants.iconFont.family anchors.fill: parent transform: Scale { @@ -105,54 +107,57 @@ Rectangle { states: [ State { name: "default" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.edit - && !spinBoxIndicator.hover && !myControl.hover && !myControl.drag + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && !control.hover + && !control.__parentControl.hover && !control.__parentControl.edit PropertyChanges { target: spinBoxIndicatorIcon - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle } }, State { name: "globalHover" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag - && !spinBoxIndicator.hover && myControl.hover && !myControl.edit + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && !control.hover + && control.__parentControl.hover && !control.__parentControl.edit PropertyChanges { target: spinBoxIndicatorIcon - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle } }, State { name: "hover" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag - && spinBoxIndicator.hover && myControl.hover && !spinBoxIndicator.pressed + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && control.hover + && control.__parentControl.hover && !control.pressed PropertyChanges { target: spinBoxIndicatorIcon - color: StudioTheme.Values.themeIconColorHover + color: control.style.icon.hover } }, State { name: "press" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag - && spinBoxIndicator.pressed + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && control.pressed PropertyChanges { target: spinBoxIndicatorIcon - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } }, State { name: "edit" - when: myControl.edit && spinBoxIndicator.enabled + when: control.__parentControl.edit && control.enabled PropertyChanges { target: spinBoxIndicatorIcon - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle } }, State { name: "disable" - when: !myControl.enabled || !spinBoxIndicator.enabled + when: !control.__parentControl.enabled || !control.enabled PropertyChanges { target: spinBoxIndicatorIcon - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.icon.disabled } } ] @@ -161,102 +166,104 @@ Rectangle { states: [ State { name: "default" - when: myControl.enabled && !myControl.edit - && !spinBoxIndicator.hover && !myControl.hover && !myControl.drag + when: control.__parentControl.enabled && !control.__parentControl.edit && !control.hover + && !control.__parentControl.hover && !control.__parentControl.drag PropertyChanges { target: spinBoxIndicatorIcon visible: false } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackground + target: control + color: control.style.background.idle } }, State { name: "globalHover" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag - && !spinBoxIndicator.hover && myControl.hover && !myControl.edit + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && !control.hover + && control.__parentControl.hover && !control.__parentControl.edit PropertyChanges { target: spinBoxIndicatorIcon visible: true } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackgroundGlobalHover + target: control + color: control.style.background.globalHover } }, State { name: "hover" - when: myControl.enabled && !myControl.drag && spinBoxIndicator.enabled - && spinBoxIndicator.hover && myControl.hover && !spinBoxIndicator.pressed + when: control.__parentControl.enabled && !control.__parentControl.drag + && control.enabled && control.hover && control.__parentControl.hover + && !control.pressed PropertyChanges { target: spinBoxIndicatorIcon visible: true } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackgroundHover + target: control + color: control.style.background.hover } }, State { name: "press" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag - && spinBoxIndicator.pressed + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && control.pressed PropertyChanges { target: spinBoxIndicatorIcon visible: true } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeInteraction + target: control + color: control.style.interaction } }, State { name: "edit" - when: myControl.edit && myControl.enabled && spinBoxIndicator.enabled + when: control.__parentControl.edit && control.__parentControl.enabled && control.enabled PropertyChanges { target: spinBoxIndicatorIcon visible: true } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackground + target: control + color: control.style.background.idle } }, State { name: "drag" - when: myControl.drag && myControl.enabled + when: control.__parentControl.drag && control.__parentControl.enabled PropertyChanges { target: spinBoxIndicatorIcon visible: false } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackgroundInteraction + target: control + color: control.style.background.interaction } }, State { name: "disable" - when: !myControl.enabled + when: !control.__parentControl.enabled PropertyChanges { target: spinBoxIndicatorIcon visible: false } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackgroundDisabled + target: control + color: control.style.background.disabled } }, State { name: "limit" - when: !spinBoxIndicator.enabled && !spinBoxIndicator.realEnabled && myControl.hover + when: !control.enabled && !control.realEnabled && control.__parentControl.hover PropertyChanges { target: spinBoxIndicatorIcon visible: true } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackground + target: control + color: control.style.background.idle } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml index f25ad87603c..72db09a84f4 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml @@ -1,36 +1,38 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme TextInput { - id: textInput + id: control - property T.Control myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle - property bool edit: textInput.activeFocus + property T.Control __parentControl + + property bool edit: control.activeFocus property bool drag: false - property bool hover: mouseArea.containsMouse && textInput.enabled + property bool hover: mouseArea.containsMouse && control.enabled property int devicePixelRatio: 1 property int pixelsPerUnit: 10 z: 2 - font: myControl.font - color: StudioTheme.Values.themeTextColor - selectionColor: StudioTheme.Values.themeTextSelectionColor - selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor + font: control.__parentControl.font + color: control.style.text.idle + selectionColor: control.style.text.selection + selectedTextColor: control.style.text.selectedText horizontalAlignment: Qt.AlignRight verticalAlignment: Qt.AlignVCenter - leftPadding: StudioTheme.Values.inputHorizontalPadding - rightPadding: StudioTheme.Values.inputHorizontalPadding + leftPadding: control.style.inputHorizontalPadding + rightPadding: control.style.inputHorizontalPadding - readOnly: !myControl.editable - validator: myControl.validator - inputMethodHints: myControl.inputMethodHints + readOnly: !control.__parentControl.editable + validator: control.__parentControl.validator + inputMethodHints: control.__parentControl.inputMethodHints selectByMouse: false activeFocusOnPress: false clip: true @@ -38,16 +40,16 @@ TextInput { // TextInput focus needs to be set to activeFocus whenever it changes, // otherwise TextInput will get activeFocus whenever the parent SpinBox gets // activeFocus. This will lead to weird side effects. - onActiveFocusChanged: textInput.focus = textInput.activeFocus + onActiveFocusChanged: control.focus = control.activeFocus Rectangle { id: textInputBackground x: 0 - y: StudioTheme.Values.border + y: control.style.borderWidth z: -1 - width: textInput.width - height: StudioTheme.Values.height - (StudioTheme.Values.border * 2) - color: StudioTheme.Values.themeControlBackground + width: control.width + height: control.style.controlSize.height - (control.style.borderWidth * 2) + color: control.style.background.idle border.width: 0 } @@ -57,22 +59,22 @@ TextInput { event.accepted = true if (event.modifiers & Qt.ControlModifier) { - mouseArea.stepSize = myControl.minStepSize + mouseArea.stepSize = control.__parentControl.minStepSize mouseArea.calcValue() - myControl.realValueModified() + control.__parentControl.realValueModified() } if (event.modifiers & Qt.ShiftModifier) { - mouseArea.stepSize = myControl.maxStepSize + mouseArea.stepSize = control.__parentControl.maxStepSize mouseArea.calcValue() - myControl.realValueModified() + control.__parentControl.realValueModified() } } Keys.onReleased: function(event) { event.accepted = true - mouseArea.stepSize = myControl.realStepSize + mouseArea.stepSize = control.__parentControl.realStepSize mouseArea.calcValue() - myControl.realValueModified() + control.__parentControl.realValueModified() } } @@ -84,14 +86,14 @@ TextInput { MouseArea { id: mouseArea - property real stepSize: myControl.realStepSize + property real stepSize: control.__parentControl.realStepSize // Properties to store the state of a drag operation property bool dragging: false property bool hasDragged: false property bool potentialDragStart: false - property real initialValue: myControl.realValue // value on drag operation starts + property real initialValue: control.__parentControl.realValue // value on drag operation starts property real pressStartX: 0.0 property real dragStartX: 0.0 @@ -101,7 +103,7 @@ TextInput { property real totalUnits: 0.0 // total number of units dragged property real units: 0.0 - property real __pixelsPerUnit: textInput.devicePixelRatio * textInput.pixelsPerUnit + property real __pixelsPerUnit: control.devicePixelRatio * control.pixelsPerUnit anchors.fill: parent enabled: true @@ -113,21 +115,21 @@ TextInput { onPositionChanged: function(mouse) { if (!mouseArea.dragging - && !myControl.edit + && !control.__parentControl.edit && Math.abs(mouseArea.pressStartX - mouse.x) > StudioTheme.Values.dragThreshold && mouse.buttons === Qt.LeftButton && mouseArea.potentialDragStart) { mouseArea.dragging = true mouseArea.potentialDragStart = false - mouseArea.initialValue = myControl.realValue + mouseArea.initialValue = control.__parentControl.realValue mouseArea.cursorShape = Qt.ClosedHandCursor mouseArea.dragStartX = mouse.x - myControl.drag = true - myControl.dragStarted() + control.__parentControl.drag = true + control.__parentControl.dragStarted() // Force focus on the non visible component to receive key events dragModifierWorkaround.forceActiveFocus() - textInput.deselect() + control.deselect() } if (!mouseArea.dragging) @@ -152,11 +154,11 @@ TextInput { mouseArea.translationX += translationX mouseArea.calcValue() - myControl.realValueModified() + control.__parentControl.realValueModified() } onClicked: function(mouse) { - if (textInput.edit) + if (control.edit) mouse.accepted = false if (mouseArea.hasDragged) { @@ -164,12 +166,12 @@ TextInput { return } - textInput.forceActiveFocus() - textInput.deselect() // QTBUG-75862 + control.forceActiveFocus() + control.deselect() // QTBUG-75862 } onPressed: function(mouse) { - if (textInput.edit) + if (control.edit) mouse.accepted = false mouseArea.potentialDragStart = true @@ -177,7 +179,7 @@ TextInput { } onReleased: function(mouse) { - if (textInput.edit) + if (control.edit) mouse.accepted = false mouseArea.endDrag() @@ -190,18 +192,18 @@ TextInput { mouseArea.dragging = false mouseArea.hasDragged = true - if (myControl.compressedValueTimer.running) { - myControl.compressedValueTimer.stop() + if (control.__parentControl.compressedValueTimer.running) { + control.__parentControl.compressedValueTimer.stop() mouseArea.calcValue() - myControl.compressedRealValueModified() + control.__parentControl.compressedRealValueModified() } mouseArea.cursorShape = Qt.PointingHandCursor - myControl.drag = false - myControl.dragEnded() + control.__parentControl.drag = false + control.__parentControl.dragEnded() // Avoid active focus on the component after dragging dragModifierWorkaround.focus = false - textInput.focus = false - myControl.focus = false + control.focus = false + control.__parentControl.focus = false mouseArea.translationX = 0.0 mouseArea.units = 0.0 @@ -209,47 +211,48 @@ TextInput { } function calcValue() { - var minUnit = (myControl.realFrom - mouseArea.initialValue) / mouseArea.stepSize - var maxUnit = (myControl.realTo - mouseArea.initialValue) / mouseArea.stepSize + var minUnit = (control.__parentControl.realFrom - mouseArea.initialValue) / mouseArea.stepSize + var maxUnit = (control.__parentControl.realTo - mouseArea.initialValue) / mouseArea.stepSize var units = Math.trunc(mouseArea.translationX / mouseArea.__pixelsPerUnit) mouseArea.units = Math.min(Math.max(mouseArea.totalUnits + units, minUnit), maxUnit) - myControl.setRealValue(mouseArea.initialValue + (mouseArea.units * mouseArea.stepSize)) + control.__parentControl.setRealValue(mouseArea.initialValue + (mouseArea.units * mouseArea.stepSize)) if (mouseArea.dragging) - myControl.dragging() + control.__parentControl.dragging() } onWheel: function(wheel) { - if (!myControl.__wheelEnabled) { + if (!control.__parentControl.__wheelEnabled) { wheel.accepted = false return } // Set stepSize according to used modifier key if (wheel.modifiers & Qt.ControlModifier) - mouseArea.stepSize = myControl.minStepSize + mouseArea.stepSize = control.__parentControl.minStepSize if (wheel.modifiers & Qt.ShiftModifier) - mouseArea.stepSize = myControl.maxStepSize + mouseArea.stepSize = control.__parentControl.maxStepSize - myControl.valueFromText(textInput.text, myControl.locale) - myControl.setRealValue(myControl.realValue + (wheel.angleDelta.y / 120.0 * mouseArea.stepSize)) - myControl.realValueModified() + control.__parentControl.valueFromText(control.text, control.__parentControl.locale) + control.__parentControl.setRealValue(__parentControl.realValue + (wheel.angleDelta.y / 120.0 * mouseArea.stepSize)) + control.__parentControl.realValueModified() // Reset stepSize - mouseArea.stepSize = myControl.realStepSize + mouseArea.stepSize = control.__parentControl.realStepSize } } states: [ State { name: "default" - when: myControl.enabled && !textInput.edit && !textInput.hover && !myControl.hover - && !myControl.drag && !myControl.sliderDrag + when: control.__parentControl.enabled && !control.edit && !control.hover + && !control.__parentControl.hover && !control.__parentControl.drag + && !control.__parentControl.sliderDrag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackground + color: control.style.background.idle } PropertyChanges { target: mouseArea @@ -258,27 +261,28 @@ TextInput { }, State { name: "globalHover" - when: myControl.hover && !textInput.hover - && !textInput.edit && !myControl.drag + when: control.__parentControl.hover && !control.hover + && !control.edit && !control.__parentControl.drag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundGlobalHover + color: control.style.background.globalHover } }, State { name: "hover" - when: textInput.hover && myControl.hover && !textInput.edit && !myControl.drag + when: control.hover && control.__parentControl.hover && !control.edit + && !control.__parentControl.drag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundHover + color: control.style.background.hover } }, State { name: "edit" - when: textInput.edit && !myControl.drag + when: control.edit && !control.__parentControl.drag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundInteraction + color: control.style.background.interaction } PropertyChanges { target: mouseArea @@ -287,38 +291,38 @@ TextInput { }, State { name: "drag" - when: myControl.drag + when: control.__parentControl.drag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundInteraction + color: control.style.background.interaction } PropertyChanges { - target: textInput - color: StudioTheme.Values.themeInteraction + target: control + color: control.style.interaction } }, State { name: "sliderDrag" - when: myControl.sliderDrag + when: control.__parentControl.sliderDrag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackground + color: control.style.background.idle } PropertyChanges { - target: textInput - color: StudioTheme.Values.themeInteraction + target: control + color: control.style.interaction } }, State { name: "disable" - when: !myControl.enabled + when: !control.__parentControl.enabled PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundDisabled + color: control.style.background.disabled } PropertyChanges { - target: textInput - color: StudioTheme.Values.themeTextColorDisabled + target: control + color: control.style.text.disabled } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml index 8dda9bf0370..abd934a17f8 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml @@ -1,13 +1,15 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.ScrollBar { id: control + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + // This needs to be set, when using T.ScrollBar implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) @@ -31,11 +33,11 @@ T.ScrollBar { implicitWidth: 4 implicitHeight: 4 radius: width / 2 // TODO 0 - color: StudioTheme.Values.themeScrollBarHandle + color: control.style.scrollBar.handle } background: Rectangle { id: controlTrack - color: StudioTheme.Values.themeScrollBarTrack + color: control.style.scrollBar.track } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml index d4f0f5ed174..2254aac38d6 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml @@ -1,13 +1,15 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.ScrollView { id: control + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + property alias horizontalThickness: horizontalScrollBar.height property alias verticalThickness: verticalScrollBar.width property bool bothVisible: verticalScrollBar.visible @@ -20,20 +22,22 @@ T.ScrollView { ScrollBar.vertical: ScrollBar { id: verticalScrollBar + style: control.style parent: control - x: control.width - verticalScrollBar.width - StudioTheme.Values.border - y: StudioTheme.Values.border - height: control.availableHeight - (2 * StudioTheme.Values.border) + x: control.width - verticalScrollBar.width - control.style.borderWidth + y: control.style.borderWidth + height: control.availableHeight - (2 * control.style.borderWidth) - (control.bothVisible ? control.horizontalThickness : 0) active: control.ScrollBar.horizontal.active } ScrollBar.horizontal: ScrollBar { id: horizontalScrollBar + style: control.style parent: control - x: StudioTheme.Values.border - y: control.height - horizontalScrollBar.height - StudioTheme.Values.border - width: control.availableWidth - (2 * StudioTheme.Values.border) + x: control.style.borderWidth + y: control.height - horizontalScrollBar.height - control.style.borderWidth + width: control.availableWidth - (2 * control.style.borderWidth) - (control.bothVisible ? control.verticalThickness : 0) active: control.ScrollBar.vertical.active } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SearchBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SearchBox.qml index 158f49f6c3b..568b12e25ec 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SearchBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SearchBox.qml @@ -1,44 +1,43 @@ -// Copyright (C) 2022 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Controls 2.15 +import QtQuick +import QtQuick.Controls as QC import QtQuickDesignerTheme 1.0 import StudioTheme 1.0 as StudioTheme Item { - id: root + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property alias text: searchFilterText.text - signal searchChanged(string searchText); + signal searchChanged(string searchText) - function clear() - { - searchFilterText.text = ""; + function clear() { + searchFilterText.text = "" } - function isEmpty() - { - return searchFilterText.text === ""; + function isEmpty() { + return searchFilterText.text === "" } implicitWidth: searchFilterText.width implicitHeight: searchFilterText.height - TextField { + QC.TextField { id: searchFilterText - placeholderText: qsTr("Search") - placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor - color: StudioTheme.Values.themeTextColor - selectionColor: StudioTheme.Values.themeTextSelectionColor - selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor + placeholderTextColor: control.style.text.placeholder + color: control.style.text.idle + selectionColor: control.style.text.selection + selectedTextColor: control.style.text.selectedText background: Rectangle { id: textFieldBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth Behavior on color { ColorAnimation { @@ -48,8 +47,7 @@ Item { } } - height: StudioTheme.Values.defaultControlHeight - + height: control.style.controlSize.height leftPadding: 32 rightPadding: 30 topPadding: 6 @@ -60,16 +58,16 @@ Item { selectByMouse: true hoverEnabled: true - onTextChanged: root.searchChanged(text) + onTextChanged: control.searchChanged(text) - Label { + QC.Label { text: StudioTheme.Constants.search font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize anchors.left: parent.left anchors.leftMargin: 7 anchors.verticalCenter: parent.verticalCenter - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } Rectangle { // x button @@ -79,17 +77,16 @@ Item { anchors.rightMargin: 5 anchors.verticalCenter: parent.verticalCenter visible: searchFilterText.text !== "" - color: xMouseArea.containsMouse ? StudioTheme.Values.themePanelBackground - : "transparent" + color: xMouseArea.containsMouse ? control.style.panel.background : "transparent" - Label { + QC.Label { text: StudioTheme.Constants.closeCross font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.centerIn: parent - color: StudioTheme.Values.themeIconColor + color: control.style.icon.idle } MouseArea { @@ -106,26 +103,26 @@ Item { when: !searchFilterText.hovered && !searchFilterText.activeFocus PropertyChanges { target: textFieldBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle } PropertyChanges { target: searchFilterText - placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor + placeholderTextColor: control.style.text.placeholder } }, State { name: "hover" - when: root.enabled && searchFilterText.hovered && !searchFilterText.activeFocus + when: control.enabled && searchFilterText.hovered && !searchFilterText.activeFocus PropertyChanges { target: textFieldBackground - color: StudioTheme.Values.themeControlBackgroundHover - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.hover + border.color: control.style.border.idle } PropertyChanges { target: searchFilterText - placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor + placeholderTextColor: control.style.text.placeholder } }, State { @@ -133,12 +130,12 @@ Item { when: searchFilterText.activeFocus PropertyChanges { target: textFieldBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + color: control.style.background.interaction + border.color: control.style.border.interaction } PropertyChanges { target: searchFilterText - placeholderTextColor: StudioTheme.Values.themePlaceholderTextColorInteraction + placeholderTextColor: control.style.text.placeholderInteraction } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml index e81deb1e728..4ee254fefde 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml @@ -1,8 +1,8 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Layouts 1.15 +import QtQuick +import QtQuick.Layouts RowLayout { Layout.fillWidth: true diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml index 8d443333a3a..9c8f2a3a393 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml @@ -1,12 +1,15 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Layouts 1.15 +import QtQuick +import QtQuick.Layouts import StudioTheme 1.0 as StudioTheme Item { - id: section + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + property alias caption: label.text property alias captionPixelSize: label.font.pixelSize property alias captionColor: header.color @@ -23,34 +26,36 @@ Item { id: header anchors.left: parent.left anchors.right: parent.right - height: StudioTheme.Values.sectionHeadHeight - color: StudioTheme.Values.themeSectionHeadBackground + height: control.style.sectionHeadHeight + color: control.style.section.head SectionLabel { id: label + style: control.style anchors.verticalCenter: parent.verticalCenter - color: StudioTheme.Values.themeTextColor + color: control.style.text.idle x: 22 - font.pixelSize: StudioTheme.Values.myFontSize + font.pixelSize: control.style.baseFontSize font.capitalization: Font.AllUppercase } SectionLabel { id: arrow - width: StudioTheme.Values.spinControlIconSizeMulti - height: StudioTheme.Values.spinControlIconSizeMulti + style: control.style + width: control.style.smallIconSize.width + height: control.style.smallIconSize.height text: StudioTheme.Constants.sectionToggle - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle renderType: Text.NativeRendering anchors.left: parent.left anchors.leftMargin: 4 anchors.verticalCenter: parent.verticalCenter - font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti + font.pixelSize: control.style.smallIconFontSize font.family: StudioTheme.Constants.iconFont.family Behavior on rotation { NumberAnimation { easing.type: Easing.OutCubic - duration: section.animationDuration + duration: control.animationDuration } } } @@ -58,9 +63,9 @@ Item { MouseArea { anchors.fill: parent onClicked: { - section.expanded = !section.expanded - if (!section.expanded) // TODO - section.forceActiveFocus() + control.expanded = !control.expanded + if (!control.expanded) // TODO + control.forceActiveFocus() } } } @@ -73,7 +78,7 @@ Item { Row { id: topRow - height: StudioTheme.Values.sectionHeadSpacerHeight + height: control.style.sectionHeadSpacerHeight anchors.top: header.bottom } @@ -88,21 +93,21 @@ Item { Row { id: bottomRow - height: StudioTheme.Values.sectionHeadSpacerHeight + height: control.style.sectionHeadSpacerHeight anchors.top: column.bottom } Behavior on implicitHeight { NumberAnimation { easing.type: Easing.OutCubic - duration: section.animationDuration + duration: control.animationDuration } } states: [ State { name: "Expanded" - when: section.expanded + when: control.expanded PropertyChanges { target: arrow rotation: 0 @@ -110,9 +115,9 @@ Item { }, State { name: "Collapsed" - when: !section.expanded + when: !control.expanded PropertyChanges { - target: section + target: control implicitHeight: header.height } PropertyChanges { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml index 5ec0432fcc3..8d8c23d40d7 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml @@ -1,17 +1,19 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Layouts +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.Label { - id: label + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle width: Math.max(Math.min(240, parent.width - 220), 90) - color: StudioTheme.Values.themeTextColor - font.pixelSize: StudioTheme.Values.myFontSize // TODO + color: control.style.text.idle + font.pixelSize: control.style.baseFontSize elide: Text.ElideRight Layout.preferredWidth: width diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml index 1735374bd97..cb7a1d1de56 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml @@ -1,13 +1,17 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Layouts 1.15 +import QtQuick +import QtQuick.Layouts import StudioTheme 1.0 as StudioTheme GridLayout { + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + columns: 2 - columnSpacing: StudioTheme.Values.sectionColumnSpacing - rowSpacing: StudioTheme.Values.sectionRowSpacing + columnSpacing: control.style.sectionColumnSpacing + rowSpacing: control.style.sectionRowSpacing width: parent.width - 16 // TODO parameterize } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml index cca99fa57bb..21c7f7c3817 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml @@ -1,13 +1,15 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Shapes 1.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Shapes +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.Slider { - id: slider + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property int decimals: 0 property bool labels: true @@ -15,66 +17,68 @@ T.Slider { property real tickMarkStepSize: 0.0 // StepSize bug QTBUG-76136 property real tickMarkWidth: 1.0 property real tickMarkHeight: 4.0 - readonly property int tickMarkCount: tickMarkStepSize - !== 0.0 ? (to - from) / tickMarkStepSize + 1 : 0 - readonly property real tickMarkSpacing: tickMarkCount - !== 0 ? (sliderTrack.width - tickMarkWidth - * tickMarkCount) / (tickMarkCount - 1) : 0.0 + readonly property int tickMarkCount: control.tickMarkStepSize !== 0.0 + ? (control.to - control.from) / control.tickMarkStepSize + 1 : 0 + readonly property real tickMarkSpacing: control.tickMarkCount !== 0 + ? (sliderTrack.width - control.tickMarkWidth + * control.tickMarkCount) / (control.tickMarkCount - 1) : 0.0 - property string __activeColor: StudioTheme.Values.themeSliderActiveTrack - property string __inactiveColor: StudioTheme.Values.themeSliderInactiveTrack + property string __activeColor: control.style.slider.activeTrack + property string __inactiveColor: control.style.slider.inactiveTrack property bool hover: false // This property is used to indicate the global hover state - property bool edit: slider.activeFocus + property bool edit: control.activeFocus property alias actionIndicatorVisible: actionIndicator.visible - property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth - property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + property real __actionIndicatorWidth: control.style.actionIndicatorSize.width + property real __actionIndicatorHeight: control.style.actionIndicatorSize.height implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitHandleWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHandleHeight + topPadding + bottomPadding, - StudioTheme.Values.height) + control.style.controlSize.height) padding: 0 leftPadding: actionIndicator.width - - (actionIndicatorVisible ? StudioTheme.Values.border - - StudioTheme.Values.sliderPadding : 0) + - (control.actionIndicatorVisible ? control.style.borderWidth + - control.style.sliderPadding : 0) wheelEnabled: false ActionIndicator { id: actionIndicator - myControl: slider + style: control.style + __parentControl: control x: 0 y: 0 - width: actionIndicator.visible ? __actionIndicatorWidth : 0 - height: actionIndicator.visible ? __actionIndicatorHeight : 0 + width: actionIndicator.visible ? control.__actionIndicatorWidth : 0 + height: actionIndicator.visible ? control.__actionIndicatorHeight : 0 } handle: Rectangle { id: sliderHandle - x: slider.leftPadding + (slider.visualPosition * slider.availableWidth) + x: control.leftPadding + (control.visualPosition * control.availableWidth) - (sliderHandle.width / 2) - y: slider.topPadding + (slider.availableHeight / 2) - (sliderHandle.height / 2) + y: control.topPadding + (control.availableHeight / 2) - (sliderHandle.height / 2) z: 20 - implicitWidth: StudioTheme.Values.sliderHandleWidth - implicitHeight: StudioTheme.Values.sliderHandleHeight - color: StudioTheme.Values.themeSliderHandle + implicitWidth: control.style.sliderHandleSize.width + implicitHeight: control.style.sliderHandleSize.height + color: control.style.slider.handle Shape { id: sliderHandleLabelPointer - property real __width: StudioTheme.Values.sliderPointerWidth - property real __height: StudioTheme.Values.sliderPointerHeight + property real __width: control.style.sliderPointerSize.width + property real __height: control.style.sliderPointerSize.height property bool antiAlias: true - layer.enabled: antiAlias - layer.smooth: antiAlias - layer.textureSize: Qt.size(width * 2, height * 2) + layer.enabled: sliderHandleLabelPointer.antiAlias + layer.smooth: sliderHandleLabelPointer.antiAlias + layer.textureSize: Qt.size(sliderHandleLabelPointer.width * 2, + sliderHandleLabelPointer.height * 2) - implicitWidth: __width - implicitHeight: __height + implicitWidth: sliderHandleLabelPointer.__width + implicitHeight: sliderHandleLabelPointer.__height anchors.horizontalCenter: parent.horizontalCenter anchors.top: sliderHandleLabelBackground.bottom @@ -83,7 +87,7 @@ T.Slider { id: sliderHandleLabelPointerPath strokeColor: "transparent" strokeWidth: 0 - fillColor: StudioTheme.Values.themeInteraction + fillColor: control.style.interaction startX: 0 startY: 0 @@ -102,20 +106,20 @@ T.Slider { Rectangle { id: sliderHandleLabelBackground x: -(sliderHandleLabelBackground.width / 2) + (sliderHandle.width / 2) - width: makeEven( - sliderHandleLabel.width + StudioTheme.Values.inputHorizontalPadding) + width: control.makeEven( + sliderHandleLabel.width + control.style.inputHorizontalPadding) height: sliderHandleLabel.height anchors.bottom: parent.top - anchors.bottomMargin: StudioTheme.Values.sliderMargin - color: StudioTheme.Values.themeInteraction + anchors.bottomMargin: control.style.sliderMargin + color: control.style.interaction Text { id: sliderHandleLabel anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - text: Number.parseFloat(slider.value).toFixed(slider.decimals) - color: StudioTheme.Values.themeTextColor - font.pixelSize: StudioTheme.Values.sliderFontSize + text: Number.parseFloat(control.value).toFixed(control.decimals) + color: control.style.text.idle + font.pixelSize: control.style.smallFontSize } } } @@ -127,16 +131,16 @@ T.Slider { background: Rectangle { id: sliderTrack - x: slider.leftPadding - y: slider.topPadding + slider.availableHeight / 2 - height / 2 - width: slider.availableWidth - height: StudioTheme.Values.sliderTrackHeight - color: __inactiveColor + x: control.leftPadding + y: control.topPadding + control.availableHeight / 2 - sliderTrack.height / 2 + width: control.availableWidth + height: control.style.sliderTrackHeight + color: control.__inactiveColor Rectangle { - width: slider.visualPosition * parent.width + width: control.visualPosition * parent.width height: parent.height - color: __activeColor + color: control.__activeColor } } @@ -148,36 +152,37 @@ T.Slider { Text { id: tickmarkFromLabel x: 0 - y: StudioTheme.Values.sliderPadding - text: Number.parseFloat(slider.from).toFixed(slider.decimals) - color: StudioTheme.Values.themeTextColor - font.pixelSize: StudioTheme.Values.sliderFontSize - visible: slider.labels + y: control.style.sliderPadding + text: Number.parseFloat(control.from).toFixed(control.decimals) + color: control.style.text.idle + font.pixelSize: control.style.smallFontSize + visible: control.labels } Text { id: tickmarkToLabel - x: slider.availableWidth - width - y: StudioTheme.Values.sliderPadding - text: Number.parseFloat(slider.to).toFixed(slider.decimals) - color: StudioTheme.Values.themeTextColor - font.pixelSize: StudioTheme.Values.sliderFontSize - visible: slider.labels + x: control.availableWidth - tickmarkToLabel.width + y: control.style.sliderPadding + text: Number.parseFloat(control.to).toFixed(control.decimals) + color: control.style.text.idle + font.pixelSize: control.style.smallFontSize + visible: control.labels } Row { id: tickmarkRow - spacing: tickMarkSpacing - visible: slider.tickMarks + spacing: control.tickMarkSpacing + visible: control.tickMarks Repeater { id: tickmarkRepeater - model: tickMarkCount + model: control.tickMarkCount delegate: Rectangle { - implicitWidth: tickMarkWidth - implicitHeight: StudioTheme.Values.sliderTrackHeight - color: x < (slider.visualPosition - * slider.availableWidth) ? __inactiveColor : __activeColor + implicitWidth: control.tickMarkWidth + implicitHeight: control.style.sliderTrackHeight + color: x < (control.visualPosition + * control.availableWidth) ? control.__inactiveColor + : control.__activeColor } } } @@ -187,85 +192,85 @@ T.Slider { id: mouseArea x: actionIndicator.width y: 0 - width: slider.width - actionIndicator.width - height: slider.height + width: control.width - actionIndicator.width + height: control.height enabled: true hoverEnabled: true propagateComposedEvents: true acceptedButtons: Qt.LeftButton cursorShape: Qt.PointingHandCursor // Sets the global hover - onContainsMouseChanged: slider.hover = mouseArea.containsMouse + onContainsMouseChanged: control.hover = mouseArea.containsMouse onPressed: function(mouse) { mouse.accepted = false } } states: [ State { name: "default" - when: slider.enabled && !slider.hover && !slider.edit + when: control.enabled && !control.hover && !control.edit PropertyChanges { - target: slider + target: control wheelEnabled: false } }, State { name: "hover" - when: slider.enabled && slider.hover && !slider.edit + when: control.enabled && control.hover && !control.edit PropertyChanges { - target: slider - __activeColor: StudioTheme.Values.themeSliderActiveTrackHover - __inactiveColor: StudioTheme.Values.themeSliderInactiveTrackHover + target: control + __activeColor: control.style.slider.activeTrackHover + __inactiveColor: control.style.slider.inactiveTrackHover } PropertyChanges { target: sliderHandle - color: StudioTheme.Values.themeSliderHandleHover + color: control.style.slider.handleHover } }, State { name: "focus" - when: slider.enabled && slider.edit + when: control.enabled && control.edit PropertyChanges { - target: slider + target: control wheelEnabled: true - __activeColor: StudioTheme.Values.themeSliderActiveTrackFocus - __inactiveColor: StudioTheme.Values.themeSliderInactiveTrackFocus + __activeColor: control.style.slider.activeTrackFocus + __inactiveColor: control.style.slider.inactiveTrackFocus } PropertyChanges { target: sliderHandle - color: StudioTheme.Values.themeSliderHandleFocus + color: control.style.slider.handleFocus } }, State { name: "disable" - when: !slider.enabled + when: !control.enabled PropertyChanges { target: tickmarkFromLabel - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.text.disabled } PropertyChanges { target: tickmarkToLabel - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.text.disabled } PropertyChanges { target: sliderHandleLabel - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.text.disabled } PropertyChanges { - target: slider - __activeColor: StudioTheme.Values.themeControlBackgroundDisabled - __inactiveColor: StudioTheme.Values.themeControlBackgroundDisabled + target: control + __activeColor: control.style.background.disabled + __inactiveColor: control.style.background.disabled } PropertyChanges { target: sliderHandleLabelBackground - color: StudioTheme.Values.themeControlBackgroundDisabled + color: control.style.background.disabled } PropertyChanges { target: sliderHandleLabelPointerPath - fillColor: StudioTheme.Values.themeControlBackgroundDisabled + fillColor: control.style.background.disabled } PropertyChanges { target: sliderHandle - color: StudioTheme.Values.themeControlBackgroundDisabled + color: control.style.background.disabled } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml index e8c273d1e55..39e8ec2d3af 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml @@ -1,14 +1,16 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.Popup { - id: sliderPopup + id: control - property T.Control myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + property T.Control __parentControl property bool drag: slider.pressed @@ -18,7 +20,7 @@ T.Popup { | T.Popup.CloseOnReleaseOutsideParent background: Rectangle { - color: StudioTheme.Values.themePopupBackground + color: control.style.popup.background border.width: 0 } @@ -31,54 +33,54 @@ T.Popup { rightPadding: 3 leftPadding: 3 - from: myControl.from - value: myControl.value - to: myControl.to + from: control.__parentControl.from + value: control.__parentControl.value + to: control.__parentControl.to focusPolicy: Qt.NoFocus handle: Rectangle { x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width) y: slider.topPadding + (slider.availableHeight / 2) - (height / 2) - width: StudioTheme.Values.sliderHandleWidth - height: StudioTheme.Values.sliderHandleHeight + width: control.style.sliderHandleSize.width + height: control.style.sliderHandleSize.height radius: 0 - color: slider.pressed ? StudioTheme.Values.themeSliderHandleInteraction - : StudioTheme.Values.themeSliderHandle + color: slider.pressed ? control.style.slider.handleInteraction + : control.style.slider.handle } background: Rectangle { x: slider.leftPadding y: slider.topPadding + (slider.availableHeight / 2) - (height / 2) width: slider.availableWidth - height: StudioTheme.Values.sliderTrackHeight + height: control.style.sliderTrackHeight radius: 0 - color: StudioTheme.Values.themeSliderInactiveTrack + color: control.style.slider.inactiveTrack Rectangle { width: slider.visualPosition * parent.width height: parent.height - color: StudioTheme.Values.themeSliderActiveTrack + color: control.style.slider.activeTrack radius: 0 } } onMoved: { - var currValue = myControl.value - myControl.value = slider.value + var currValue = control.__parentControl.value + control.__parentControl.value = slider.value - if (currValue !== myControl.value) - myControl.valueModified() + if (currValue !== control.__parentControl.value) + control.__parentControl.valueModified() } } onOpened: { // Check if value is in sync with text input, if not sync it! - var val = myControl.valueFromText(myControl.contentItem.text, - myControl.locale) - if (myControl.value !== val) { - myControl.value = val - myControl.valueModified() + var val = control.__parentControl.valueFromText(control.__parentControl.contentItem.text, + control.__parentControl.locale) + if (control.__parentControl.value !== val) { + control.__parentControl.value = val + control.__parentControl.valueModified() } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SortFilterModel.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SortFilterModel.qml index d378b8728ae..f1ca27d7a0e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SortFilterModel.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SortFilterModel.qml @@ -1,4 +1,4 @@ -// Copyright (C) 2022 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 import QtQuick diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml index e20aa3634b3..72ba8138647 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml @@ -1,18 +1,20 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.SpinBox { - id: mySpinBox + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property alias labelColor: spinBoxInput.color property alias actionIndicator: actionIndicator property int decimals: 0 - property int factor: Math.pow(10, decimals) + property int factor: Math.pow(10, control.decimals) property real minStepSize: 1 property real maxStepSize: 10 @@ -21,23 +23,23 @@ T.SpinBox { // This property is used to indicate the global hover state property bool hover: (spinBoxInput.hover || actionIndicator.hover || spinBoxIndicatorUp.hover || spinBoxIndicatorDown.hover || sliderIndicator.hover) - && mySpinBox.enabled + && control.enabled property bool drag: false property bool sliderDrag: sliderPopup.drag property bool dirty: false // user modification flag property alias actionIndicatorVisible: actionIndicator.visible - property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth - property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + property real __actionIndicatorWidth: control.style.actionIndicatorSize.width + property real __actionIndicatorHeight: control.style.actionIndicatorSize.height property bool spinBoxIndicatorVisible: true - property real __spinBoxIndicatorWidth: StudioTheme.Values.spinBoxIndicatorWidth - property real __spinBoxIndicatorHeight: StudioTheme.Values.spinBoxIndicatorHeight + property real __spinBoxIndicatorWidth: control.style.spinBoxIndicatorSize.width + property real __spinBoxIndicatorHeight: control.style.spinBoxIndicatorSize.height property alias sliderIndicatorVisible: sliderIndicator.visible - property real __sliderIndicatorWidth: StudioTheme.Values.sliderIndicatorWidth - property real __sliderIndicatorHeight: StudioTheme.Values.sliderIndicatorHeight + property real __sliderIndicatorWidth: control.style.squareControlSize.width + property real __sliderIndicatorHeight: control.style.squareControlSize.height property alias __devicePixelRatio: spinBoxInput.devicePixelRatio property alias pixelsPerUnit: spinBoxInput.pixelsPerUnit @@ -56,87 +58,91 @@ T.SpinBox { wheelEnabled: false hoverEnabled: true - width: StudioTheme.Values.defaultControlWidth - height: StudioTheme.Values.defaultControlHeight + width: control.style.controlSize.width + height: control.style.controlSize.height leftPadding: spinBoxIndicatorDown.x + spinBoxIndicatorDown.width - rightPadding: sliderIndicator.width + StudioTheme.Values.border + rightPadding: sliderIndicator.width + control.style.borderWidth - font.pixelSize: StudioTheme.Values.myFontSize + font.pixelSize: control.style.baseFontSize editable: true - validator: mySpinBox.decimals ? doubleValidator : intValidator + validator: control.decimals ? doubleValidator : intValidator DoubleValidator { id: doubleValidator - locale: mySpinBox.locale.name + locale: control.locale.name notation: DoubleValidator.StandardNotation - decimals: mySpinBox.decimals - bottom: Math.min(mySpinBox.from, mySpinBox.to) / mySpinBox.factor - top: Math.max(mySpinBox.from, mySpinBox.to) / mySpinBox.factor + decimals: control.decimals + bottom: Math.min(control.from, control.to) / control.factor + top: Math.max(control.from, control.to) / control.factor } IntValidator { id: intValidator - locale: mySpinBox.locale.name - bottom: Math.min(mySpinBox.from, mySpinBox.to) - top: Math.max(mySpinBox.from, mySpinBox.to) + locale: control.locale.name + bottom: Math.min(control.from, control.to) + top: Math.max(control.from, control.to) } ActionIndicator { id: actionIndicator - myControl: mySpinBox + style: control.style + __parentControl: control x: 0 y: 0 - width: actionIndicator.visible ? mySpinBox.__actionIndicatorWidth : 0 - height: actionIndicator.visible ? mySpinBox.__actionIndicatorHeight : 0 + width: actionIndicator.visible ? control.__actionIndicatorWidth : 0 + height: actionIndicator.visible ? control.__actionIndicatorHeight : 0 } up.indicator: SpinBoxIndicator { id: spinBoxIndicatorUp - myControl: mySpinBox + style: control.style + __parentControl: control iconFlip: -1 - visible: mySpinBox.spinBoxIndicatorVisible - pressed: mySpinBox.up.pressed - x: actionIndicator.width + StudioTheme.Values.border - y: StudioTheme.Values.border - width: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorWidth : 0 - height: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorHeight : 0 + visible: control.spinBoxIndicatorVisible + pressed: control.up.pressed + x: actionIndicator.width + control.style.borderWidth + y: control.style.borderWidth + width: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorWidth : 0 + height: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorHeight : 0 - enabled: (mySpinBox.from < mySpinBox.to) ? mySpinBox.value < mySpinBox.to - : mySpinBox.value > mySpinBox.to + enabled: (control.from < control.to) ? control.value < control.to + : control.value > control.to } down.indicator: SpinBoxIndicator { id: spinBoxIndicatorDown - myControl: mySpinBox - visible: mySpinBox.spinBoxIndicatorVisible - pressed: mySpinBox.down.pressed - x: actionIndicator.width + StudioTheme.Values.border + style: control.style + __parentControl: control + visible: control.spinBoxIndicatorVisible + pressed: control.down.pressed + x: actionIndicator.width + control.style.borderWidth y: spinBoxIndicatorUp.y + spinBoxIndicatorUp.height - width: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorWidth : 0 - height: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorHeight : 0 + width: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorWidth : 0 + height: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorHeight : 0 - enabled: (mySpinBox.from < mySpinBox.to) ? mySpinBox.value > mySpinBox.from - : mySpinBox.value < mySpinBox.from + enabled: (control.from < control.to) ? control.value > control.from + : control.value < control.from } contentItem: SpinBoxInput { id: spinBoxInput - myControl: mySpinBox + style: control.style + __parentControl: control function handleEditingFinished() { - mySpinBox.focus = false + control.focus = false // Keep the dirty state before calling setValueFromInput(), // it will be set to false (cleared) internally - var valueModified = mySpinBox.dirty + var valueModified = control.dirty - mySpinBox.setValueFromInput() + control.setValueFromInput() myTimer.stop() // Only trigger the signal, if the value was modified if (valueModified) - mySpinBox.compressedValueModified() + control.compressedValueModified() } onEditingFinished: spinBoxInput.handleEditingFinished() @@ -144,32 +150,34 @@ T.SpinBox { background: Rectangle { id: spinBoxBackground - color: StudioTheme.Values.themeControlOutline - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth x: actionIndicator.width - width: mySpinBox.width - actionIndicator.width - height: mySpinBox.height + width: control.width - actionIndicator.width + height: control.height } CheckIndicator { id: sliderIndicator - myControl: mySpinBox - myPopup: sliderPopup + style: control.style + __parentControl: control + __parentPopup: sliderPopup x: spinBoxInput.x + spinBoxInput.width - y: StudioTheme.Values.border - width: sliderIndicator.visible ? mySpinBox.__sliderIndicatorWidth - StudioTheme.Values.border : 0 - height: sliderIndicator.visible ? mySpinBox.__sliderIndicatorHeight - (StudioTheme.Values.border * 2) : 0 + y: control.style.borderWidth + width: sliderIndicator.visible ? control.__sliderIndicatorWidth - control.style.borderWidth : 0 + height: sliderIndicator.visible ? control.__sliderIndicatorHeight - (control.style.borderWidth * 2) : 0 visible: false // reasonable default } SliderPopup { id: sliderPopup - myControl: mySpinBox - x: actionIndicator.width + StudioTheme.Values.border - y: StudioTheme.Values.height - width: mySpinBox.width - actionIndicator.width - (StudioTheme.Values.border * 2) - height: StudioTheme.Values.sliderHeight + style: control.style + __parentControl: control + x: actionIndicator.width + control.style.borderWidth + y: control.style.controlSize.height + width: control.width - actionIndicator.width - (control.style.borderWidth * 2) + height: control.style.smallControlSize.height enter: Transition {} exit: Transition {} @@ -177,21 +185,21 @@ T.SpinBox { textFromValue: function (value, locale) { locale.numberOptions = Locale.OmitGroupSeparator - return Number(value / mySpinBox.factor).toLocaleString(locale, 'f', - mySpinBox.decimals) + return Number(value / control.factor).toLocaleString(locale, 'f', + control.decimals) } valueFromText: function (text, locale) { - return Number.fromLocaleString(locale, text) * mySpinBox.factor + return Number.fromLocaleString(locale, text) * control.factor } states: [ State { name: "default" - when: mySpinBox.enabled && !mySpinBox.hover && !mySpinBox.hovered - && !mySpinBox.edit && !mySpinBox.drag && !mySpinBox.sliderDrag + when: control.enabled && !control.hover && !control.hovered + && !control.edit && !control.drag && !control.sliderDrag PropertyChanges { - target: mySpinBox + target: control __wheelEnabled: false } PropertyChanges { @@ -200,15 +208,15 @@ T.SpinBox { } PropertyChanges { target: spinBoxBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle } }, State { name: "edit" - when: mySpinBox.edit + when: control.edit PropertyChanges { - target: mySpinBox + target: control __wheelEnabled: true } PropertyChanges { @@ -217,26 +225,26 @@ T.SpinBox { } PropertyChanges { target: spinBoxBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.interaction + border.color: control.style.border.idle } }, State { name: "drag" - when: mySpinBox.drag || mySpinBox.sliderDrag + when: control.drag || control.sliderDrag PropertyChanges { target: spinBoxBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + color: control.style.background.interaction + border.color: control.style.border.interaction } }, State { name: "disable" - when: !mySpinBox.enabled + when: !control.enabled PropertyChanges { target: spinBoxBackground - color: StudioTheme.Values.themeControlOutlineDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + color: control.style.background.disabled + border.color: control.style.border.disabled } } ] @@ -246,19 +254,19 @@ T.SpinBox { repeat: false running: false interval: 400 - onTriggered: mySpinBox.compressedValueModified() + onTriggered: control.compressedValueModified() } onValueModified: myTimer.restart() - onFocusChanged: mySpinBox.setValueFromInput() - onDisplayTextChanged: spinBoxInput.text = mySpinBox.displayText + onFocusChanged: control.setValueFromInput() + onDisplayTextChanged: spinBoxInput.text = control.displayText onActiveFocusChanged: { - if (mySpinBox.activeFocus) { // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason) - mySpinBox.preFocusText = spinBoxInput.text + if (control.activeFocus) { // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason) + control.preFocusText = spinBoxInput.text spinBoxInput.selectAll() } - if (sliderPopup.opened && !mySpinBox.activeFocus) + if (sliderPopup.opened && !control.activeFocus) sliderPopup.close() } @@ -267,43 +275,43 @@ T.SpinBox { event.accepted = true // Store current step size - var currStepSize = mySpinBox.stepSize + var currStepSize = control.stepSize if (event.modifiers & Qt.ControlModifier) - mySpinBox.stepSize = mySpinBox.minStepSize + control.stepSize = control.minStepSize if (event.modifiers & Qt.ShiftModifier) - mySpinBox.stepSize = mySpinBox.maxStepSize + control.stepSize = control.maxStepSize // Check if value is in sync with text input, if not sync it! - var val = mySpinBox.valueFromText(spinBoxInput.text, - mySpinBox.locale) - if (mySpinBox.value !== val) - mySpinBox.value = val + var val = control.valueFromText(spinBoxInput.text, + control.locale) + if (control.value !== val) + control.value = val - var currValue = mySpinBox.value + var currValue = control.value if (event.key === Qt.Key_Up) - mySpinBox.increase() + control.increase() else - mySpinBox.decrease() + control.decrease() - if (currValue !== mySpinBox.value) - mySpinBox.valueModified() + if (currValue !== control.value) + control.valueModified() // Reset step size - mySpinBox.stepSize = currStepSize + control.stepSize = currStepSize } if (event.key === Qt.Key_Escape) { - spinBoxInput.text = mySpinBox.preFocusText - mySpinBox.dirty = true + spinBoxInput.text = control.preFocusText + control.dirty = true spinBoxInput.handleEditingFinished() } // FIX: This is a temporary fix for QTBUG-74239 if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) - mySpinBox.setValueFromInput() + control.setValueFromInput() } function clamp(v, lo, hi) { @@ -311,27 +319,27 @@ T.SpinBox { } function setValueFromInput() { - if (!mySpinBox.dirty) + if (!control.dirty) return // FIX: This is a temporary fix for QTBUG-74239 - var currValue = mySpinBox.value + var currValue = control.value if (!spinBoxInput.acceptableInput) - mySpinBox.value = clamp(valueFromText(spinBoxInput.text, - mySpinBox.locale), - mySpinBox.validator.bottom * mySpinBox.factor, - mySpinBox.validator.top * mySpinBox.factor) + control.value = clamp(valueFromText(spinBoxInput.text, + control.locale), + control.validator.bottom * control.factor, + control.validator.top * control.factor) else - mySpinBox.value = valueFromText(spinBoxInput.text, - mySpinBox.locale) + control.value = valueFromText(spinBoxInput.text, + control.locale) - if (spinBoxInput.text !== mySpinBox.displayText) - spinBoxInput.text = mySpinBox.displayText + if (spinBoxInput.text !== control.displayText) + spinBoxInput.text = control.displayText - if (mySpinBox.value !== currValue) - mySpinBox.valueModified() + if (control.value !== currValue) + control.valueModified() - mySpinBox.dirty = false + control.dirty = false } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml index 9df8e9565cb..2e4f1e0ae6a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml @@ -1,21 +1,23 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Rectangle { - id: spinBoxIndicator + id: control - property T.Control myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle - property bool hover: spinBoxIndicatorMouseArea.containsMouse && spinBoxIndicator.enabled + property T.Control __parentControl + + property bool hover: spinBoxIndicatorMouseArea.containsMouse && control.enabled property bool pressed: spinBoxIndicatorMouseArea.containsPress property alias iconFlip: spinBoxIndicatorIconScale.yScale - color: StudioTheme.Values.themeControlBackground + color: control.style.background.idle border.width: 0 // This MouseArea is a workaround to avoid some hover state related bugs @@ -25,8 +27,8 @@ Rectangle { anchors.fill: parent hoverEnabled: true onPressed: function(mouse) { - if (myControl.activeFocus) - spinBoxIndicator.forceActiveFocus() + if (control.__parentControl.activeFocus) + control.forceActiveFocus() mouse.accepted = false } @@ -35,11 +37,11 @@ Rectangle { T.Label { id: spinBoxIndicatorIcon text: StudioTheme.Constants.upDownSquare2 - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle renderType: Text.NativeRendering horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti + font.pixelSize: control.style.smallIconFontSize font.family: StudioTheme.Constants.iconFont.family anchors.fill: parent transform: Scale { @@ -51,46 +53,58 @@ Rectangle { states: [ State { - name: "globalHover" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag - && !spinBoxIndicator.hover && myControl.hover && !myControl.edit + name: "default" + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && !control.hover + && !control.__parentControl.hover && !control.__parentControl.edit PropertyChanges { target: spinBoxIndicatorIcon - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle + } + }, + State { + name: "globalHover" + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && !control.hover + && control.__parentControl.hover && !control.__parentControl.edit + PropertyChanges { + target: spinBoxIndicatorIcon + color: control.style.icon.idle } }, State { name: "hover" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag - && spinBoxIndicator.hover && myControl.hover && !spinBoxIndicator.pressed + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && control.hover + && control.__parentControl.hover && !control.pressed PropertyChanges { target: spinBoxIndicatorIcon - color: StudioTheme.Values.themeIconColorHover + color: control.style.icon.hover } }, State { name: "press" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag - && spinBoxIndicator.pressed + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && control.pressed PropertyChanges { target: spinBoxIndicatorIcon - color: "#323232" // TODO + color: control.style.icon.idle } }, State { name: "edit" - when: myControl.edit + when: control.__parentControl.edit PropertyChanges { target: spinBoxIndicatorIcon - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle } }, State { name: "disable" - when: !myControl.enabled || !spinBoxIndicator.enabled + when: !control.__parentControl.enabled || !control.enabled PropertyChanges { target: spinBoxIndicatorIcon - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.icon.disabled } } ] @@ -99,102 +113,104 @@ Rectangle { states: [ State { name: "default" - when: myControl.enabled && !myControl.edit - && !spinBoxIndicator.hover && !myControl.hover && !myControl.drag + when: control.__parentControl.enabled && !control.__parentControl.edit && !control.hover + && !control.__parentControl.hover && !control.__parentControl.drag PropertyChanges { target: spinBoxIndicatorIcon visible: false } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackground + target: control + color: control.style.background.idle } }, State { name: "globalHover" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag - && !spinBoxIndicator.hover && myControl.hover && !myControl.edit + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && !control.hover + && control.__parentControl.hover && !control.__parentControl.edit PropertyChanges { target: spinBoxIndicatorIcon visible: true } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackgroundGlobalHover + target: control + color: control.style.background.globalHover } }, State { name: "hover" - when: myControl.enabled && !myControl.drag - && spinBoxIndicator.hover && myControl.hover && !spinBoxIndicator.pressed + when: control.__parentControl.enabled && !control.__parentControl.drag + && control.enabled && control.hover && control.__parentControl.hover + && !control.pressed PropertyChanges { target: spinBoxIndicatorIcon visible: true } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackgroundHover + target: control + color: control.style.background.hover } }, State { name: "press" - when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag - && spinBoxIndicator.pressed + when: control.__parentControl.enabled && control.enabled + && !control.__parentControl.drag && control.pressed PropertyChanges { target: spinBoxIndicatorIcon visible: true } PropertyChanges { - target: spinBoxIndicator - color: "#2aafd3" // TODO + target: control + color: control.style.interaction } }, State { name: "edit" - when: myControl.edit + when: control.__parentControl.edit && control.__parentControl.enabled && control.enabled PropertyChanges { target: spinBoxIndicatorIcon visible: true } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackground + target: control + color: control.style.background.idle } }, State { name: "drag" - when: myControl.drag + when: control.__parentControl.drag && control.__parentControl.enabled PropertyChanges { target: spinBoxIndicatorIcon visible: false } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackgroundInteraction + target: control + color: control.style.background.interaction } }, State { name: "disable" - when: !myControl.enabled + when: !control.__parentControl.enabled PropertyChanges { target: spinBoxIndicatorIcon visible: false } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackground + target: control + color: control.style.background.disabled } }, State { name: "limit" - when: !spinBoxIndicator.enabled && !spinBoxIndicator.realEnabled && myControl.hover + when: !control.enabled && !control.realEnabled && control.__parentControl.hover PropertyChanges { target: spinBoxIndicatorIcon visible: true } PropertyChanges { - target: spinBoxIndicator - color: StudioTheme.Values.themeControlBackground + target: control + color: control.style.background.idle } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml index d5fede0fcbd..51c7aeda756 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml @@ -1,36 +1,38 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme TextInput { - id: textInput + id: control - property T.Control myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle - property bool edit: textInput.activeFocus + property T.Control __parentControl + + property bool edit: control.activeFocus property bool drag: false - property bool hover: mouseArea.containsMouse && textInput.enabled + property bool hover: mouseArea.containsMouse && control.enabled property int devicePixelRatio: 1 property int pixelsPerUnit: 10 z: 2 - font: myControl.font - color: StudioTheme.Values.themeTextColor - selectionColor: StudioTheme.Values.themeTextSelectionColor - selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor + font: control.__parentControl.font + color: control.style.text.idle + selectionColor: control.style.text.selection + selectedTextColor: control.style.text.selectedText horizontalAlignment: Qt.AlignRight verticalAlignment: Qt.AlignVCenter - leftPadding: StudioTheme.Values.inputHorizontalPadding - rightPadding: StudioTheme.Values.inputHorizontalPadding + leftPadding: control.style.inputHorizontalPadding + rightPadding: control.style.inputHorizontalPadding - readOnly: !myControl.editable - validator: myControl.validator - inputMethodHints: myControl.inputMethodHints + readOnly: !control.__parentControl.editable + validator: control.__parentControl.validator + inputMethodHints: control.__parentControl.inputMethodHints selectByMouse: false activeFocusOnPress: false clip: true @@ -38,16 +40,16 @@ TextInput { // TextInput focus needs to be set to activeFocus whenever it changes, // otherwise TextInput will get activeFocus whenever the parent SpinBox gets // activeFocus. This will lead to weird side effects. - onActiveFocusChanged: textInput.focus = textInput.activeFocus + onActiveFocusChanged: control.focus = control.activeFocus Rectangle { id: textInputBackground x: 0 - y: StudioTheme.Values.border + y: control.style.borderWidth z: -1 - width: textInput.width - height: StudioTheme.Values.height - (StudioTheme.Values.border * 2) - color: StudioTheme.Values.themeControlBackground + width: control.width + height: control.style.controlSize.height - (control.style.borderWidth * 2) + color: control.style.background.idle border.width: 0 } @@ -57,22 +59,22 @@ TextInput { event.accepted = true if (event.modifiers & Qt.ControlModifier) { - mouseArea.stepSize = myControl.minStepSize + mouseArea.stepSize = control.__parentControl.minStepSize mouseArea.calcValue() - myControl.valueModified() + control.__parentControl.valueModified() } if (event.modifiers & Qt.ShiftModifier) { - mouseArea.stepSize = myControl.maxStepSize + mouseArea.stepSize = control.__parentControl.maxStepSize mouseArea.calcValue() - myControl.valueModified() + control.__parentControl.valueModified() } } Keys.onReleased: function(event) { event.accepted = true - mouseArea.stepSize = myControl.stepSize + mouseArea.stepSize = control.__parentControl.stepSize mouseArea.calcValue() - myControl.valueModified() + control.__parentControl.valueModified() } } @@ -84,14 +86,14 @@ TextInput { MouseArea { id: mouseArea - property real stepSize: myControl.stepSize + property real stepSize: control.__parentControl.stepSize // Properties to store the state of a drag operation property bool dragging: false property bool hasDragged: false property bool potentialDragStart: false - property int initialValue: myControl.value // value on drag operation starts + property int initialValue: control.__parentControl.value // value on drag operation starts property real pressStartX: 0.0 property real dragStartX: 0.0 @@ -101,7 +103,7 @@ TextInput { property real totalUnits: 0.0 // total number of units dragged property real units: 0.0 - property real __pixelsPerUnit: textInput.devicePixelRatio * textInput.pixelsPerUnit + property real __pixelsPerUnit: control.devicePixelRatio * control.pixelsPerUnit anchors.fill: parent enabled: true @@ -113,21 +115,21 @@ TextInput { onPositionChanged: function(mouse) { if (!mouseArea.dragging - && !myControl.edit + && !control.__parentControl.edit && Math.abs(mouseArea.pressStartX - mouse.x) > StudioTheme.Values.dragThreshold && mouse.buttons === Qt.LeftButton && mouseArea.potentialDragStart) { mouseArea.dragging = true mouseArea.potentialDragStart = false - mouseArea.initialValue = myControl.value + mouseArea.initialValue = control.__parentControl.value mouseArea.cursorShape = Qt.ClosedHandCursor mouseArea.dragStartX = mouse.x - myControl.drag = true - myControl.dragStarted() + control.__parentControl.drag = true + control.__parentControl.dragStarted() // Force focus on the non visible component to receive key events dragModifierWorkaround.forceActiveFocus() - textInput.deselect() + control.deselect() } if (!mouseArea.dragging) @@ -152,11 +154,11 @@ TextInput { mouseArea.translationX += translationX mouseArea.calcValue() - myControl.valueModified() + control.__parentControl.valueModified() } onClicked: function(mouse) { - if (textInput.edit) + if (control.edit) mouse.accepted = false if (mouseArea.hasDragged) { @@ -164,12 +166,12 @@ TextInput { return } - textInput.forceActiveFocus() - textInput.deselect() // QTBUG-75862 + control.forceActiveFocus() + control.deselect() // QTBUG-75862 } onPressed: function(mouse) { - if (textInput.edit) + if (control.edit) mouse.accepted = false mouseArea.potentialDragStart = true @@ -177,7 +179,7 @@ TextInput { } onReleased: function(mouse) { - if (textInput.edit) + if (control.edit) mouse.accepted = false mouseArea.endDrag() @@ -190,18 +192,18 @@ TextInput { mouseArea.dragging = false mouseArea.hasDragged = true - if (myControl.compressedValueTimer.running) { - myControl.compressedValueTimer.stop() + if (control.__parentControl.compressedValueTimer.running) { + control.__parentControl.compressedValueTimer.stop() mouseArea.calcValue() - myControl.compressedValueModified() + control.__parentControl.compressedValueModified() } mouseArea.cursorShape = Qt.PointingHandCursor - myControl.drag = false - myControl.dragEnded() + control.__parentControl.drag = false + control.__parentControl.dragEnded() // Avoid active focus on the component after dragging dragModifierWorkaround.focus = false - textInput.focus = false - myControl.focus = false + control.focus = false + control.__parentControl.focus = false mouseArea.translationX = 0 mouseArea.units = 0 @@ -209,53 +211,55 @@ TextInput { } function calcValue() { - var minUnit = (myControl.from - mouseArea.initialValue) / mouseArea.stepSize - var maxUnit = (myControl.to - mouseArea.initialValue) / mouseArea.stepSize + var minUnit = (control.__parentControl.from - mouseArea.initialValue) / mouseArea.stepSize + var maxUnit = (control.__parentControl.to - mouseArea.initialValue) / mouseArea.stepSize var units = Math.trunc(mouseArea.translationX / mouseArea.__pixelsPerUnit) mouseArea.units = Math.min(Math.max(mouseArea.totalUnits + units, minUnit), maxUnit) - myControl.value = mouseArea.initialValue + (mouseArea.units * mouseArea.stepSize) + control.__parentControl.value = mouseArea.initialValue + (mouseArea.units * mouseArea.stepSize) if (mouseArea.dragging) - myControl.dragging() + control.__parentControl.dragging() } onWheel: function(wheel) { - if (!myControl.__wheelEnabled) { + if (!control.__parentControl.__wheelEnabled) { wheel.accepted = false return } // Set stepSize according to used modifier key if (wheel.modifiers & Qt.ControlModifier) - mouseArea.stepSize = myControl.minStepSize + mouseArea.stepSize = control.__parentControl.minStepSize if (wheel.modifiers & Qt.ShiftModifier) - mouseArea.stepSize = myControl.maxStepSize + mouseArea.stepSize = control.__parentControl.maxStepSize - var val = myControl.valueFromText(textInput.text, myControl.locale) - if (myControl.value !== val) - myControl.value = val + var val = control.__parentControl.valueFromText(control.text, + control.__parentControl.locale) + if (control.__parentControl.value !== val) + control.__parentControl.value = val - var currValue = myControl.value - myControl.value += (wheel.angleDelta.y / 120 * mouseArea.stepSize) + var currValue = control.__parentControl.value + control.__parentControl.value += (wheel.angleDelta.y / 120 * mouseArea.stepSize) - if (currValue !== myControl.value) - myControl.valueModified() + if (currValue !== control.__parentControl.value) + control.__parentControl.valueModified() // Reset stepSize - mouseArea.stepSize = myControl.stepSize + mouseArea.stepSize = control.__parentControl.stepSize } } states: [ State { name: "default" - when: myControl.enabled && !textInput.edit && !textInput.hover && !myControl.hover - && !myControl.drag && !myControl.sliderDrag + when: control.__parentControl.enabled && !control.edit && !control.hover + && !control.__parentControl.hover && !control.__parentControl.drag + && !control.__parentControl.sliderDrag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackground + color: control.style.background.idle } PropertyChanges { target: mouseArea @@ -264,27 +268,28 @@ TextInput { }, State { name: "globalHover" - when: myControl.hover && !textInput.hover && !textInput.edit && !myControl.drag + when: control.__parentControl.hover && !control.hover && !control.edit + && !control.__parentControl.drag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundGlobalHover + color: control.style.background.globalHover } }, State { name: "hover" - when: textInput.hover && myControl.hover - && !textInput.edit && !myControl.drag + when: control.hover && control.__parentControl.hover + && !control.edit && !control.__parentControl.drag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundHover + color: control.style.background.hover } }, State { name: "edit" - when: textInput.edit && !myControl.drag + when: control.edit && !control.__parentControl.drag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundInteraction + color: control.style.background.interaction } PropertyChanges { target: mouseArea @@ -293,38 +298,38 @@ TextInput { }, State { name: "drag" - when: myControl.drag + when: control.__parentControl.drag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundInteraction + color: control.style.background.interaction } PropertyChanges { - target: textInput - color: StudioTheme.Values.themeInteraction + target: control + color: control.style.interaction } }, State { name: "sliderDrag" - when: myControl.sliderDrag + when: control.__parentControl.sliderDrag PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackground + color: control.style.background.idle } PropertyChanges { - target: textInput - color: StudioTheme.Values.themeInteraction + target: control + color: control.style.interaction } }, State { name: "disable" - when: !myControl.enabled + when: !control.__parentControl.enabled PropertyChanges { target: textInputBackground - color: StudioTheme.Values.themeControlBackgroundDisabled + color: control.style.background.disabled } PropertyChanges { - target: textInput - color: StudioTheme.Values.themeTextColorDisabled + target: control + color: control.style.text.disabled } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Switch.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Switch.qml index 240d0b42336..516dd425b60 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Switch.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Switch.qml @@ -1,28 +1,30 @@ -// Copyright (C) 2022 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.Switch { - id: root + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property alias actionIndicator: actionIndicator // This property is used to indicate the global hover state - property bool hover: root.hovered && root.enabled + property bool hover: control.hovered && control.enabled property bool edit: false property alias actionIndicatorVisible: actionIndicator.visible - property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth - property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + property real __actionIndicatorWidth: control.style.actionIndicatorSize.width + property real __actionIndicatorHeight: control.style.actionIndicatorSize.height - property alias labelVisible: switchLabel.visible - property alias labelColor: switchLabel.color + property alias labelVisible: label.visible + property alias labelColor: label.color - property alias fontFamily: switchLabel.font.family - property alias fontPixelSize: switchLabel.font.pixelSize + property alias fontFamily: label.font.family + property alias fontPixelSize: label.font.pixelSize font.pixelSize: StudioTheme.Values.myFontSize @@ -32,15 +34,16 @@ T.Switch { implicitContentHeight + topPadding + bottomPadding, implicitIndicatorHeight + topPadding + bottomPadding) - spacing: StudioTheme.Values.switchSpacing + spacing: label.visible ? control.style.controlSpacing : 0 hoverEnabled: true activeFocusOnTab: false ActionIndicator { id: actionIndicator - myControl: root - width: actionIndicator.visible ? root.__actionIndicatorWidth : 0 - height: actionIndicator.visible ? root.__actionIndicatorHeight : 0 + style: control.style + __parentControl: control + width: actionIndicator.visible ? control.__actionIndicatorWidth : 0 + height: actionIndicator.visible ? control.__actionIndicatorHeight : 0 } indicator: Rectangle { @@ -48,12 +51,12 @@ T.Switch { x: actionIndicator.width y: 0 z: 5 - implicitWidth: StudioTheme.Values.height * 2 - implicitHeight: StudioTheme.Values.height - radius: StudioTheme.Values.height * 0.5 - color: StudioTheme.Values.themeControlBackground - border.width: StudioTheme.Values.border - border.color: StudioTheme.Values.themeControlOutline + implicitWidth: control.style.squareControlSize.width * 2 + implicitHeight: control.style.squareControlSize.height + radius: control.style.squareControlSize.height * 0.5 + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth Rectangle { id: switchIndicator @@ -61,142 +64,142 @@ T.Switch { readonly property real gap: 5 property real size: switchBackground.implicitHeight - switchIndicator.gap * 2 - x: root.checked ? parent.width - width - switchIndicator.gap + x: control.checked ? parent.width - width - switchIndicator.gap : switchIndicator.gap y: switchIndicator.gap width: switchIndicator.size height: switchIndicator.size radius: switchIndicator.size * 0.5 - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle border.width: 0 } } contentItem: T.Label { - id: switchLabel - leftPadding: switchBackground.x + switchBackground.width + root.spacing + id: label + leftPadding: switchBackground.x + switchBackground.width + control.spacing rightPadding: 0 verticalAlignment: Text.AlignVCenter - text: root.text - font: root.font - color: StudioTheme.Values.themeTextColor - visible: text !== "" + text: control.text + font: control.font + color: control.style.text.idle + visible: control.text !== "" } - property bool __default: root.enabled && !root.hover && !actionIndicator.hover && !root.pressed - property bool __globalHover: root.enabled && actionIndicator.hover && !root.pressed - property bool __hover: root.hover && !actionIndicator.hover && !root.pressed - property bool __press: root.hover && root.pressed + property bool __default: control.enabled && !control.hover && !actionIndicator.hover && !control.pressed + property bool __globalHover: control.enabled && actionIndicator.hover && !control.pressed + property bool __hover: control.hover && !actionIndicator.hover && !control.pressed + property bool __press: control.hover && control.pressed states: [ State { name: "default" - when: root.__default && !root.checked + when: control.__default && !control.checked PropertyChanges { target: switchBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle } PropertyChanges { target: switchIndicator - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle } }, State { name: "globalHover" - when: root.__globalHover && !root.checked + when: control.__globalHover && !control.checked PropertyChanges { target: switchBackground - color: StudioTheme.Values.themeControlBackgroundGlobalHover - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.globalHover + border.color: control.style.border.idle } PropertyChanges { target: switchIndicator - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle } }, State { name: "hover" - when: root.__hover && !root.checked + when: control.__hover && !control.checked PropertyChanges { target: switchBackground - color: StudioTheme.Values.themeControlBackgroundHover - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.hover + border.color: control.style.border.idle } PropertyChanges { target: switchIndicator - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle } }, State { name: "press" - when: root.__press && !root.checked + when: control.__press && !control.checked PropertyChanges { target: switchBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + color: control.style.background.interaction + border.color: control.style.border.interaction } PropertyChanges { target: switchIndicator - color: StudioTheme.Values.themeInteraction + color: control.style.interaction } }, State { name: "disable" - when: !root.enabled && !root.checked + when: !control.enabled && !control.checked PropertyChanges { target: switchBackground - color: StudioTheme.Values.themeControlBackgroundDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + color: control.style.background.disabled + border.color: control.style.border.disabled } PropertyChanges { target: switchIndicator - color: StudioTheme.Values.themeTextColorDisabled + color: control.style.icon.disabled } PropertyChanges { - target: switchLabel - color: StudioTheme.Values.themeTextColorDisabled + target: label + color: control.style.text.disabled } }, State { name: "defaultChecked" - when: root.__default && root.checked + when: control.__default && control.checked extend: "default" PropertyChanges { target: switchBackground - color: StudioTheme.Values.themeInteraction - border.color: StudioTheme.Values.themeInteraction + color: control.style.interaction + border.color: control.style.interaction } }, State { name: "globalHoverChecked" - when: root.__globalHover && root.checked + when: control.__globalHover && control.checked extend: "globalHover" PropertyChanges { target: switchBackground - color: StudioTheme.Values.themeInteractionHover - border.color: StudioTheme.Values.themeInteractionHover + color: control.style.interactionHover + border.color: control.style.interactionHover } }, State { name: "hoverChecked" - when: root.__hover && root.checked + when: control.__hover && control.checked extend: "hover" PropertyChanges { target: switchBackground - color: StudioTheme.Values.themeInteractionHover - border.color: StudioTheme.Values.themeInteractionHover + color: control.style.interactionHover + border.color: control.style.interactionHover } }, State { name: "pressChecked" - when: root.__press && root.checked + when: control.__press && control.checked extend: "press" }, State { name: "disableChecked" - when: !root.enabled && root.checked + when: !control.enabled && control.checked extend: "disable" } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml index 465c2e86441..1da4ca50da9 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml @@ -1,12 +1,14 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.TabBar { - id: myButton + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) @@ -15,9 +17,9 @@ T.TabBar { spacing: 0 contentItem: ListView { - model: myButton.contentModel - currentIndex: myButton.currentIndex - spacing: myButton.spacing + model: control.contentModel + currentIndex: control.currentIndex + spacing: control.spacing orientation: ListView.Horizontal boundsBehavior: Flickable.StopAtBounds flickableDirection: Flickable.AutoFlickIfNeeded @@ -25,6 +27,6 @@ T.TabBar { } background: Rectangle { - color: StudioTheme.Values.themePanelBackground + color: control.style.panel.background } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml index 5894e37db72..3d85903263e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml @@ -1,12 +1,14 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.TabButton { - id: myButton + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) @@ -17,24 +19,19 @@ T.TabButton { background: Rectangle { id: buttonBackground - color: myButton.checked ? StudioTheme.Values.themeInteraction - : "transparent" - border.width: StudioTheme.Values.border - border.color: StudioTheme.Values.themeInteraction + color: control.checked ? control.style.interaction : "transparent" + border.width: control.style.borderWidth + border.color: control.style.interaction } contentItem: T.Label { id: buttonIcon - color: myButton.checked ? StudioTheme.Values.themeControlBackground - : StudioTheme.Values.themeInteraction - //font.weight: Font.Bold - //font.family: StudioTheme.Constants.font.family - font.pixelSize: StudioTheme.Values.myFontSize + color: control.checked ? control.style.background.idle : control.style.interaction + font.pixelSize: control.style.baseFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.fill: parent renderType: Text.QtRendering - - text: myButton.text + text: control.text } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml index f0e2c90866a..3e8b501862b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml @@ -1,37 +1,40 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme TextField { - id: myTextField + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle property real relativePopupX: 0 // TODO Maybe call it leftPadding - property real popupWidth: myTextField.width + property real popupWidth: control.width property string txtStorage property int temp: 0 T.Popup { id: popup - x: myTextField.relativePopupX - y: myTextField.height - StudioTheme.Values.border - width: myTextField.popupWidth + x: control.relativePopupX + y: control.height - control.style.borderWidth + width: control.popupWidth height: scrollView.height background: Rectangle { - color: StudioTheme.Values.themePopupBackground - border.color: StudioTheme.Values.themeInteraction - border.width: StudioTheme.Values.border + color: control.style.popup.background + border.color: control.style.interaction + border.width: control.style.borderWidth } contentItem: ScrollView { id: scrollView + style: control.style padding: 0 height: Math.min(textAreaPopup.contentHeight + scrollView.topPadding + scrollView.bottomPadding, - StudioTheme.Values.maxTextAreaPopupHeight) + control.style.maxTextAreaPopupHeight) ScrollBar.horizontal.policy: ScrollBar.AlwaysOn ScrollBar.vertical.policy: ScrollBar.AlwaysOn @@ -41,10 +44,10 @@ TextField { width: textAreaPopup.contentWidth + textAreaPopup.leftPadding + textAreaPopup.rightPadding anchors.fill: parent - font.pixelSize: StudioTheme.Values.myFontSize - color: StudioTheme.Values.themeTextColor - selectionColor: StudioTheme.Values.themeTextSelectionColor - selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor + font.pixelSize: control.style.baseFontSize + color: control.style.text.idle + selectionColor: control.style.text.selection + selectedTextColor: control.style.text.selectedText selectByMouse: true persistentSelection: textAreaPopup.focus @@ -61,56 +64,60 @@ TextField { ContextMenu { id: contextMenu - myTextEdit: textAreaPopup + style: control.style + __parentControl: textAreaPopup } AbstractButton { id: acceptButton + style: control.style x: popup.width - acceptButton.width - y: popup.height - StudioTheme.Values.border - width: Math.round(StudioTheme.Values.smallRectWidth) - height: Math.round(StudioTheme.Values.smallRectWidth) + y: popup.height - control.style.borderWidth + width: Math.round(control.style.smallControlSize.width) + height: Math.round(control.style.smallControlSize.height) buttonIcon: StudioTheme.Constants.tickIcon } AbstractButton { id: discardButton - x: popup.width - acceptButton.width - discardButton.width + StudioTheme.Values.border - y: popup.height - StudioTheme.Values.border - width: Math.round(StudioTheme.Values.smallRectWidth) - height: Math.round(StudioTheme.Values.smallRectWidth) + style: control.style + x: popup.width - acceptButton.width - discardButton.width + control.style.borderWidth + y: popup.height - control.style.borderWidth + width: Math.round(control.style.smallControlSize.width) + height: Math.round(control.style.smallControlSize.height) buttonIcon: StudioTheme.Constants.closeCross } - Component.onCompleted: { - storeAndFormatTextInput(myTextField.text) - } + Component.onCompleted: control.storeAndFormatTextInput(control.text) onOpened: { - textAreaPopup.text = txtStorage - myTextField.clear() + textAreaPopup.text = control.txtStorage + control.clear() } onClosed: { - storeAndFormatTextInput(textAreaPopup.text) - myTextField.forceActiveFocus() + control.storeAndFormatTextInput(textAreaPopup.text) + control.forceActiveFocus() textAreaPopup.deselect() } } function storeAndFormatTextInput(inputText) { - txtStorage = inputText - var pos = txtStorage.search(/\n/g) + control.txtStorage = inputText + var pos = control.txtStorage.search(/\n/g) var sliceAt = Math.min(pos, 15) - myTextField.text = txtStorage.slice(0, sliceAt).padEnd(sliceAt + 3, '.') + control.text = control.txtStorage.slice(0, sliceAt).padEnd(sliceAt + 3, '.') } Keys.onPressed: function(event) { - if (event.key === Qt.Key_Escape) - popup.opened ? popup.close() : myTextField.focus = false + if (event.key === Qt.Key_Escape) { + if (popup.opened) + popup.close() + else + control.focus = false + } - if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) - && !popup.opened) { + if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && !popup.opened) { popup.open() textAreaPopup.forceActiveFocus() } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml index a0cf90b76da..6de1b692ed0 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml @@ -1,27 +1,29 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme T.TextField { - id: root + id: control + + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle // This property is used to indicate the global hover state property bool hover: (actionIndicator.hover || mouseArea.containsMouse || indicator.hover - || translationIndicator.hover) && root.enabled - property bool edit: root.activeFocus + || translationIndicator.hover) && control.enabled + property bool edit: control.activeFocus property alias actionIndicator: actionIndicator property alias actionIndicatorVisible: actionIndicator.visible - property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth - property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + property real __actionIndicatorWidth: control.style.actionIndicatorSize.width + property real __actionIndicatorHeight: control.style.actionIndicatorSize.height property alias translationIndicator: translationIndicator property alias translationIndicatorVisible: translationIndicator.visible - property real __translationIndicatorWidth: StudioTheme.Values.translationIndicatorWidth - property real __translationIndicatorHeight: StudioTheme.Values.translationIndicatorHeight + property real __translationIndicatorWidth: control.style.squareControlSize.width + property real __translationIndicatorHeight: control.style.squareControlSize.height property alias indicator: indicator property alias indicatorVisible: indicator.visible @@ -35,24 +37,24 @@ T.TextField { horizontalAlignment: Qt.AlignLeft verticalAlignment: Qt.AlignVCenter - font.pixelSize: StudioTheme.Values.myFontSize + font.pixelSize: control.style.baseFontSize - color: StudioTheme.Values.themeTextColor - selectionColor: StudioTheme.Values.themeTextSelectionColor - selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor - placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor + color: control.style.text.idle + selectionColor: control.style.text.selection + selectedTextColor: control.style.text.selectedText + placeholderTextColor: control.style.text.placeholder readOnly: false selectByMouse: true - persistentSelection: contextMenu.visible || root.focus + persistentSelection: contextMenu.visible || control.focus clip: true - width: StudioTheme.Values.defaultControlWidth - height: StudioTheme.Values.defaultControlHeight - implicitHeight: StudioTheme.Values.defaultControlHeight + width: control.style.controlSize.width + height: control.style.controlSize.height + implicitHeight: control.style.controlSize.height - leftPadding: StudioTheme.Values.inputHorizontalPadding + actionIndicator.width - rightPadding: StudioTheme.Values.inputHorizontalPadding + translationIndicator.width + indicator.width + leftPadding: control.style.inputHorizontalPadding + actionIndicator.width + rightPadding: control.style.inputHorizontalPadding + translationIndicator.width + indicator.width MouseArea { id: mouseArea @@ -66,80 +68,84 @@ T.TextField { onPressed: function(event) { if (event.button === Qt.RightButton) - contextMenu.popup(root) + contextMenu.popup(control) } ContextMenu { id: contextMenu - myTextEdit: root + style: control.style + __parentControl: control - onClosed: root.forceActiveFocus() - onAboutToShow: root.contextMenuAboutToShow = true - onAboutToHide: root.contextMenuAboutToShow = false + onClosed: control.forceActiveFocus() + onAboutToShow: control.contextMenuAboutToShow = true + onAboutToHide: control.contextMenuAboutToShow = false } onActiveFocusChanged: { // OtherFocusReason in this case means, if the TextField gets focus after the context menu // was closed due to an menu item click. - if (root.activeFocus && root.focusReason !== Qt.OtherFocusReason) - root.preFocusText = root.text + if (control.activeFocus && control.focusReason !== Qt.OtherFocusReason) + control.preFocusText = control.text } onEditChanged: { - if (root.edit) + if (control.edit) contextMenu.close() } - onEditingFinished: root.focus = false + onEditingFinished: control.focus = false ActionIndicator { id: actionIndicator - myControl: root + style: control.style + __parentControl: control x: 0 y: 0 - width: actionIndicator.visible ? root.__actionIndicatorWidth : 0 - height: actionIndicator.visible ? root.__actionIndicatorHeight : 0 + width: actionIndicator.visible ? control.__actionIndicatorWidth : 0 + height: actionIndicator.visible ? control.__actionIndicatorHeight : 0 } Text { id: placeholder - x: root.leftPadding - y: root.topPadding - width: root.width - (root.leftPadding + root.rightPadding) - height: root.height - (root.topPadding + root.bottomPadding) + x: control.leftPadding + y: control.topPadding + width: control.width - (control.leftPadding + control.rightPadding) + height: control.height - (control.topPadding + control.bottomPadding) - text: root.placeholderText - font: root.font - color: root.placeholderTextColor - verticalAlignment: root.verticalAlignment - visible: !root.length && !root.preeditText - && (!root.activeFocus || root.horizontalAlignment !== Qt.AlignHCenter) + text: control.placeholderText + font: control.font + color: control.placeholderTextColor + verticalAlignment: control.verticalAlignment + visible: !control.length && !control.preeditText + && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter) elide: Text.ElideRight - renderType: root.renderType + renderType: control.renderType } background: Rectangle { id: textFieldBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth x: actionIndicator.width - width: root.width - actionIndicator.width - height: root.height + width: control.width - actionIndicator.width + height: control.height } Indicator { id: indicator + style: control.style visible: false - x: root.width - translationIndicator.width - indicator.width - width: indicator.visible ? root.height : 0 - height: indicator.visible ? root.height : 0 + x: control.width - translationIndicator.width - indicator.width + width: indicator.visible ? control.height : 0 + height: indicator.visible ? control.height : 0 } TranslationIndicator { id: translationIndicator - myControl: root - x: root.width - translationIndicator.width + style: control.style + __parentControl: control + x: control.width - translationIndicator.width width: translationIndicator.visible ? __translationIndicatorWidth : 0 height: translationIndicator.visible ? __translationIndicatorHeight : 0 } @@ -147,16 +153,16 @@ T.TextField { states: [ State { name: "default" - when: root.enabled && !root.hover && !root.edit && !contextMenu.visible + when: control.enabled && !control.hover && !control.edit && !contextMenu.visible PropertyChanges { target: textFieldBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.idle + border.color: control.style.border.idle } PropertyChanges { - target: root - color: StudioTheme.Values.themeTextColor - placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor + target: control + color: control.style.text.idle + placeholderTextColor: control.style.text.placeholder } PropertyChanges { target: mouseArea @@ -166,45 +172,45 @@ T.TextField { State { name: "globalHover" when: (actionIndicator.hover || translationIndicator.hover || indicator.hover) - && !root.edit && root.enabled && !contextMenu.visible + && !control.edit && control.enabled && !contextMenu.visible PropertyChanges { target: textFieldBackground - color: StudioTheme.Values.themeControlBackgroundGlobalHover - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.globalHover + border.color: control.style.border.idle } PropertyChanges { - target: root - color: StudioTheme.Values.themeTextColor - placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor + target: control + color: control.style.text.idle + placeholderTextColor: control.style.text.placeholder } }, State { name: "hover" when: mouseArea.containsMouse && !actionIndicator.hover && !translationIndicator.hover - && !indicator.hover && !root.edit && root.enabled && !contextMenu.visible + && !indicator.hover && !control.edit && control.enabled && !contextMenu.visible PropertyChanges { target: textFieldBackground - color: StudioTheme.Values.themeControlBackgroundHover - border.color: StudioTheme.Values.themeControlOutline + color: control.style.background.hover + border.color: control.style.border.idle } PropertyChanges { - target: root - color: StudioTheme.Values.themeTextColor - placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor + target: control + color: control.style.text.idle + placeholderTextColor: control.style.text.placeholder } }, State { name: "edit" - when: root.edit || contextMenu.visible + when: control.edit || contextMenu.visible PropertyChanges { target: textFieldBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + color: control.style.background.interaction + border.color: control.style.border.interaction } PropertyChanges { - target: root - color: StudioTheme.Values.themeTextColor - placeholderTextColor: StudioTheme.Values.themePlaceholderTextColorInteraction + target: control + color: control.style.text.idle + placeholderTextColor: control.style.text.placeholder } PropertyChanges { target: mouseArea @@ -213,24 +219,24 @@ T.TextField { }, State { name: "disable" - when: !root.enabled + when: !control.enabled PropertyChanges { target: textFieldBackground - color: StudioTheme.Values.themeControlBackgroundDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + color: control.style.background.disabled + border.color: control.style.border.disabled } PropertyChanges { - target: root - color: StudioTheme.Values.themeTextColorDisabled - placeholderTextColor: StudioTheme.Values.themeTextColorDisabled + target: control + color: control.style.text.disabled + placeholderTextColor: control.style.text.disabled } } ] Keys.onEscapePressed: function(event) { event.accepted = true - root.text = root.preFocusText - root.rejected() - root.focus = false + control.text = control.preFocusText + control.rejected() + control.focus = false } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ToolTip.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ToolTip.qml index 0c99890e6b5..b39fb6881ce 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ToolTip.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ToolTip.qml @@ -1,27 +1,5 @@ -/**************************************************************************** -** -** Copyright (C) 2022 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of Qt Creator. -** -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU General Public License Usage -** Alternatively, this file may be used under the terms of the GNU -** General Public License version 3 as published by the Free Software -** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT -** included in the packaging of this file. Please review the following -** information to ensure the GNU General Public License requirements will -** be met: https://www.gnu.org/licenses/gpl-3.0.html. -** -****************************************************************************/ +// 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 import QtQuick.Templates as T @@ -30,8 +8,10 @@ import StudioTheme 1.0 as StudioTheme T.ToolTip { id: control - x: parent ? (parent.width - implicitWidth) / 2 : 0 - y: -implicitHeight - 3 + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle + + x: parent ? (parent.width - control.implicitWidth) / 2 : 0 + y: -control.implicitHeight - 3 implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, contentWidth + leftPadding + rightPadding) @@ -42,19 +22,20 @@ T.ToolTip { padding: 4 delay: 1000 timeout: 5000 - closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent + closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent + | T.Popup.CloseOnReleaseOutsideParent contentItem: Text { text: control.text wrapMode: Text.Wrap - font.pixelSize: StudioTheme.Values.myFontSize - color: StudioTheme.Values.themeToolTipText + font.pixelSize: control.style.baseFontSize + color: control.style.toolTip.text } background: Rectangle { - color: StudioTheme.Values.themeToolTipBackground - border.width: StudioTheme.Values.border - border.color: StudioTheme.Values.themeToolTipOutline + color: control.style.toolTip.background + border.width: control.style.borderWidth + border.color: control.style.toolTip.border } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml index 121c72862da..73b380feb45 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml @@ -1,31 +1,33 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Templates 2.15 as T +import QtQuick +import QtQuick.Templates as T import StudioTheme 1.0 as StudioTheme Item { - id: translationIndicator + id: control - property Item myControl + property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle - property bool hover: translationIndicatorMouseArea.containsMouse && translationIndicator.enabled - property bool pressed: translationIndicatorMouseArea.pressed + property Item __parentControl + + property bool hover: mouseArea.containsMouse && control.enabled + property bool pressed: mouseArea.pressed property bool checked: false signal clicked Rectangle { - id: translationIndicatorBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + id: background + color: control.style.background.idle + border.color: control.style.border.idle + border.width: control.style.borderWidth anchors.centerIn: parent - width: matchParity(translationIndicator.height, StudioTheme.Values.smallRectWidth) - height: matchParity(translationIndicator.height, StudioTheme.Values.smallRectWidth) + width: background.matchParity(control.height, control.style.smallControlSize.width) + height: background.matchParity(control.height, control.style.smallControlSize.height) function matchParity(root, value) { var v = Math.round(value) @@ -37,23 +39,23 @@ Item { } MouseArea { - id: translationIndicatorMouseArea + id: mouseArea anchors.fill: parent hoverEnabled: true onPressed: function(mouse) { mouse.accepted = true } onClicked: { - translationIndicator.checked = !translationIndicator.checked - translationIndicator.clicked() + control.checked = !control.checked + control.clicked() } } } T.Label { - id: translationIndicatorIcon + id: icon text: "tr" - color: StudioTheme.Values.themeTextColor + color: control.style.icon.idle font.family: StudioTheme.Constants.font.family - font.pixelSize: StudioTheme.Values.myIconFontSize + font.pixelSize: control.style.baseIconFontSize font.italic: true verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter @@ -62,36 +64,35 @@ Item { states: [ State { name: "default" - when: translationIndicator.enabled && !translationIndicator.pressed - && !translationIndicator.checked + when: control.enabled && !control.pressed && !control.checked PropertyChanges { - target: translationIndicatorIcon - color: StudioTheme.Values.themeIconColor + target: icon + color: control.style.icon.idle } }, State { name: "press" - when: translationIndicator.enabled && translationIndicator.pressed + when: control.enabled && control.pressed PropertyChanges { - target: translationIndicatorIcon - color: StudioTheme.Values.themeIconColorInteraction + target: icon + color: control.style.icon.interaction } }, State { name: "check" - when: translationIndicator.enabled && !translationIndicator.pressed - && translationIndicator.checked + when: control.enabled && !control.pressed + && control.checked PropertyChanges { - target: translationIndicatorIcon - color: StudioTheme.Values.themeIconColorSelected + target: icon + color: control.style.icon.selected } }, State { name: "disable" - when: !myControl.enabled + when: !control.__parentControl.enabled PropertyChanges { - target: translationIndicatorIcon - color: StudioTheme.Values.themeTextColorDisabled + target: icon + color: control.style.icon.disabled } } ] @@ -100,49 +101,49 @@ Item { states: [ State { name: "default" - when: myControl.enabled && !translationIndicator.hover - && !translationIndicator.pressed && !myControl.hover - && !myControl.edit && !translationIndicator.checked + when: control.__parentControl.enabled && !control.hover && !control.pressed + && !control.__parentControl.hover && !control.__parentControl.edit + && !control.checked PropertyChanges { - target: translationIndicatorBackground - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + target: background + color: control.style.background.idle + border.color: control.style.border.idle } }, State { name: "globalHover" - when: myControl.hover && !translationIndicator.hover + when: control.__parentControl.hover && !control.hover PropertyChanges { - target: translationIndicatorBackground - color: StudioTheme.Values.themeControlBackgroundGlobalHover - border.color: StudioTheme.Values.themeControlOutline + target: background + color: control.style.background.globalHover + border.color: control.style.border.idle } }, State { name: "hover" - when: translationIndicator.hover && !translationIndicator.pressed + when: control.hover && !control.pressed PropertyChanges { - target: translationIndicatorBackground - color: StudioTheme.Values.themeControlBackgroundHover - border.color: StudioTheme.Values.themeControlOutline + target: background + color: control.style.background.hover + border.color: control.style.border.idle } }, State { name: "press" - when: translationIndicator.hover && translationIndicator.pressed + when: control.hover && control.pressed PropertyChanges { - target: translationIndicatorBackground - color: StudioTheme.Values.themeControlBackgroundInteraction - border.color: StudioTheme.Values.themeControlOutlineInteraction + target: background + color: control.style.background.interaction + border.color: control.style.border.interaction } }, State { name: "disable" - when: !myControl.enabled + when: !control.__parentControl.enabled PropertyChanges { - target: translationIndicatorBackground - color: StudioTheme.Values.themeControlBackgroundDisabled - border.color: StudioTheme.Values.themeControlOutlineDisabled + target: background + color: control.style.background.disabled + border.color: control.style.border.disabled } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/VerticalScrollBar.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/VerticalScrollBar.qml index 35225bced35..60d09ebbc2e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/VerticalScrollBar.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/VerticalScrollBar.qml @@ -1,38 +1,38 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 -import QtQuick.Controls 2.15 +import QtQuick +//import QtQuick.Controls import StudioTheme 1.0 as StudioTheme ScrollBar { - id: scrollBar + id: control implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) - property bool scrollBarVisible: parent.contentHeight > scrollBar.height + property bool scrollBarVisible: parent.contentHeight > control.height - minimumSize: scrollBar.width / scrollBar.height + minimumSize: control.width / control.height orientation: Qt.Vertical - policy: scrollBar.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff + policy: control.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff height: parent.availableHeight - (parent.bothVisible ? parent.horizontalThickness : 0) - padding: scrollBar.active ? StudioTheme.Values.scrollBarActivePadding - : StudioTheme.Values.scrollBarInactivePadding + padding: control.active ? control.style.scrollBarActivePadding + : control.style.scrollBarInactivePadding background: Rectangle { - implicitWidth: StudioTheme.Values.scrollBarThickness - implicitHeight: StudioTheme.Values.scrollBarThickness - color: StudioTheme.Values.themeScrollBarTrack + implicitWidth: control.style.scrollBarThickness + implicitHeight: control.style.scrollBarThickness + color: control.style.scrollBar.track } contentItem: Rectangle { - implicitWidth: StudioTheme.Values.scrollBarThickness - 2 * scrollBar.padding - implicitHeight: StudioTheme.Values.scrollBarThickness - 2 * scrollBar.padding - color: StudioTheme.Values.themeScrollBarHandle + implicitWidth: control.style.scrollBarThickness - 2 * control.padding + implicitHeight: control.style.scrollBarThickness - 2 * control.padding + color: control.style.scrollBar.handle } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Constants.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Constants.qml index ef4b522a1a6..87b450baa16 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Constants.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Constants.qml @@ -1,7 +1,7 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0 pragma Singleton -import QtQuick 2.10 +import QtQuick InternalConstants {} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ControlStyle.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ControlStyle.qml new file mode 100644 index 00000000000..18425baae3d --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ControlStyle.qml @@ -0,0 +1,187 @@ +// 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 + +QtObject { + id: root + + property real smallFontSize: Values.smallFontSize + property real baseFontSize: Values.baseFontSize + property real mediumFontSize: Values.mediumFontSize + property real bigFontSize: Values.bigFontSize + + property real smallIconFontSize: Values.smallIconFontSize + property real baseIconFontSize: Values.baseIconFontSize + property real mediumIconFontSize: Values.mediumIconFontSize + property real bigIconFontSize: Values.bigIconFontSize + + property real borderWidth: Values.border + property real radius: 4 + + property size smallControlSize: Qt.size(Values.smallRectWidth, + Values.smallRectWidth) + property size squareControlSize: Qt.size(root.controlSize.height, + root.controlSize.height) + property size controlSize: Qt.size(Values.defaultControlWidth, + Values.defaultControlHeight) + + property size smallIconSize: Qt.size(Values.spinControlIconSizeMulti, + Values.spinControlIconSizeMulti) + property size baseIconSize: Qt.size(Values.height, Values.height) + + // TODO only used once + property size spinBoxIndicatorSize: Qt.size(Values.spinBoxIndicatorWidth, + Values.spinBoxIndicatorHeight) + + property size actionIndicatorSize: Qt.size(Values.actionIndicatorWidth, + Values.actionIndicatorHeight) + + property size indicatorIconSize: Qt.size(Values.iconAreaWidth, + Values.height) + + property size radioButtonIndicatorSize: Qt.size(Values.radioButtonIndicatorWidth, + Values.radioButtonIndicatorHeight) + + // Special properties + property real maxTextAreaPopupHeight: Values.maxTextAreaPopupHeight + property real maxComboBoxPopupHeight: Values.maxComboBoxPopupHeight + property real inputHorizontalPadding: Values.inputHorizontalPadding + property real controlSpacing: Values.checkBoxSpacing + property real dialogPadding: Values.dialogPadding + property real dialogButtonSpacing: Values.dialogButtonSpacing + + property real contextMenuLabelSpacing: Values.contextMenuLabelSpacing + property real contextMenuHorizontalPadding: Values.contextMenuHorizontalPadding + + property real sliderTrackHeight: Values.sliderTrackHeight + property size sliderHandleSize: Qt.size(Values.sliderHandleWidth, + Values.sliderHandleHeight) + property real sliderFontSize: Values.sliderFontSize + property real sliderPadding: Values.sliderPadding + property real sliderMargin: Values.sliderMargin + property size sliderPointerSize: Qt.size(Values.sliderPointerWidth, + Values.sliderPointerHeight) + + property real sectionColumnSpacing: Values.sectionColumnSpacing + property real sectionRowSpacing: Values.sectionRowSpacing + property real sectionHeadHeight: Values.sectionHeadHeight + property real sectionHeadSpacerHeight: Values.sectionHeadSpacerHeight + + property real scrollBarThickness: Values.scrollBarThickness + property real scrollBarActivePadding: Values.scrollBarActivePadding + property real scrollBarInactivePadding: Values.scrollBarInactivePadding + + // Special colors + property color interaction: Values.themeInteraction + property color interactionHover: Values.themeInteractionHover + // TODO needs to removed in the future + property color thumbnailLabelBackground: Values.themeThumbnailLabelBackground + + // Colors + component BackgroundColors: QtObject { + property color idle: Values.themeControlBackground + property color interaction: Values.themeControlBackgroundInteraction + property color globalHover: Values.themeControlBackgroundGlobalHover + property color hover: Values.themeControlBackgroundHover + property color disabled: Values.themeControlBackgroundDisabled + } + + property BackgroundColors background: BackgroundColors {} + + component BorderColors: QtObject { + property color idle: Values.themeControlOutline + property color interaction: Values.themeControlOutlineInteraction + property color disabled: Values.themeControlOutlineDisabled + } + + property BorderColors border: BorderColors {} + + component TextColors: QtObject { + property color idle: Values.themeTextColor + property color disabled: Values.themeTextColorDisabled + property color selection: Values.themeTextSelectionColor + property color selectedText: Values.themeTextSelectedTextColor + property color placeholder: Values.themePlaceholderTextColor + property color placeholderInteraction: Values.themePlaceholderTextColorInteraction + } + + property TextColors text: TextColors {} + + component IconColors: QtObject { + property color idle: Values.themeIconColor + property color interaction: Values.themeIconColorInteraction + property color selected: Values.themeIconColorSelected + property color hover: Values.themeIconColorHover + property color disabled: Values.themeIconColorDisabled + } + + property IconColors icon: IconColors {} + + // Link- and InfinityLoopIndicator + component IndicatorColors: QtObject { + property color idle: Values.themeLinkIndicatorColor + property color interaction: Values.themeLinkIndicatorColorHover + property color hover: Values.themeLinkIndicatorColorInteraction + property color disabled: Values.themeLinkIndicatorColorDisabled + } + + property IndicatorColors indicator: IndicatorColors {} + + component SliderColors: QtObject { + property color activeTrack: Values.themeSliderActiveTrack + property color activeTrackHover: Values.themeSliderActiveTrackHover + property color activeTrackFocus: Values.themeSliderActiveTrackFocus + property color inactiveTrack: Values.themeSliderInactiveTrack + property color inactiveTrackHover: Values.themeSliderInactiveTrackHover + property color inactiveTrackFocus: Values.themeSliderInactiveTrackFocus + property color handle: Values.themeSliderHandle + property color handleHover: Values.themeSliderHandleHover + property color handleFocus: Values.themeSliderHandleFocus + property color handleInteraction: Values.themeSliderHandleInteraction + } + + property SliderColors slider: SliderColors {} + + component ScrollBarColors: QtObject { + property color track: Values.themeScrollBarTrack + property color handle: Values.themeScrollBarHandle + } + + property ScrollBarColors scrollBar: ScrollBarColors {} + + component SectionColors: QtObject { + property color head: Values.themeSectionHeadBackground + } + + property SectionColors section: SectionColors {} + + component PanelColors: QtObject { + property color background: Values.themePanelBackground + } + + property PanelColors panel: PanelColors {} + + component PopupColors: QtObject { + property color background: Values.themePopupBackground + property color overlay: Values.themePopupOverlayColor + } + + property PopupColors popup: PopupColors {} + + component DialogColors: QtObject { + property color background: Values.themeDialogBackground + property color border: Values.themeDialogOutline + property color overlay: Values.themeDialogBackground + } + + property DialogColors dialog: DialogColors {} + + component ToolTipColors: QtObject { + property color background: Values.themeToolTipBackground + property color border: Values.themeToolTipOutline + property color text: Values.themeToolTipText + } + + property ToolTipColors toolTip: ToolTipColors {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/DefaultStyle.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/DefaultStyle.qml new file mode 100644 index 00000000000..46c25ad4d5e --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/DefaultStyle.qml @@ -0,0 +1,6 @@ +// 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 {} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml index cdad4b7e1a7..a77e9af6fd7 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml @@ -1,7 +1,7 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// 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 2.15 +import QtQuick QtObject { readonly property int width: 1920 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ToolbarStyle.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ToolbarStyle.qml new file mode 100644 index 00000000000..993c2d1aa89 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ToolbarStyle.qml @@ -0,0 +1,10 @@ +// 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 { + background { + idle: "red" + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml index 536c8adc6a4..76f529a6b34 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml @@ -1,17 +1,21 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0 pragma Singleton -import QtQuick 2.15 +import QtQuick import QtQuickDesignerTheme 1.0 QtObject { id: values property real baseHeight: 29 + + property real smallFont: 8 property real baseFont: 12 property real mediumFont: 14 property real bigFont: 16 + + property real smallIconFont: 8 property real baseIconFont: 12 property real mediumIconFont: 18 property real bigIconFont: 26 @@ -19,21 +23,27 @@ QtObject { property real scaleFactor: 1.0 property real height: Math.round(values.baseHeight * values.scaleFactor) - property real baseFontSize: Math.round(values.baseFont * values.scaleFactor) + property real myFontSize: values.baseFontSize // TODO: rename all refs to myFontSize -> baseFontSize then remove myFontSize + + property real smallFontSize: Math.round(values.smallFont * values.scaleFactor) + property real baseFontSize: Math.round(values.baseFont * values.scaleFactor) property real mediumFontSize: Math.round(values.mediumFont * values.scaleFactor) property real bigFontSize: Math.round(values.bigFont * values.scaleFactor) + + property real myIconFontSize: values.baseIconFontSize // TODO: rename all refs to myIconFontSize -> baseIconFontSize then remove myIconFontSize + + property real smallIconFontSize: Math.round(values.smallIconFont * values.scaleFactor) property real baseIconFontSize: Math.round(values.baseIconFont * values.scaleFactor) - property real myIconFontSize: values.baseIconFontSize; // TODO: rename all refs to myIconFontSize -> baseIconFontSize then remove myIconFontSize property real mediumIconFontSize: Math.round(values.mediumIconFont * values.scaleFactor) property real bigIconFontSize: Math.round(values.bigIconFont * values.scaleFactor) property real squareComponentWidth: values.height - property real smallRectWidth: values.height / 2 * 1.5 + property real smallRectWidth: values.height * 0.75// / 2 * 1.5 property real inputWidth: values.height * 4 - property real sliderHeight: values.height / 2 * 1.5 // TODO:Have a look at -> sliderAreaHeight: Data.Values.height/2*1.5 + property real sliderHeight: values.height * 0.75// / 2 * 1.5 // TODO:Have a look at -> sliderAreaHeight: Data.Values.height/2*1.5 property real sliderControlSize: 12 property real sliderControlSizeMulti: values.sliderControlSize * values.scaleFactor @@ -43,8 +53,8 @@ QtObject { property real spinControlIconSizeMulti: values.spinControlIconSize * values.scaleFactor property real sliderTrackHeight: values.height / 3 - property real sliderHandleHeight: values.sliderTrackHeight * 1.8 property real sliderHandleWidth: values.sliderTrackHeight * 0.5 + property real sliderHandleHeight: values.sliderTrackHeight * 1.8 property real sliderFontSize: Math.round(8 * values.scaleFactor) property real sliderPadding: Math.round(6 * values.scaleFactor) property real sliderMargin: Math.round(3 * values.scaleFactor) @@ -55,10 +65,10 @@ QtObject { property real checkBoxSpacing: Math.round(6 * values.scaleFactor) property real radioButtonSpacing: values.checkBoxSpacing - property real radioButtonWidth: values.height - property real radioButtonHeight: values.height - property real radioButtonIndicatorWidth: 14 - property real radioButtonIndicatorHeight: 14 + //property real radioButtonWidth: values.height + //property real radioButtonHeight: values.height + property real radioButtonIndicatorWidth: Math.round(14 * values.scaleFactor) + property real radioButtonIndicatorHeight: Math.round(14 * values.scaleFactor) property real switchSpacing: values.checkBoxSpacing @@ -145,7 +155,7 @@ QtObject { property real controlColumnWithoutControlsWidth: 2 * (values.actionIndicatorWidth + values.twoControlColumnGap) - + values.linkControlWidth + + values.linkControlWidth // there could be an issue here with the new style property real controlColumnWidth: values.controlColumnWithoutControlsWidth + 2 * values.twoControlColumnWidth @@ -207,134 +217,137 @@ QtObject { // Theme Colors - property bool isLightTheme: themeControlBackground.hsvValue > themeTextColor.hsvValue + property bool isLightTheme: values.themeControlBackground.hsvValue > values.themeTextColor.hsvValue - property string themePanelBackground: Theme.color(Theme.DSpanelBackground) + property color themePanelBackground: Theme.color(Theme.DSpanelBackground) - property string themeGreenLight: Theme.color(Theme.DSgreenLight) - property string themeAmberLight: Theme.color(Theme.DSamberLight) - property string themeRedLight: Theme.color(Theme.DSredLight) + property color themeGreenLight: Theme.color(Theme.DSgreenLight) + property color themeAmberLight: Theme.color(Theme.DSamberLight) + property color themeRedLight: Theme.color(Theme.DSredLight) - property string themeInteraction: Theme.color(Theme.DSinteraction) - property string themeError: Theme.color(Theme.DSerrorColor) - property string themeWarning: Theme.color(Theme.DSwarningColor) - property string themeDisabled: Theme.color(Theme.DSdisabledColor) + property color themeInteraction: Theme.color(Theme.DSinteraction) + property color themeError: Theme.color(Theme.DSerrorColor) + property color themeWarning: Theme.color(Theme.DSwarningColor) + property color themeDisabled: Theme.color(Theme.DSdisabledColor) - property string themeInteractionHover: Theme.color(Theme.DSinteractionHover) + property color themeInteractionHover: Theme.color(Theme.DSinteractionHover) - property string themeAliasIconChecked: Theme.color(Theme.DSnavigatorAliasIconChecked) + property color themeAliasIconChecked: Theme.color(Theme.DSnavigatorAliasIconChecked) // Control colors property color themeControlBackground: Theme.color(Theme.DScontrolBackground) - property string themeControlBackgroundInteraction: Theme.color(Theme.DScontrolBackgroundInteraction) - property string themeControlBackgroundDisabled: Theme.color(Theme.DScontrolBackgroundDisabled) - property string themeControlBackgroundGlobalHover: Theme.color(Theme.DScontrolBackgroundGlobalHover) - property string themeControlBackgroundHover: Theme.color(Theme.DScontrolBackgroundHover) + property color themeControlBackgroundInteraction: Theme.color(Theme.DScontrolBackgroundInteraction) + property color themeControlBackgroundDisabled: Theme.color(Theme.DScontrolBackgroundDisabled) + property color themeControlBackgroundGlobalHover: Theme.color(Theme.DScontrolBackgroundGlobalHover) + property color themeControlBackgroundHover: Theme.color(Theme.DScontrolBackgroundHover) - property string themeControlOutline: Theme.color(Theme.DScontrolOutline) - property string themeControlOutlineInteraction: Theme.color(Theme.DScontrolOutlineInteraction) - property string themeControlOutlineDisabled: Theme.color(Theme.DScontrolOutlineDisabled) + property color themeControlOutline: Theme.color(Theme.DScontrolOutline) + property color themeControlOutlineInteraction: Theme.color(Theme.DScontrolOutlineInteraction) + property color themeControlOutlineDisabled: Theme.color(Theme.DScontrolOutlineDisabled) // Panels & Panes - property string themeBackgroundColorNormal: Theme.color(Theme.DSBackgroundColorNormal) - property string themeBackgroundColorAlternate: Theme.color(Theme.DSBackgroundColorAlternate) + property color themeBackgroundColorNormal: Theme.color(Theme.DSBackgroundColorNormal) + property color themeBackgroundColorAlternate: Theme.color(Theme.DSBackgroundColorAlternate) // Text colors property color themeTextColor: Theme.color(Theme.DStextColor) - property string themeTextColorDisabled: Theme.color(Theme.DStextColorDisabled) - property string themeTextSelectionColor: Theme.color(Theme.DStextSelectionColor) - property string themeTextSelectedTextColor: Theme.color(Theme.DStextSelectedTextColor) - property string themeTextColorDisabledMCU: Theme.color(Theme.DStextColorDisabled) + property color themeTextColorDisabled: Theme.color(Theme.DStextColorDisabled) + property color themeTextSelectionColor: Theme.color(Theme.DStextSelectionColor) + property color themeTextSelectedTextColor: Theme.color(Theme.DStextSelectedTextColor) + property color themeTextColorDisabledMCU: Theme.color(Theme.DStextColorDisabled) - property string themePlaceholderTextColor: Theme.color(Theme.DSplaceholderTextColor) - property string themePlaceholderTextColorInteraction: Theme.color(Theme.DSplaceholderTextColorInteraction) + property color themePlaceholderTextColor: Theme.color(Theme.DSplaceholderTextColor) + property color themePlaceholderTextColorInteraction: Theme.color(Theme.DSplaceholderTextColorInteraction) // Icon colors - property string themeIconColor: Theme.color(Theme.DSiconColor) - property string themeIconColorHover: Theme.color(Theme.DSiconColorHover) - property string themeIconColorInteraction: Theme.color(Theme.DSiconColorInteraction) - property string themeIconColorDisabled: Theme.color(Theme.DSiconColorDisabled) - property string themeIconColorSelected: Theme.color(Theme.DSiconColorSelected) + property color themeIconColor: Theme.color(Theme.DSiconColor) + property color themeIconColorHover: Theme.color(Theme.DSiconColorHover) + property color themeIconColorInteraction: Theme.color(Theme.DSiconColorInteraction) + property color themeIconColorDisabled: Theme.color(Theme.DSiconColorDisabled) + property color themeIconColorSelected: Theme.color(Theme.DSiconColorSelected) - property string themeLinkIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor) - property string themeLinkIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover) - property string themeLinkIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction) - property string themeLinkIndicatorColorDisabled: Theme.color(Theme.DSlinkIndicatorColorDisabled) + property color themeLinkIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor) + property color themeLinkIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover) + property color themeLinkIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction) + property color themeLinkIndicatorColorDisabled: Theme.color(Theme.DSlinkIndicatorColorDisabled) - property string themeInfiniteLoopIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor) - property string themeInfiniteLoopIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover) - property string themeInfiniteLoopIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction) + property color themeInfiniteLoopIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor) + property color themeInfiniteLoopIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover) + property color themeInfiniteLoopIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction) // Popup background color (ComboBox, SpinBox, TextArea) - property string themePopupBackground: Theme.color(Theme.DSpopupBackground) - // GradientPopupDialog modal overly color - property string themePopupOverlayColor: Theme.color(Theme.DSpopupOverlayColor) + property color themePopupBackground: Theme.color(Theme.DSpopupBackground) + // GradientPopupDialog modal overlay color + property color themePopupOverlayColor: Theme.color(Theme.DSpopupOverlayColor) // ToolTip (UrlChooser) - property string themeToolTipBackground: Theme.color(Theme.DStoolTipBackground) - property string themeToolTipOutline: Theme.color(Theme.DStoolTipOutline) - property string themeToolTipText: Theme.color(Theme.DStoolTipText) + property color themeToolTipBackground: Theme.color(Theme.DStoolTipBackground) + property color themeToolTipOutline: Theme.color(Theme.DStoolTipOutline) + property color themeToolTipText: Theme.color(Theme.DStoolTipText) // Slider colors - property string themeSliderActiveTrack: Theme.color(Theme.DSsliderActiveTrack) - property string themeSliderActiveTrackHover: Theme.color(Theme.DSsliderActiveTrackHover) - property string themeSliderActiveTrackFocus: Theme.color(Theme.DSsliderActiveTrackFocus) - property string themeSliderInactiveTrack: Theme.color(Theme.DSsliderInactiveTrack) - property string themeSliderInactiveTrackHover: Theme.color(Theme.DSsliderInactiveTrackHover) - property string themeSliderInactiveTrackFocus: Theme.color(Theme.DSsliderInactiveTrackFocus) - property string themeSliderHandle: Theme.color(Theme.DSsliderHandle) - property string themeSliderHandleHover: Theme.color(Theme.DSsliderHandleHover) - property string themeSliderHandleFocus: Theme.color(Theme.DSsliderHandleFocus) - property string themeSliderHandleInteraction: Theme.color(Theme.DSsliderHandleInteraction) + property color themeSliderActiveTrack: Theme.color(Theme.DSsliderActiveTrack) + property color themeSliderActiveTrackHover: Theme.color(Theme.DSsliderActiveTrackHover) + property color themeSliderActiveTrackFocus: Theme.color(Theme.DSsliderActiveTrackFocus) + property color themeSliderInactiveTrack: Theme.color(Theme.DSsliderInactiveTrack) + property color themeSliderInactiveTrackHover: Theme.color(Theme.DSsliderInactiveTrackHover) + property color themeSliderInactiveTrackFocus: Theme.color(Theme.DSsliderInactiveTrackFocus) + property color themeSliderHandle: Theme.color(Theme.DSsliderHandle) + property color themeSliderHandleHover: Theme.color(Theme.DSsliderHandleHover) + property color themeSliderHandleFocus: Theme.color(Theme.DSsliderHandleFocus) + property color themeSliderHandleInteraction: Theme.color(Theme.DSsliderHandleInteraction) - property string themeScrollBarTrack: Theme.color(Theme.DSscrollBarTrack) - property string themeScrollBarHandle: Theme.color(Theme.DSscrollBarHandle) + property color themeScrollBarTrack: Theme.color(Theme.DSscrollBarTrack) + property color themeScrollBarHandle: Theme.color(Theme.DSscrollBarHandle) - property string themeSectionHeadBackground: Theme.color(Theme.DSsectionHeadBackground) + property color themeSectionHeadBackground: Theme.color(Theme.DSsectionHeadBackground) - property string themeTabActiveBackground: Theme.color(Theme.DStabActiveBackground) - property string themeTabActiveText: Theme.color(Theme.DStabActiveText) - property string themeTabInactiveBackground: Theme.color(Theme.DStabInactiveBackground) - property string themeTabInactiveText: Theme.color(Theme.DStabInactiveText) + property color themeTabActiveBackground: Theme.color(Theme.DStabActiveBackground) + property color themeTabActiveText: Theme.color(Theme.DStabActiveText) + property color themeTabInactiveBackground: Theme.color(Theme.DStabInactiveBackground) + property color themeTabInactiveText: Theme.color(Theme.DStabInactiveText) // State Editor - property string themeStateSeparator: Theme.color(Theme.DSstateSeparatorColor) - property string themeStateBackground: Theme.color(Theme.DSstateBackgroundColor) - property string themeStatePreviewOutline: Theme.color(Theme.DSstatePreviewOutline) + property color themeStateSeparator: Theme.color(Theme.DSstateSeparatorColor) + property color themeStateBackground: Theme.color(Theme.DSstateBackgroundColor) + property color themeStatePreviewOutline: Theme.color(Theme.DSstatePreviewOutline) // State Editor *new* property color themeStatePanelBackground: Theme.color(Theme.DSstatePanelBackground) property color themeStateHighlight: Theme.color(Theme.DSstateHighlight) - property string themeUnimportedModuleColor: Theme.color(Theme.DSUnimportedModuleColor) + property color themeUnimportedModuleColor: Theme.color(Theme.DSUnimportedModuleColor) // Taken out of Constants.js - property string themeChangedStateText: Theme.color(Theme.DSchangedStateText) + property color themeChangedStateText: Theme.color(Theme.DSchangedStateText) // 3D - property string theme3DAxisXColor: Theme.color(Theme.DS3DAxisXColor) - property string theme3DAxisYColor: Theme.color(Theme.DS3DAxisYColor) - property string theme3DAxisZColor: Theme.color(Theme.DS3DAxisZColor) + property color theme3DAxisXColor: Theme.color(Theme.DS3DAxisXColor) + property color theme3DAxisYColor: Theme.color(Theme.DS3DAxisYColor) + property color theme3DAxisZColor: Theme.color(Theme.DS3DAxisZColor) - property string themeActionBinding: Theme.color(Theme.DSactionBinding) - property string themeActionAlias: Theme.color(Theme.DSactionAlias) - property string themeActionKeyframe: Theme.color(Theme.DSactionKeyframe) - property string themeActionJIT: Theme.color(Theme.DSactionJIT) + property color themeActionBinding: Theme.color(Theme.DSactionBinding) + property color themeActionAlias: Theme.color(Theme.DSactionAlias) + property color themeActionKeyframe: Theme.color(Theme.DSactionKeyframe) + property color themeActionJIT: Theme.color(Theme.DSactionJIT) - property string themeListItemBackground: Theme.color(Theme.DSnavigatorItemBackground) - property string themeListItemBackgroundHover: Theme.color(Theme.DSnavigatorItemBackgroundHover) - property string themeListItemBackgroundPress: Theme.color(Theme.DSnavigatorItemBackgroundSelected) - property string themeListItemText: Theme.color(Theme.DSnavigatorText) - property string themeListItemTextHover: Theme.color(Theme.DSnavigatorTextHover) - property string themeListItemTextPress: Theme.color(Theme.DSnavigatorTextSelected) + property color themeListItemBackground: Theme.color(Theme.DSnavigatorItemBackground) + property color themeListItemBackgroundHover: Theme.color(Theme.DSnavigatorItemBackgroundHover) + property color themeListItemBackgroundPress: Theme.color(Theme.DSnavigatorItemBackgroundSelected) + property color themeListItemText: Theme.color(Theme.DSnavigatorText) + property color themeListItemTextHover: Theme.color(Theme.DSnavigatorTextHover) + property color themeListItemTextPress: Theme.color(Theme.DSnavigatorTextSelected) // Welcome Page - property string welcomeScreenBackground: Theme.color(Theme.DSwelcomeScreenBackground) - property string themeSubPanelBackground: Theme.color(Theme.DSsubPanelBackground) - property string themeThumbnailBackground: Theme.color(Theme.DSthumbnailBackground) - property string themeThumbnailLabelBackground: Theme.color(Theme.DSthumbnailLabelBackground) + property color welcomeScreenBackground: Theme.color(Theme.DSwelcomeScreenBackground) + property color themeSubPanelBackground: Theme.color(Theme.DSsubPanelBackground) + property color themeThumbnailBackground: Theme.color(Theme.DSthumbnailBackground) + property color themeThumbnailLabelBackground: Theme.color(Theme.DSthumbnailLabelBackground) // Dialog property color themeDialogBackground: values.themeThumbnailBackground property color themeDialogOutline: values.themeInteraction + + property ControlStyle controlStyle: DefaultStyle {} + property ControlStyle toolbarStyle: ToolbarStyle {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir index 4f689f9f630..6390e11ea13 100755 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir @@ -1,4 +1,6 @@ singleton Values 1.0 Values.qml singleton Constants 1.0 Constants.qml +ControlStyle 1.0 ControlStyle.qml +DefaultStyle 1.0 DefaultStyle.qml InternalConstants 1.0 InternalConstants.qml - +ToolbarStyle 1.0 ToolbarStyle.qml