From fbb79bb4e4036ca69dc0c541e62e7b00f815610f Mon Sep 17 00:00:00 2001 From: Henning Gruendl Date: Mon, 13 Feb 2023 11:20:27 +0100 Subject: [PATCH] QmlDesigner: Fix SearchBox related QML toolbars Change-Id: I88962fe48acd4345c29233cb00f72ec2ac6b6ca9 Reviewed-by: Brook Cronin Reviewed-by: Reviewed-by: Thomas Hartmann --- .../ContentLibrary.qml | 9 +- .../ContentLibraryTabBar.qml | 28 +- .../itemLibraryQmlSources/Assets.qml | 11 +- .../itemLibraryQmlSources/ItemsView.qml | 22 +- .../MaterialBrowser.qml | 19 +- .../imports/StudioControls/SearchBox.qml | 258 ++++++++++-------- .../StudioTheme/SearchControlStyle.qml | 10 +- 7 files changed, 204 insertions(+), 153 deletions(-) diff --git a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibrary.qml b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibrary.qml index d483cca2cd2..44a837f4428 100644 --- a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibrary.qml +++ b/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}, diff --git a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabBar.qml b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabBar.qml index 78f2fe6cf58..9cbd614a2d6 100644 --- a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabBar.qml +++ b/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 { - leftPadding: 6 - rightPadding: 6 - spacing: 6 - Repeater { - id: repeater + spacing: 6 - ContentLibraryTabButton { - required property int index - required property var modelData - name: modelData.name - icon: modelData.icon - selected: root.currIndex === index - onClicked: root.currIndex = index - } + Repeater { + id: repeater + + ContentLibraryTabButton { + required property int index + required property var modelData + name: modelData.name + icon: modelData.icon + selected: root.currIndex === index + onClicked: root.currIndex = index } } } diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml index 0924b8efe5c..f9943c6f75c 100644 --- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml +++ b/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 { diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml index c8dc0f2536a..009ca713f4c 100644 --- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml +++ b/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) - style: StudioTheme.Values.searchControlStyle - } + StudioControls.SearchBox { + id: searchBox + 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 diff --git a/share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml b/share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml index 5b998e9c955..d44870a087b 100644 --- a/share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml +++ b/share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml @@ -94,8 +94,8 @@ Item { function selectNextVisibleItem(delta) { - if (searchBox.hasActiveFocus) - return; + if (searchBox.activeFocus) + return let targetIdx = -1 let newTargetIdx = -1 @@ -202,8 +202,8 @@ Item { function handleEnterPress() { - if (searchBox.hasActiveFocus) - return; + if (searchBox.activeFocus) + 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 { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SearchBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SearchBox.qml index 767b3fcb714..260910879df 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SearchBox.qml +++ b/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 - implicitHeight: searchFilterText.height + width: control.style.controlSize.width + height: control.style.controlSize.height - 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 - background: Rectangle { - id: textFieldBackground - color: control.style.background.idle - border.color: control.style.border.idle - border.width: control.style.borderWidth - radius: control.style.radius + horizontalAlignment: Qt.AlignLeft + verticalAlignment: Qt.AlignVCenter - // 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 -// } -// } + leftPadding: 32 + rightPadding: 30 + + font.pixelSize: control.style.baseFontSize + + 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 - leftPadding: 32 - rightPadding: 30 - topPadding: 6 + onTextChanged: control.searchChanged(text) + + T.Label { + 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 - hoverEnabled: true + anchors.verticalCenter: parent.verticalCenter + visible: control.text !== "" + color: xMouseArea.containsMouse ? control.style.panel.background : "transparent" - onTextChanged: control.searchChanged(text) - - QC.Label { - text: StudioTheme.Constants.search_small + T.Label { + text: StudioTheme.Constants.close_small font.family: StudioTheme.Constants.iconFont.family font.pixelSize: control.style.baseIconFontSize - anchors.left: parent.left - anchors.leftMargin: 10 - anchors.verticalCenter: parent.verticalCenter + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + anchors.centerIn: parent color: control.style.icon.idle } - Rectangle { // x button - width: 16 - height: 15 - anchors.right: parent.right - anchors.rightMargin: 5 - anchors.verticalCenter: parent.verticalCenter - visible: searchFilterText.text !== "" - color: xMouseArea.containsMouse ? control.style.panel.background : "transparent" + MouseArea { + id: xMouseArea + hoverEnabled: true + anchors.fill: parent + onClicked: control.text = "" + } + } - QC.Label { - text: StudioTheme.Constants.close_small - font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: control.style.baseIconFontSize - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - anchors.centerIn: parent + states: [ + State { + name: "default" + when: control.enabled && !control.hovered && !control.activeFocus + PropertyChanges { + target: textFieldBackground + 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 { - id: xMouseArea - hoverEnabled: true - anchors.fill: parent - onClicked: searchFilterText.text = "" + }, + State { + name: "hover" + when: control.enabled && control.hovered && !control.activeFocus + PropertyChanges { + 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 - } - } - ] - } + ] } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/SearchControlStyle.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/SearchControlStyle.qml index 2c90379497d..f44fb0fa56c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/SearchControlStyle.qml +++ b/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 + } }