feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Fix SearchBox related QML toolbars

Browse Source 
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>
This commit is contained in:
Henning Gruendl
2023-02-13 11:20:27 +01:00
committed by Henning Gründl
parent f93f7f62d9
commit fbb79bb4e4
7 changed files with 204 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibrary.qml
View File

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

28
share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabBar.qml
View File

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

11
share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml
View File

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

22
share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
View File

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

19
share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml
View File

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

258
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SearchBox.qml
View File

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

10
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/SearchControlStyle.qml
View File

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