完善排序菜单UI显示和动画

qml/AppControls2/RoundButton.qml

@@ -8,15 +8,16 @@ MouseArea {
 
     StyleBackground {
         useStyleTransparent: false
-        paletteRole: Palette.Text
+        paletteRole: mainWindow.isFullScreen ? Palette.Light : Palette.Text
         anchors.fill: parent
         radius: height / 2
-        alpha: buttonMouseArea.containsPress ? 0.17 : buttonMouseArea.containsMouse ? 0.12 : 0.06
+        alpha: buttonMouseArea.containsPress ? 0.20 : buttonMouseArea.containsMouse ? 0.16 : 0.10
     }
 
     ThemeIcon {
         anchors.centerIn: parent
         width: 16; height: width
         source: buttonIcon
+        highLight: mainWindow.isFullScreen
     }
 }

qml/AppUI/PluginSelectMenu.qml

@@ -1,3 +1,21 @@
+/*
+ * 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
@@ -10,15 +28,15 @@ 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: {
+        onClicked: pluginSelectMenuRoot.model.autoSwitchProvider();
-            pluginSelectMenuRoot.model.autoSwitchProvider();
-        }
     }
 
     MouseArea {
@@ -29,21 +47,69 @@ RowLayout {
         Layout.maximumHeight: 16
 
         onClicked: {
-            sortMenu.popup();
+            if(sortMenuSelector.state === "sortMenuClose") {
+                sortMenuSelector.state = "sortMenuOpen"
+            } else {
+                sortMenuSelector.state = "sortMenuClose"
+            }
         }
 
-        Image {
+        ThemeIcon {
             id: sortMenuSelector
             anchors.fill: parent
-            source: "image://appicon/ukui-down.symbolic"
+            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
+            width: 128; height: 120
-            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 {
@@ -60,9 +126,10 @@ RowLayout {
                     width: ListView.view ? ListView.view.width : 0
                     height: 32
                     radius: 4
-                    alpha: (model.isChecked || mouseArea.isHoverd) ? 0.2 : 1
+                    alpha: mouseArea.containsMouse ? 0.2 : 1
-                    paletteRole: (model.isChecked || mouseArea.isHoverd) ? Palette.Text : Palette.Window
+                    paletteRole: mouseArea.containsMouse ? Palette.Text : Palette.Window
                     useStyleTransparent: false
+                    opacity: sortMenu.opacity
 
                     Item {
                         anchors.fill: parent
@@ -87,19 +154,12 @@ RowLayout {
                         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;
-                        }
                     }
                 }
             }
@@ -116,14 +176,6 @@ RowLayout {
             function updateProviderIcon() {
                 pluginSelectButton.buttonIcon = pluginSelectMenuRoot.model.currentProviderIcon();
             }
-
-            onOpened: {
-                sortMenuSelector.source = "image://appicon/ukui-up.symbolic";
-            }
-
-            onClosed: {
-                sortMenuSelector.source = "image://appicon/ukui-down.symbolic";
-            }
         }
     }
 }