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

update

Browse Source
This commit is contained in:
zhuzihcu 2023-05-26 13:49:32 +08:00
parent 5c0befb6c2
commit 591e6bdeff
12 changed files with 177 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
example/qml/TestWindow.qml
View File

@ -52,8 +52,8 @@ FluWindow {
text:lang.dark_mode text:lang.dark_mode
} }
FluToggleSwitch{ FluToggleSwitch{
selected: FluTheme.dark checked: FluTheme.dark
clickFunc:function(){ onClicked: {
if(FluTheme.dark){ if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light FluTheme.darkMode = FluDarkMode.Light
}else{ }else{

150
example/qml/page/T_Buttons.qml
View File

@ -22,7 +22,7 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
FluTextButton{ FluTextButton{
disabled:text_button_switch.selected disabled:text_button_switch.checked
text:"Text Button" text:"Text Button"
onClicked: { onClicked: {
showInfo("点击Text Button") showInfo("点击Text Button")
@ -32,18 +32,13 @@ FluScrollablePage{
left: parent.left left: parent.left
} }
} }
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{ FluToggleSwitch{
id:text_button_switch id:text_button_switch
Layout.alignment: Qt.AlignRight anchors{
text:"Disabled" right: parent.right
verticalCenter: parent.verticalCenter
} }
text:"Disabled"
} }
} }
CodeExpander{ CodeExpander{
@ -64,7 +59,7 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
FluButton{ FluButton{
disabled:button_switch.selected disabled:button_switch.checked
text:"Standard Button" text:"Standard Button"
onClicked: { onClicked: {
showInfo("点击StandardButton") showInfo("点击StandardButton")
@ -74,18 +69,13 @@ FluScrollablePage{
left: parent.left left: parent.left
} }
} }
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{ FluToggleSwitch{
id:button_switch id:button_switch
Layout.alignment: Qt.AlignRight anchors{
text:"Disabled" right: parent.right
verticalCenter: parent.verticalCenter
} }
text:"Disabled"
} }
} }
CodeExpander{ CodeExpander{
@ -106,7 +96,7 @@ FluScrollablePage{
paddings: 10 paddings: 10
FluFilledButton{ FluFilledButton{
disabled:filled_button_switch.selected disabled:filled_button_switch.checked
text:"Filled Button" text:"Filled Button"
onClicked: { onClicked: {
showWarning("点击FilledButton"+height) showWarning("点击FilledButton"+height)
@ -116,18 +106,13 @@ FluScrollablePage{
left: parent.left left: parent.left
} }
} }
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{ FluToggleSwitch{
id:filled_button_switch id:filled_button_switch
Layout.alignment: Qt.AlignRight anchors{
text:"Disabled" right: parent.right
verticalCenter: parent.verticalCenter
} }
text:"Disabled"
} }
} }
CodeExpander{ CodeExpander{
@ -148,28 +133,20 @@ FluScrollablePage{
paddings: 10 paddings: 10
FluToggleButton{ FluToggleButton{
disabled:toggle_button_switch.selected disabled:toggle_button_switch.checked
text:"Toggle Button" text:"Toggle Button"
onClicked: {
selected = !selected
}
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left
} }
} }
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{ FluToggleSwitch{
id:toggle_button_switch id:toggle_button_switch
Layout.alignment: Qt.AlignRight anchors{
text:"Disabled" right: parent.right
verticalCenter: parent.verticalCenter
} }
text:"Disabled"
} }
} }
CodeExpander{ CodeExpander{
@ -178,7 +155,7 @@ FluScrollablePage{
code:'FluToggleButton{ code:'FluToggleButton{
text:"Toggle Button" text:"Toggle Button"
onClicked: { onClicked: {
selected = !selected checked = !checked
} }
}' }'
} }
@ -191,7 +168,7 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
FluIconButton{ FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast iconSource:FluentIcons.ChromeCloseContrast
disabled:icon_button_switch.selected disabled:icon_button_switch.checked
iconSize: 15 iconSize: 15
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
@ -201,18 +178,13 @@ FluScrollablePage{
showSuccess("点击IconButton") showSuccess("点击IconButton")
} }
} }
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{ FluToggleSwitch{
id:icon_button_switch id:icon_button_switch
Layout.alignment: Qt.AlignRight anchors{
text:"Disabled" right: parent.right
verticalCenter: parent.verticalCenter
} }
text:"Disabled"
} }
} }
CodeExpander{ CodeExpander{
@ -232,7 +204,7 @@ FluScrollablePage{
paddings: 10 paddings: 10
Layout.topMargin: 20 Layout.topMargin: 20
FluDropDownButton{ FluDropDownButton{
disabled:drop_down_button_switch.selected disabled:drop_down_button_switch.checked
text:"DropDownButton" text:"DropDownButton"
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
@ -253,17 +225,13 @@ FluScrollablePage{
} }
] ]
} }
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{ FluToggleSwitch{
id:drop_down_button_switch id:drop_down_button_switch
Layout.alignment: Qt.AlignRight anchors{
text:"Disabled" right: parent.right
verticalCenter: parent.verticalCenter
} }
text:"Disabled"
} }
} }
CodeExpander{ CodeExpander{
@ -304,35 +272,29 @@ FluScrollablePage{
property int selecIndex : 0 property int selecIndex : 0
model: 3 model: 3
delegate: FluRadioButton{ delegate: FluRadioButton{
selected : repeater.selecIndex===index checked : repeater.selecIndex===index
disabled:radio_button_switch.selected disabled:radio_button_switch.checked
text:"Radio Button_"+index text:"Radio Button_"+index
onClicked:{ clickListener:function(){
repeater.selecIndex = index repeater.selecIndex = index
} }
} }
} }
} }
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{ FluToggleSwitch{
id:radio_button_switch id:radio_button_switch
Layout.alignment: Qt.AlignRight anchors{
text:"Disabled" right: parent.right
verticalCenter: parent.verticalCenter
} }
text:"Disabled"
} }
} }
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: -1 Layout.topMargin: -1
code:'FluRadioButton{ code:'FluRadioButton{
selected:true checked:true
text:"Text Button" text:"Text Button"
onClicked: { onClicked: {
@ -340,38 +302,4 @@ FluScrollablePage{
}' }'
} }
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
FluCheckBox{
disabled:check_box_switch.selected
text:"Check Box"
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:check_box_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluCheckBox{
text:"Check Box"
}'
}
} }

10
example/qml/page/T_CheckBox.qml
View File

@ -18,11 +18,21 @@ FluScrollablePage{
spacing: 30 spacing: 30
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
FluCheckBox{ FluCheckBox{
disabled: check_box_switch.checked
} }
FluCheckBox{ FluCheckBox{
disabled: check_box_switch.checked
text:"Text" text:"Text"
} }
} }
FluToggleSwitch{
id:check_box_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
} }
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true

8
example/qml/page/T_TextBox.qml
View File

@ -19,7 +19,7 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
placeholderText: "单行输入框" placeholderText: "单行输入框"
Layout.preferredWidth: 300 Layout.preferredWidth: 300
disabled:text_box_switch.selected disabled:text_box_switch.checked
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left
@ -57,7 +57,7 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
placeholderText: "请输入密码" placeholderText: "请输入密码"
Layout.preferredWidth: 300 Layout.preferredWidth: 300
disabled:password_box_switch.selected disabled:password_box_switch.checked
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left
@ -97,7 +97,7 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
placeholderText: "多行输入框" placeholderText: "多行输入框"
Layout.preferredWidth: 300 Layout.preferredWidth: 300
disabled:text_box_multi_switch.selected disabled:text_box_multi_switch.checked
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left
@ -137,7 +137,7 @@ FluScrollablePage{
placeholderText: "AutoSuggestBox" placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300 Layout.preferredWidth: 300
items:generateRandomNames(100) items:generateRandomNames(100)
disabled:text_box_suggest_switch.selected disabled:text_box_suggest_switch.checked
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left

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

@ -52,8 +52,8 @@ FluScrollablePage{
} }
FluToggleSwitch{ FluToggleSwitch{
Layout.topMargin: 5 Layout.topMargin: 5
selected: FluTheme.dark checked: FluTheme.dark
clickFunc:function(){ onClicked: {
if(FluTheme.dark){ if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light FluTheme.darkMode = FluDarkMode.Light
}else{ }else{
@ -67,8 +67,8 @@ FluScrollablePage{
} }
FluToggleSwitch{ FluToggleSwitch{
Layout.topMargin: 5 Layout.topMargin: 5
selected: FluTheme.nativeText checked: FluTheme.nativeText
clickFunc:function(){ onClicked: {
FluTheme.nativeText = !FluTheme.nativeText FluTheme.nativeText = !FluTheme.nativeText
} }
} }

11
example/qml/page/T_ToggleSwitch.qml
View File

@ -18,11 +18,20 @@ FluScrollablePage{
spacing: 30 spacing: 30
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
FluToggleSwitch{ FluToggleSwitch{
disabled: toggle_switch.checked
} }
FluToggleSwitch{ FluToggleSwitch{
text:"Text" disabled: toggle_switch.checked
} }
} }
FluToggleSwitch{
id:toggle_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
} }
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true

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

@ -67,8 +67,8 @@ Rectangle{
color:root.textColor color:root.textColor
} }
FluToggleSwitch{ FluToggleSwitch{
selected: FluTheme.dark checked: FluTheme.dark
clickFunc:function(){ clickListener: function(){
if(FluTheme.dark){ if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light FluTheme.darkMode = FluDarkMode.Light
}else{ }else{

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

@ -5,36 +5,28 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Button { Button {
property bool selected: false
property var clickFunc
property bool disabled: false property bool disabled: false
property color borderNormalColor: FluTheme.dark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1) property color borderNormalColor: FluTheme.dark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
property color borderSelectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color bordercheckedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1) property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color borderPressedColor: FluTheme.dark ? Qt.rgba(90/255,90/255,90/255,1) : Qt.rgba(191/255,191/255,191/255,1) property color borderPressedColor: FluTheme.dark ? Qt.rgba(90/255,90/255,90/255,1) : Qt.rgba(191/255,191/255,191/255,1)
property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
property color selectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color checkedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(236/255,236/255,236/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(236/255,236/255,236/255,1)
property color selectedHoverColor: FluTheme.dark ? Qt.darker(selectedColor,1.15) : Qt.lighter(selectedColor,1.15) property color checkedHoverColor: FluTheme.dark ? Qt.darker(checkedColor,1.15) : Qt.lighter(checkedColor,1.15)
property color selectedPreesedColor: FluTheme.dark ? Qt.darker(selectedColor,1.3) : Qt.lighter(selectedColor,1.3) property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
property color selectedDisableColor: 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 var clickListener : function(){
checked = !checked
}
id:control id:control
enabled: !disabled enabled: !disabled
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked() Keys.onSpacePressed: control.visualFocus&&clicked()
padding:0 padding:0
onClicked: { onClicked: clickListener()
if(disabled){
return
}
if(clickFunc){
clickFunc()
return
}
selected = !selected
}
background: Item{ background: Item{
FluFocusRectangle{ FluFocusRectangle{
visible: control.visualFocus visible: control.visualFocus
@ -50,8 +42,8 @@ Button {
if(disabled){ if(disabled){
return borderDisableColor return borderDisableColor
} }
if(selected){ if(checked){
return borderSelectedColor return bordercheckedColor
} }
if(pressed){ if(pressed){
return borderPressedColor return borderPressedColor
@ -63,17 +55,20 @@ Button {
} }
border.width: 1 border.width: 1
color: { color: {
if(selected){ if(checked){
if(disabled){ if(disabled){
return selectedDisableColor return checkedDisableColor
} }
if(pressed){ if(pressed){
return selectedPreesedColor return checkedPreesedColor
} }
if(hovered){ if(hovered){
return selectedHoverColor return checkedHoverColor
} }
return selectedColor return checkedColor
}
if(disabled){
return disableColor
} }
if(hovered){ if(hovered){
return hoverColor return hoverColor
@ -82,18 +77,18 @@ Button {
} }
Behavior on color { Behavior on color {
ColorAnimation{ ColorAnimation{
duration: 150 duration: 83
} }
} }
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 15
visible: selected 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 {
NumberAnimation{ NumberAnimation{
duration: 150 duration: 83
} }
} }
} }

16
src/imports/FluentUI/Controls/FluPagination.qml
View File

@ -25,7 +25,7 @@ Item {
visible: control.pageCount>1 visible: control.pageCount>1
disabled: control.pageCurrent<=1 disabled: control.pageCurrent<=1
text:control.previousText text:control.previousText
onClicked: { clickListener:function() {
control.calcNewPage(control.pageCurrent-1); control.calcNewPage(control.pageCurrent-1);
} }
} }
@ -35,9 +35,9 @@ Item {
property int pageNumber:1 property int pageNumber:1
visible: control.pageCount>0 visible: control.pageCount>0
enabled: control.pageCurrent>1 enabled: control.pageCurrent>1
selected: pageNumber === control.pageCurrent checked: pageNumber === control.pageCurrent
text:String(pageNumber) text:String(pageNumber)
onClicked: { clickListener:function() {
control.calcNewPage(pageNumber); control.calcNewPage(pageNumber);
} }
} }
@ -58,8 +58,8 @@ Item {
:(control.pageCurrent+2+index-control.__pageButtonHalf) :(control.pageCurrent+2+index-control.__pageButtonHalf)
} }
text:String(pageNumber) text:String(pageNumber)
selected: pageNumber === control.pageCurrent checked: pageNumber === control.pageCurrent
onClicked: { clickListener:function(){
control.calcNewPage(pageNumber); control.calcNewPage(pageNumber);
} }
} }
@ -72,9 +72,9 @@ Item {
FluToggleButton{ FluToggleButton{
property int pageNumber:control.pageCount property int pageNumber:control.pageCount
visible: control.pageCount>1 visible: control.pageCount>1
selected: pageNumber === control.pageCurrent checked: pageNumber === control.pageCurrent
text:String(pageNumber) text:String(pageNumber)
onClicked: { clickListener:function(){
control.calcNewPage(pageNumber); control.calcNewPage(pageNumber);
} }
} }
@ -83,7 +83,7 @@ Item {
visible: control.pageCount>1 visible: control.pageCount>1
disabled: control.pageCurrent>=control.pageCount disabled: control.pageCurrent>=control.pageCount
text:control.nextText text:control.nextText
onClicked: { clickListener:function() {
control.calcNewPage(control.pageCurrent+1); control.calcNewPage(control.pageCurrent+1);
} }
} }

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

@ -5,8 +5,15 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Button { Button {
property bool selected: false
property bool disabled: false property bool disabled: false
property color borderNormalColor: checked ? FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark : FluTheme.dark ? Qt.rgba(161/255,161/255,161/255,1) : Qt.rgba(141/255,141/255,141/255,1)
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(198/255,198/255,198/255,1)
property color normalColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(1,1,1,1)
property color hoverColor: checked ? FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(1,1,1,1) : FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(222/255,222/255,222/255,1)
property color disableColor: checked ? FluTheme.dark ? Qt.rgba(159/255,159/255,159/255,1) : Qt.rgba(159/255,159/255,159/255,1) : FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(222/255,222/255,222/255,1)
property var clickListener : function(){
checked = !checked
}
id:control id:control
enabled: !disabled enabled: !disabled
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus
@ -18,6 +25,7 @@ Button {
} }
font:FluTextStyle.Body font:FluTextStyle.Body
Keys.onSpacePressed: control.visualFocus&&clicked() Keys.onSpacePressed: control.visualFocus&&clicked()
onClicked: clickListener()
contentItem: RowLayout{ contentItem: RowLayout{
Rectangle{ Rectangle{
id:rect_check id:rect_check
@ -25,22 +33,22 @@ Button {
height: 20 height: 20
radius: 10 radius: 10
border.width: { border.width: {
if(selected&&disabled){ if(checked&&disabled){
return 3 return 3
} }
if(pressed){ if(pressed){
if(selected){ if(checked){
return 5 return 5
} }
return 1 return 1
} }
if(hovered){ if(hovered){
if(selected){ if(checked){
return 3 return 3
} }
return 1 return 1
} }
return selected ? 5 : 1 return checked ? 5 : 1
} }
Behavior on border.width { Behavior on border.width {
NumberAnimation{ NumberAnimation{
@ -51,46 +59,18 @@ Button {
} }
border.color: { border.color: {
if(disabled){ if(disabled){
if(FluTheme.dark){ return borderDisableColor
return Qt.rgba(82/255,82/255,82/255,1)
}else{
return Qt.rgba(198/255,198/255,198/255,1)
}
}
if(selected){
if(FluTheme.dark){
return FluTheme.primaryColor.lighter
}else{
return FluTheme.primaryColor.dark
}
}else{
if(FluTheme.dark){
return Qt.rgba(161/255,161/255,161/255,1)
}else{
return Qt.rgba(141/255,141/255,141/255,1)
}
} }
return borderNormalColor
} }
color:{ color:{
if(disabled&&selected){ if(disabled){
return Qt.rgba(159/255,159/255,159/255,1) return disableColor
} }
if(FluTheme.dark){
if(hovered){ if(hovered){
return Qt.rgba(43/255,43/255,43/255,1) return hoverColor
}
return Qt.rgba(50/255,50/255,50/255,1)
}else{
if(hovered){
if(selected){
return Qt.rgba(1,1,1,1)
}
return Qt.rgba(222/255,222/255,222/255,1)
}
return Qt.rgba(1,1,1,1)
} }
return normalColor
} }
} }
FluText{ FluText{

23
src/imports/FluentUI/Controls/FluToggleButton.qml
View File

@ -6,42 +6,43 @@ import FluentUI
Button { Button {
property bool disabled: false property bool disabled: false
property bool selected: false
property color normalColor: { property color normalColor: {
if(selected){ if(checked){
return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
}else{ }else{
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1) return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
} }
} }
property color hoverColor: { property color hoverColor: {
if(selected){ if(checked){
return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1) return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
}else{ }else{
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
} }
} }
property color disableColor: { property color disableColor: {
if(selected){ if(checked){
return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
}else{ }else{
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
} }
} }
property var clickListener : function(){
checked = !checked
}
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2) property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
id: control id: control
enabled: !disabled enabled: !disabled
Keys.onSpacePressed: control.visualFocus&&clicked() Keys.onSpacePressed: control.visualFocus&&clicked()
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus
horizontalPadding:12 horizontalPadding:12
onClicked: clickListener()
background: Rectangle{ background: Rectangle{
implicitWidth: 28 implicitWidth: 28
implicitHeight: 28 implicitHeight: 28
radius: 4 radius: 4
border.color: FluTheme.dark ? "#505050" : "#DFDFDF" border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: selected ? 0 : 1 border.width: checked ? 0 : 1
FluFocusRectangle{ FluFocusRectangle{
visible: control.visualFocus visible: control.visualFocus
radius:8 radius:8
@ -50,7 +51,7 @@ Button {
if(disabled){ if(disabled){
return disableColor return disableColor
} }
if(selected){ if(checked){
if(pressed){ if(pressed){
return pressedColor return pressedColor
} }
@ -63,7 +64,7 @@ Button {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: { color: {
if(selected){ if(checked){
if(FluTheme.dark){ if(FluTheme.dark){
if(disabled){ if(disabled){
return Qt.rgba(173/255,173/255,173/255,1) return Qt.rgba(173/255,173/255,173/255,1)
@ -77,7 +78,7 @@ Button {
if(disabled){ if(disabled){
return Qt.rgba(131/255,131/255,131/255,1) return Qt.rgba(131/255,131/255,131/255,1)
} }
if(!selected){ if(!checked){
if(pressed){ if(pressed){
return Qt.rgba(162/255,162/255,162/255,1) return Qt.rgba(162/255,162/255,162/255,1)
} }
@ -87,7 +88,7 @@ Button {
if(disabled){ if(disabled){
return Qt.rgba(160/255,160/255,160/255,1) return Qt.rgba(160/255,160/255,160/255,1)
} }
if(!selected){ if(!checked){
if(pressed){ if(pressed){
return Qt.rgba(96/255,96/255,96/255,1) return Qt.rgba(96/255,96/255,96/255,1)
} }

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

@ -5,22 +5,26 @@ import QtQuick.Layouts
import FluentUI import FluentUI
Button { Button {
property bool disabled: false
property bool selected: false property color disableColor: checked ? FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(159/255,159/255,159/255,1) :FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(240/255,240/255,240/255,1)
property var clickFunc property color checkColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(240/255,240/255,240/255,1)
property color normalColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
property color borderNormalColor: FluTheme.dark ? Qt.rgba(161/255,161/255,161/255,1) : Qt.rgba(141/255,141/255,141/255,1)
property color borderCheckColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color borderDisableColor: FluTheme.dark ? Qt.rgba(208/255,208/255,208/255,1) : Qt.rgba(93/255,93/255,93/255,1)
property color dotNormalColor: FluTheme.dark ? Qt.rgba(208/255,208/255,208/255,1) : Qt.rgba(93/255,93/255,93/255,1)
property color dotCheckColor: FluTheme.dark ? Qt.rgba(0/255,0/255,0/255,1) : Qt.rgba(255/255,255/255,255/255,1)
property var clickListener : function(){
checked = !checked
}
id: control id: control
height: 20 height: 20
enabled: !disabled
implicitHeight: height implicitHeight: height
focusPolicy:Qt.TabFocus focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked() Keys.onSpacePressed: control.visualFocus&&clicked()
onClicked: { onClicked: clickListener()
if(clickFunc){
clickFunc()
return
}
selected = !selected
}
contentItem: Item{} contentItem: Item{}
background : RowLayout{ background : RowLayout{
spacing: 0 spacing: 0
@ -34,39 +38,45 @@ Button {
radius: 20 radius: 20
} }
color: { color: {
if(FluTheme.dark){ if(disabled){
if(selected){ return disableColor
return FluTheme.primaryColor.dark }
if(checked){
return checkColor
} }
if(hovered){ if(hovered){
return "#3E3E3C" return hoverColor
}
return "#323232"
}else{
if(selected){
return FluTheme.primaryColor.dark
}
if(hovered){
return "#F4F4F4"
}
return "#FFFFFF"
} }
return normalColor
} }
border.width: 1 border.width: 1
border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666" border.color: {
if(disabled){
return borderDisableColor
}
if(checked){
return borderCheckColor
}
return borderNormalColor
}
Rectangle { Rectangle {
width: pressed ? 28 : 20 width: pressed ? 28 : 20
anchors{ anchors{
left: selected ? undefined : parent.left left: checked ? undefined : parent.left
leftMargin: selected ? 20 : 0 leftMargin: checked ? 20 : 0
right: selected ? parent.right : undefined right: checked ? parent.right : undefined
rightMargin: selected ? 0: 20 rightMargin: checked ? 0: 20
} }
height: 20 height: 20
radius: 10 radius: 10
scale: hovered ? 7/10 : 6/10 scale: hovered&!disabled ? 7/10 : 6/10
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: selected ? "#FFFFFF" : "#666666" color: {
if(checked){
return dotCheckColor
}
return dotNormalColor
}
Behavior on anchors.leftMargin { Behavior on anchors.leftMargin {
NumberAnimation { NumberAnimation {
duration: 167 duration: 167