ukui-menu/qml/AppUI/PluginSelectMenu.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.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

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

RowLayout {
    id: pluginSelectMenuRoot
    property var model: appPageHeaderUtils.model(PluginGroup.SortMenuItem)
    spacing: 2

    AppControls2.RoundButton {
        id: pluginSelectButton
        Layout.fillHeight: true
        Layout.fillWidth: true
        Layout.maximumWidth: height

        buttonIcon: "image://appicon/ukui-selected"
        onClicked: pluginSelectMenuRoot.model.autoSwitchProvider();
    }

    MouseArea {
        Layout.alignment: Qt.AlignVCenter
        Layout.fillWidth: true
        Layout.fillHeight: true
        Layout.maximumWidth: 16
        Layout.maximumHeight: 16

        onClicked: {
            if(sortMenuSelector.state === "sortMenuClose") {
                sortMenuSelector.state = "sortMenuOpen"
            } else {
                sortMenuSelector.state = "sortMenuClose"
            }
        }

        ThemeIcon {
            id: sortMenuSelector
            anchors.fill: parent
            source: "image://appicon/ukui-up-symbolic"
            opacity: 0.5
            highLight: mainWindow.isFullScreen
            state: "sortMenuClose"

            states: [
                State {
                    name: "sortMenuOpen"
                    PropertyChanges { target: sortMenuSelector; rotation: 0 }
                    PropertyChanges { target: sortMenu; visible: true }
                },
                State {
                    name: "sortMenuClose"
                    PropertyChanges { target: sortMenuSelector; rotation: 180 }
                    PropertyChanges { target: sortMenu; visible: false }
                }
            ]
            transitions: [
                Transition {
                    to: "sortMenuOpen"
                    RotationAnimation { duration: 300; direction: RotationAnimation.Counterclockwise}
                },
                Transition {
                    to: "sortMenuClose"
                    RotationAnimation { duration: 300; direction: RotationAnimation.Clockwise }
                }
            ]
        }


        Menu {
            id: sortMenu
            width: 128; height: 120
            padding: 8
            clip: true
            opacity: visible
            x: parent.width - width

            enter: Transition {
                ParallelAnimation {
                     NumberAnimation { property: "opacity"; from: 0.0; to: 1.0 }
                     NumberAnimation { property: "y"; from: pluginSelectButton.height - 20; to: pluginSelectButton.height }
                }

            }
            exit: Transition {
                ParallelAnimation {
                    NumberAnimation { property: "opacity"; from: 1.0; to: 0.0 }
                    NumberAnimation { property: "y"; from: pluginSelectButton.height; to: pluginSelectButton.height - 20 }
                }
            }

            onClosed: sortMenuSelector.state = "sortMenuClose"

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

            contentItem: ListView {
                clip: true
                spacing: 4
                model: pluginSelectMenuRoot.model

                delegate: AppControls2.StyleBackground {
                    width: ListView.view ? ListView.view.width : 0
                    height: 32
                    radius: 4
                    alpha: mouseArea.containsMouse ? 0.2 : 0
                    paletteRole: Palette.Text
                    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
                        onClicked: {
                            if (model.isChecked) {
                                return;
                            }
                            appPageHeaderUtils.activateProvider(model.id);
                        }
                    }
                }
            }

            Component.onCompleted: {
                updateProviderIcon();
                pluginSelectMenuRoot.model.currentIndexChanged.connect(updateProviderIcon);
            }

            Component.onDestruction: {
                pluginSelectMenuRoot.model.currentIndexChanged.disconnect(updateProviderIcon);
            }

            function updateProviderIcon() {
                pluginSelectButton.buttonIcon = pluginSelectMenuRoot.model.currentProviderIcon();
            }
        }
    }
}