shift-shell/containments/homescreens/folio/qml/AppDrawerHeader.qml

// SPDX-FileCopyrightText: 2021-2023 Devin Lin <devin@kde.org>
// SPDX-License-Identifier: LGPL-2.0-or-later

import QtQuick
import QtQuick.Controls as QQC2
import QtQuick.Layouts

import org.kde.kirigami as Kirigami

import org.kde.plasma.components 3.0 as PlasmaComponents
import org.kde.plasma.private.mobileshell as MobileShell
import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio
import './delegate'

Item {
    id: root
    property Folio.HomeScreen folio

    // Do not override the colorset: in mobile mode we inherit Complementary
    // from the containment (wallpaper context, white text); in convergence mode
    // the drawerOverlay Window gives us Window context (system-adaptive).

    function addSearchText(text: string) {
        searchField.text += text;
    }

    function clearSearchText(): void {
        searchField.text = '';
    }

    // Request to not focus on the search bar
    signal releaseFocusRequested()

    onFocusChanged: {
        if (focus) {
            searchField.focus = true;
        }
    }

    // Keyboard navigation
    Keys.onPressed: (event) => {
        if (event.key === Qt.Key_Escape || event.key === Qt.Key_Back) {
            root.releaseFocusRequested();
            event.accepted = true;
        }
    }

    RowLayout {
        anchors.topMargin: Kirigami.Units.largeSpacing
        anchors.leftMargin: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
        anchors.rightMargin: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
        anchors.fill: parent

        QQC2.TextField {
            id: searchField
            onTextChanged: folio.ApplicationListSearchModel.setFilterFixedString(text)
            Layout.maximumWidth: Kirigami.Units.gridUnit * 30
            Layout.alignment: Qt.AlignHCenter
            leftPadding: Kirigami.Units.iconSizes.small + Kirigami.Units.largeSpacing * 2
            rightPadding: clearSearchArea.visible ? clearSearchArea.width + Kirigami.Units.largeSpacing : Kirigami.Units.largeSpacing

            background: Rectangle {
                radius: Kirigami.Units.cornerRadius
                color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g,
                               Kirigami.Theme.textColor.b,
                               (searchField.hovered || searchField.focus) ? 0.2 : 0.1)

                Behavior on color { MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast } }
            }

            topPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
            bottomPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
            Layout.fillWidth: true

            horizontalAlignment: QQC2.TextField.AlignHCenter
            placeholderText: i18nc("@info:placeholder", "Search applications…")
            placeholderTextColor: Kirigami.Theme.disabledTextColor
            color: Kirigami.Theme.textColor

            font.weight: Font.Bold

            Kirigami.Icon {
                anchors.left: parent.left
                anchors.leftMargin: Kirigami.Units.largeSpacing
                anchors.verticalCenter: parent.verticalCenter
                width: Kirigami.Units.iconSizes.small
                height: width
                source: "search"
                isMask: true
                color: Kirigami.Theme.textColor
                opacity: 0.65
            }

            MouseArea {
                id: clearSearchArea
                anchors.right: parent.right
                anchors.rightMargin: Kirigami.Units.smallSpacing
                anchors.verticalCenter: parent.verticalCenter
                width: Kirigami.Units.iconSizes.smallMedium
                height: width
                visible: searchField.text.length > 0
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor

                onClicked: searchField.clear()

                Kirigami.Icon {
                    anchors.centerIn: parent
                    width: Kirigami.Units.iconSizes.small
                    height: width
                    source: "window-close-symbolic"
                    isMask: true
                    color: Kirigami.Theme.textColor
                    opacity: clearSearchArea.containsMouse ? 0.9 : 0.65
                }
            }

            Connections {
                target: folio.HomeScreenState
                function onViewStateChanged(): void {
                    if (folio.HomeScreenState.viewState !== Folio.HomeScreenState.AppDrawerView) {
                        // Reset search field if the app drawer is not shown
                        if (searchField.text !== '') {
                            searchField.text = '';
                        }
                    }
                }
            }
        }


    }
}