From 26b436d98a14c7b167d3c9369d5e82753f6a805f Mon Sep 17 00:00:00 2001 From: youdiansaodongxi Date: Wed, 29 Nov 2023 16:13:50 +0800 Subject: [PATCH] fix(AppPage): change the searchbar ui --- qml/AppUI/AppPage.qml | 13 +++- qml/AppUI/AppPageHeader.qml | 107 --------------------------------- qml/AppUI/AppPageSearch.qml | 39 ++++++++++++ qml/AppUI/FullScreenHeader.qml | 2 +- qml/AppUI/NormalUI.qml | 2 +- qml/AppUI/SearchInputBar.qml | 21 ++++--- qml/qml.qrc | 1 + 7 files changed, 64 insertions(+), 121 deletions(-) create mode 100644 qml/AppUI/AppPageSearch.qml diff --git a/qml/AppUI/AppPage.qml b/qml/AppUI/AppPage.qml index e41ac0b..4c19201 100644 --- a/qml/AppUI/AppPage.qml +++ b/qml/AppUI/AppPage.qml @@ -21,6 +21,7 @@ import QtQuick.Layouts 1.12 import org.ukui.menu.core 1.0 Item { + property alias search: appPageSearch property alias header: appPageHeader property alias content: appPageContent @@ -29,13 +30,21 @@ Item { anchors.topMargin: 12 spacing: 0 - AppPageHeader { - id: appPageHeader + AppPageSearch { + id: appPageSearch Layout.fillWidth: true Layout.preferredHeight: 40 focusToPageContent: appPageContent } + AppPageHeader { + id: appPageHeader + visible: !appPageSearch.inputStatus + Layout.fillWidth: true + Layout.preferredHeight: 48 + focusToPageContent: appPageContent + } + AppPageContent { id: appPageContent appPageHeader: appPageHeader diff --git a/qml/AppUI/AppPageHeader.qml b/qml/AppUI/AppPageHeader.qml index 58468ff..38b4f3b 100644 --- a/qml/AppUI/AppPageHeader.qml +++ b/qml/AppUI/AppPageHeader.qml @@ -50,78 +50,6 @@ Item { Item { id: root - function changeToSearchState(keyEvent) { - state = "search"; - searchInputBar.text = keyEvent; - } - - state: "normal" - states: [ - State { - name: "normal" - PropertyChanges { target: searchBar; scale: 0.9; y: -pluginSelectionBar.height } - PropertyChanges { target: pluginSelectionBar; scale: 1.0; y: 0 } - StateChangeScript { script: pluginSelectMenu.model.reactivateProvider() } - }, - State { - name: "search" - PropertyChanges { target: searchBar; scale: 1.0; y: 0 } - PropertyChanges { target: pluginSelectionBar; scale: 0.9; y: pluginSelectionBar.height } - } - ] - - onStateChanged: { - if (isLiteMode) { - if (state === "search") { - setPluginSelectionVisible(false); - setSearchBarVisible(true); - } else { - setPluginSelectionVisible(true); - setSearchBarVisible(false); - } - } - } - - function setPluginSelectionVisible(vis) { - pluginSelectionBar.visible = vis; - pluginSelectMenu.visible = vis; - } - - function setSearchBarVisible(vis) { - searchBar.visible = vis; - if (vis) { - searchInputBar.providerId = "search"; - searchInputBar.textInputFocus(); - } - } - - transitions:[ - Transition { - to: "normal" - enabled: !isLiteMode - SequentialAnimation { - ScriptAction { - script: { setPluginSelectionVisible(true); } - } - NumberAnimation { easing.type: Easing.InOutQuad; properties: "scale,y"; duration: 300 } - ScriptAction { script: { setSearchBarVisible(false); } } - } - }, - Transition { - to: "search" - enabled: !isLiteMode - SequentialAnimation { - ScriptAction { - script: { setSearchBarVisible(true); } - } - NumberAnimation { easing.type: Easing.InOutQuad; properties: "scale,y"; duration: 300 } - ScriptAction { - script: { setPluginSelectionVisible(false); } - } - } - } - ] - Item { id: searchBar width: parent.width; height: 30 @@ -197,41 +125,6 @@ Item { font.bold: true } - ListView { - id: searchListView - Layout.preferredWidth: childrenRect.width - Layout.preferredHeight: 32 - Layout.minimumWidth: 32 - Layout.maximumWidth: 68 - Layout.alignment: Qt.AlignVCenter - - clip: true - spacing: 4 - orientation: ListView.Horizontal - interactive: false - activeFocusOnTab: true - - model: appPageHeaderUtils.model(PluginGroup.Button) - delegate: AppControls2.RoundButton { - width: height - height: ListView.view ? ListView.view.height : 0 - buttonIcon: model.icon - ToolTip.text: qsTr("Search App") - ToolTip.delay: 500 - ToolTip.visible: containsMouse - onClicked: { - root.state = "search"; - // 后续添加需求，可以用model数据设置 - // searchInputBar.providerId = model.id; - } - Keys.onPressed: { - if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { - root.state = "search"; - } - } - } - } - PluginSelectMenu { id: pluginSelectMenu Layout.preferredWidth: childrenRect.width diff --git a/qml/AppUI/AppPageSearch.qml b/qml/AppUI/AppPageSearch.qml new file mode 100644 index 0000000..4f61ea0 --- /dev/null +++ b/qml/AppUI/AppPageSearch.qml @@ -0,0 +1,39 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.5 +import org.ukui.menu.core 1.0 +import AppControls2 1.0 as AppControls2 +import org.ukui.menu.utils 1.0 + +Item { + property Item focusToPageContent + property bool inputStatus: false + id: appPageSearchBar + SearchInputBar { + id: searchInputBar + property string providerId: "search" + + anchors.fill: parent + anchors.leftMargin: 16 + anchors.rightMargin: 16 + radius: 6 //change theme + changeFocusTarget: focusToPageContent + visible: true + onTextChanged: { + if (text === "") { + appPageHeaderUtils.model(PluginGroup.SortMenuItem).reactivateProvider(); + inputStatus = false; + } else { + appPageHeaderUtils.activateProvider(providerId); + appPageHeaderUtils.startSearch(text); + inputStatus = true; + } + } + } + function changeToSearch(keyEvent) { + if (header.content === null) { + searchInputBar.text = keyEvent; + searchInputBar.textInputFocus(); + } + } +} + diff --git a/qml/AppUI/FullScreenHeader.qml b/qml/AppUI/FullScreenHeader.qml index 14140de..39ac80f 100644 --- a/qml/AppUI/FullScreenHeader.qml +++ b/qml/AppUI/FullScreenHeader.qml @@ -13,7 +13,7 @@ Item { id: searchInputBar width: 372; height: 36 anchors.centerIn: parent - radius: height / 2 + radius: 4 //change theme visible: opacity onTextChanged: { diff --git a/qml/AppUI/NormalUI.qml b/qml/AppUI/NormalUI.qml index 961ea0b..a0297e5 100644 --- a/qml/AppUI/NormalUI.qml +++ b/qml/AppUI/NormalUI.qml @@ -13,7 +13,7 @@ FocusScope { // 任意字符键焦点切换到搜索（0-9 a-z） if ((0x2f < event.key && event.key < 0x3a)||(0x40 < event.key && event.key < 0x5b)) { focus = true; - appPage.header.changeToSearch(event.text); + appPage.search.changeToSearch(event.text); // 任意方向键切换至应用列表 } else if ((0x01000011 < event.key)&&(event.key < 0x01000016)) { focus = true; diff --git a/qml/AppUI/SearchInputBar.qml b/qml/AppUI/SearchInputBar.qml index 1374fed..7746a43 100644 --- a/qml/AppUI/SearchInputBar.qml +++ b/qml/AppUI/SearchInputBar.qml @@ -21,17 +21,18 @@ import QtQuick.Controls 2.5 import QtQuick.Layouts 1.12 import org.ukui.menu.core 1.0 import AppControls2 1.0 as AppControls2 +import org.ukui.quick.items 1.0 as UkuiItems -AppControls2.StyleBackground { +UkuiItems.StyleBackground { property Item changeFocusTarget property alias text: textInput.text; alpha: 0.04 - useStyleTransparent: false - paletteRole: Palette.Text + useStyleTransparency: false + paletteRole: UkuiItems.Theme.Text border.width: 1 borderAlpha: textInput.activeFocus ? 1 : 0.1 - borderColor: textInput.activeFocus ? Palette.Highlight : Palette.Base + borderColor: textInput.activeFocus ? UkuiItems.Theme.Highlight : UkuiItems.Theme.Base Component.onCompleted: mainWindow.visibleChanged.connect(clear) Component.onDestruction: mainWindow.visibleChanged.disconnect(clear) @@ -57,20 +58,20 @@ AppControls2.StyleBackground { ThemeIcon { anchors.centerIn: parent width: parent.height / 2; height: width - source: "image://appicon/search-symbolic" + source: "search-symbolic" highLight: mainWindow.isFullScreen autoHighLight: !mainWindow.isFullScreen } } - AppControls2.StyleText { + UkuiItems.StyleText { id: defaultText anchors.verticalCenter: parent.verticalCenter anchors.left: searchIcon.right text: qsTr("Search App") visible: textInput.contentWidth === 0 - paletteRole: mainWindow.isFullScreen ? Palette.HighlightedText : Palette.Text + paletteRole: mainWindow.isFullScreen ? UkuiItems.Theme.HighlightedText : UkuiItems.Theme.Text verticalAlignment: TextInput.AlignVCenter alpha: 0.25 } @@ -135,10 +136,10 @@ AppControls2.StyleBackground { anchors.right: parent.right anchors.rightMargin: (parent.height - height) / 2 anchors.verticalCenter: parent.verticalCenter - visible: mainWindow.isFullScreen && textInput.activeFocus + visible: textInput.activeFocus buttonIcon: "image://appicon/edit-clear-symbolic" - highlight: true - autoHighLight: false + highlight: mainWindow.isFullScreen + autoHighLight: !mainWindow.isFullScreen onClicked: { textInput.clear(); diff --git a/qml/qml.qrc b/qml/qml.qrc index e4c421e..2522c60 100644 --- a/qml/qml.qrc +++ b/qml/qml.qrc @@ -32,5 +32,6 @@ AppUI/PluginSelectMenu.qml AppUI/EditText.qml AppUI/FullScreenFolder.qml + AppUI/AppPageSearch.qml