fix(AppPage): change the searchbar ui

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 {
+        AppPageSearch {
-            id: appPageHeader
+            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

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

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();
+        }
+    }
+}
+

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

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;

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
+    useStyleTransparency: false
-    paletteRole: Palette.Text
+    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
+        highlight: mainWindow.isFullScreen
-        autoHighLight: false
+        autoHighLight: !mainWindow.isFullScreen
 
         onClicked: {
             textInput.clear();

qml/qml.qrc

@@ -32,5 +32,6 @@
         <file>AppUI/PluginSelectMenu.qml</file>
         <file>AppUI/EditText.qml</file>
         <file>AppUI/FullScreenFolder.qml</file>
+        <file>AppUI/AppPageSearch.qml</file>
     </qresource>
 </RCC>