QmlDesigner: Controls 1 cleanup

* 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>

share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml

@@ -23,9 +23,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
-import QtQuick.Controls 1.1
+import QtQuick.Controls 2.15
-import QtQuick.Controls.Styles 1.0
 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)
             }

share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml

@@ -23,15 +23,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
-import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.15
-import QtQuick.Controls.Styles 1.0
-import "../common"
-
-import QtQuick.Layouts 1.0
-import HelperWidgets 2.0
-
 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 {
             }
         }
     }
-    }
+
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AlignDistributeSection.qml

@@ -32,10 +32,10 @@ import StudioTheme 1.0 as StudioTheme
 Section {
     anchors.left: parent.left
     anchors.right: parent.right
+
     caption: qsTr("Align")
 
-    ColumnLayout {
+    SectionLayout {
-        width: parent.width
         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 ||

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml

@@ -23,10 +23,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
-import HelperWidgets 2.0
+import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.0
+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
+                Column {
-                property int extraHeight: 40
-
-                Tab {
-                    title: backendValues.className.value
-
-                    component: Column {
                     anchors.left: parent.left
                     anchors.right: parent.right
 
@@ -364,11 +376,8 @@ Rectangle {
                         property int loaderHeight: specificsOne.item.height + tabView.extraHeight
                     }
                 }
-                }
 
-                Tab {
+                Column {
-                    title: qsTr("Layout")
-                    component: Column {
                     anchors.left: parent.left
                     anchors.right: parent.right
 
@@ -388,12 +397,8 @@ Rectangle {
                         visible: !anchorBackend.isInLayout
                     }
                 }
-                }
 
-                Tab {
+                Column {
-                    anchors.fill: parent
-                    title: qsTr("Advanced")
-                    component: Column {
                     anchors.left: parent.left
                     anchors.right: parent.right
 
@@ -405,5 +410,4 @@ Rectangle {
             }
         }
     }
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml

@@ -23,10 +23,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
-import HelperWidgets 2.0
 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 {
+            Column {
-                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 {
                 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
-
+                    source: specificsUrl
-                            id: specificsOne;
-                            source: specificsUrl;
-
-                            property int loaderHeight: specificsOne.item.height + tabView.extraHeight
-                            onLoaderHeightChanged: tabView.specficsHeight = loaderHeight
-
-                            onLoaded: {
-                                tabView.specficsOneHeight = loaderHeight
-                            }
-                        }
-                    }
                 }
             }
         }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Button.qml

@@ -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 2.15
-import QtQuick.Controls 1.1 as Controls
+import QtQuick.Templates 2.15 as T
-import QtQuick.Controls.Styles 1.1
+import StudioTheme 1.0 as StudioTheme
-import "Constants.js" as Constants
+
+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
+        color: StudioTheme.Values.themeControlBackground
-            Gradient{
+        border.color: StudioTheme.Values.themeControlOutline
-                id: pressedGradient
+        border.width: StudioTheme.Values.border
-                GradientStop{color: "#333" ; position: 0}
     }
-            Gradient {
+
-                id: gradient
+    contentItem: Text {
-                GradientStop {color: "#606060" ; position: 0}
+        id: buttonText
-                GradientStop {color: "#404040" ; position: 0.07}
+        color: StudioTheme.Values.themeTextColor
-                GradientStop {color: "#303030" ; position: 1}
+        font.family: StudioTheme.Constants.font.family
-            }
+        font.pixelSize: StudioTheme.Values.myFontSize
-            Rectangle {
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
         anchors.fill: parent
-                anchors.margins: -1
+        renderType: Text.QtRendering
-                color: "transparent"
+        text: myButton.text
-                radius: 4
+    }
-                opacity: 0.3
+
-                visible: control.activeFocus
+    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
             }
         }
+    ]
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ButtonRowButton.qml

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml

@@ -23,12 +23,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.11
+import QtQuick 2.15
-import QtQuick.Layouts 1.12
+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 {
+            StudioControls.TabBar {
-                id: presetTabView
+                id: presetTabBar
-                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
-                Layout.fillHeight: true
-                Layout.fillWidth: true
 
-                Tab {
+                anchors.left: parent.left
-                    title: qsTr("System Presets")
+                anchors.right: parent.right
-                    anchors.fill: parent
+
+                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

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml

@@ -23,12 +23,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.11
+import QtQuick 2.15
-import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.15
-import QtQuick.Dialogs 1.3
+import QtQuick.Layouts 1.15
-
-import HelperWidgets 2.0
 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
@@ -317,5 +323,4 @@ Rectangle {
             }
         }
     }
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HorizontalScrollBar.qml

@@ -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 2.15
-import QtQuick.Controls 1.1
+import QtQuick.Controls 2.15
-import QtQuick.Controls.Styles 1.1
+import StudioTheme 1.0 as StudioTheme
-import QtQuickDesignerTheme 1.0
 
-TextFieldStyle {
+ScrollBar {
-    selectionColor: Theme.color(Theme.PanelTextColorLight)
+    id: scrollBar
-    selectedTextColor: Theme.color(Theme.PanelTextColorDark)
-    textColor: Theme.color(Theme.PanelTextColorLight)
-    placeholderTextColor: Theme.color(Theme.PanelTextColorMid)
 
-    padding.top: 4
+    property bool scrollBarVisible: parent.childrenRect.width > parent.width
-    padding.bottom: 4
+
+    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
+        color: StudioTheme.Values.themeSectionHeadBackground
-        implicitHeight: font.pixelSize + padding.top + padding.bottom
+    }
-        color: Theme.color(Theme.FancyToolButtonSelectedColor)
+
-        border.color: Theme.qmlDesignerBackgroundColorDarker()
+    contentItem: Rectangle {
+        implicitHeight: StudioTheme.Values.scrollBarThickness
+        color: StudioTheme.Values.themeScrollBarHandle
     }
-    renderType: Text.NativeRendering
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconLabel.qml

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml

@@ -23,13 +23,37 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
-import QtQuick.Controls 1.0 as Controls
+import QtQuick.Controls 2.15
-import "../../../common/"
+import StudioTheme 1.0 as StudioTheme
 
-Controls.ScrollView {
+Flickable {
-    style: DesignerScrollViewStyle {
+    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
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/VerticalScrollBar.qml

@@ -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 2.15
-import QtQuick.Controls 1.0 as Controls
+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
+    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml

@@ -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 2.15
-import QtQuick.Controls 1.1
+import QtQuick.Templates 2.15 as T
-import QtQuick.Controls.Styles 1.1
+import StudioTheme 1.0 as StudioTheme
-import QtQuickDesignerTheme 1.0
 
-ScrollViewStyle {
+T.TabBar {
-    readonly property color scrollbarColor: Theme.color(Theme.BackgroundColorDark)
+    id: myButton
-    readonly property color scrollBarHandleColor: Theme.color(Theme.QmlDesigner_ScrollBarHandleColor)
 
-    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 {
+    spacing: 0
-        height: 10
+    bottomPadding: 4
-        width: 10
+
-        color: scrollbarColor
+    contentItem: ListView {
-    }
+        model: myButton.contentModel
-    handle: Item {
+        currentIndex: myButton.currentIndex
-        implicitWidth: 10
+
-        implicitHeight: 10
+        spacing: myButton.spacing
-        Rectangle {
+        orientation: ListView.Horizontal
-            anchors.fill: parent
+        boundsBehavior: Flickable.StopAtBounds
-            color: scrollBarHandleColor
+        flickableDirection: Flickable.AutoFlickIfNeeded
-        }
+        snapMode: ListView.SnapToItem
     }
 
-    decrementControl: Item {}
+    background: Rectangle {
-    incrementControl: Item {}
+        color: StudioTheme.Values.themeTabLight
-    corner: Item {}
-
-    //Even if the platform style reports touch support a scrollview should not be flickable.
-    Component.onCompleted: {
-        control.flickableItem.interactive = false
     }
-    transientScrollBars: false
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml

@@ -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 2.15
-import QtQuick.Controls 1.0 as Controls
+import QtQuick.Templates 2.15 as T
-import QtQuick.Controls.Styles 1.1
-import QtQuickDesignerTheme 1.0
 import StudioTheme 1.0 as StudioTheme
 
-Controls.TabView {
+T.TabButton {
-    id: root
+    id: myButton
 
-    frameVisible: false
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-    style: TabViewStyle {
+                            implicitContentWidth + leftPadding + rightPadding)
-        frameOverlap: 0
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
-        frame: Item { }
+                             implicitContentHeight + topPadding + bottomPadding)
-        tab: Rectangle {
+
-            color: styleData.selected ? Theme.qmlDesignerTabLight() : Theme.qmlDesignerTabDark()
+    padding: 1
-            implicitWidth: root.width/root.count + 2
+
-            implicitHeight: 28
+    background: Rectangle {
-            Text {
+        id: buttonBackground
-                id: text
+        color: myButton.checked ? StudioTheme.Values.themeTabLight : StudioTheme.Values.themeTabDark
-                font.bold: true
+        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
+        verticalAlignment: Text.AlignVCenter
-                anchors.verticalCenterOffset: -1
+        horizontalAlignment: Text.AlignHCenter
-                text: styleData.title
+        anchors.fill: parent
-                renderType: Text.NativeRendering
+        renderType: Text.QtRendering
-                color: styleData.selected ? Theme.qmlDesignerTabDark() : Theme.qmlDesignerTabLight()
-            }
 
-            Rectangle {
+        text: myButton.text
-                color:Theme.qmlDesignerTabLight()
-                width: parent.width
-                height: 4
-                anchors.bottom: parent.bottom
-            }
-        }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml

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

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml

@@ -23,13 +23,15 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.2
+import QtQuick 2.15
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.1
-import HelperWidgets 2.0
 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
-
+        buttonIcon: StudioTheme.Constants.closeCross
-        style: ButtonStyle {
-            background: Rectangle {
-                color: control.hovered ? Qt.lighter(baseColor, 1.2)  : "transparent"
-                Image {
-                    source: "image://icons/close"
-                    height: 16
-                    width: 16
-                }
-            }
-        }
-
-
         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 {
+    StudioControls.Menu {
-        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 {
         id: contextMenu
 
-            MenuItem {
+        StudioControls.MenuItem {
-                visible: !isBaseState
+            enabled: !isBaseState
             text: qsTr("Set when Condition")
             onTriggered: {
                 bindingEditor.showWidget()
@@ -123,52 +96,65 @@ Rectangle {
             }
         }
 
-            MenuItem {
+        StudioControls.MenuItem {
-                visible: !isBaseState && delegateHasWhenCondition
+            enabled: !isBaseState && delegateHasWhenCondition
             text: qsTr("Reset when Condition")
             onTriggered: {
                statesEditorModel.resetWhenCondition(internalNodeId)
             }
         }
 
-            MenuItem {
+        StudioControls.MenuItem {
-                visible: !isBaseState && !isDefaultState
+            enabled: !isBaseState && !isDefaultState
             text: qsTr("Set as Default")
             onTriggered: {
                 statesEditorModel.setStateAsDefault(internalNodeId)
             }
         }
 
-            MenuItem {
+        StudioControls.MenuItem {
-                visible: (!isBaseState && isDefaultState) || (isBaseState && modelHasDefaultState)
+            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: parent.left
-        anchors.left: whenButton.right
         // 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
+        anchors.rightMargin: 2
-        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()
-            }
-        }
         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.left: parent.left
-        anchors.leftMargin: 0
+        anchors.leftMargin: StudioTheme.Values.height
         anchors.right: removeStateButton.left
         anchors.rightMargin: 4
         anchors.bottom: parent.bottom

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml

@@ -23,32 +23,33 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.2
+import QtQuick 2.15
-import QtQuick.Controls 1.1
+import QtQuick.Controls 2.15
-import QtQuick.Controls.Styles 1.1
-import "../common"
 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
+        width: root.delegateHeight / 2 + buttonLeftSpacing
-        height: delegateHeight
+        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
+            width: root.delegateWidth
-                height: delegateHeight
+            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
         }
     }
 }

src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp

@@ -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);