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

View File

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

View File

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

View File

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

View File

@ -18,7 +18,7 @@ Button {
property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3) 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 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 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 alias textColor: btn_text.textColor
property bool textRight: true property bool textRight: true
property real textSpacing: 6 property real textSpacing: 6
@ -101,7 +101,7 @@ Button {
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 14
visible: checked visible: checked
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible { Behavior on visible {

View File

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

View File

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

View File

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

View File

@ -78,7 +78,12 @@ Button {
FluIcon { FluIcon {
width: parent.height width: parent.height
x:checked ? control_backgound.width-width : 0 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 iconSource: FluentIcons.FullCircleMask
iconSize: 20 iconSize: 20
color: { color: {
@ -90,9 +95,15 @@ Button {
} }
return dotNormalColor return dotNormalColor
} }
Behavior on scale{
ScaleAnimator{
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on x { Behavior on x {
enabled: FluTheme.enableAnimation enabled: FluTheme.enableAnimation
NumberAnimation { XAnimator {
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }

View File

@ -19,7 +19,7 @@ Button {
property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3) 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 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 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 alias textColor: btn_text.textColor
property bool textRight: true property bool textRight: true
property real textSpacing: 6 property real textSpacing: 6
@ -97,7 +97,7 @@ Button {
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 14
visible: checked visible: checked
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible { Behavior on visible {

View File

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

View File

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

View File

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

View File

@ -79,7 +79,12 @@ Button {
FluIcon { FluIcon {
width: parent.height width: parent.height
x:checked ? control_backgound.width-width : 0 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 iconSource: FluentIcons.FullCircleMask
iconSize: 20 iconSize: 20
color: { color: {
@ -91,9 +96,15 @@ Button {
} }
return dotNormalColor return dotNormalColor
} }
Behavior on scale{
ScaleAnimator{
duration: 167
easing.type: Easing.OutCubic
}
}
Behavior on x { Behavior on x {
enabled: FluTheme.enableAnimation enabled: FluTheme.enableAnimation
NumberAnimation { XAnimator {
duration: 167 duration: 167
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }