From 591e6bdeff5103d39c3021fab97a6812cfdee8cb Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Fri, 26 May 2023 13:49:32 +0800 Subject: [PATCH] update --- example/qml/TestWindow.qml | 4 +- example/qml/page/T_Buttons.qml | 150 +++++------------- example/qml/page/T_CheckBox.qml | 10 ++ example/qml/page/T_TextBox.qml | 8 +- example/qml/page/T_Theme.qml | 8 +- example/qml/page/T_ToggleSwitch.qml | 11 +- src/imports/FluentUI/Controls/FluAppBar.qml | 4 +- src/imports/FluentUI/Controls/FluCheckBox.qml | 49 +++--- .../FluentUI/Controls/FluPagination.qml | 16 +- .../FluentUI/Controls/FluRadioButton.qml | 60 +++---- .../FluentUI/Controls/FluToggleButton.qml | 23 +-- .../FluentUI/Controls/FluToggleSwitch.qml | 78 +++++---- 12 files changed, 177 insertions(+), 244 deletions(-) diff --git a/example/qml/TestWindow.qml b/example/qml/TestWindow.qml index f75f284a..8916fecd 100644 --- a/example/qml/TestWindow.qml +++ b/example/qml/TestWindow.qml @@ -52,8 +52,8 @@ FluWindow { text:lang.dark_mode } FluToggleSwitch{ - selected: FluTheme.dark - clickFunc:function(){ + checked: FluTheme.dark + onClicked: { if(FluTheme.dark){ FluTheme.darkMode = FluDarkMode.Light }else{ diff --git a/example/qml/page/T_Buttons.qml b/example/qml/page/T_Buttons.qml index 5ca0632e..719c07f6 100644 --- a/example/qml/page/T_Buttons.qml +++ b/example/qml/page/T_Buttons.qml @@ -22,7 +22,7 @@ FluScrollablePage{ Layout.topMargin: 20 FluTextButton{ - disabled:text_button_switch.selected + disabled:text_button_switch.checked text:"Text Button" onClicked: { showInfo("点击Text Button") @@ -32,18 +32,13 @@ FluScrollablePage{ left: parent.left } } - - Row{ - spacing: 5 + FluToggleSwitch{ + id:text_button_switch anchors{ - verticalCenter: parent.verticalCenter right: parent.right + verticalCenter: parent.verticalCenter } - FluToggleSwitch{ - id:text_button_switch - Layout.alignment: Qt.AlignRight - text:"Disabled" - } + text:"Disabled" } } CodeExpander{ @@ -64,7 +59,7 @@ FluScrollablePage{ Layout.topMargin: 20 FluButton{ - disabled:button_switch.selected + disabled:button_switch.checked text:"Standard Button" onClicked: { showInfo("点击StandardButton") @@ -74,18 +69,13 @@ FluScrollablePage{ left: parent.left } } - - Row{ - spacing: 5 + FluToggleSwitch{ + id:button_switch anchors{ - verticalCenter: parent.verticalCenter right: parent.right + verticalCenter: parent.verticalCenter } - FluToggleSwitch{ - id:button_switch - Layout.alignment: Qt.AlignRight - text:"Disabled" - } + text:"Disabled" } } CodeExpander{ @@ -106,7 +96,7 @@ FluScrollablePage{ paddings: 10 FluFilledButton{ - disabled:filled_button_switch.selected + disabled:filled_button_switch.checked text:"Filled Button" onClicked: { showWarning("点击FilledButton"+height) @@ -116,18 +106,13 @@ FluScrollablePage{ left: parent.left } } - - Row{ - spacing: 5 + FluToggleSwitch{ + id:filled_button_switch anchors{ - verticalCenter: parent.verticalCenter right: parent.right + verticalCenter: parent.verticalCenter } - FluToggleSwitch{ - id:filled_button_switch - Layout.alignment: Qt.AlignRight - text:"Disabled" - } + text:"Disabled" } } CodeExpander{ @@ -148,28 +133,20 @@ FluScrollablePage{ paddings: 10 FluToggleButton{ - disabled:toggle_button_switch.selected + disabled:toggle_button_switch.checked text:"Toggle Button" - onClicked: { - selected = !selected - } anchors{ verticalCenter: parent.verticalCenter left: parent.left } } - - Row{ - spacing: 5 + FluToggleSwitch{ + id:toggle_button_switch anchors{ - verticalCenter: parent.verticalCenter right: parent.right + verticalCenter: parent.verticalCenter } - FluToggleSwitch{ - id:toggle_button_switch - Layout.alignment: Qt.AlignRight - text:"Disabled" - } + text:"Disabled" } } CodeExpander{ @@ -178,7 +155,7 @@ FluScrollablePage{ code:'FluToggleButton{ text:"Toggle Button" onClicked: { - selected = !selected + checked = !checked } }' } @@ -191,7 +168,7 @@ FluScrollablePage{ Layout.topMargin: 20 FluIconButton{ iconSource:FluentIcons.ChromeCloseContrast - disabled:icon_button_switch.selected + disabled:icon_button_switch.checked iconSize: 15 anchors{ verticalCenter: parent.verticalCenter @@ -201,18 +178,13 @@ FluScrollablePage{ showSuccess("点击IconButton") } } - - Row{ - spacing: 5 + FluToggleSwitch{ + id:icon_button_switch anchors{ - verticalCenter: parent.verticalCenter right: parent.right + verticalCenter: parent.verticalCenter } - FluToggleSwitch{ - id:icon_button_switch - Layout.alignment: Qt.AlignRight - text:"Disabled" - } + text:"Disabled" } } CodeExpander{ @@ -232,7 +204,7 @@ FluScrollablePage{ paddings: 10 Layout.topMargin: 20 FluDropDownButton{ - disabled:drop_down_button_switch.selected + disabled:drop_down_button_switch.checked text:"DropDownButton" anchors{ verticalCenter: parent.verticalCenter @@ -253,17 +225,13 @@ FluScrollablePage{ } ] } - Row{ - spacing: 5 + FluToggleSwitch{ + id:drop_down_button_switch anchors{ - verticalCenter: parent.verticalCenter right: parent.right + verticalCenter: parent.verticalCenter } - FluToggleSwitch{ - id:drop_down_button_switch - Layout.alignment: Qt.AlignRight - text:"Disabled" - } + text:"Disabled" } } CodeExpander{ @@ -304,35 +272,29 @@ FluScrollablePage{ property int selecIndex : 0 model: 3 delegate: FluRadioButton{ - selected : repeater.selecIndex===index - disabled:radio_button_switch.selected + checked : repeater.selecIndex===index + disabled:radio_button_switch.checked text:"Radio Button_"+index - onClicked:{ + clickListener:function(){ repeater.selecIndex = index } } } } - - - Row{ - spacing: 5 + FluToggleSwitch{ + id:radio_button_switch anchors{ - verticalCenter: parent.verticalCenter right: parent.right + verticalCenter: parent.verticalCenter } - FluToggleSwitch{ - id:radio_button_switch - Layout.alignment: Qt.AlignRight - text:"Disabled" - } + text:"Disabled" } } CodeExpander{ Layout.fillWidth: true Layout.topMargin: -1 code:'FluRadioButton{ - selected:true + checked:true text:"Text Button" 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" -}' - } } diff --git a/example/qml/page/T_CheckBox.qml b/example/qml/page/T_CheckBox.qml index fa0d7e6d..9258bd81 100644 --- a/example/qml/page/T_CheckBox.qml +++ b/example/qml/page/T_CheckBox.qml @@ -18,11 +18,21 @@ FluScrollablePage{ spacing: 30 anchors.verticalCenter: parent.verticalCenter FluCheckBox{ + disabled: check_box_switch.checked } FluCheckBox{ + disabled: check_box_switch.checked text:"Text" } } + FluToggleSwitch{ + id:check_box_switch + anchors{ + right: parent.right + verticalCenter: parent.verticalCenter + } + text:"Disabled" + } } CodeExpander{ Layout.fillWidth: true diff --git a/example/qml/page/T_TextBox.qml b/example/qml/page/T_TextBox.qml index 91ac54b1..7a880c66 100644 --- a/example/qml/page/T_TextBox.qml +++ b/example/qml/page/T_TextBox.qml @@ -19,7 +19,7 @@ FluScrollablePage{ Layout.topMargin: 20 placeholderText: "单行输入框" Layout.preferredWidth: 300 - disabled:text_box_switch.selected + disabled:text_box_switch.checked anchors{ verticalCenter: parent.verticalCenter left: parent.left @@ -57,7 +57,7 @@ FluScrollablePage{ Layout.topMargin: 20 placeholderText: "请输入密码" Layout.preferredWidth: 300 - disabled:password_box_switch.selected + disabled:password_box_switch.checked anchors{ verticalCenter: parent.verticalCenter left: parent.left @@ -97,7 +97,7 @@ FluScrollablePage{ Layout.topMargin: 20 placeholderText: "多行输入框" Layout.preferredWidth: 300 - disabled:text_box_multi_switch.selected + disabled:text_box_multi_switch.checked anchors{ verticalCenter: parent.verticalCenter left: parent.left @@ -137,7 +137,7 @@ FluScrollablePage{ placeholderText: "AutoSuggestBox" Layout.preferredWidth: 300 items:generateRandomNames(100) - disabled:text_box_suggest_switch.selected + disabled:text_box_suggest_switch.checked anchors{ verticalCenter: parent.verticalCenter left: parent.left diff --git a/example/qml/page/T_Theme.qml b/example/qml/page/T_Theme.qml index 7785d51f..dbdef446 100644 --- a/example/qml/page/T_Theme.qml +++ b/example/qml/page/T_Theme.qml @@ -52,8 +52,8 @@ FluScrollablePage{ } FluToggleSwitch{ Layout.topMargin: 5 - selected: FluTheme.dark - clickFunc:function(){ + checked: FluTheme.dark + onClicked: { if(FluTheme.dark){ FluTheme.darkMode = FluDarkMode.Light }else{ @@ -67,8 +67,8 @@ FluScrollablePage{ } FluToggleSwitch{ Layout.topMargin: 5 - selected: FluTheme.nativeText - clickFunc:function(){ + checked: FluTheme.nativeText + onClicked: { FluTheme.nativeText = !FluTheme.nativeText } } diff --git a/example/qml/page/T_ToggleSwitch.qml b/example/qml/page/T_ToggleSwitch.qml index 1fe993e8..f7ed68b2 100644 --- a/example/qml/page/T_ToggleSwitch.qml +++ b/example/qml/page/T_ToggleSwitch.qml @@ -18,11 +18,20 @@ FluScrollablePage{ spacing: 30 anchors.verticalCenter: parent.verticalCenter FluToggleSwitch{ + disabled: toggle_switch.checked } FluToggleSwitch{ - text:"Text" + disabled: toggle_switch.checked } } + FluToggleSwitch{ + id:toggle_switch + anchors{ + right: parent.right + verticalCenter: parent.verticalCenter + } + text:"Disabled" + } } CodeExpander{ Layout.fillWidth: true diff --git a/src/imports/FluentUI/Controls/FluAppBar.qml b/src/imports/FluentUI/Controls/FluAppBar.qml index 0e61017b..3704480b 100644 --- a/src/imports/FluentUI/Controls/FluAppBar.qml +++ b/src/imports/FluentUI/Controls/FluAppBar.qml @@ -67,8 +67,8 @@ Rectangle{ color:root.textColor } FluToggleSwitch{ - selected: FluTheme.dark - clickFunc:function(){ + checked: FluTheme.dark + clickListener: function(){ if(FluTheme.dark){ FluTheme.darkMode = FluDarkMode.Light }else{ diff --git a/src/imports/FluentUI/Controls/FluCheckBox.qml b/src/imports/FluentUI/Controls/FluCheckBox.qml index 3c6fe0ad..2a888249 100644 --- a/src/imports/FluentUI/Controls/FluCheckBox.qml +++ b/src/imports/FluentUI/Controls/FluCheckBox.qml @@ -5,36 +5,28 @@ import QtQuick.Layouts import FluentUI Button { - property bool selected: false - property var clickFunc 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 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 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 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 selectedHoverColor: FluTheme.dark ? Qt.darker(selectedColor,1.15) : Qt.lighter(selectedColor,1.15) - property color selectedPreesedColor: FluTheme.dark ? Qt.darker(selectedColor,1.3) : Qt.lighter(selectedColor,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 checkedHoverColor: FluTheme.dark ? Qt.darker(checkedColor,1.15) : Qt.lighter(checkedColor,1.15) + 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 var clickListener : function(){ + checked = !checked + } id:control enabled: !disabled focusPolicy:Qt.TabFocus Keys.onSpacePressed: control.visualFocus&&clicked() padding:0 - onClicked: { - if(disabled){ - return - } - if(clickFunc){ - clickFunc() - return - } - selected = !selected - } + onClicked: clickListener() background: Item{ FluFocusRectangle{ visible: control.visualFocus @@ -50,8 +42,8 @@ Button { if(disabled){ return borderDisableColor } - if(selected){ - return borderSelectedColor + if(checked){ + return bordercheckedColor } if(pressed){ return borderPressedColor @@ -63,17 +55,20 @@ Button { } border.width: 1 color: { - if(selected){ + if(checked){ if(disabled){ - return selectedDisableColor + return checkedDisableColor } if(pressed){ - return selectedPreesedColor + return checkedPreesedColor } if(hovered){ - return selectedHoverColor + return checkedHoverColor } - return selectedColor + return checkedColor + } + if(disabled){ + return disableColor } if(hovered){ return hoverColor @@ -82,18 +77,18 @@ Button { } Behavior on color { ColorAnimation{ - duration: 150 + duration: 83 } } FluIcon { anchors.centerIn: parent iconSource: FluentIcons.AcceptMedium iconSize: 15 - visible: selected + visible: checked iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) Behavior on visible { NumberAnimation{ - duration: 150 + duration: 83 } } } diff --git a/src/imports/FluentUI/Controls/FluPagination.qml b/src/imports/FluentUI/Controls/FluPagination.qml index f40c9b3e..41fd1353 100644 --- a/src/imports/FluentUI/Controls/FluPagination.qml +++ b/src/imports/FluentUI/Controls/FluPagination.qml @@ -25,7 +25,7 @@ Item { visible: control.pageCount>1 disabled: control.pageCurrent<=1 text:control.previousText - onClicked: { + clickListener:function() { control.calcNewPage(control.pageCurrent-1); } } @@ -35,9 +35,9 @@ Item { property int pageNumber:1 visible: control.pageCount>0 enabled: control.pageCurrent>1 - selected: pageNumber === control.pageCurrent + checked: pageNumber === control.pageCurrent text:String(pageNumber) - onClicked: { + clickListener:function() { control.calcNewPage(pageNumber); } } @@ -58,8 +58,8 @@ Item { :(control.pageCurrent+2+index-control.__pageButtonHalf) } text:String(pageNumber) - selected: pageNumber === control.pageCurrent - onClicked: { + checked: pageNumber === control.pageCurrent + clickListener:function(){ control.calcNewPage(pageNumber); } } @@ -72,9 +72,9 @@ Item { FluToggleButton{ property int pageNumber:control.pageCount visible: control.pageCount>1 - selected: pageNumber === control.pageCurrent + checked: pageNumber === control.pageCurrent text:String(pageNumber) - onClicked: { + clickListener:function(){ control.calcNewPage(pageNumber); } } @@ -83,7 +83,7 @@ Item { visible: control.pageCount>1 disabled: control.pageCurrent>=control.pageCount text:control.nextText - onClicked: { + clickListener:function() { control.calcNewPage(control.pageCurrent+1); } } diff --git a/src/imports/FluentUI/Controls/FluRadioButton.qml b/src/imports/FluentUI/Controls/FluRadioButton.qml index b14ac03d..4fa514f2 100644 --- a/src/imports/FluentUI/Controls/FluRadioButton.qml +++ b/src/imports/FluentUI/Controls/FluRadioButton.qml @@ -5,8 +5,15 @@ import QtQuick.Layouts import FluentUI Button { - property bool selected: 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 enabled: !disabled focusPolicy:Qt.TabFocus @@ -18,6 +25,7 @@ Button { } font:FluTextStyle.Body Keys.onSpacePressed: control.visualFocus&&clicked() + onClicked: clickListener() contentItem: RowLayout{ Rectangle{ id:rect_check @@ -25,22 +33,22 @@ Button { height: 20 radius: 10 border.width: { - if(selected&&disabled){ + if(checked&&disabled){ return 3 } if(pressed){ - if(selected){ + if(checked){ return 5 } return 1 } if(hovered){ - if(selected){ + if(checked){ return 3 } return 1 } - return selected ? 5 : 1 + return checked ? 5 : 1 } Behavior on border.width { NumberAnimation{ @@ -51,46 +59,18 @@ Button { } border.color: { if(disabled){ - if(FluTheme.dark){ - 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 borderDisableColor } + return borderNormalColor } color:{ - if(disabled&&selected){ - return Qt.rgba(159/255,159/255,159/255,1) + if(disabled){ + return disableColor } - if(FluTheme.dark){ - if(hovered){ - return Qt.rgba(43/255,43/255,43/255,1) - } - 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) + if(hovered){ + return hoverColor } + return normalColor } } FluText{ diff --git a/src/imports/FluentUI/Controls/FluToggleButton.qml b/src/imports/FluentUI/Controls/FluToggleButton.qml index a1f7df20..a657d935 100644 --- a/src/imports/FluentUI/Controls/FluToggleButton.qml +++ b/src/imports/FluentUI/Controls/FluToggleButton.qml @@ -6,42 +6,43 @@ import FluentUI Button { property bool disabled: false - property bool selected: false property color normalColor: { - if(selected){ + if(checked){ return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark }else{ return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1) } } property color hoverColor: { - if(selected){ + if(checked){ return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1) }else{ return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) } } 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) }else{ 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) - id: control enabled: !disabled Keys.onSpacePressed: control.visualFocus&&clicked() focusPolicy:Qt.TabFocus horizontalPadding:12 + onClicked: clickListener() background: Rectangle{ implicitWidth: 28 implicitHeight: 28 radius: 4 border.color: FluTheme.dark ? "#505050" : "#DFDFDF" - border.width: selected ? 0 : 1 + border.width: checked ? 0 : 1 FluFocusRectangle{ visible: control.visualFocus radius:8 @@ -50,7 +51,7 @@ Button { if(disabled){ return disableColor } - if(selected){ + if(checked){ if(pressed){ return pressedColor } @@ -63,7 +64,7 @@ Button { horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter color: { - if(selected){ + if(checked){ if(FluTheme.dark){ if(disabled){ return Qt.rgba(173/255,173/255,173/255,1) @@ -77,7 +78,7 @@ Button { if(disabled){ return Qt.rgba(131/255,131/255,131/255,1) } - if(!selected){ + if(!checked){ if(pressed){ return Qt.rgba(162/255,162/255,162/255,1) } @@ -87,7 +88,7 @@ Button { if(disabled){ return Qt.rgba(160/255,160/255,160/255,1) } - if(!selected){ + if(!checked){ if(pressed){ return Qt.rgba(96/255,96/255,96/255,1) } diff --git a/src/imports/FluentUI/Controls/FluToggleSwitch.qml b/src/imports/FluentUI/Controls/FluToggleSwitch.qml index 52039aaf..18735e2f 100644 --- a/src/imports/FluentUI/Controls/FluToggleSwitch.qml +++ b/src/imports/FluentUI/Controls/FluToggleSwitch.qml @@ -5,22 +5,26 @@ import QtQuick.Layouts import FluentUI Button { - - property bool selected: false - property var clickFunc - + property bool disabled: 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 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 height: 20 + enabled: !disabled implicitHeight: height focusPolicy:Qt.TabFocus Keys.onSpacePressed: control.visualFocus&&clicked() - onClicked: { - if(clickFunc){ - clickFunc() - return - } - selected = !selected - } + onClicked: clickListener() contentItem: Item{} background : RowLayout{ spacing: 0 @@ -34,39 +38,45 @@ Button { radius: 20 } color: { - if(FluTheme.dark){ - if(selected){ - return FluTheme.primaryColor.dark - } - if(hovered){ - return "#3E3E3C" - } - return "#323232" - }else{ - if(selected){ - return FluTheme.primaryColor.dark - } - if(hovered){ - return "#F4F4F4" - } - return "#FFFFFF" + if(disabled){ + return disableColor } + if(checked){ + return checkColor + } + if(hovered){ + return hoverColor + } + return normalColor } 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 { width: pressed ? 28 : 20 anchors{ - left: selected ? undefined : parent.left - leftMargin: selected ? 20 : 0 - right: selected ? parent.right : undefined - rightMargin: selected ? 0: 20 + left: checked ? undefined : parent.left + leftMargin: checked ? 20 : 0 + right: checked ? parent.right : undefined + rightMargin: checked ? 0: 20 } height: 20 radius: 10 - scale: hovered ? 7/10 : 6/10 + scale: hovered&!disabled ? 7/10 : 6/10 anchors.verticalCenter: parent.verticalCenter - color: selected ? "#FFFFFF" : "#666666" + color: { + if(checked){ + return dotCheckColor + } + return dotNormalColor + } Behavior on anchors.leftMargin { NumberAnimation { duration: 167