diff --git a/qml/AppControls2/RoundButton.qml b/qml/AppControls2/RoundButton.qml index ddae06b..71401ec 100644 --- a/qml/AppControls2/RoundButton.qml +++ b/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 } } diff --git a/qml/AppUI/PluginSelectMenu.qml b/qml/AppUI/PluginSelectMenu.qml index 8bb5d28..acc5afe 100644 --- a/qml/AppUI/PluginSelectMenu.qml +++ b/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 . + * + */ + 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: { - pluginSelectMenuRoot.model.autoSwitchProvider(); - } + onClicked: 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 - height: 120 + 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 { @@ -60,9 +126,10 @@ RowLayout { 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 + alpha: mouseArea.containsMouse ? 0.2 : 1 + 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"; - } } } }