feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Add control style support

Browse Source 
* 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 <thomas.hartmann@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
This commit is contained in:
Henning Gruendl
2022-12-15 10:18:59 +01:00
committed by Henning Gründl
parent 8d02bbf075
commit d250e356dc
59 changed files with 2384 additions and 2140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginControl.qml
View File

@@ -36,7 +36,7 @@ Row {
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: myButton __parentControl: myButton
x: 0 x: 0
y: 0 y: 0
width: actionIndicator.visible ? myButton.__actionIndicatorWidth : 0 width: actionIndicator.visible ? myButton.__actionIndicatorWidth : 0

108
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.AbstractButton { T.AbstractButton {
id: myButton id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property bool globalHover: false property bool globalHover: false
property bool hover: myButton.hovered property bool hover: control.hovered
property alias buttonIcon: buttonIcon.text property alias buttonIcon: buttonIcon.text
property alias iconColor: buttonIcon.color property alias iconColor: buttonIcon.color
@@ -28,34 +30,34 @@ T.AbstractButton {
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding) implicitContentHeight + topPadding + bottomPadding)
height: StudioTheme.Values.height width: control.style.squareControlSize.width
width: StudioTheme.Values.height height: control.style.squareControlSize.height
z: myButton.checked ? 10 : 3 z: control.checked ? 10 : 3
activeFocusOnTab: false activeFocusOnTab: false
onHoverChanged: { onHoverChanged: {
if (parent !== undefined && parent.hoverCallback !== undefined && myButton.enabled) if (parent !== undefined && parent.hoverCallback !== undefined && control.enabled)
parent.hoverCallback() parent.hoverCallback()
} }
background: Rectangle { background: Rectangle {
id: buttonBackground id: buttonBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
} }
indicator: Item { indicator: Item {
x: 0 x: 0
y: 0 y: 0
width: myButton.width width: control.width
height: myButton.height height: control.height
T.Label { T.Label {
id: buttonIcon id: buttonIcon
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
anchors.fill: parent anchors.fill: parent
@@ -64,35 +66,35 @@ T.AbstractButton {
states: [ states: [
State { State {
name: "default" name: "default"
when: myButton.enabled && !myButton.pressed && !myButton.checked when: control.enabled && !control.pressed && !control.checked
PropertyChanges { PropertyChanges {
target: buttonIcon target: buttonIcon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
}, },
State { State {
name: "press" name: "press"
when: myButton.enabled && myButton.pressed when: control.enabled && control.pressed
PropertyChanges { PropertyChanges {
target: buttonIcon target: buttonIcon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
}, },
State { State {
name: "check" name: "check"
when: myButton.enabled && !myButton.pressed && myButton.checked when: control.enabled && !control.pressed && control.checked
PropertyChanges { PropertyChanges {
target: buttonIcon target: buttonIcon
color: myButton.checkedInverted ? StudioTheme.Values.themeTextSelectedTextColor color: control.checkedInverted ? control.style.text.selectedText // TODO rather something in icon
: StudioTheme.Values.themeIconColorSelected : control.style.icon.selected
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myButton.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: buttonIcon target: buttonIcon
color: StudioTheme.Values.themeTextColorDisabled color: control.style.icon.disabled
} }
} }
] ]
@@ -102,78 +104,78 @@ T.AbstractButton {
states: [ states: [
State { State {
name: "default" name: "default"
when: myButton.enabled && !myButton.globalHover && !myButton.hover when: control.enabled && !control.globalHover && !control.hover
&& !myButton.pressed && !myButton.checked && !control.pressed && !control.checked
PropertyChanges { PropertyChanges {
target: buttonBackground target: buttonBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: myButton target: control
z: 3 z: 3
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: myButton.globalHover && !myButton.hover && !myButton.pressed && myButton.enabled when: control.globalHover && !control.hover && !control.pressed && control.enabled
PropertyChanges { PropertyChanges {
target: buttonBackground target: buttonBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
}, },
State { State {
name: "hover" name: "hover"
when: !myButton.checked && myButton.hover && !myButton.pressed && myButton.enabled when: !control.checked && control.hover && !control.pressed && control.enabled
PropertyChanges { PropertyChanges {
target: buttonBackground target: buttonBackground
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
}, },
State { State {
name: "hoverCheck" name: "hoverCheck"
when: myButton.checked && myButton.hover && !myButton.pressed && myButton.enabled when: control.checked && control.hover && !control.pressed && control.enabled
PropertyChanges { PropertyChanges {
target: buttonBackground target: buttonBackground
color: myButton.checkedInverted ? StudioTheme.Values.themeInteractionHover color: control.checkedInverted ? control.style.interactionHover
: StudioTheme.Values.themeControlBackgroundHover : control.style.background.hover
border.color: myButton.checkedInverted ? StudioTheme.Values.themeInteractionHover border.color: control.checkedInverted ? control.style.interactionHover
: StudioTheme.Values.themeControlOutline : control.style.border.idle
} }
}, },
State { State {
name: "press" name: "press"
when: myButton.hover && myButton.pressed && myButton.enabled when: control.hover && control.pressed && control.enabled
PropertyChanges { PropertyChanges {
target: buttonBackground target: buttonBackground
color: StudioTheme.Values.themeInteraction color: control.style.interaction
border.color: StudioTheme.Values.themeInteraction border.color: control.style.interaction
} }
PropertyChanges { PropertyChanges {
target: myButton target: control
z: 100 z: 100
} }
}, },
State { State {
name: "check" name: "check"
when: myButton.enabled && !myButton.pressed && myButton.checked when: control.enabled && !control.pressed && control.checked
PropertyChanges { PropertyChanges {
target: buttonBackground target: buttonBackground
color: myButton.checkedInverted ? StudioTheme.Values.themeInteraction color: control.checkedInverted ? control.style.interaction
: StudioTheme.Values.themeControlBackground : control.style.background.idle
border.color: myButton.checkedInverted ? StudioTheme.Values.themeInteraction border.color: control.checkedInverted ? control.style.interaction
: StudioTheme.Values.themeControlOutline : control.style.border.idle
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myButton.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: buttonBackground target: buttonBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
} }
] ]

55
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Rectangle { 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 hover: false
property bool pressed: false property bool pressed: false
@@ -18,55 +20,56 @@ Rectangle {
color: "transparent" color: "transparent"
implicitWidth: StudioTheme.Values.actionIndicatorWidth implicitWidth: control.style.actionIndicatorSize.width
implicitHeight: StudioTheme.Values.actionIndicatorHeight implicitHeight: control.style.actionIndicatorSize.height
signal clicked signal clicked
z: 10 z: 10
T.Label { T.Label {
id: actionIndicatorIcon id: icon
anchors.fill: parent anchors.fill: parent
text: StudioTheme.Constants.actionIcon text: StudioTheme.Constants.actionIcon
visible: text !== StudioTheme.Constants.actionIcon || actionIndicator.forceVisible visible: text !== StudioTheme.Constants.actionIcon || control.forceVisible
|| (myControl !== undefined && || (control.__parentControl !== undefined &&
((myControl.edit !== undefined && myControl.edit) ((control.__parentControl.edit !== undefined && control.__parentControl.edit)
|| (myControl.hover !== undefined && myControl.hover) || (control.__parentControl.hover !== undefined && control.__parentControl.hover)
|| (myControl.drag !== undefined && myControl.drag))) || (control.__parentControl.drag !== undefined && control.__parentControl.drag)))
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
states: [ states: [
State { State {
name: "hover" name: "hover"
when: actionIndicator.hover && !actionIndicator.pressed when: control.hover && !control.pressed
&& (!myControl || (!myControl.edit && !myControl.drag)) && (!control.__parentControl
&& actionIndicator.enabled || (!control.__parentControl.edit && !control.__parentControl.drag))
&& control.enabled
PropertyChanges { PropertyChanges {
target: actionIndicatorIcon target: icon
scale: 1.2 scale: 1.2
visible: true visible: true
} }
}, },
State { State {
name: "disable" name: "disable"
when: !actionIndicator.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: actionIndicatorIcon target: icon
color: StudioTheme.Values.themeTextColorDisabled color: control.style.icon.disabled
} }
} }
] ]
} }
MouseArea { MouseArea {
id: actionIndicatorMouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onContainsMouseChanged: actionIndicator.hover = containsMouse onContainsMouseChanged: control.hover = mouseArea.containsMouse
onClicked: actionIndicator.clicked() onClicked: control.clicked()
} }
} }

25
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import StudioControls 1.0
ButtonRow { ButtonRow {
id: myButtonRow id: control
property alias buttonIcon: myAbstractButton.buttonIcon property alias style: button.style
property alias iconColor: myAbstractButton.iconColor
property alias iconRotation: myAbstractButton.iconRotation property alias buttonIcon: button.buttonIcon
property alias checkable: myAbstractButton.checkable property alias iconColor: button.iconColor
property alias checked: myAbstractButton.checked property alias iconRotation: button.iconRotation
property alias checkable: button.checkable
property alias checked: button.checked
signal onCheckedChanged() signal onCheckedChanged()
signal clicked signal clicked
AbstractButton { AbstractButton {
id: myAbstractButton id: button
onCheckedChanged: myButtonRow.onCheckedChanged() onCheckedChanged: control.onCheckedChanged()
onClicked: myButtonRow.clicked() onClicked: control.clicked()
} }
} }

6
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
T.ButtonGroup { T.ButtonGroup {

45
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Layouts 1.15 import QtQuick.Layouts
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Row { 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 bool childHover: false
property alias actionIndicator: actionIndicator property alias actionIndicator: actionIndicator
property alias actionIndicatorVisible: actionIndicator.visible property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth property real __actionIndicatorWidth: control.style.actionIndicatorSize.width
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight property real __actionIndicatorHeight: control.style.actionIndicatorSize.height
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: myButtonRow style: control.style
__parentControl: control
x: 0 x: 0
y: 0 y: 0
// + StudioTheme.Values.border on width because of negative spacing on the row // + borderWidth because of negative spacing on the row
width: actionIndicator.visible ? myButtonRow.__actionIndicatorWidth + StudioTheme.Values.border : 0 width: actionIndicator.visible ? control.__actionIndicatorWidth + control.style.borderWidth : 0
height: actionIndicator.visible ? myButtonRow.__actionIndicatorHeight : 0 height: actionIndicator.visible ? control.__actionIndicatorHeight : 0
onHoverChanged: myButtonRow.hoverCallback() onHoverChanged: control.hoverCallback()
} }
spacing: -StudioTheme.Values.border spacing: -control.style.borderWidth
function hoverCallback() { function hoverCallback() {
var hover = false var hover = false
for (var i = 0; i < children.length; ++i) { for (var i = 0; i < control.children.length; ++i) {
if (children[i].hover !== undefined) if (control.children[i].hover !== undefined)
hover = hover || children[i].hover hover = hover || control.children[i].hover
} }
myButtonRow.childHover = hover control.childHover = hover
} }
onHoverChanged: { onHoverChanged: {
for (var i = 0; i < children.length; ++i) for (var i = 0; i < control.children.length; ++i)
if (children[i].globalHover !== undefined) if (control.children[i].globalHover !== undefined)
children[i].globalHover = myButtonRow.hover control.children[i].globalHover = control.hover
} }
} }

125
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.CheckBox { T.CheckBox {
id: myCheckBox id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property alias actionIndicator: actionIndicator property alias actionIndicator: actionIndicator
// This property is used to indicate the global hover state // 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 bool edit: false
property alias actionIndicatorVisible: actionIndicator.visible property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth property real __actionIndicatorWidth: control.style.actionIndicatorSize.width
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight property real __actionIndicatorHeight: control.style.actionIndicatorSize.height
property alias labelVisible: checkBoxLabel.visible property alias labelVisible: label.visible
property alias labelColor: checkBoxLabel.color property alias labelColor: label.color
property alias fontFamily: checkBoxLabel.font.family property alias fontFamily: label.font.family
property alias fontPixelSize: checkBoxLabel.font.pixelSize property alias fontPixelSize: label.font.pixelSize
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseFontSize
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
@@ -32,15 +34,16 @@ T.CheckBox {
implicitContentHeight + topPadding + bottomPadding, implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding) implicitIndicatorHeight + topPadding + bottomPadding)
spacing: checkBoxLabel.visible ? StudioTheme.Values.checkBoxSpacing : 0 spacing: label.visible ? control.style.controlSpacing : 0
hoverEnabled: true hoverEnabled: true
activeFocusOnTab: false activeFocusOnTab: false
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: myCheckBox style: control.style
width: actionIndicator.visible ? myCheckBox.__actionIndicatorWidth : 0 __parentControl: control
height: actionIndicator.visible ? myCheckBox.__actionIndicatorHeight : 0 width: actionIndicator.visible ? control.__actionIndicatorWidth : 0
height: actionIndicator.visible ? control.__actionIndicatorHeight : 0
} }
indicator: Rectangle { indicator: Rectangle {
@@ -48,20 +51,20 @@ T.CheckBox {
x: actionIndicator.width x: actionIndicator.width
y: 0 y: 0
z: 5 z: 5
implicitWidth: StudioTheme.Values.height implicitWidth: control.style.squareControlSize.width
implicitHeight: StudioTheme.Values.height implicitHeight: control.style.squareControlSize.height
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
T.Label { T.Label {
id: checkedIcon id: checkedIcon
x: (parent.width - checkedIcon.width) / 2 x: (parent.width - checkedIcon.width) / 2
y: (parent.height - checkedIcon.height) / 2 y: (parent.height - checkedIcon.height) / 2
text: StudioTheme.Constants.tickIcon text: StudioTheme.Constants.tickIcon
visible: myCheckBox.checkState === Qt.Checked visible: control.checkState === Qt.Checked
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
font.pixelSize: StudioTheme.Values.sliderControlSizeMulti font.pixelSize: control.style.baseIconFontSize
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
} }
@@ -70,113 +73,113 @@ T.CheckBox {
x: (parent.width - checkedIcon.width) / 2 x: (parent.width - checkedIcon.width) / 2
y: (parent.height - checkedIcon.height) / 2 y: (parent.height - checkedIcon.height) / 2
text: StudioTheme.Constants.triState text: StudioTheme.Constants.triState
visible: myCheckBox.checkState === Qt.PartiallyChecked visible: control.checkState === Qt.PartiallyChecked
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
font.pixelSize: StudioTheme.Values.sliderControlSizeMulti font.pixelSize: control.style.baseIconFontSize
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
} }
} }
contentItem: T.Label { contentItem: T.Label {
id: checkBoxLabel id: label
leftPadding: checkBoxBackground.x + checkBoxBackground.width + myCheckBox.spacing leftPadding: checkBoxBackground.x + checkBoxBackground.width + control.spacing
rightPadding: 0 rightPadding: 0
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
text: myCheckBox.text text: control.text
font: myCheckBox.font font: control.font
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
visible: checkBoxLabel.text !== "" visible: label.text !== ""
} }
states: [ states: [
State { State {
name: "default" name: "default"
when: myCheckBox.enabled && !myCheckBox.hover when: control.enabled && !control.hover
&& !myCheckBox.pressed && !actionIndicator.hover && !control.pressed && !actionIndicator.hover
PropertyChanges { PropertyChanges {
target: checkBoxBackground target: checkBoxBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: checkedIcon target: checkedIcon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
PropertyChanges { PropertyChanges {
target: partiallyCheckedIcon target: partiallyCheckedIcon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: actionIndicator.hover && !myCheckBox.pressed && myCheckBox.enabled when: actionIndicator.hover && !control.pressed && control.enabled
PropertyChanges { PropertyChanges {
target: checkBoxBackground target: checkBoxBackground
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: checkedIcon target: checkedIcon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
PropertyChanges { PropertyChanges {
target: partiallyCheckedIcon target: partiallyCheckedIcon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
}, },
State { State {
name: "hover" name: "hover"
when: myCheckBox.hover && !actionIndicator.hover && !myCheckBox.pressed when: control.hover && !actionIndicator.hover && !control.pressed
PropertyChanges { PropertyChanges {
target: checkBoxBackground target: checkBoxBackground
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: checkedIcon target: checkedIcon
color: StudioTheme.Values.themeIconColor // TODO naming color: control.style.icon.idle
} }
PropertyChanges { PropertyChanges {
target: partiallyCheckedIcon target: partiallyCheckedIcon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
}, },
State { State {
name: "press" name: "press"
when: myCheckBox.hover && myCheckBox.pressed when: control.hover && control.pressed
PropertyChanges { PropertyChanges {
target: checkBoxBackground target: checkBoxBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
PropertyChanges { PropertyChanges {
target: checkedIcon target: checkedIcon
color: StudioTheme.Values.themeIconColorInteraction color: control.style.icon.interaction
} }
PropertyChanges { PropertyChanges {
target: partiallyCheckedIcon target: partiallyCheckedIcon
color: StudioTheme.Values.themeIconColorInteraction color: control.style.icon.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myCheckBox.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: checkBoxBackground target: checkBoxBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
PropertyChanges { PropertyChanges {
target: checkedIcon target: checkedIcon
color: StudioTheme.Values.themeIconColorDisabled color: control.style.icon.disabled
} }
PropertyChanges { PropertyChanges {
target: partiallyCheckedIcon target: partiallyCheckedIcon
color: StudioTheme.Values.themeIconColorDisabled color: control.style.icon.disabled
} }
PropertyChanges { PropertyChanges {
target: checkBoxLabel target: label
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
} }
} }
] ]

140
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Rectangle { Rectangle {
id: checkIndicator id: control
property T.Control myControl property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property T.Popup myPopup
property bool hover: checkIndicatorMouseArea.containsMouse && checkIndicator.enabled property T.Control __parentControl
property bool pressed: checkIndicatorMouseArea.containsPress property T.Popup __parentPopup
property bool hover: mouseArea.containsMouse && control.enabled
property bool pressed: mouseArea.containsPress
property bool checked: false property bool checked: false
property bool hasActiveDrag: myControl.hasActiveDrag ?? false property bool hasActiveDrag: control.__parentControl.hasActiveDrag ?? false
property bool hasActiveHoverDrag: myControl.hasActiveHoverDrag ?? false property bool hasActiveHoverDrag: control.__parentControl.hasActiveHoverDrag ?? false
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.width: 0 border.width: 0
Connections { Connections {
target: myPopup target: control.__parentPopup
function onClosed() { checkIndicator.checked = false } function onClosed() { control.checked = false }
function onOpened() { checkIndicator.checked = true } function onOpened() { control.checked = true }
} }
MouseArea { MouseArea {
id: checkIndicatorMouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: {
if (myControl.activeFocus) if (control.__parentControl.activeFocus)
myControl.focus = false control.__parentControl.focus = false
if (myPopup.opened) { if (control.__parentPopup.opened) {
myPopup.close() control.__parentPopup.close()
} else { } else {
myPopup.open() control.__parentPopup.open()
myPopup.forceActiveFocus() control.__parentPopup.forceActiveFocus()
} }
} }
} }
T.Label { T.Label {
id: checkIndicatorIcon id: icon
anchors.fill: parent anchors.fill: parent
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
text: StudioTheme.Constants.upDownSquare2 text: StudioTheme.Constants.upDownSquare2
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.pixelSize: StudioTheme.Values.sliderControlSizeMulti font.pixelSize: control.style.baseIconFontSize
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
} }
states: [ states: [
State { State {
name: "default" name: "default"
when: myControl.enabled && checkIndicator.enabled && !myControl.edit when: control.__parentControl.enabled && control.enabled
&& !checkIndicator.hover && !myControl.hover && !myControl.drag && !control.__parentControl.edit && !control.hover
&& !checkIndicator.checked && !checkIndicator.hasActiveDrag && !control.__parentControl.hover && !control.__parentControl.drag
&& !control.checked && !control.hasActiveDrag
PropertyChanges { PropertyChanges {
target: checkIndicator target: control
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
}, },
State { State {
name: "dragHover" name: "dragHover"
when: myControl.enabled && checkIndicator.hasActiveHoverDrag when: control.__parentControl.enabled && control.hasActiveHoverDrag
PropertyChanges { PropertyChanges {
target: checkIndicator target: control
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: myControl.enabled && checkIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& !checkIndicator.hover && myControl.hover && !myControl.edit && !control.__parentControl.drag && !control.hover
&& !checkIndicator.checked && control.__parentControl.hover && !control.__parentControl.edit
&& !control.checked
PropertyChanges { PropertyChanges {
target: checkIndicator target: control
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
} }
}, },
State { State {
name: "hover" name: "hover"
when: myControl.enabled && checkIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& checkIndicator.hover && myControl.hover && !checkIndicator.pressed && !control.__parentControl.drag && control.hover && control.__parentControl.hover
&& !checkIndicator.checked && !control.pressed && !control.checked
PropertyChanges { PropertyChanges {
target: checkIndicator target: control
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
} }
}, },
State { State {
name: "check" name: "check"
when: checkIndicator.checked when: control.checked
PropertyChanges { PropertyChanges {
target: checkIndicatorIcon target: icon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
PropertyChanges { PropertyChanges {
target: checkIndicator target: control
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "edit" name: "edit"
when: myControl.edit && !checkIndicator.checked when: control.__parentControl.edit && !control.checked
&& !(checkIndicator.hover && myControl.hover) && !(control.hover && control.__parentControl.hover)
PropertyChanges { PropertyChanges {
target: checkIndicatorIcon target: icon
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
} }
PropertyChanges { PropertyChanges {
target: checkIndicator target: control
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
}, },
State { State {
name: "press" name: "press"
when: myControl.enabled && checkIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& checkIndicator.pressed && !control.__parentControl.drag && control.pressed
PropertyChanges { PropertyChanges {
target: checkIndicatorIcon target: icon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
PropertyChanges { PropertyChanges {
target: checkIndicator target: control
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "drag" name: "drag"
when: (myControl.drag !== undefined && myControl.drag) && !checkIndicator.checked when: (control.__parentControl.drag !== undefined && control.__parentControl.drag)
&& !(checkIndicator.hover && myControl.hover) && !control.checked && !(control.hover && control.__parentControl.hover)
PropertyChanges { PropertyChanges {
target: checkIndicator target: control
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.idle
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myControl.enabled when: !control.__parentControl.enabled
PropertyChanges { PropertyChanges {
target: checkIndicator target: control
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
} }
PropertyChanges { PropertyChanges {
target: checkIndicatorIcon target: icon
color: StudioTheme.Values.themeTextColorDisabled color: control.style.icon.disabled
} }
} }
] ]

203
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Window 2.15 import QtQuick.Window
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.ComboBox { T.ComboBox {
id: myComboBox id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property alias actionIndicator: actionIndicator property alias actionIndicator: actionIndicator
property alias labelColor: comboBoxInput.color property alias labelColor: comboBoxInput.color
// This property is used to indicate the global hover state // This property is used to indicate the global hover state
property bool hover: (comboBoxInput.hover || actionIndicator.hover || popupIndicator.hover) property bool hover: (comboBoxInput.hover || actionIndicator.hover || popupIndicator.hover)
&& myComboBox.enabled && control.enabled
property bool edit: myComboBox.activeFocus && myComboBox.editable property bool edit: control.activeFocus && control.editable
property bool open: comboBoxPopup.opened property bool open: comboBoxPopup.opened
property bool hasActiveDrag: false // an item that can be dropped on the combobox is being dragged 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 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 bool dirty: false // user modification flag
property alias actionIndicatorVisible: actionIndicator.visible property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth property real __actionIndicatorWidth: control.style.actionIndicatorSize.width
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight property real __actionIndicatorHeight: control.style.actionIndicatorSize.height
property alias textInput: comboBoxInput property alias textInput: comboBoxInput
@@ -32,31 +34,32 @@ T.ComboBox {
enum ActivatedReason { EditingFinished, Other } enum ActivatedReason { EditingFinished, Other }
width: StudioTheme.Values.defaultControlWidth width: control.style.controlSize.width
height: StudioTheme.Values.defaultControlHeight height: control.style.controlSize.height
leftPadding: actionIndicator.width leftPadding: actionIndicator.width
rightPadding: popupIndicator.width + StudioTheme.Values.border rightPadding: popupIndicator.width + control.style.borderWidth
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseFontSize
wheelEnabled: false wheelEnabled: false
onFocusChanged: { onFocusChanged: {
if (!myComboBox.focus) if (!control.focus)
comboBoxPopup.close() comboBoxPopup.close()
} }
onActiveFocusChanged: { onActiveFocusChanged: {
if (myComboBox.activeFocus) if (control.activeFocus)
comboBoxInput.preFocusText = myComboBox.editText comboBoxInput.preFocusText = control.editText
} }
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: myComboBox style: control.style
__parentControl: control
x: 0 x: 0
y: 0 y: 0
width: actionIndicator.visible ? myComboBox.__actionIndicatorWidth : 0 width: actionIndicator.visible ? control.__actionIndicatorWidth : 0
height: actionIndicator.visible ? myComboBox.__actionIndicatorHeight : 0 height: actionIndicator.visible ? control.__actionIndicatorHeight : 0
} }
contentItem: ComboBoxInput { contentItem: ComboBoxInput {
@@ -64,98 +67,102 @@ T.ComboBox {
property string preFocusText: "" property string preFocusText: ""
myControl: myComboBox style: control.style
text: myComboBox.editText __parentControl: control
text: control.editText
onEditingFinished: { onEditingFinished: {
comboBoxInput.deselect() comboBoxInput.deselect()
comboBoxInput.focus = false comboBoxInput.focus = false
myComboBox.focus = false control.focus = false
// Only trigger the signal, if the value was modified // Only trigger the signal, if the value was modified
if (myComboBox.dirty) { if (control.dirty) {
myTimer.stop() timer.stop()
myComboBox.dirty = false control.dirty = false
myComboBox.accepted() control.accepted()
} }
} }
onTextEdited: myComboBox.dirty = true onTextEdited: control.dirty = true
} }
indicator: CheckIndicator { indicator: CheckIndicator {
id: popupIndicator id: popupIndicator
myControl: myComboBox style: control.style
myPopup: myComboBox.popup __parentControl: control
__parentPopup: control.popup
x: comboBoxInput.x + comboBoxInput.width x: comboBoxInput.x + comboBoxInput.width
y: StudioTheme.Values.border y: control.style.borderWidth
width: StudioTheme.Values.checkIndicatorWidth - StudioTheme.Values.border width: control.style.baseIconSize.width - control.style.borderWidth
height: StudioTheme.Values.checkIndicatorHeight - StudioTheme.Values.border * 2 height: control.style.baseIconSize.height - control.style.borderWidth * 2
} }
background: Rectangle { background: Rectangle {
id: comboBoxBackground id: comboBoxBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
x: actionIndicator.width x: actionIndicator.width
width: myComboBox.width - actionIndicator.width width: control.width - actionIndicator.width
height: myComboBox.height height: control.height
} }
Timer { Timer {
id: myTimer id: timer
property int activatedIndex property int activatedIndex
repeat: false repeat: false
running: false running: false
interval: 100 interval: 100
onTriggered: myComboBox.compressedActivated(myTimer.activatedIndex, onTriggered: control.compressedActivated(timer.activatedIndex,
ComboBox.ActivatedReason.Other) ComboBox.ActivatedReason.Other)
} }
onActivated: function(index) { onActivated: function(index) {
myTimer.activatedIndex = index timer.activatedIndex = index
myTimer.restart() timer.restart()
} }
delegate: ItemDelegate { delegate: ItemDelegate {
id: myItemDelegate id: itemDelegate
width: comboBoxPopup.width - comboBoxPopup.leftPadding - comboBoxPopup.rightPadding width: comboBoxPopup.width - comboBoxPopup.leftPadding - comboBoxPopup.rightPadding
- (comboBoxPopupScrollBar.visible ? comboBoxPopupScrollBar.contentItem.implicitWidth - (comboBoxPopupScrollBar.visible ? comboBoxPopupScrollBar.contentItem.implicitWidth
+ 2 : 0) // TODO Magic number + 2 : 0) // TODO Magic number
height: StudioTheme.Values.height - 2 * StudioTheme.Values.border height: control.style.controlSize.height - 2 * control.style.borderWidth
padding: 0 padding: 0
enabled: model.enabled === undefined ? true : model.enabled enabled: model.enabled === undefined ? true : model.enabled
contentItem: Text { contentItem: Text {
leftPadding: itemDelegateIconArea.width leftPadding: itemDelegateIconArea.width
text: myComboBox.textRole ? (Array.isArray(myComboBox.model) ? modelData[myComboBox.textRole] text: control.textRole ? (Array.isArray(control.model)
: model[myComboBox.textRole]) : modelData ? modelData[control.textRole]
: model[control.textRole])
: modelData
color: { color: {
if (!myItemDelegate.enabled) if (!itemDelegate.enabled)
return StudioTheme.Values.themeTextColorDisabled return control.style.text.disabled
return myItemDelegate.highlighted ? StudioTheme.Values.themeTextSelectedTextColor return itemDelegate.highlighted ? control.style.text.selectedText
: StudioTheme.Values.themeTextColor : control.style.text.idle
} }
font: myComboBox.font font: control.font
elide: Text.ElideRight elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
Item { Item {
id: itemDelegateIconArea id: itemDelegateIconArea
width: myItemDelegate.height width: itemDelegate.height
height: myItemDelegate.height height: itemDelegate.height
T.Label { T.Label {
id: itemDelegateIcon id: itemDelegateIcon
text: StudioTheme.Constants.tickIcon text: StudioTheme.Constants.tickIcon
color: myItemDelegate.highlighted ? StudioTheme.Values.themeTextSelectedTextColor color: itemDelegate.highlighted ? control.style.text.selectedText
: StudioTheme.Values.themeTextColor : control.style.text.idle
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti font.pixelSize: control.style.smallIconFontSize
visible: myComboBox.currentIndex === index ? true : false visible: control.currentIndex === index ? true : false
anchors.fill: parent anchors.fill: parent
renderType: Text.NativeRendering renderType: Text.NativeRendering
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@@ -163,31 +170,31 @@ T.ComboBox {
} }
} }
highlighted: myComboBox.highlightedIndex === index highlighted: control.highlightedIndex === index
background: Rectangle { background: Rectangle {
id: itemDelegateBackground id: itemDelegateBackground
x: 0 x: 0
y: 0 y: 0
width: myItemDelegate.width width: itemDelegate.width
height: myItemDelegate.height height: itemDelegate.height
color: myItemDelegate.highlighted ? StudioTheme.Values.themeInteraction : "transparent" color: itemDelegate.highlighted ? control.style.interaction : "transparent"
} }
} }
popup: T.Popup { popup: T.Popup {
id: comboBoxPopup id: comboBoxPopup
x: actionIndicator.width + StudioTheme.Values.border x: actionIndicator.width + control.style.borderWidth
y: myComboBox.height y: control.height
width: myComboBox.width - actionIndicator.width - StudioTheme.Values.border * 2 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, // 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 // but it has the problem that it sometimes extend over the border of the actual window
// and is then cut off. // and is then cut off.
height: Math.min(contentItem.implicitHeight + comboBoxPopup.topPadding height: Math.min(contentItem.implicitHeight + comboBoxPopup.topPadding
+ comboBoxPopup.bottomPadding, + comboBoxPopup.bottomPadding,
myComboBox.Window.height - topMargin - bottomMargin, control.Window.height - topMargin - bottomMargin,
StudioTheme.Values.maxComboBoxPopupHeight) control.style.maxComboBoxPopupHeight)
padding: StudioTheme.Values.border padding: control.style.borderWidth
margins: 0 // If not defined margin will be -1 margins: 0 // If not defined margin will be -1
closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent
| T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside | T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside
@@ -197,8 +204,8 @@ T.ComboBox {
id: listView id: listView
clip: true clip: true
implicitHeight: listView.contentHeight implicitHeight: listView.contentHeight
model: myComboBox.popup.visible ? myComboBox.delegateModel : null model: control.popup.visible ? control.delegateModel : null
currentIndex: myComboBox.highlightedIndex currentIndex: control.highlightedIndex
boundsBehavior: Flickable.StopAtBounds boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar { ScrollBar.vertical: ScrollBar {
id: comboBoxPopupScrollBar id: comboBoxPopupScrollBar
@@ -207,7 +214,7 @@ T.ComboBox {
} }
background: Rectangle { background: Rectangle {
color: StudioTheme.Values.themePopupBackground color: control.style.popup.background
border.width: 0 border.width: 0
} }
@@ -218,10 +225,10 @@ T.ComboBox {
states: [ states: [
State { State {
name: "default" name: "default"
when: myComboBox.enabled && !myComboBox.hover && !myComboBox.edit && !myComboBox.open when: control.enabled && !control.hover && !control.edit && !control.open
&& !myComboBox.activeFocus && !myComboBox.hasActiveDrag && !control.activeFocus && !control.hasActiveDrag
PropertyChanges { PropertyChanges {
target: myComboBox target: control
wheelEnabled: false wheelEnabled: false
} }
PropertyChanges { PropertyChanges {
@@ -230,34 +237,34 @@ T.ComboBox {
} }
PropertyChanges { PropertyChanges {
target: comboBoxBackground target: comboBoxBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
}, },
State { State {
name: "acceptsDrag" name: "acceptsDrag"
when: myComboBox.enabled && myComboBox.hasActiveDrag && !myComboBox.hasActiveHoverDrag when: control.enabled && control.hasActiveDrag && !control.hasActiveHoverDrag
PropertyChanges { PropertyChanges {
target: comboBoxBackground target: comboBoxBackground
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
}, },
State { State {
name: "dragHover" name: "dragHover"
when: myComboBox.enabled && myComboBox.hasActiveHoverDrag when: control.enabled && control.hasActiveHoverDrag
PropertyChanges { PropertyChanges {
target: comboBoxBackground target: comboBoxBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
}, },
// This state is intended for ComboBoxes which aren't editable, but have focus e.g. via // 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. // tab focus. It is therefor possible to use the mouse wheel to scroll through the items.
State { State {
name: "focus" name: "focus"
when: myComboBox.enabled && myComboBox.activeFocus && !myComboBox.editable when: control.enabled && control.activeFocus && !control.editable
&& !myComboBox.open && !control.open
PropertyChanges { PropertyChanges {
target: myComboBox target: control
wheelEnabled: true wheelEnabled: true
} }
PropertyChanges { PropertyChanges {
@@ -267,9 +274,9 @@ T.ComboBox {
}, },
State { State {
name: "edit" name: "edit"
when: myComboBox.enabled && myComboBox.edit && !myComboBox.open when: control.enabled && control.edit && !control.open
PropertyChanges { PropertyChanges {
target: myComboBox target: control
wheelEnabled: true wheelEnabled: true
} }
PropertyChanges { PropertyChanges {
@@ -279,18 +286,18 @@ T.ComboBox {
} }
PropertyChanges { PropertyChanges {
target: comboBoxBackground target: comboBoxBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
StateChangeScript { StateChangeScript {
script: comboBoxPopup.close() script: comboBoxPopup.close()
} }
}, },
State { State {
name: "popup" name: "popup"
when: myComboBox.enabled && myComboBox.open when: control.enabled && control.open
PropertyChanges { PropertyChanges {
target: myComboBox target: control
wheelEnabled: true wheelEnabled: true
} }
PropertyChanges { PropertyChanges {
@@ -300,26 +307,26 @@ T.ComboBox {
} }
PropertyChanges { PropertyChanges {
target: comboBoxBackground target: comboBoxBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myComboBox.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: comboBoxBackground target: comboBoxBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
} }
] ]
Keys.onPressed: function(event) { Keys.onPressed: function(event) {
if (event.key === Qt.Key_Escape) { if (event.key === Qt.Key_Escape) {
myComboBox.editText = comboBoxInput.preFocusText control.editText = comboBoxInput.preFocusText
myComboBox.dirty = true control.dirty = true
myComboBox.focus = false control.focus = false
} }
} }
} }

116
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
TextInput { TextInput {
id: textInput id: control
property T.Control myControl property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property bool edit: textInput.activeFocus property T.ComboBox __parentControl
property bool hover: mouseArea.containsMouse && textInput.enabled
property bool edit: control.activeFocus
property bool hover: mouseArea.containsMouse && control.enabled
z: 2 z: 2
font: myControl.font font: control.__parentControl.font
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
selectionColor: StudioTheme.Values.themeTextSelectionColor selectionColor: control.style.text.selection
selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor selectedTextColor: control.style.text.selectedText
horizontalAlignment: Qt.AlignLeft horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
leftPadding: StudioTheme.Values.inputHorizontalPadding leftPadding: control.style.inputHorizontalPadding
rightPadding: StudioTheme.Values.inputHorizontalPadding rightPadding: control.style.inputHorizontalPadding
readOnly: !myControl.editable readOnly: !control.__parentControl.editable
validator: myControl.validator validator: control.__parentControl.validator
inputMethodHints: myControl.inputMethodHints inputMethodHints: control.__parentControl.inputMethodHints
selectByMouse: false selectByMouse: false
activeFocusOnPress: false activeFocusOnPress: false
clip: true clip: true
Rectangle { Rectangle {
id: textInputBackground id: background
x: StudioTheme.Values.border x: control.style.borderWidth
y: StudioTheme.Values.border y: control.style.borderWidth
z: -1 z: -1
width: textInput.width width: control.width
height: StudioTheme.Values.height - StudioTheme.Values.border * 2 height: control.style.controlSize.height - control.style.borderWidth * 2
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.width: 0 border.width: 0
} }
@@ -51,16 +53,16 @@ TextInput {
acceptedButtons: Qt.LeftButton acceptedButtons: Qt.LeftButton
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onPressed: function(mouse) { onPressed: function(mouse) {
if (!textInput.myControl.editable) { if (!control.__parentControl.editable) {
if (myControl.popup.opened) { if (control.__parentControl.popup.opened) {
myControl.popup.close() control.__parentControl.popup.close()
myControl.focus = false control.__parentControl.focus = false
} else { } else {
myControl.popup.open() control.__parentControl.popup.open()
//myControl.forceActiveFocus() //textInput.__control.forceActiveFocus()
} }
} else { } else {
textInput.forceActiveFocus() control.forceActiveFocus()
} }
mouse.accepted = false mouse.accepted = false
@@ -70,11 +72,12 @@ TextInput {
states: [ states: [
State { State {
name: "default" name: "default"
when: myControl.enabled && !textInput.edit && !textInput.hover && !myControl.hover when: control.__parentControl.enabled && !control.edit && !control.hover
&& !myControl.open && !myControl.hasActiveDrag && !control.__parentControl.hover && !control.__parentControl.open
&& !control.__parentControl.hasActiveDrag
PropertyChanges { PropertyChanges {
target: textInputBackground target: background
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
PropertyChanges { PropertyChanges {
target: mouseArea target: mouseArea
@@ -84,44 +87,45 @@ TextInput {
}, },
State { State {
name: "dragHover" name: "dragHover"
when: myControl.enabled && myControl.hasActiveHoverDrag when: control.__parentControl.enabled && control.__parentControl.hasActiveHoverDrag
PropertyChanges { PropertyChanges {
target: textInputBackground target: background
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: myControl.hover && !textInput.hover && !textInput.edit && !myControl.open when: control.__parentControl.hover && !control.hover && !control.edit
&& !control.__parentControl.open
PropertyChanges { PropertyChanges {
target: textInputBackground target: background
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
} }
}, },
State { State {
name: "hover" name: "hover"
when: textInput.hover && myControl.hover && !textInput.edit when: control.hover && control.__parentControl.hover && !control.edit
PropertyChanges { PropertyChanges {
target: textInputBackground target: background
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
} }
}, },
// This state is intended for ComboBoxes which aren't editable, but have focus e.g. via // 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. // tab focus. It is therefor possible to use the mouse wheel to scroll through the items.
State { State {
name: "focus" name: "focus"
when: textInput.edit && !myControl.editable when: control.edit && !control.__parentControl.editable
PropertyChanges { PropertyChanges {
target: textInputBackground target: background
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
}, },
State { State {
name: "edit" name: "edit"
when: textInput.edit && myControl.editable when: control.edit && control.__parentControl.editable
PropertyChanges { PropertyChanges {
target: textInputBackground target: background
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
PropertyChanges { PropertyChanges {
target: mouseArea target: mouseArea
@@ -131,22 +135,22 @@ TextInput {
}, },
State { State {
name: "popup" name: "popup"
when: myControl.open when: control.__parentControl.open
PropertyChanges { PropertyChanges {
target: textInputBackground target: background
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myControl.enabled when: !control.__parentControl.enabled
PropertyChanges { PropertyChanges {
target: textInputBackground target: background
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
} }
PropertyChanges { PropertyChanges {
target: textInput target: control
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
} }
} }
] ]

74
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
Menu { Menu {
id: contextMenu id: control
property Item myTextEdit required property Item __parentControl // TextInput or TextEdit
MenuItem { MenuItem {
text: "Undo" style: control.style
enabled: myTextEdit.canUndo text: qsTr("Undo")
onTriggered: myTextEdit.undo() enabled: control.__parentControl.canUndo
onTriggered: control.__parentControl.undo()
/* shortcut: StandardKey.Undo Shortcuts in QQC2 seem to override global shortcuts */ /* shortcut: StandardKey.Undo Shortcuts in QQC2 seem to override global shortcuts */
} }
MenuItem { MenuItem {
text: "Redo" style: control.style
enabled: myTextEdit.canRedo text: qsTr("Redo")
onTriggered: myTextEdit.redo() enabled: control.__parentControl.canRedo
onTriggered: control.__parentControl.redo()
/* shortcut: StandardKey.Redo Shortcuts in QQC2 seem to override global shortcuts */ /* shortcut: StandardKey.Redo Shortcuts in QQC2 seem to override global shortcuts */
} }
MenuSeparator { MenuSeparator { style: control.style }
}
MenuItem { MenuItem {
text: "Copy" style: control.style
enabled: myTextEdit.selectedText !== "" text: qsTr("Copy")
onTriggered: myTextEdit.copy() enabled: control.__parentControl.selectedText !== ""
onTriggered: control.__parentControl.copy()
/* shortcut: StandardKey.Copy Shortcuts in QQC2 seem to override global shortcuts */ /* shortcut: StandardKey.Copy Shortcuts in QQC2 seem to override global shortcuts */
} }
MenuItem { MenuItem {
text: "Cut" style: control.style
enabled: myTextEdit.selectedText !== "" && !myTextEdit.readOnly text: qsTr("Cut")
onTriggered: myTextEdit.cut() enabled: control.__parentControl.selectedText !== "" && !control.__parentControl.readOnly
onTriggered: control.__parentControl.cut()
/* shortcut: StandardKey.Cut Shortcuts in QQC2 seem to override global shortcuts */ /* shortcut: StandardKey.Cut Shortcuts in QQC2 seem to override global shortcuts */
} }
MenuItem { MenuItem {
text: "Paste" style: control.style
enabled: myTextEdit.canPaste text: qsTr("Paste")
onTriggered: myTextEdit.paste() enabled: control.__parentControl.canPaste
onTriggered: control.__parentControl.paste()
/* shortcut: StandardKey.Paste Shortcuts in QQC2 seem to override global shortcuts */ /* shortcut: StandardKey.Paste Shortcuts in QQC2 seem to override global shortcuts */
} }
MenuItem { MenuItem {
text: "Delete" style: control.style
enabled: myTextEdit.selectedText !== "" text: qsTr("Delete")
onTriggered: myTextEdit.remove(myTextEdit.selectionStart, enabled: control.__parentControl.selectedText !== ""
myTextEdit.selectionEnd) onTriggered: control.__parentControl.remove(control.__parentControl.selectionStart,
control.__parentControl.selectionEnd)
/* shortcut: StandardKey.Delete Shortcuts in QQC2 seem to override global shortcuts */ /* shortcut: StandardKey.Delete Shortcuts in QQC2 seem to override global shortcuts */
} }
MenuItem { MenuItem {
text: "Clear" style: control.style
enabled: myTextEdit.text !== "" text: qsTr("Clear")
onTriggered: myTextEdit.clear() enabled: control.__parentControl.text !== ""
onTriggered: control.__parentControl.clear()
/* shortcut: StandardKey.DeleteCompleteLine Shortcuts in QQC2 seem to override global shortcuts */ /* shortcut: StandardKey.DeleteCompleteLine Shortcuts in QQC2 seem to override global shortcuts */
} }
MenuSeparator { MenuSeparator { style: control.style }
}
MenuItem { MenuItem {
text: "Select All" style: control.style
enabled: myTextEdit.text !== "" text: qsTr("Select All")
&& myTextEdit.selectedText !== myTextEdit.text enabled: control.__parentControl.text !== ""
onTriggered: myTextEdit.selectAll() && control.__parentControl.selectedText !== control.__parentControl.text
onTriggered: control.__parentControl.selectAll()
/* shortcut: StandardKey.SelectAll Shortcuts in QQC2 seem to override global shortcuts */ /* shortcut: StandardKey.SelectAll Shortcuts in QQC2 seem to override global shortcuts */
} }
} }

59
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Dialog.qml
View File

@@ -1,34 +1,14 @@
/**************************************************************************** // Copyright (C) 2023 The Qt Company Ltd.
** // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
** 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.
**
****************************************************************************/
import QtQuick import QtQuick
import QtQuick.Templates as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.Dialog { T.Dialog {
id: root id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding, contentWidth + leftPadding + rightPadding,
@@ -39,36 +19,37 @@ T.Dialog {
+ (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0) + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+ (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0)) + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
padding: StudioTheme.Values.dialogPadding padding: control.style.dialogPadding
background: Rectangle { background: Rectangle {
color: StudioTheme.Values.themeDialogBackground color: control.style.dialog.background
border.color: StudioTheme.Values.themeDialogOutline border.color: control.style.dialog.border
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
} }
header: T.Label { header: T.Label {
text: root.title text: control.title
visible: root.title visible: control.title
elide: T.Label.ElideRight elide: T.Label.ElideRight
font.bold: true font.bold: true
padding: StudioTheme.Values.dialogPadding padding: control.padding
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
background: Rectangle { background: Rectangle {
x: StudioTheme.Values.border x: control.style.borderWidth
y: StudioTheme.Values.border y: control.style.borderWidth
width: parent.width - (2 * StudioTheme.Values.border) width: parent.width - (2 * control.style.borderWidth)
height: parent.height - (2 * StudioTheme.Values.border) height: parent.height - (2 * control.style.borderWidth)
color: StudioTheme.Values.themeDialogBackground color: control.style.dialog.background
} }
} }
footer: DialogButtonBox { footer: DialogButtonBox {
style: control.style
visible: count > 0 visible: count > 0
} }
T.Overlay.modal: Rectangle { T.Overlay.modal: Rectangle {
color: Qt.alpha(StudioTheme.Values.themeDialogBackground, 0.5) color: Qt.alpha(control.style.dialog.overlay, 0.5)
} }
} }

98
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/DialogButton.qml
View File

@@ -1,58 +1,36 @@
/**************************************************************************** // Copyright (C) 2023 The Qt Company Ltd.
** // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
** 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.
**
****************************************************************************/
import QtQuick import QtQuick
import QtQuick.Templates as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.Button { T.Button {
id: root id: control
implicitWidth: Math.max( property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
background ? background.implicitWidth : 0,
textItem.implicitWidth + leftPadding + rightPadding) implicitWidth: Math.max(buttonBackground ? buttonBackground.implicitWidth : 0,
implicitHeight: Math.max( textItem.implicitWidth + leftPadding + rightPadding)
background ? background.implicitHeight : 0, implicitHeight: Math.max(buttonBackground ? buttonBackground.implicitHeight : 0,
textItem.implicitHeight + topPadding + bottomPadding) textItem.implicitHeight + topPadding + bottomPadding)
leftPadding: StudioTheme.Values.dialogButtonPadding leftPadding: control.style.dialogPadding
rightPadding: StudioTheme.Values.dialogButtonPadding rightPadding: control.style.dialogPadding
background: Rectangle { background: Rectangle {
id: background id: buttonBackground
implicitWidth: 70 implicitWidth: 70
implicitHeight: 20 implicitHeight: 20
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
anchors.fill: parent anchors.fill: parent
} }
contentItem: Text { contentItem: Text {
id: textItem id: textItem
text: root.text text: control.text
font.pixelSize: StudioTheme.Values.baseFontSize font.pixelSize: control.style.baseFontSize
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
@@ -60,58 +38,58 @@ T.Button {
states: [ states: [
State { State {
name: "default" name: "default"
when: root.enabled && !root.down && !root.hovered && !root.checked when: control.enabled && !control.down && !control.hovered && !control.checked
PropertyChanges { PropertyChanges {
target: background target: buttonBackground
color: root.highlighted ? StudioTheme.Values.themeInteraction color: control.highlighted ? control.style.interaction
: StudioTheme.Values.themeControlBackground : control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: textItem target: textItem
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
} }
}, },
State { State {
name: "hover" name: "hover"
when: root.enabled && root.hovered && !root.checked && !root.down when: control.enabled && control.hovered && !control.checked && !control.down
PropertyChanges { PropertyChanges {
target: background target: buttonBackground
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: textItem target: textItem
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
} }
}, },
State { State {
name: "press" name: "press"
when: root.enabled && (root.checked || root.down) when: control.enabled && (control.checked || control.down)
PropertyChanges { PropertyChanges {
target: background target: buttonBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
PropertyChanges { PropertyChanges {
target: textItem target: textItem
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
} }
}, },
State { State {
name: "disable" name: "disable"
when: !root.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: background target: buttonBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
PropertyChanges { PropertyChanges {
target: textItem target: textItem
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
} }
} }
] ]

45
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/DialogButtonBox.qml
View File

@@ -1,27 +1,5 @@
/**************************************************************************** // Copyright (C) 2023 The Qt Company Ltd.
** // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
** 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.
**
****************************************************************************/
import QtQuick import QtQuick
import QtQuick.Templates as T import QtQuick.Templates as T
@@ -30,20 +8,23 @@ import StudioTheme 1.0 as StudioTheme
T.DialogButtonBox { T.DialogButtonBox {
id: control id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
(control.count === 1 ? implicitContentWidth * 2 : implicitContentWidth) + leftPadding + rightPadding) (control.count === 1 ? implicitContentWidth * 2 : implicitContentWidth) + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding) implicitContentHeight + topPadding + bottomPadding)
contentWidth: contentItem.contentWidth contentWidth: contentItem.contentWidth
spacing: StudioTheme.Values.dialogButtonSpacing spacing: control.style.dialogButtonSpacing
padding: StudioTheme.Values.dialogPadding padding: control.style.dialogPadding
alignment: Qt.AlignRight | Qt.AlignBottom alignment: Qt.AlignRight | Qt.AlignBottom
delegate: DialogButton { delegate: DialogButton {
style: control.style
width: control.count === 1 ? control.availableWidth / 2 : undefined width: control.count === 1 ? control.availableWidth / 2 : undefined
implicitHeight: StudioTheme.Values.height implicitHeight: control.style.controlSize.height
highlighted: DialogButtonBox.buttonRole === DialogButtonBox.AcceptRole highlighted: DialogButtonBox.buttonRole === DialogButtonBox.AcceptRole
|| DialogButtonBox.buttonRole === DialogButtonBox.ApplyRole || DialogButtonBox.buttonRole === DialogButtonBox.ApplyRole
} }
@@ -59,10 +40,10 @@ T.DialogButtonBox {
background: Rectangle { background: Rectangle {
implicitHeight: 30 implicitHeight: 30
x: StudioTheme.Values.border x: control.style.borderWidth
y: StudioTheme.Values.border y: control.style.borderWidth
width: parent.width - (2 * StudioTheme.Values.border) width: parent.width - (2 * control.style.borderWidth)
height: parent.height - (2 * StudioTheme.Values.border) height: parent.height - (2 * control.style.borderWidthr)
color: StudioTheme.Values.themeDialogBackground color: control.style.dialog.background
} }
} }

343
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/FilterComboBox.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0
import QtQuick import QtQuick
import QtQuick.Controls
import QtQuick.Templates as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Item { Item {
id: root id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
enum Interaction { None, TextEdit, Key } enum Interaction { None, TextEdit, Key }
@@ -23,7 +26,7 @@ Item {
// This is the actual filter that is applied on the model // This is the actual filter that is applied on the model
property string filter: "" property string filter: ""
property bool filterActive: root.filter !== "" property bool filterActive: control.filter !== ""
// Accept arbitrary input or only items from the model // Accept arbitrary input or only items from the model
property bool allowUserInput: false property bool allowUserInput: false
@@ -40,13 +43,13 @@ Item {
// This property is used to indicate the global hover state // This property is used to indicate the global hover state
property bool hover: (actionIndicator.hover || textInput.hover || checkIndicator.hover) property bool hover: (actionIndicator.hover || textInput.hover || checkIndicator.hover)
&& root.enabled && control.enabled
property alias edit: textInput.edit property alias edit: textInput.edit
property alias open: popup.visible property alias open: popup.visible
property alias actionIndicatorVisible: actionIndicator.visible property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth property real __actionIndicatorWidth: control.style.actionIndicatorSize.width
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight property real __actionIndicatorHeight: control.style.actionIndicatorSize.height
property bool dirty: false // user modification flag 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 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 property bool hasActiveHoverDrag: false // an item that can be dropped her is being hovered on top
width: StudioTheme.Values.defaultControlWidth width: control.style.controlSize.width
height: StudioTheme.Values.defaultControlHeight height: control.style.controlSize.height
implicitHeight: StudioTheme.Values.defaultControlHeight implicitHeight: control.style.controlSize.width
function selectItem(itemsIndex) { function selectItem(itemsIndex) {
textInput.text = sortFilterModel.items.get(itemsIndex).model.name textInput.text = sortFilterModel.items.get(itemsIndex).model.name
root.currentIndex = itemsIndex control.currentIndex = itemsIndex
root.finishEditing() control.finishEditing()
root.activated(itemsIndex) control.activated(itemsIndex)
} }
function submitValue() { function submitValue() {
if (!root.allowUserInput) { if (!control.allowUserInput) {
// If input isn't according to any item in the model, don't finish editing // If input isn't according to any item in the model, don't finish editing
if (root.highlightedIndex === -1) if (control.highlightedIndex === -1)
return return
root.selectItem(root.highlightedIndex) control.selectItem(control.highlightedIndex)
} else { } else {
root.currentIndex = -1 control.currentIndex = -1
// Only trigger the signal, if the value was modified // Only trigger the signal, if the value was modified
if (root.dirty) { if (control.dirty) {
myTimer.stop() myTimer.stop()
root.dirty = false control.dirty = false
root.editText = root.editText.trim() control.editText = control.editText.trim()
} }
root.finishEditing() control.finishEditing()
root.accepted() control.accepted()
} }
} }
function finishEditing() { function finishEditing() {
root.editing = false control.editing = false
root.filter = "" control.filter = ""
root.autocompleteString = "" control.autocompleteString = ""
textInput.focus = false // Remove focus from text field textInput.focus = false // Remove focus from text field
popup.close() popup.close()
} }
@@ -111,16 +114,16 @@ Item {
if (!numItems) if (!numItems)
return return
if (root.highlightedIndex === -1) // Nothing is selected if (control.highlightedIndex === -1) // Nothing is selected
root.setHighlightedIndexVisible(0) control.setHighlightedIndexVisible(0)
else { else {
let currentVisibleIndex = sortFilterModel.items.get(root.highlightedIndex).visibleIndex let currentVisibleIndex = sortFilterModel.items.get(control.highlightedIndex).visibleIndex
++currentVisibleIndex ++currentVisibleIndex
if (currentVisibleIndex > numItems - 1) if (currentVisibleIndex > numItems - 1)
currentVisibleIndex = 0 currentVisibleIndex = 0
root.setHighlightedIndexVisible(currentVisibleIndex) control.setHighlightedIndexVisible(currentVisibleIndex)
} }
} }
@@ -129,32 +132,32 @@ Item {
if (!numItems) if (!numItems)
return return
if (root.highlightedIndex === -1) // Nothing is selected if (control.highlightedIndex === -1) // Nothing is selected
root.setHighlightedIndexVisible(numItems - 1) control.setHighlightedIndexVisible(numItems - 1)
else { else {
let currentVisibleIndex = sortFilterModel.items.get(root.highlightedIndex).visibleIndex let currentVisibleIndex = sortFilterModel.items.get(control.highlightedIndex).visibleIndex
--currentVisibleIndex --currentVisibleIndex
if (currentVisibleIndex < 0) if (currentVisibleIndex < 0)
currentVisibleIndex = numItems - 1 currentVisibleIndex = numItems - 1
root.setHighlightedIndexVisible(currentVisibleIndex) control.setHighlightedIndexVisible(currentVisibleIndex)
} }
} }
function updateHighlightedIndex() { function updateHighlightedIndex() {
// Check if current index is still part of the filtered list, if not set it to 0 // 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) { if (control.highlightedIndex !== -1 && !sortFilterModel.items.get(control.highlightedIndex).inVisible) {
root.setHighlightedIndexVisible(0) control.setHighlightedIndexVisible(0)
} else { } else {
// Needs to be set in order for ListView to keep its currenIndex up to date, so // 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 // scroll position gets updated according to the higlighted item
root.setHighlightedIndexItems(root.highlightedIndex) control.setHighlightedIndexItems(control.highlightedIndex)
} }
} }
function setHighlightedIndexItems(itemsIndex) { // items group index function setHighlightedIndexItems(itemsIndex) { // items group index
root.highlightedIndex = itemsIndex control.highlightedIndex = itemsIndex
if (itemsIndex === -1) if (itemsIndex === -1)
listView.currentIndex = -1 listView.currentIndex = -1
@@ -164,19 +167,19 @@ Item {
function setHighlightedIndexVisible(visibleIndex) { // visible group index function setHighlightedIndexVisible(visibleIndex) { // visible group index
if (visibleIndex === -1) if (visibleIndex === -1)
root.highlightedIndex = -1 control.highlightedIndex = -1
else else
root.highlightedIndex = sortFilterModel.visibleGroup.get(visibleIndex).itemsIndex control.highlightedIndex = sortFilterModel.visibleGroup.get(visibleIndex).itemsIndex
listView.currentIndex = visibleIndex listView.currentIndex = visibleIndex
} }
function updateAutocomplete() { function updateAutocomplete() {
if (root.highlightedIndex === -1) if (control.highlightedIndex === -1)
root.autocompleteString = "" control.autocompleteString = ""
else { else {
let suggestion = sortFilterModel.items.get(root.highlightedIndex).model.name let suggestion = sortFilterModel.items.get(control.highlightedIndex).model.name
root.autocompleteString = suggestion.substring(textInput.text.length) control.autocompleteString = suggestion.substring(textInput.text.length)
} }
} }
@@ -195,8 +198,8 @@ Item {
repeat: false repeat: false
running: false running: false
interval: 100 interval: 100
onTriggered: root.compressedActivated(myTimer.activatedIndex, onTriggered: control.compressedActivated(myTimer.activatedIndex,
ComboBox.ActivatedReason.Other) ComboBox.ActivatedReason.Other)
} }
onActivated: function(index) { onActivated: function(index) {
@@ -205,8 +208,8 @@ Item {
} }
onHighlightedIndexChanged: { onHighlightedIndexChanged: {
if (root.editing || (root.editText === "" && root.allowUserInput)) if (control.editing || (control.editText === "" && control.allowUserInput))
root.updateAutocomplete() control.updateAutocomplete()
} }
DelegateModel { DelegateModel {
@@ -221,14 +224,14 @@ Item {
width: popup.width - popup.leftPadding - popup.rightPadding width: popup.width - popup.leftPadding - popup.rightPadding
- (popupScrollBar.visible ? popupScrollBar.contentItem.implicitWidth + 2 - (popupScrollBar.visible ? popupScrollBar.contentItem.implicitWidth + 2
: 0) // TODO Magic number : 0) // TODO Magic number
height: StudioTheme.Values.height - 2 * StudioTheme.Values.border height: control.style.controlSize.height - 2 * control.style.borderWidth
padding: 0 padding: 0
contentItem: Text { contentItem: Text {
leftPadding: StudioTheme.Values.inputHorizontalPadding leftPadding: control.style.inputHorizontalPadding
text: name text: name
font.italic: true font.italic: true
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
elide: Text.ElideRight elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
@@ -247,7 +250,7 @@ Item {
id: sortFilterModel id: sortFilterModel
filterAcceptsItem: function(item) { filterAcceptsItem: function(item) {
return item.name.toLowerCase().startsWith(root.filter.toLowerCase()) return item.name.toLowerCase().startsWith(control.filter.toLowerCase())
} }
lessThan: function(left, right) { lessThan: function(left, right) {
@@ -263,17 +266,17 @@ Item {
width: popup.width - popup.leftPadding - popup.rightPadding width: popup.width - popup.leftPadding - popup.rightPadding
- (popupScrollBar.visible ? popupScrollBar.contentItem.implicitWidth + 2 - (popupScrollBar.visible ? popupScrollBar.contentItem.implicitWidth + 2
: 0) // TODO Magic number : 0) // TODO Magic number
height: StudioTheme.Values.height - 2 * StudioTheme.Values.border height: control.style.controlSize.height - 2 * control.style.borderWidth
padding: 0 padding: 0
hoverEnabled: true hoverEnabled: true
highlighted: root.highlightedIndex === delegateRoot.DelegateModel.itemsIndex highlighted: control.highlightedIndex === delegateRoot.DelegateModel.itemsIndex
onHoveredChanged: { onHoveredChanged: {
if (delegateRoot.hovered && !popupMouseArea.active) 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 { indicator: Item {
id: itemDelegateIconArea id: itemDelegateIconArea
@@ -283,12 +286,12 @@ Item {
T.Label { T.Label {
id: itemDelegateIcon id: itemDelegateIcon
text: StudioTheme.Constants.tickIcon text: StudioTheme.Constants.tickIcon
color: delegateRoot.highlighted ? StudioTheme.Values.themeTextSelectedTextColor color: delegateRoot.highlighted ? control.style.text.selectedText
: StudioTheme.Values.themeTextColor : control.style.text.idle
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti font.pixelSize: control.style.smallIconFontSize
visible: root.currentIndex === delegateRoot.DelegateModel.itemsIndex ? true visible: control.currentIndex === delegateRoot.DelegateModel.itemsIndex ? true
: false : false
anchors.fill: parent anchors.fill: parent
renderType: Text.NativeRendering renderType: Text.NativeRendering
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@@ -299,8 +302,8 @@ Item {
contentItem: Text { contentItem: Text {
leftPadding: itemDelegateIconArea.width leftPadding: itemDelegateIconArea.width
text: name text: name
color: delegateRoot.highlighted ? StudioTheme.Values.themeTextSelectedTextColor color: delegateRoot.highlighted ? control.style.text.selectedText
: StudioTheme.Values.themeTextColor : control.style.text.idle
font: textInput.font font: textInput.font
elide: Text.ElideRight elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@@ -311,20 +314,19 @@ Item {
y: 0 y: 0
width: delegateRoot.width width: delegateRoot.width
height: delegateRoot.height height: delegateRoot.height
color: delegateRoot.highlighted ? StudioTheme.Values.themeInteraction color: delegateRoot.highlighted ? control.style.interaction : "transparent"
: "transparent"
} }
} }
onUpdated: { onUpdated: {
if (!root.__isCompleted) if (!control.__isCompleted)
return return
if (sortFilterModel.count === 0) if (sortFilterModel.count === 0)
root.setHighlightedIndexVisible(-1) control.setHighlightedIndexVisible(-1)
else { else {
if (root.highlightedIndex === -1 && !root.allowUserInput) if (control.highlightedIndex === -1 && !control.allowUserInput)
root.setHighlightedIndexVisible(0) control.setHighlightedIndexVisible(0)
} }
} }
} }
@@ -332,11 +334,12 @@ Item {
Row { Row {
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: root style: control.style
__parentControl: control
x: 0 x: 0
y: 0 y: 0
width: actionIndicator.visible ? root.__actionIndicatorWidth : 0 width: actionIndicator.visible ? control.__actionIndicatorWidth : 0
height: actionIndicator.visible ? root.__actionIndicatorHeight : 0 height: actionIndicator.visible ? control.__actionIndicatorHeight : 0
} }
TextInput { TextInput {
@@ -349,16 +352,16 @@ Item {
x: 0 x: 0
y: 0 y: 0
z: 2 z: 2
width: root.width - actionIndicator.width width: control.width - actionIndicator.width
height: root.height height: control.height
leftPadding: StudioTheme.Values.inputHorizontalPadding leftPadding: control.style.inputHorizontalPadding
rightPadding: StudioTheme.Values.inputHorizontalPadding + checkIndicator.width rightPadding: control.style.inputHorizontalPadding + checkIndicator.width
+ StudioTheme.Values.border + control.style.borderWidth
horizontalAlignment: Qt.AlignLeft horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
selectionColor: StudioTheme.Values.themeTextSelectionColor selectionColor: control.style.text.selection
selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor selectedTextColor: control.style.text.selectedText
selectByMouse: true selectByMouse: true
clip: true clip: true
@@ -367,9 +370,9 @@ Item {
z: -1 z: -1
width: textInput.width width: textInput.width
height: textInput.height height: textInput.height
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
} }
MouseArea { MouseArea {
@@ -388,20 +391,20 @@ Item {
// Stop scrollable views from scrolling while ComboBox is in edit mode and the mouse // 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. // pointer is on top of it. We might add wheel selection in the future.
onWheel: function(wheel) { onWheel: function(wheel) {
wheel.accepted = root.edit wheel.accepted = control.edit
} }
} }
onEditingFinished: { onEditingFinished: {
if (root.escapePressed) { if (control.escapePressed) {
root.escapePressed = false control.escapePressed = false
root.editText = textInput.preFocusText control.editText = textInput.preFocusText
} else { } else {
if (root.currentInteraction === FilterComboBox.Interaction.TextEdit) { if (control.currentInteraction === FilterComboBox.Interaction.TextEdit) {
if (root.dirty) if (control.dirty)
root.submitValue() control.submitValue()
} else if (root.currentInteraction === FilterComboBox.Interaction.Key) { } else if (control.currentInteraction === FilterComboBox.Interaction.Key) {
root.selectItem(root.highlightedIndex) control.selectItem(control.highlightedIndex)
} }
} }
@@ -409,16 +412,16 @@ Item {
} }
onTextEdited: { onTextEdited: {
root.currentInteraction = FilterComboBox.Interaction.TextEdit control.currentInteraction = FilterComboBox.Interaction.TextEdit
root.editing = true control.editing = true
popupMouseArea.active = true popupMouseArea.active = true
root.dirty = true control.dirty = true
if (textInput.text !== "") if (textInput.text !== "")
root.filter = textInput.text control.filter = textInput.text
else { else {
root.filter = "" control.filter = ""
root.autocompleteString = "" control.autocompleteString = ""
} }
if (!popup.visible) if (!popup.visible)
@@ -426,12 +429,12 @@ Item {
sortFilterModel.update() sortFilterModel.update()
if (!root.allowUserInput) if (!control.allowUserInput)
root.updateHighlightedIndex() control.updateHighlightedIndex()
else else
root.setHighlightedIndexVisible(-1) control.setHighlightedIndexVisible(-1)
root.updateAutocomplete() control.updateAutocomplete()
} }
onActiveFocusChanged: { onActiveFocusChanged: {
@@ -445,12 +448,12 @@ Item {
states: [ states: [
State { State {
name: "default" name: "default"
when: root.enabled && !textInput.edit && !root.hover && !root.open when: control.enabled && !textInput.edit && !control.hover && !control.open
&& !root.hasActiveDrag && !control.hasActiveDrag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: textInputMouseArea target: textInputMouseArea
@@ -460,44 +463,44 @@ Item {
}, },
State { State {
name: "acceptsDrag" name: "acceptsDrag"
when: root.enabled && root.hasActiveDrag && !root.hasActiveHoverDrag when: control.enabled && control.hasActiveDrag && !control.hasActiveHoverDrag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
border.color: StudioTheme.Values.themeInteraction border.color: control.style.interaction
} }
}, },
State { State {
name: "dragHover" name: "dragHover"
when: root.enabled && root.hasActiveHoverDrag when: control.enabled && control.hasActiveHoverDrag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeInteraction border.color: control.style.interaction
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: root.hover && !textInput.hover && !textInput.edit && !root.open when: control.hover && !textInput.hover && !textInput.edit && !control.open
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
} }
}, },
State { State {
name: "hover" name: "hover"
when: textInput.hover && root.hover && !textInput.edit when: textInput.hover && control.hover && !textInput.edit
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
} }
}, },
State { State {
name: "edit" name: "edit"
when: root.edit when: control.edit
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
PropertyChanges { PropertyChanges {
target: textInputMouseArea target: textInputMouseArea
@@ -507,23 +510,23 @@ Item {
}, },
State { State {
name: "disable" name: "disable"
when: !root.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
PropertyChanges { PropertyChanges {
target: textInput target: textInput
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
} }
} }
] ]
Text { Text {
id: tmpSelectionName id: tmpSelectionName
visible: root.autocompleteString !== "" && root.open visible: control.autocompleteString !== "" && control.open
text: root.autocompleteString text: control.autocompleteString
x: textInput.leftPadding + textMetrics.advanceWidth x: textInput.leftPadding + textMetrics.advanceWidth
y: (textInput.height - Math.ceil(tmpSelectionTextMetrics.height)) / 2 y: (textInput.height - Math.ceil(tmpSelectionTextMetrics.height)) / 2
color: "gray" // TODO proper color value color: "gray" // TODO proper color value
@@ -542,7 +545,6 @@ Item {
} }
} }
Rectangle { Rectangle {
id: checkIndicator id: checkIndicator
@@ -550,11 +552,11 @@ Item {
property bool pressed: checkIndicatorMouseArea.containsPress property bool pressed: checkIndicatorMouseArea.containsPress
property bool checked: popup.visible property bool checked: popup.visible
x: textInput.width - checkIndicator.width - StudioTheme.Values.border x: textInput.width - checkIndicator.width - control.style.borderWidth
y: StudioTheme.Values.border y: control.style.borderWidth
width: StudioTheme.Values.height - StudioTheme.Values.border width: control.style.squareControlSize.width - control.style.borderWidth
height: textInput.height - (StudioTheme.Values.border * 2) height: textInput.height - (control.style.borderWidth * 2)
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.width: 0 border.width: 0
MouseArea { MouseArea {
@@ -577,51 +579,51 @@ Item {
T.Label { T.Label {
id: checkIndicatorIcon id: checkIndicatorIcon
anchors.fill: parent anchors.fill: parent
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
text: StudioTheme.Constants.upDownSquare2 text: StudioTheme.Constants.upDownSquare2
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.pixelSize: StudioTheme.Values.sliderControlSizeMulti font.pixelSize: control.style.baseIconFontSize
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
} }
states: [ states: [
State { State {
name: "default" name: "default"
when: root.enabled && checkIndicator.enabled && !root.edit when: control.enabled && checkIndicator.enabled && !control.edit
&& !checkIndicator.hover && !root.hover && !checkIndicator.hover && !control.hover
&& !checkIndicator.checked && !root.hasActiveHoverDrag && !checkIndicator.checked && !control.hasActiveHoverDrag
PropertyChanges { PropertyChanges {
target: checkIndicator target: checkIndicator
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
}, },
State { State {
name: "dragHover" name: "dragHover"
when: root.enabled && root.hasActiveHoverDrag when: control.enabled && control.hasActiveHoverDrag
PropertyChanges { PropertyChanges {
target: checkIndicator target: checkIndicator
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: root.enabled && checkIndicator.enabled when: control.enabled && checkIndicator.enabled
&& !checkIndicator.hover && root.hover && !root.edit && !checkIndicator.hover && control.hover && !control.edit
&& !checkIndicator.checked && !checkIndicator.checked
PropertyChanges { PropertyChanges {
target: checkIndicator target: checkIndicator
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
} }
}, },
State { State {
name: "hover" name: "hover"
when: root.enabled && checkIndicator.enabled when: control.enabled && checkIndicator.enabled
&& checkIndicator.hover && root.hover && !checkIndicator.pressed && checkIndicator.hover && control.hover && !checkIndicator.pressed
&& !checkIndicator.checked && !checkIndicator.checked
PropertyChanges { PropertyChanges {
target: checkIndicator target: checkIndicator
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
} }
}, },
State { State {
@@ -629,36 +631,36 @@ Item {
when: checkIndicator.checked when: checkIndicator.checked
PropertyChanges { PropertyChanges {
target: checkIndicatorIcon target: checkIndicatorIcon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
PropertyChanges { PropertyChanges {
target: checkIndicator target: checkIndicator
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "press" name: "press"
when: root.enabled && checkIndicator.enabled when: control.enabled && checkIndicator.enabled
&& checkIndicator.pressed && checkIndicator.pressed
PropertyChanges { PropertyChanges {
target: checkIndicatorIcon target: checkIndicatorIcon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
PropertyChanges { PropertyChanges {
target: checkIndicator target: checkIndicator
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !root.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: checkIndicator target: checkIndicator
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
} }
PropertyChanges { PropertyChanges {
target: checkIndicatorIcon target: checkIndicatorIcon
color: StudioTheme.Values.themeTextColorDisabled color: control.style.icon.disabled
} }
} }
] ]
@@ -668,13 +670,13 @@ Item {
T.Popup { T.Popup {
id: popup id: popup
x: textInput.x + StudioTheme.Values.border x: textInput.x + control.style.borderWidth
y: textInput.height 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, height: Math.min(popup.contentItem.implicitHeight + popup.topPadding + popup.bottomPadding,
root.Window.height - popup.topMargin - popup.bottomMargin, control.Window.height - popup.topMargin - popup.bottomMargin,
StudioTheme.Values.maxComboBoxPopupHeight) control.style.maxComboBoxPopupHeight)
padding: StudioTheme.Values.border padding: control.style.borderWidth
margins: 0 // If not defined margin will be -1 margins: 0 // If not defined margin will be -1
closePolicy: T.Popup.NoAutoClose closePolicy: T.Popup.NoAutoClose
@@ -700,20 +702,20 @@ Item {
} }
background: Rectangle { background: Rectangle {
color: StudioTheme.Values.themePopupBackground color: control.style.popup.background
border.width: 0 border.width: 0
} }
onOpened: { onOpened: {
// Reset the highlightedIndex of ListView as binding with condition didn't work // Reset the highlightedIndex of ListView as binding with condition didn't work
if (root.highlightedIndex !== -1) if (control.highlightedIndex !== -1)
root.setHighlightedIndexItems(root.highlightedIndex) control.setHighlightedIndexItems(control.highlightedIndex)
} }
onAboutToShow: { onAboutToShow: {
// Select first item in list // Select first item in list
if (root.highlightedIndex === -1 && sortFilterModel.count && !root.allowUserInput) if (control.highlightedIndex === -1 && sortFilterModel.count && !control.allowUserInput)
root.setHighlightedIndexVisible(0) control.setHighlightedIndexVisible(0)
} }
MouseArea { MouseArea {
@@ -734,8 +736,8 @@ Item {
if (!sortFilterModel.visibleGroup.count) if (!sortFilterModel.visibleGroup.count)
return return
root.currentInteraction = FilterComboBox.Interaction.Key control.currentInteraction = FilterComboBox.Interaction.Key
root.increaseVisibleIndex() control.increaseVisibleIndex()
popupMouseArea.active = true popupMouseArea.active = true
} }
@@ -744,22 +746,21 @@ Item {
if (!sortFilterModel.visibleGroup.count) if (!sortFilterModel.visibleGroup.count)
return return
root.currentInteraction = FilterComboBox.Interaction.Key control.currentInteraction = FilterComboBox.Interaction.Key
root.decreaseVisibleIndex() control.decreaseVisibleIndex()
popupMouseArea.active = true popupMouseArea.active = true
} }
Keys.onEscapePressed: { Keys.onEscapePressed: {
root.escapePressed = true control.escapePressed = true
root.finishEditing() control.finishEditing()
} }
Component.onCompleted: { Component.onCompleted: {
let index = root.find(root.editText) let index = control.find(control.editText)
root.currentIndex = index control.currentIndex = index
root.highlightedIndex = index // TODO might not be intended control.highlightedIndex = index // TODO might not be intended
control.__isCompleted = true
root.__isCompleted = true
} }
} }

50
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Indicator.qml
View File

@@ -1,41 +1,21 @@
/**************************************************************************** // Copyright (C) 2023 The Qt Company Ltd.
** // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0
** 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.
**
****************************************************************************/
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Item { Item {
id: root id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property alias icon: icon property alias icon: icon
property bool hover: mouseArea.containsMouse property bool hover: mouseArea.containsMouse
property bool pressed: mouseArea.pressed property bool pressed: mouseArea.pressed
implicitWidth: StudioTheme.Values.height implicitWidth: control.style.squareControlSize.width
implicitHeight: StudioTheme.Values.height implicitHeight: control.style.squareControlSize.height
signal clicked signal clicked
z: 10 z: 10
@@ -44,16 +24,16 @@ Item {
id: icon id: icon
anchors.fill: parent anchors.fill: parent
text: StudioTheme.Constants.actionIcon text: StudioTheme.Constants.actionIcon
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
states: [ states: [
State { State {
name: "hover" name: "hover"
when: root.hover && !root.pressed && root.enabled when: control.hover && !control.pressed && control.enabled
PropertyChanges { PropertyChanges {
target: icon target: icon
scale: 1.2 scale: 1.2
@@ -62,10 +42,10 @@ Item {
}, },
State { State {
name: "disable" name: "disable"
when: !root.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: icon target: icon
color: StudioTheme.Values.themeTextColorDisabled color: control.style.icon.disabled
} }
} }
] ]
@@ -75,6 +55,6 @@ Item {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: root.clicked() onClicked: control.clicked()
} }
} }

38
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/InfinityLoopIndicator.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Rectangle { Rectangle {
id: infinityLoopIndicator id: control
property Item myControl property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property Item __parentControl
property bool infinite: false property bool infinite: false
color: "transparent" color: "transparent"
border.color: "transparent" border.color: "transparent"
implicitWidth: StudioTheme.Values.infinityControlWidth implicitWidth: control.style.indicatorIconSize.width
implicitHeight: StudioTheme.Values.infinityControlHeight implicitHeight: control.style.indicatorIconSize.height
z: 10 z: 10
T.Label { T.Label {
id: infinityLoopIndicatorIcon id: icon
anchors.fill: parent anchors.fill: parent
text: StudioTheme.Constants.infinity text: StudioTheme.Constants.infinity
visible: true visible: true
color: StudioTheme.Values.themeTextColor color: control.style.indicator.idle
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
@@ -36,32 +38,32 @@ Rectangle {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: infinityLoopIndicator.infinite = !infinityLoopIndicator.infinite onClicked: control.infinite = !control.infinite
} }
states: [ states: [
State { State {
name: "active" name: "active"
when: infinityLoopIndicator.infinite && !mouseArea.containsMouse when: control.infinite && !mouseArea.containsMouse
PropertyChanges { PropertyChanges {
target: infinityLoopIndicatorIcon target: icon
color: StudioTheme.Values.themeInfiniteLoopIndicatorColorInteraction color: control.style.indicator.interaction
} }
}, },
State { State {
name: "default" name: "default"
when: !mouseArea.containsMouse when: !mouseArea.containsMouse
PropertyChanges { PropertyChanges {
target: infinityLoopIndicatorIcon target: icon
color: StudioTheme.Values.themeInfiniteLoopIndicatorColor color: control.style.indicator.idle
} }
}, },
State { State {
name: "hover" name: "hover"
when: mouseArea.containsMouse when: mouseArea.containsMouse
PropertyChanges { PropertyChanges {
target: infinityLoopIndicatorIcon target: icon
color: StudioTheme.Values.themeInfiniteLoopIndicatorColorHover color: control.style.indicator.hover
} }
} }
] ]

6
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
T.ItemDelegate { T.ItemDelegate {

36
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator2D.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Rectangle { Rectangle {
id: linkIndicator id: control
property Item myControl property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property Item __parentControl
property bool linked: false property bool linked: false
color: "transparent" color: "transparent"
border.color: "transparent" border.color: "transparent"
implicitWidth: StudioTheme.Values.linkControlWidth implicitWidth: control.style.indicatorIconSize.width
implicitHeight: StudioTheme.Values.linkControlHeight implicitHeight: control.style.indicatorIconSize.height
z: 10 z: 10
T.Label { T.Label {
id: linkIndicatorIcon id: icon
anchors.fill: parent anchors.fill: parent
text: linkIndicator.linked ? StudioTheme.Constants.linked text: control.linked ? StudioTheme.Constants.linked
: StudioTheme.Constants.unLinked : StudioTheme.Constants.unLinked
visible: true visible: true
color: StudioTheme.Values.themeTextColor color: control.style.indicator.idle
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
@@ -37,7 +39,7 @@ Rectangle {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onPressed: linkIndicator.linked = !linkIndicator.linked onPressed: control.linked = !control.linked
} }
states: [ states: [
@@ -45,16 +47,16 @@ Rectangle {
name: "default" name: "default"
when: !mouseArea.containsMouse when: !mouseArea.containsMouse
PropertyChanges { PropertyChanges {
target: linkIndicatorIcon target: icon
color: StudioTheme.Values.themeLinkIndicatorColor color: control.style.indicator.idle
} }
}, },
State { State {
name: "hover" name: "hover"
when: mouseArea.containsMouse when: mouseArea.containsMouse
PropertyChanges { PropertyChanges {
target: linkIndicatorIcon target: icon
color: StudioTheme.Values.themeLinkIndicatorColorHover color: control.style.indicator.hover
} }
} }
] ]

61
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3D.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Shapes 1.15 import QtQuick.Shapes
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Rectangle { 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 property bool linked: linkXZ.linked || linkYZ.linked || linkXY.linked
color: "transparent" color: "transparent"
border.color: "transparent" border.color: "transparent"
implicitWidth: StudioTheme.Values.height implicitWidth: control.style.squareControlSize.width
implicitHeight: StudioTheme.Values.height implicitHeight: control.style.squareControlSize.height
z: 10 z: 10
@@ -32,12 +34,12 @@ Rectangle {
T.Label { T.Label {
id: linkIndicatorIcon id: linkIndicatorIcon
anchors.fill: parent anchors.fill: parent
text: linkIndicator.linked ? StudioTheme.Constants.linked text: control.linked ? StudioTheme.Constants.linked
: StudioTheme.Constants.unLinked : StudioTheme.Constants.unLinked
visible: true visible: true
color: StudioTheme.Values.themeTextColor color: control.style.indicator.idle
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
@@ -56,10 +58,10 @@ Rectangle {
y: 0 y: 0
// TODO proper size // TODO proper size
width: 20 + (3 * StudioTheme.Values.height) width: 20 + (3 * control.style.squareControlSize.width)
height: 20 + (3 * StudioTheme.Values.height) height: 20 + (3 * control.style.squareControlSize.height)
padding: StudioTheme.Values.border padding: control.style.borderWidth
margins: 0 // If not defined margin will be -1 margins: 0 // If not defined margin will be -1
closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent
@@ -99,7 +101,7 @@ Rectangle {
property vector2d center: Qt.vector2d(triangle.radius, triangle.radius) property vector2d center: Qt.vector2d(triangle.radius, triangle.radius)
strokeWidth: StudioTheme.Values.border strokeWidth: control.style.borderWidth
strokeColor: triangleMouseArea.containsMouse ? "white" : "gray" strokeColor: triangleMouseArea.containsMouse ? "white" : "gray"
strokeStyle: ShapePath.SolidLine strokeStyle: ShapePath.SolidLine
fillColor: "transparent" fillColor: "transparent"
@@ -149,9 +151,9 @@ Rectangle {
onClicked: { onClicked: {
if (linkXZ.linked && linkYZ.linked && linkXY.linked) if (linkXZ.linked && linkYZ.linked && linkXY.linked)
linkIndicator.unlinkAll() control.unlinkAll()
else else
linkIndicator.linkAll() control.linkAll()
} }
MouseArea { MouseArea {
@@ -177,13 +179,14 @@ Rectangle {
visible: true visible: true
color: triangleMouseArea.containsMouse ? "white" : "gray" color: triangleMouseArea.containsMouse ? "white" : "gray"
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize * 3 font.pixelSize: control.style.baseIconFontSize * 3
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
LinkIndicator3DComponent { LinkIndicator3DComponent {
id: linkXZ id: linkXZ
style: control.style
pointA: path.pX pointA: path.pX
pointB: path.pZ pointB: path.pZ
rotation: 105 // 60 rotation: 105 // 60
@@ -191,6 +194,7 @@ Rectangle {
LinkIndicator3DComponent { LinkIndicator3DComponent {
id: linkYZ id: linkYZ
style: control.style
pointA: path.pZ pointA: path.pZ
pointB: path.pY pointB: path.pY
rotation: 45 // -180 rotation: 45 // -180
@@ -198,6 +202,7 @@ Rectangle {
LinkIndicator3DComponent { LinkIndicator3DComponent {
id: linkXY id: linkXY
style: control.style
pointA: path.pY pointA: path.pY
pointB: path.pX pointB: path.pX
rotation: -15 // -60 rotation: -15 // -60
@@ -211,7 +216,7 @@ Rectangle {
color: StudioTheme.Values.theme3DAxisXColor color: StudioTheme.Values.theme3DAxisXColor
font.family: StudioTheme.Constants.font.family font.family: StudioTheme.Constants.font.family
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
@@ -223,7 +228,7 @@ Rectangle {
color: StudioTheme.Values.theme3DAxisYColor color: StudioTheme.Values.theme3DAxisYColor
font.family: StudioTheme.Constants.font.family font.family: StudioTheme.Constants.font.family
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
@@ -235,7 +240,7 @@ Rectangle {
color: StudioTheme.Values.theme3DAxisZColor color: StudioTheme.Values.theme3DAxisZColor
font.family: StudioTheme.Constants.font.family font.family: StudioTheme.Constants.font.family
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
@@ -244,9 +249,9 @@ Rectangle {
} }
background: Rectangle { background: Rectangle {
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeInteraction border.color: control.style.interaction
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
} }
enter: Transition {} enter: Transition {}
@@ -259,7 +264,7 @@ Rectangle {
when: !mouseArea.containsMouse && !linkPopup.opened when: !mouseArea.containsMouse && !linkPopup.opened
PropertyChanges { PropertyChanges {
target: linkIndicatorIcon target: linkIndicatorIcon
color: StudioTheme.Values.themeLinkIndicatorColor color: control.style.indicator.idle
} }
}, },
State { State {
@@ -267,7 +272,7 @@ Rectangle {
when: mouseArea.containsMouse && !linkPopup.opened when: mouseArea.containsMouse && !linkPopup.opened
PropertyChanges { PropertyChanges {
target: linkIndicatorIcon target: linkIndicatorIcon
color: StudioTheme.Values.themeLinkIndicatorColorHover color: control.style.indicator.hover
} }
}, },
State { State {
@@ -275,7 +280,7 @@ Rectangle {
when: linkPopup.opened when: linkPopup.opened
PropertyChanges { PropertyChanges {
target: linkIndicatorIcon target: linkIndicatorIcon
color: StudioTheme.Values.themeLinkIndicatorColorInteraction color: control.style.indicator.interaction
} }
} }
] ]

34
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3DComponent.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Rectangle { Rectangle {
id: root id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property var pointA: Qt.vector2d() property var pointA: Qt.vector2d()
property var pointB: Qt.vector2d() property var pointB: Qt.vector2d()
@@ -14,14 +16,14 @@ Rectangle {
property bool linked: false property bool linked: false
property var middle: { property var middle: {
var ab = root.pointB.minus(root.pointA) // B - A var ab = control.pointB.minus(control.pointA) // B - A
return root.pointA.plus(ab.normalized().times(ab.length() * 0.5)) return control.pointA.plus(ab.normalized().times(ab.length() * 0.5))
} }
property var position: { property var position: {
// Calculate the middle point between A and B // Calculate the middle point between A and B
var ab = root.pointB.minus(root.pointA) // B - A var ab = control.pointB.minus(control.pointA) // B - A
var midAB = root.pointA.plus(ab.normalized().times(ab.length() * 0.5)) var midAB = control.pointA.plus(ab.normalized().times(ab.length() * 0.5))
var perpendicularAB = Qt.vector2d(ab.y, -ab.x) var perpendicularAB = Qt.vector2d(ab.y, -ab.x)
return midAB.plus(perpendicularAB.normalized().times(8.0 * StudioTheme.Values.scaleFactor)) return midAB.plus(perpendicularAB.normalized().times(8.0 * StudioTheme.Values.scaleFactor))
} }
@@ -29,23 +31,23 @@ Rectangle {
color: "transparent" color: "transparent"
border.color: "transparent" border.color: "transparent"
x: root.position.x - (StudioTheme.Values.height * 0.5) x: control.position.x - (control.style.squareControlSize.width * 0.5)
y: root.position.y - (StudioTheme.Values.height * 0.5) y: control.position.y - (control.style.squareControlSize.height * 0.5)
implicitWidth: StudioTheme.Values.height implicitWidth: control.style.squareControlSize.width
implicitHeight: StudioTheme.Values.height implicitHeight: control.style.squareControlSize.height
transformOrigin: Item.Center transformOrigin: Item.Center
T.Label { T.Label {
id: icon id: icon
anchors.fill: parent anchors.fill: parent
text: root.linked ? StudioTheme.Constants.linked text: control.linked ? StudioTheme.Constants.linked
: StudioTheme.Constants.unLinked : StudioTheme.Constants.unLinked
visible: true visible: true
color: "grey" color: "grey"
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
@@ -55,7 +57,7 @@ Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.margins: 4.0 * StudioTheme.Values.scaleFactor anchors.margins: 4.0 * StudioTheme.Values.scaleFactor
hoverEnabled: true hoverEnabled: true
onPressed: root.linked = !root.linked onPressed: control.linked = !control.linked
} }
states: [ states: [

21
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Window 2.15 import QtQuick.Window
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.Menu { T.Menu {
id: control id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding) contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding) contentHeight + topPadding + bottomPadding)
font.family: StudioTheme.Constants.font.family font.family: StudioTheme.Constants.font.family
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseFontSize
margins: 0 margins: 0
overlap: 1 overlap: 1
@@ -25,7 +27,7 @@ T.Menu {
| T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside | T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside
| T.Popup.CloseOnReleaseOutsideParent | T.Popup.CloseOnReleaseOutsideParent
delegate: MenuItem {} delegate: MenuItem { style: control.style }
contentItem: ListView { contentItem: ListView {
model: control.contentModel model: control.contentModel
@@ -37,9 +39,10 @@ T.Menu {
background: Rectangle { background: Rectangle {
implicitWidth: contentItem.childrenRect.width implicitWidth: contentItem.childrenRect.width
implicitHeight: contentItem.childrenRect.height implicitHeight: contentItem.childrenRect.height
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
MouseArea { MouseArea {
// This mouse area is here to eat clicks that are not handled by menu items // This mouse area is here to eat clicks that are not handled by menu items
// to prevent them going through to the underlying view. // to prevent them going through to the underlying view.

37
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Controls 2.15 import QtQuick.Controls
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.MenuItem { T.MenuItem {
id: control 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, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
@@ -19,7 +21,7 @@ T.MenuItem {
padding: 0 padding: 0
spacing: 0 spacing: 0
horizontalPadding: StudioTheme.Values.contextMenuHorizontalPadding horizontalPadding: control.style.contextMenuHorizontalPadding
action: Action {} action: Action {}
contentItem: Item { contentItem: Item {
@@ -27,8 +29,7 @@ T.MenuItem {
id: textLabel id: textLabel
text: control.text text: control.text
font: control.font font: control.font
color: control.enabled ? StudioTheme.Values.themeTextColor color: control.enabled ? control.style.text.idle : control.style.text.disabled
: StudioTheme.Values.themeTextColorDisabled
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@@ -42,19 +43,19 @@ T.MenuItem {
Shortcut { Shortcut {
id: shortcut id: shortcut
property int shortcutWorkaround: control.action.shortcut ? control.action.shortcut : 0 property int shortcutWorkaround: control.action.shortcut ?? 0
sequence: shortcutWorkaround sequence: shortcut.shortcutWorkaround
} }
} }
} }
arrow: T.Label { arrow: T.Label {
id: arrow 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 y: (parent.height - arrow.height) / 2
visible: control.subMenu visible: control.subMenu
text: StudioTheme.Constants.startNode text: StudioTheme.Constants.startNode
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
font.pixelSize: 8 font.pixelSize: 8
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
} }
@@ -62,13 +63,13 @@ T.MenuItem {
background: Rectangle { background: Rectangle {
implicitWidth: textLabel.implicitWidth + control.labelSpacing + shortcutLabel.implicitWidth implicitWidth: textLabel.implicitWidth + control.labelSpacing + shortcutLabel.implicitWidth
+ control.leftPadding + control.rightPadding + control.leftPadding + control.rightPadding
implicitHeight: StudioTheme.Values.height implicitHeight: control.style.controlSize.height
x: StudioTheme.Values.border x: control.style.borderWidth
y: StudioTheme.Values.border y: control.style.borderWidth
width: control.menu.width - (StudioTheme.Values.border * 2) width: control.menu.width - (control.style.borderWidth * 2)
height: control.height - (StudioTheme.Values.border * 2) height: control.height - (control.style.borderWidth * 2)
color: control.down ? control.palette.midlight color: control.down ? control.palette.midlight
: control.highlighted ? StudioTheme.Values.themeInteraction : control.highlighted ? control.style.interaction
: "transparent" : "transparent"
} }
} }

36
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItemWithIcon.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Controls 2.15 import QtQuick.Controls
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.MenuItem { T.MenuItem {
id: control 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, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
@@ -20,7 +22,7 @@ T.MenuItem {
padding: 0 padding: 0
spacing: 0 spacing: 0
horizontalPadding: StudioTheme.Values.contextMenuHorizontalPadding horizontalPadding: control.style.contextMenuHorizontalPadding
action: Action {} action: Action {}
contentItem: Item { contentItem: Item {
@@ -28,18 +30,18 @@ T.MenuItem {
id: iconLabel id: iconLabel
text: control.checked ? StudioTheme.Constants.tickIcon : "" text: control.checked ? StudioTheme.Constants.tickIcon : ""
visible: true 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.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
Text { Text {
id: textLabel id: textLabel
x: StudioTheme.Values.height x: control.style.squareControlSize.width
text: control.text text: control.text
font: control.font 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 anchors.verticalCenter: parent.verticalCenter
} }
} }
@@ -47,11 +49,13 @@ T.MenuItem {
background: Rectangle { background: Rectangle {
implicitWidth: iconLabel.implicitWidth + textLabel.implicitWidth + control.labelSpacing implicitWidth: iconLabel.implicitWidth + textLabel.implicitWidth + control.labelSpacing
+ control.leftPadding + control.rightPadding + control.leftPadding + control.rightPadding
implicitHeight: StudioTheme.Values.height implicitHeight: control.style.controlSize.height
x: StudioTheme.Values.border x: control.style.borderWidth
y: StudioTheme.Values.border y: control.style.borderWidth
width: control.menu.width - (StudioTheme.Values.border * 2) width: control.menu.width - (control.style.borderWidth * 2)
height: control.height - (StudioTheme.Values.border * 2) height: control.height - (control.style.borderWidth * 2)
color: control.down ? control.palette.midlight : control.highlighted ? StudioTheme.Values.themeInteraction : "transparent" color: control.down ? control.palette.midlight
: control.highlighted ? control.style.interaction
: "transparent"
} }
} }

12
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.MenuSeparator { T.MenuSeparator {
id: control id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
@@ -16,7 +18,7 @@ T.MenuSeparator {
contentItem: Rectangle { contentItem: Rectangle {
implicitWidth: control.parent.width implicitWidth: control.parent.width
implicitHeight: StudioTheme.Values.border implicitHeight: control.style.borderWidth
color: StudioTheme.Values.themeControlOutline color: control.style.border.idle
} }
} }

32
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ProgressBar.qml
View File

@@ -1,27 +1,5 @@
/**************************************************************************** // Copyright (C) 2023 The Qt Company Ltd.
** // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
** 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.
**
****************************************************************************/
import QtQuick import QtQuick
import QtQuick.Templates as T import QtQuick.Templates as T
@@ -30,6 +8,8 @@ import StudioTheme 1.0 as StudioTheme
T.ProgressBar { T.ProgressBar {
id: control id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
@@ -42,13 +22,13 @@ T.ProgressBar {
Rectangle { Rectangle {
width: control.visualPosition * parent.width width: control.visualPosition * parent.width
height: parent.height height: parent.height
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
} }
background: Rectangle { background: Rectangle {
implicitWidth: 200 implicitWidth: 200
implicitHeight: 6 implicitHeight: 6
color: StudioTheme.Values.themeThumbnailLabelBackground color: control.style.thumbnailLabelBackground
} }
} }

93
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RadioButton.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.RadioButton { T.RadioButton {
id: root id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property alias actionIndicator: actionIndicator property alias actionIndicator: actionIndicator
// This property is used to indicate the global hover state // 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 bool edit: false
property alias actionIndicatorVisible: actionIndicator.visible property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth property real __actionIndicatorWidth: control.style.actionIndicatorSize.width
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight property real __actionIndicatorHeight: control.style.actionIndicatorSize.height
property alias labelVisible: radioButtonLabel.visible property alias labelVisible: radioButtonLabel.visible
property alias labelColor: radioButtonLabel.color property alias labelColor: radioButtonLabel.color
@@ -24,7 +26,7 @@ T.RadioButton {
property alias fontFamily: radioButtonLabel.font.family property alias fontFamily: radioButtonLabel.font.family
property alias fontPixelSize: radioButtonLabel.font.pixelSize property alias fontPixelSize: radioButtonLabel.font.pixelSize
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseFontSize
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
@@ -32,119 +34,120 @@ T.RadioButton {
implicitContentHeight + topPadding + bottomPadding, implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding) implicitIndicatorHeight + topPadding + bottomPadding)
spacing: StudioTheme.Values.radioButtonSpacing spacing: control.style.controlSpacing
hoverEnabled: true hoverEnabled: true
activeFocusOnTab: false activeFocusOnTab: false
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: root style: control.style
width: actionIndicator.visible ? root.__actionIndicatorWidth : 0 __parentControl: control
height: actionIndicator.visible ? root.__actionIndicatorHeight : 0 width: actionIndicator.visible ? control.__actionIndicatorWidth : 0
height: actionIndicator.visible ? control.__actionIndicatorHeight : 0
} }
indicator: Rectangle { indicator: Rectangle {
id: radioButtonBackground id: radioButtonBackground
implicitWidth: StudioTheme.Values.radioButtonWidth implicitWidth: control.style.squareControlSize.width
implicitHeight: StudioTheme.Values.radioButtonHeight implicitHeight: control.style.squareControlSize.height
x: actionIndicator.width x: actionIndicator.width
y: 0 y: 0
z: 5 z: 5
radius: width / 2 radius: width / 2
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
Rectangle { Rectangle {
id: radioButtonIndicator id: radioButtonIndicator
x: (parent.width - width) / 2 x: (parent.width - width) / 2
y: (parent.height - height) / 2 y: (parent.height - height) / 2
width: StudioTheme.Values.radioButtonIndicatorWidth width: control.style.radioButtonIndicatorSize.width
height: StudioTheme.Values.radioButtonIndicatorHeight height: control.style.radioButtonIndicatorSize.height
radius: width / 2 radius: width / 2
color: StudioTheme.Values.themeInteraction color: control.style.interaction
visible: root.checked visible: control.checked
} }
} }
contentItem: T.Label { contentItem: T.Label {
id: radioButtonLabel id: radioButtonLabel
leftPadding: radioButtonBackground.x + radioButtonBackground.width + root.spacing leftPadding: radioButtonBackground.x + radioButtonBackground.width + control.spacing
rightPadding: 0 rightPadding: 0
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
text: root.text text: control.text
font: root.font font: control.font
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
visible: text !== "" visible: text !== ""
} }
states: [ states: [
State { State {
name: "default" name: "default"
when: root.enabled && !root.hover && !root.pressed && !actionIndicator.hover when: control.enabled && !control.hover && !control.pressed && !actionIndicator.hover
PropertyChanges { PropertyChanges {
target: radioButtonBackground target: radioButtonBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: radioButtonIndicator target: radioButtonIndicator
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: actionIndicator.hover && !root.pressed && root.enabled when: actionIndicator.hover && !control.pressed && control.enabled
PropertyChanges { PropertyChanges {
target: radioButtonBackground target: radioButtonBackground
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: radioButtonIndicator target: radioButtonIndicator
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "hover" name: "hover"
when: root.hover && !actionIndicator.hover && !root.pressed when: control.hover && !actionIndicator.hover && !control.pressed
PropertyChanges { PropertyChanges {
target: radioButtonBackground target: radioButtonBackground
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: radioButtonIndicator target: radioButtonIndicator
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "press" name: "press"
when: root.hover && root.pressed when: control.hover && control.pressed
PropertyChanges { PropertyChanges {
target: radioButtonBackground target: radioButtonBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
PropertyChanges { PropertyChanges {
target: radioButtonIndicator target: radioButtonIndicator
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !root.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: radioButtonBackground target: radioButtonBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
PropertyChanges { PropertyChanges {
target: radioButtonIndicator target: radioButtonIndicator
color: StudioTheme.Values.themeIconColorDisabled color: control.style.icon.disabled
} }
} }
] ]

38
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.Popup { 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 property bool drag: slider.pressed
@@ -18,7 +20,7 @@ T.Popup {
| T.Popup.CloseOnReleaseOutsideParent | T.Popup.CloseOnReleaseOutsideParent
background: Rectangle { background: Rectangle {
color: StudioTheme.Values.themePopupBackground color: control.style.popup.background
border.width: 0 border.width: 0
} }
@@ -31,41 +33,41 @@ T.Popup {
rightPadding: 3 rightPadding: 3
leftPadding: 3 leftPadding: 3
from: myControl.realFrom from: control.__parentControl.realFrom
value: myControl.realValue value: control.__parentControl.realValue
to: myControl.realTo to: control.__parentControl.realTo
focusPolicy: Qt.NoFocus focusPolicy: Qt.NoFocus
handle: Rectangle { handle: Rectangle {
x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width) x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
y: slider.topPadding + (slider.availableHeight / 2) - (height / 2) y: slider.topPadding + (slider.availableHeight / 2) - (height / 2)
width: StudioTheme.Values.sliderHandleWidth width: control.style.sliderHandleSize.width
height: StudioTheme.Values.sliderHandleHeight height: control.style.sliderHandleSize.height
radius: 0 radius: 0
color: slider.pressed ? StudioTheme.Values.themeSliderHandleInteraction color: slider.pressed ? control.style.slider.handleInteraction
: StudioTheme.Values.themeSliderHandle : control.style.slider.handle
} }
background: Rectangle { background: Rectangle {
x: slider.leftPadding x: slider.leftPadding
y: slider.topPadding + (slider.availableHeight / 2) - (height / 2) y: slider.topPadding + (slider.availableHeight / 2) - (height / 2)
width: slider.availableWidth width: slider.availableWidth
height: StudioTheme.Values.sliderTrackHeight height: control.style.sliderTrackHeight
radius: 0 radius: 0
color: StudioTheme.Values.themeSliderInactiveTrack color: control.style.slider.inactiveTrack
Rectangle { Rectangle {
width: slider.visualPosition * parent.width width: slider.visualPosition * parent.width
height: parent.height height: parent.height
color: StudioTheme.Values.themeSliderActiveTrack color: control.style.slider.activeTrack
radius: 0 radius: 0
} }
} }
onMoved: { onMoved: {
myControl.realValue = slider.value control.__parentControl.realValue = slider.value
myControl.realValueModified() control.__parentControl.realValueModified()
} }
} }
} }

260
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.SpinBox { T.SpinBox {
id: mySpinBox id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property real realFrom: 0.0 property real realFrom: 0.0
property real realTo: 99.0 property real realTo: 99.0
@@ -19,38 +21,38 @@ T.SpinBox {
property int decimals: 0 property int decimals: 0
property real minStepSize: { property real minStepSize: {
var tmpMinStepSize = Number((mySpinBox.realStepSize * 0.1).toFixed(mySpinBox.decimals)) var tmpMinStepSize = Number((control.realStepSize * 0.1).toFixed(control.decimals))
return (tmpMinStepSize) ? tmpMinStepSize : mySpinBox.realStepSize return (tmpMinStepSize) ? tmpMinStepSize : control.realStepSize
} }
property real maxStepSize: { property real maxStepSize: {
var tmpMaxStepSize = Number((mySpinBox.realStepSize * 10.0).toFixed(mySpinBox.decimals)) var tmpMaxStepSize = Number((control.realStepSize * 10.0).toFixed(control.decimals))
return (tmpMaxStepSize < mySpinBox.realTo) ? tmpMaxStepSize : mySpinBox.realStepSize return (tmpMaxStepSize < control.realTo) ? tmpMaxStepSize : control.realStepSize
} }
property bool edit: spinBoxInput.activeFocus property bool edit: spinBoxInput.activeFocus
// This property is used to indicate the global hover state // This property is used to indicate the global hover state
property bool hover: (spinBoxInput.hover || actionIndicator.hover || spinBoxIndicatorUp.hover property bool hover: (spinBoxInput.hover || actionIndicator.hover || spinBoxIndicatorUp.hover
|| spinBoxIndicatorDown.hover || sliderIndicator.hover) || spinBoxIndicatorDown.hover || sliderIndicator.hover)
&& mySpinBox.enabled && control.enabled
property bool drag: false property bool drag: false
property bool sliderDrag: sliderPopup.drag property bool sliderDrag: sliderPopup.drag
property bool dirty: false // user modification flag property bool dirty: false // user modification flag
// TODO Not used anymore. Will be removed when all dependencies were removed. // 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 alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth property real __actionIndicatorWidth: control.style.actionIndicatorSize.width
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight property real __actionIndicatorHeight: control.style.actionIndicatorSize.height
property bool spinBoxIndicatorVisible: true property bool spinBoxIndicatorVisible: true
property real __spinBoxIndicatorWidth: StudioTheme.Values.spinBoxIndicatorWidth property real __spinBoxIndicatorWidth: control.style.spinBoxIndicatorSize.width
property real __spinBoxIndicatorHeight: StudioTheme.Values.spinBoxIndicatorHeight property real __spinBoxIndicatorHeight: control.style.spinBoxIndicatorSize.height
property alias sliderIndicatorVisible: sliderIndicator.visible property alias sliderIndicatorVisible: sliderIndicator.visible
property real __sliderIndicatorWidth: StudioTheme.Values.sliderIndicatorWidth property real __sliderIndicatorWidth: control.style.squareControlSize.width
property real __sliderIndicatorHeight: StudioTheme.Values.sliderIndicatorHeight property real __sliderIndicatorHeight: control.style.squareControlSize.height
property alias __devicePixelRatio: spinBoxInput.devicePixelRatio property alias __devicePixelRatio: spinBoxInput.devicePixelRatio
property alias pixelsPerUnit: spinBoxInput.pixelsPerUnit property alias pixelsPerUnit: spinBoxInput.pixelsPerUnit
@@ -71,13 +73,13 @@ T.SpinBox {
wheelEnabled: false wheelEnabled: false
hoverEnabled: true hoverEnabled: true
width: StudioTheme.Values.defaultControlWidth width: control.style.controlSize.width
height: StudioTheme.Values.defaultControlHeight height: control.style.controlSize.height
leftPadding: spinBoxIndicatorDown.x + spinBoxIndicatorDown.width 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 editable: true
// Leave this in for now // Leave this in for now
@@ -87,107 +89,113 @@ T.SpinBox {
validator: DoubleValidator { validator: DoubleValidator {
id: doubleValidator id: doubleValidator
locale: mySpinBox.locale.name locale: control.locale.name
notation: DoubleValidator.StandardNotation notation: DoubleValidator.StandardNotation
decimals: mySpinBox.decimals decimals: control.decimals
bottom: Math.min(mySpinBox.realFrom, mySpinBox.realTo) bottom: Math.min(control.realFrom, control.realTo)
top: Math.max(mySpinBox.realFrom, mySpinBox.realTo) top: Math.max(control.realFrom, control.realTo)
} }
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: mySpinBox style: control.style
__parentControl: control
x: 0 x: 0
y: 0 y: 0
width: actionIndicator.visible ? mySpinBox.__actionIndicatorWidth : 0 width: actionIndicator.visible ? control.__actionIndicatorWidth : 0
height: actionIndicator.visible ? mySpinBox.__actionIndicatorHeight : 0 height: actionIndicator.visible ? control.__actionIndicatorHeight : 0
} }
up.indicator: RealSpinBoxIndicator { up.indicator: RealSpinBoxIndicator {
id: spinBoxIndicatorUp id: spinBoxIndicatorUp
myControl: mySpinBox style: control.style
__parentControl: control
iconFlip: -1 iconFlip: -1
visible: mySpinBox.spinBoxIndicatorVisible visible: control.spinBoxIndicatorVisible
onRealPressed: mySpinBox.indicatorPressed() onRealPressed: control.indicatorPressed()
onRealReleased: mySpinBox.realIncrease() onRealReleased: control.realIncrease()
onRealPressAndHold: mySpinBox.realIncrease() onRealPressAndHold: control.realIncrease()
x: actionIndicator.width + StudioTheme.Values.border x: actionIndicator.width + control.style.borderWidth
y: StudioTheme.Values.border y: control.style.borderWidth
width: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorWidth : 0 width: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorWidth : 0
height: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorHeight : 0 height: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorHeight : 0
realEnabled: (mySpinBox.realFrom < mySpinBox.realTo) ? (mySpinBox.realValue < mySpinBox.realTo) realEnabled: (control.realFrom < control.realTo) ? (control.realValue < control.realTo)
: (mySpinBox.realValue > mySpinBox.realTo) : (control.realValue > control.realTo)
} }
down.indicator: RealSpinBoxIndicator { down.indicator: RealSpinBoxIndicator {
id: spinBoxIndicatorDown id: spinBoxIndicatorDown
myControl: mySpinBox style: control.style
visible: mySpinBox.spinBoxIndicatorVisible __parentControl: control
onRealPressed: mySpinBox.indicatorPressed() visible: control.spinBoxIndicatorVisible
onRealReleased: mySpinBox.realDecrease() onRealPressed: control.indicatorPressed()
onRealPressAndHold: mySpinBox.realDecrease() onRealReleased: control.realDecrease()
x: actionIndicator.width + StudioTheme.Values.border onRealPressAndHold: control.realDecrease()
x: actionIndicator.width + control.style.borderWidth
y: spinBoxIndicatorUp.y + spinBoxIndicatorUp.height y: spinBoxIndicatorUp.y + spinBoxIndicatorUp.height
width: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorWidth : 0 width: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorWidth : 0
height: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorHeight : 0 height: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorHeight : 0
realEnabled: (mySpinBox.realFrom < mySpinBox.realTo) ? (mySpinBox.realValue > mySpinBox.realFrom) realEnabled: (control.realFrom < control.realTo) ? (control.realValue > control.realFrom)
: (mySpinBox.realValue < mySpinBox.realFrom) : (control.realValue < control.realFrom)
} }
contentItem: RealSpinBoxInput { contentItem: RealSpinBoxInput {
id: spinBoxInput id: spinBoxInput
myControl: mySpinBox style: control.style
__parentControl: control
validator: doubleValidator validator: doubleValidator
function handleEditingFinished() { function handleEditingFinished() {
mySpinBox.focus = false control.focus = false
// Keep the dirty state before calling setValueFromInput(), // Keep the dirty state before calling setValueFromInput(),
// it will be set to false (cleared) internally // it will be set to false (cleared) internally
var valueModified = mySpinBox.dirty var valueModified = control.dirty
mySpinBox.setValueFromInput() control.setValueFromInput()
myTimer.stop() myTimer.stop()
// Only trigger the signal, if the value was modified // Only trigger the signal, if the value was modified
if (valueModified) if (valueModified)
mySpinBox.compressedRealValueModified() control.compressedRealValueModified()
} }
onEditingFinished: spinBoxInput.handleEditingFinished() onEditingFinished: spinBoxInput.handleEditingFinished()
onTextEdited: mySpinBox.dirty = true onTextEdited: control.dirty = true
} }
background: Rectangle { background: Rectangle {
id: spinBoxBackground id: spinBoxBackground
color: StudioTheme.Values.themeControlOutline color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
x: actionIndicator.width x: actionIndicator.width
width: mySpinBox.width - actionIndicator.width width: control.width - actionIndicator.width
height: mySpinBox.height height: control.height
} }
CheckIndicator { CheckIndicator {
id: sliderIndicator id: sliderIndicator
myControl: mySpinBox style: control.style
myPopup: sliderPopup __parentControl: control
__parentPopup: sliderPopup
x: spinBoxInput.x + spinBoxInput.width x: spinBoxInput.x + spinBoxInput.width
y: StudioTheme.Values.border y: control.style.borderWidth
width: sliderIndicator.visible ? mySpinBox.__sliderIndicatorWidth - StudioTheme.Values.border : 0 width: sliderIndicator.visible ? control.__sliderIndicatorWidth - control.style.borderWidth : 0
height: sliderIndicator.visible ? mySpinBox.__sliderIndicatorHeight - (StudioTheme.Values.border * 2) : 0 height: sliderIndicator.visible ? control.__sliderIndicatorHeight - (control.style.borderWidth * 2) : 0
visible: false // reasonable default visible: false // reasonable default
} }
RealSliderPopup { RealSliderPopup {
id: sliderPopup id: sliderPopup
myControl: mySpinBox style: control.style
x: actionIndicator.width + StudioTheme.Values.border __parentControl: control
y: StudioTheme.Values.height x: actionIndicator.width + control.style.borderWidth
width: mySpinBox.width - actionIndicator.width - (StudioTheme.Values.border * 2) y: control.style.controlSize.height
height: StudioTheme.Values.sliderHeight width: control.width - actionIndicator.width - (control.style.borderWidth * 2)
height: control.style.smallControlSize.height
enter: Transition {} enter: Transition {}
exit: Transition {} exit: Transition {}
@@ -195,21 +203,21 @@ T.SpinBox {
textFromValue: function (value, locale) { textFromValue: function (value, locale) {
locale.numberOptions = Locale.OmitGroupSeparator 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) { valueFromText: function (text, locale) {
mySpinBox.setRealValue(Number.fromLocaleString(locale, spinBoxInput.text)) control.setRealValue(Number.fromLocaleString(locale, spinBoxInput.text))
return 0 return 0
} }
states: [ states: [
State { State {
name: "default" name: "default"
when: mySpinBox.enabled && !mySpinBox.hover && !mySpinBox.hovered when: control.enabled && !control.hover && !control.hovered
&& !mySpinBox.edit && !mySpinBox.drag && !mySpinBox.sliderDrag && !control.edit && !control.drag && !control.sliderDrag
PropertyChanges { PropertyChanges {
target: mySpinBox target: control
__wheelEnabled: false __wheelEnabled: false
} }
PropertyChanges { PropertyChanges {
@@ -218,15 +226,15 @@ T.SpinBox {
} }
PropertyChanges { PropertyChanges {
target: spinBoxBackground target: spinBoxBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
}, },
State { State {
name: "edit" name: "edit"
when: mySpinBox.edit when: control.edit
PropertyChanges { PropertyChanges {
target: mySpinBox target: control
__wheelEnabled: true __wheelEnabled: true
} }
PropertyChanges { PropertyChanges {
@@ -235,26 +243,26 @@ T.SpinBox {
} }
PropertyChanges { PropertyChanges {
target: spinBoxBackground target: spinBoxBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
}, },
State { State {
name: "drag" name: "drag"
when: mySpinBox.drag || mySpinBox.sliderDrag when: control.drag || control.sliderDrag
PropertyChanges { PropertyChanges {
target: spinBoxBackground target: spinBoxBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !mySpinBox.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: spinBoxBackground target: spinBoxBackground
color: StudioTheme.Values.themeControlOutlineDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
} }
] ]
@@ -264,32 +272,32 @@ T.SpinBox {
repeat: false repeat: false
running: false running: false
interval: 400 interval: 400
onTriggered: mySpinBox.compressedRealValueModified() onTriggered: control.compressedRealValueModified()
} }
onRealValueChanged: { onRealValueChanged: {
mySpinBox.setRealValue(mySpinBox.realValue) // sanitize and clamp realValue control.setRealValue(control.realValue) // sanitize and clamp realValue
spinBoxInput.text = mySpinBox.textFromValue(mySpinBox.realValue, mySpinBox.locale) spinBoxInput.text = control.textFromValue(control.realValue, control.locale)
mySpinBox.value = 0 // Without setting value back to 0, it can happen that one of control.value = 0 // Without setting value back to 0, it can happen that one of
// the indicator will be disabled due to range logic. // the indicator will be disabled due to range logic.
} }
onRealValueModified: myTimer.restart() onRealValueModified: myTimer.restart()
onFocusChanged: { onFocusChanged: {
if (mySpinBox.focus) { if (control.focus) {
mySpinBox.dirty = false control.dirty = false
} else { } else {
// Make sure displayed value is correct after focus loss, as onEditingFinished // Make sure displayed value is correct after focus loss, as onEditingFinished
// doesn't trigger when value is something validator doesn't accept. // 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() spinBoxInput.handleEditingFinished()
} }
} }
onDisplayTextChanged: spinBoxInput.text = mySpinBox.displayText onDisplayTextChanged: spinBoxInput.text = control.displayText
onActiveFocusChanged: { onActiveFocusChanged: {
if (mySpinBox.activeFocus) { // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason) if (control.activeFocus) { // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason)
mySpinBox.preFocusText = spinBoxInput.text control.preFocusText = spinBoxInput.text
spinBoxInput.selectAll() spinBoxInput.selectAll()
} }
} }
@@ -299,27 +307,27 @@ T.SpinBox {
event.accepted = true event.accepted = true
// Store current step size // Store current step size
var currStepSize = mySpinBox.realStepSize var currStepSize = control.realStepSize
// Set realStepSize according to used modifier key // Set realStepSize according to used modifier key
if (event.modifiers & Qt.ControlModifier) if (event.modifiers & Qt.ControlModifier)
mySpinBox.realStepSize = mySpinBox.minStepSize control.realStepSize = control.minStepSize
if (event.modifiers & Qt.ShiftModifier) if (event.modifiers & Qt.ShiftModifier)
mySpinBox.realStepSize = mySpinBox.maxStepSize control.realStepSize = control.maxStepSize
if (event.key === Qt.Key_Up) if (event.key === Qt.Key_Up)
mySpinBox.realIncrease() control.realIncrease()
else else
mySpinBox.realDecrease() control.realDecrease()
// Reset realStepSize // Reset realStepSize
mySpinBox.realStepSize = currStepSize control.realStepSize = currStepSize
} }
if (event.key === Qt.Key_Escape) { if (event.key === Qt.Key_Escape) {
spinBoxInput.text = mySpinBox.preFocusText spinBoxInput.text = control.preFocusText
mySpinBox.dirty = true control.dirty = true
spinBoxInput.handleEditingFinished() spinBoxInput.handleEditingFinished()
} }
} }
@@ -329,60 +337,60 @@ T.SpinBox {
} }
function setValueFromInput() { function setValueFromInput() {
if (!mySpinBox.dirty) if (!control.dirty)
return return
// FIX: This is a temporary fix for QTBUG-74239 // 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 // Call the function but don't use return value. The realValue property
// will be implicitly set inside the function/procedure. // will be implicitly set inside the function/procedure.
mySpinBox.valueFromText(spinBoxInput.text, mySpinBox.locale) control.valueFromText(spinBoxInput.text, control.locale)
if (mySpinBox.realValue !== currValue) { if (control.realValue !== currValue) {
mySpinBox.realValueModified() control.realValueModified()
} else { } else {
// Check if input text differs in format from the current value // 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) if (tmpInputValue !== spinBoxInput.text)
spinBoxInput.text = tmpInputValue spinBoxInput.text = tmpInputValue
} }
mySpinBox.dirty = false control.dirty = false
} }
function setRealValue(value) { function setRealValue(value) {
if (Number.isNaN(value)) if (Number.isNaN(value))
value = 0 value = 0
if (mySpinBox.decimals === 0) if (control.decimals === 0)
value = Math.round(value) value = Math.round(value)
mySpinBox.realValue = mySpinBox.clamp(value, control.realValue = control.clamp(value,
mySpinBox.validator.bottom, control.validator.bottom,
mySpinBox.validator.top) control.validator.top)
} }
function realDecrease() { function realDecrease() {
// Store the current value for comparison // Store the current value for comparison
var currValue = mySpinBox.realValue var currValue = control.realValue
mySpinBox.valueFromText(spinBoxInput.text, mySpinBox.locale) control.valueFromText(spinBoxInput.text, control.locale)
mySpinBox.setRealValue(mySpinBox.realValue - mySpinBox.realStepSize) control.setRealValue(control.realValue - control.realStepSize)
if (mySpinBox.realValue !== currValue) if (control.realValue !== currValue)
mySpinBox.realValueModified() control.realValueModified()
} }
function realIncrease() { function realIncrease() {
// Store the current value for comparison // Store the current value for comparison
var currValue = mySpinBox.realValue var currValue = control.realValue
mySpinBox.valueFromText(spinBoxInput.text, mySpinBox.locale) control.valueFromText(spinBoxInput.text, control.locale)
mySpinBox.setRealValue(mySpinBox.realValue + mySpinBox.realStepSize) control.setRealValue(control.realValue + control.realStepSize)
if (mySpinBox.realValue !== currValue) if (control.realValue !== currValue)
mySpinBox.realValueModified() control.realValueModified()
} }
} }

135
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Rectangle { 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 hover: spinBoxIndicatorMouseArea.containsMouse
property bool pressed: spinBoxIndicatorMouseArea.containsPress property bool pressed: spinBoxIndicatorMouseArea.containsPress
@@ -21,13 +23,13 @@ Rectangle {
property alias iconFlip: spinBoxIndicatorIconScale.yScale property alias iconFlip: spinBoxIndicatorIconScale.yScale
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.width: 0 border.width: 0
onEnabledChanged: syncEnabled() onEnabledChanged: control.syncEnabled()
onRealEnabledChanged: { onRealEnabledChanged: {
syncEnabled() control.syncEnabled()
if (spinBoxIndicator.realEnabled === false) { if (control.realEnabled === false) {
pressAndHoldTimer.stop() pressAndHoldTimer.stop()
spinBoxIndicatorMouseArea.pressedAndHeld = false spinBoxIndicatorMouseArea.pressedAndHeld = false
} }
@@ -36,7 +38,7 @@ Rectangle {
// This function is meant to synchronize enabled with realEnabled to avoid // This function is meant to synchronize enabled with realEnabled to avoid
// the internal logic messing with the actual state. // the internal logic messing with the actual state.
function syncEnabled() { function syncEnabled() {
spinBoxIndicator.enabled = spinBoxIndicator.realEnabled control.enabled = control.realEnabled
} }
Timer { Timer {
@@ -44,7 +46,7 @@ Rectangle {
repeat: true repeat: true
running: false running: false
interval: 100 interval: 100
onTriggered: spinBoxIndicator.realPressAndHold() onTriggered: control.realPressAndHold()
} }
// This MouseArea is a workaround to avoid some hover state related bugs // This MouseArea is a workaround to avoid some hover state related bugs
@@ -58,26 +60,26 @@ Rectangle {
hoverEnabled: true hoverEnabled: true
pressAndHoldInterval: 500 pressAndHoldInterval: 500
onPressed: function(mouse) { onPressed: function(mouse) {
if (myControl.activeFocus) if (control.__parentControl.activeFocus)
spinBoxIndicator.forceActiveFocus() control.forceActiveFocus()
spinBoxIndicator.realPressed() control.realPressed()
mouse.accepted = true mouse.accepted = true
} }
onPressAndHold: { onPressAndHold: {
pressAndHoldTimer.restart() pressAndHoldTimer.restart()
pressedAndHeld = true spinBoxIndicatorMouseArea.pressedAndHeld = true
} }
onReleased: function(mouse) { onReleased: function(mouse) {
// Only trigger real released when pressAndHold isn't active // Only trigger real released when pressAndHold isn't active
if (!pressAndHoldTimer.running && containsMouse) if (!pressAndHoldTimer.running && containsMouse)
spinBoxIndicator.realReleased() control.realReleased()
pressAndHoldTimer.stop() pressAndHoldTimer.stop()
mouse.accepted = true mouse.accepted = true
pressedAndHeld = false spinBoxIndicatorMouseArea.pressedAndHeld = false
} }
onEntered: { onEntered: {
if (pressedAndHeld) if (spinBoxIndicatorMouseArea.pressedAndHeld)
pressAndHoldTimer.restart() pressAndHoldTimer.restart()
} }
onExited: { onExited: {
@@ -89,10 +91,10 @@ Rectangle {
T.Label { T.Label {
id: spinBoxIndicatorIcon id: spinBoxIndicatorIcon
text: StudioTheme.Constants.upDownSquare2 text: StudioTheme.Constants.upDownSquare2
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti font.pixelSize: control.style.smallIconFontSize
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
anchors.fill: parent anchors.fill: parent
transform: Scale { transform: Scale {
@@ -105,54 +107,57 @@ Rectangle {
states: [ states: [
State { State {
name: "default" name: "default"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.edit when: control.__parentControl.enabled && control.enabled
&& !spinBoxIndicator.hover && !myControl.hover && !myControl.drag && !control.__parentControl.drag && !control.hover
&& !control.__parentControl.hover && !control.__parentControl.edit
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& !spinBoxIndicator.hover && myControl.hover && !myControl.edit && !control.__parentControl.drag && !control.hover
&& control.__parentControl.hover && !control.__parentControl.edit
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
} }
}, },
State { State {
name: "hover" name: "hover"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& spinBoxIndicator.hover && myControl.hover && !spinBoxIndicator.pressed && !control.__parentControl.drag && control.hover
&& control.__parentControl.hover && !control.pressed
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeIconColorHover color: control.style.icon.hover
} }
}, },
State { State {
name: "press" name: "press"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& spinBoxIndicator.pressed && !control.__parentControl.drag && control.pressed
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
}, },
State { State {
name: "edit" name: "edit"
when: myControl.edit && spinBoxIndicator.enabled when: control.__parentControl.edit && control.enabled
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myControl.enabled || !spinBoxIndicator.enabled when: !control.__parentControl.enabled || !control.enabled
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeTextColorDisabled color: control.style.icon.disabled
} }
} }
] ]
@@ -161,102 +166,104 @@ Rectangle {
states: [ states: [
State { State {
name: "default" name: "default"
when: myControl.enabled && !myControl.edit when: control.__parentControl.enabled && !control.__parentControl.edit && !control.hover
&& !spinBoxIndicator.hover && !myControl.hover && !myControl.drag && !control.__parentControl.hover && !control.__parentControl.drag
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: false visible: false
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& !spinBoxIndicator.hover && myControl.hover && !myControl.edit && !control.__parentControl.drag && !control.hover
&& control.__parentControl.hover && !control.__parentControl.edit
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: true visible: true
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
} }
}, },
State { State {
name: "hover" name: "hover"
when: myControl.enabled && !myControl.drag && spinBoxIndicator.enabled when: control.__parentControl.enabled && !control.__parentControl.drag
&& spinBoxIndicator.hover && myControl.hover && !spinBoxIndicator.pressed && control.enabled && control.hover && control.__parentControl.hover
&& !control.pressed
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: true visible: true
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
} }
}, },
State { State {
name: "press" name: "press"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& spinBoxIndicator.pressed && !control.__parentControl.drag && control.pressed
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: true visible: true
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "edit" name: "edit"
when: myControl.edit && myControl.enabled && spinBoxIndicator.enabled when: control.__parentControl.edit && control.__parentControl.enabled && control.enabled
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: true visible: true
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
}, },
State { State {
name: "drag" name: "drag"
when: myControl.drag && myControl.enabled when: control.__parentControl.drag && control.__parentControl.enabled
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: false visible: false
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myControl.enabled when: !control.__parentControl.enabled
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: false visible: false
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
} }
}, },
State { State {
name: "limit" name: "limit"
when: !spinBoxIndicator.enabled && !spinBoxIndicator.realEnabled && myControl.hover when: !control.enabled && !control.realEnabled && control.__parentControl.hover
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: true visible: true
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
} }
] ]

166
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
TextInput { 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 drag: false
property bool hover: mouseArea.containsMouse && textInput.enabled property bool hover: mouseArea.containsMouse && control.enabled
property int devicePixelRatio: 1 property int devicePixelRatio: 1
property int pixelsPerUnit: 10 property int pixelsPerUnit: 10
z: 2 z: 2
font: myControl.font font: control.__parentControl.font
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
selectionColor: StudioTheme.Values.themeTextSelectionColor selectionColor: control.style.text.selection
selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor selectedTextColor: control.style.text.selectedText
horizontalAlignment: Qt.AlignRight horizontalAlignment: Qt.AlignRight
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
leftPadding: StudioTheme.Values.inputHorizontalPadding leftPadding: control.style.inputHorizontalPadding
rightPadding: StudioTheme.Values.inputHorizontalPadding rightPadding: control.style.inputHorizontalPadding
readOnly: !myControl.editable readOnly: !control.__parentControl.editable
validator: myControl.validator validator: control.__parentControl.validator
inputMethodHints: myControl.inputMethodHints inputMethodHints: control.__parentControl.inputMethodHints
selectByMouse: false selectByMouse: false
activeFocusOnPress: false activeFocusOnPress: false
clip: true clip: true
@@ -38,16 +40,16 @@ TextInput {
// TextInput focus needs to be set to activeFocus whenever it changes, // TextInput focus needs to be set to activeFocus whenever it changes,
// otherwise TextInput will get activeFocus whenever the parent SpinBox gets // otherwise TextInput will get activeFocus whenever the parent SpinBox gets
// activeFocus. This will lead to weird side effects. // activeFocus. This will lead to weird side effects.
onActiveFocusChanged: textInput.focus = textInput.activeFocus onActiveFocusChanged: control.focus = control.activeFocus
Rectangle { Rectangle {
id: textInputBackground id: textInputBackground
x: 0 x: 0
y: StudioTheme.Values.border y: control.style.borderWidth
z: -1 z: -1
width: textInput.width width: control.width
height: StudioTheme.Values.height - (StudioTheme.Values.border * 2) height: control.style.controlSize.height - (control.style.borderWidth * 2)
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.width: 0 border.width: 0
} }
@@ -57,22 +59,22 @@ TextInput {
event.accepted = true event.accepted = true
if (event.modifiers & Qt.ControlModifier) { if (event.modifiers & Qt.ControlModifier) {
mouseArea.stepSize = myControl.minStepSize mouseArea.stepSize = control.__parentControl.minStepSize
mouseArea.calcValue() mouseArea.calcValue()
myControl.realValueModified() control.__parentControl.realValueModified()
} }
if (event.modifiers & Qt.ShiftModifier) { if (event.modifiers & Qt.ShiftModifier) {
mouseArea.stepSize = myControl.maxStepSize mouseArea.stepSize = control.__parentControl.maxStepSize
mouseArea.calcValue() mouseArea.calcValue()
myControl.realValueModified() control.__parentControl.realValueModified()
} }
} }
Keys.onReleased: function(event) { Keys.onReleased: function(event) {
event.accepted = true event.accepted = true
mouseArea.stepSize = myControl.realStepSize mouseArea.stepSize = control.__parentControl.realStepSize
mouseArea.calcValue() mouseArea.calcValue()
myControl.realValueModified() control.__parentControl.realValueModified()
} }
} }
@@ -84,14 +86,14 @@ TextInput {
MouseArea { MouseArea {
id: mouseArea id: mouseArea
property real stepSize: myControl.realStepSize property real stepSize: control.__parentControl.realStepSize
// Properties to store the state of a drag operation // Properties to store the state of a drag operation
property bool dragging: false property bool dragging: false
property bool hasDragged: false property bool hasDragged: false
property bool potentialDragStart: 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 pressStartX: 0.0
property real dragStartX: 0.0 property real dragStartX: 0.0
@@ -101,7 +103,7 @@ TextInput {
property real totalUnits: 0.0 // total number of units dragged property real totalUnits: 0.0 // total number of units dragged
property real units: 0.0 property real units: 0.0
property real __pixelsPerUnit: textInput.devicePixelRatio * textInput.pixelsPerUnit property real __pixelsPerUnit: control.devicePixelRatio * control.pixelsPerUnit
anchors.fill: parent anchors.fill: parent
enabled: true enabled: true
@@ -113,21 +115,21 @@ TextInput {
onPositionChanged: function(mouse) { onPositionChanged: function(mouse) {
if (!mouseArea.dragging if (!mouseArea.dragging
&& !myControl.edit && !control.__parentControl.edit
&& Math.abs(mouseArea.pressStartX - mouse.x) > StudioTheme.Values.dragThreshold && Math.abs(mouseArea.pressStartX - mouse.x) > StudioTheme.Values.dragThreshold
&& mouse.buttons === Qt.LeftButton && mouse.buttons === Qt.LeftButton
&& mouseArea.potentialDragStart) { && mouseArea.potentialDragStart) {
mouseArea.dragging = true mouseArea.dragging = true
mouseArea.potentialDragStart = false mouseArea.potentialDragStart = false
mouseArea.initialValue = myControl.realValue mouseArea.initialValue = control.__parentControl.realValue
mouseArea.cursorShape = Qt.ClosedHandCursor mouseArea.cursorShape = Qt.ClosedHandCursor
mouseArea.dragStartX = mouse.x mouseArea.dragStartX = mouse.x
myControl.drag = true control.__parentControl.drag = true
myControl.dragStarted() control.__parentControl.dragStarted()
// Force focus on the non visible component to receive key events // Force focus on the non visible component to receive key events
dragModifierWorkaround.forceActiveFocus() dragModifierWorkaround.forceActiveFocus()
textInput.deselect() control.deselect()
} }
if (!mouseArea.dragging) if (!mouseArea.dragging)
@@ -152,11 +154,11 @@ TextInput {
mouseArea.translationX += translationX mouseArea.translationX += translationX
mouseArea.calcValue() mouseArea.calcValue()
myControl.realValueModified() control.__parentControl.realValueModified()
} }
onClicked: function(mouse) { onClicked: function(mouse) {
if (textInput.edit) if (control.edit)
mouse.accepted = false mouse.accepted = false
if (mouseArea.hasDragged) { if (mouseArea.hasDragged) {
@@ -164,12 +166,12 @@ TextInput {
return return
} }
textInput.forceActiveFocus() control.forceActiveFocus()
textInput.deselect() // QTBUG-75862 control.deselect() // QTBUG-75862
} }
onPressed: function(mouse) { onPressed: function(mouse) {
if (textInput.edit) if (control.edit)
mouse.accepted = false mouse.accepted = false
mouseArea.potentialDragStart = true mouseArea.potentialDragStart = true
@@ -177,7 +179,7 @@ TextInput {
} }
onReleased: function(mouse) { onReleased: function(mouse) {
if (textInput.edit) if (control.edit)
mouse.accepted = false mouse.accepted = false
mouseArea.endDrag() mouseArea.endDrag()
@@ -190,18 +192,18 @@ TextInput {
mouseArea.dragging = false mouseArea.dragging = false
mouseArea.hasDragged = true mouseArea.hasDragged = true
if (myControl.compressedValueTimer.running) { if (control.__parentControl.compressedValueTimer.running) {
myControl.compressedValueTimer.stop() control.__parentControl.compressedValueTimer.stop()
mouseArea.calcValue() mouseArea.calcValue()
myControl.compressedRealValueModified() control.__parentControl.compressedRealValueModified()
} }
mouseArea.cursorShape = Qt.PointingHandCursor mouseArea.cursorShape = Qt.PointingHandCursor
myControl.drag = false control.__parentControl.drag = false
myControl.dragEnded() control.__parentControl.dragEnded()
// Avoid active focus on the component after dragging // Avoid active focus on the component after dragging
dragModifierWorkaround.focus = false dragModifierWorkaround.focus = false
textInput.focus = false control.focus = false
myControl.focus = false control.__parentControl.focus = false
mouseArea.translationX = 0.0 mouseArea.translationX = 0.0
mouseArea.units = 0.0 mouseArea.units = 0.0
@@ -209,47 +211,48 @@ TextInput {
} }
function calcValue() { function calcValue() {
var minUnit = (myControl.realFrom - mouseArea.initialValue) / mouseArea.stepSize var minUnit = (control.__parentControl.realFrom - mouseArea.initialValue) / mouseArea.stepSize
var maxUnit = (myControl.realTo - mouseArea.initialValue) / mouseArea.stepSize var maxUnit = (control.__parentControl.realTo - mouseArea.initialValue) / mouseArea.stepSize
var units = Math.trunc(mouseArea.translationX / mouseArea.__pixelsPerUnit) var units = Math.trunc(mouseArea.translationX / mouseArea.__pixelsPerUnit)
mouseArea.units = Math.min(Math.max(mouseArea.totalUnits + units, minUnit), maxUnit) 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) if (mouseArea.dragging)
myControl.dragging() control.__parentControl.dragging()
} }
onWheel: function(wheel) { onWheel: function(wheel) {
if (!myControl.__wheelEnabled) { if (!control.__parentControl.__wheelEnabled) {
wheel.accepted = false wheel.accepted = false
return return
} }
// Set stepSize according to used modifier key // Set stepSize according to used modifier key
if (wheel.modifiers & Qt.ControlModifier) if (wheel.modifiers & Qt.ControlModifier)
mouseArea.stepSize = myControl.minStepSize mouseArea.stepSize = control.__parentControl.minStepSize
if (wheel.modifiers & Qt.ShiftModifier) if (wheel.modifiers & Qt.ShiftModifier)
mouseArea.stepSize = myControl.maxStepSize mouseArea.stepSize = control.__parentControl.maxStepSize
myControl.valueFromText(textInput.text, myControl.locale) control.__parentControl.valueFromText(control.text, control.__parentControl.locale)
myControl.setRealValue(myControl.realValue + (wheel.angleDelta.y / 120.0 * mouseArea.stepSize)) control.__parentControl.setRealValue(__parentControl.realValue + (wheel.angleDelta.y / 120.0 * mouseArea.stepSize))
myControl.realValueModified() control.__parentControl.realValueModified()
// Reset stepSize // Reset stepSize
mouseArea.stepSize = myControl.realStepSize mouseArea.stepSize = control.__parentControl.realStepSize
} }
} }
states: [ states: [
State { State {
name: "default" name: "default"
when: myControl.enabled && !textInput.edit && !textInput.hover && !myControl.hover when: control.__parentControl.enabled && !control.edit && !control.hover
&& !myControl.drag && !myControl.sliderDrag && !control.__parentControl.hover && !control.__parentControl.drag
&& !control.__parentControl.sliderDrag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
PropertyChanges { PropertyChanges {
target: mouseArea target: mouseArea
@@ -258,27 +261,28 @@ TextInput {
}, },
State { State {
name: "globalHover" name: "globalHover"
when: myControl.hover && !textInput.hover when: control.__parentControl.hover && !control.hover
&& !textInput.edit && !myControl.drag && !control.edit && !control.__parentControl.drag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
} }
}, },
State { State {
name: "hover" name: "hover"
when: textInput.hover && myControl.hover && !textInput.edit && !myControl.drag when: control.hover && control.__parentControl.hover && !control.edit
&& !control.__parentControl.drag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
} }
}, },
State { State {
name: "edit" name: "edit"
when: textInput.edit && !myControl.drag when: control.edit && !control.__parentControl.drag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
PropertyChanges { PropertyChanges {
target: mouseArea target: mouseArea
@@ -287,38 +291,38 @@ TextInput {
}, },
State { State {
name: "drag" name: "drag"
when: myControl.drag when: control.__parentControl.drag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
PropertyChanges { PropertyChanges {
target: textInput target: control
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "sliderDrag" name: "sliderDrag"
when: myControl.sliderDrag when: control.__parentControl.sliderDrag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
PropertyChanges { PropertyChanges {
target: textInput target: control
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myControl.enabled when: !control.__parentControl.enabled
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
} }
PropertyChanges { PropertyChanges {
target: textInput target: control
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
} }
} }
] ]

12
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.ScrollBar { T.ScrollBar {
id: control id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
// This needs to be set, when using T.ScrollBar // This needs to be set, when using T.ScrollBar
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
@@ -31,11 +33,11 @@ T.ScrollBar {
implicitWidth: 4 implicitWidth: 4
implicitHeight: 4 implicitHeight: 4
radius: width / 2 // TODO 0 radius: width / 2 // TODO 0
color: StudioTheme.Values.themeScrollBarHandle color: control.style.scrollBar.handle
} }
background: Rectangle { background: Rectangle {
id: controlTrack id: controlTrack
color: StudioTheme.Values.themeScrollBarTrack color: control.style.scrollBar.track
} }
} }

22
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.ScrollView { T.ScrollView {
id: control id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property alias horizontalThickness: horizontalScrollBar.height property alias horizontalThickness: horizontalScrollBar.height
property alias verticalThickness: verticalScrollBar.width property alias verticalThickness: verticalScrollBar.width
property bool bothVisible: verticalScrollBar.visible property bool bothVisible: verticalScrollBar.visible
@@ -20,20 +22,22 @@ T.ScrollView {
ScrollBar.vertical: ScrollBar { ScrollBar.vertical: ScrollBar {
id: verticalScrollBar id: verticalScrollBar
style: control.style
parent: control parent: control
x: control.width - verticalScrollBar.width - StudioTheme.Values.border x: control.width - verticalScrollBar.width - control.style.borderWidth
y: StudioTheme.Values.border y: control.style.borderWidth
height: control.availableHeight - (2 * StudioTheme.Values.border) height: control.availableHeight - (2 * control.style.borderWidth)
- (control.bothVisible ? control.horizontalThickness : 0) - (control.bothVisible ? control.horizontalThickness : 0)
active: control.ScrollBar.horizontal.active active: control.ScrollBar.horizontal.active
} }
ScrollBar.horizontal: ScrollBar { ScrollBar.horizontal: ScrollBar {
id: horizontalScrollBar id: horizontalScrollBar
style: control.style
parent: control parent: control
x: StudioTheme.Values.border x: control.style.borderWidth
y: control.height - horizontalScrollBar.height - StudioTheme.Values.border y: control.height - horizontalScrollBar.height - control.style.borderWidth
width: control.availableWidth - (2 * StudioTheme.Values.border) width: control.availableWidth - (2 * control.style.borderWidth)
- (control.bothVisible ? control.verticalThickness : 0) - (control.bothVisible ? control.verticalThickness : 0)
active: control.ScrollBar.vertical.active active: control.ScrollBar.vertical.active
} }

79
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SearchBox.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Controls 2.15 import QtQuick.Controls as QC
import QtQuickDesignerTheme 1.0 import QtQuickDesignerTheme 1.0
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Item { Item {
id: root id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property alias text: searchFilterText.text property alias text: searchFilterText.text
signal searchChanged(string searchText); signal searchChanged(string searchText)
function clear() function clear() {
{ searchFilterText.text = ""
searchFilterText.text = "";
} }
function isEmpty() function isEmpty() {
{ return searchFilterText.text === ""
return searchFilterText.text === "";
} }
implicitWidth: searchFilterText.width implicitWidth: searchFilterText.width
implicitHeight: searchFilterText.height implicitHeight: searchFilterText.height
TextField { QC.TextField {
id: searchFilterText id: searchFilterText
placeholderText: qsTr("Search") placeholderText: qsTr("Search")
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor placeholderTextColor: control.style.text.placeholder
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
selectionColor: StudioTheme.Values.themeTextSelectionColor selectionColor: control.style.text.selection
selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor selectedTextColor: control.style.text.selectedText
background: Rectangle { background: Rectangle {
id: textFieldBackground id: textFieldBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
@@ -48,8 +47,7 @@ Item {
} }
} }
height: StudioTheme.Values.defaultControlHeight height: control.style.controlSize.height
leftPadding: 32 leftPadding: 32
rightPadding: 30 rightPadding: 30
topPadding: 6 topPadding: 6
@@ -60,16 +58,16 @@ Item {
selectByMouse: true selectByMouse: true
hoverEnabled: true hoverEnabled: true
onTextChanged: root.searchChanged(text) onTextChanged: control.searchChanged(text)
Label { QC.Label {
text: StudioTheme.Constants.search text: StudioTheme.Constants.search
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 7 anchors.leftMargin: 7
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
Rectangle { // x button Rectangle { // x button
@@ -79,17 +77,16 @@ Item {
anchors.rightMargin: 5 anchors.rightMargin: 5
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: searchFilterText.text !== "" visible: searchFilterText.text !== ""
color: xMouseArea.containsMouse ? StudioTheme.Values.themePanelBackground color: xMouseArea.containsMouse ? control.style.panel.background : "transparent"
: "transparent"
Label { QC.Label {
text: StudioTheme.Constants.closeCross text: StudioTheme.Constants.closeCross
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
anchors.centerIn: parent anchors.centerIn: parent
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
MouseArea { MouseArea {
@@ -106,26 +103,26 @@ Item {
when: !searchFilterText.hovered && !searchFilterText.activeFocus when: !searchFilterText.hovered && !searchFilterText.activeFocus
PropertyChanges { PropertyChanges {
target: textFieldBackground target: textFieldBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: searchFilterText target: searchFilterText
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor placeholderTextColor: control.style.text.placeholder
} }
}, },
State { State {
name: "hover" name: "hover"
when: root.enabled && searchFilterText.hovered && !searchFilterText.activeFocus when: control.enabled && searchFilterText.hovered && !searchFilterText.activeFocus
PropertyChanges { PropertyChanges {
target: textFieldBackground target: textFieldBackground
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: searchFilterText target: searchFilterText
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor placeholderTextColor: control.style.text.placeholder
} }
}, },
State { State {
@@ -133,12 +130,12 @@ Item {
when: searchFilterText.activeFocus when: searchFilterText.activeFocus
PropertyChanges { PropertyChanges {
target: textFieldBackground target: textFieldBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
PropertyChanges { PropertyChanges {
target: searchFilterText target: searchFilterText
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColorInteraction placeholderTextColor: control.style.text.placeholderInteraction
} }
} }
] ]

6
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Layouts 1.15 import QtQuick.Layouts
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true

49
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Layouts 1.15 import QtQuick.Layouts
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Item { Item {
id: section id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property alias caption: label.text property alias caption: label.text
property alias captionPixelSize: label.font.pixelSize property alias captionPixelSize: label.font.pixelSize
property alias captionColor: header.color property alias captionColor: header.color
@@ -23,34 +26,36 @@ Item {
id: header id: header
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: StudioTheme.Values.sectionHeadHeight height: control.style.sectionHeadHeight
color: StudioTheme.Values.themeSectionHeadBackground color: control.style.section.head
SectionLabel { SectionLabel {
id: label id: label
style: control.style
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
x: 22 x: 22
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseFontSize
font.capitalization: Font.AllUppercase font.capitalization: Font.AllUppercase
} }
SectionLabel { SectionLabel {
id: arrow id: arrow
width: StudioTheme.Values.spinControlIconSizeMulti style: control.style
height: StudioTheme.Values.spinControlIconSizeMulti width: control.style.smallIconSize.width
height: control.style.smallIconSize.height
text: StudioTheme.Constants.sectionToggle text: StudioTheme.Constants.sectionToggle
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
renderType: Text.NativeRendering renderType: Text.NativeRendering
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 4 anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti font.pixelSize: control.style.smallIconFontSize
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
Behavior on rotation { Behavior on rotation {
NumberAnimation { NumberAnimation {
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
duration: section.animationDuration duration: control.animationDuration
} }
} }
} }
@@ -58,9 +63,9 @@ Item {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
section.expanded = !section.expanded control.expanded = !control.expanded
if (!section.expanded) // TODO if (!control.expanded) // TODO
section.forceActiveFocus() control.forceActiveFocus()
} }
} }
} }
@@ -73,7 +78,7 @@ Item {
Row { Row {
id: topRow id: topRow
height: StudioTheme.Values.sectionHeadSpacerHeight height: control.style.sectionHeadSpacerHeight
anchors.top: header.bottom anchors.top: header.bottom
} }
@@ -88,21 +93,21 @@ Item {
Row { Row {
id: bottomRow id: bottomRow
height: StudioTheme.Values.sectionHeadSpacerHeight height: control.style.sectionHeadSpacerHeight
anchors.top: column.bottom anchors.top: column.bottom
} }
Behavior on implicitHeight { Behavior on implicitHeight {
NumberAnimation { NumberAnimation {
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
duration: section.animationDuration duration: control.animationDuration
} }
} }
states: [ states: [
State { State {
name: "Expanded" name: "Expanded"
when: section.expanded when: control.expanded
PropertyChanges { PropertyChanges {
target: arrow target: arrow
rotation: 0 rotation: 0
@@ -110,9 +115,9 @@ Item {
}, },
State { State {
name: "Collapsed" name: "Collapsed"
when: !section.expanded when: !control.expanded
PropertyChanges { PropertyChanges {
target: section target: control
implicitHeight: header.height implicitHeight: header.height
} }
PropertyChanges { PropertyChanges {

16
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Layouts 1.15 import QtQuick.Layouts
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.Label { T.Label {
id: label id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
width: Math.max(Math.min(240, parent.width - 220), 90) width: Math.max(Math.min(240, parent.width - 220), 90)
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
font.pixelSize: StudioTheme.Values.myFontSize // TODO font.pixelSize: control.style.baseFontSize
elide: Text.ElideRight elide: Text.ElideRight
Layout.preferredWidth: width Layout.preferredWidth: width

14
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Layouts 1.15 import QtQuick.Layouts
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
GridLayout { GridLayout {
id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
columns: 2 columns: 2
columnSpacing: StudioTheme.Values.sectionColumnSpacing columnSpacing: control.style.sectionColumnSpacing
rowSpacing: StudioTheme.Values.sectionRowSpacing rowSpacing: control.style.sectionRowSpacing
width: parent.width - 16 // TODO parameterize width: parent.width - 16 // TODO parameterize
} }

187
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Shapes 1.15 import QtQuick.Shapes
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.Slider { T.Slider {
id: slider id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property int decimals: 0 property int decimals: 0
property bool labels: true property bool labels: true
@@ -15,66 +17,68 @@ T.Slider {
property real tickMarkStepSize: 0.0 // StepSize bug QTBUG-76136 property real tickMarkStepSize: 0.0 // StepSize bug QTBUG-76136
property real tickMarkWidth: 1.0 property real tickMarkWidth: 1.0
property real tickMarkHeight: 4.0 property real tickMarkHeight: 4.0
readonly property int tickMarkCount: tickMarkStepSize readonly property int tickMarkCount: control.tickMarkStepSize !== 0.0
!== 0.0 ? (to - from) / tickMarkStepSize + 1 : 0 ? (control.to - control.from) / control.tickMarkStepSize + 1 : 0
readonly property real tickMarkSpacing: tickMarkCount readonly property real tickMarkSpacing: control.tickMarkCount !== 0
!== 0 ? (sliderTrack.width - tickMarkWidth ? (sliderTrack.width - control.tickMarkWidth
* tickMarkCount) / (tickMarkCount - 1) : 0.0 * control.tickMarkCount) / (control.tickMarkCount - 1) : 0.0
property string __activeColor: StudioTheme.Values.themeSliderActiveTrack property string __activeColor: control.style.slider.activeTrack
property string __inactiveColor: StudioTheme.Values.themeSliderInactiveTrack property string __inactiveColor: control.style.slider.inactiveTrack
property bool hover: false // This property is used to indicate the global hover state 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 alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth property real __actionIndicatorWidth: control.style.actionIndicatorSize.width
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight property real __actionIndicatorHeight: control.style.actionIndicatorSize.height
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitHandleWidth + leftPadding + rightPadding) implicitHandleWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitHandleHeight + topPadding + bottomPadding, implicitHandleHeight + topPadding + bottomPadding,
StudioTheme.Values.height) control.style.controlSize.height)
padding: 0 padding: 0
leftPadding: actionIndicator.width leftPadding: actionIndicator.width
- (actionIndicatorVisible ? StudioTheme.Values.border - (control.actionIndicatorVisible ? control.style.borderWidth
- StudioTheme.Values.sliderPadding : 0) - control.style.sliderPadding : 0)
wheelEnabled: false wheelEnabled: false
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: slider style: control.style
__parentControl: control
x: 0 x: 0
y: 0 y: 0
width: actionIndicator.visible ? __actionIndicatorWidth : 0 width: actionIndicator.visible ? control.__actionIndicatorWidth : 0
height: actionIndicator.visible ? __actionIndicatorHeight : 0 height: actionIndicator.visible ? control.__actionIndicatorHeight : 0
} }
handle: Rectangle { handle: Rectangle {
id: sliderHandle id: sliderHandle
x: slider.leftPadding + (slider.visualPosition * slider.availableWidth) x: control.leftPadding + (control.visualPosition * control.availableWidth)
- (sliderHandle.width / 2) - (sliderHandle.width / 2)
y: slider.topPadding + (slider.availableHeight / 2) - (sliderHandle.height / 2) y: control.topPadding + (control.availableHeight / 2) - (sliderHandle.height / 2)
z: 20 z: 20
implicitWidth: StudioTheme.Values.sliderHandleWidth implicitWidth: control.style.sliderHandleSize.width
implicitHeight: StudioTheme.Values.sliderHandleHeight implicitHeight: control.style.sliderHandleSize.height
color: StudioTheme.Values.themeSliderHandle color: control.style.slider.handle
Shape { Shape {
id: sliderHandleLabelPointer id: sliderHandleLabelPointer
property real __width: StudioTheme.Values.sliderPointerWidth property real __width: control.style.sliderPointerSize.width
property real __height: StudioTheme.Values.sliderPointerHeight property real __height: control.style.sliderPointerSize.height
property bool antiAlias: true property bool antiAlias: true
layer.enabled: antiAlias layer.enabled: sliderHandleLabelPointer.antiAlias
layer.smooth: antiAlias layer.smooth: sliderHandleLabelPointer.antiAlias
layer.textureSize: Qt.size(width * 2, height * 2) layer.textureSize: Qt.size(sliderHandleLabelPointer.width * 2,
sliderHandleLabelPointer.height * 2)
implicitWidth: __width implicitWidth: sliderHandleLabelPointer.__width
implicitHeight: __height implicitHeight: sliderHandleLabelPointer.__height
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: sliderHandleLabelBackground.bottom anchors.top: sliderHandleLabelBackground.bottom
@@ -83,7 +87,7 @@ T.Slider {
id: sliderHandleLabelPointerPath id: sliderHandleLabelPointerPath
strokeColor: "transparent" strokeColor: "transparent"
strokeWidth: 0 strokeWidth: 0
fillColor: StudioTheme.Values.themeInteraction fillColor: control.style.interaction
startX: 0 startX: 0
startY: 0 startY: 0
@@ -102,20 +106,20 @@ T.Slider {
Rectangle { Rectangle {
id: sliderHandleLabelBackground id: sliderHandleLabelBackground
x: -(sliderHandleLabelBackground.width / 2) + (sliderHandle.width / 2) x: -(sliderHandleLabelBackground.width / 2) + (sliderHandle.width / 2)
width: makeEven( width: control.makeEven(
sliderHandleLabel.width + StudioTheme.Values.inputHorizontalPadding) sliderHandleLabel.width + control.style.inputHorizontalPadding)
height: sliderHandleLabel.height height: sliderHandleLabel.height
anchors.bottom: parent.top anchors.bottom: parent.top
anchors.bottomMargin: StudioTheme.Values.sliderMargin anchors.bottomMargin: control.style.sliderMargin
color: StudioTheme.Values.themeInteraction color: control.style.interaction
Text { Text {
id: sliderHandleLabel id: sliderHandleLabel
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: Number.parseFloat(slider.value).toFixed(slider.decimals) text: Number.parseFloat(control.value).toFixed(control.decimals)
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
font.pixelSize: StudioTheme.Values.sliderFontSize font.pixelSize: control.style.smallFontSize
} }
} }
} }
@@ -127,16 +131,16 @@ T.Slider {
background: Rectangle { background: Rectangle {
id: sliderTrack id: sliderTrack
x: slider.leftPadding x: control.leftPadding
y: slider.topPadding + slider.availableHeight / 2 - height / 2 y: control.topPadding + control.availableHeight / 2 - sliderTrack.height / 2
width: slider.availableWidth width: control.availableWidth
height: StudioTheme.Values.sliderTrackHeight height: control.style.sliderTrackHeight
color: __inactiveColor color: control.__inactiveColor
Rectangle { Rectangle {
width: slider.visualPosition * parent.width width: control.visualPosition * parent.width
height: parent.height height: parent.height
color: __activeColor color: control.__activeColor
} }
} }
@@ -148,36 +152,37 @@ T.Slider {
Text { Text {
id: tickmarkFromLabel id: tickmarkFromLabel
x: 0 x: 0
y: StudioTheme.Values.sliderPadding y: control.style.sliderPadding
text: Number.parseFloat(slider.from).toFixed(slider.decimals) text: Number.parseFloat(control.from).toFixed(control.decimals)
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
font.pixelSize: StudioTheme.Values.sliderFontSize font.pixelSize: control.style.smallFontSize
visible: slider.labels visible: control.labels
} }
Text { Text {
id: tickmarkToLabel id: tickmarkToLabel
x: slider.availableWidth - width x: control.availableWidth - tickmarkToLabel.width
y: StudioTheme.Values.sliderPadding y: control.style.sliderPadding
text: Number.parseFloat(slider.to).toFixed(slider.decimals) text: Number.parseFloat(control.to).toFixed(control.decimals)
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
font.pixelSize: StudioTheme.Values.sliderFontSize font.pixelSize: control.style.smallFontSize
visible: slider.labels visible: control.labels
} }
Row { Row {
id: tickmarkRow id: tickmarkRow
spacing: tickMarkSpacing spacing: control.tickMarkSpacing
visible: slider.tickMarks visible: control.tickMarks
Repeater { Repeater {
id: tickmarkRepeater id: tickmarkRepeater
model: tickMarkCount model: control.tickMarkCount
delegate: Rectangle { delegate: Rectangle {
implicitWidth: tickMarkWidth implicitWidth: control.tickMarkWidth
implicitHeight: StudioTheme.Values.sliderTrackHeight implicitHeight: control.style.sliderTrackHeight
color: x < (slider.visualPosition color: x < (control.visualPosition
* slider.availableWidth) ? __inactiveColor : __activeColor * control.availableWidth) ? control.__inactiveColor
: control.__activeColor
} }
} }
} }
@@ -187,85 +192,85 @@ T.Slider {
id: mouseArea id: mouseArea
x: actionIndicator.width x: actionIndicator.width
y: 0 y: 0
width: slider.width - actionIndicator.width width: control.width - actionIndicator.width
height: slider.height height: control.height
enabled: true enabled: true
hoverEnabled: true hoverEnabled: true
propagateComposedEvents: true propagateComposedEvents: true
acceptedButtons: Qt.LeftButton acceptedButtons: Qt.LeftButton
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
// Sets the global hover // Sets the global hover
onContainsMouseChanged: slider.hover = mouseArea.containsMouse onContainsMouseChanged: control.hover = mouseArea.containsMouse
onPressed: function(mouse) { mouse.accepted = false } onPressed: function(mouse) { mouse.accepted = false }
} }
states: [ states: [
State { State {
name: "default" name: "default"
when: slider.enabled && !slider.hover && !slider.edit when: control.enabled && !control.hover && !control.edit
PropertyChanges { PropertyChanges {
target: slider target: control
wheelEnabled: false wheelEnabled: false
} }
}, },
State { State {
name: "hover" name: "hover"
when: slider.enabled && slider.hover && !slider.edit when: control.enabled && control.hover && !control.edit
PropertyChanges { PropertyChanges {
target: slider target: control
__activeColor: StudioTheme.Values.themeSliderActiveTrackHover __activeColor: control.style.slider.activeTrackHover
__inactiveColor: StudioTheme.Values.themeSliderInactiveTrackHover __inactiveColor: control.style.slider.inactiveTrackHover
} }
PropertyChanges { PropertyChanges {
target: sliderHandle target: sliderHandle
color: StudioTheme.Values.themeSliderHandleHover color: control.style.slider.handleHover
} }
}, },
State { State {
name: "focus" name: "focus"
when: slider.enabled && slider.edit when: control.enabled && control.edit
PropertyChanges { PropertyChanges {
target: slider target: control
wheelEnabled: true wheelEnabled: true
__activeColor: StudioTheme.Values.themeSliderActiveTrackFocus __activeColor: control.style.slider.activeTrackFocus
__inactiveColor: StudioTheme.Values.themeSliderInactiveTrackFocus __inactiveColor: control.style.slider.inactiveTrackFocus
} }
PropertyChanges { PropertyChanges {
target: sliderHandle target: sliderHandle
color: StudioTheme.Values.themeSliderHandleFocus color: control.style.slider.handleFocus
} }
}, },
State { State {
name: "disable" name: "disable"
when: !slider.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: tickmarkFromLabel target: tickmarkFromLabel
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
} }
PropertyChanges { PropertyChanges {
target: tickmarkToLabel target: tickmarkToLabel
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
} }
PropertyChanges { PropertyChanges {
target: sliderHandleLabel target: sliderHandleLabel
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
} }
PropertyChanges { PropertyChanges {
target: slider target: control
__activeColor: StudioTheme.Values.themeControlBackgroundDisabled __activeColor: control.style.background.disabled
__inactiveColor: StudioTheme.Values.themeControlBackgroundDisabled __inactiveColor: control.style.background.disabled
} }
PropertyChanges { PropertyChanges {
target: sliderHandleLabelBackground target: sliderHandleLabelBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
} }
PropertyChanges { PropertyChanges {
target: sliderHandleLabelPointerPath target: sliderHandleLabelPointerPath
fillColor: StudioTheme.Values.themeControlBackgroundDisabled fillColor: control.style.background.disabled
} }
PropertyChanges { PropertyChanges {
target: sliderHandle target: sliderHandle
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
} }
} }
] ]

52
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.Popup { 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 property bool drag: slider.pressed
@@ -18,7 +20,7 @@ T.Popup {
| T.Popup.CloseOnReleaseOutsideParent | T.Popup.CloseOnReleaseOutsideParent
background: Rectangle { background: Rectangle {
color: StudioTheme.Values.themePopupBackground color: control.style.popup.background
border.width: 0 border.width: 0
} }
@@ -31,54 +33,54 @@ T.Popup {
rightPadding: 3 rightPadding: 3
leftPadding: 3 leftPadding: 3
from: myControl.from from: control.__parentControl.from
value: myControl.value value: control.__parentControl.value
to: myControl.to to: control.__parentControl.to
focusPolicy: Qt.NoFocus focusPolicy: Qt.NoFocus
handle: Rectangle { handle: Rectangle {
x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width) x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
y: slider.topPadding + (slider.availableHeight / 2) - (height / 2) y: slider.topPadding + (slider.availableHeight / 2) - (height / 2)
width: StudioTheme.Values.sliderHandleWidth width: control.style.sliderHandleSize.width
height: StudioTheme.Values.sliderHandleHeight height: control.style.sliderHandleSize.height
radius: 0 radius: 0
color: slider.pressed ? StudioTheme.Values.themeSliderHandleInteraction color: slider.pressed ? control.style.slider.handleInteraction
: StudioTheme.Values.themeSliderHandle : control.style.slider.handle
} }
background: Rectangle { background: Rectangle {
x: slider.leftPadding x: slider.leftPadding
y: slider.topPadding + (slider.availableHeight / 2) - (height / 2) y: slider.topPadding + (slider.availableHeight / 2) - (height / 2)
width: slider.availableWidth width: slider.availableWidth
height: StudioTheme.Values.sliderTrackHeight height: control.style.sliderTrackHeight
radius: 0 radius: 0
color: StudioTheme.Values.themeSliderInactiveTrack color: control.style.slider.inactiveTrack
Rectangle { Rectangle {
width: slider.visualPosition * parent.width width: slider.visualPosition * parent.width
height: parent.height height: parent.height
color: StudioTheme.Values.themeSliderActiveTrack color: control.style.slider.activeTrack
radius: 0 radius: 0
} }
} }
onMoved: { onMoved: {
var currValue = myControl.value var currValue = control.__parentControl.value
myControl.value = slider.value control.__parentControl.value = slider.value
if (currValue !== myControl.value) if (currValue !== control.__parentControl.value)
myControl.valueModified() control.__parentControl.valueModified()
} }
} }
onOpened: { onOpened: {
// Check if value is in sync with text input, if not sync it! // Check if value is in sync with text input, if not sync it!
var val = myControl.valueFromText(myControl.contentItem.text, var val = control.__parentControl.valueFromText(control.__parentControl.contentItem.text,
myControl.locale) control.__parentControl.locale)
if (myControl.value !== val) { if (control.__parentControl.value !== val) {
myControl.value = val control.__parentControl.value = val
myControl.valueModified() control.__parentControl.valueModified()
} }
} }
} }

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SortFilterModel.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0
import QtQuick import QtQuick

242
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.SpinBox { T.SpinBox {
id: mySpinBox id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property alias labelColor: spinBoxInput.color property alias labelColor: spinBoxInput.color
property alias actionIndicator: actionIndicator property alias actionIndicator: actionIndicator
property int decimals: 0 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 minStepSize: 1
property real maxStepSize: 10 property real maxStepSize: 10
@@ -21,23 +23,23 @@ T.SpinBox {
// This property is used to indicate the global hover state // This property is used to indicate the global hover state
property bool hover: (spinBoxInput.hover || actionIndicator.hover || spinBoxIndicatorUp.hover property bool hover: (spinBoxInput.hover || actionIndicator.hover || spinBoxIndicatorUp.hover
|| spinBoxIndicatorDown.hover || sliderIndicator.hover) || spinBoxIndicatorDown.hover || sliderIndicator.hover)
&& mySpinBox.enabled && control.enabled
property bool drag: false property bool drag: false
property bool sliderDrag: sliderPopup.drag property bool sliderDrag: sliderPopup.drag
property bool dirty: false // user modification flag property bool dirty: false // user modification flag
property alias actionIndicatorVisible: actionIndicator.visible property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth property real __actionIndicatorWidth: control.style.actionIndicatorSize.width
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight property real __actionIndicatorHeight: control.style.actionIndicatorSize.height
property bool spinBoxIndicatorVisible: true property bool spinBoxIndicatorVisible: true
property real __spinBoxIndicatorWidth: StudioTheme.Values.spinBoxIndicatorWidth property real __spinBoxIndicatorWidth: control.style.spinBoxIndicatorSize.width
property real __spinBoxIndicatorHeight: StudioTheme.Values.spinBoxIndicatorHeight property real __spinBoxIndicatorHeight: control.style.spinBoxIndicatorSize.height
property alias sliderIndicatorVisible: sliderIndicator.visible property alias sliderIndicatorVisible: sliderIndicator.visible
property real __sliderIndicatorWidth: StudioTheme.Values.sliderIndicatorWidth property real __sliderIndicatorWidth: control.style.squareControlSize.width
property real __sliderIndicatorHeight: StudioTheme.Values.sliderIndicatorHeight property real __sliderIndicatorHeight: control.style.squareControlSize.height
property alias __devicePixelRatio: spinBoxInput.devicePixelRatio property alias __devicePixelRatio: spinBoxInput.devicePixelRatio
property alias pixelsPerUnit: spinBoxInput.pixelsPerUnit property alias pixelsPerUnit: spinBoxInput.pixelsPerUnit
@@ -56,87 +58,91 @@ T.SpinBox {
wheelEnabled: false wheelEnabled: false
hoverEnabled: true hoverEnabled: true
width: StudioTheme.Values.defaultControlWidth width: control.style.controlSize.width
height: StudioTheme.Values.defaultControlHeight height: control.style.controlSize.height
leftPadding: spinBoxIndicatorDown.x + spinBoxIndicatorDown.width 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 editable: true
validator: mySpinBox.decimals ? doubleValidator : intValidator validator: control.decimals ? doubleValidator : intValidator
DoubleValidator { DoubleValidator {
id: doubleValidator id: doubleValidator
locale: mySpinBox.locale.name locale: control.locale.name
notation: DoubleValidator.StandardNotation notation: DoubleValidator.StandardNotation
decimals: mySpinBox.decimals decimals: control.decimals
bottom: Math.min(mySpinBox.from, mySpinBox.to) / mySpinBox.factor bottom: Math.min(control.from, control.to) / control.factor
top: Math.max(mySpinBox.from, mySpinBox.to) / mySpinBox.factor top: Math.max(control.from, control.to) / control.factor
} }
IntValidator { IntValidator {
id: intValidator id: intValidator
locale: mySpinBox.locale.name locale: control.locale.name
bottom: Math.min(mySpinBox.from, mySpinBox.to) bottom: Math.min(control.from, control.to)
top: Math.max(mySpinBox.from, mySpinBox.to) top: Math.max(control.from, control.to)
} }
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: mySpinBox style: control.style
__parentControl: control
x: 0 x: 0
y: 0 y: 0
width: actionIndicator.visible ? mySpinBox.__actionIndicatorWidth : 0 width: actionIndicator.visible ? control.__actionIndicatorWidth : 0
height: actionIndicator.visible ? mySpinBox.__actionIndicatorHeight : 0 height: actionIndicator.visible ? control.__actionIndicatorHeight : 0
} }
up.indicator: SpinBoxIndicator { up.indicator: SpinBoxIndicator {
id: spinBoxIndicatorUp id: spinBoxIndicatorUp
myControl: mySpinBox style: control.style
__parentControl: control
iconFlip: -1 iconFlip: -1
visible: mySpinBox.spinBoxIndicatorVisible visible: control.spinBoxIndicatorVisible
pressed: mySpinBox.up.pressed pressed: control.up.pressed
x: actionIndicator.width + StudioTheme.Values.border x: actionIndicator.width + control.style.borderWidth
y: StudioTheme.Values.border y: control.style.borderWidth
width: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorWidth : 0 width: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorWidth : 0
height: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorHeight : 0 height: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorHeight : 0
enabled: (mySpinBox.from < mySpinBox.to) ? mySpinBox.value < mySpinBox.to enabled: (control.from < control.to) ? control.value < control.to
: mySpinBox.value > mySpinBox.to : control.value > control.to
} }
down.indicator: SpinBoxIndicator { down.indicator: SpinBoxIndicator {
id: spinBoxIndicatorDown id: spinBoxIndicatorDown
myControl: mySpinBox style: control.style
visible: mySpinBox.spinBoxIndicatorVisible __parentControl: control
pressed: mySpinBox.down.pressed visible: control.spinBoxIndicatorVisible
x: actionIndicator.width + StudioTheme.Values.border pressed: control.down.pressed
x: actionIndicator.width + control.style.borderWidth
y: spinBoxIndicatorUp.y + spinBoxIndicatorUp.height y: spinBoxIndicatorUp.y + spinBoxIndicatorUp.height
width: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorWidth : 0 width: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorWidth : 0
height: mySpinBox.spinBoxIndicatorVisible ? mySpinBox.__spinBoxIndicatorHeight : 0 height: control.spinBoxIndicatorVisible ? control.__spinBoxIndicatorHeight : 0
enabled: (mySpinBox.from < mySpinBox.to) ? mySpinBox.value > mySpinBox.from enabled: (control.from < control.to) ? control.value > control.from
: mySpinBox.value < mySpinBox.from : control.value < control.from
} }
contentItem: SpinBoxInput { contentItem: SpinBoxInput {
id: spinBoxInput id: spinBoxInput
myControl: mySpinBox style: control.style
__parentControl: control
function handleEditingFinished() { function handleEditingFinished() {
mySpinBox.focus = false control.focus = false
// Keep the dirty state before calling setValueFromInput(), // Keep the dirty state before calling setValueFromInput(),
// it will be set to false (cleared) internally // it will be set to false (cleared) internally
var valueModified = mySpinBox.dirty var valueModified = control.dirty
mySpinBox.setValueFromInput() control.setValueFromInput()
myTimer.stop() myTimer.stop()
// Only trigger the signal, if the value was modified // Only trigger the signal, if the value was modified
if (valueModified) if (valueModified)
mySpinBox.compressedValueModified() control.compressedValueModified()
} }
onEditingFinished: spinBoxInput.handleEditingFinished() onEditingFinished: spinBoxInput.handleEditingFinished()
@@ -144,32 +150,34 @@ T.SpinBox {
background: Rectangle { background: Rectangle {
id: spinBoxBackground id: spinBoxBackground
color: StudioTheme.Values.themeControlOutline color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
x: actionIndicator.width x: actionIndicator.width
width: mySpinBox.width - actionIndicator.width width: control.width - actionIndicator.width
height: mySpinBox.height height: control.height
} }
CheckIndicator { CheckIndicator {
id: sliderIndicator id: sliderIndicator
myControl: mySpinBox style: control.style
myPopup: sliderPopup __parentControl: control
__parentPopup: sliderPopup
x: spinBoxInput.x + spinBoxInput.width x: spinBoxInput.x + spinBoxInput.width
y: StudioTheme.Values.border y: control.style.borderWidth
width: sliderIndicator.visible ? mySpinBox.__sliderIndicatorWidth - StudioTheme.Values.border : 0 width: sliderIndicator.visible ? control.__sliderIndicatorWidth - control.style.borderWidth : 0
height: sliderIndicator.visible ? mySpinBox.__sliderIndicatorHeight - (StudioTheme.Values.border * 2) : 0 height: sliderIndicator.visible ? control.__sliderIndicatorHeight - (control.style.borderWidth * 2) : 0
visible: false // reasonable default visible: false // reasonable default
} }
SliderPopup { SliderPopup {
id: sliderPopup id: sliderPopup
myControl: mySpinBox style: control.style
x: actionIndicator.width + StudioTheme.Values.border __parentControl: control
y: StudioTheme.Values.height x: actionIndicator.width + control.style.borderWidth
width: mySpinBox.width - actionIndicator.width - (StudioTheme.Values.border * 2) y: control.style.controlSize.height
height: StudioTheme.Values.sliderHeight width: control.width - actionIndicator.width - (control.style.borderWidth * 2)
height: control.style.smallControlSize.height
enter: Transition {} enter: Transition {}
exit: Transition {} exit: Transition {}
@@ -177,21 +185,21 @@ T.SpinBox {
textFromValue: function (value, locale) { textFromValue: function (value, locale) {
locale.numberOptions = Locale.OmitGroupSeparator locale.numberOptions = Locale.OmitGroupSeparator
return Number(value / mySpinBox.factor).toLocaleString(locale, 'f', return Number(value / control.factor).toLocaleString(locale, 'f',
mySpinBox.decimals) control.decimals)
} }
valueFromText: function (text, locale) { valueFromText: function (text, locale) {
return Number.fromLocaleString(locale, text) * mySpinBox.factor return Number.fromLocaleString(locale, text) * control.factor
} }
states: [ states: [
State { State {
name: "default" name: "default"
when: mySpinBox.enabled && !mySpinBox.hover && !mySpinBox.hovered when: control.enabled && !control.hover && !control.hovered
&& !mySpinBox.edit && !mySpinBox.drag && !mySpinBox.sliderDrag && !control.edit && !control.drag && !control.sliderDrag
PropertyChanges { PropertyChanges {
target: mySpinBox target: control
__wheelEnabled: false __wheelEnabled: false
} }
PropertyChanges { PropertyChanges {
@@ -200,15 +208,15 @@ T.SpinBox {
} }
PropertyChanges { PropertyChanges {
target: spinBoxBackground target: spinBoxBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
}, },
State { State {
name: "edit" name: "edit"
when: mySpinBox.edit when: control.edit
PropertyChanges { PropertyChanges {
target: mySpinBox target: control
__wheelEnabled: true __wheelEnabled: true
} }
PropertyChanges { PropertyChanges {
@@ -217,26 +225,26 @@ T.SpinBox {
} }
PropertyChanges { PropertyChanges {
target: spinBoxBackground target: spinBoxBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
}, },
State { State {
name: "drag" name: "drag"
when: mySpinBox.drag || mySpinBox.sliderDrag when: control.drag || control.sliderDrag
PropertyChanges { PropertyChanges {
target: spinBoxBackground target: spinBoxBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !mySpinBox.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: spinBoxBackground target: spinBoxBackground
color: StudioTheme.Values.themeControlOutlineDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
} }
] ]
@@ -246,19 +254,19 @@ T.SpinBox {
repeat: false repeat: false
running: false running: false
interval: 400 interval: 400
onTriggered: mySpinBox.compressedValueModified() onTriggered: control.compressedValueModified()
} }
onValueModified: myTimer.restart() onValueModified: myTimer.restart()
onFocusChanged: mySpinBox.setValueFromInput() onFocusChanged: control.setValueFromInput()
onDisplayTextChanged: spinBoxInput.text = mySpinBox.displayText onDisplayTextChanged: spinBoxInput.text = control.displayText
onActiveFocusChanged: { onActiveFocusChanged: {
if (mySpinBox.activeFocus) { // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason) if (control.activeFocus) { // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason)
mySpinBox.preFocusText = spinBoxInput.text control.preFocusText = spinBoxInput.text
spinBoxInput.selectAll() spinBoxInput.selectAll()
} }
if (sliderPopup.opened && !mySpinBox.activeFocus) if (sliderPopup.opened && !control.activeFocus)
sliderPopup.close() sliderPopup.close()
} }
@@ -267,43 +275,43 @@ T.SpinBox {
event.accepted = true event.accepted = true
// Store current step size // Store current step size
var currStepSize = mySpinBox.stepSize var currStepSize = control.stepSize
if (event.modifiers & Qt.ControlModifier) if (event.modifiers & Qt.ControlModifier)
mySpinBox.stepSize = mySpinBox.minStepSize control.stepSize = control.minStepSize
if (event.modifiers & Qt.ShiftModifier) 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! // Check if value is in sync with text input, if not sync it!
var val = mySpinBox.valueFromText(spinBoxInput.text, var val = control.valueFromText(spinBoxInput.text,
mySpinBox.locale) control.locale)
if (mySpinBox.value !== val) if (control.value !== val)
mySpinBox.value = val control.value = val
var currValue = mySpinBox.value var currValue = control.value
if (event.key === Qt.Key_Up) if (event.key === Qt.Key_Up)
mySpinBox.increase() control.increase()
else else
mySpinBox.decrease() control.decrease()
if (currValue !== mySpinBox.value) if (currValue !== control.value)
mySpinBox.valueModified() control.valueModified()
// Reset step size // Reset step size
mySpinBox.stepSize = currStepSize control.stepSize = currStepSize
} }
if (event.key === Qt.Key_Escape) { if (event.key === Qt.Key_Escape) {
spinBoxInput.text = mySpinBox.preFocusText spinBoxInput.text = control.preFocusText
mySpinBox.dirty = true control.dirty = true
spinBoxInput.handleEditingFinished() spinBoxInput.handleEditingFinished()
} }
// FIX: This is a temporary fix for QTBUG-74239 // FIX: This is a temporary fix for QTBUG-74239
if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
mySpinBox.setValueFromInput() control.setValueFromInput()
} }
function clamp(v, lo, hi) { function clamp(v, lo, hi) {
@@ -311,27 +319,27 @@ T.SpinBox {
} }
function setValueFromInput() { function setValueFromInput() {
if (!mySpinBox.dirty) if (!control.dirty)
return return
// FIX: This is a temporary fix for QTBUG-74239 // FIX: This is a temporary fix for QTBUG-74239
var currValue = mySpinBox.value var currValue = control.value
if (!spinBoxInput.acceptableInput) if (!spinBoxInput.acceptableInput)
mySpinBox.value = clamp(valueFromText(spinBoxInput.text, control.value = clamp(valueFromText(spinBoxInput.text,
mySpinBox.locale), control.locale),
mySpinBox.validator.bottom * mySpinBox.factor, control.validator.bottom * control.factor,
mySpinBox.validator.top * mySpinBox.factor) control.validator.top * control.factor)
else else
mySpinBox.value = valueFromText(spinBoxInput.text, control.value = valueFromText(spinBoxInput.text,
mySpinBox.locale) control.locale)
if (spinBoxInput.text !== mySpinBox.displayText) if (spinBoxInput.text !== control.displayText)
spinBoxInput.text = mySpinBox.displayText spinBoxInput.text = control.displayText
if (mySpinBox.value !== currValue) if (control.value !== currValue)
mySpinBox.valueModified() control.valueModified()
mySpinBox.dirty = false control.dirty = false
} }
} }

122
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Rectangle { 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 bool pressed: spinBoxIndicatorMouseArea.containsPress
property alias iconFlip: spinBoxIndicatorIconScale.yScale property alias iconFlip: spinBoxIndicatorIconScale.yScale
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.width: 0 border.width: 0
// This MouseArea is a workaround to avoid some hover state related bugs // This MouseArea is a workaround to avoid some hover state related bugs
@@ -25,8 +27,8 @@ Rectangle {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onPressed: function(mouse) { onPressed: function(mouse) {
if (myControl.activeFocus) if (control.__parentControl.activeFocus)
spinBoxIndicator.forceActiveFocus() control.forceActiveFocus()
mouse.accepted = false mouse.accepted = false
} }
@@ -35,11 +37,11 @@ Rectangle {
T.Label { T.Label {
id: spinBoxIndicatorIcon id: spinBoxIndicatorIcon
text: StudioTheme.Constants.upDownSquare2 text: StudioTheme.Constants.upDownSquare2
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
renderType: Text.NativeRendering renderType: Text.NativeRendering
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti font.pixelSize: control.style.smallIconFontSize
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
anchors.fill: parent anchors.fill: parent
transform: Scale { transform: Scale {
@@ -51,46 +53,58 @@ Rectangle {
states: [ states: [
State { State {
name: "globalHover" name: "default"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& !spinBoxIndicator.hover && myControl.hover && !myControl.edit && !control.__parentControl.drag && !control.hover
&& !control.__parentControl.hover && !control.__parentControl.edit
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon 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 { State {
name: "hover" name: "hover"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& spinBoxIndicator.hover && myControl.hover && !spinBoxIndicator.pressed && !control.__parentControl.drag && control.hover
&& control.__parentControl.hover && !control.pressed
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeIconColorHover color: control.style.icon.hover
} }
}, },
State { State {
name: "press" name: "press"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& spinBoxIndicator.pressed && !control.__parentControl.drag && control.pressed
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
color: "#323232" // TODO color: control.style.icon.idle
} }
}, },
State { State {
name: "edit" name: "edit"
when: myControl.edit when: control.__parentControl.edit
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myControl.enabled || !spinBoxIndicator.enabled when: !control.__parentControl.enabled || !control.enabled
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
color: StudioTheme.Values.themeTextColorDisabled color: control.style.icon.disabled
} }
} }
] ]
@@ -99,102 +113,104 @@ Rectangle {
states: [ states: [
State { State {
name: "default" name: "default"
when: myControl.enabled && !myControl.edit when: control.__parentControl.enabled && !control.__parentControl.edit && !control.hover
&& !spinBoxIndicator.hover && !myControl.hover && !myControl.drag && !control.__parentControl.hover && !control.__parentControl.drag
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: false visible: false
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& !spinBoxIndicator.hover && myControl.hover && !myControl.edit && !control.__parentControl.drag && !control.hover
&& control.__parentControl.hover && !control.__parentControl.edit
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: true visible: true
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
} }
}, },
State { State {
name: "hover" name: "hover"
when: myControl.enabled && !myControl.drag when: control.__parentControl.enabled && !control.__parentControl.drag
&& spinBoxIndicator.hover && myControl.hover && !spinBoxIndicator.pressed && control.enabled && control.hover && control.__parentControl.hover
&& !control.pressed
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: true visible: true
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
} }
}, },
State { State {
name: "press" name: "press"
when: myControl.enabled && spinBoxIndicator.enabled && !myControl.drag when: control.__parentControl.enabled && control.enabled
&& spinBoxIndicator.pressed && !control.__parentControl.drag && control.pressed
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: true visible: true
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: "#2aafd3" // TODO color: control.style.interaction
} }
}, },
State { State {
name: "edit" name: "edit"
when: myControl.edit when: control.__parentControl.edit && control.__parentControl.enabled && control.enabled
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: true visible: true
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
}, },
State { State {
name: "drag" name: "drag"
when: myControl.drag when: control.__parentControl.drag && control.__parentControl.enabled
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: false visible: false
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myControl.enabled when: !control.__parentControl.enabled
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: false visible: false
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackground color: control.style.background.disabled
} }
}, },
State { State {
name: "limit" name: "limit"
when: !spinBoxIndicator.enabled && !spinBoxIndicator.realEnabled && myControl.hover when: !control.enabled && !control.realEnabled && control.__parentControl.hover
PropertyChanges { PropertyChanges {
target: spinBoxIndicatorIcon target: spinBoxIndicatorIcon
visible: true visible: true
} }
PropertyChanges { PropertyChanges {
target: spinBoxIndicator target: control
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
} }
] ]

175
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
TextInput { 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 drag: false
property bool hover: mouseArea.containsMouse && textInput.enabled property bool hover: mouseArea.containsMouse && control.enabled
property int devicePixelRatio: 1 property int devicePixelRatio: 1
property int pixelsPerUnit: 10 property int pixelsPerUnit: 10
z: 2 z: 2
font: myControl.font font: control.__parentControl.font
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
selectionColor: StudioTheme.Values.themeTextSelectionColor selectionColor: control.style.text.selection
selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor selectedTextColor: control.style.text.selectedText
horizontalAlignment: Qt.AlignRight horizontalAlignment: Qt.AlignRight
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
leftPadding: StudioTheme.Values.inputHorizontalPadding leftPadding: control.style.inputHorizontalPadding
rightPadding: StudioTheme.Values.inputHorizontalPadding rightPadding: control.style.inputHorizontalPadding
readOnly: !myControl.editable readOnly: !control.__parentControl.editable
validator: myControl.validator validator: control.__parentControl.validator
inputMethodHints: myControl.inputMethodHints inputMethodHints: control.__parentControl.inputMethodHints
selectByMouse: false selectByMouse: false
activeFocusOnPress: false activeFocusOnPress: false
clip: true clip: true
@@ -38,16 +40,16 @@ TextInput {
// TextInput focus needs to be set to activeFocus whenever it changes, // TextInput focus needs to be set to activeFocus whenever it changes,
// otherwise TextInput will get activeFocus whenever the parent SpinBox gets // otherwise TextInput will get activeFocus whenever the parent SpinBox gets
// activeFocus. This will lead to weird side effects. // activeFocus. This will lead to weird side effects.
onActiveFocusChanged: textInput.focus = textInput.activeFocus onActiveFocusChanged: control.focus = control.activeFocus
Rectangle { Rectangle {
id: textInputBackground id: textInputBackground
x: 0 x: 0
y: StudioTheme.Values.border y: control.style.borderWidth
z: -1 z: -1
width: textInput.width width: control.width
height: StudioTheme.Values.height - (StudioTheme.Values.border * 2) height: control.style.controlSize.height - (control.style.borderWidth * 2)
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.width: 0 border.width: 0
} }
@@ -57,22 +59,22 @@ TextInput {
event.accepted = true event.accepted = true
if (event.modifiers & Qt.ControlModifier) { if (event.modifiers & Qt.ControlModifier) {
mouseArea.stepSize = myControl.minStepSize mouseArea.stepSize = control.__parentControl.minStepSize
mouseArea.calcValue() mouseArea.calcValue()
myControl.valueModified() control.__parentControl.valueModified()
} }
if (event.modifiers & Qt.ShiftModifier) { if (event.modifiers & Qt.ShiftModifier) {
mouseArea.stepSize = myControl.maxStepSize mouseArea.stepSize = control.__parentControl.maxStepSize
mouseArea.calcValue() mouseArea.calcValue()
myControl.valueModified() control.__parentControl.valueModified()
} }
} }
Keys.onReleased: function(event) { Keys.onReleased: function(event) {
event.accepted = true event.accepted = true
mouseArea.stepSize = myControl.stepSize mouseArea.stepSize = control.__parentControl.stepSize
mouseArea.calcValue() mouseArea.calcValue()
myControl.valueModified() control.__parentControl.valueModified()
} }
} }
@@ -84,14 +86,14 @@ TextInput {
MouseArea { MouseArea {
id: mouseArea id: mouseArea
property real stepSize: myControl.stepSize property real stepSize: control.__parentControl.stepSize
// Properties to store the state of a drag operation // Properties to store the state of a drag operation
property bool dragging: false property bool dragging: false
property bool hasDragged: false property bool hasDragged: false
property bool potentialDragStart: 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 pressStartX: 0.0
property real dragStartX: 0.0 property real dragStartX: 0.0
@@ -101,7 +103,7 @@ TextInput {
property real totalUnits: 0.0 // total number of units dragged property real totalUnits: 0.0 // total number of units dragged
property real units: 0.0 property real units: 0.0
property real __pixelsPerUnit: textInput.devicePixelRatio * textInput.pixelsPerUnit property real __pixelsPerUnit: control.devicePixelRatio * control.pixelsPerUnit
anchors.fill: parent anchors.fill: parent
enabled: true enabled: true
@@ -113,21 +115,21 @@ TextInput {
onPositionChanged: function(mouse) { onPositionChanged: function(mouse) {
if (!mouseArea.dragging if (!mouseArea.dragging
&& !myControl.edit && !control.__parentControl.edit
&& Math.abs(mouseArea.pressStartX - mouse.x) > StudioTheme.Values.dragThreshold && Math.abs(mouseArea.pressStartX - mouse.x) > StudioTheme.Values.dragThreshold
&& mouse.buttons === Qt.LeftButton && mouse.buttons === Qt.LeftButton
&& mouseArea.potentialDragStart) { && mouseArea.potentialDragStart) {
mouseArea.dragging = true mouseArea.dragging = true
mouseArea.potentialDragStart = false mouseArea.potentialDragStart = false
mouseArea.initialValue = myControl.value mouseArea.initialValue = control.__parentControl.value
mouseArea.cursorShape = Qt.ClosedHandCursor mouseArea.cursorShape = Qt.ClosedHandCursor
mouseArea.dragStartX = mouse.x mouseArea.dragStartX = mouse.x
myControl.drag = true control.__parentControl.drag = true
myControl.dragStarted() control.__parentControl.dragStarted()
// Force focus on the non visible component to receive key events // Force focus on the non visible component to receive key events
dragModifierWorkaround.forceActiveFocus() dragModifierWorkaround.forceActiveFocus()
textInput.deselect() control.deselect()
} }
if (!mouseArea.dragging) if (!mouseArea.dragging)
@@ -152,11 +154,11 @@ TextInput {
mouseArea.translationX += translationX mouseArea.translationX += translationX
mouseArea.calcValue() mouseArea.calcValue()
myControl.valueModified() control.__parentControl.valueModified()
} }
onClicked: function(mouse) { onClicked: function(mouse) {
if (textInput.edit) if (control.edit)
mouse.accepted = false mouse.accepted = false
if (mouseArea.hasDragged) { if (mouseArea.hasDragged) {
@@ -164,12 +166,12 @@ TextInput {
return return
} }
textInput.forceActiveFocus() control.forceActiveFocus()
textInput.deselect() // QTBUG-75862 control.deselect() // QTBUG-75862
} }
onPressed: function(mouse) { onPressed: function(mouse) {
if (textInput.edit) if (control.edit)
mouse.accepted = false mouse.accepted = false
mouseArea.potentialDragStart = true mouseArea.potentialDragStart = true
@@ -177,7 +179,7 @@ TextInput {
} }
onReleased: function(mouse) { onReleased: function(mouse) {
if (textInput.edit) if (control.edit)
mouse.accepted = false mouse.accepted = false
mouseArea.endDrag() mouseArea.endDrag()
@@ -190,18 +192,18 @@ TextInput {
mouseArea.dragging = false mouseArea.dragging = false
mouseArea.hasDragged = true mouseArea.hasDragged = true
if (myControl.compressedValueTimer.running) { if (control.__parentControl.compressedValueTimer.running) {
myControl.compressedValueTimer.stop() control.__parentControl.compressedValueTimer.stop()
mouseArea.calcValue() mouseArea.calcValue()
myControl.compressedValueModified() control.__parentControl.compressedValueModified()
} }
mouseArea.cursorShape = Qt.PointingHandCursor mouseArea.cursorShape = Qt.PointingHandCursor
myControl.drag = false control.__parentControl.drag = false
myControl.dragEnded() control.__parentControl.dragEnded()
// Avoid active focus on the component after dragging // Avoid active focus on the component after dragging
dragModifierWorkaround.focus = false dragModifierWorkaround.focus = false
textInput.focus = false control.focus = false
myControl.focus = false control.__parentControl.focus = false
mouseArea.translationX = 0 mouseArea.translationX = 0
mouseArea.units = 0 mouseArea.units = 0
@@ -209,53 +211,55 @@ TextInput {
} }
function calcValue() { function calcValue() {
var minUnit = (myControl.from - mouseArea.initialValue) / mouseArea.stepSize var minUnit = (control.__parentControl.from - mouseArea.initialValue) / mouseArea.stepSize
var maxUnit = (myControl.to - mouseArea.initialValue) / mouseArea.stepSize var maxUnit = (control.__parentControl.to - mouseArea.initialValue) / mouseArea.stepSize
var units = Math.trunc(mouseArea.translationX / mouseArea.__pixelsPerUnit) var units = Math.trunc(mouseArea.translationX / mouseArea.__pixelsPerUnit)
mouseArea.units = Math.min(Math.max(mouseArea.totalUnits + units, minUnit), maxUnit) 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) if (mouseArea.dragging)
myControl.dragging() control.__parentControl.dragging()
} }
onWheel: function(wheel) { onWheel: function(wheel) {
if (!myControl.__wheelEnabled) { if (!control.__parentControl.__wheelEnabled) {
wheel.accepted = false wheel.accepted = false
return return
} }
// Set stepSize according to used modifier key // Set stepSize according to used modifier key
if (wheel.modifiers & Qt.ControlModifier) if (wheel.modifiers & Qt.ControlModifier)
mouseArea.stepSize = myControl.minStepSize mouseArea.stepSize = control.__parentControl.minStepSize
if (wheel.modifiers & Qt.ShiftModifier) if (wheel.modifiers & Qt.ShiftModifier)
mouseArea.stepSize = myControl.maxStepSize mouseArea.stepSize = control.__parentControl.maxStepSize
var val = myControl.valueFromText(textInput.text, myControl.locale) var val = control.__parentControl.valueFromText(control.text,
if (myControl.value !== val) control.__parentControl.locale)
myControl.value = val if (control.__parentControl.value !== val)
control.__parentControl.value = val
var currValue = myControl.value var currValue = control.__parentControl.value
myControl.value += (wheel.angleDelta.y / 120 * mouseArea.stepSize) control.__parentControl.value += (wheel.angleDelta.y / 120 * mouseArea.stepSize)
if (currValue !== myControl.value) if (currValue !== control.__parentControl.value)
myControl.valueModified() control.__parentControl.valueModified()
// Reset stepSize // Reset stepSize
mouseArea.stepSize = myControl.stepSize mouseArea.stepSize = control.__parentControl.stepSize
} }
} }
states: [ states: [
State { State {
name: "default" name: "default"
when: myControl.enabled && !textInput.edit && !textInput.hover && !myControl.hover when: control.__parentControl.enabled && !control.edit && !control.hover
&& !myControl.drag && !myControl.sliderDrag && !control.__parentControl.hover && !control.__parentControl.drag
&& !control.__parentControl.sliderDrag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
PropertyChanges { PropertyChanges {
target: mouseArea target: mouseArea
@@ -264,27 +268,28 @@ TextInput {
}, },
State { State {
name: "globalHover" name: "globalHover"
when: myControl.hover && !textInput.hover && !textInput.edit && !myControl.drag when: control.__parentControl.hover && !control.hover && !control.edit
&& !control.__parentControl.drag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
} }
}, },
State { State {
name: "hover" name: "hover"
when: textInput.hover && myControl.hover when: control.hover && control.__parentControl.hover
&& !textInput.edit && !myControl.drag && !control.edit && !control.__parentControl.drag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
} }
}, },
State { State {
name: "edit" name: "edit"
when: textInput.edit && !myControl.drag when: control.edit && !control.__parentControl.drag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
PropertyChanges { PropertyChanges {
target: mouseArea target: mouseArea
@@ -293,38 +298,38 @@ TextInput {
}, },
State { State {
name: "drag" name: "drag"
when: myControl.drag when: control.__parentControl.drag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
} }
PropertyChanges { PropertyChanges {
target: textInput target: control
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "sliderDrag" name: "sliderDrag"
when: myControl.sliderDrag when: control.__parentControl.sliderDrag
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
} }
PropertyChanges { PropertyChanges {
target: textInput target: control
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myControl.enabled when: !control.__parentControl.enabled
PropertyChanges { PropertyChanges {
target: textInputBackground target: textInputBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
} }
PropertyChanges { PropertyChanges {
target: textInput target: control
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
} }
} }
] ]

135
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Switch.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.Switch { T.Switch {
id: root id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property alias actionIndicator: actionIndicator property alias actionIndicator: actionIndicator
// This property is used to indicate the global hover state // 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 bool edit: false
property alias actionIndicatorVisible: actionIndicator.visible property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth property real __actionIndicatorWidth: control.style.actionIndicatorSize.width
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight property real __actionIndicatorHeight: control.style.actionIndicatorSize.height
property alias labelVisible: switchLabel.visible property alias labelVisible: label.visible
property alias labelColor: switchLabel.color property alias labelColor: label.color
property alias fontFamily: switchLabel.font.family property alias fontFamily: label.font.family
property alias fontPixelSize: switchLabel.font.pixelSize property alias fontPixelSize: label.font.pixelSize
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: StudioTheme.Values.myFontSize
@@ -32,15 +34,16 @@ T.Switch {
implicitContentHeight + topPadding + bottomPadding, implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding) implicitIndicatorHeight + topPadding + bottomPadding)
spacing: StudioTheme.Values.switchSpacing spacing: label.visible ? control.style.controlSpacing : 0
hoverEnabled: true hoverEnabled: true
activeFocusOnTab: false activeFocusOnTab: false
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: root style: control.style
width: actionIndicator.visible ? root.__actionIndicatorWidth : 0 __parentControl: control
height: actionIndicator.visible ? root.__actionIndicatorHeight : 0 width: actionIndicator.visible ? control.__actionIndicatorWidth : 0
height: actionIndicator.visible ? control.__actionIndicatorHeight : 0
} }
indicator: Rectangle { indicator: Rectangle {
@@ -48,12 +51,12 @@ T.Switch {
x: actionIndicator.width x: actionIndicator.width
y: 0 y: 0
z: 5 z: 5
implicitWidth: StudioTheme.Values.height * 2 implicitWidth: control.style.squareControlSize.width * 2
implicitHeight: StudioTheme.Values.height implicitHeight: control.style.squareControlSize.height
radius: StudioTheme.Values.height * 0.5 radius: control.style.squareControlSize.height * 0.5
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.width: StudioTheme.Values.border border.color: control.style.border.idle
border.color: StudioTheme.Values.themeControlOutline border.width: control.style.borderWidth
Rectangle { Rectangle {
id: switchIndicator id: switchIndicator
@@ -61,142 +64,142 @@ T.Switch {
readonly property real gap: 5 readonly property real gap: 5
property real size: switchBackground.implicitHeight - switchIndicator.gap * 2 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 : switchIndicator.gap
y: switchIndicator.gap y: switchIndicator.gap
width: switchIndicator.size width: switchIndicator.size
height: switchIndicator.size height: switchIndicator.size
radius: switchIndicator.size * 0.5 radius: switchIndicator.size * 0.5
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
border.width: 0 border.width: 0
} }
} }
contentItem: T.Label { contentItem: T.Label {
id: switchLabel id: label
leftPadding: switchBackground.x + switchBackground.width + root.spacing leftPadding: switchBackground.x + switchBackground.width + control.spacing
rightPadding: 0 rightPadding: 0
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
text: root.text text: control.text
font: root.font font: control.font
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
visible: text !== "" visible: control.text !== ""
} }
property bool __default: root.enabled && !root.hover && !actionIndicator.hover && !root.pressed property bool __default: control.enabled && !control.hover && !actionIndicator.hover && !control.pressed
property bool __globalHover: root.enabled && actionIndicator.hover && !root.pressed property bool __globalHover: control.enabled && actionIndicator.hover && !control.pressed
property bool __hover: root.hover && !actionIndicator.hover && !root.pressed property bool __hover: control.hover && !actionIndicator.hover && !control.pressed
property bool __press: root.hover && root.pressed property bool __press: control.hover && control.pressed
states: [ states: [
State { State {
name: "default" name: "default"
when: root.__default && !root.checked when: control.__default && !control.checked
PropertyChanges { PropertyChanges {
target: switchBackground target: switchBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: switchIndicator target: switchIndicator
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: root.__globalHover && !root.checked when: control.__globalHover && !control.checked
PropertyChanges { PropertyChanges {
target: switchBackground target: switchBackground
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: switchIndicator target: switchIndicator
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
} }
}, },
State { State {
name: "hover" name: "hover"
when: root.__hover && !root.checked when: control.__hover && !control.checked
PropertyChanges { PropertyChanges {
target: switchBackground target: switchBackground
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: switchIndicator target: switchIndicator
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
} }
}, },
State { State {
name: "press" name: "press"
when: root.__press && !root.checked when: control.__press && !control.checked
PropertyChanges { PropertyChanges {
target: switchBackground target: switchBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
PropertyChanges { PropertyChanges {
target: switchIndicator target: switchIndicator
color: StudioTheme.Values.themeInteraction color: control.style.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !root.enabled && !root.checked when: !control.enabled && !control.checked
PropertyChanges { PropertyChanges {
target: switchBackground target: switchBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
PropertyChanges { PropertyChanges {
target: switchIndicator target: switchIndicator
color: StudioTheme.Values.themeTextColorDisabled color: control.style.icon.disabled
} }
PropertyChanges { PropertyChanges {
target: switchLabel target: label
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
} }
}, },
State { State {
name: "defaultChecked" name: "defaultChecked"
when: root.__default && root.checked when: control.__default && control.checked
extend: "default" extend: "default"
PropertyChanges { PropertyChanges {
target: switchBackground target: switchBackground
color: StudioTheme.Values.themeInteraction color: control.style.interaction
border.color: StudioTheme.Values.themeInteraction border.color: control.style.interaction
} }
}, },
State { State {
name: "globalHoverChecked" name: "globalHoverChecked"
when: root.__globalHover && root.checked when: control.__globalHover && control.checked
extend: "globalHover" extend: "globalHover"
PropertyChanges { PropertyChanges {
target: switchBackground target: switchBackground
color: StudioTheme.Values.themeInteractionHover color: control.style.interactionHover
border.color: StudioTheme.Values.themeInteractionHover border.color: control.style.interactionHover
} }
}, },
State { State {
name: "hoverChecked" name: "hoverChecked"
when: root.__hover && root.checked when: control.__hover && control.checked
extend: "hover" extend: "hover"
PropertyChanges { PropertyChanges {
target: switchBackground target: switchBackground
color: StudioTheme.Values.themeInteractionHover color: control.style.interactionHover
border.color: StudioTheme.Values.themeInteractionHover border.color: control.style.interactionHover
} }
}, },
State { State {
name: "pressChecked" name: "pressChecked"
when: root.__press && root.checked when: control.__press && control.checked
extend: "press" extend: "press"
}, },
State { State {
name: "disableChecked" name: "disableChecked"
when: !root.enabled && root.checked when: !control.enabled && control.checked
extend: "disable" extend: "disable"
} }
] ]

18
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.TabBar { T.TabBar {
id: myButton id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
@@ -15,9 +17,9 @@ T.TabBar {
spacing: 0 spacing: 0
contentItem: ListView { contentItem: ListView {
model: myButton.contentModel model: control.contentModel
currentIndex: myButton.currentIndex currentIndex: control.currentIndex
spacing: myButton.spacing spacing: control.spacing
orientation: ListView.Horizontal orientation: ListView.Horizontal
boundsBehavior: Flickable.StopAtBounds boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded flickableDirection: Flickable.AutoFlickIfNeeded
@@ -25,6 +27,6 @@ T.TabBar {
} }
background: Rectangle { background: Rectangle {
color: StudioTheme.Values.themePanelBackground color: control.style.panel.background
} }
} }

27
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.TabButton { T.TabButton {
id: myButton id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
@@ -17,24 +19,19 @@ T.TabButton {
background: Rectangle { background: Rectangle {
id: buttonBackground id: buttonBackground
color: myButton.checked ? StudioTheme.Values.themeInteraction color: control.checked ? control.style.interaction : "transparent"
: "transparent" border.width: control.style.borderWidth
border.width: StudioTheme.Values.border border.color: control.style.interaction
border.color: StudioTheme.Values.themeInteraction
} }
contentItem: T.Label { contentItem: T.Label {
id: buttonIcon id: buttonIcon
color: myButton.checked ? StudioTheme.Values.themeControlBackground color: control.checked ? control.style.background.idle : control.style.interaction
: StudioTheme.Values.themeInteraction font.pixelSize: control.style.baseFontSize
//font.weight: Font.Bold
//font.family: StudioTheme.Constants.font.family
font.pixelSize: StudioTheme.Values.myFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
anchors.fill: parent anchors.fill: parent
renderType: Text.QtRendering renderType: Text.QtRendering
text: control.text
text: myButton.text
} }
} }

83
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
TextField { TextField {
id: myTextField id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property real relativePopupX: 0 // TODO Maybe call it leftPadding property real relativePopupX: 0 // TODO Maybe call it leftPadding
property real popupWidth: myTextField.width property real popupWidth: control.width
property string txtStorage property string txtStorage
property int temp: 0 property int temp: 0
T.Popup { T.Popup {
id: popup id: popup
x: myTextField.relativePopupX x: control.relativePopupX
y: myTextField.height - StudioTheme.Values.border y: control.height - control.style.borderWidth
width: myTextField.popupWidth width: control.popupWidth
height: scrollView.height height: scrollView.height
background: Rectangle { background: Rectangle {
color: StudioTheme.Values.themePopupBackground color: control.style.popup.background
border.color: StudioTheme.Values.themeInteraction border.color: control.style.interaction
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
} }
contentItem: ScrollView { contentItem: ScrollView {
id: scrollView id: scrollView
style: control.style
padding: 0 padding: 0
height: Math.min(textAreaPopup.contentHeight + scrollView.topPadding height: Math.min(textAreaPopup.contentHeight + scrollView.topPadding
+ scrollView.bottomPadding, + scrollView.bottomPadding,
StudioTheme.Values.maxTextAreaPopupHeight) control.style.maxTextAreaPopupHeight)
ScrollBar.horizontal.policy: ScrollBar.AlwaysOn ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.vertical.policy: ScrollBar.AlwaysOn
@@ -41,10 +44,10 @@ TextField {
width: textAreaPopup.contentWidth + textAreaPopup.leftPadding width: textAreaPopup.contentWidth + textAreaPopup.leftPadding
+ textAreaPopup.rightPadding + textAreaPopup.rightPadding
anchors.fill: parent anchors.fill: parent
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseFontSize
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
selectionColor: StudioTheme.Values.themeTextSelectionColor selectionColor: control.style.text.selection
selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor selectedTextColor: control.style.text.selectedText
selectByMouse: true selectByMouse: true
persistentSelection: textAreaPopup.focus persistentSelection: textAreaPopup.focus
@@ -61,56 +64,60 @@ TextField {
ContextMenu { ContextMenu {
id: contextMenu id: contextMenu
myTextEdit: textAreaPopup style: control.style
__parentControl: textAreaPopup
} }
AbstractButton { AbstractButton {
id: acceptButton id: acceptButton
style: control.style
x: popup.width - acceptButton.width x: popup.width - acceptButton.width
y: popup.height - StudioTheme.Values.border y: popup.height - control.style.borderWidth
width: Math.round(StudioTheme.Values.smallRectWidth) width: Math.round(control.style.smallControlSize.width)
height: Math.round(StudioTheme.Values.smallRectWidth) height: Math.round(control.style.smallControlSize.height)
buttonIcon: StudioTheme.Constants.tickIcon buttonIcon: StudioTheme.Constants.tickIcon
} }
AbstractButton { AbstractButton {
id: discardButton id: discardButton
x: popup.width - acceptButton.width - discardButton.width + StudioTheme.Values.border style: control.style
y: popup.height - StudioTheme.Values.border x: popup.width - acceptButton.width - discardButton.width + control.style.borderWidth
width: Math.round(StudioTheme.Values.smallRectWidth) y: popup.height - control.style.borderWidth
height: Math.round(StudioTheme.Values.smallRectWidth) width: Math.round(control.style.smallControlSize.width)
height: Math.round(control.style.smallControlSize.height)
buttonIcon: StudioTheme.Constants.closeCross buttonIcon: StudioTheme.Constants.closeCross
} }
Component.onCompleted: { Component.onCompleted: control.storeAndFormatTextInput(control.text)
storeAndFormatTextInput(myTextField.text)
}
onOpened: { onOpened: {
textAreaPopup.text = txtStorage textAreaPopup.text = control.txtStorage
myTextField.clear() control.clear()
} }
onClosed: { onClosed: {
storeAndFormatTextInput(textAreaPopup.text) control.storeAndFormatTextInput(textAreaPopup.text)
myTextField.forceActiveFocus() control.forceActiveFocus()
textAreaPopup.deselect() textAreaPopup.deselect()
} }
} }
function storeAndFormatTextInput(inputText) { function storeAndFormatTextInput(inputText) {
txtStorage = inputText control.txtStorage = inputText
var pos = txtStorage.search(/\n/g) var pos = control.txtStorage.search(/\n/g)
var sliceAt = Math.min(pos, 15) 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) { Keys.onPressed: function(event) {
if (event.key === Qt.Key_Escape) if (event.key === Qt.Key_Escape) {
popup.opened ? popup.close() : myTextField.focus = false if (popup.opened)
popup.close()
else
control.focus = false
}
if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && !popup.opened) {
&& !popup.opened) {
popup.open() popup.open()
textAreaPopup.forceActiveFocus() textAreaPopup.forceActiveFocus()
} }

180
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
T.TextField { T.TextField {
id: root id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
// This property is used to indicate the global hover state // This property is used to indicate the global hover state
property bool hover: (actionIndicator.hover || mouseArea.containsMouse || indicator.hover property bool hover: (actionIndicator.hover || mouseArea.containsMouse || indicator.hover
|| translationIndicator.hover) && root.enabled || translationIndicator.hover) && control.enabled
property bool edit: root.activeFocus property bool edit: control.activeFocus
property alias actionIndicator: actionIndicator property alias actionIndicator: actionIndicator
property alias actionIndicatorVisible: actionIndicator.visible property alias actionIndicatorVisible: actionIndicator.visible
property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth property real __actionIndicatorWidth: control.style.actionIndicatorSize.width
property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight property real __actionIndicatorHeight: control.style.actionIndicatorSize.height
property alias translationIndicator: translationIndicator property alias translationIndicator: translationIndicator
property alias translationIndicatorVisible: translationIndicator.visible property alias translationIndicatorVisible: translationIndicator.visible
property real __translationIndicatorWidth: StudioTheme.Values.translationIndicatorWidth property real __translationIndicatorWidth: control.style.squareControlSize.width
property real __translationIndicatorHeight: StudioTheme.Values.translationIndicatorHeight property real __translationIndicatorHeight: control.style.squareControlSize.height
property alias indicator: indicator property alias indicator: indicator
property alias indicatorVisible: indicator.visible property alias indicatorVisible: indicator.visible
@@ -35,24 +37,24 @@ T.TextField {
horizontalAlignment: Qt.AlignLeft horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter verticalAlignment: Qt.AlignVCenter
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseFontSize
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
selectionColor: StudioTheme.Values.themeTextSelectionColor selectionColor: control.style.text.selection
selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor selectedTextColor: control.style.text.selectedText
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor placeholderTextColor: control.style.text.placeholder
readOnly: false readOnly: false
selectByMouse: true selectByMouse: true
persistentSelection: contextMenu.visible || root.focus persistentSelection: contextMenu.visible || control.focus
clip: true clip: true
width: StudioTheme.Values.defaultControlWidth width: control.style.controlSize.width
height: StudioTheme.Values.defaultControlHeight height: control.style.controlSize.height
implicitHeight: StudioTheme.Values.defaultControlHeight implicitHeight: control.style.controlSize.height
leftPadding: StudioTheme.Values.inputHorizontalPadding + actionIndicator.width leftPadding: control.style.inputHorizontalPadding + actionIndicator.width
rightPadding: StudioTheme.Values.inputHorizontalPadding + translationIndicator.width + indicator.width rightPadding: control.style.inputHorizontalPadding + translationIndicator.width + indicator.width
MouseArea { MouseArea {
id: mouseArea id: mouseArea
@@ -66,80 +68,84 @@ T.TextField {
onPressed: function(event) { onPressed: function(event) {
if (event.button === Qt.RightButton) if (event.button === Qt.RightButton)
contextMenu.popup(root) contextMenu.popup(control)
} }
ContextMenu { ContextMenu {
id: contextMenu id: contextMenu
myTextEdit: root style: control.style
__parentControl: control
onClosed: root.forceActiveFocus() onClosed: control.forceActiveFocus()
onAboutToShow: root.contextMenuAboutToShow = true onAboutToShow: control.contextMenuAboutToShow = true
onAboutToHide: root.contextMenuAboutToShow = false onAboutToHide: control.contextMenuAboutToShow = false
} }
onActiveFocusChanged: { onActiveFocusChanged: {
// OtherFocusReason in this case means, if the TextField gets focus after the context menu // OtherFocusReason in this case means, if the TextField gets focus after the context menu
// was closed due to an menu item click. // was closed due to an menu item click.
if (root.activeFocus && root.focusReason !== Qt.OtherFocusReason) if (control.activeFocus && control.focusReason !== Qt.OtherFocusReason)
root.preFocusText = root.text control.preFocusText = control.text
} }
onEditChanged: { onEditChanged: {
if (root.edit) if (control.edit)
contextMenu.close() contextMenu.close()
} }
onEditingFinished: root.focus = false onEditingFinished: control.focus = false
ActionIndicator { ActionIndicator {
id: actionIndicator id: actionIndicator
myControl: root style: control.style
__parentControl: control
x: 0 x: 0
y: 0 y: 0
width: actionIndicator.visible ? root.__actionIndicatorWidth : 0 width: actionIndicator.visible ? control.__actionIndicatorWidth : 0
height: actionIndicator.visible ? root.__actionIndicatorHeight : 0 height: actionIndicator.visible ? control.__actionIndicatorHeight : 0
} }
Text { Text {
id: placeholder id: placeholder
x: root.leftPadding x: control.leftPadding
y: root.topPadding y: control.topPadding
width: root.width - (root.leftPadding + root.rightPadding) width: control.width - (control.leftPadding + control.rightPadding)
height: root.height - (root.topPadding + root.bottomPadding) height: control.height - (control.topPadding + control.bottomPadding)
text: root.placeholderText text: control.placeholderText
font: root.font font: control.font
color: root.placeholderTextColor color: control.placeholderTextColor
verticalAlignment: root.verticalAlignment verticalAlignment: control.verticalAlignment
visible: !root.length && !root.preeditText visible: !control.length && !control.preeditText
&& (!root.activeFocus || root.horizontalAlignment !== Qt.AlignHCenter) && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
elide: Text.ElideRight elide: Text.ElideRight
renderType: root.renderType renderType: control.renderType
} }
background: Rectangle { background: Rectangle {
id: textFieldBackground id: textFieldBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
x: actionIndicator.width x: actionIndicator.width
width: root.width - actionIndicator.width width: control.width - actionIndicator.width
height: root.height height: control.height
} }
Indicator { Indicator {
id: indicator id: indicator
style: control.style
visible: false visible: false
x: root.width - translationIndicator.width - indicator.width x: control.width - translationIndicator.width - indicator.width
width: indicator.visible ? root.height : 0 width: indicator.visible ? control.height : 0
height: indicator.visible ? root.height : 0 height: indicator.visible ? control.height : 0
} }
TranslationIndicator { TranslationIndicator {
id: translationIndicator id: translationIndicator
myControl: root style: control.style
x: root.width - translationIndicator.width __parentControl: control
x: control.width - translationIndicator.width
width: translationIndicator.visible ? __translationIndicatorWidth : 0 width: translationIndicator.visible ? __translationIndicatorWidth : 0
height: translationIndicator.visible ? __translationIndicatorHeight : 0 height: translationIndicator.visible ? __translationIndicatorHeight : 0
} }
@@ -147,16 +153,16 @@ T.TextField {
states: [ states: [
State { State {
name: "default" name: "default"
when: root.enabled && !root.hover && !root.edit && !contextMenu.visible when: control.enabled && !control.hover && !control.edit && !contextMenu.visible
PropertyChanges { PropertyChanges {
target: textFieldBackground target: textFieldBackground
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: root target: control
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor placeholderTextColor: control.style.text.placeholder
} }
PropertyChanges { PropertyChanges {
target: mouseArea target: mouseArea
@@ -166,45 +172,45 @@ T.TextField {
State { State {
name: "globalHover" name: "globalHover"
when: (actionIndicator.hover || translationIndicator.hover || indicator.hover) when: (actionIndicator.hover || translationIndicator.hover || indicator.hover)
&& !root.edit && root.enabled && !contextMenu.visible && !control.edit && control.enabled && !contextMenu.visible
PropertyChanges { PropertyChanges {
target: textFieldBackground target: textFieldBackground
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: root target: control
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor placeholderTextColor: control.style.text.placeholder
} }
}, },
State { State {
name: "hover" name: "hover"
when: mouseArea.containsMouse && !actionIndicator.hover && !translationIndicator.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 { PropertyChanges {
target: textFieldBackground target: textFieldBackground
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
PropertyChanges { PropertyChanges {
target: root target: control
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor placeholderTextColor: control.style.text.placeholder
} }
}, },
State { State {
name: "edit" name: "edit"
when: root.edit || contextMenu.visible when: control.edit || contextMenu.visible
PropertyChanges { PropertyChanges {
target: textFieldBackground target: textFieldBackground
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
PropertyChanges { PropertyChanges {
target: root target: control
color: StudioTheme.Values.themeTextColor color: control.style.text.idle
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColorInteraction placeholderTextColor: control.style.text.placeholder
} }
PropertyChanges { PropertyChanges {
target: mouseArea target: mouseArea
@@ -213,24 +219,24 @@ T.TextField {
}, },
State { State {
name: "disable" name: "disable"
when: !root.enabled when: !control.enabled
PropertyChanges { PropertyChanges {
target: textFieldBackground target: textFieldBackground
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
PropertyChanges { PropertyChanges {
target: root target: control
color: StudioTheme.Values.themeTextColorDisabled color: control.style.text.disabled
placeholderTextColor: StudioTheme.Values.themeTextColorDisabled placeholderTextColor: control.style.text.disabled
} }
} }
] ]
Keys.onEscapePressed: function(event) { Keys.onEscapePressed: function(event) {
event.accepted = true event.accepted = true
root.text = root.preFocusText control.text = control.preFocusText
root.rejected() control.rejected()
root.focus = false control.focus = false
} }
} }

45
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ToolTip.qml
View File

@@ -1,27 +1,5 @@
/**************************************************************************** // Copyright (C) 2023 The Qt Company Ltd.
** // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
** 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.
**
****************************************************************************/
import QtQuick import QtQuick
import QtQuick.Templates as T import QtQuick.Templates as T
@@ -30,8 +8,10 @@ import StudioTheme 1.0 as StudioTheme
T.ToolTip { T.ToolTip {
id: control id: control
x: parent ? (parent.width - implicitWidth) / 2 : 0 property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
y: -implicitHeight - 3
x: parent ? (parent.width - control.implicitWidth) / 2 : 0
y: -control.implicitHeight - 3
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding) contentWidth + leftPadding + rightPadding)
@@ -42,19 +22,20 @@ T.ToolTip {
padding: 4 padding: 4
delay: 1000 delay: 1000
timeout: 5000 timeout: 5000
closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent
| T.Popup.CloseOnReleaseOutsideParent
contentItem: Text { contentItem: Text {
text: control.text text: control.text
wrapMode: Text.Wrap wrapMode: Text.Wrap
font.pixelSize: StudioTheme.Values.myFontSize font.pixelSize: control.style.baseFontSize
color: StudioTheme.Values.themeToolTipText color: control.style.toolTip.text
} }
background: Rectangle { background: Rectangle {
color: StudioTheme.Values.themeToolTipBackground color: control.style.toolTip.background
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
border.color: StudioTheme.Values.themeToolTipOutline border.color: control.style.toolTip.border
} }
} }

111
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Templates 2.15 as T import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
Item { Item {
id: translationIndicator id: control
property Item myControl property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property bool hover: translationIndicatorMouseArea.containsMouse && translationIndicator.enabled property Item __parentControl
property bool pressed: translationIndicatorMouseArea.pressed
property bool hover: mouseArea.containsMouse && control.enabled
property bool pressed: mouseArea.pressed
property bool checked: false property bool checked: false
signal clicked signal clicked
Rectangle { Rectangle {
id: translationIndicatorBackground id: background
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
border.width: StudioTheme.Values.border border.width: control.style.borderWidth
anchors.centerIn: parent anchors.centerIn: parent
width: matchParity(translationIndicator.height, StudioTheme.Values.smallRectWidth) width: background.matchParity(control.height, control.style.smallControlSize.width)
height: matchParity(translationIndicator.height, StudioTheme.Values.smallRectWidth) height: background.matchParity(control.height, control.style.smallControlSize.height)
function matchParity(root, value) { function matchParity(root, value) {
var v = Math.round(value) var v = Math.round(value)
@@ -37,23 +39,23 @@ Item {
} }
MouseArea { MouseArea {
id: translationIndicatorMouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onPressed: function(mouse) { mouse.accepted = true } onPressed: function(mouse) { mouse.accepted = true }
onClicked: { onClicked: {
translationIndicator.checked = !translationIndicator.checked control.checked = !control.checked
translationIndicator.clicked() control.clicked()
} }
} }
} }
T.Label { T.Label {
id: translationIndicatorIcon id: icon
text: "tr" text: "tr"
color: StudioTheme.Values.themeTextColor color: control.style.icon.idle
font.family: StudioTheme.Constants.font.family font.family: StudioTheme.Constants.font.family
font.pixelSize: StudioTheme.Values.myIconFontSize font.pixelSize: control.style.baseIconFontSize
font.italic: true font.italic: true
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@@ -62,36 +64,35 @@ Item {
states: [ states: [
State { State {
name: "default" name: "default"
when: translationIndicator.enabled && !translationIndicator.pressed when: control.enabled && !control.pressed && !control.checked
&& !translationIndicator.checked
PropertyChanges { PropertyChanges {
target: translationIndicatorIcon target: icon
color: StudioTheme.Values.themeIconColor color: control.style.icon.idle
} }
}, },
State { State {
name: "press" name: "press"
when: translationIndicator.enabled && translationIndicator.pressed when: control.enabled && control.pressed
PropertyChanges { PropertyChanges {
target: translationIndicatorIcon target: icon
color: StudioTheme.Values.themeIconColorInteraction color: control.style.icon.interaction
} }
}, },
State { State {
name: "check" name: "check"
when: translationIndicator.enabled && !translationIndicator.pressed when: control.enabled && !control.pressed
&& translationIndicator.checked && control.checked
PropertyChanges { PropertyChanges {
target: translationIndicatorIcon target: icon
color: StudioTheme.Values.themeIconColorSelected color: control.style.icon.selected
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myControl.enabled when: !control.__parentControl.enabled
PropertyChanges { PropertyChanges {
target: translationIndicatorIcon target: icon
color: StudioTheme.Values.themeTextColorDisabled color: control.style.icon.disabled
} }
} }
] ]
@@ -100,49 +101,49 @@ Item {
states: [ states: [
State { State {
name: "default" name: "default"
when: myControl.enabled && !translationIndicator.hover when: control.__parentControl.enabled && !control.hover && !control.pressed
&& !translationIndicator.pressed && !myControl.hover && !control.__parentControl.hover && !control.__parentControl.edit
&& !myControl.edit && !translationIndicator.checked && !control.checked
PropertyChanges { PropertyChanges {
target: translationIndicatorBackground target: background
color: StudioTheme.Values.themeControlBackground color: control.style.background.idle
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
}, },
State { State {
name: "globalHover" name: "globalHover"
when: myControl.hover && !translationIndicator.hover when: control.__parentControl.hover && !control.hover
PropertyChanges { PropertyChanges {
target: translationIndicatorBackground target: background
color: StudioTheme.Values.themeControlBackgroundGlobalHover color: control.style.background.globalHover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
}, },
State { State {
name: "hover" name: "hover"
when: translationIndicator.hover && !translationIndicator.pressed when: control.hover && !control.pressed
PropertyChanges { PropertyChanges {
target: translationIndicatorBackground target: background
color: StudioTheme.Values.themeControlBackgroundHover color: control.style.background.hover
border.color: StudioTheme.Values.themeControlOutline border.color: control.style.border.idle
} }
}, },
State { State {
name: "press" name: "press"
when: translationIndicator.hover && translationIndicator.pressed when: control.hover && control.pressed
PropertyChanges { PropertyChanges {
target: translationIndicatorBackground target: background
color: StudioTheme.Values.themeControlBackgroundInteraction color: control.style.background.interaction
border.color: StudioTheme.Values.themeControlOutlineInteraction border.color: control.style.border.interaction
} }
}, },
State { State {
name: "disable" name: "disable"
when: !myControl.enabled when: !control.__parentControl.enabled
PropertyChanges { PropertyChanges {
target: translationIndicatorBackground target: background
color: StudioTheme.Values.themeControlBackgroundDisabled color: control.style.background.disabled
border.color: StudioTheme.Values.themeControlOutlineDisabled border.color: control.style.border.disabled
} }
} }
] ]

30
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/VerticalScrollBar.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
import QtQuick.Controls 2.15 //import QtQuick.Controls
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
ScrollBar { ScrollBar {
id: scrollBar id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding) implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding) 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 orientation: Qt.Vertical
policy: scrollBar.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff policy: control.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
height: parent.availableHeight height: parent.availableHeight
- (parent.bothVisible ? parent.horizontalThickness : 0) - (parent.bothVisible ? parent.horizontalThickness : 0)
padding: scrollBar.active ? StudioTheme.Values.scrollBarActivePadding padding: control.active ? control.style.scrollBarActivePadding
: StudioTheme.Values.scrollBarInactivePadding : control.style.scrollBarInactivePadding
background: Rectangle { background: Rectangle {
implicitWidth: StudioTheme.Values.scrollBarThickness implicitWidth: control.style.scrollBarThickness
implicitHeight: StudioTheme.Values.scrollBarThickness implicitHeight: control.style.scrollBarThickness
color: StudioTheme.Values.themeScrollBarTrack color: control.style.scrollBar.track
} }
contentItem: Rectangle { contentItem: Rectangle {
implicitWidth: StudioTheme.Values.scrollBarThickness - 2 * scrollBar.padding implicitWidth: control.style.scrollBarThickness - 2 * control.padding
implicitHeight: StudioTheme.Values.scrollBarThickness - 2 * scrollBar.padding implicitHeight: control.style.scrollBarThickness - 2 * control.padding
color: StudioTheme.Values.themeScrollBarHandle color: control.style.scrollBar.handle
} }
} }

4
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Constants.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
pragma Singleton pragma Singleton
import QtQuick 2.10 import QtQuick
InternalConstants {} InternalConstants {}

187
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ControlStyle.qml Normal file
View File

@@ -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 {}
}

6
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/DefaultStyle.qml Normal file
View File

@@ -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 {}

4
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick 2.15 import QtQuick
QtObject { QtObject {
readonly property int width: 1920 readonly property int width: 1920

10
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ToolbarStyle.qml Normal file
View File

@@ -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"
}
}

203
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
View File

@@ -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 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
pragma Singleton pragma Singleton
import QtQuick 2.15 import QtQuick
import QtQuickDesignerTheme 1.0 import QtQuickDesignerTheme 1.0
QtObject { QtObject {
id: values id: values
property real baseHeight: 29 property real baseHeight: 29
property real smallFont: 8
property real baseFont: 12 property real baseFont: 12
property real mediumFont: 14 property real mediumFont: 14
property real bigFont: 16 property real bigFont: 16
property real smallIconFont: 8
property real baseIconFont: 12 property real baseIconFont: 12
property real mediumIconFont: 18 property real mediumIconFont: 18
property real bigIconFont: 26 property real bigIconFont: 26
@@ -19,21 +23,27 @@ QtObject {
property real scaleFactor: 1.0 property real scaleFactor: 1.0
property real height: Math.round(values.baseHeight * values.scaleFactor) 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 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 mediumFontSize: Math.round(values.mediumFont * values.scaleFactor)
property real bigFontSize: Math.round(values.bigFont * 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 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 mediumIconFontSize: Math.round(values.mediumIconFont * values.scaleFactor)
property real bigIconFontSize: Math.round(values.bigIconFont * values.scaleFactor) property real bigIconFontSize: Math.round(values.bigIconFont * values.scaleFactor)
property real squareComponentWidth: values.height 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 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 sliderControlSize: 12
property real sliderControlSizeMulti: values.sliderControlSize * values.scaleFactor property real sliderControlSizeMulti: values.sliderControlSize * values.scaleFactor
@@ -43,8 +53,8 @@ QtObject {
property real spinControlIconSizeMulti: values.spinControlIconSize * values.scaleFactor property real spinControlIconSizeMulti: values.spinControlIconSize * values.scaleFactor
property real sliderTrackHeight: values.height / 3 property real sliderTrackHeight: values.height / 3
property real sliderHandleHeight: values.sliderTrackHeight * 1.8
property real sliderHandleWidth: values.sliderTrackHeight * 0.5 property real sliderHandleWidth: values.sliderTrackHeight * 0.5
property real sliderHandleHeight: values.sliderTrackHeight * 1.8
property real sliderFontSize: Math.round(8 * values.scaleFactor) property real sliderFontSize: Math.round(8 * values.scaleFactor)
property real sliderPadding: Math.round(6 * values.scaleFactor) property real sliderPadding: Math.round(6 * values.scaleFactor)
property real sliderMargin: Math.round(3 * 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 checkBoxSpacing: Math.round(6 * values.scaleFactor)
property real radioButtonSpacing: values.checkBoxSpacing property real radioButtonSpacing: values.checkBoxSpacing
property real radioButtonWidth: values.height //property real radioButtonWidth: values.height
property real radioButtonHeight: values.height //property real radioButtonHeight: values.height
property real radioButtonIndicatorWidth: 14 property real radioButtonIndicatorWidth: Math.round(14 * values.scaleFactor)
property real radioButtonIndicatorHeight: 14 property real radioButtonIndicatorHeight: Math.round(14 * values.scaleFactor)
property real switchSpacing: values.checkBoxSpacing property real switchSpacing: values.checkBoxSpacing
@@ -145,7 +155,7 @@ QtObject {
property real controlColumnWithoutControlsWidth: 2 * (values.actionIndicatorWidth property real controlColumnWithoutControlsWidth: 2 * (values.actionIndicatorWidth
+ values.twoControlColumnGap) + values.twoControlColumnGap)
+ values.linkControlWidth + values.linkControlWidth // there could be an issue here with the new style
property real controlColumnWidth: values.controlColumnWithoutControlsWidth property real controlColumnWidth: values.controlColumnWithoutControlsWidth
+ 2 * values.twoControlColumnWidth + 2 * values.twoControlColumnWidth
@@ -207,134 +217,137 @@ QtObject {
// Theme Colors // 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 color themeGreenLight: Theme.color(Theme.DSgreenLight)
property string themeAmberLight: Theme.color(Theme.DSamberLight) property color themeAmberLight: Theme.color(Theme.DSamberLight)
property string themeRedLight: Theme.color(Theme.DSredLight) property color themeRedLight: Theme.color(Theme.DSredLight)
property string themeInteraction: Theme.color(Theme.DSinteraction) property color themeInteraction: Theme.color(Theme.DSinteraction)
property string themeError: Theme.color(Theme.DSerrorColor) property color themeError: Theme.color(Theme.DSerrorColor)
property string themeWarning: Theme.color(Theme.DSwarningColor) property color themeWarning: Theme.color(Theme.DSwarningColor)
property string themeDisabled: Theme.color(Theme.DSdisabledColor) 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 // Control colors
property color themeControlBackground: Theme.color(Theme.DScontrolBackground) property color themeControlBackground: Theme.color(Theme.DScontrolBackground)
property string themeControlBackgroundInteraction: Theme.color(Theme.DScontrolBackgroundInteraction) property color themeControlBackgroundInteraction: Theme.color(Theme.DScontrolBackgroundInteraction)
property string themeControlBackgroundDisabled: Theme.color(Theme.DScontrolBackgroundDisabled) property color themeControlBackgroundDisabled: Theme.color(Theme.DScontrolBackgroundDisabled)
property string themeControlBackgroundGlobalHover: Theme.color(Theme.DScontrolBackgroundGlobalHover) property color themeControlBackgroundGlobalHover: Theme.color(Theme.DScontrolBackgroundGlobalHover)
property string themeControlBackgroundHover: Theme.color(Theme.DScontrolBackgroundHover) property color themeControlBackgroundHover: Theme.color(Theme.DScontrolBackgroundHover)
property string themeControlOutline: Theme.color(Theme.DScontrolOutline) property color themeControlOutline: Theme.color(Theme.DScontrolOutline)
property string themeControlOutlineInteraction: Theme.color(Theme.DScontrolOutlineInteraction) property color themeControlOutlineInteraction: Theme.color(Theme.DScontrolOutlineInteraction)
property string themeControlOutlineDisabled: Theme.color(Theme.DScontrolOutlineDisabled) property color themeControlOutlineDisabled: Theme.color(Theme.DScontrolOutlineDisabled)
// Panels & Panes // Panels & Panes
property string themeBackgroundColorNormal: Theme.color(Theme.DSBackgroundColorNormal) property color themeBackgroundColorNormal: Theme.color(Theme.DSBackgroundColorNormal)
property string themeBackgroundColorAlternate: Theme.color(Theme.DSBackgroundColorAlternate) property color themeBackgroundColorAlternate: Theme.color(Theme.DSBackgroundColorAlternate)
// Text colors // Text colors
property color themeTextColor: Theme.color(Theme.DStextColor) property color themeTextColor: Theme.color(Theme.DStextColor)
property string themeTextColorDisabled: Theme.color(Theme.DStextColorDisabled) property color themeTextColorDisabled: Theme.color(Theme.DStextColorDisabled)
property string themeTextSelectionColor: Theme.color(Theme.DStextSelectionColor) property color themeTextSelectionColor: Theme.color(Theme.DStextSelectionColor)
property string themeTextSelectedTextColor: Theme.color(Theme.DStextSelectedTextColor) property color themeTextSelectedTextColor: Theme.color(Theme.DStextSelectedTextColor)
property string themeTextColorDisabledMCU: Theme.color(Theme.DStextColorDisabled) property color themeTextColorDisabledMCU: Theme.color(Theme.DStextColorDisabled)
property string themePlaceholderTextColor: Theme.color(Theme.DSplaceholderTextColor) property color themePlaceholderTextColor: Theme.color(Theme.DSplaceholderTextColor)
property string themePlaceholderTextColorInteraction: Theme.color(Theme.DSplaceholderTextColorInteraction) property color themePlaceholderTextColorInteraction: Theme.color(Theme.DSplaceholderTextColorInteraction)
// Icon colors // Icon colors
property string themeIconColor: Theme.color(Theme.DSiconColor) property color themeIconColor: Theme.color(Theme.DSiconColor)
property string themeIconColorHover: Theme.color(Theme.DSiconColorHover) property color themeIconColorHover: Theme.color(Theme.DSiconColorHover)
property string themeIconColorInteraction: Theme.color(Theme.DSiconColorInteraction) property color themeIconColorInteraction: Theme.color(Theme.DSiconColorInteraction)
property string themeIconColorDisabled: Theme.color(Theme.DSiconColorDisabled) property color themeIconColorDisabled: Theme.color(Theme.DSiconColorDisabled)
property string themeIconColorSelected: Theme.color(Theme.DSiconColorSelected) property color themeIconColorSelected: Theme.color(Theme.DSiconColorSelected)
property string themeLinkIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor) property color themeLinkIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor)
property string themeLinkIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover) property color themeLinkIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover)
property string themeLinkIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction) property color themeLinkIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction)
property string themeLinkIndicatorColorDisabled: Theme.color(Theme.DSlinkIndicatorColorDisabled) property color themeLinkIndicatorColorDisabled: Theme.color(Theme.DSlinkIndicatorColorDisabled)
property string themeInfiniteLoopIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor) property color themeInfiniteLoopIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor)
property string themeInfiniteLoopIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover) property color themeInfiniteLoopIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover)
property string themeInfiniteLoopIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction) property color themeInfiniteLoopIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction)
// Popup background color (ComboBox, SpinBox, TextArea) // Popup background color (ComboBox, SpinBox, TextArea)
property string themePopupBackground: Theme.color(Theme.DSpopupBackground) property color themePopupBackground: Theme.color(Theme.DSpopupBackground)
// GradientPopupDialog modal overly color // GradientPopupDialog modal overlay color
property string themePopupOverlayColor: Theme.color(Theme.DSpopupOverlayColor) property color themePopupOverlayColor: Theme.color(Theme.DSpopupOverlayColor)
// ToolTip (UrlChooser) // ToolTip (UrlChooser)
property string themeToolTipBackground: Theme.color(Theme.DStoolTipBackground) property color themeToolTipBackground: Theme.color(Theme.DStoolTipBackground)
property string themeToolTipOutline: Theme.color(Theme.DStoolTipOutline) property color themeToolTipOutline: Theme.color(Theme.DStoolTipOutline)
property string themeToolTipText: Theme.color(Theme.DStoolTipText) property color themeToolTipText: Theme.color(Theme.DStoolTipText)
// Slider colors // Slider colors
property string themeSliderActiveTrack: Theme.color(Theme.DSsliderActiveTrack) property color themeSliderActiveTrack: Theme.color(Theme.DSsliderActiveTrack)
property string themeSliderActiveTrackHover: Theme.color(Theme.DSsliderActiveTrackHover) property color themeSliderActiveTrackHover: Theme.color(Theme.DSsliderActiveTrackHover)
property string themeSliderActiveTrackFocus: Theme.color(Theme.DSsliderActiveTrackFocus) property color themeSliderActiveTrackFocus: Theme.color(Theme.DSsliderActiveTrackFocus)
property string themeSliderInactiveTrack: Theme.color(Theme.DSsliderInactiveTrack) property color themeSliderInactiveTrack: Theme.color(Theme.DSsliderInactiveTrack)
property string themeSliderInactiveTrackHover: Theme.color(Theme.DSsliderInactiveTrackHover) property color themeSliderInactiveTrackHover: Theme.color(Theme.DSsliderInactiveTrackHover)
property string themeSliderInactiveTrackFocus: Theme.color(Theme.DSsliderInactiveTrackFocus) property color themeSliderInactiveTrackFocus: Theme.color(Theme.DSsliderInactiveTrackFocus)
property string themeSliderHandle: Theme.color(Theme.DSsliderHandle) property color themeSliderHandle: Theme.color(Theme.DSsliderHandle)
property string themeSliderHandleHover: Theme.color(Theme.DSsliderHandleHover) property color themeSliderHandleHover: Theme.color(Theme.DSsliderHandleHover)
property string themeSliderHandleFocus: Theme.color(Theme.DSsliderHandleFocus) property color themeSliderHandleFocus: Theme.color(Theme.DSsliderHandleFocus)
property string themeSliderHandleInteraction: Theme.color(Theme.DSsliderHandleInteraction) property color themeSliderHandleInteraction: Theme.color(Theme.DSsliderHandleInteraction)
property string themeScrollBarTrack: Theme.color(Theme.DSscrollBarTrack) property color themeScrollBarTrack: Theme.color(Theme.DSscrollBarTrack)
property string themeScrollBarHandle: Theme.color(Theme.DSscrollBarHandle) 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 color themeTabActiveBackground: Theme.color(Theme.DStabActiveBackground)
property string themeTabActiveText: Theme.color(Theme.DStabActiveText) property color themeTabActiveText: Theme.color(Theme.DStabActiveText)
property string themeTabInactiveBackground: Theme.color(Theme.DStabInactiveBackground) property color themeTabInactiveBackground: Theme.color(Theme.DStabInactiveBackground)
property string themeTabInactiveText: Theme.color(Theme.DStabInactiveText) property color themeTabInactiveText: Theme.color(Theme.DStabInactiveText)
// State Editor // State Editor
property string themeStateSeparator: Theme.color(Theme.DSstateSeparatorColor) property color themeStateSeparator: Theme.color(Theme.DSstateSeparatorColor)
property string themeStateBackground: Theme.color(Theme.DSstateBackgroundColor) property color themeStateBackground: Theme.color(Theme.DSstateBackgroundColor)
property string themeStatePreviewOutline: Theme.color(Theme.DSstatePreviewOutline) property color themeStatePreviewOutline: Theme.color(Theme.DSstatePreviewOutline)
// State Editor *new* // State Editor *new*
property color themeStatePanelBackground: Theme.color(Theme.DSstatePanelBackground) property color themeStatePanelBackground: Theme.color(Theme.DSstatePanelBackground)
property color themeStateHighlight: Theme.color(Theme.DSstateHighlight) 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 // Taken out of Constants.js
property string themeChangedStateText: Theme.color(Theme.DSchangedStateText) property color themeChangedStateText: Theme.color(Theme.DSchangedStateText)
// 3D // 3D
property string theme3DAxisXColor: Theme.color(Theme.DS3DAxisXColor) property color theme3DAxisXColor: Theme.color(Theme.DS3DAxisXColor)
property string theme3DAxisYColor: Theme.color(Theme.DS3DAxisYColor) property color theme3DAxisYColor: Theme.color(Theme.DS3DAxisYColor)
property string theme3DAxisZColor: Theme.color(Theme.DS3DAxisZColor) property color theme3DAxisZColor: Theme.color(Theme.DS3DAxisZColor)
property string themeActionBinding: Theme.color(Theme.DSactionBinding) property color themeActionBinding: Theme.color(Theme.DSactionBinding)
property string themeActionAlias: Theme.color(Theme.DSactionAlias) property color themeActionAlias: Theme.color(Theme.DSactionAlias)
property string themeActionKeyframe: Theme.color(Theme.DSactionKeyframe) property color themeActionKeyframe: Theme.color(Theme.DSactionKeyframe)
property string themeActionJIT: Theme.color(Theme.DSactionJIT) property color themeActionJIT: Theme.color(Theme.DSactionJIT)
property string themeListItemBackground: Theme.color(Theme.DSnavigatorItemBackground) property color themeListItemBackground: Theme.color(Theme.DSnavigatorItemBackground)
property string themeListItemBackgroundHover: Theme.color(Theme.DSnavigatorItemBackgroundHover) property color themeListItemBackgroundHover: Theme.color(Theme.DSnavigatorItemBackgroundHover)
property string themeListItemBackgroundPress: Theme.color(Theme.DSnavigatorItemBackgroundSelected) property color themeListItemBackgroundPress: Theme.color(Theme.DSnavigatorItemBackgroundSelected)
property string themeListItemText: Theme.color(Theme.DSnavigatorText) property color themeListItemText: Theme.color(Theme.DSnavigatorText)
property string themeListItemTextHover: Theme.color(Theme.DSnavigatorTextHover) property color themeListItemTextHover: Theme.color(Theme.DSnavigatorTextHover)
property string themeListItemTextPress: Theme.color(Theme.DSnavigatorTextSelected) property color themeListItemTextPress: Theme.color(Theme.DSnavigatorTextSelected)
// Welcome Page // Welcome Page
property string welcomeScreenBackground: Theme.color(Theme.DSwelcomeScreenBackground) property color welcomeScreenBackground: Theme.color(Theme.DSwelcomeScreenBackground)
property string themeSubPanelBackground: Theme.color(Theme.DSsubPanelBackground) property color themeSubPanelBackground: Theme.color(Theme.DSsubPanelBackground)
property string themeThumbnailBackground: Theme.color(Theme.DSthumbnailBackground) property color themeThumbnailBackground: Theme.color(Theme.DSthumbnailBackground)
property string themeThumbnailLabelBackground: Theme.color(Theme.DSthumbnailLabelBackground) property color themeThumbnailLabelBackground: Theme.color(Theme.DSthumbnailLabelBackground)
// Dialog // Dialog
property color themeDialogBackground: values.themeThumbnailBackground property color themeDialogBackground: values.themeThumbnailBackground
property color themeDialogOutline: values.themeInteraction property color themeDialogOutline: values.themeInteraction
property ControlStyle controlStyle: DefaultStyle {}
property ControlStyle toolbarStyle: ToolbarStyle {}
} }

4
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir
View File

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