QmlDesigner: Implement Material Editor

Task-number: QDS-6438
Task-number: QDS-6439
Change-Id: I04e899a68aea665f0df8b65e21523632174ec76b
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Samuel Ghinet <samuel.ghinet@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

4 files changed, 9 insertions, 251 deletions

diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml
index a90dfa50f1..a8d0a53381 100644
--- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml
+++ b/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml
@@ -442,10 +442,12 @@ Item {
                 width: parent.width - addAssetButton.width - 5
             }
 
-            PlusButton {
+            IconButton {
                 id: addAssetButton
                 anchors.verticalCenter: parent.verticalCenter
                 tooltip: qsTr("Add a new asset to the project.")
+                icon: StudioTheme.Constants.plus
+                buttonSize: parent.height
 
                 onClicked: rootView.handleAddAsset()
             }
diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
index bc0dc79ef2..4771127ab8 100644
--- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
+++ b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
@@ -218,12 +218,15 @@ Item {
             SearchBox {
                 id: searchBox
 
-                width: parent.width - addAssetButton.width - 5
+                width: parent.width - addModuleButton.width - 5
             }
 
-            PlusButton {
-                id: addAssetButton
+            IconButton {
+                id: addModuleButton
+                anchors.verticalCenter: parent.verticalCenter
                 tooltip: qsTr("Add a module.")
+                icon: StudioTheme.Constants.plus
+                buttonSize: parent.height
 
                 onClicked: isAddModuleView = true
             }
diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/PlusButton.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/PlusButton.qml
deleted file mode 100644
index 31f69be996..0000000000
--- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/PlusButton.qml
+++ /dev/null
@@ -1,79 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2022 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator.
-**
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 as published by the Free Software
-** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-****************************************************************************/
-
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuickDesignerTheme 1.0
-import HelperWidgets 2.0 as HelperWidgets
-import StudioControls 1.0 as StudioControls
-import StudioTheme 1.0 as StudioTheme
-
-Rectangle {
-    id: root
-
-    property string tooltip: ""
-
-    signal clicked()
-
-    implicitWidth: 29
-    implicitHeight: 29
-    color: mouseArea.containsMouse && enabled
-           ? StudioTheme.Values.themeControlBackgroundHover
-           : StudioTheme.Values.themeControlBackground
-
-    Behavior on color {
-        ColorAnimation {
-            duration: StudioTheme.Values.hoverDuration
-            easing.type: StudioTheme.Values.hoverEasing
-        }
-    }
-
-    Label { // + sign
-        text: StudioTheme.Constants.plus
-        font.family: StudioTheme.Constants.iconFont.family
-        font.pixelSize: StudioTheme.Values.myIconFontSize
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-        anchors.centerIn: parent
-        color: root.enabled ? StudioTheme.Values.themeIconColor
-                            : StudioTheme.Values.themeIconColorDisabled
-        scale: mouseArea.containsMouse ? 1.4 : 1
-
-        Behavior on scale {
-            NumberAnimation {
-                duration: 300
-                easing.type: Easing.OutExpo
-            }
-        }
-    }
-
-    HelperWidgets.ToolTipArea {
-        id: mouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        onClicked: root.clicked()
-        tooltip: root.tooltip
-    }
-}
diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/SearchBox.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/SearchBox.qml
deleted file mode 100644
index 81ed5c11e4..0000000000
--- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/SearchBox.qml
+++ /dev/null
@@ -1,168 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2022 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator.
-**
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 as published by the Free Software
-** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-****************************************************************************/
-
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuickDesignerTheme 1.0
-import HelperWidgets 2.0 as HelperWidgets
-import StudioControls 1.0 as StudioControls
-import StudioTheme 1.0 as StudioTheme
-
-Item {
-    id: root
-
-    property alias text: searchFilterText.text
-
-    function clearSearchFilter()
-    {
-        searchFilterText.text = "";
-    }
-
-    function isEmpty()
-    {
-        return searchFilterText.text === "";
-    }
-
-    implicitWidth: searchFilterText.width
-    implicitHeight: searchFilterText.height
-
-    TextField {
-        id: searchFilterText
-
-        placeholderText: qsTr("Search")
-        placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor
-        color: StudioTheme.Values.themeTextColor
-        selectionColor: StudioTheme.Values.themeTextSelectionColor
-        selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor
-        background: Rectangle {
-            id: textFieldBackground
-            color: StudioTheme.Values.themeControlBackground
-            border.color: StudioTheme.Values.themeControlOutline
-            border.width: StudioTheme.Values.border
-
-            Behavior on color {
-                ColorAnimation {
-                    duration: StudioTheme.Values.hoverDuration
-                    easing.type: StudioTheme.Values.hoverEasing
-                }
-            }
-        }
-
-        height: StudioTheme.Values.defaultControlHeight
-
-        leftPadding: 32
-        rightPadding: 30
-        topPadding: 6
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.leftMargin: 5
-        anchors.rightMargin: 5
-        selectByMouse: true
-        hoverEnabled: true
-
-        onTextChanged: rootView.handleSearchfilterChanged(text)
-
-        Label {
-            text: StudioTheme.Constants.search
-            font.family: StudioTheme.Constants.iconFont.family
-            font.pixelSize: 16
-            anchors.left: parent.left
-            anchors.leftMargin: 7
-            anchors.verticalCenter: parent.verticalCenter
-            color: StudioTheme.Values.themeIconColor
-        }
-
-        Rectangle { // x button
-            width: 16
-            height: 15
-            anchors.right: parent.right
-            anchors.rightMargin: 5
-            anchors.verticalCenter: parent.verticalCenter
-            visible: searchFilterText.text !== ""
-            color: xMouseArea.containsMouse ? StudioTheme.Values.themePanelBackground
-                                            : "transparent"
-
-            Label {
-                text: StudioTheme.Constants.closeCross
-                font.family: StudioTheme.Constants.iconFont.family
-                font.pixelSize: StudioTheme.Values.myIconFontSize
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignHCenter
-                anchors.centerIn: parent
-                color: StudioTheme.Values.themeIconColor
-            }
-
-            MouseArea {
-                id: xMouseArea
-                hoverEnabled: true
-                anchors.fill: parent
-                onClicked: searchFilterText.text = ""
-            }
-        }
-
-        states: [
-            State {
-                name: "default"
-                when: !searchFilterText.hovered && !searchFilterText.activeFocus
-                PropertyChanges {
-                    target: textFieldBackground
-                    color: StudioTheme.Values.themeControlBackground
-                    border.color: StudioTheme.Values.themeControlOutline
-                }
-                PropertyChanges {
-                    target: searchFilterText
-                    placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor
-                }
-            },
-            State {
-                name: "hover"
-                when: searchFilterText.hovered && !searchFilterText.activeFocus
-                PropertyChanges {
-                    target: textFieldBackground
-                    color: StudioTheme.Values.themeControlBackgroundHover
-                    border.color: StudioTheme.Values.themeControlOutline
-                }
-
-                PropertyChanges {
-                    target: searchFilterText
-                    placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor
-                }
-            },
-            State {
-                name: "edit"
-                when: searchFilterText.activeFocus
-                PropertyChanges {
-                    target: textFieldBackground
-                    color: StudioTheme.Values.themeControlBackgroundInteraction
-                    border.color: StudioTheme.Values.themeControlOutlineInteraction
-                }
-                PropertyChanges {
-                    target: searchFilterText
-                    placeholderTextColor: StudioTheme.Values.themePlaceholderTextColorInteraction
-                }
-            }
-        ]
-    }
-}