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

update

Browse Source
This commit is contained in:
zhuzichu 2023-06-20 18:02:15 +08:00
parent 82f606dd65
commit b442696f92
26 changed files with 238 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
example/qml/global/ItemsOriginal.qml
View File

@ -72,6 +72,12 @@ FluObject{
navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
}
}
FluPaneItem{
title:"RadioButton"
onTap:{
navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
}
}
FluPaneItem{
title:"ToggleSwitch"
onTap:{

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

@ -22,7 +22,12 @@ FluScrollablePage{
}
FluCheckBox{
disabled: check_box_switch.checked
text:"Text"
text:"Right"
}
FluCheckBox{
disabled: check_box_switch.checked
text:"Left"
textRight: false
}
}
FluToggleSwitch{

18
example/qml/page/T_Menu.qml
View File

@ -16,7 +16,19 @@ FluScrollablePage{
Action { text: qsTr("Open...") }
Action { text: qsTr("Save") }
FluMenuSeparator { }
Action { text: qsTr("Quit") }
Action {
text: qsTr("Quit")
onTriggered: {
showError("Quit")
}
}
Action {
text: qsTr("Disable")
enabled:false
onTriggered: {
showError("Disable")
}
}
FluMenuSeparator { }
Action { text: qsTr("Check");checkable: true;checked: true}
FluMenu{
@ -104,6 +116,10 @@ menu.popup()
Action { text: qsTr("Save") }
FluMenuSeparator { }
Action { text: qsTr("Quit") }
Action {
text: qsTr("Disable")
enabled:false
}
FluMenu{
title: "Save As..."
Action { text: qsTr("Doc") }

50
example/qml/page/T_RadioButton.qml Normal file
View File

@ -0,0 +1,50 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "qrc:///example/qml/component"
FluScrollablePage{
title:"RadioButton"
FluArea{
Layout.fillWidth: true
height: 68
paddings: 10
Layout.topMargin: 20
Row{
spacing: 30
anchors.verticalCenter: parent.verticalCenter
FluRadioButton{
disabled: radio_button_switch.checked
}
FluRadioButton{
disabled: radio_button_switch.checked
text:"Right"
}
FluRadioButton{
disabled: radio_button_switch.checked
text:"Left"
textRight: false
}
}
FluToggleSwitch{
id:radio_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluRadioButton{
text:"Text"
}'
}
}

9
example/qml/page/T_Settings.qml
View File

@ -13,11 +13,11 @@ FluScrollablePage{
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 136
height: 128
paddings: 10
ColumnLayout{
spacing: 10
spacing: 5
anchors{
top: parent.top
left: parent.left
@ -43,16 +43,15 @@ FluScrollablePage{
FluArea{
Layout.fillWidth: true
Layout.topMargin: 20
height: 168
height: 160
paddings: 10
ColumnLayout{
spacing: 10
spacing: 5
anchors{
top: parent.top
left: parent.left
}
FluText{
text:lang.navigation_view_display_mode
font: FluTextStyle.BodyStrong

1
example/qml/page/T_Slider.qml
View File

@ -26,7 +26,6 @@ FluScrollablePage{
}'
}
FluArea{
Layout.fillWidth: true
height: 200

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

@ -22,6 +22,12 @@ FluScrollablePage{
}
FluToggleSwitch{
disabled: toggle_switch.checked
text:"Right"
}
FluToggleSwitch{
disabled: toggle_switch.checked
text:"Left"
textRight: false
}
}
FluToggleSwitch{

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

@ -219,7 +219,7 @@ CustomWindow {
NumberAnimation {
target: canvas
property: "radius"
duration: 666
duration: 333
easing.type: Easing.OutCubic
}
}

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

@ -76,20 +76,16 @@ Rectangle{
anchors.right: parent.right
height: root.height
spacing: 0
RowLayout{
FluToggleSwitch{
id:btn_dark
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 5
visible: showDark
spacing: 5
FluText{
text:darkText
color:root.textColor
}
FluToggleSwitch{
id:btn_dark
checked: FluTheme.dark
clickListener:()=> darkClickListener(btn_dark)
}
text:darkText
textColor:root.textColor
checked: FluTheme.dark
textRight: false
clickListener:()=> darkClickListener(btn_dark)
}
FluIconButton{
id:btn_minimize

6
src/imports/FluentUI/Controls/FluButton.qml
View File

@ -11,7 +11,7 @@ Button {
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
property color textColor: {
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
@ -19,7 +19,7 @@ Button {
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){
@ -44,7 +44,7 @@ Button {
border.width: 1
radius: 4
color:{
if(disabled){
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor

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

@ -19,6 +19,10 @@ 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 alias textColor: btn_text.textColor
property bool textRight: true
property real textSpacing: 6
property var clickListener : function(){
checked = !checked
}
@ -39,13 +43,14 @@ Button {
Accessible.onPressAction: control.clicked()
focusPolicy:Qt.TabFocus
contentItem: RowLayout{
spacing: 4
spacing: control.textSpacing
layoutDirection:control.textRight ? Qt.LeftToRight : Qt.RightToLeft
Rectangle{
width: 20
height: 20
width: control.size
height: control.size
radius: 4
border.color: {
if(disabled){
if(!enabled){
return borderDisableColor
}
if(checked){
@ -62,7 +67,7 @@ Button {
border.width: 1
color: {
if(checked){
if(disabled){
if(!enabled){
return checkedDisableColor
}
if(pressed){
@ -73,7 +78,7 @@ Button {
}
return checkedColor
}
if(disabled){
if(!enabled){
return disableColor
}
if(hovered){
@ -100,8 +105,9 @@ Button {
}
}
FluText{
id:btn_text
text: control.text
Layout.leftMargin: 5
Layout.alignment: Qt.AlignVCenter
visible: text !== ""
}
}

6
src/imports/FluentUI/Controls/FluDropDownButton.qml
View File

@ -12,7 +12,7 @@ Button {
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
property color textColor: {
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
@ -20,7 +20,7 @@ Button {
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){
@ -51,7 +51,7 @@ Button {
radius:8
}
color:{
if(disabled){
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor

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

@ -12,7 +12,7 @@ Button {
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
property color textColor: {
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(173/255,173/255,173/255,1)
}
return Qt.rgba(0,0,0,1)
@ -38,7 +38,7 @@ Button {
radius:4
}
color:{
if(disabled){
if(!enabled){
return disableColor
}
if(pressed){

6
src/imports/FluentUI/Controls/FluIconButton.qml
View File

@ -14,7 +14,7 @@ Button {
property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
property color disableColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
property color color: {
if(disabled){
if(!enabled){
return disableColor
}
if(pressed){
@ -24,12 +24,12 @@ Button {
}
property color iconColor: {
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(130/255,130/255,130/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
if(!enabled){
return Qt.rgba(161/255,161/255,161/255,1)
}
return Qt.rgba(0,0,0,1)

7
src/imports/FluentUI/Controls/FluMenu.qml
View File

@ -5,6 +5,7 @@ import QtQuick.Templates as T
import FluentUI
T.Menu {
property bool animEnabled: true
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
@ -20,7 +21,7 @@ T.Menu {
property: "opacity"
from:0
to:1
duration: 83
duration: animEnabled ? 83 : 0
}
}
exit:Transition {
@ -28,7 +29,7 @@ T.Menu {
property: "opacity"
from:1
to:0
duration: 83
duration: animEnabled ? 83 : 0
}
}
contentItem: ListView {
@ -43,7 +44,7 @@ T.Menu {
}
background: Rectangle {
implicitWidth: 150
implicitHeight: 40
implicitHeight: 34
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(240/255,240/255,240/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)
border.width: 1

22
src/imports/FluentUI/Controls/FluMenuBarItem.qml
View File

@ -4,7 +4,28 @@ import QtQuick.Controls.impl
import FluentUI
T.MenuBarItem {
property bool disabled: false
property color textColor: {
if(FluTheme.dark){
if(disabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
return Qt.rgba(162/255,162/255,162/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){
return Qt.rgba(96/255,96/255,96/255,1)
}
return Qt.rgba(0,0,0,1)
}
}
id: control
enabled: !disabled
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
@ -20,6 +41,7 @@ T.MenuBarItem {
contentItem: FluText {
verticalAlignment: Text.AlignVCenter
text: control.text
color:control.textColor
}
background: Rectangle {
implicitWidth: 30

56
src/imports/FluentUI/Controls/FluMenuItem.qml
View File

@ -5,14 +5,31 @@ import QtQuick.Templates as T
import FluentUI
T.MenuItem {
property color textColor: {
if(FluTheme.dark){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
return Qt.rgba(162/255,162/255,162/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){
return Qt.rgba(96/255,96/255,96/255,1)
}
return Qt.rgba(0,0,0,1)
}
}
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
padding: 6
spacing: 6
icon.width: 24
@ -22,10 +39,12 @@ T.MenuItem {
contentItem: FluText {
readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
leftPadding: !control.mirrored ? indicatorPadding : arrowPadding
rightPadding: control.mirrored ? indicatorPadding : arrowPadding
leftPadding: (!control.mirrored ? indicatorPadding : arrowPadding)+5
rightPadding: (control.mirrored ? indicatorPadding : arrowPadding)+5
verticalAlignment: Text.AlignVCenter
text: control.text
color: control.textColor
}
indicator: FluIcon {
x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
@ -39,24 +58,29 @@ T.MenuItem {
visible: control.subMenu
iconSource: FluentIcons.ChevronRightMed
}
background: Rectangle {
background: Item {
implicitWidth: 150
implicitHeight: 40
implicitHeight: 34
x: 1
y: 1
width: control.width - 2
height: control.height - 2
color:{
if(FluTheme.dark){
if(control.highlighted){
return Qt.rgba(1,1,1,0.06)
Rectangle{
anchors.fill: parent
anchors.margins: 2
radius: 4
color:{
if(FluTheme.dark){
if(control.highlighted){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(control.highlighted){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
}
return Qt.rgba(0,0,0,0)
}else{
if(control.highlighted){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
}
}
}

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

@ -14,7 +14,7 @@ TextArea{
width: 300
enabled: !disabled
color: {
if(disabled){
if(!enabled){
return disableColor
}
return normalColor
@ -24,7 +24,7 @@ TextArea{
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTheme.primaryColor.lightest
placeholderTextColor: {
if(disabled){
if(!enabled){
return placeholderDisableColor
}
if(focus){

10
src/imports/FluentUI/Controls/FluPage.qml
View File

@ -6,13 +6,17 @@ import FluentUI
Item {
property int pageMode: FluNavigationView.SingleTop
property string url
property string url : ""
id: control
visible: false
opacity: visible
Behavior on opacity {
visible: false
Behavior on opacity{
NumberAnimation{
duration: 83
}
}
Component.onCompleted: {
visible = true
}
}

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

@ -15,7 +15,7 @@ TextField{
width: 300
enabled: !disabled
color: {
if(disabled){
if(!enabled){
return disableColor
}
return normalColor
@ -25,7 +25,7 @@ TextField{
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTheme.primaryColor.lightest
placeholderTextColor: {
if(disabled){
if(!enabled){
return placeholderDisableColor
}
if(focus){

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

@ -13,6 +13,9 @@ Button {
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 alias textColor: btn_text.textColor
property real size: 18
property bool textRight: true
property real textSpacing: 6
property var clickListener : function(){
checked = !checked
}
@ -33,28 +36,30 @@ Button {
font:FluTextStyle.Body
onClicked: clickListener()
contentItem: RowLayout{
spacing: control.textSpacing
layoutDirection:control.textRight ? Qt.LeftToRight : Qt.RightToLeft
Rectangle{
id:rect_check
width: 20
height: 20
radius: 10
width: control.size
height: control.size
radius: size/2
border.width: {
if(checked&&disabled){
return 4
if(checked&&!enabled){
return 3
}
if(pressed){
if(checked){
return 5
}
return 1
}
if(hovered){
if(checked){
return 4
}
return 1
}
return checked ? 5 : 1
if(hovered){
if(checked){
return 3
}
return 1
}
return checked ? 4 : 1
}
Behavior on border.width {
NumberAnimation{
@ -64,13 +69,13 @@ Button {
}
}
border.color: {
if(disabled){
if(!enabled){
return borderDisableColor
}
return borderNormalColor
}
color:{
if(disabled){
if(!enabled){
return disableColor
}
if(hovered){

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

@ -15,7 +15,7 @@ TextField{
width: 300
enabled: !disabled
color: {
if(disabled){
if(!enabled){
return disableColor
}
return normalColor
@ -24,7 +24,7 @@ TextField{
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTheme.primaryColor.lightest
placeholderTextColor: {
if(disabled){
if(!enabled){
return placeholderDisableColor
}
if(focus){

1
src/imports/FluentUI/Controls/FluTextBoxMenu.qml
View File

@ -9,6 +9,7 @@ FluMenu{
property string selectAllText : "全选"
property var inputItem
id:menu
animEnabled: false
width: 120
onVisibleChanged: {
if(visible){

2
src/imports/FluentUI/Controls/FluTextButton.qml
View File

@ -12,7 +12,7 @@ Button {
property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property bool textBold: true
property color textColor: {
if(disabled){
if(!enabled){
return disableColor
}
if(pressed){

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

@ -51,7 +51,7 @@ Button {
radius:8
}
color:{
if(disabled){
if(!enabled){
return disableColor
}
if(checked){
@ -69,7 +69,7 @@ Button {
color: {
if(checked){
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(173/255,173/255,173/255,1)
}
return Qt.rgba(0,0,0,1)
@ -78,7 +78,7 @@ Button {
}
}else{
if(FluTheme.dark){
if(disabled){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(!checked){
@ -88,7 +88,7 @@ Button {
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(!checked){

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

@ -7,7 +7,7 @@ import FluentUI
Button {
property bool disabled: false
property string contentDescription: ""
property color disableColor: checked ? FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(233/255,233/255,233/255,1) :FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(233/255,233/255,233/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(233/255,233/255,233/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)
@ -17,6 +17,9 @@ Button {
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 color dotDisableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(150/255,150/255,150/255,1)
property real textSpacing: 6
property bool textRight: true
property alias textColor: btn_text.textColor
property var clickListener : function(){
checked = !checked
}
@ -32,7 +35,8 @@ Button {
onClicked: clickListener()
contentItem: Item{}
background : RowLayout{
spacing: 0
spacing: control.textSpacing
layoutDirection:control.textRight ? Qt.LeftToRight : Qt.RightToLeft
Rectangle {
id:control_backgound
width: 40
@ -43,7 +47,7 @@ Button {
radius: 20
}
color: {
if(disabled){
if(!enabled){
return disableColor
}
if(checked){
@ -56,7 +60,7 @@ Button {
}
border.width: 1
border.color: {
if(disabled){
if(!enabled){
return borderDisableColor
}
if(checked){
@ -74,10 +78,10 @@ Button {
}
height: 20
radius: 10
scale: hovered&!disabled ? 7/10 : 6/10
scale: hovered&enabled ? 7/10 : 6/10
anchors.verticalCenter: parent.verticalCenter
color: {
if(disabled){
if(!enabled){
return dotDisableColor
}
if(checked){
@ -96,28 +100,25 @@ Button {
NumberAnimation {
duration: 167
easing.type: Easing.BezierSpline
easing.bezierCurve: [ 1, 0, 0, 0 ]
easing.bezierCurve: [ 0, 0, 0, 1 ]
}
}
Behavior on width {
NumberAnimation {
duration: 167
easing.type: Easing.BezierSpline
easing.bezierCurve: [ 1, 0, 0, 0 ]
}
}
Behavior on scale {
NumberAnimation {
duration: 167
easing.type: Easing.BezierSpline
easing.bezierCurve: [ 1, 0, 0, 0 ]
}
}
}
}
FluText{
id:btn_text
text: control.text
Layout.leftMargin: 5
Layout.alignment: Qt.AlignVCenter
visible: text !== ""
}
}