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

update

Browse Source
This commit is contained in:
zhuzichu 2023-09-26 17:59:08 +08:00
parent 5240f826c5
commit 7723ac97fb
13 changed files with 186 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -201,8 +201,6 @@ CustomWindow {
}
}
autoSuggestBox:FluAutoSuggestBox{
width: 280
anchors.centerIn: parent
iconSource: FluentIcons.Search
items: ItemsOriginal.getSearchData()
placeholderText: lang.search

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

@ -204,8 +204,6 @@ CustomWindow {
}
}
autoSuggestBox:FluAutoSuggestBox{
width: 280
anchors.centerIn: parent
iconSource: FluentIcons.Search
items: ItemsOriginal.getSearchData()
placeholderText: lang.search

1
src/FluRectangle.cpp
View File

@ -2,7 +2,6 @@
#include <QPainterPath>
FluRectangle::FluRectangle(QQuickItem* parent) : QQuickPaintedItem(parent){
setFlag(ItemHasContents, true);
color(QColor(255,255,255,255));
radius({0,0,0,0});
connect(this,&FluRectangle::colorChanged,this,[=]{update();});

4
src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -18,7 +18,7 @@ Button {
property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
property color checkedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
property real size: 18
property real size: 17
property alias textColor: btn_text.textColor
property bool textRight: true
property real textSpacing: 6
@ -101,7 +101,7 @@ Button {
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium
iconSize: 15
iconSize: 14
visible: checked
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {

37
src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -13,10 +13,11 @@ Item {
property Component autoSuggestBox
property Component actionItem
property int topPadding: 0
property int navWidth: 300
property int pageMode: FluNavigationViewType.Stack
property FluMenu navItemRightMenu
property FluMenu navItemExpanderRightMenu
property int cellHeight: 38
property int cellWidth: 300
signal logoClicked
id:control
Item{
@ -135,9 +136,9 @@ Item {
Item{
height: {
if(model.parent){
return model.parent.isExpand ? 30 : 0
return model.parent.isExpand ? control.cellHeight : 0
}
return 30
return control.cellHeight
}
Behavior on height {
enabled: FluTheme.enableAnimation && d.animDisabled
@ -160,7 +161,7 @@ Item {
Component{
id:com_panel_item_expander
Item{
height: 38
height: control.cellHeight
width: layout_list.width
FluControl{
id:item_control
@ -415,20 +416,20 @@ Item {
Behavior on height {
enabled: FluTheme.enableAnimation && d.animDisabled
NumberAnimation{
duration: 83
duration: 167
easing.type: Easing.OutCubic
}
}
height: {
if(model&&model.parent){
return model.parent.isExpand ? 38 : 0
return model.parent.isExpand ? control.cellHeight : 0
}
return 38
return control.cellHeight
}
visible: {
if(model&&model.parent){
return model.parent.isExpand ? true : false
}
return true
visible: control.cellHeight === Number(height)
opacity: visible
Behavior on opacity {
NumberAnimation { duration: 83 }
}
width: layout_list.width
FluControl{
@ -853,7 +854,7 @@ Item {
if(d.isCompact){
return 50
}
return control.navWidth
return control.cellWidth
}
}
Behavior on anchors.leftMargin {
@ -881,7 +882,7 @@ Item {
if(d.isCompactAndNotPanel){
return 50
}
return control.navWidth
return control.cellWidth
}
anchors{
top: parent.top
@ -927,8 +928,14 @@ Item {
height: autoSuggestBox ? 38 : 0
Loader{
id:loader_auto_suggest_box
anchors.centerIn: parent
sourceComponent: autoSuggestBox
anchors{
left: parent.left
right: parent.right
leftMargin: 6
rightMargin: 6
verticalCenter: parent.verticalCenter
}
visible: {
if(d.isCompactAndNotPanel){
return false

57
src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml
View File

@ -23,47 +23,63 @@ T.RangeSlider {
first.handle: Rectangle {
x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
implicitWidth: 24
implicitHeight: 24
implicitWidth: 20
implicitHeight: 20
radius: width / 2
color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
FluShadow{
radius: 12
radius: 10
}
Rectangle{
width: radius*2
height: radius*2
radius:{
FluIcon{
width: 10
height: 10
iconSource: FluentIcons.FullCircleMask
iconSize: 10
scale:{
if(control.first.pressed){
return 5
return 0.9
}
return control.first.hovered ? 7 : 6
return control.first.hovered ? 1.2 : 1
}
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
anchors.centerIn: parent
Behavior on scale{
ScaleAnimator{
duration: 167
easing.type: Easing.OutCubic
}
}
}
}
second.handle: Rectangle {
x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
implicitWidth: 24
implicitHeight: 24
implicitWidth: 20
implicitHeight: 20
radius: width / 2
color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
FluShadow{
radius: 12
radius: 10
}
Rectangle{
width: radius*2
height: radius*2
radius:{
FluIcon{
width: 10
height: 10
iconSource: FluentIcons.FullCircleMask
iconSize: 10
scale:{
if(control.second.pressed){
return 5
return 0.9
}
return control.second.hovered ? 7 : 6
return control.second.hovered ? 1.2 : 1
}
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
anchors.centerIn: parent
Behavior on scale{
ScaleAnimator{
duration: 167
easing.type: Easing.OutCubic
}
}
}
}
background: Item {
@ -99,4 +115,3 @@ T.RangeSlider {
text:String(isTipInt?Math.round(control.second.value):control.second.value)
}
}

30
src/Qt5/imports/FluentUI/Controls/FluSlider.qml
View File

@ -15,23 +15,31 @@ T.Slider {
handle: Rectangle {
x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
implicitWidth: 24
implicitHeight: 24
radius: 12
implicitWidth: 20
implicitHeight: 20
radius: 10
color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
FluShadow{
radius: 12
radius: 10
}
Rectangle{
width: radius*2
height: radius*2
radius:{
FluIcon{
width: 10
height: 10
Behavior on scale{
ScaleAnimator{
duration: 167
easing.type: Easing.OutCubic
}
}
iconSource: FluentIcons.FullCircleMask
iconSize: 10
scale:{
if(control.pressed){
return 5
return 0.9
}
return control.hovered ? 7 : 6
return control.hovered ? 1.2 : 1
}
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
anchors.centerIn: parent
}
}

15
src/Qt5/imports/FluentUI/Controls/FluToggleSwitch.qml
View File

@ -78,7 +78,12 @@ Button {
FluIcon {
width: parent.height
x:checked ? control_backgound.width-width : 0
scale: hovered&enabled ? 7/10 : 6/10
scale: {
if(pressed){
return 5/10
}
return hovered&enabled ? 7/10 : 6/10
}
iconSource: FluentIcons.FullCircleMask
iconSize: 20
color: {
@ -90,9 +95,15 @@ Button {
}
return dotNormalColor
}
Behavior on scale{
ScaleAnimator{
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on x {
enabled: FluTheme.enableAnimation
NumberAnimation {
XAnimator {
duration: 167
easing.type: Easing.OutCubic
}

4
src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -19,7 +19,7 @@ Button {
property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
property color checkedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
property real size: 18
property real size: 17
property alias textColor: btn_text.textColor
property bool textRight: true
property real textSpacing: 6
@ -97,7 +97,7 @@ Button {
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium
iconSize: 15
iconSize: 14
visible: checked
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {

37
src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -14,10 +14,11 @@ Item {
property Component autoSuggestBox
property Component actionItem
property int topPadding: 0
property int navWidth: 300
property int pageMode: FluNavigationViewType.Stack
property FluMenu navItemRightMenu
property FluMenu navItemExpanderRightMenu
property int cellHeight: 38
property int cellWidth: 300
signal logoClicked
id:control
Item{
@ -136,9 +137,9 @@ Item {
Item{
height: {
if(model.parent){
return model.parent.isExpand ? 30 : 0
return model.parent.isExpand ? control.cellHeight : 0
}
return 30
return control.cellHeight
}
Behavior on height {
enabled: FluTheme.enableAnimation && d.animDisabled
@ -161,7 +162,7 @@ Item {
Component{
id:com_panel_item_expander
Item{
height: 38
height: control.cellHeight
width: layout_list.width
FluControl{
id:item_control
@ -416,20 +417,20 @@ Item {
Behavior on height {
enabled: FluTheme.enableAnimation && d.animDisabled
NumberAnimation{
duration: 83
duration: 167
easing.type: Easing.OutCubic
}
}
height: {
if(model&&model.parent){
return model.parent.isExpand ? 38 : 0
return model.parent.isExpand ? control.cellHeight : 0
}
return 38
return control.cellHeight
}
visible: {
if(model&&model.parent){
return model.parent.isExpand ? true : false
}
return true
visible: control.cellHeight === Number(height)
opacity: visible
Behavior on opacity {
NumberAnimation { duration: 83 }
}
width: layout_list.width
FluControl{
@ -854,7 +855,7 @@ Item {
if(d.isCompact){
return 50
}
return control.navWidth
return control.cellWidth
}
}
Behavior on anchors.leftMargin {
@ -882,7 +883,7 @@ Item {
if(d.isCompactAndNotPanel){
return 50
}
return control.navWidth
return control.cellWidth
}
anchors{
top: parent.top
@ -928,8 +929,14 @@ Item {
height: autoSuggestBox ? 38 : 0
Loader{
id:loader_auto_suggest_box
anchors.centerIn: parent
sourceComponent: autoSuggestBox
anchors{
left: parent.left
right: parent.right
leftMargin: 6
rightMargin: 6
verticalCenter: parent.verticalCenter
}
visible: {
if(d.isCompactAndNotPanel){
return false

56
src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml
View File

@ -24,47 +24,63 @@ T.RangeSlider {
first.handle: Rectangle {
x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
implicitWidth: 24
implicitHeight: 24
implicitWidth: 20
implicitHeight: 20
radius: width / 2
color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
FluShadow{
radius: 12
radius: 10
}
Rectangle{
width: radius*2
height: radius*2
radius:{
FluIcon{
width: 10
height: 10
iconSource: FluentIcons.FullCircleMask
iconSize: 10
scale:{
if(control.first.pressed){
return 5
return 0.9
}
return control.first.hovered ? 7 : 6
return control.first.hovered ? 1.2 : 1
}
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
anchors.centerIn: parent
Behavior on scale{
ScaleAnimator{
duration: 167
easing.type: Easing.OutCubic
}
}
}
}
second.handle: Rectangle {
x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
implicitWidth: 24
implicitHeight: 24
implicitWidth: 20
implicitHeight: 20
radius: width / 2
color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
FluShadow{
radius: 12
radius: 10
}
Rectangle{
width: radius*2
height: radius*2
radius:{
FluIcon{
width: 10
height: 10
iconSource: FluentIcons.FullCircleMask
iconSize: 10
scale:{
if(control.second.pressed){
return 5
return 0.9
}
return control.second.hovered ? 7 : 6
return control.second.hovered ? 1.2 : 1
}
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
anchors.centerIn: parent
Behavior on scale{
ScaleAnimator{
duration: 167
easing.type: Easing.OutCubic
}
}
}
}
background: Item {

30
src/Qt6/imports/FluentUI/Controls/FluSlider.qml
View File

@ -16,23 +16,31 @@ T.Slider {
handle: Rectangle {
x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
implicitWidth: 24
implicitHeight: 24
radius: 12
implicitWidth: 20
implicitHeight: 20
radius: 10
color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
FluShadow{
radius: 12
radius: 10
}
Rectangle{
width: radius*2
height: radius*2
radius:{
FluIcon{
width: 10
height: 10
Behavior on scale{
ScaleAnimator{
duration: 167
easing.type: Easing.OutCubic
}
}
iconSource: FluentIcons.FullCircleMask
iconSize: 10
scale:{
if(control.pressed){
return 5
return 0.9
}
return control.hovered ? 7 : 6
return control.hovered ? 1.2 : 1
}
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
anchors.centerIn: parent
}
}

15
src/Qt6/imports/FluentUI/Controls/FluToggleSwitch.qml
View File

@ -79,7 +79,12 @@ Button {
FluIcon {
width: parent.height
x:checked ? control_backgound.width-width : 0
scale: hovered&enabled ? 7/10 : 6/10
scale: {
if(pressed){
return 5/10
}
return hovered&enabled ? 7/10 : 6/10
}
iconSource: FluentIcons.FullCircleMask
iconSize: 20
color: {
@ -91,9 +96,15 @@ Button {
}
return dotNormalColor
}
Behavior on scale{
ScaleAnimator{
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on x {
enabled: FluTheme.enableAnimation
NumberAnimation {
XAnimator {
duration: 167
easing.type: Easing.OutCubic
}