ukui-menu/qml/AppUI/SearchInputBar.qml

/*
 * Copyright (C) 2023, KylinSoft Co., Ltd.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 */

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import org.ukui.menu.core 1.0
import AppControls2 1.0 as AppControls2

AppControls2.StyleBackground {
    property Item changeFocusTarget
    property alias text: textInput.text;

    alpha: 0.04
    useStyleTransparent: false
    paletteRole: Palette.Text
    border.width: 1
    borderAlpha: textInput.activeFocus ? 1 : 0.1
    borderColor: textInput.activeFocus ? Palette.Highlight : Palette.Base

    Component.onCompleted: mainWindow.visibleChanged.connect(clear)
    Component.onDestruction: mainWindow.visibleChanged.disconnect(clear)
    function textInputFocus() {
        textInput.forceActiveFocus();
    }
    function clear() {
        textInput.clear();
    }
    Item {
        id: defaultSearch
        width: searchIcon.width + defaultText.contentWidth; height: parent.height
        anchors.horizontalCenter: mainWindow.isFullScreen ? parent.horizontalCenter : undefined
        anchors.verticalCenter: parent.verticalCenter

        Item {
            id: searchIcon
            width: 32; height: 32
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: (parent.height - height) / 2

            ThemeIcon {
                anchors.centerIn: parent
                width: parent.height / 2; height: width
                source: "image://appicon/search-symbolic"
                highLight: mainWindow.isFullScreen
                autoHighLight: !mainWindow.isFullScreen
            }
        }


        AppControls2.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
            verticalAlignment: TextInput.AlignVCenter
            alpha: 0.25
        }

        states: State {
            when: !mainWindow.isFullScreen || textInput.text !== "" || textInput.activeFocus
            AnchorChanges {
                target: defaultSearch
                anchors.left: parent.left
                anchors.horizontalCenter: undefined
            }
        }

        transitions: Transition {
            AnchorAnimation { duration: 300; easing.type: Easing.InOutCubic }
        }
    }

    TextInput {
        id: textInput
        clip: true
        anchors.right: parent.right
        width: parent.width - searchIcon.width
        height: parent.height
        selectByMouse: true
        verticalAlignment: TextInput.AlignVCenter
        font.pointSize: defaultText.font.pointSize
        focus: parent.visible || mainWindow.isFullScreen     

        activeFocusOnTab: true
        function changeFocusToListView() {
            if (!mainWindow.isFullScreen) {
                normalUI.focus = true;
                changeFocusTarget.focus = true;
                appPage.content.resetFocus();
            } else {
                if (text !== "") {
                    fullScreenContent.viewFocusEnable();
                }
            }
        }
        Keys.onDownPressed: changeFocusToListView()
        Keys.onReturnPressed: changeFocusToListView()

        //字体选中跟随主题高亮
        property int textColor: mainWindow.isFullScreen ? Palette.HighlightedText : Palette.Text
        function updateTextInputColor() {
            color = themePalette.paletteColor(textColor)
            selectionColor = themePalette.paletteColor(Palette.Highlight)
        }
        Component.onCompleted: {
            updateTextInputColor();
            themePalette.styleColorChanged.connect(updateTextInputColor);
        }
        onTextColorChanged: updateTextInputColor()
        Component.onDestruction: themePalette.styleColorChanged.disconnect(updateTextInputColor)
    }

    AppControls2.RoundButton {
        id: clearButton
        width: 18; height: width
        anchors.right: parent.right
        anchors.rightMargin: (parent.height - height) / 2
        anchors.verticalCenter: parent.verticalCenter
        visible: mainWindow.isFullScreen && textInput.activeFocus
        buttonIcon: "image://appicon/edit-clear-symbolic"
        highlight: true
        autoHighLight: false

        onClicked: {
            textInput.clear();
            textInput.focus = false;
        }
    }
}