ukui-menu/qml/AppUI/PluginSelectMenu.qml

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: {
            sortMenu.popup();
        }

        Image {
            id: sortMenuSelector
            anchors.fill: parent
            source: "image://appicon/ukui-down.symbolic"
        }

        Menu {
            id: sortMenu
            width: 128
            height: 120
            padding: 8
            clip: true

            // 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: (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;
                        }
                    }
                }
            }

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

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

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

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

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