ukui-menu/qml/AppUI/AppPageHeader.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.Layouts 1.12
import QtQuick.Controls 2.5

import AppControls2 1.0 as AppControls2
import org.ukui.menu.core 1.0
import org.ukui.menu.utils 1.0

Item {
    id: appPageHeaderRoot
    property string title: ""

    state: "normal"
    states: [
        State {
            name: "normal"
            PropertyChanges { target: searchBar; visible: false }
            PropertyChanges { target: pluginSelectionBar; visible: true }
            StateChangeScript {
                script: {
                    sortMenu.sortMenuModel.reactivateProvider();
                }
            }
        },
        State {
            name: "search"
            PropertyChanges { target: searchBar; visible: true }
            PropertyChanges { target: pluginSelectionBar; visible: false }
        }
    ]

    Item {
        id: searchBar
        width: parent.width
        height: 30
        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 15
            anchors.rightMargin: 15
            spacing: 10

            SearchInputBar {
                id: searchInputBar
                Layout.fillWidth: true
                Layout.fillHeight: true
                radius: 16
                useStyleTransparent: false
                onTextChanged: appPageHeaderUtils.startSearch(text);
            }

            AppControls2.StyleBackground {
                Layout.preferredWidth: parent.height
                Layout.preferredHeight: parent.height
                radius: height / 2
                useStyleTransparent: false
                Image {
                    anchors.centerIn: parent
                    width: 16; height: 16
                    source: "image://appicon/edit-clear-symbolic"
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        searchInputBar.clear();
                        appPageHeaderRoot.state = "normal"
                    }
                }
            }
        }
    }

    Item {
        id: pluginSelectionBar
        width: parent.width
        height: parent.height
        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 16
            Text {
                Layout.fillWidth: true
                Layout.fillHeight: true
                verticalAlignment: Qt.AlignVCenter
                text: appPageHeaderRoot.title
            }

            ListView {
                Layout.preferredWidth: childrenRect.width
                Layout.preferredHeight: 32
                Layout.maximumWidth: 68
                Layout.alignment: Qt.AlignVCenter

                clip: true
                spacing: 4
                orientation: ListView.Horizontal

                model: appPageHeaderUtils.model(PluginGroup.Button)
                delegate: AppControls2.StyleBackground {
                    width: height
                    height: ListView.view ? ListView.view.height : 0
                    radius: height / 2
                    useStyleTransparent: false
                    Image {
                        width: parent.height / 2
                        height: parent.height / 2
                        anchors.centerIn: parent
                        source: model.icon
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            appPageHeaderRoot.state = "search"
                            appPageHeaderUtils.activateProvider(model.id);
                        }
                    }
                }
            }

            Row {
                Layout.preferredWidth: childrenRect.width
                Layout.preferredHeight: 32
                Layout.rightMargin: 8
                Layout.alignment: Qt.AlignVCenter

                AppControls2.StyleBackground {
                    width: 32
                    height: width
                    radius: height / 2
                    useStyleTransparent: false
                    Image {
                        id: providerIcon
                        width: parent.height / 2
                        height: parent.height / 2
                        anchors.centerIn: parent
                        source: "image://appicon/ukui-selected"
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            sortMenu.sortMenuModel.autoSwitchProvider();
                        }
                    }
                }

                Image {
                    id: providerSelector
                    width: 16
                    height: width
                    anchors.verticalCenter: parent.verticalCenter
                    source: "image://appicon/ukui-down.symbolic"

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            sortMenu.show();
                        }
                    }
                }

                function updateProviderIcon() {
                    providerIcon.source = sortMenu.sortMenuModel.currentProviderIcon();
                }

                Component.onCompleted: {
                    updateProviderIcon();
                    sortMenu.sortMenuModel.currentIndexChanged.connect(updateProviderIcon);
                }
            }
        }
    }

    Menu {
        id: sortMenu
        width: 128
        height: 120
        padding: 8
        clip: true
        property var sortMenuModel: appPageHeaderUtils.model(PluginGroup.SortMenuItem)

        function show() {
            popup();
        }

        onOpened: {
            providerSelector.source = "image://appicon/ukui-up.symbolic";
        }

        onClosed: {
            providerSelector.source = "image://appicon/ukui-down.symbolic";
        }

        // TODO 添加边框阴影
        background: AppControls2.StyleBackground {
            paletteRole: Palette.Window
            useStyleTransparent: false
            radius: 8
        }

        contentItem: ListView {
            clip: true
            spacing: 4
            model: sortMenu.sortMenuModel
            delegate: AppControls2.StyleBackground {
                width: ListView.view ? ListView.view.width : 0
                height: 32
                radius: 4
                alpha: (model.isChecked || mouseArea.isHoverd) ? 0.2 : 1
                paletteRole: (model.isChecked || mouseArea.isHoverd) ? Palette.Text : Palette.Window
                useStyleTransparent: false

                Item {
                    anchors.fill: parent
                    anchors.margins: 8
                    Image {
                        visible: model.isChecked
                        anchors.verticalCenter: parent.verticalCenter
                        width: 16
                        height: 16
                        source: "image://appicon/object-select.symbolic"
                    }
                    AppControls2.StyleText {
                        x: 24
                        verticalAlignment: Text.AlignVCenter
                        width: parent.width - x
                        height: parent.height
                        text: model.name
                    }
                }

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    hoverEnabled: true
                    property bool isHoverd: false
                    onClicked: {
                        if (model.isChecked) {
                            return;
                        }
                        appPageHeaderUtils.activateProvider(model.id);
                    }
                    onEntered: {
                        isHoverd = true;
                    }
                    onExited: {
                        isHoverd = false;
                    }
                }
            }
        }
    }
}