QmlDesigner: Fix SearchBox related QML toolbars

Change-Id: I88962fe48acd4345c29233cb00f72ec2ac6b6ca9
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibrary.qml

@@ -37,12 +37,15 @@ Item {
 
             Column {
                 anchors.fill: parent
-                padding: 6
+                anchors.topMargin: 6
+                anchors.bottomMargin: 6
+                anchors.leftMargin: 10
+                anchors.rightMargin: 10
                 spacing: 12
 
                 StudioControls.SearchBox {
                     id: searchBox
-                    width: parent.width - (parent.padding * 2)
+                    width: parent.width
                     style: StudioTheme.Values.searchControlStyle
                     enabled: {
                         if (tabBar.currIndex === 0) { // Materials tab
@@ -66,7 +69,7 @@ Item {
 
                 ContentLibraryTabBar {
                     id: tabBar
-                    width: parent.width - (parent.padding * 2)
+                    width: parent.width
                     height: StudioTheme.Values.toolbarHeight
                     tabsModel: [{name: qsTr("Materials"),    icon: StudioTheme.Constants.material_medium},
                                 {name: qsTr("Textures"),     icon: StudioTheme.Constants.textures_medium},

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabBar.qml

@@ -6,26 +6,24 @@ import HelperWidgets 2.0 as HelperWidgets
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
-Item {
+Row {
     id: root
+
     property int currIndex: 0
     property alias tabsModel: repeater.model
 
-    Row {
+    spacing: 6
-        leftPadding: 6
-        rightPadding: 6
-        spacing: 6
-        Repeater {
-            id: repeater
 
-            ContentLibraryTabButton {
+    Repeater {
-                required property int index
+        id: repeater
-                required property var modelData
+
-                name: modelData.name
+        ContentLibraryTabButton {
-                icon: modelData.icon
+            required property int index
-                selected: root.currIndex === index
+            required property var modelData
-                onClicked: root.currIndex = index
+            name: modelData.name
-            }
+            icon: modelData.icon
+            selected: root.currIndex === index
+            onClicked: root.currIndex = index
         }
     }
 }

share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml

@@ -135,12 +135,15 @@ Item {
             Column {
                 id: toolbarColumn
                 anchors.fill: parent
-                padding: 6
+                anchors.topMargin: 6
+                anchors.bottomMargin: 6
+                anchors.leftMargin: 10
+                anchors.rightMargin: 10
                 spacing: 12
 
                 StudioControls.SearchBox {
                     id: searchBox
-                    width: parent.width - (parent.padding * 2)
+                    width: parent.width
                     style: StudioTheme.Values.searchControlStyle
                     onSearchChanged: (searchText) => {
                         updateSearchFilterTimer.restart()
@@ -149,10 +152,8 @@ Item {
 
                 Row {
                     id: buttonRow
-                    width: parent.width - (parent.padding * 2)
+                    width: parent.width
                     height: StudioTheme.Values.toolbarHeight
-                    leftPadding: 6
-                    rightPadding: 6
                     spacing: 6
 
                     HelperWidgets.AbstractButton {

share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml

@@ -163,6 +163,7 @@ Item {
         width: parent.width
         height: parent.height
         spacing: 5
+
         Rectangle {
             width: parent.width
             height: StudioTheme.Values.doubleToolbarHeight
@@ -170,21 +171,23 @@ Item {
 
             Column {
                 anchors.fill: parent
-                padding: 6
+                anchors.topMargin: 6
+                anchors.bottomMargin: 6
+                anchors.leftMargin: 10
+                anchors.rightMargin: 10
                 spacing: 12
 
-                    StudioControls.SearchBox {
+                StudioControls.SearchBox {
-                        id: searchBox
+                    id: searchBox
-                        width: parent.width - (parent.padding * 2)
+                    width: parent.width
-                        style: StudioTheme.Values.searchControlStyle
+                    style: StudioTheme.Values.searchControlStyle
-                    }
+                }
 
                 Row {
-                    width: parent.width - (parent.padding * 2)
+                    width: parent.width
                     height: StudioTheme.Values.toolbarHeight
-                    leftPadding: 6
-                    rightPadding: 6
                     spacing: 6
+
                     HelperWidgets.AbstractButton {
                         id: addModuleButton
                         style: StudioTheme.Values.viewBarButtonStyle
@@ -195,6 +198,7 @@ Item {
                 }
             }
         }
+
         Loader {
             id: loader
             width: col.width

share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml

@@ -94,8 +94,8 @@ Item {
 
     function selectNextVisibleItem(delta)
     {
-        if (searchBox.hasActiveFocus)
+        if (searchBox.activeFocus)
-            return;
+            return
 
         let targetIdx = -1
         let newTargetIdx = -1
@@ -202,8 +202,8 @@ Item {
 
     function handleEnterPress()
     {
-        if (searchBox.hasActiveFocus)
+        if (searchBox.activeFocus)
-            return;
+            return
 
         if (!materialBrowserModel.isEmpty && rootView.materialSectionFocused && materialsSection.expanded)
             materialBrowserModel.openMaterialEditor()
@@ -282,12 +282,15 @@ Item {
 
             Column {
                 anchors.fill: parent
-                padding: 6
+                anchors.topMargin: 6
+                anchors.bottomMargin: 6
+                anchors.leftMargin: 10
+                anchors.rightMargin: 10
                 spacing: 12
 
                 StudioControls.SearchBox {
                     id: searchBox
-                    width: parent.width - (parent.padding * 2)
+                    width: parent.width
                     style: StudioTheme.Values.searchControlStyle
 
                     onSearchChanged: (searchText) => {
@@ -296,10 +299,8 @@ Item {
                 }
 
                 Row {
-                    width: parent.width - (parent.padding * 2)
+                    width: parent.width
                     height: StudioTheme.Values.toolbarHeight
-                    leftPadding: 6
-                    rightPadding: 6
                     spacing: 6
 
                     HelperWidgets.AbstractButton {

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

@@ -2,145 +2,181 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
 
 import QtQuick
-import QtQuick.Controls as QC
+import QtQuick.Templates as T
 import QtQuickDesignerTheme 1.0
 import StudioTheme 1.0 as StudioTheme
 
-Item {
+T.TextField {
     id: control
 
     property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
 
-    property alias text: searchFilterText.text
-    property alias hasActiveFocus: searchFilterText.activeFocus
-
     signal searchChanged(string searchText)
 
-    function clear() {
-        searchFilterText.text = ""
-    }
-
     function isEmpty() {
-        return searchFilterText.text === ""
+        return control.text === ""
     }
 
-    implicitWidth: searchFilterText.width
+    width: control.style.controlSize.width
-    implicitHeight: searchFilterText.height
+    height: control.style.controlSize.height
 
-    QC.TextField {
+    horizontalAlignment: Qt.AlignLeft
-        id: searchFilterText
+    verticalAlignment: Qt.AlignVCenter
-        placeholderText: qsTr("Search")
-        placeholderTextColor: control.style.text.placeholder
-        color: control.style.text.idle
-        selectionColor: control.style.text.selection
-        selectedTextColor: control.style.text.selectedText
-        background: Rectangle {
-            id: textFieldBackground
-            color: control.style.background.idle
-            border.color: control.style.border.idle
-            border.width: control.style.borderWidth
-            radius: control.style.radius
 
-            // lets do this when the widget controls are removed so they remain consistent
+    leftPadding: 32
-//            Behavior on color {
+    rightPadding: 30
-//                ColorAnimation {
+
-//                    duration: StudioTheme.Values.hoverDuration
+    font.pixelSize: control.style.baseFontSize
-//                    easing.type: StudioTheme.Values.hoverEasing
+
-//                }
+    color: control.style.text.idle
-//           }
+    selectionColor: control.style.text.selection
+    selectedTextColor: control.style.text.selectedText
+    placeholderTextColor: control.style.text.placeholder
+
+    placeholderText: qsTr("Search")
+
+    selectByMouse: true
+    readOnly: false
+    hoverEnabled: true
+    clip: true
+
+    Text {
+        id: placeholder
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        text: control.placeholderText
+        font: control.font
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText
+                 && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
+
+    background: Rectangle {
+        id: textFieldBackground
+        color: control.style.background.idle
+        border.color: control.style.border.idle
+        border.width: control.style.borderWidth
+        radius: control.style.radius
+
+        /* TODO: Lets do this when the widget controls are removed so they remain consistent
+        Behavior on color {
+            ColorAnimation {
+                duration: StudioTheme.Values.hoverDuration
+                easing.type: StudioTheme.Values.hoverEasing
+            }
         }
+        */
+    }
 
-        height: control.style.controlSize.height
+    onTextChanged: control.searchChanged(text)
-        leftPadding: 32
+
-        rightPadding: 30
+    T.Label {
-        topPadding: 6
+        id: searchIcon
+        text: StudioTheme.Constants.search_small
+        font.family: StudioTheme.Constants.iconFont.family
+        font.pixelSize: control.style.baseIconFontSize
         anchors.left: parent.left
+        anchors.leftMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+        color: control.style.icon.idle
+    }
+
+    Rectangle { // x button
+        width: 16
+        height: 15
         anchors.right: parent.right
-        anchors.leftMargin: 5
         anchors.rightMargin: 5
-        selectByMouse: true
+        anchors.verticalCenter: parent.verticalCenter
-        hoverEnabled: true
+        visible: control.text !== ""
+        color: xMouseArea.containsMouse ? control.style.panel.background : "transparent"
 
-        onTextChanged: control.searchChanged(text)
+        T.Label {
-
+            text: StudioTheme.Constants.close_small
-        QC.Label {
-            text: StudioTheme.Constants.search_small
             font.family: StudioTheme.Constants.iconFont.family
             font.pixelSize: control.style.baseIconFontSize
-            anchors.left: parent.left
+            verticalAlignment: Text.AlignVCenter
-            anchors.leftMargin: 10
+            horizontalAlignment: Text.AlignHCenter
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.centerIn: parent
             color: control.style.icon.idle
         }
 
-        Rectangle { // x button
+        MouseArea {
-            width: 16
+            id: xMouseArea
-            height: 15
+            hoverEnabled: true
-            anchors.right: parent.right
+            anchors.fill: parent
-            anchors.rightMargin: 5
+            onClicked: control.text = ""
-            anchors.verticalCenter: parent.verticalCenter
+        }
-            visible: searchFilterText.text !== ""
+    }
-            color: xMouseArea.containsMouse ? control.style.panel.background : "transparent"
 
-            QC.Label {
+    states: [
-                text: StudioTheme.Constants.close_small
+        State {
-                font.family: StudioTheme.Constants.iconFont.family
+            name: "default"
-                font.pixelSize: control.style.baseIconFontSize
+            when: control.enabled && !control.hovered && !control.activeFocus
-                verticalAlignment: Text.AlignVCenter
+            PropertyChanges {
-                horizontalAlignment: Text.AlignHCenter
+                target: textFieldBackground
-                anchors.centerIn: parent
+                color: control.style.background.idle
+                border.color: control.style.border.idle
+            }
+            PropertyChanges {
+                target: control
+                placeholderTextColor: control.style.text.placeholder
+            }
+            PropertyChanges {
+                target: searchIcon
                 color: control.style.icon.idle
             }
-
+        },
-            MouseArea {
+        State {
-                id: xMouseArea
+            name: "hover"
-                hoverEnabled: true
+            when: control.enabled && control.hovered && !control.activeFocus
-                anchors.fill: parent
+            PropertyChanges {
-                onClicked: searchFilterText.text = ""
+                target: textFieldBackground
+                color: control.style.background.hover
+                border.color: control.style.border.hover
+            }
+            PropertyChanges {
+                target: control
+                placeholderTextColor: control.style.text.placeholderHover
+            }
+            PropertyChanges {
+                target: searchIcon
+                color: control.style.icon.idle
+            }
+        },
+        State {
+            name: "edit"
+            when: control.enabled && control.activeFocus
+            PropertyChanges {
+                target: textFieldBackground
+                color: control.style.background.interaction
+                border.color: control.style.border.interaction
+            }
+            PropertyChanges {
+                target: control
+                placeholderTextColor: control.style.text.placeholderInteraction
+            }
+            PropertyChanges {
+                target: searchIcon
+                color: control.style.icon.idle
+            }
+        },
+        State {
+            name: "disabled"
+            when: !control.enabled
+            PropertyChanges {
+                target: control
+                placeholderTextColor: control.style.text.disabled
+            }
+            PropertyChanges {
+                target: searchIcon
+                color: control.style.icon.disabled
             }
         }
-
+    ]
-        states: [
-            State {
-                name: "default"
-                when: !searchFilterText.hovered && !searchFilterText.activeFocus
-                PropertyChanges {
-                    target: textFieldBackground
-                    color: control.style.background.idle
-                    border.color: control.style.border.idle
-                }
-                PropertyChanges {
-                    target: searchFilterText
-                    placeholderTextColor: control.style.text.placeholder
-                }
-            },
-            State {
-                name: "hover"
-                when: control.enabled && searchFilterText.hovered && !searchFilterText.activeFocus
-                PropertyChanges {
-                    target: textFieldBackground
-                    color: control.style.background.hover
-                    border.color: control.style.border.hover
-                }
-
-                PropertyChanges {
-                    target: searchFilterText
-                    placeholderTextColor: control.style.text.placeholderHover
-                }
-            },
-            State {
-                name: "edit"
-                when: searchFilterText.activeFocus
-                PropertyChanges {
-                    target: textFieldBackground
-                    color: control.style.background.interaction
-                    border.color: control.style.border.interaction
-                }
-                PropertyChanges {
-                    target: searchFilterText
-                    placeholderTextColor: control.style.text.placeholderInteraction
-                }
-            }
-        ]
-    }
 }

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

@@ -20,7 +20,7 @@ ControlStyle {
         idle: Values.themeTextColor
         interaction: Values.themeTextSelectedTextColor
         hover: Values.themeTextColor
-        disabled: Values.themeTextColorDisabled
+        disabled: Values.themeToolbarIcon_blocked
         selection: Values.themeTextSelectionColor
         selectedText: Values.themeTextSelectedTextColor
         //placeholder: Values.themeTextColorDisabled
@@ -33,4 +33,12 @@ ControlStyle {
         hover: Values.controlOutline_toolbarHover
         interaction: Values.themeInteraction
     }
+
+    icon: ControlStyle.IconColors {
+        idle: Values.themeIconColor
+        interaction: Values.themeIconColorInteraction
+        selected: Values.themeIconColorSelected
+        hover: Values.themeIconColorHover
+        disabled: Values.themeToolbarIcon_blocked
+    }
 }