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,15 +6,14 @@ 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 {
-        leftPadding: 6
-        rightPadding: 6
     spacing: 6
+
     Repeater {
         id: repeater
 
@@ -27,5 +26,4 @@ Item {
             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 {
                     id: searchBox
-                        width: parent.width - (parent.padding * 2)
+                    width: parent.width
                     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,38 +2,61 @@
 // 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
+
+    horizontalAlignment: Qt.AlignLeft
+    verticalAlignment: Qt.AlignVCenter
+
+    leftPadding: 32
+    rightPadding: 30
+
+    font.pixelSize: control.style.baseFontSize
 
-    QC.TextField {
-        id: searchFilterText
-        placeholderText: qsTr("Search")
-        placeholderTextColor: control.style.text.placeholder
     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
@@ -41,29 +64,20 @@ Item {
         border.width: control.style.borderWidth
         radius: control.style.radius
 
-            // lets do this when the widget controls are removed so they remain consistent
+        /* TODO: Lets do this when the widget controls are removed so they remain consistent
-//            Behavior on color {
+        Behavior on color {
-//                ColorAnimation {
+            ColorAnimation {
-//                    duration: StudioTheme.Values.hoverDuration
+                duration: StudioTheme.Values.hoverDuration
-//                    easing.type: StudioTheme.Values.hoverEasing
+                easing.type: StudioTheme.Values.hoverEasing
-//                }
+            }
-//           }
+        }
+        */
     }
-
-        height: control.style.controlSize.height
-        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: control.searchChanged(text)
 
-        QC.Label {
+    T.Label {
+        id: searchIcon
         text: StudioTheme.Constants.search_small
         font.family: StudioTheme.Constants.iconFont.family
         font.pixelSize: control.style.baseIconFontSize
@@ -79,10 +93,10 @@ Item {
         anchors.right: parent.right
         anchors.rightMargin: 5
         anchors.verticalCenter: parent.verticalCenter
-            visible: searchFilterText.text !== ""
+        visible: control.text !== ""
         color: xMouseArea.containsMouse ? control.style.panel.background : "transparent"
 
-            QC.Label {
+        T.Label {
             text: StudioTheme.Constants.close_small
             font.family: StudioTheme.Constants.iconFont.family
             font.pixelSize: control.style.baseIconFontSize
@@ -96,51 +110,73 @@ Item {
             id: xMouseArea
             hoverEnabled: true
             anchors.fill: parent
-                onClicked: searchFilterText.text = ""
+            onClicked: control.text = ""
         }
     }
 
     states: [
         State {
             name: "default"
-                when: !searchFilterText.hovered && !searchFilterText.activeFocus
+            when: control.enabled && !control.hovered && !control.activeFocus
             PropertyChanges {
                 target: textFieldBackground
                 color: control.style.background.idle
                 border.color: control.style.border.idle
             }
             PropertyChanges {
-                    target: searchFilterText
+                target: control
                 placeholderTextColor: control.style.text.placeholder
             }
+            PropertyChanges {
+                target: searchIcon
+                color: control.style.icon.idle
+            }
         },
         State {
             name: "hover"
-                when: control.enabled && searchFilterText.hovered && !searchFilterText.activeFocus
+            when: control.enabled && control.hovered && !control.activeFocus
             PropertyChanges {
                 target: textFieldBackground
                 color: control.style.background.hover
                 border.color: control.style.border.hover
             }
-
             PropertyChanges {
-                    target: searchFilterText
+                target: control
                 placeholderTextColor: control.style.text.placeholderHover
             }
+            PropertyChanges {
+                target: searchIcon
+                color: control.style.icon.idle
+            }
         },
         State {
             name: "edit"
-                when: searchFilterText.activeFocus
+            when: control.enabled && control.activeFocus
             PropertyChanges {
                 target: textFieldBackground
                 color: control.style.background.interaction
                 border.color: control.style.border.interaction
             }
             PropertyChanges {
-                    target: searchFilterText
+                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
+            }
         }
     ]
-    }
 }

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