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

QmlDesigner: Controls 1 cleanup

Browse Source 
* Replace ScrollView Controls 1 with ScrollView Controls 2
* Replace TabView with TabBar and StackLayout
* Remove unused styles
* Replace Controls 1 imports
* Remove print statement in FontSection
* Fix layout width by correcting CheckBox width
* Remove TabView from QtObjectPane

Task-number: QDS-2454
Task-number: QDS-2455
Task-number: QDS-2456
Change-Id: I913d326afb012375dd5b804171cb8cd67681514c
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Henning Gruendl
2020-07-03 16:17:54 +02:00
committed by Henning Gründl
parent 245c9c760f
commit 58ea14aea7
29 changed files with 839 additions and 809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml
View File

@@ -23,9 +23,8 @@
**
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.0
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuickDesignerTheme 1.0
import HelperWidgets 2.0
@@ -76,8 +75,6 @@ Item {
id: mouseRegion
anchors.fill: parent
tooltip: itemName
onPressed: {
rootView.startDragAndDrop(mouseRegion, itemLibraryEntry)
}

76
share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
View File

@@ -23,15 +23,11 @@
**
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.0
import "../common"
import QtQuick.Layouts 1.0
import HelperWidgets 2.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuickDesignerTheme 1.0
import HelperWidgets 2.0
import StudioTheme 1.0 as StudioTheme
/* The view displaying the item grid.
@@ -65,9 +61,6 @@ ScrollView {
Item {
id: styleConstants
readonly property color backgroundColor: Theme.qmlDesignerBackgroundColorDarkAlternate()
readonly property color lighterBackgroundColor: Theme.color(Theme.FancyToolBarSeparatorColor)
property int textWidth: 58
property int textHeight: Theme.smallFontPixelSize() * 2
@@ -81,48 +74,37 @@ ScrollView {
2 * cellVerticalMargin + cellVerticalSpacing
}
Rectangle {
id: background
anchors.fill: parent
color: styleConstants.backgroundColor
}
Column {
id: column
Repeater {
model: itemLibraryModel // to be set in Qml context
delegate: Section {
width: itemsView.width -
(itemsView.verticalScrollBarVisible ? StudioTheme.Values.scrollBarThickness : 0)
caption: sectionName // to be set by model
visible: sectionVisible
topPadding: 2
leftPadding: 2
rightPadding: 1
expanded: sectionExpanded
onExpandedChanged: itemLibraryModel.setExpanded(expanded, sectionName);
Grid {
id: itemGrid
style: DesignerScrollViewStyle {
columns: parent.width / styleConstants.cellWidth
property int flexibleWidth: (parent.width - styleConstants.cellWidth * columns) / columns
}
Flickable {
contentHeight: column.height
Column {
id: column
Repeater {
model: itemLibraryModel // to be set in Qml context
delegate: Section {
width: itemsView.viewport.width
caption: sectionName // to be set by model
visible: sectionVisible
topPadding: 2
leftPadding: 2
rightPadding: 1
expanded: sectionExpanded
onExpandedChanged: itemLibraryModel.setExpanded(expanded, sectionName);
Grid {
id: itemGrid
columns: parent.width / styleConstants.cellWidth
property int flexibleWidth: (parent.width - styleConstants.cellWidth * columns) / columns
Repeater {
model: sectionEntries
delegate: ItemDelegate {
visible: itemVisible
width: styleConstants.cellWidth + itemGrid.flexibleWidth
height: styleConstants.cellHeight
}
Repeater {
model: sectionEntries
delegate: ItemDelegate {
visible: itemVisible
width: styleConstants.cellWidth + itemGrid.flexibleWidth
height: styleConstants.cellHeight
}
}
}
}
}
}
}

4
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml
View File

@@ -33,7 +33,7 @@ Section {
caption: qsTr("Advanced")
SectionLayout {
rows: 4
columns: 2
Label {
text: qsTr("Origin")
@@ -171,7 +171,6 @@ Section {
backendValue: backendValues.focus
text: backendValues.focus.valueToString
enabled: backendValues.focus.isAvailable
implicitWidth: 180
}
ExpandingSpacer {
}
@@ -187,7 +186,6 @@ Section {
backendValue: backendValues.activeFocusOnTab
text: backendValues.activeFocusOnTab.valueToString
enabled: backendValues.activeFocusOnTab.isAvailable
implicitWidth: 180
}
ExpandingSpacer {
}

46
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AlignDistributeSection.qml
View File

@@ -32,10 +32,10 @@ import StudioTheme 1.0 as StudioTheme
Section {
anchors.left: parent.left
anchors.right: parent.right
caption: qsTr("Align")
ColumnLayout {
width: parent.width
SectionLayout {
enabled: alignDistribute.multiSelection &&
!alignDistribute.selectionHasAnchors &&
alignDistribute.selectionExclusivlyItems &&
@@ -49,8 +49,11 @@ Section {
Label {
text: qsTr("Align objects")
width: 120
Layout.columnSpan: 2
}
RowLayout {
Layout.columnSpan: 2
Row {
spacing: -StudioTheme.Values.border
AbstractButton {
@@ -105,8 +108,11 @@ Section {
Label {
text: qsTr("Distribute objects")
width: 120
Layout.columnSpan: 2
}
RowLayout {
Layout.columnSpan: 2
Row {
spacing: -StudioTheme.Values.border
AbstractButton {
@@ -161,8 +167,11 @@ Section {
Label {
text: qsTr("Distribute spacing")
width: 120
Layout.columnSpan: 2
}
RowLayout {
Layout.columnSpan: 2
Row {
spacing: -StudioTheme.Values.border
AbstractButton {
@@ -242,18 +251,16 @@ Section {
}
}
SectionLayout {
columns: 2
ItemFilterModel {
id: itemFilterModel
modelNodeBackendProperty: modelNodeBackend
selectionOnly: true
}
ItemFilterModel {
id: itemFilterModel
modelNodeBackendProperty: modelNodeBackend
selectionOnly: true
}
Label {
text: qsTr("Align to")
}
Label {
text: qsTr("Align to")
}
SecondColumnLayout {
ComboBox {
id: alignToComboBox
Layout.fillWidth: true
@@ -267,9 +274,14 @@ Section {
}
}
Label {
text: qsTr("Key object")
ExpandingSpacer {
}
}
Label {
text: qsTr("Key object")
}
SecondColumnLayout {
ComboBox {
id: keyObjectComboBox
enabled: alignToComboBox.currentIndex === 2
@@ -285,11 +297,15 @@ Section {
lastSelectedItem = "" // TODO
}
}
ExpandingSpacer {
}
}
SectionLayout {
columns: 1
Layout.topMargin: 30
Layout.columnSpan: 2
visible: alignDistribute.multiSelection &&
(alignDistribute.selectionHasAnchors ||
!alignDistribute.selectionExclusivlyItems ||

12
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml
View File

@@ -23,9 +23,9 @@
**
****************************************************************************/
import QtQuick 2.0
import QtQuick 2.15
import HelperWidgets 2.0
import QtQuick.Layouts 1.0
import QtQuick.Layouts 1.15
import QtQuickDesignerTheme 1.0
import StudioControls 1.0 as StudioControls
@@ -34,11 +34,9 @@ import StudioTheme 1.0 as StudioTheme
RowLayout {
id: anchorRow
anchors.left: parent.left
anchors.right: parent.right
opacity: enabled ? 1 : 0.5
property alias iconSource: icon.source
property alias iconSource: iconLabel.icon
property variant anchorMargin
@@ -64,8 +62,10 @@ RowLayout {
readonly property color __defaultTextColor: StudioTheme.Values.themeTextColor
IconLabel {
id: icon
id: iconLabel
Layout.alignment: Qt.AlignTop
Layout.topMargin: 4
Layout.leftMargin: 4
}
GridLayout {

136
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml
View File

@@ -23,10 +23,11 @@
**
****************************************************************************/
import QtQuick 2.0
import HelperWidgets 2.0
import QtQuick.Layouts 1.0
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuickDesignerTheme 1.0
import HelperWidgets 2.0
import StudioControls 1.0 as StudioControls
import StudioTheme 1.0 as StudioTheme
@@ -35,14 +36,15 @@ Rectangle {
width: 320
height: 400
color: Theme.qmlDesignerBackgroundColorDarkAlternate()
MouseArea {
anchors.fill: parent
onClicked: forceActiveFocus()
}
ScrollView {
clip: true
anchors.fill: parent
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
Column {
y: -1
@@ -57,7 +59,6 @@ Rectangle {
SectionLayout {
Label {
text: qsTr("Type")
}
SecondColumnLayout {
@@ -280,7 +281,6 @@ Rectangle {
Item {
width: 10
height: 10
}
CheckBox {
@@ -319,88 +319,92 @@ Rectangle {
width: 4
}
TabView {
StudioControls.TabBar {
id: tabBar
anchors.left: parent.left
anchors.right: parent.right
frameVisible: false
id: tabView
StudioControls.TabButton {
text: backendValues.className.value
}
StudioControls.TabButton {
text: qsTr("Layout")
}
StudioControls.TabButton {
text: qsTr("Advanced")
}
}
StackLayout {
anchors.left: parent.left
anchors.right: parent.right
currentIndex: tabBar.currentIndex
property int currentHeight: children[currentIndex].implicitHeight
property int extraHeight: 40
height: currentHeight + extraHeight
property int currentHeight: getTab(currentIndex).item.implicitHeight
property int extraHeight: 40
Column {
anchors.left: parent.left
anchors.right: parent.right
Tab {
title: backendValues.className.value
Loader {
anchors.left: parent.left
anchors.right: parent.right
visible: theSource !== ""
component: Column {
id: specificsTwo;
sourceComponent: specificQmlComponent
property string theSource: specificQmlData
onTheSourceChanged: {
active = false
active = true
}
}
Loader {
anchors.left: parent.left
anchors.right: parent.right
Loader {
anchors.left: parent.left
anchors.right: parent.right
visible: theSource !== ""
id: specificsOne;
source: specificsUrl;
id: specificsTwo;
sourceComponent: specificQmlComponent
property string theSource: specificQmlData
onTheSourceChanged: {
active = false
active = true
}
}
Loader {
anchors.left: parent.left
anchors.right: parent.right
id: specificsOne;
source: specificsUrl;
property int loaderHeight: specificsOne.item.height + tabView.extraHeight
}
property int loaderHeight: specificsOne.item.height + tabView.extraHeight
}
}
Tab {
title: qsTr("Layout")
component: Column {
anchors.left: parent.left
anchors.right: parent.right
Column {
anchors.left: parent.left
anchors.right: parent.right
LayoutSection {
}
LayoutSection {
}
MarginSection {
visible: anchorBackend.isInLayout
backendValueTopMargin: backendValues.Layout_topMargin
backendValueBottomMargin: backendValues.Layout_bottomMargin
backendValueLeftMargin: backendValues.Layout_leftMargin
backendValueRightMargin: backendValues.Layout_rightMargin
backendValueMargins: backendValues.Layout_margins
}
MarginSection {
visible: anchorBackend.isInLayout
backendValueTopMargin: backendValues.Layout_topMargin
backendValueBottomMargin: backendValues.Layout_bottomMargin
backendValueLeftMargin: backendValues.Layout_leftMargin
backendValueRightMargin: backendValues.Layout_rightMargin
backendValueMargins: backendValues.Layout_margins
}
AlignDistributeSection {
visible: !anchorBackend.isInLayout
}
AlignDistributeSection {
visible: !anchorBackend.isInLayout
}
}
Tab {
anchors.fill: parent
title: qsTr("Advanced")
component: Column {
anchors.left: parent.left
anchors.right: parent.right
Column {
anchors.left: parent.left
anchors.right: parent.right
AdvancedSection {
}
LayerSection {
}
AdvancedSection {
}
LayerSection {
}
}
}

24
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml
View File

@@ -50,8 +50,8 @@ Section {
}
AnchorRow {
visible: anchorBackend.topAnchored;
iconSource: "image://icons/anchor-top"
visible: anchorBackend.topAnchored
iconSource: StudioTheme.Constants.anchorTop
anchorMargin: backendValues.anchors_topMargin
targetName: anchorBackend.topTarget
onTargetChanged: {
@@ -73,8 +73,8 @@ Section {
}
AnchorRow {
visible: anchorBackend.bottomAnchored;
iconSource: "image://icons/anchor-bottom"
visible: anchorBackend.bottomAnchored
iconSource: StudioTheme.Constants.anchorBottom
anchorMargin: backendValues.anchors_bottomMargin
targetName: anchorBackend.bottomTarget
onTargetChanged: {
@@ -97,8 +97,8 @@ Section {
}
AnchorRow {
visible: anchorBackend.leftAnchored;
iconSource: "image://icons/anchor-left"
visible: anchorBackend.leftAnchored
iconSource: StudioTheme.Constants.anchorLeft
anchorMargin: backendValues.anchors_leftMargin
targetName: anchorBackend.leftTarget
onTargetChanged: {
@@ -120,8 +120,8 @@ Section {
}
AnchorRow {
visible: anchorBackend.rightAnchored;
iconSource: "image://icons/anchor-right"
visible: anchorBackend.rightAnchored
iconSource: StudioTheme.Constants.anchorRight
anchorMargin: backendValues.anchors_rightMargin
targetName: anchorBackend.rightTarget
onTargetChanged: {
@@ -145,8 +145,8 @@ Section {
AnchorRow {
showAlternativeTargets: false
visible: anchorBackend.horizontalCentered;
iconSource: "image://icons/anchor-horizontal"
visible: anchorBackend.horizontalCentered
iconSource: StudioTheme.Constants.centerHorizontal
anchorMargin: backendValues.anchors_horizontalCenterOffset
targetName: anchorBackend.horizontalTarget
onTargetChanged: {
@@ -158,8 +158,8 @@ Section {
AnchorRow {
showAlternativeTargets: false
visible: anchorBackend.verticalCentered;
iconSource: "image://icons/anchor-vertical"
visible: anchorBackend.verticalCentered
iconSource: StudioTheme.Constants.centerVertical
anchorMargin: backendValues.anchors_verticalCenterOffset
targetName: anchorBackend.verticalTarget
onTargetChanged: {

81
share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml
View File

@@ -23,10 +23,10 @@
**
****************************************************************************/
import QtQuick 2.0
import HelperWidgets 2.0
import QtQuick 2.15
import QtQuick.Layouts 1.0
import QtQuickDesignerTheme 1.0
import HelperWidgets 2.0
Rectangle {
id: itemPane
@@ -43,6 +43,7 @@ Rectangle {
anchors.fill: parent
Column {
id: rootColumn
y: -1
width: itemPane.width
Section {
@@ -54,7 +55,6 @@ Rectangle {
SectionLayout {
Label {
text: qsTr("Type")
}
SecondColumnLayout {
@@ -148,69 +148,30 @@ Rectangle {
width: 4
}
TabView {
Column {
anchors.left: parent.left
anchors.right: parent.right
frameVisible: false
Loader {
id: specificsTwo
anchors.left: parent.left
anchors.right: parent.right
visible: theSource !== ""
sourceComponent: specificQmlComponent
id: tabView
height: Math.max(layoutSectionHeight, specficsHeight)
property string theSource: specificQmlData
property int layoutSectionHeight: 400
property int specficsOneHeight: 0
property int specficsTwoHeight: 0
property int specficsHeight: Math.max(specficsOneHeight, specficsTwoHeight)
property int extraHeight: 40
Tab {
id: tab
title: backendValues.className.value
component: Column {
anchors.left: parent.left
anchors.right: parent.right
Loader {
anchors.left: parent.left
anchors.right: parent.right
visible: theSource !== ""
id: specificsTwo;
sourceComponent: specificQmlComponent
property string theSource: specificQmlData
onTheSourceChanged: {
active = false
active = true
}
property int loaderHeight: specificsTwo.item.height + tabView.extraHeight
onLoaderHeightChanged: tabView.specficsTwoHeight = loaderHeight
onLoaded: {
tabView.specficsTwoHeight = loaderHeight
}
}
Loader {
anchors.left: parent.left
anchors.right: parent.right
id: specificsOne;
source: specificsUrl;
property int loaderHeight: specificsOne.item.height + tabView.extraHeight
onLoaderHeightChanged: tabView.specficsHeight = loaderHeight
onLoaded: {
tabView.specficsOneHeight = loaderHeight
}
}
onTheSourceChanged: {
active = false
active = true
}
}
Loader {
id: specificsOne
anchors.left: parent.left
anchors.right: parent.right
source: specificsUrl
}
}
}
}

4
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml
View File

@@ -156,7 +156,7 @@ StudioControls.ButtonRow {
buttonIcon: StudioTheme.Constants.centerVertical
tooltip: qsTr("Anchor item vertically.")
property bool verticalCentered: anchorBackend.verticalCentered;
property bool verticalCentered: anchorBackend.verticalCentered
onVerticalCenteredChanged: {
checked = verticalCentered
}
@@ -179,7 +179,7 @@ StudioControls.ButtonRow {
buttonIcon: StudioTheme.Constants.centerHorizontal
tooltip: qsTr("Anchor item horizontally.")
property bool horizontalCentered: anchorBackend.horizontalCentered;
property bool horizontalCentered: anchorBackend.horizontalCentered
onHorizontalCenteredChanged: {
checked = horizontalCentered
}

117
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Button.qml
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
@@ -23,48 +23,79 @@
**
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.1 as Controls
import QtQuick.Controls.Styles 1.1
import "Constants.js" as Constants
import QtQuick 2.15
import QtQuick.Templates 2.15 as T
import StudioTheme 1.0 as StudioTheme
Controls.Button {
property color borderColor: "#222"
property color highlightColor: "orange"
property color textColor: "#eee"
style: ButtonStyle {
label: Text {
color: Constants.colorsDefaultText
anchors.fill: parent
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: control.text
opacity: enabled ? 1 : 0.7
}
background: Rectangle {
implicitWidth: 100
implicitHeight: 23
radius: 3
gradient: control.pressed ? pressedGradient : gradient
Gradient{
id: pressedGradient
GradientStop{color: "#333" ; position: 0}
}
Gradient {
id: gradient
GradientStop {color: "#606060" ; position: 0}
GradientStop {color: "#404040" ; position: 0.07}
GradientStop {color: "#303030" ; position: 1}
}
Rectangle {
anchors.fill: parent
anchors.margins: -1
color: "transparent"
radius: 4
opacity: 0.3
visible: control.activeFocus
}
}
T.AbstractButton {
id: myButton
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
background: Rectangle {
id: buttonBackground
implicitWidth: 100
implicitHeight: 23
radius: 3
color: StudioTheme.Values.themeControlBackground
border.color: StudioTheme.Values.themeControlOutline
border.width: StudioTheme.Values.border
}
contentItem: Text {
id: buttonText
color: StudioTheme.Values.themeTextColor
font.family: StudioTheme.Constants.font.family
font.pixelSize: StudioTheme.Values.myFontSize
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
anchors.fill: parent
renderType: Text.QtRendering
text: myButton.text
}
states: [
State {
name: "default"
when: myButton.enabled && !myButton.hovered && !myButton.pressed
&& !myButton.checked
PropertyChanges {
target: buttonBackground
color: StudioTheme.Values.themeControlBackground
}
},
State {
name: "hovered"
when: myButton.hovered && !myButton.pressed
PropertyChanges {
target: buttonBackground
color: StudioTheme.Values.themeHoverHighlight
}
},
State {
name: "pressed"
when: myButton.hovered && myButton.pressed
PropertyChanges {
target: buttonBackground
color: StudioTheme.Values.themeControlBackgroundPressed
border.color: StudioTheme.Values.themeInteraction
}
},
State {
name: "disabled"
when: !myButton.enabled
PropertyChanges {
target: buttonBackground
color: StudioTheme.Values.themeControlBackgroundDisabled
border.color: StudioTheme.Values.themeControlOutlineDisabled
}
PropertyChanges {
target: buttonText
color: StudioTheme.Values.themeTextColorDisabled
}
}
]
}

6
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ButtonRowButton.qml
View File

@@ -23,10 +23,8 @@
**
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick.Layouts 1.0
import QtQuick.Controls.Private 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuickDesignerTheme 1.0
Item {

3
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
View File

@@ -38,7 +38,7 @@ Column {
property bool supportGradient: false
property string caption: "Color"
property string caption: qsTr("Color")
property variant backendValue
@@ -47,7 +47,6 @@ Column {
return Qt.rgba(backendValue.value.x, backendValue.value.y, backendValue.value.z, 1);
else
return backendValue.value;
}
property alias gradientPropertyName: gradientLine.gradientPropertyName

1
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml
View File

@@ -73,7 +73,6 @@ Section {
Layout.fillWidth: true
width: 160
property string familyName: backendValue.value
onFamilyNameChanged: print(styleNamesForFamily(familyName))
}
Label {

82
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
View File

@@ -23,12 +23,11 @@
**
****************************************************************************/
import QtQuick 2.11
import QtQuick.Layouts 1.12
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Dialogs 1.3
import HelperWidgets 2.0
import QtQuickDesignerTheme 1.0
import HelperWidgets 2.0
import StudioControls 1.0 as StudioControls
import StudioTheme 1.0 as StudioTheme
@@ -76,49 +75,52 @@ Dialog {
anchors.margins: 13
anchors.bottomMargin: 71
TabView {
id: presetTabView
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.fillHeight: true
Layout.fillWidth: true
StudioControls.TabBar {
id: presetTabBar
Tab {
title: qsTr("System Presets")
anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
GradientPresetTabContent {
id: defaultTabContent
viewModel: defaultPresetListModel
editableName: false
}
StudioControls.TabButton {
text: qsTr("System Presets")
}
StudioControls.TabButton {
text: qsTr("User Presets")
}
}
StackLayout {
anchors.left: parent.left
anchors.right: parent.right
currentIndex: presetTabBar.currentIndex
GradientPresetTabContent {
id: defaultTabContent
viewModel: defaultPresetListModel
editableName: false
}
Tab {
title: qsTr("User Presets")
anchors.fill: parent
GradientPresetTabContent {
id: customTabContent
viewModel: customPresetListModel
editableName: true
onPresetNameChanged: customPresetListModel.changePresetName(id, name)
GradientPresetTabContent {
id: customTabContent
viewModel: customPresetListModel
editableName: true
onPresetNameChanged: customPresetListModel.changePresetName(id, name)
property int deleteId
property int deleteId
onDeleteButtonClicked: {
deleteId = id
deleteDialog.open()
}
onDeleteButtonClicked: {
deleteId = id
deleteDialog.open()
}
MessageDialog {
id: deleteDialog
visible: false
modality: Qt.WindowModal
standardButtons: Dialog.No | Dialog.Yes
title: qsTr("Delete preset?")
text: qsTr("Are you sure you want to delete this preset?")
onAccepted: customPresetListModel.deletePreset(customTabContent.deleteId)
}
MessageDialog {
id: deleteDialog
visible: false
modality: Qt.WindowModal
standardButtons: Dialog.No | Dialog.Yes
title: qsTr("Delete preset?")
text: qsTr("Are you sure you want to delete this preset?")
onAccepted: customPresetListModel.deletePreset(customTabContent.deleteId)
}
}
}

487
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
View File

@@ -23,12 +23,11 @@
**
****************************************************************************/
import QtQuick 2.11
import QtQuick.Layouts 1.12
import QtQuick.Dialogs 1.3
import HelperWidgets 2.0
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuickDesignerTheme 1.0
import HelperWidgets 2.0
import StudioControls 1.0 as StudioControls
import StudioTheme 1.0 as StudioTheme
@@ -48,271 +47,277 @@ Rectangle {
property real delegateHeight: 178
property real gridCellWidth: 160
ScrollView {
GridView {
id: gradientTable
Layout.fillWidth: true
Layout.fillHeight: true
anchors.fill: parent
anchors.leftMargin: 10
clip: true
delegate: gradientDelegate
GridView {
id: gradientTable
Layout.fillWidth: true
Layout.fillHeight: true
anchors.fill: parent
anchors.leftMargin: 10
clip: true
delegate: gradientDelegate
property int gridColumns: width / tabBackground.gridCellWidth;
cellWidth: width / gridColumns
cellHeight: 185
property int gridColumns: width / tabBackground.gridCellWidth;
cellWidth: width / gridColumns
cellHeight: 185
property bool bothVisible: horizontal.scrollBarVisible && vertical.scrollBarVisible
Component {
id: gradientDelegate
ScrollBar.horizontal: HorizontalScrollBar {
id: horizontal
parent: gradientTable
}
Rectangle {
id: backgroundCard
color: StudioTheme.Values.themeControlOutline
clip: true
ScrollBar.vertical: VerticalScrollBar {
id: vertical
parent: gradientTable
}
property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns
property bool isSelected: false
Component {
id: gradientDelegate
width: gradientTable.cellWidth + flexibleWidth - 8
height: tabBackground.delegateHeight
radius: 16
Rectangle {
id: backgroundCard
color: StudioTheme.Values.themeControlOutline
clip: true
function selectPreset(index) {
gradientTable.currentIndex = index
gradientData.stops = stopsPosList
gradientData.colors = stopsColorList
gradientData.stopsCount = stopListSize
gradientData.presetID = presetID
gradientData.presetType = presetTabView.currentIndex
property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns
property bool isSelected: false
if (gradientData.selectedItem != null)
gradientData.selectedItem.isSelected = false
width: gradientTable.cellWidth + flexibleWidth - 8
height: tabBackground.delegateHeight
radius: 16
backgroundCard.isSelected = true
gradientData.selectedItem = backgroundCard
function selectPreset(index) {
gradientTable.currentIndex = index
gradientData.stops = stopsPosList
gradientData.colors = stopsColorList
gradientData.stopsCount = stopListSize
gradientData.presetID = presetID
gradientData.presetType = presetTabBar.currentIndex
if (gradientData.selectedItem != null)
gradientData.selectedItem.isSelected = false
backgroundCard.isSelected = true
gradientData.selectedItem = backgroundCard
}
MouseArea {
id: rectMouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
presetNameBox.edit = false
nameInput.focus = false
backgroundCard.selectPreset(index)
}
}
MouseArea {
id: rectMouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
presetNameBox.edit = false
nameInput.focus = false
backgroundCard.selectPreset(index)
states: [
State {
name: "default"
when: !(rectMouseArea.containsMouse || removeButton.hovered ||
(nameMouseArea.containsMouse && !tabBackground.editableName)) &&
!backgroundCard.isSelected
PropertyChanges {
target: backgroundCard
color: StudioTheme.Values.themeControlOutline
border.width: 0
}
},
State {
name: "hovered"
when: (rectMouseArea.containsMouse || removeButton.hovered ||
(nameMouseArea.containsMouse && !tabBackground.editableName)) &&
!backgroundCard.isSelected
PropertyChanges {
target: backgroundCard
color: StudioTheme.Values.themeControlBackgroundPressed
border.width: 1
border.color: StudioTheme.Values.themeInteraction
}
},
State {
name: "selected"
when: backgroundCard.isSelected
PropertyChanges {
target: backgroundCard
color:StudioTheme.Values.themeInteraction
border.width: 1
border.color: StudioTheme.Values.themeControlBackgroundPressed
}
}
]
ColumnLayout {
spacing: 2
anchors.fill: parent
Rectangle {
id: gradientRect
width: 150
height: 150
radius: 16
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.topMargin: 2
gradient: Gradient {
id: showGr
}
Component {
id: stopComponent
GradientStop {}
}
Component.onCompleted: {
var stopsAmount = stopListSize;
var newStops = [];
for (var i = 0; i < stopsAmount; i++) {
newStops.push( stopComponent.createObject(showGr, { "position": stopsPosList[i], "color": stopsColorList[i] }) );
}
showGr.stops = newStops;
}
AbstractButton {
id: removeButton
visible: editableName && (rectMouseArea.containsMouse || removeButton.hovered)
backgroundRadius: StudioTheme.Values.smallRectWidth
anchors.right: parent.right
anchors.rightMargin: 5
anchors.top: parent.top
anchors.topMargin: 5
width: Math.round(StudioTheme.Values.smallRectWidth)
height: Math.round(StudioTheme.Values.smallRectWidth)
buttonIcon: StudioTheme.Constants.closeCross
onClicked: tabBackground.deleteButtonClicked(index)
}
}
states: [
State {
name: "default"
when: !(rectMouseArea.containsMouse || removeButton.hovered ||
(nameMouseArea.containsMouse && !tabBackground.editableName)) &&
!backgroundCard.isSelected
PropertyChanges {
target: backgroundCard
color: StudioTheme.Values.themeControlOutline
border.width: 0
}
},
State {
name: "hovered"
when: (rectMouseArea.containsMouse || removeButton.hovered ||
(nameMouseArea.containsMouse && !tabBackground.editableName)) &&
!backgroundCard.isSelected
PropertyChanges {
target: backgroundCard
color: StudioTheme.Values.themeControlBackgroundPressed
border.width: 1
border.color: StudioTheme.Values.themeInteraction
}
},
State {
name: "selected"
when: backgroundCard.isSelected
PropertyChanges {
target: backgroundCard
color:StudioTheme.Values.themeInteraction
border.width: 1
border.color: StudioTheme.Values.themeControlBackgroundPressed
}
}
]
Item {
id: presetNameBox
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.preferredWidth: backgroundCard.width - 2
Layout.preferredHeight: backgroundCard.height - gradientRect.height - 4
Layout.bottomMargin: 4
ColumnLayout {
spacing: 2
anchors.fill: parent
property bool edit: false
Rectangle {
id: gradientRect
width: 150
height: 150
id: nameBackgroundColor
enabled: tabBackground.editableName
color: "transparent"
radius: 16
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.topMargin: 2
visible: true
anchors.fill: parent
}
gradient: Gradient {
id: showGr
}
ToolTipArea {
id: nameMouseArea
anchors.fill: parent
tooltip: nameText.text
propagateComposedEvents: true
Component {
id: stopComponent
GradientStop {}
}
Component.onCompleted: {
var stopsAmount = stopListSize;
var newStops = [];
for (var i = 0; i < stopsAmount; i++) {
newStops.push( stopComponent.createObject(showGr, { "position": stopsPosList[i], "color": stopsColorList[i] }) );
onClicked: {
if (!tabBackground.editableName) {
backgroundCard.selectPreset(index)
return
}
showGr.stops = newStops;
}
AbstractButton {
id: removeButton
visible: editableName && (rectMouseArea.containsMouse || removeButton.hovered)
backgroundRadius: StudioTheme.Values.smallRectWidth
anchors.right: parent.right
anchors.rightMargin: 5
anchors.top: parent.top
anchors.topMargin: 5
width: Math.round(StudioTheme.Values.smallRectWidth)
height: Math.round(StudioTheme.Values.smallRectWidth)
buttonIcon: StudioTheme.Constants.closeCross
onClicked: tabBackground.deleteButtonClicked(index)
presetNameBox.edit = true
nameInput.forceActiveFocus()
// have to select text like this, otherwise there is an issue with long names
nameInput.cursorPosition = 0
nameInput.cursorPosition = nameInput.length
nameInput.selectAll()
}
}
Item {
id: presetNameBox
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.preferredWidth: backgroundCard.width - 2
Layout.preferredHeight: backgroundCard.height - gradientRect.height - 4
Layout.bottomMargin: 4
property bool edit: false
Rectangle {
id: nameBackgroundColor
enabled: tabBackground.editableName
color: "transparent"
radius: 16
visible: true
anchors.fill: parent
}
ToolTipArea {
id: nameMouseArea
anchors.fill: parent
tooltip: nameText.text
propagateComposedEvents: true
onClicked: {
if (!tabBackground.editableName) {
backgroundCard.selectPreset(index)
return
}
presetNameBox.edit = true
nameInput.forceActiveFocus()
// have to select text like this, otherwise there is an issue with long names
nameInput.cursorPosition = 0
nameInput.cursorPosition = nameInput.length
nameInput.selectAll()
}
}
Text {
id: nameText
text: presetName
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: StudioTheme.Values.themeTextColor
elide: Text.ElideMiddle
maximumLineCount: 1
}
TextInput {
id: nameInput
enabled: tabBackground.editableName
visible: false
text: presetName
anchors.fill: parent
anchors.leftMargin: 5
anchors.rightMargin: 5
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: TextInput.AlignVCenter
color: StudioTheme.Values.themeTextColor
selectionColor: StudioTheme.Values.themeInteraction
selectByMouse: true
activeFocusOnPress: true
wrapMode: TextInput.NoWrap
clip: true
onEditingFinished: {
nameText.text = text
tabBackground.presetNameChanged(index, text)
presetNameBox.edit = false
}
Keys.onPressed: {
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
event.accepted = true
nameInput.editingFinished()
nameInput.focus = false
}
if (event.key === Qt.Key_Escape) {
event.accepted = true
nameInput.text = nameText.text
nameInput.focus = false
}
}
}
states: [
State {
name: "default"
when: tabBackground.editableName && !nameMouseArea.containsMouse && !presetNameBox.edit
PropertyChanges {
target: nameBackgroundColor
color: "transparent"
border.width: 0
}
PropertyChanges { target: nameText; visible: true }
PropertyChanges { target: nameInput; visible: false }
},
State {
name: "hovered"
when: tabBackground.editableName && nameMouseArea.containsMouse && !presetNameBox.edit
PropertyChanges {
target: nameBackgroundColor
color: StudioTheme.Values.themeControlBackgroundPressed
border.width: 0
}
PropertyChanges { target: nameText; visible: true }
PropertyChanges { target: nameInput; visible: false }
},
State {
name: "edit"
when: tabBackground.editableName && presetNameBox.edit
PropertyChanges {
target: nameBackgroundColor
color: StudioTheme.Values.themeControlBackgroundPressed
border.color: StudioTheme.Values.themeInteraction
border.width: 1
}
PropertyChanges { target: nameText; visible: false }
PropertyChanges { target: nameInput; visible: true }
}
]
Text {
id: nameText
text: presetName
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: StudioTheme.Values.themeTextColor
elide: Text.ElideMiddle
maximumLineCount: 1
}
TextInput {
id: nameInput
enabled: tabBackground.editableName
visible: false
text: presetName
anchors.fill: parent
anchors.leftMargin: 5
anchors.rightMargin: 5
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: TextInput.AlignVCenter
color: StudioTheme.Values.themeTextColor
selectionColor: StudioTheme.Values.themeInteraction
selectByMouse: true
activeFocusOnPress: true
wrapMode: TextInput.NoWrap
clip: true
onEditingFinished: {
nameText.text = text
tabBackground.presetNameChanged(index, text)
presetNameBox.edit = false
}
Keys.onPressed: {
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
event.accepted = true
nameInput.editingFinished()
nameInput.focus = false
}
if (event.key === Qt.Key_Escape) {
event.accepted = true
nameInput.text = nameText.text
nameInput.focus = false
}
}
}
states: [
State {
name: "default"
when: tabBackground.editableName && !nameMouseArea.containsMouse && !presetNameBox.edit
PropertyChanges {
target: nameBackgroundColor
color: "transparent"
border.width: 0
}
PropertyChanges { target: nameText; visible: true }
PropertyChanges { target: nameInput; visible: false }
},
State {
name: "hovered"
when: tabBackground.editableName && nameMouseArea.containsMouse && !presetNameBox.edit
PropertyChanges {
target: nameBackgroundColor
color: StudioTheme.Values.themeControlBackgroundPressed
border.width: 0
}
PropertyChanges { target: nameText; visible: true }
PropertyChanges { target: nameInput; visible: false }
},
State {
name: "edit"
when: tabBackground.editableName && presetNameBox.edit
PropertyChanges {
target: nameBackgroundColor
color: StudioTheme.Values.themeControlBackgroundPressed
border.color: StudioTheme.Values.themeInteraction
border.width: 1
}
PropertyChanges { target: nameText; visible: false }
PropertyChanges { target: nameInput; visible: true }
}
]
}
}
}

38
share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerTextFieldStyle.qml → share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HorizontalScrollBar.qml
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
@@ -23,25 +23,29 @@
**
****************************************************************************/
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import QtQuickDesignerTheme 1.0
import QtQuick 2.15
import QtQuick.Controls 2.15
import StudioTheme 1.0 as StudioTheme
TextFieldStyle {
selectionColor: Theme.color(Theme.PanelTextColorLight)
selectedTextColor: Theme.color(Theme.PanelTextColorDark)
textColor: Theme.color(Theme.PanelTextColorLight)
placeholderTextColor: Theme.color(Theme.PanelTextColorMid)
ScrollBar {
id: scrollBar
padding.top: 4
padding.bottom: 4
property bool scrollBarVisible: parent.childrenRect.width > parent.width
orientation: Qt.Horizontal
policy: scrollBar.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
x: 0
y: parent.height - height
width: parent.availableWidth
- (parent.bothVisible ? parent.verticalThickness : 0)
padding: 0
background: Rectangle {
implicitWidth: 100
implicitHeight: font.pixelSize + padding.top + padding.bottom
color: Theme.color(Theme.FancyToolButtonSelectedColor)
border.color: Theme.qmlDesignerBackgroundColorDarker()
color: StudioTheme.Values.themeSectionHeadBackground
}
contentItem: Rectangle {
implicitHeight: StudioTheme.Values.scrollBarThickness
color: StudioTheme.Values.themeScrollBarHandle
}
renderType: Text.NativeRendering
}

33
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconLabel.qml
View File

@@ -23,31 +23,16 @@
**
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.0
import QtQuick 2.15
import HelperWidgets 2.0
import StudioTheme 1.0 as StudioTheme
Item {
id: label
width: parent.width < 300 ? 80 : Math.min(140, parent.width - 220)
height: 16
property alias source: image.source
Label {
id: myLabel
Item {
width: 16
height: 16
Image {
id: image
anchors.fill: parent
}
property alias icon: myLabel.text
}
Layout.preferredWidth: width
Layout.minimumWidth: width
Layout.maximumWidth: width
// Component.onCompleted: {
// label.Layout.preferredWidth = width
// }
text: StudioTheme.Constants.actionIcon
font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: StudioTheme.Values.myIconFontSize
}

36
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml
View File

@@ -23,13 +23,37 @@
**
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import "../../../common/"
import QtQuick 2.15
import QtQuick.Controls 2.15
import StudioTheme 1.0 as StudioTheme
Controls.ScrollView {
style: DesignerScrollViewStyle {
Flickable {
id: flickable
property alias horizontalThickness: horizontalScrollBar.height
property alias verticalThickness: verticalScrollBar.width
property bool bothVisible: verticalScrollBar.scrollBarVisible
&& horizontalScrollBar.scrollBarVisible
contentWidth: areaItem.childrenRect.width
contentHeight: areaItem.childrenRect.height
boundsBehavior: Flickable.StopAtBounds
default property alias content: areaItem.children
Item {
id: areaItem
}
ScrollBar.horizontal: HorizontalScrollBar {
id: horizontalScrollBar
parent: flickable
scrollBarVisible: areaItem.childrenRect.width > flickable.width
}
ScrollBar.vertical: VerticalScrollBar {
id: verticalScrollBar
parent: flickable
scrollBarVisible: areaItem.childrenRect.height > flickable.height
}
frameVisible: false
}

28
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Tab.qml → share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/VerticalScrollBar.qml
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
@@ -23,9 +23,29 @@
**
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick 2.15
import QtQuick.Controls 2.15
import StudioTheme 1.0 as StudioTheme
Controls.Tab {
ScrollBar {
id: scrollBar
property bool scrollBarVisible: parent.childrenRect.height > parent.height
orientation: Qt.Vertical
policy: scrollBar.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
x: parent.width - width
y: 0
height: parent.availableHeight
- (parent.bothVisible ? parent.horizontalThickness : 0)
padding: 0
background: Rectangle {
color: StudioTheme.Values.themeSectionHeadBackground
}
contentItem: Rectangle {
implicitWidth: StudioTheme.Values.scrollBarThickness
color: StudioTheme.Values.themeScrollBarHandle
}
}

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

@@ -39,11 +39,11 @@ SimpleColorPalette 2.0 SimpleColorPalette.qml
DoubleSpinBox 2.0 DoubleSpinBox.qml
SpinBox 2.0 SpinBox.qml
StandardTextSection 2.0 StandardTextSection.qml
Tab 2.0 Tab.qml
TabView 2.0 TabView.qml
ToolTipArea 2.0 ToolTipArea.qml
UrlChooser 2.0 UrlChooser.qml
PaddingSection 2.0 PaddingSection.qml
RoundedPanel 2.0 RoundedPanel.qml
ExpressionTextField 2.0 ExpressionTextField.qml
MarginSection 2.0 MarginSection.qml
HorizontalScrollBar 2.0 HorizontalScrollBar.qml
VerticalScrollBar 2.0 VerticalScrollBar.qml

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

@@ -116,7 +116,6 @@ Rectangle {
color: StudioTheme.Values.themeHoverHighlight
border.color: StudioTheme.Values.themeControlOutline
}
},
State {
name: "edit"

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

@@ -46,8 +46,7 @@ T.CheckBox {
implicitWidth: Math.max(
implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding
+ implicitIndicatorWidth + spacing + actionIndicator.width)
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(
implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,

53
share/qtcreator/qmldesigner/common/DesignerScrollViewStyle.qml → share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
@@ -23,38 +23,33 @@
**
****************************************************************************/
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import QtQuickDesignerTheme 1.0
import QtQuick 2.15
import QtQuick.Templates 2.15 as T
import StudioTheme 1.0 as StudioTheme
ScrollViewStyle {
readonly property color scrollbarColor: Theme.color(Theme.BackgroundColorDark)
readonly property color scrollBarHandleColor: Theme.color(Theme.QmlDesigner_ScrollBarHandleColor)
T.TabBar {
id: myButton
padding {left: 0; top: 0; right: 0; bottom: 0}
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
scrollBarBackground: Rectangle {
height: 10
width: 10
color: scrollbarColor
}
handle: Item {
implicitWidth: 10
implicitHeight: 10
Rectangle {
anchors.fill: parent
color: scrollBarHandleColor
}
spacing: 0
bottomPadding: 4
contentItem: ListView {
model: myButton.contentModel
currentIndex: myButton.currentIndex
spacing: myButton.spacing
orientation: ListView.Horizontal
boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded
snapMode: ListView.SnapToItem
}
decrementControl: Item {}
incrementControl: Item {}
corner: Item {}
//Even if the platform style reports touch support a scrollview should not be flickable.
Component.onCompleted: {
control.flickableItem.interactive = false
background: Rectangle {
color: StudioTheme.Values.themeTabLight
}
transientScrollBars: false
}

62
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TabView.qml → share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
@@ -23,40 +23,38 @@
**
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick.Controls.Styles 1.1
import QtQuickDesignerTheme 1.0
import QtQuick 2.15
import QtQuick.Templates 2.15 as T
import StudioTheme 1.0 as StudioTheme
Controls.TabView {
id: root
T.TabButton {
id: myButton
frameVisible: false
style: TabViewStyle {
frameOverlap: 0
frame: Item { }
tab: Rectangle {
color: styleData.selected ? Theme.qmlDesignerTabLight() : Theme.qmlDesignerTabDark()
implicitWidth: root.width/root.count + 2
implicitHeight: 28
Text {
id: text
font.bold: true
font.pixelSize: StudioTheme.Values.myFontSize
anchors.centerIn: parent
anchors.verticalCenterOffset: -1
text: styleData.title
renderType: Text.NativeRendering
color: styleData.selected ? Theme.qmlDesignerTabDark() : Theme.qmlDesignerTabLight()
}
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
Rectangle {
color:Theme.qmlDesignerTabLight()
width: parent.width
height: 4
anchors.bottom: parent.bottom
}
}
padding: 1
background: Rectangle {
id: buttonBackground
color: myButton.checked ? StudioTheme.Values.themeTabLight : StudioTheme.Values.themeTabDark
border.color: StudioTheme.Values.themeControlOutline
border.width: 0
}
contentItem: T.Label {
id: buttonIcon
color: myButton.checked ? StudioTheme.Values.themeTabDark : StudioTheme.Values.themeTabLight
font.weight: Font.Bold
//font.family: StudioTheme.Constants.font.family
font.pixelSize: StudioTheme.Values.myFontSize
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
anchors.fill: parent
renderType: Text.QtRendering
text: myButton.text
}
}

2
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir
View File

@@ -28,6 +28,8 @@ SliderPopup 1.0 SliderPopup.qml
SpinBox 1.0 SpinBox.qml
SpinBoxIndicator 1.0 SpinBoxIndicator.qml
SpinBoxInput 1.0 SpinBoxInput.qml
TabBar 1.0 TabBar.qml
TabButton 1.0 TabButton.qml
TextArea 1.0 TextArea.qml
TextField 1.0 TextField.qml
TranslationIndicator 1.0 TranslationIndicator.qml

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

@@ -79,6 +79,8 @@ QtObject {
property real inputHorizontalPadding: Math.round(4 * values.scaleFactor)
property real scrollBarThickness: 10
// Theme Colors
// COLORS NOW COME FROM THE THEME FILES
@@ -117,6 +119,9 @@ QtObject {
property string themeTranslationIndicatorBorder: Theme.color(Theme.DStranlsationIndicatorBorder)
property string themeSectionHeadBackground: Theme.color(Theme.DSsectionHeadBackground)
property string themeTabDark: Theme.color(Theme.QmlDesigner_TabDark)
property string themeTabLight: Theme.color(Theme.QmlDesigner_TabLight)
// Taken out of Constants.js
property string themeChangedStateText: Theme.color(Theme.DSchangedStateText)
}

164
share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml
View File

@@ -23,13 +23,15 @@
**
****************************************************************************/
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import HelperWidgets 2.0
import QtQuick 2.15
import QtQuickDesignerTheme 1.0
import HelperWidgets 2.0
import StudioControls 1.0 as StudioControls
import StudioTheme 1.0 as StudioTheme
Rectangle {
id: myRoot
border.width: 1
property bool isBaseState
property bool isCurrentState
@@ -41,6 +43,8 @@ Rectangle {
property string delegateWhenConditionString
readonly property bool isDefaultState: isDefault
signal delegateInteraction
color: baseColor
border.color: Theme.qmlDesignerBorderColor()
@@ -50,38 +54,28 @@ Rectangle {
}
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton
onClicked: {
focus = true
root.currentStateInternalId = internalNodeId
contextMenu.dismiss() // close potentially open context menu
myRoot.delegateInteraction()
}
}
ToolButton {
StudioControls.AbstractButton {
id: removeStateButton
style: ButtonStyle {
background: Rectangle {
color: control.hovered ? Qt.lighter(baseColor, 1.2) : "transparent"
Image {
source: "image://icons/close"
height: 16
width: 16
}
}
}
buttonIcon: StudioTheme.Constants.closeCross
anchors.right: parent.right
anchors.rightMargin: 2
anchors.rightMargin: 4
anchors.verticalCenter: stateNameField.verticalCenter
height: 16
width: 16
visible: !isBaseState
onClicked: {
myRoot.delegateInteraction()
if (isDefaultState)
statesEditorModel.resetDefaultState()
@@ -89,86 +83,78 @@ Rectangle {
}
}
Image {
id: whenButton
visible: !isBaseState || (isBaseState && modelHasDefaultState)
width: 14
height: 14
x: 4
y: 6
source: {
if (whenMouseArea.containsMouse)
return "image://icons/submenu"
return delegateHasWhenCondition ? "image://icons/expression" : "image://icons/placeholder"
StudioControls.Menu {
id: contextMenu
StudioControls.MenuItem {
enabled: !isBaseState
text: qsTr("Set when Condition")
onTriggered: {
bindingEditor.showWidget()
bindingEditor.text = delegateWhenConditionString
bindingEditor.prepareBindings()
}
}
MouseArea {
id: whenMouseArea
hoverEnabled: true
anchors.fill: parent
onClicked: contextMenu.popup()
StudioControls.MenuItem {
enabled: !isBaseState && delegateHasWhenCondition
text: qsTr("Reset when Condition")
onTriggered: {
statesEditorModel.resetWhenCondition(internalNodeId)
}
}
Menu {
id: contextMenu
MenuItem {
visible: !isBaseState
text: qsTr("Set when Condition")
onTriggered: {
bindingEditor.showWidget()
bindingEditor.text = delegateWhenConditionString
bindingEditor.prepareBindings()
}
StudioControls.MenuItem {
enabled: !isBaseState && !isDefaultState
text: qsTr("Set as Default")
onTriggered: {
statesEditorModel.setStateAsDefault(internalNodeId)
}
}
MenuItem {
visible: !isBaseState && delegateHasWhenCondition
text: qsTr("Reset when Condition")
onTriggered: {
statesEditorModel.resetWhenCondition(internalNodeId)
}
StudioControls.MenuItem {
enabled: (!isBaseState && isDefaultState) || (isBaseState && modelHasDefaultState)
text: qsTr("Reset Default")
onTriggered: {
statesEditorModel.resetDefaultState()
}
}
MenuItem {
visible: !isBaseState && !isDefaultState
text: qsTr("Set as Default")
onTriggered: {
statesEditorModel.setStateAsDefault(internalNodeId)
}
}
onClosed: {
stateNameField.actionIndicator.forceVisible = false
}
MenuItem {
visible: (!isBaseState && isDefaultState) || (isBaseState && modelHasDefaultState)
text: qsTr("Reset Default")
onTriggered: {
statesEditorModel.resetDefaultState()
}
}
onOpened: {
myRoot.delegateInteraction()
}
}
TextField {
StudioControls.TextField {
id: stateNameField
y: 4
font.pixelSize: Theme.smallFontPixelSize()
anchors.left: whenButton.right
// use the spacing which the image to the delegate rectangle has
anchors.leftMargin: 4
anchors.right: removeStateButton.left
anchors.rightMargin: 4
style: DesignerTextFieldStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: font.pixelSize + padding.top + padding.bottom
color: ((isBaseState && modelHasDefaultState) ? "transparent"
: Theme.color(Theme.FancyToolButtonSelectedColor))
border.color: ((isBaseState && !modelHasDefaultState) || isDefaultState) ? "#ffd700"
: (isBaseState && modelHasDefaultState) ? "transparent"
: Theme.qmlDesignerBackgroundColorDarker()
}
actionIndicatorVisible: !isBaseState || (isBaseState && modelHasDefaultState)
actionIndicator.onClicked: {
stateNameField.actionIndicator.forceVisible = true
contextMenu.popup()
}
onEditChanged: {
if (contextMenu.open && stateNameField.edit)
contextMenu.dismiss()
}
actionIndicator.icon.text: delegateHasWhenCondition
? StudioTheme.Constants.actionIconBinding : StudioTheme.Constants.actionIcon
translationIndicatorVisible: false
y: 4
anchors.left: parent.left
// use the spacing which the image to the delegate rectangle has
anchors.leftMargin: (isBaseState ? StudioTheme.Values.height : 0) + 4
anchors.right: removeStateButton.left
anchors.rightMargin: 2
readOnly: isBaseState
onActiveFocusChanged: {
@@ -188,7 +174,7 @@ Rectangle {
stateNameField.oldValue = stateNameField.text
if (stateNameField.text != delegateStateName)
if (stateNameField.text !== delegateStateName)
statesEditorModel.renameState(internalNodeId, stateNameField.text)
}
}
@@ -220,8 +206,8 @@ Rectangle {
Text {
id: stateDefaultIndicator
anchors.left: whenButton.left
anchors.leftMargin: 0
anchors.left: parent.left
anchors.leftMargin: StudioTheme.Values.height
anchors.right: removeStateButton.left
anchors.rightMargin: 4
anchors.bottom: parent.bottom

132
share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml
View File

@@ -23,32 +23,33 @@
**
****************************************************************************/
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import "../common"
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuickDesignerTheme 1.0
import HelperWidgets 2.0
import StudioControls 1.0 as StudioControls
import StudioTheme 1.0 as StudioTheme
FocusScope {
id: root
height: expanded ? 192 : 40
height: (root.expanded ? 192 : 40) + StudioTheme.Values.scrollBarThickness
signal createNewState
signal deleteState(int internalNodeId)
signal duplicateCurrentState
property int stateImageSize: 180
property int delegateWidth: stateImageSize + 44
property int padding: 2
property int delegateHeight: root.height - padding * 2 + 1
property int delegateWidth: root.stateImageSize + 44
property int delegateHeight: root.height - StudioTheme.Values.scrollBarThickness - root.padding * 2 + 1
property int innerSpacing: 0
property int currentStateInternalId : 0
property int currentStateInternalId: 0
property bool expanded: true
Connections {
target: statesEditorModel
onChangedToState: root.currentStateInternalId = n
function onChangedToState(n) { root.currentStateInternalId = n }
}
SystemPalette {
@@ -66,35 +67,41 @@ FocusScope {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.LeftButton)
if (mouse.button === Qt.LeftButton) {
contextMenu.dismiss()
focus = true
else if (mouse.button === Qt.RightButton)
} else if (mouse.button === Qt.RightButton) {
contextMenu.popup()
}
}
Menu {
StudioControls.Menu {
id: contextMenu
MenuItem {
StudioControls.MenuItem {
text: root.expanded ? qsTr("Collapse") : qsTr("Expand")
onTriggered: {
root.expanded = !root.expanded
}
}
}
}
function closeContextMenu() {
if (contextMenu.open)
contextMenu.dismiss()
}
Item {
id: addStateItem
property int buttonLeftSpacing: 8 * (expanded ? 1 : 2)
property int buttonLeftSpacing: 8 * (root.expanded ? 1 : 2)
anchors.right: parent.right
width: delegateHeight / 2 + buttonLeftSpacing
height: delegateHeight
width: root.delegateHeight / 2 + buttonLeftSpacing
height: root.delegateHeight
Button {
AbstractButton {
id: addStateButton
visible: canAddNewStates
@@ -106,56 +113,69 @@ FocusScope {
width: Math.max(parent.height / 2 - 8, 18)
height: width
onClicked: root.createNewState()
onClicked: {
root.closeContextMenu()
root.createNewState()
}
style: ButtonStyle {
background: Rectangle {
property color buttonBaseColor: Qt.darker(Theme.qmlDesignerBackgroundColorDarkAlternate(), 1.1)
color: control.hovered ? Qt.lighter(buttonBaseColor, 1.2) : buttonBaseColor
border.color: Theme.qmlDesignerBorderColor()
border.width: 1
Image {
source: "image://icons/plus"
width: 16
height: 16
anchors.centerIn: parent
smooth: false
}
background: Rectangle {
property color buttonBaseColor: Qt.darker(Theme.qmlDesignerBackgroundColorDarkAlternate(), 1.1)
color: addStateButton.hovered ? Qt.lighter(buttonBaseColor, 1.2) : buttonBaseColor
border.color: Theme.qmlDesignerBorderColor()
border.width: 1
Image {
source: "image://icons/plus"
width: 16
height: 16
anchors.centerIn: parent
smooth: false
}
}
}
}
ScrollView {
ListView {
id: flickable
boundsBehavior: Flickable.StopAtBounds
clip: true
anchors.left: parent.left
anchors.right: addStateItem.left
height: delegateHeight
y: padding
anchors.leftMargin: padding
anchors.rightMargin: padding
height: root.delegateHeight + StudioTheme.Values.scrollBarThickness
y: root.padding
anchors.leftMargin: root.padding
anchors.rightMargin: root.padding
style: DesignerScrollViewStyle {
model: statesEditorModel
orientation: ListView.Horizontal
spacing: root.innerSpacing
delegate: StatesDelegate {
id: statesDelegate
width: root.delegateWidth
height: root.delegateHeight
isBaseState: 0 == internalNodeId
isCurrentState: root.currentStateInternalId == internalNodeId
baseColor: isCurrentState ? Theme.color(Theme.QmlDesigner_HighlightColor) : background.color
delegateStateName: stateName
delegateStateImageSource: stateImageSource
delegateStateImageSize: stateImageSize
delegateHasWhenCondition: hasWhenCondition
delegateWhenConditionString: whenConditionString
onDelegateInteraction: root.closeContextMenu()
}
ListView {
anchors.fill: parent
model: statesEditorModel
orientation: ListView.Horizontal
spacing: innerSpacing
property bool bothVisible: horizontal.scrollBarVisible && vertical.scrollBarVisible
delegate: StatesDelegate {
id: statesDelegate
width: delegateWidth
height: delegateHeight
isBaseState: 0 == internalNodeId
isCurrentState: root.currentStateInternalId == internalNodeId
baseColor: isCurrentState ? Theme.color(Theme.QmlDesigner_HighlightColor) : background.color
delegateStateName: stateName
delegateStateImageSource: stateImageSource
delegateStateImageSize: stateImageSize
delegateHasWhenCondition: hasWhenCondition
delegateWhenConditionString: whenConditionString
}
ScrollBar.horizontal: HorizontalScrollBar {
id: horizontal
parent: flickable
}
ScrollBar.vertical: VerticalScrollBar {
id: vertical
parent: flickable
}
}
}

1
src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp
View File

@@ -110,6 +110,7 @@ ItemLibraryWidget::ItemLibraryWidget(QWidget *parent) :
{{"highlightColor"}, Utils::StyleHelper::notTooBrightHighlightColor()}
}
);
m_itemViewQuickWidget->setClearColor(Theme::getColor(Theme::Color::QmlDesigner_BackgroundColorDarkAlternate));
/* create Resources view and its model */
m_resourcesFileSystemModel = new CustomFileSystemModel(this);