amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-23 03:10:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzichu 2023-07-07 16:04:17 +08:00
parent 9223d5f937
commit 03771cd7c9
25 changed files with 75 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/qml/App.qml
View File

@ -10,6 +10,7 @@ Window {
Component.onCompleted: {
FluApp.init(app)
FluTheme.darkMode = FluDarkMode.System
FluTheme.enableAnimation = true
FluApp.routes = {
"/":"qrc:/example/qml/window/MainWindow.qml",
"/about":"qrc:/example/qml/window/AboutWindow.qml",

13
example/qml/page/T_Theme.qml
View File

@ -12,7 +12,7 @@ FluScrollablePage{
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 210
height: 270
paddings: 10
ColumnLayout{
spacing:0
@ -72,6 +72,17 @@ FluScrollablePage{
FluTheme.nativeText = !FluTheme.nativeText
}
}
FluText{
text:"开启动画效果"
Layout.topMargin: 20
}
FluToggleSwitch{
Layout.topMargin: 5
checked: FluTheme.enableAnimation
onClicked: {
FluTheme.enableAnimation = !FluTheme.enableAnimation
}
}
}
}
CodeExpander{

2
example/qml/window/MainWindow.qml
View File

@ -220,7 +220,7 @@ CustomWindow {
}
function handleDarkChanged(button){
if(FluTools.isMacos()){
if(FluTools.isMacos() || !FluTheme.enableAnimation){
changeDark()
}else{
var target = window.contentItem

1
src/FluTheme.cpp
View File

@ -31,6 +31,7 @@ FluTheme::FluTheme(QObject *parent)
});
primaryColor(FluColors::getInstance()->Blue());
nativeText(false);
enableAnimation(false);
darkMode(Fluent_DarkMode::Fluent_DarkModeType::Light);
_systemDark = systemDark();
qApp->installEventFilter(this);

5
src/FluTheme.h
View File

@ -32,6 +32,11 @@ class FluTheme : public QObject
*/
Q_PROPERTY_AUTO(bool,nativeText);
/**
* @brief 是否开启动画效果
*/
Q_PROPERTY_AUTO(bool,enableAnimation);
QML_NAMED_ELEMENT(FluTheme)
QML_SINGLETON
private:

2
src/imports/FluentUI/Controls/FluAutoSuggestBox.qml
View File

@ -27,7 +27,7 @@ FluTextBox{
property: "opacity"
from:0
to:1
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
background: FluRectangle{

4
src/imports/FluentUI/Controls/FluBreadcrumbBar.qml
View File

@ -33,7 +33,7 @@ Item {
properties: "opacity"
from: 1
to: 0
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
add: Transition {
@ -41,7 +41,7 @@ Item {
properties: "opacity"
from: 0
to: 1
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
delegate: Item{

4
src/imports/FluentUI/Controls/FluCalendarPicker.qml
View File

@ -65,7 +65,7 @@ Rectangle {
property: "opacity"
from:0
to:1
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
exit:Transition {
@ -73,7 +73,7 @@ Rectangle {
property: "opacity"
from:1
to:0
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
contentItem: Item{

2
src/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -87,6 +87,7 @@ Button {
return normalColor
}
Behavior on color {
enabled: FluTheme.enableAnimation
ColorAnimation{
duration: 83
}
@ -98,6 +99,7 @@ Button {
visible: checked
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 83
}

4
src/imports/FluentUI/Controls/FluColorPicker.qml
View File

@ -50,7 +50,7 @@ Button{
property: "opacity"
from:0
to:1
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
@ -59,7 +59,7 @@ Button{
property: "opacity"
from:1
to:0
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
function showPopup() {

4
src/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -113,7 +113,7 @@ ComboBox {
property: "opacity"
from:0
to:1
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
exit:Transition {
@ -121,7 +121,7 @@ ComboBox {
property: "opacity"
from:1
to:0
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
background:Rectangle{

4
src/imports/FluentUI/Controls/FluDatePicker.qml
View File

@ -101,7 +101,7 @@ Rectangle {
property: "opacity"
from:0
to:1
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
exit:Transition {
@ -109,7 +109,7 @@ Rectangle {
property: "opacity"
from:1
to:0
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
background:Item{

5
src/imports/FluentUI/Controls/FluExpander.qml
View File

@ -54,6 +54,7 @@ Item {
iconSource:FluentIcons.ChevronUp
iconSize: 15
Behavior on rotation {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -103,7 +104,7 @@ Item {
to:"expand"
NumberAnimation {
properties: "y"
duration: 167
duration: FluTheme.enableAnimation ? 167 : 0
easing.type: Easing.OutCubic
}
},
@ -111,7 +112,7 @@ Item {
to:"collapsed"
NumberAnimation {
properties: "y"
duration: 167
duration: FluTheme.enableAnimation ? 167 : 0
easing.type: Easing.OutCubic
}
}

11
src/imports/FluentUI/Controls/FluInfoBar.qml
View File

@ -49,7 +49,11 @@ FluObject {
spacing: 20
width: parent.width
move: Transition {
NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 }
NumberAnimation {
properties: "y"
easing.type: Easing.OutCubic
duration: FluTheme.enableAnimation ? 333 : 0
}
}
onChildrenChanged: if(children.length === 0) destroy();
function getLastloader(){
@ -89,9 +93,10 @@ FluObject {
scale: item ? 1 : 0;
asynchronous: true
Behavior on scale {
enabled: FluTheme.enableAnimation
NumberAnimation {
easing.type: Easing.OutBack;
duration: 100
easing.type: Easing.OutCubic
duration: 167
}
}
sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle;

6
src/imports/FluentUI/Controls/FluMenu.qml
View File

@ -5,7 +5,7 @@ import QtQuick.Templates as T
import FluentUI
T.Menu {
property bool animEnabled: true
property bool enableAnimation: true
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
@ -20,7 +20,7 @@ T.Menu {
property: "opacity"
from:0
to:1
duration: animEnabled ? 83 : 0
duration: FluTheme.enableAnimation && control.enableAnimation ? 83 : 0
}
}
exit:Transition {
@ -28,7 +28,7 @@ T.Menu {
property: "opacity"
from:1
to:0
duration: animEnabled ? 83 : 0
duration: FluTheme.enableAnimation && control.enableAnimation ? 83 : 0
}
}
contentItem: ListView {

10
src/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -128,6 +128,7 @@ Item {
return 30
}
Behavior on height {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 83
}
@ -232,6 +233,7 @@ Item {
return true
}
Behavior on rotation {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -318,6 +320,7 @@ Item {
id:com_panel_item
Item{
Behavior on height {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 83
}
@ -557,11 +560,13 @@ Item {
visible: opacity
opacity: d.isMinimal
Behavior on opacity{
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 83
}
}
Behavior on Layout.preferredWidth {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -660,6 +665,7 @@ Item {
}
}
Behavior on anchors.leftMargin {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -698,12 +704,14 @@ Item {
}
x: visible ? 0 : -width
Behavior on width {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on x {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic
@ -785,7 +793,7 @@ Item {
anchors.fill: parent
model:d.handleItems()
boundsBehavior: ListView.StopAtBounds
highlightMoveDuration: 167
highlightMoveDuration: FluTheme.enableAnimation ? 167 : 0
highlight: Item{
clip: true
Rectangle{

4
src/imports/FluentUI/Controls/FluPage.qml
View File

@ -19,7 +19,7 @@ Item {
visible: false
StackView.onRemoved: destroy()
Behavior on opacity{
enabled: !animDisabled
enabled: !animDisabled && FluTheme.enableAnimation
NumberAnimation{
duration: 167
}
@ -27,7 +27,7 @@ Item {
transform: Translate {
y: control.visible ? 0 : 80
Behavior on y{
enabled: !animDisabled
enabled: !animDisabled && FluTheme.enableAnimation
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic

3
src/imports/FluentUI/Controls/FluPivot.qml
View File

@ -28,7 +28,7 @@ Item {
spacing: 20
interactive: false
orientation: ListView.Horizontal
highlightMoveDuration: 167
highlightMoveDuration: FluTheme.enableAnimation ? 167 : 0
highlight: Item{
clip: true
Rectangle{
@ -38,6 +38,7 @@ Item {
width: nav_list.currentItem ? nav_list.currentItem.width : 0
y:37
Behavior on width {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic

8
src/imports/FluentUI/Controls/FluPopup.qml
View File

@ -20,12 +20,12 @@ Popup {
properties: "scale"
from:1.2
to:1
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
easing.type: Easing.OutCubic
}
NumberAnimation {
property: "opacity"
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
from:0
to:1
}
@ -35,12 +35,12 @@ Popup {
properties: "scale"
from:1
to:1.2
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
easing.type: Easing.OutCubic
}
NumberAnimation {
property: "opacity"
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
from:1
to:0
}

1
src/imports/FluentUI/Controls/FluRadioButton.qml
View File

@ -62,6 +62,7 @@ Button {
return checked ? 4 : 1
}
Behavior on border.width {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic

1
src/imports/FluentUI/Controls/FluSlider.qml
View File

@ -36,6 +36,7 @@ T.Slider {
return control.hovered ? 6/10 : 5/10
}
Behavior on scale {
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 167
easing.type: Easing.OutCubic

1
src/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -47,6 +47,7 @@ Rectangle{
}
}
Behavior on height{
enabled: FluTheme.enableAnimation
NumberAnimation{
duration: 83
easing.type: Easing.OutCubic

2
src/imports/FluentUI/Controls/FluTextBoxMenu.qml
View File

@ -9,7 +9,7 @@ FluMenu{
property string selectAllText : "全选"
property var inputItem
id:menu
animEnabled: false
enableAnimation: false
width: 120
onVisibleChanged: {
inputItem.forceActiveFocus()

4
src/imports/FluentUI/Controls/FluTimePicker.qml
View File

@ -106,7 +106,7 @@ Rectangle {
property: "opacity"
from:0
to:1
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
exit:Transition {
@ -114,7 +114,7 @@ Rectangle {
property: "opacity"
from:1
to:0
duration: 83
duration: FluTheme.enableAnimation ? 83 : 0
}
}
background:Item{

28
src/imports/FluentUI/Controls/FluToggleSwitch.qml
View File

@ -69,17 +69,11 @@ Button {
return borderNormalColor
}
Rectangle {
width: pressed ? 28 : 20
anchors{
left: checked ? undefined : parent.left
leftMargin: checked ? 20 : 0
right: checked ? parent.right : undefined
rightMargin: checked ? 0: 20
}
width: 20
x:checked ? control_backgound.width-width : 0
height: 20
radius: 10
scale: hovered&enabled ? 7/10 : 6/10
anchors.verticalCenter: parent.verticalCenter
color: {
if(!enabled){
return dotDisableColor
@ -89,27 +83,15 @@ Button {
}
return dotNormalColor
}
Behavior on anchors.leftMargin {
Behavior on x {
enabled: FluTheme.enableAnimation
NumberAnimation {
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on anchors.rightMargin {
NumberAnimation {
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on width {
NumberAnimation {
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on scale {
enabled: FluTheme.enableAnimation
NumberAnimation {
duration: 167
easing.type: Easing.OutCubic
}
}