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

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

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
import QtQuick 2.15
import StudioControls 1.0
import QtQuick
ButtonRow {
id: myButtonRow
id: control
property alias buttonIcon: myAbstractButton.buttonIcon
property alias iconColor: myAbstractButton.iconColor
property alias iconRotation: myAbstractButton.iconRotation
property alias checkable: myAbstractButton.checkable
property alias checked: myAbstractButton.checked
property alias style: button.style
property alias buttonIcon: button.buttonIcon
property alias iconColor: button.iconColor
property alias iconRotation: button.iconRotation
property alias checkable: button.checkable
property alias checked: button.checked
signal onCheckedChanged()
signal clicked
AbstractButton {
id: myAbstractButton
onCheckedChanged: myButtonRow.onCheckedChanged()
onClicked: myButtonRow.clicked()
id: button
onCheckedChanged: control.onCheckedChanged()
onClicked: control.clicked()
}
}

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

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

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

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

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

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

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

@@ -1,34 +1,14 @@
/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick
import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme
T.Dialog {
id: root
id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding,
@@ -39,36 +19,37 @@ T.Dialog {
+ (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+ (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
padding: StudioTheme.Values.dialogPadding
padding: control.style.dialogPadding
background: Rectangle {
color: StudioTheme.Values.themeDialogBackground
border.color: StudioTheme.Values.themeDialogOutline
border.width: StudioTheme.Values.border
color: control.style.dialog.background
border.color: control.style.dialog.border
border.width: control.style.borderWidth
}
header: T.Label {
text: root.title
visible: root.title
text: control.title
visible: control.title
elide: T.Label.ElideRight
font.bold: true
padding: StudioTheme.Values.dialogPadding
color: StudioTheme.Values.themeTextColor
padding: control.padding
color: control.style.text.idle
background: Rectangle {
x: StudioTheme.Values.border
y: StudioTheme.Values.border
width: parent.width - (2 * StudioTheme.Values.border)
height: parent.height - (2 * StudioTheme.Values.border)
color: StudioTheme.Values.themeDialogBackground
x: control.style.borderWidth
y: control.style.borderWidth
width: parent.width - (2 * control.style.borderWidth)
height: parent.height - (2 * control.style.borderWidth)
color: control.style.dialog.background
}
}
footer: DialogButtonBox {
style: control.style
visible: count > 0
}
T.Overlay.modal: Rectangle {
color: Qt.alpha(StudioTheme.Values.themeDialogBackground, 0.5)
color: Qt.alpha(control.style.dialog.overlay, 0.5)
}
}

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

@@ -1,58 +1,36 @@
/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick
import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme
T.Button {
id: root
id: control
implicitWidth: Math.max(
background ? background.implicitWidth : 0,
textItem.implicitWidth + leftPadding + rightPadding)
implicitHeight: Math.max(
background ? background.implicitHeight : 0,
textItem.implicitHeight + topPadding + bottomPadding)
leftPadding: StudioTheme.Values.dialogButtonPadding
rightPadding: StudioTheme.Values.dialogButtonPadding
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(buttonBackground ? buttonBackground.implicitWidth : 0,
textItem.implicitWidth + leftPadding + rightPadding)
implicitHeight: Math.max(buttonBackground ? buttonBackground.implicitHeight : 0,
textItem.implicitHeight + topPadding + bottomPadding)
leftPadding: control.style.dialogPadding
rightPadding: control.style.dialogPadding
background: Rectangle {
id: background
id: buttonBackground
implicitWidth: 70
implicitHeight: 20
color: StudioTheme.Values.themeControlBackground
border.color: StudioTheme.Values.themeControlOutline
color: control.style.background.idle
border.color: control.style.border.idle
anchors.fill: parent
}
contentItem: Text {
id: textItem
text: root.text
font.pixelSize: StudioTheme.Values.baseFontSize
color: StudioTheme.Values.themeTextColor
text: control.text
font.pixelSize: control.style.baseFontSize
color: control.style.text.idle
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
@@ -60,58 +38,58 @@ T.Button {
states: [
State {
name: "default"
when: root.enabled && !root.down && !root.hovered && !root.checked
when: control.enabled && !control.down && !control.hovered && !control.checked
PropertyChanges {
target: background
color: root.highlighted ? StudioTheme.Values.themeInteraction
: StudioTheme.Values.themeControlBackground
border.color: StudioTheme.Values.themeControlOutline
target: buttonBackground
color: control.highlighted ? control.style.interaction
: control.style.background.idle
border.color: control.style.border.idle
}
PropertyChanges {
target: textItem
color: StudioTheme.Values.themeTextColor
color: control.style.text.idle
}
},
State {
name: "hover"
when: root.enabled && root.hovered && !root.checked && !root.down
when: control.enabled && control.hovered && !control.checked && !control.down
PropertyChanges {
target: background
color: StudioTheme.Values.themeControlBackgroundHover
border.color: StudioTheme.Values.themeControlOutline
target: buttonBackground
color: control.style.background.hover
border.color: control.style.border.idle
}
PropertyChanges {
target: textItem
color: StudioTheme.Values.themeTextColor
color: control.style.text.idle
}
},
State {
name: "press"
when: root.enabled && (root.checked || root.down)
when: control.enabled && (control.checked || control.down)
PropertyChanges {
target: background
color: StudioTheme.Values.themeControlBackgroundInteraction
border.color: StudioTheme.Values.themeControlOutlineInteraction
target: buttonBackground
color: control.style.background.interaction
border.color: control.style.border.interaction
}
PropertyChanges {
target: textItem
color: StudioTheme.Values.themeTextColor
color: control.style.text.idle
}
},
State {
name: "disable"
when: !root.enabled
when: !control.enabled
PropertyChanges {
target: background
color: StudioTheme.Values.themeControlBackgroundDisabled
border.color: StudioTheme.Values.themeControlOutlineDisabled
target: buttonBackground
color: control.style.background.disabled
border.color: control.style.border.disabled
}
PropertyChanges {
target: textItem
color: StudioTheme.Values.themeTextColorDisabled
color: control.style.text.disabled
}
}
]

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

@@ -1,27 +1,5 @@
/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick
import QtQuick.Templates as T
@@ -30,20 +8,23 @@ import StudioTheme 1.0 as StudioTheme
T.DialogButtonBox {
id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
(control.count === 1 ? implicitContentWidth * 2 : implicitContentWidth) + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
contentWidth: contentItem.contentWidth
spacing: StudioTheme.Values.dialogButtonSpacing
padding: StudioTheme.Values.dialogPadding
spacing: control.style.dialogButtonSpacing
padding: control.style.dialogPadding
alignment: Qt.AlignRight | Qt.AlignBottom
delegate: DialogButton {
style: control.style
width: control.count === 1 ? control.availableWidth / 2 : undefined
implicitHeight: StudioTheme.Values.height
implicitHeight: control.style.controlSize.height
highlighted: DialogButtonBox.buttonRole === DialogButtonBox.AcceptRole
|| DialogButtonBox.buttonRole === DialogButtonBox.ApplyRole
}
@@ -59,10 +40,10 @@ T.DialogButtonBox {
background: Rectangle {
implicitHeight: 30
x: StudioTheme.Values.border
y: StudioTheme.Values.border
width: parent.width - (2 * StudioTheme.Values.border)
height: parent.height - (2 * StudioTheme.Values.border)
color: StudioTheme.Values.themeDialogBackground
x: control.style.borderWidth
y: control.style.borderWidth
width: parent.width - (2 * control.style.borderWidth)
height: parent.height - (2 * control.style.borderWidthr)
color: control.style.dialog.background
}
}

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

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

@@ -1,41 +1,21 @@
/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0
import QtQuick 2.15
import QtQuick.Templates 2.15 as T
import QtQuick
import QtQuick.Templates as T
import StudioTheme 1.0 as StudioTheme
Item {
id: root
id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
property alias icon: icon
property bool hover: mouseArea.containsMouse
property bool pressed: mouseArea.pressed
implicitWidth: StudioTheme.Values.height
implicitHeight: StudioTheme.Values.height
implicitWidth: control.style.squareControlSize.width
implicitHeight: control.style.squareControlSize.height
signal clicked
z: 10
@@ -44,16 +24,16 @@ Item {
id: icon
anchors.fill: parent
text: StudioTheme.Constants.actionIcon
color: StudioTheme.Values.themeTextColor
color: control.style.icon.idle
font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize
font.pixelSize: control.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
states: [
State {
name: "hover"
when: root.hover && !root.pressed && root.enabled
when: control.hover && !control.pressed && control.enabled
PropertyChanges {
target: icon
scale: 1.2
@@ -62,10 +42,10 @@ Item {
},
State {
name: "disable"
when: !root.enabled
when: !control.enabled
PropertyChanges {
target: icon
color: StudioTheme.Values.themeTextColorDisabled
color: control.style.icon.disabled
}
}
]
@@ -75,6 +55,6 @@ Item {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: root.clicked()
onClicked: control.clicked()
}
}

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

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

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

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

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

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

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

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

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

@@ -1,27 +1,5 @@
/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick
import QtQuick.Templates as T
@@ -30,6 +8,8 @@ import StudioTheme 1.0 as StudioTheme
T.ProgressBar {
id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
@@ -42,13 +22,13 @@ T.ProgressBar {
Rectangle {
width: control.visualPosition * parent.width
height: parent.height
color: StudioTheme.Values.themeInteraction
color: control.style.interaction
}
}
background: Rectangle {
implicitWidth: 200
implicitHeight: 6
color: StudioTheme.Values.themeThumbnailLabelBackground
color: control.style.thumbnailLabelBackground
}
}

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

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

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

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

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

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

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

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

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

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

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
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick
import QtQuick.Layouts
import StudioTheme 1.0 as StudioTheme
GridLayout {
id: control
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
columns: 2
columnSpacing: StudioTheme.Values.sectionColumnSpacing
rowSpacing: StudioTheme.Values.sectionRowSpacing
columnSpacing: control.style.sectionColumnSpacing
rowSpacing: control.style.sectionRowSpacing
width: parent.width - 16 // TODO parameterize
}

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

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

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

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

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

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

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

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

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

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

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

@@ -1,27 +1,5 @@
/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick
import QtQuick.Templates as T
@@ -30,8 +8,10 @@ import StudioTheme 1.0 as StudioTheme
T.ToolTip {
id: control
x: parent ? (parent.width - implicitWidth) / 2 : 0
y: -implicitHeight - 3
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
x: parent ? (parent.width - control.implicitWidth) / 2 : 0
y: -control.implicitHeight - 3
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
@@ -42,19 +22,20 @@ T.ToolTip {
padding: 4
delay: 1000
timeout: 5000
closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent
| T.Popup.CloseOnReleaseOutsideParent
contentItem: Text {
text: control.text
wrapMode: Text.Wrap
font.pixelSize: StudioTheme.Values.myFontSize
color: StudioTheme.Values.themeToolTipText
font.pixelSize: control.style.baseFontSize
color: control.style.toolTip.text
}
background: Rectangle {
color: StudioTheme.Values.themeToolTipBackground
border.width: StudioTheme.Values.border
border.color: StudioTheme.Values.themeToolTipOutline
color: control.style.toolTip.background
border.width: control.style.borderWidth
border.color: control.style.toolTip.border
}
}

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

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

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

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

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