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)
}

32
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,24 +74,13 @@ ScrollView {
2 * cellVerticalMargin + cellVerticalSpacing
}
Rectangle {
id: background
anchors.fill: parent
color: styleConstants.backgroundColor
}
style: DesignerScrollViewStyle {
}
Flickable {
contentHeight: column.height
Column {
id: column
Repeater {
model: itemLibraryModel // to be set in Qml context
delegate: Section {
width: itemsView.viewport.width
width: itemsView.width -
(itemsView.verticalScrollBarVisible ? StudioTheme.Values.scrollBarThickness : 0)
caption: sectionName // to be set by model
visible: sectionVisible
topPadding: 2
@@ -124,5 +106,5 @@ ScrollView {
}
}
}
}
}

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

26
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,9 +251,6 @@ Section {
}
}
SectionLayout {
columns: 2
ItemFilterModel {
id: itemFilterModel
modelNodeBackendProperty: modelNodeBackend
@@ -254,6 +260,7 @@ Section {
Label {
text: qsTr("Align to")
}
SecondColumnLayout {
ComboBox {
id: alignToComboBox
Layout.fillWidth: true
@@ -267,9 +274,14 @@ Section {
}
}
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 {

56
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,22 +319,34 @@ 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
Tab {
title: backendValues.className.value
component: Column {
Column {
anchors.left: parent.left
anchors.right: parent.right
@@ -364,11 +376,8 @@ Rectangle {
property int loaderHeight: specificsOne.item.height + tabView.extraHeight
}
}
}
Tab {
title: qsTr("Layout")
component: Column {
Column {
anchors.left: parent.left
anchors.right: parent.right
@@ -388,12 +397,8 @@ Rectangle {
visible: !anchorBackend.isInLayout
}
}
}
Tab {
anchors.fill: parent
title: qsTr("Advanced")
component: Column {
Column {
anchors.left: parent.left
anchors.right: parent.right
@@ -406,4 +411,3 @@ Rectangle {
}
}
}
}

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: {

53
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,36 +148,14 @@ Rectangle {
width: 4
}
TabView {
anchors.left: parent.left
anchors.right: parent.right
frameVisible: false
id: tabView
height: Math.max(layoutSectionHeight, specficsHeight)
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 {
Column {
anchors.left: parent.left
anchors.right: parent.right
Loader {
id: specificsTwo
anchors.left: parent.left
anchors.right: parent.right
visible: theSource !== ""
id: specificsTwo;
sourceComponent: specificQmlComponent
property string theSource: specificQmlData
@@ -186,30 +164,13 @@ Rectangle {
active = false
active = true
}
property int loaderHeight: specificsTwo.item.height + tabView.extraHeight
onLoaderHeightChanged: tabView.specficsTwoHeight = loaderHeight
onLoaded: {
tabView.specficsTwoHeight = loaderHeight
}
}
Loader {
id: specificsOne
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
}
}
}
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
}

103
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
T.AbstractButton {
id: myButton
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
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 {
id: buttonBackground
implicitWidth: 100
implicitHeight: 23
radius: 3
gradient: control.pressed ? pressedGradient : gradient
Gradient{
id: pressedGradient
GradientStop{color: "#333" ; position: 0}
color: StudioTheme.Values.themeControlBackground
border.color: StudioTheme.Values.themeControlOutline
border.width: StudioTheme.Values.border
}
Gradient {
id: gradient
GradientStop {color: "#606060" ; position: 0}
GradientStop {color: "#404040" ; position: 0.07}
GradientStop {color: "#303030" ; position: 1}
}
Rectangle {
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
anchors.margins: -1
color: "transparent"
radius: 4
opacity: 0.3
visible: control.activeFocus
}
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 {

38
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,26 +75,30 @@ 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
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
@@ -121,7 +124,6 @@ Dialog {
}
}
}
}
RowLayout {
Layout.alignment: Qt.AlignBottom | Qt.AlignRight

29
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,11 +47,6 @@ Rectangle {
property real delegateHeight: 178
property real gridCellWidth: 160
ScrollView {
Layout.fillWidth: true
Layout.fillHeight: true
anchors.fill: parent
GridView {
id: gradientTable
Layout.fillWidth: true
@@ -66,6 +60,18 @@ Rectangle {
cellWidth: width / gridColumns
cellHeight: 185
property bool bothVisible: horizontal.scrollBarVisible && vertical.scrollBarVisible
ScrollBar.horizontal: HorizontalScrollBar {
id: horizontal
parent: gradientTable
}
ScrollBar.vertical: VerticalScrollBar {
id: vertical
parent: gradientTable
}
Component {
id: gradientDelegate
@@ -87,7 +93,7 @@ Rectangle {
gradientData.colors = stopsColorList
gradientData.stopsCount = stopListSize
gradientData.presetID = presetID
gradientData.presetType = presetTabView.currentIndex
gradientData.presetType = presetTabBar.currentIndex
if (gradientData.selectedItem != null)
gradientData.selectedItem.isSelected = false
@@ -318,4 +324,3 @@ Rectangle {
}
}
}
}

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
}

35
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
}
}
Layout.preferredWidth: width
Layout.minimumWidth: width
Layout.maximumWidth: width
// Component.onCompleted: {
// label.Layout.preferredWidth = width
// }
property alias icon: myLabel.text
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
}

60
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
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
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
anchors.centerIn: parent
anchors.verticalCenterOffset: -1
text: styleData.title
renderType: Text.NativeRendering
color: styleData.selected ? Theme.qmlDesignerTabDark() : Theme.qmlDesignerTabLight()
}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
anchors.fill: parent
renderType: Text.QtRendering
Rectangle {
color:Theme.qmlDesignerTabLight()
width: parent.width
height: 4
anchors.bottom: parent.bottom
}
}
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)
}

126
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,32 +83,11 @@ 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"
}
MouseArea {
id: whenMouseArea
hoverEnabled: true
anchors.fill: parent
onClicked: contextMenu.popup()
}
Menu {
StudioControls.Menu {
id: contextMenu
MenuItem {
visible: !isBaseState
StudioControls.MenuItem {
enabled: !isBaseState
text: qsTr("Set when Condition")
onTriggered: {
bindingEditor.showWidget()
@@ -123,52 +96,65 @@ Rectangle {
}
}
MenuItem {
visible: !isBaseState && delegateHasWhenCondition
StudioControls.MenuItem {
enabled: !isBaseState && delegateHasWhenCondition
text: qsTr("Reset when Condition")
onTriggered: {
statesEditorModel.resetWhenCondition(internalNodeId)
}
}
MenuItem {
visible: !isBaseState && !isDefaultState
StudioControls.MenuItem {
enabled: !isBaseState && !isDefaultState
text: qsTr("Set as Default")
onTriggered: {
statesEditorModel.setStateAsDefault(internalNodeId)
}
}
MenuItem {
visible: (!isBaseState && isDefaultState) || (isBaseState && modelHasDefaultState)
StudioControls.MenuItem {
enabled: (!isBaseState && isDefaultState) || (isBaseState && modelHasDefaultState)
text: qsTr("Reset Default")
onTriggered: {
statesEditorModel.resetDefaultState()
}
}
onClosed: {
stateNameField.actionIndicator.forceVisible = false
}
onOpened: {
myRoot.delegateInteraction()
}
}
TextField {
StudioControls.TextField {
id: stateNameField
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
font.pixelSize: Theme.smallFontPixelSize()
anchors.left: whenButton.right
anchors.left: parent.left
// use the spacing which the image to the delegate rectangle has
anchors.leftMargin: 4
anchors.leftMargin: (isBaseState ? StudioTheme.Values.height : 0) + 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()
}
}
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

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

@@ -23,24 +23,25 @@
**
****************************************************************************/
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
@@ -48,7 +49,7 @@ FocusScope {
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,12 +113,14 @@ 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
color: addStateButton.hovered ? Qt.lighter(buttonBaseColor, 1.2) : buttonBaseColor
border.color: Theme.qmlDesignerBorderColor()
border.width: 1
Image {
@@ -124,29 +133,28 @@ FocusScope {
}
}
}
}
ScrollView {
anchors.left: parent.left
anchors.right: addStateItem.left
height: delegateHeight
y: padding
anchors.leftMargin: padding
anchors.rightMargin: padding
style: DesignerScrollViewStyle {
}
ListView {
anchors.fill: parent
id: flickable
boundsBehavior: Flickable.StopAtBounds
clip: true
anchors.left: parent.left
anchors.right: addStateItem.left
height: root.delegateHeight + StudioTheme.Values.scrollBarThickness
y: root.padding
anchors.leftMargin: root.padding
anchors.rightMargin: root.padding
model: statesEditorModel
orientation: ListView.Horizontal
spacing: innerSpacing
spacing: root.innerSpacing
delegate: StatesDelegate {
id: statesDelegate
width: delegateWidth
height: delegateHeight
width: root.delegateWidth
height: root.delegateHeight
isBaseState: 0 == internalNodeId
isCurrentState: root.currentStateInternalId == internalNodeId
baseColor: isCurrentState ? Theme.color(Theme.QmlDesigner_HighlightColor) : background.color
@@ -155,7 +163,19 @@ FocusScope {
delegateStateImageSize: stateImageSize
delegateHasWhenCondition: hasWhenCondition
delegateWhenConditionString: whenConditionString
}
onDelegateInteraction: root.closeContextMenu()
}
property bool bothVisible: horizontal.scrollBarVisible && vertical.scrollBarVisible
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);