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:
朱子楚\zhuzi 2023-03-12 21:49:11 +08:00
parent f36914fdee
commit 8cc828a56b
17 changed files with 109 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/T_Awesome.qml
View File

@ -47,7 +47,7 @@ FluContentPage {
height: 80
FluIconButton{
id:item_icon
icon:modelData.icon
iconSource:modelData.icon
anchors.horizontalCenter: parent.horizontalCenter
onClicked: {
var text ="FluentIcons."+modelData.name;

9
example/T_Buttons.qml
View File

@ -11,7 +11,7 @@ FluScrollablePage{
FluText{
Layout.topMargin: 20
text:"支持Tab键切换焦点，Enter键执行点击事件"
text:"支持Tab键切换焦点，空格键执行点击事件"
}
FluArea{
@ -21,6 +21,7 @@ FluScrollablePage{
FluButton{
disabled:button_switch.checked
text:"Standard Button"
onClicked: {
showInfo("点击StandardButton")
}
@ -53,6 +54,7 @@ FluScrollablePage{
FluFilledButton{
disabled:filled_button_switch.checked
text:"Filled Button"
onClicked: {
showWarning("点击FilledButton")
}
@ -85,7 +87,7 @@ FluScrollablePage{
paddings: 10
FluIconButton{
icon:FluentIcons.ChromeCloseContrast
iconSource:FluentIcons.ChromeCloseContrast
disabled:icon_button_switch.checked
iconSize: 15
anchors{
@ -129,7 +131,7 @@ FluScrollablePage{
property int selecIndex : 0
model: 3
delegate: FluRadioButton{
checked : repeater.selecIndex===index
selected : repeater.selecIndex===index
disabled:radio_button_switch.checked
text:"Radio Button_"+index
onClicked:{
@ -164,6 +166,7 @@ FluScrollablePage{
FluCheckBox{
disabled:icon_button_check.checked
text:"Check Box"
anchors{
verticalCenter: parent.verticalCenter
left: parent.left

2
example/T_Expander.qml
View File

@ -26,7 +26,7 @@ FluScrollablePage{
property int selecIndex : 0
model: 3
delegate: FluRadioButton{
checked : repeater.selecIndex===index
selected : repeater.selecIndex===index
text:"Radio Button_"+index
onClicked:{
repeater.selecIndex = index

14
example/T_Theme.qml
View File

@ -20,7 +20,7 @@ FluScrollablePage{
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
FluIcon {
anchors.centerIn: parent
icon: FluentIcons.AcceptMedium
iconSource: FluentIcons.AcceptMedium
iconSize: 15
visible: modelData === FluTheme.primaryColor
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
@ -42,8 +42,8 @@ FluScrollablePage{
}
FluToggleSwitch{
checked: FluTheme.isDark
onClickFunc:function(){
FluTheme.isDark = !FluTheme.isDark
onCheckedChanged:{
FluTheme.isDark = checked
}
}
FluText{
@ -52,8 +52,8 @@ FluScrollablePage{
}
FluToggleSwitch{
checked: FluTheme.isFrameless
onClickFunc:function(){
FluTheme.isFrameless = !FluTheme.isFrameless
onCheckedChanged:{
FluTheme.isFrameless = isFrameless
}
}
FluText{
@ -62,8 +62,8 @@ FluScrollablePage{
}
FluToggleSwitch{
checked: FluTheme.isNativeText
onClickFunc:function(){
FluTheme.isNativeText = !FluTheme.isNativeText
onCheckedChanged:{
FluTheme.isNativeText = isNativeText
}
}
}

10
src/controls/FluAppBar.qml
View File

@ -94,14 +94,14 @@ Rectangle{
}
FluToggleSwitch{
checked: FluTheme.isDark
onClickFunc:function(){
FluTheme.isDark = !FluTheme.isDark
onCheckedChanged:{
FluTheme.isDark = checked
}
}
}
FluIconButton{
icon : FluentIcons.ChromeMinimizeContrast
iconSource : FluentIcons.ChromeMinimizeContrast
Layout.alignment: Qt.AlignVCenter
iconSize: 15
text:"最小化"
@ -117,7 +117,7 @@ Rectangle{
return false
return Window.Maximized === window.visibility
}
icon : isRestore ? FluentIcons.ChromeRestoreContrast : FluentIcons.ChromeMaximizeContrast
iconSource : isRestore ? FluentIcons.ChromeRestoreContrast : FluentIcons.ChromeMaximizeContrast
color:hovered ? "#20000000" : "#00000000"
Layout.alignment: Qt.AlignVCenter
visible: resizable
@ -129,7 +129,7 @@ Rectangle{
}
}
FluIconButton{
icon : FluentIcons.ChromeCloseContrast
iconSource : FluentIcons.ChromeCloseContrast
Layout.alignment: Qt.AlignVCenter
text:"关闭"
iconSize: 13

8
src/controls/FluAutoSuggestBox.qml
View File

@ -7,7 +7,7 @@ TextField{
property var values:[]
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property int icon: -1
property int iconSource: -1
signal itemClicked(string data)
id:input
@ -91,7 +91,7 @@ TextField{
inputItem: input
FluIconButton{
icon:FluentIcons.ChromeClose
iconSource:FluentIcons.ChromeClose
iconSize: 10
width: 20
height: 20
@ -109,10 +109,10 @@ TextField{
FluIcon{
id:icon_right
icon: input.icon
iconSource: input.iconSource
iconSize: 15
opacity: 0.5
visible: input.icon != -1
visible: input.iconSource != -1
anchors{
verticalCenter: parent.verticalCenter
right: parent.right

25
src/controls/FluButton.qml
View File

@ -2,39 +2,19 @@
import QtQuick.Controls 2.15
import FluentUI 1.0
Control {
Button {
id: control
property string text: "Standard Button"
property bool disabled: false
property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
signal clicked
topPadding:5
bottomPadding:5
leftPadding:15
rightPadding:15
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled){
return
}
control.clicked()
}
enabled: !disabled
background: Rectangle{
border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
@ -71,5 +51,4 @@ Control {
}
}
}
}

52
src/controls/FluCheckBox.qml
View File

@ -3,49 +3,45 @@ import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Control {
Button {
id:control
property bool checked: false
property string text: "Check Box"
property var checkClicked
property bool selected: false
property var clickFunc
property bool disabled: false
padding:0
property color borderNormalColor: FluTheme.isDark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
property color borderCheckedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color borderSelectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color borderHoverColor: FluTheme.isDark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
property color borderDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
property color checkedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color selectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
property color checkedHoverColor: FluTheme.isDark ? Qt.darker(checkedColor,1.1) : Qt.lighter(checkedColor,1.1)
property color selectedHoverColor: FluTheme.isDark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1)
property color checkedDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color selectedDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
onClicked: {
if(disabled){
return
}
if(checkClicked){
checkClicked()
if(clickFunc){
clickFunc()
return
}
checked = !checked
selected = !selected
}
background: Item{
FluFocusRectangle{
visible: control.visualFocus
@ -62,8 +58,8 @@ Control {
if(disabled){
return borderDisableColor
}
if(checked){
return borderCheckedColor
if(selected){
return borderSelectedColor
}
if(hovered){
return borderHoverColor
@ -72,14 +68,14 @@ Control {
}
border.width: 1
color: {
if(checked){
if(selected){
if(disabled){
return checkedDisableColor
return selectedDisableColor
}
if(hovered){
return checkedHoverColor
return selectedHoverColor
}
return checkedColor
return selectedColor
}
if(hovered){
return hoverColor
@ -89,9 +85,9 @@ Control {
FluIcon {
anchors.centerIn: parent
icon: FluentIcons.AcceptMedium
iconSource: FluentIcons.AcceptMedium
iconSize: 15
visible: checked
visible: selected
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
}
}

2
src/controls/FluExpander.qml
View File

@ -56,7 +56,7 @@ Item {
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
}
iconSize: 15
icon: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
iconSource: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
onClicked: {
expand = !expand
}

19
src/controls/FluFilledButton.qml
View File

@ -2,34 +2,19 @@
import QtQuick.Controls 2.15
import FluentUI 1.0
Control {
Button {
id: control
property string text: "Filled Button"
property bool disabled: false
property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
signal clicked
enabled: !disabled
topPadding:5
bottomPadding:5
leftPadding:15
rightPadding:15
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled)
return
control.clicked()
}
background: Rectangle{
radius: 4

4
src/controls/FluIcon.qml
View File

@ -2,7 +2,7 @@
Text {
property int icon
property int iconSource
property int iconSize: 20
property color iconColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
@ -12,5 +12,5 @@ Text {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: iconColor
text: (String.fromCharCode(icon).toString(16));
text: (String.fromCharCode(iconSource).toString(16));
}

37
src/controls/FluIconButton.qml
View File

@ -2,18 +2,26 @@
import QtQuick.Controls 2.15
import FluentUI 1.0
Control {
Button {
id:control
width: 30
height: 30
implicitWidth: width
implicitHeight: height
padding: 0
property int iconSize: 20
property int icon
property alias text: tool_tip.text
signal clicked
property int iconSource
property bool disabled: false
enabled: !disabled
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
@ -39,22 +47,6 @@ Control {
}
}
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled){
return
}
control.clicked()
}
background: Rectangle{
radius: 4
color:control.color
@ -68,11 +60,13 @@ Control {
id:text_icon
font.family: "Segoe Fluent Icons"
font.pixelSize: iconSize
width: iconSize
height: iconSize
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.centerIn: parent
color:control.textColor
text: (String.fromCharCode(icon).toString(16));
text: (String.fromCharCode(iconSource).toString(16));
}
FluTooltip{
@ -83,6 +77,7 @@ Control {
}
return hovered
}
text:control.text
delay: 1000
}
}

2
src/controls/FluInfoBar.qml
View File

@ -190,7 +190,7 @@ FluObject {
spacing: 10
FluIcon{
icon:{
iconSource:{
switch(_super.type){
case mcontrol.const_success: return FluentIcons.CompletedSolid;
case mcontrol.const_warning: return FluentIcons.InfoSolid;

10
src/controls/FluNavigationView.qml
View File

@ -145,7 +145,7 @@ Item {
height:parent.height
spacing: 0
FluIconButton{
icon: FluentIcons.ChromeBack
iconSource: FluentIcons.ChromeBack
Layout.leftMargin: 5
Layout.alignment: Qt.AlignVCenter
disabled: nav_swipe.depth === 1
@ -160,7 +160,7 @@ Item {
}
}
FluIconButton{
icon: FluentIcons.GlobalNavButton
iconSource: FluentIcons.GlobalNavButton
Layout.leftMargin: 5
iconSize: 15
visible: displayMode === FluNavigationView.Minimal
@ -185,8 +185,8 @@ Item {
}
FluToggleSwitch{
checked: FluTheme.isDark
onClickFunc:function(){
FluTheme.isDark = !FluTheme.isDark
onCheckedChanged:{
FluTheme.isDark = checked
}
}
}
@ -269,7 +269,7 @@ Item {
FluAutoSuggestBox{
width: 280
anchors.centerIn: parent
icon: FluentIcons.Zoom
iconSource: FluentIcons.Zoom
values: {
var arr = []
if(items==null)

43
src/controls/FluRadioButton.qml
View File

@ -4,38 +4,19 @@ import QtQuick.Layouts 1.15
import FluentUI 1.0
Control {
Button {
id:control
property bool checked: false
property string text: "RodioButton"
signal clicked
property bool selected: false
property bool disabled: false
focusPolicy:Qt.TabFocus
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
MouseArea {
anchors.fill: parent
onClicked: handleClick()
}
function handleClick(){
if(disabled){
return
}
control.clicked()
}
id:control
enabled: !disabled
padding:0
background: Item{
FluFocusRectangle{
visible: control.visualFocus
}
}
contentItem: RowLayout{
Rectangle{
id:rect_check
@ -46,22 +27,22 @@ Control {
layer.enabled: true
layer.smooth: true
border.width: {
if(checked&&disabled){
if(selected&&disabled){
return 3
}
if(hovered){
if(checked){
if(selected){
return 5
}
return 1
}
if(hovered){
if(checked){
if(selected){
return 3
}
return 1
}
return checked ? 5 : 1
return selected ? 5 : 1
}
Behavior on border.width {
NumberAnimation{
@ -76,7 +57,7 @@ Control {
return Qt.rgba(198/255,198/255,198/255,1)
}
}
if(checked){
if(selected){
if(FluTheme.isDark){
return FluTheme.primaryColor.lighter
}else{
@ -93,7 +74,7 @@ Control {
}
}
color:{
if(disabled&&checked){
if(disabled&&selected){
return Qt.rgba(159/255,159/255,159/255,1)
}
if(FluTheme.isDark){
@ -103,7 +84,7 @@ Control {
return Qt.rgba(50/255,50/255,50/255,1)
}else{
if(hovered){
if(checked){
if(selected){
return Qt.rgba(1,1,1,1)
}
return Qt.rgba(222/255,222/255,222/255,1)

53
src/controls/FluToggleSwitch.qml
View File

@ -2,76 +2,53 @@
import QtQuick.Controls 2.0
import FluentUI 1.0
Switch {
Button {
id: root
property var onClickFunc
width: 40
implicitWidth: 40
height: 20
implicitHeight: 20
checkable: false
background:FluFocusRectangle{
visible: root.visualFocus
radius: 20
}
Keys.onEnterPressed:(visualFocus&&handleClick())
Keys.onReturnPressed:(visualFocus&&handleClick())
indicator: Rectangle {
checkable: true
background : Rectangle {
width: root.width
height: root.height
radius: height / 2
FluFocusRectangle{
visible: root.visualFocus
radius: 20
}
color: {
if(FluTheme.isDark){
if(root.checked){
if(checked){
return FluTheme.primaryColor.dark
}
if(switch_mouse.containsMouse){
if(hovered){
return "#3E3E3C"
}
return "#323232"
}else{
if(root.checked){
if(checked){
return FluTheme.primaryColor.dark
}
if(switch_mouse.containsMouse){
if(hovered){
return "#F4F4F4"
}
return "#FFFFFF"
}
}
border.width: 1
border.color: root.checked ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
border.color: checked ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
Rectangle {
x: root.checked ? root.implicitWidth - width - 4 : 4
x: checked ? root.implicitWidth - width - 4 : 4
width: root.height - 8
height: root.height - 8
radius: width / 2
scale: switch_mouse.containsMouse ? 1.2 : 1.0
scale: hovered ? 1.2 : 1.0
anchors.verticalCenter: parent.verticalCenter
color: root.checked ? "#FFFFFF" : "#666666"
// border.color: "#D5D5D5"
color: checked ? "#FFFFFF" : "#666666"
Behavior on x {
NumberAnimation { duration: 200 }
}
}
}
MouseArea{
id:switch_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: handleClick()
}
function handleClick(){
if(root.onClickFunc){
root.onClickFunc()
}else{
root.checked = !root.checked
}
}
}

6
src/controls/FluTreeView.qml
View File

@ -163,7 +163,7 @@ Item {
FluCheckBox{
id:item_layout_checkbox
text:""
checked: itemModel.multipSelected
selected: itemModel.multipSelected
visible: selectionMode === FluTreeView.Multiple
Layout.leftMargin: 5
@ -199,7 +199,7 @@ Item {
}
}
checkClicked:function(){
clickFunc:function(){
if(hasChild){
const stack = [itemModel];
while (stack.length > 0) {
@ -222,7 +222,7 @@ Item {
FluIconButton{
id:item_layout_expanded
color:"#00000000"
icon:item_layout.expanded?FluentIcons.ChevronDown:FluentIcons.ChevronRight
iconSource:item_layout.expanded?FluentIcons.ChevronDown:FluentIcons.ChevronRight
opacity: item_layout.hasChild
iconSize: 15
onClicked: {