amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-03 00:25:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzihcu
2023-03-06 14:22:13 +08:00
parent fdecf5a564
commit 1ad1aa058a
39 changed files with 293 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/controls/FluAppBar.qml
View File

@ -5,7 +5,8 @@ import FluentUI 1.0
Rectangle{
color: FluTheme.primaryColor.dark
id:root
color: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
height: 50
width: {
if(parent==null)
@ -14,7 +15,7 @@ Rectangle{
}
z: 65535
property string title: "标题"
property color textColor: FluTheme.isDark ? "#000000" : "#FFFFFF"
property bool showDark: false
property bool showFps: false
@ -52,7 +53,7 @@ Rectangle{
left: parent.left
leftMargin: 14
}
color:"#FFFFFFFF"
color:root.textColor
fontStyle: FluText.Title
font.pixelSize: 14
font.bold: true
@ -62,13 +63,13 @@ Rectangle{
anchors.right: parent.right;
anchors.rightMargin: 10
height: parent.height
spacing: 15
spacing: 5
TFpsMonitor{
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 12
Layout.topMargin: 5
color:"#FFFFFFFF"
color:root.textColor
visible: showFps
}
@ -78,84 +79,53 @@ Rectangle{
visible: showDark
FluText{
text:"夜间模式"
color:"#FFFFFFFF"
color:root.textColor
fontStyle: FluText.Body
}
FluToggleSwitch{
checked: FluApp.isDark
checked: FluTheme.isDark
onClickFunc:function(){
FluApp.isDark = !FluApp.isDark
FluTheme.isDark = !FluTheme.isDark
}
}
}
FluIcon{
FluIconButton{
icon : FluentIcons.FA_window_minimize
Layout.alignment: Qt.AlignVCenter
iconSize: 15
color:"#FFFFFF"
MouseArea{
id:mouse_miniminzed
anchors.fill: parent
hoverEnabled: true
onClicked: {
Window.window.showMinimized()
}
}
FluTooltip{
visible: mouse_miniminzed.containsMouse
text:"最小化"
delay: 1000
text:"最小化"
textColor: root.textColor
color:hovered ? "#20000000" : "#00000000"
onClicked: {
Window.window.showMinimized()
}
}
FluIcon{
property bool isRestore: {
FluIconButton{
property bool isRestore:{
if(Window.window == null)
return false
return Window.Maximized === Window.window.visibility
}
color:"#FFFFFF"
icon : {
if(Window.window == null)
return FluentIcons.FA_window_restore
return Window.Maximized === Window.window.visibility ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
}
icon : isRestore ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
color:hovered ? "#20000000" : "#00000000"
Layout.alignment: Qt.AlignVCenter
visible: resizable
textColor: root.textColor
text:isRestore?"向下还原":"最大化"
iconSize: 15
MouseArea{
id:mouse_maximized
anchors.fill: parent
hoverEnabled: true
onClicked: {
toggleMaximized()
}
}
FluTooltip{
visible: mouse_maximized.containsMouse
text:{
return parent.isRestore?"向下还原":"最大化"
}
delay: 1000
onClicked: {
toggleMaximized()
}
}
FluIcon{
FluIconButton{
icon : FluentIcons.FA_close
Layout.alignment: Qt.AlignVCenter
color:"#FFFFFF"
MouseArea{
id:mouse_close
anchors.fill: parent
hoverEnabled: true
onClicked: {
Window.window.close()
}
}
FluTooltip{
visible: mouse_close.containsMouse
text:"关闭"
delay: 1000
text:"关闭"
textColor: root.textColor
color:hovered ? "#20000000" : "#00000000"
onClicked: {
Window.window.close()
}
}
}

6
src/controls/FluButton.qml
View File

@ -15,7 +15,7 @@ Rectangle {
radius: 4
color:{
if(FluApp.isDark){
if(FluTheme.isDark){
if(disabled){
return Qt.rgba(59/255,59/255,59/255,1)
}
@ -30,7 +30,7 @@ Rectangle {
width: button_text.implicitWidth
height: button_text.implicitHeight
border.color: FluApp.isDark ? "#505050" : "#DFDFDF"
border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
border.width: 1
@ -44,7 +44,7 @@ Rectangle {
bottomPadding: button.bottomPadding
anchors.centerIn: parent
color: {
if(FluApp.isDark){
if(FluTheme.isDark){
if(disabled){
return Qt.rgba(131/255,131/255,131/255,1)
}

6
src/controls/FluCheckBox.qml
View File

@ -17,7 +17,7 @@ Item {
height: 22
radius: 4
border.color: {
if(FluApp.isDark){
if(FluTheme.isDark){
if(checked){
return FluTheme.primaryColor.lighter
}
@ -34,7 +34,7 @@ Item {
}
border.width: 1
color: {
if(FluApp.isDark){
if(FluTheme.isDark){
if(checked){
if(mouse_area.containsMouse){
return Qt.rgba(74/255,149/255,207/255,1)
@ -64,7 +64,7 @@ Item {
icon: FluentIcons.FA_check
iconSize: 15
visible: checked
color: FluApp.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
}
}
FluText{

0
src/controls/FluColorSet.qml → src/controls/FluColorSetOld.qml
View File

16
src/controls/FluColors.qml → src/controls/FluColorsOld.qml
View File

@ -30,7 +30,7 @@ QtObject {
property color _Grey210: Qt.rgba(22/255,21/255,20/255,1)
property color _Grey220: Qt.rgba(17/255,16/255,15/255,1)
property FluColorSet _Yellow:FluColorSet{
property FluColorSetOld _Yellow:FluColorSetOld{
darkest: Qt.rgba(249/255,168/255,37/255,1)
darker:Qt.rgba(251/255,192/255,45/255,1)
dark:Qt.rgba(253/255,216/255,53/255,1)
@ -40,7 +40,7 @@ QtObject {
lightest:Qt.rgba(255/255,245/255,157/255,1)
}
property FluColorSet _Orange:FluColorSet{
property FluColorSetOld _Orange:FluColorSetOld{
darkest: Qt.rgba(153/255,61/255,7/255,1)
darker:Qt.rgba(172/255,68/255,8/255,1)
dark:Qt.rgba(209/255,84/255,10/255,1)
@ -50,7 +50,7 @@ QtObject {
lightest:Qt.rgba(250/255,158/255,104/255,1)
}
property FluColorSet _Red:FluColorSet{
property FluColorSetOld _Red:FluColorSetOld{
darkest: Qt.rgba(143/255,10/255,21/255,1)
darker:Qt.rgba(162/255,11/255,24/255,1)
dark:Qt.rgba(185/255,13/255,28/255,1)
@ -60,7 +60,7 @@ QtObject {
lightest:Qt.rgba(240/255,107/255,118/255,1)
}
property FluColorSet _Magenta:FluColorSet{
property FluColorSetOld _Magenta:FluColorSetOld{
darkest: Qt.rgba(111/255,0/255,79/255,1)
darker:Qt.rgba(126/255,0/255,110/255,1)
dark:Qt.rgba(144/255,0/255,126/255,1)
@ -70,7 +70,7 @@ QtObject {
lightest:Qt.rgba(208/255,96/255,194/255,1)
}
property FluColorSet _Purple:FluColorSet{
property FluColorSetOld _Purple:FluColorSetOld{
darkest: Qt.rgba(71/255,47/255,104/255,1)
darker:Qt.rgba(81/255,53/255,118/255,1)
dark:Qt.rgba(100/255,66/255,147/255,1)
@ -80,7 +80,7 @@ QtObject {
lightest:Qt.rgba(168/255,144/255,201/255,1)
}
property FluColorSet _Blue:FluColorSet{
property FluColorSetOld _Blue:FluColorSetOld{
darkest: Qt.rgba(0/255,74/255,131/255,1)
darker:Qt.rgba(0/255,84/255,148/255,1)
dark:Qt.rgba(0/255,102/255,180/255,1)
@ -90,7 +90,7 @@ QtObject {
lightest:Qt.rgba(96/255,171/255,228/255,1)
}
property FluColorSet _Teal:FluColorSet{
property FluColorSetOld _Teal:FluColorSetOld{
darkest: Qt.rgba(0/255,110/255,91/255,1)
darker:Qt.rgba(0/255,124/255,103/255,1)
dark:Qt.rgba(0/255,151/255,125/255,1)
@ -100,7 +100,7 @@ QtObject {
lightest:Qt.rgba(96/255,207/255,188/255,1)
}
property FluColorSet _Green:FluColorSet{
property FluColorSetOld _Green:FluColorSetOld{
darkest: Qt.rgba(9/255,76/255,9/255,1)
darker:Qt.rgba(12/255,93/255,12/255,1)
dark:Qt.rgba(14/255,111/255,14/255,1)

2
src/controls/FluDivider.qml
View File

@ -3,6 +3,6 @@ import FluentUI 1.0
Rectangle {
color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
}

4
src/controls/FluFilledButton.qml
View File

@ -15,7 +15,7 @@ Rectangle {
signal clicked
radius: 4
color:{
if(FluApp.isDark){
if(FluTheme.isDark){
if(disabled){
return Qt.rgba(199/255,199/255,199/255,1)
}
@ -34,7 +34,7 @@ Rectangle {
id: button_text
text: button.text
color: {
if(FluApp.isDark){
if(FluTheme.isDark){
if(disabled){
return Qt.rgba(173/255,173/255,173/255,1)
}

2
src/controls/FluIcon.qml
View File

@ -4,7 +4,7 @@ Text {
property int icon
property int iconSize: 20
property color iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
property color iconColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
id:text_icon
font.family: "fontawesome"

31
src/controls/FluIconButton.qml
View File

@ -12,11 +12,24 @@ Rectangle {
property alias text: tool_tip.text
signal clicked
property bool disabled: false
property bool hovered: button_mouse.containsMouse
property color textColor: {
if(FluTheme.isDark){
if(disabled){
return Qt.rgba(130/255,130/255,130/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
return Qt.rgba(161/255,161/255,161/255,1)
}
return Qt.rgba(0,0,0,1)
}
}
radius: 4
color: {
if(FluApp.isDark){
if(FluTheme.isDark){
if(disabled){
return Qt.rgba(59/255,59/255,59/255,1)
}
@ -36,19 +49,7 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.centerIn: parent
color:{
if(FluApp.isDark){
if(disabled){
return Qt.rgba(130/255,130/255,130/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(disabled){
return Qt.rgba(161/255,161/255,161/255,1)
}
return Qt.rgba(0,0,0,1)
}
}
color:button.textColor
text: (String.fromCharCode(icon).toString(16));
}

6
src/controls/FluInfoBar.qml
View File

@ -144,7 +144,7 @@ FluObject {
width: rowlayout.width + (_super.moremsg ? 25 : 80);
height: rowlayout.height + 20;
color: {
if(FluApp.isDark){
if(FluTheme.isDark){
switch(_super.type){
case mcontrol.const_success: return Qt.rgba(57/255,61/255,27/255,1);
case mcontrol.const_warning: return Qt.rgba(67/255,53/255,25/255,1);
@ -165,7 +165,7 @@ FluObject {
radius: 4
border.width: 1
border.color: {
if(FluApp.isDark){
if(FluTheme.isDark){
switch(_super.type){
case mcontrol.const_success: return Qt.rgba(56/255,61/255,27/255,1);
case mcontrol.const_warning: return Qt.rgba(66/255,53/255,25/255,1);
@ -201,7 +201,7 @@ FluObject {
}
iconSize:20
color: {
if(FluApp.isDark){
if(FluTheme.isDark){
switch(_super.type){
case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);
case mcontrol.const_warning: return Qt.rgba(252/255,225/255,0/255,1);

2
src/controls/FluMenu.qml
View File

@ -9,7 +9,7 @@ Popup {
background: Rectangle {
implicitWidth: 140
implicitHeight: container.height
color:FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1)
color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1)
radius: 5
FluShadow{
radius: 5

4
src/controls/FluMenuItem.qml
View File

@ -17,9 +17,9 @@ Item {
radius: 4
color:{
if(mouse_area.containsMouse){
return FluApp.isDark ? Qt.rgba(56/255,56/255,56/255,1) : Qt.rgba(230/255,230/255,230/255,1)
return FluTheme.isDark ? Qt.rgba(56/255,56/255,56/255,1) : Qt.rgba(230/255,230/255,230/255,1)
}
return FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1)
return FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1)
}
FluText{

4
src/controls/FluMultiLineTextBox.qml
View File

@ -5,11 +5,11 @@ import FluentUI 1.0
TextArea{
id:input
width: 300
color: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
wrapMode: Text.WrapAnywhere
selectByMouse: true
selectionColor: {
if(FluApp.isDark){
if(FluTheme.isDark){
return FluTheme.primaryColor.lighter
}else{
return FluTheme.primaryColor.dark

4
src/controls/FluProgressBar.qml
View File

@ -8,7 +8,7 @@ FluRectangle {
height: 6
radius: [3,3,3,3]
clip: true
color: FluApp.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
color: FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
property real progress: 0.5
property bool indeterminate: true
@ -27,7 +27,7 @@ FluRectangle {
radius: 3
width: control.width*progress
height: control.height
color:FluApp.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
color:FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
Behavior on x{
id:behavior

8
src/controls/FluProgressRing.qml
View File

@ -9,20 +9,20 @@ Rectangle {
radius: 30
border.width: linWidth
color: "#00000000"
border.color: FluApp.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
border.color: FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
property real linWidth : 6
property real progress: 0.25
property bool indeterminate: true
readonly property real radius2 : radius - linWidth/2
property color primaryColor : FluApp.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color primaryColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
onProgressChanged: {
canvas.requestPaint()
}
Connections{
target: FluApp
function onIsDarkChanged(isDark){
target: FluTheme
function onIsDarkChanged(){
canvas.requestPaint()
}
}

8
src/controls/FluRadioButton.qml
View File

@ -47,21 +47,21 @@ Item {
}
border.color: {
if(disabled){
if(FluApp.isDark){
if(FluTheme.isDark){
return Qt.rgba(82/255,82/255,82/255,1)
}else{
return Qt.rgba(198/255,198/255,198/255,1)
}
}
if(checked){
if(FluApp.isDark){
if(FluTheme.isDark){
return FluTheme.primaryColor.lighter
}else{
return FluTheme.primaryColor.dark
}
}else{
if(FluApp.isDark){
if(FluTheme.isDark){
return Qt.rgba(161/255,161/255,161/255,1)
}else{
@ -73,7 +73,7 @@ Item {
if(disabled&&checked){
return Qt.rgba(159/255,159/255,159/255,1)
}
if(FluApp.isDark){
if(FluTheme.isDark){
if(root_mouse.containsMouse){
return Qt.rgba(43/255,43/255,43/255,1)
}

2
src/controls/FluShadow.qml
View File

@ -4,7 +4,7 @@ Item {
id:root
anchors.fill: parent
anchors.margins: -4
property color color: FluApp.isDark ? "#FFFFFF" : "#000000"
property color color: FluTheme.isDark ? "#FFFFFF" : "#000000"
property var radius: 4

8
src/controls/FluSlider.qml
View File

@ -26,13 +26,13 @@ Item{
radius: [3,3,3,3]
clip: true
anchors.verticalCenter: parent.verticalCenter
color:FluApp.isDark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
color:FluTheme.isDark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
Rectangle{
id:rect
radius: 3
width: control.width*(value/100)
height: control.height
color:FluApp.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
}
}
@ -45,12 +45,12 @@ Item{
}
radius: 15
anchors.verticalCenter: parent.verticalCenter
color:FluApp.isDark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
color:FluTheme.isDark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
Rectangle{
width: dotSize/2
height: dotSize/2
radius: dotSize/4
color:FluApp.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
anchors.centerIn: parent
scale: control_mouse.containsMouse ? 1.2 : 1
Behavior on scale {

2
src/controls/FluText.qml
View File

@ -17,7 +17,7 @@ Text {
}
property int fontStyle: FluText.Body
property color textColor: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
property color textColor: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
property int pixelSize : 14
color: textColor

4
src/controls/FluTextBox.qml
View File

@ -5,9 +5,9 @@ import FluentUI 1.0
TextField{
id:input
width: 300
color: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
selectionColor: {
if(FluApp.isDark){
if(FluTheme.isDark){
return FluTheme.primaryColor.lighter
}else{
return FluTheme.primaryColor.dark

8
src/controls/FluTextBoxBackground.qml
View File

@ -10,9 +10,9 @@ Rectangle{
layer.enabled: true
color: {
if(input.hovered){
return FluApp.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
return FluApp.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
return FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
}
layer.effect:OpacityMask {
maskSource: Rectangle {
@ -22,13 +22,13 @@ Rectangle{
}
}
border.width: 1
border.color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
Rectangle{
width: parent.width
height: input.focus ? 3 : 1
anchors.bottom: parent.bottom
color: {
if(FluApp.isDark){
if(FluTheme.isDark){
input.focus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1)
}else{
return input.focus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1)

6
src/controls/FluTextButton.qml
View File

@ -4,10 +4,10 @@ import FluentUI 1.0
FluText {
id:root
color: {
if(FluApp.isDark){
return mouse_area.containsMouse?Qt.rgba(73/255,148/255,206/255,1):FluTheme.primaryColor.lighter
if(FluTheme.isDark){
return mouse_area.containsMouse?Qt.darker(FluTheme.primaryColor.lighter,1.1):FluTheme.primaryColor.lighter
}
return mouse_area.containsMouse?Qt.rgba(24/255,116/255,186/255,1):FluTheme.primaryColor.dark
return mouse_area.containsMouse?Qt.lighter(FluTheme.primaryColor.dark,1.1):FluTheme.primaryColor.dark
}
signal clicked
MouseArea{

10
src/controls/FluTheme.qml
View File

@ -1,10 +0,0 @@
pragma Singleton
import QtQuick 2.15
QtObject {
property FluColorSet primaryColor: FluColors._Teal
}

10
src/controls/FluThemeOld.qml Normal file
View File

@ -0,0 +1,10 @@
pragma Singleton
import QtQuick 2.15
QtObject {
property FluColorSetOld primaryColor: FluColorsOld._Teal
}

2
src/controls/FluToggleSwitch.qml
View File

@ -15,7 +15,7 @@ Switch {
height: root.height
radius: height / 2
color: {
if(FluApp.isDark){
if(FluTheme.isDark){
if(root.checked){
return FluTheme.primaryColor.dark
}

2
src/controls/FluTooltip.qml
View File

@ -16,7 +16,7 @@ ToolTip {
background: Rectangle{
anchors.fill: parent
color: FluApp.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
color: FluTheme.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
radius: 5
FluShadow{}
}

6
src/controls/FluWindow.qml
View File

@ -14,7 +14,7 @@ Item {
return Window.window
}
property color color: FluApp.isDark ? "#202020" : "#F3F3F3"
property color color: FluTheme.isDark ? "#202020" : "#F3F3F3"
property string title: "FluentUI"
property int minimumWidth
property int maximumWidth
@ -41,11 +41,11 @@ Item {
Rectangle{
color:FluTheme.primaryColor.dark
color: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
border.width: 1
anchors.fill: parent
radius: 4
border.color:Qt.lighter(FluTheme.primaryColor.dark,1.3)
border.color:FluTheme.isDark ? Qt.darker(FluTheme.primaryColor.lighter,1.3) : Qt.lighter(FluTheme.primaryColor.dark,1.3)
}
Rectangle{