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 {
    readonly property string text: textInput.text;
    function clear() {
        textInput.clear();
    }
    alpha: 0.04
    useStyleTransparent: false
    paletteRole: Palette.Text
    border.width: 1
    borderAlpha: textInput.activeFocus ? 1 : 0.1
    borderColor: textInput.activeFocus ? Palette.Highlight : Palette.Base

    function textInputFocus() {
        textInput.forceActiveFocus();
    }

    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
            font.pixelSize: 14
            paletteRole: mainWindow.isFullScreen ? Palette.HighlightedText : Palette.Text
            verticalAlignment: TextInput.AlignVCenter
            alpha: 0.25
        }

        states: State {
            when: textInput.activeFocus || !mainWindow.isFullScreen
            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.pixelSize: 14
        focus: parent.visible || mainWindow.isFullScreen
        onActiveFocusChanged: clear()

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