From 221361369e1974706bdd6ce117fa9c0c0bfb511b Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Fri, 9 Jun 2023 18:15:09 +0800 Subject: [PATCH] update --- example/qml/window/MainWindow.qml | 138 +++++++++++++----- src/imports/FluentUI/Controls/FluArea.qml | 10 -- src/imports/FluentUI/Controls/FluCheckBox.qml | 4 +- src/imports/FluentUI/Controls/FluExpander.qml | 10 -- .../FluentUI/Controls/FluNavigationView.qml | 7 + .../FluentUI/Controls/FluRadioButton.qml | 3 +- 6 files changed, 114 insertions(+), 58 deletions(-) diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml index cde0212..9e9a6e2 100644 --- a/example/qml/window/MainWindow.qml +++ b/example/qml/window/MainWindow.qml @@ -76,44 +76,110 @@ CustomWindow { } } - FluAppBar { - id: title_bar - anchors { - top: parent.top - left: parent.left - right: parent.right - } - darkText: lang.dark_mode - showDark: true - z:7 - } + Flipable{ + id:flipable + anchors.fill: parent + property bool flipped: false + transform: Rotation { + id: rotation + origin.x: flipable.width/2 + origin.y: flipable.height/2 + axis { x: 0; y: 1; z: 0 } + angle: 0 - FluNavigationView{ - id:nav_view - width: parent.width - height: parent.height - z:999 - items: ItemsOriginal - footerItems:ItemsFooter - topPadding:FluTools.isMacos() ? 20 : 5 - displayMode:MainEvent.displayMode - logo: "qrc:/example/res/image/favicon.ico" - title:"FluentUI" - autoSuggestBox:FluAutoSuggestBox{ - width: 280 - anchors.centerIn: parent - iconSource: FluentIcons.Search - items: ItemsOriginal.getSearchData() - placeholderText: lang.search - onItemClicked: - (data)=>{ - ItemsOriginal.startPageByItem(data) - } } - Component.onCompleted: { - ItemsOriginal.navigationView = nav_view - ItemsFooter.navigationView = nav_view - setCurrentIndex(0) + states: State { + name: "back" + PropertyChanges { target: rotation; angle: 180 } + when: flipable.flipped + } + transitions: Transition { + NumberAnimation { target: rotation; property: "angle"; duration: 1000 ; easing.type: Easing.OutQuad} + } + back: Item{ + anchors.fill: flipable + visible: rotation.angle !== 0 + FluAppBar { + anchors { + top: parent.top + left: parent.left + right: parent.right + } + darkText: lang.dark_mode + showDark: true + z:7 + } + FluIconButton{ + iconSource: FluentIcons.ChromeBack + width: 30 + height: 30 + iconSize: 13 + z:8 + onClicked: { + flipable.flipped = false + } + } + FluText{ + font: FluTextStyle.Title + text:"建设中..." + anchors.centerIn: parent + } + } + front: Item{ + visible: rotation.angle !== 180 + anchors.fill: flipable + FluAppBar { + anchors { + top: parent.top + left: parent.left + right: parent.right + } + darkText: lang.dark_mode + showDark: true + z:7 + } + FluNavigationView{ + property int clickCount: 0 + id:nav_view + width: parent.width + height: parent.height + z:999 + items: ItemsOriginal + footerItems:ItemsFooter + topPadding:FluTools.isMacos() ? 20 : 5 + displayMode:MainEvent.displayMode + logo: "qrc:/example/res/image/favicon.ico" + title:"FluentUI" + Behavior on rotation { + NumberAnimation{ + duration: 167 + } + } + transformOrigin: Item.Center + onLoginClicked:{ + clickCount += 1 + if(clickCount === 5){ + flipable.flipped = true + clickCount = 0 + } + } + autoSuggestBox:FluAutoSuggestBox{ + width: 280 + anchors.centerIn: parent + iconSource: FluentIcons.Search + items: ItemsOriginal.getSearchData() + placeholderText: lang.search + onItemClicked: + (data)=>{ + ItemsOriginal.startPageByItem(data) + } + } + Component.onCompleted: { + ItemsOriginal.navigationView = nav_view + ItemsFooter.navigationView = nav_view + setCurrentIndex(0) + } + } } } } diff --git a/src/imports/FluentUI/Controls/FluArea.qml b/src/imports/FluentUI/Controls/FluArea.qml index d18c818..99a35b3 100644 --- a/src/imports/FluentUI/Controls/FluArea.qml +++ b/src/imports/FluentUI/Controls/FluArea.qml @@ -16,16 +16,6 @@ Rectangle { border.width: 1 implicitHeight: height implicitWidth: width - Behavior on color{ - ColorAnimation { - duration: 300 - } - } - Behavior on border.color{ - ColorAnimation { - duration: 300 - } - } Item { id: container anchors.fill: parent diff --git a/src/imports/FluentUI/Controls/FluCheckBox.qml b/src/imports/FluentUI/Controls/FluCheckBox.qml index 8fa4d19..75797c2 100644 --- a/src/imports/FluentUI/Controls/FluCheckBox.qml +++ b/src/imports/FluentUI/Controls/FluCheckBox.qml @@ -24,13 +24,15 @@ Button { } id:control enabled: !disabled - padding:0 onClicked: clickListener() background: Item{ FluFocusRectangle{ + radius: 4 visible: control.activeFocus } } + horizontalPadding:2 + verticalPadding: 2 Accessible.role: Accessible.Button Accessible.name: control.text Accessible.description: contentDescription diff --git a/src/imports/FluentUI/Controls/FluExpander.qml b/src/imports/FluentUI/Controls/FluExpander.qml index 33a5476..dab0520 100644 --- a/src/imports/FluentUI/Controls/FluExpander.qml +++ b/src/imports/FluentUI/Controls/FluExpander.qml @@ -20,16 +20,6 @@ Item { radius: 4 color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) - Behavior on color{ - ColorAnimation { - duration: 300 - } - } - Behavior on border.color{ - ColorAnimation { - duration: 300 - } - } MouseArea{ id:control_mouse anchors.fill: parent diff --git a/src/imports/FluentUI/Controls/FluNavigationView.qml b/src/imports/FluentUI/Controls/FluNavigationView.qml index 31e349e..cd789b7 100644 --- a/src/imports/FluentUI/Controls/FluNavigationView.qml +++ b/src/imports/FluentUI/Controls/FluNavigationView.qml @@ -25,6 +25,7 @@ Item { property Component autoSuggestBox property Component actionItem property int topPadding: 0 + signal loginClicked id:control QtObject{ id:d @@ -514,6 +515,12 @@ Item { } sourceSize: Qt.size(40,40) Layout.alignment: Qt.AlignVCenter + MouseArea{ + anchors.fill: parent + onClicked: { + loginClicked() + } + } } FluText{ Layout.alignment: Qt.AlignVCenter diff --git a/src/imports/FluentUI/Controls/FluRadioButton.qml b/src/imports/FluentUI/Controls/FluRadioButton.qml index 8c91b22..2a99b6d 100644 --- a/src/imports/FluentUI/Controls/FluRadioButton.qml +++ b/src/imports/FluentUI/Controls/FluRadioButton.qml @@ -22,7 +22,8 @@ Button { Accessible.onPressAction: control.clicked() id:control enabled: !disabled - padding:0 + horizontalPadding:2 + verticalPadding: 2 background: Item{ FluFocusRectangle{ visible: control.activeFocus