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

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2024-03-07 13:58:23 +08:00
parent 723c2a864a
commit 2a03f24941
19 changed files with 338 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
example/qml-Qt6/page/T_StaggeredLayout.qml
View File

@ -16,7 +16,7 @@ FluContentPage{
Component.onCompleted: { Component.onCompleted: {
for(var i=0;i<=100;i++){ for(var i=0;i<=100;i++){
var item = {} var item = {}
item.color = colors[rand(0,7)].dark item.color = colors[rand(0,7)]
item.height = rand(100,300) item.height = rand(100,300)
append(item) append(item)
} }
@ -39,7 +39,7 @@ FluContentPage{
model:list_model model:list_model
delegate: Rectangle{ delegate: Rectangle{
height: model.height height: model.height
color:model.color color:model.color.normal
FluText{ FluText{
color:"#FFFFFF" color:"#FFFFFF"
text:model.index text:model.index
@ -56,4 +56,3 @@ FluContentPage{
} }
} }

5
example/qml-Qt6/page/T_TabView.qml
View File

@ -15,12 +15,12 @@ FluScrollablePage{
id:com_page id:com_page
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: argument color: argument.normal
} }
} }
function newTab(){ function newTab(){
tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark) tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
} }
Component.onCompleted: { Component.onCompleted: {
@ -126,5 +126,4 @@ FluScrollablePage{
} }
' '
} }
} }

53
example/qml-Qt6/page/T_Theme.qml
View File

@ -7,32 +7,40 @@ import "../component"
FluScrollablePage{ FluScrollablePage{
property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
id:root
title:"Theme" title:"Theme"
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: 20
height: 270 Layout.preferredHeight: 340
paddings: 10 paddings: 10
ColumnLayout{ ColumnLayout{
spacing:0 spacing:0
anchors{ anchors{
left: parent.left left: parent.left
} }
RowLayout{ FluText{
text:"主题颜色"
Layout.topMargin: 10 Layout.topMargin: 10
}
RowLayout{
Layout.topMargin: 5
Repeater{ Repeater{
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] model: root.colorData
delegate: FluRectangle{ delegate: Rectangle{
width: 42 width: 42
height: 42 height: 42
radius: [4,4,4,4] radius: 4
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
border.color: modelData.darkest
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 15
visible: modelData === FluTheme.themeColor visible: modelData === FluTheme.accentColor
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
} }
MouseArea{ MouseArea{
@ -40,12 +48,41 @@ FluScrollablePage{
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: {
FluTheme.themeColor = modelData FluTheme.accentColor = modelData
} }
} }
} }
} }
} }
Row{
Layout.topMargin: 10
spacing: 10
FluText{
text:"自定义主题颜色"
anchors.verticalCenter: parent.verticalCenter
}
FluColorPicker{
id:color_picker
current: FluTheme.accentColor.normal
onAccepted: {
FluTheme.accentColor = FluColors.createAccentColor(current)
}
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium
iconSize: 15
visible: {
for(var i =0 ;i< root.colorData.length; i++){
if(root.colorData[i] === FluTheme.accentColor){
return false
}
}
return true
}
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
}
}
}
FluText{ FluText{
text:"夜间模式" text:"夜间模式"
Layout.topMargin: 20 Layout.topMargin: 20
@ -88,7 +125,7 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: -1 Layout.topMargin: -1
code:'FluTheme.themeColor = FluColors.Orange code:'FluTheme.accentColor = FluColors.Orange
FluTheme.dark = true FluTheme.dark = true

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

@ -11,13 +11,12 @@ FluContentPage{
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
ListModel{ ListModel{
id:list_model id:list_model
Component.onCompleted: { Component.onCompleted: {
for(var i=0;i<=100;i++){ for(var i=0;i<=100;i++){
var item = {} var item = {}
item.color = colors[rand(0,7)].dark item.color = colors[rand(0,7)]
item.height = rand(100,300) item.height = rand(100,300)
append(item) append(item)
} }
@ -40,7 +39,7 @@ FluContentPage{
model:list_model model:list_model
delegate: Rectangle{ delegate: Rectangle{
height: model.height height: model.height
color:model.color color:model.color.normal
FluText{ FluText{
color:"#FFFFFF" color:"#FFFFFF"
text:model.index text:model.index
@ -57,4 +56,3 @@ FluContentPage{
} }
} }

5
example/qml/page/T_TabView.qml
View File

@ -15,12 +15,12 @@ FluScrollablePage{
id:com_page id:com_page
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: argument color: argument.normal
} }
} }
function newTab(){ function newTab(){
tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark) tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
} }
Component.onCompleted: { Component.onCompleted: {
@ -126,5 +126,4 @@ FluScrollablePage{
} }
' '
} }
} }

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

@ -7,32 +7,40 @@ import "../component"
FluScrollablePage{ FluScrollablePage{
property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
id:root
title:"Theme" title:"Theme"
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: 20
height: 270 Layout.preferredHeight: 340
paddings: 10 paddings: 10
ColumnLayout{ ColumnLayout{
spacing:0 spacing:0
anchors{ anchors{
left: parent.left left: parent.left
} }
RowLayout{ FluText{
text:"主题颜色"
Layout.topMargin: 10 Layout.topMargin: 10
}
RowLayout{
Layout.topMargin: 5
Repeater{ Repeater{
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] model: root.colorData
delegate: FluRectangle{ delegate: Rectangle{
width: 42 width: 42
height: 42 height: 42
radius: [4,4,4,4] radius: 4
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
border.color: modelData.darkest
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 15
visible: modelData === FluTheme.themeColor visible: modelData === FluTheme.accentColor
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
} }
MouseArea{ MouseArea{
@ -40,12 +48,41 @@ FluScrollablePage{
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: {
FluTheme.themeColor = modelData FluTheme.accentColor = modelData
} }
} }
} }
} }
} }
Row{
Layout.topMargin: 10
spacing: 10
FluText{
text:"自定义主题颜色"
anchors.verticalCenter: parent.verticalCenter
}
FluColorPicker{
id:color_picker
current: FluTheme.accentColor.normal
onAccepted: {
FluTheme.accentColor = FluColors.createAccentColor(current)
}
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium
iconSize: 15
visible: {
for(var i =0 ;i< root.colorData.length; i++){
if(root.colorData[i] === FluTheme.accentColor){
return false
}
}
return true
}
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
}
}
}
FluText{ FluText{
text:"夜间模式" text:"夜间模式"
Layout.topMargin: 20 Layout.topMargin: 20
@ -88,7 +125,7 @@ FluScrollablePage{
CodeExpander{ CodeExpander{
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: -1 Layout.topMargin: -1
code:'FluTheme.themeColor = FluColors.Orange code:'FluTheme.accentColor = FluColors.Orange
FluTheme.dark = true FluTheme.dark = true

4
src/FluAccentColor.cpp Normal file
View File

@ -0,0 +1,4 @@
#include "FluAccentColor.h"
FluAccentColor::FluAccentColor(QObject *parent):QObject{parent}{
}

27
src/FluAccentColor.h Normal file
View File

@ -0,0 +1,27 @@
#ifndef FLUACCENTCOLOR_H
#define FLUACCENTCOLOR_H
#include <QObject>
#include <QtQml/qqml.h>
#include <QColor>
#include "stdafx.h"
/**
* @brief The FluAccentColor class
*/
class FluAccentColor : public QObject
{
Q_OBJECT
Q_PROPERTY_AUTO(QColor,darkest)
Q_PROPERTY_AUTO(QColor,darker)
Q_PROPERTY_AUTO(QColor,dark)
Q_PROPERTY_AUTO(QColor,normal)
Q_PROPERTY_AUTO(QColor,light)
Q_PROPERTY_AUTO(QColor,lighter)
Q_PROPERTY_AUTO(QColor,lightest)
QML_NAMED_ELEMENT(FluAccentColor)
public:
explicit FluAccentColor(QObject *parent = nullptr);
};
#endif // FLUACCENTCOLOR_H

4
src/FluColorSet.cpp
View File

@ -1,4 +0,0 @@
#include "FluColorSet.h"
FluColorSet::FluColorSet(QObject *parent):QObject{parent}{
}

26
src/FluColorSet.h
View File

@ -1,26 +0,0 @@
#ifndef FLUCOLORSET_H
#define FLUCOLORSET_H
#include <QObject>
#include <QtQml/qqml.h>
#include "stdafx.h"
/**
* @brief The FluColorSet class
*/
class FluColorSet : public QObject
{
Q_OBJECT
Q_PROPERTY_AUTO(QString,darkest)
Q_PROPERTY_AUTO(QString,darker)
Q_PROPERTY_AUTO(QString,dark)
Q_PROPERTY_AUTO(QString,normal)
Q_PROPERTY_AUTO(QString,light)
Q_PROPERTY_AUTO(QString,lighter)
Q_PROPERTY_AUTO(QString,lightest)
QML_NAMED_ELEMENT(FluColorSet)
public:
explicit FluColorSet(QObject *parent = nullptr);
};
#endif // FLUCOLORSET_H

196
src/FluColors.cpp
View File

@ -1,109 +1,127 @@
#include "FluColors.h" #include "FluColors.h"
FluColors::FluColors(QObject *parent):QObject{parent}{ FluColors::FluColors(QObject *parent):QObject{parent}{
Transparent("#00000000"); Transparent(QColor(0, 0, 0, 0));
Black("#000000"); Black(QColor(0, 0, 0));
White("#ffffff"); White(QColor(255, 255, 255));
Grey10("#faf9f8"); Grey10(QColor(250, 249, 248));
Grey20("#f3f2f1"); Grey20(QColor(243, 242, 241));
Grey30("#edebe9"); Grey30(QColor(237, 235, 233));
Grey40("#e1dfdd"); Grey40(QColor(225, 223, 221));
Grey50("#d2d0ce"); Grey50(QColor(210, 208, 206));
Grey60("#c8c6c4"); Grey60(QColor(200, 198, 196));
Grey70("#beb9b8"); Grey70(QColor(190, 185, 184));
Grey80("#b3b0ad"); Grey80(QColor(179, 176, 173));
Grey90("#a19f9d"); Grey90(QColor(161, 159, 157));
Grey100("#979592"); Grey100(QColor(151, 149, 146));
Grey110("#8a8886"); Grey110(QColor(138, 136, 134));
Grey120("#797775"); Grey120(QColor(121, 119, 117));
Grey130("#605e5c"); Grey130(QColor(96, 94, 92));
Grey140("#484644"); Grey140(QColor(72, 70, 68));
Grey150("#3b3a39"); Grey150(QColor(59, 58, 57));
Grey160("#323130"); Grey160(QColor(50, 49, 48));
Grey170("#292827"); Grey170(QColor(41, 40, 39));
Grey180("#252423"); Grey180(QColor(37, 36, 35));
Grey190("#201f1e"); Grey190(QColor(32, 31, 30));
Grey200("#1b1a19"); Grey200(QColor(27, 26, 25));
Grey210("#161514"); Grey210(QColor(22, 21, 20));
Grey220("#11100f"); Grey220(QColor(17, 16, 15));
FluColorSet *yellow = new FluColorSet(this);
yellow->darkest("#f9a825"); FluAccentColor *yellow = new FluAccentColor(this);
yellow->darker("#fbc02d"); yellow->darkest(QColor(249, 168, 37));
yellow->dark("#fdd435"); yellow->darker(QColor(251, 192, 45));
yellow->normal("#ffeb3b"); yellow->dark(QColor(253, 212, 53));
yellow->light("#ffee58"); yellow->normal(QColor(255, 235, 59));
yellow->lighter("#fff176"); yellow->light(QColor(255, 238, 88));
yellow->lightest("#fff59b"); yellow->lighter(QColor(255, 241, 118));
yellow->lightest(QColor(255, 245, 155));
Yellow(yellow); Yellow(yellow);
FluColorSet *orange = new FluColorSet(this); FluAccentColor *orange = new FluAccentColor(this);
orange->darkest("#993d07"); orange->darkest(QColor(153, 61, 7));
orange->darker("#ac4408"); orange->darker(QColor(172, 68, 8));
orange->dark("#d1580a"); orange->dark(QColor(209, 88, 10));
orange->normal("#f7630c"); orange->normal(QColor(247, 99, 12));
orange->light("#f87a30"); orange->light(QColor(248, 122, 48));
orange->lighter("#f99154"); orange->lighter(QColor(249, 145, 84));
orange->lightest("#fac06a"); orange->lightest(QColor(250, 192, 106));
Orange(orange); Orange(orange);
FluColorSet *red = new FluColorSet(this); FluAccentColor *red = new FluAccentColor(this);
red->darkest("#8f0a15"); red->darkest(QColor(143, 10, 21));
red->darker("#a20b18"); red->darker(QColor(162, 11, 24));
red->dark("#b90d1c"); red->dark(QColor(185, 13, 28));
red->normal("#e81123"); red->normal(QColor(232, 17, 35));
red->light("#ec404f"); red->light(QColor(236, 64, 79));
red->lighter("#ee5865"); red->lighter(QColor(238, 88, 101));
red->lightest("#f06b76"); red->lightest(QColor(240, 107, 118));
Red(red); Red(red);
FluColorSet *magenta = new FluColorSet(this); FluAccentColor *magenta = new FluAccentColor(this);
magenta->darkest("#6f004f"); magenta->darkest(QColor(111, 0, 79));
magenta->darker("#a0076c"); magenta->darker(QColor(160, 7, 108));
magenta->dark("#b50d7d"); magenta->dark(QColor(181, 13, 125));
magenta->normal("#e3008c"); magenta->normal(QColor(227, 0, 140));
magenta->light("#ea4da8"); magenta->light(QColor(234, 77, 168));
magenta->lighter("#ee6ec1"); magenta->lighter(QColor(238, 110, 193));
magenta->lightest("#f18cd5"); magenta->lightest(QColor(241, 140, 213));
Magenta(magenta); Magenta(magenta);
FluColorSet *purple = new FluColorSet(this); FluAccentColor *purple = new FluAccentColor(this);
purple->darkest("#2c0f76"); purple->darkest(QColor(44, 15, 118));
purple->darker("#3d0f99"); purple->darker(QColor(61, 15, 153));
purple->dark("#4e11ae"); purple->dark(QColor(78, 17, 174));
purple->normal("#68217a"); purple->normal(QColor(104, 33, 122));
purple->light("#7b4c9d"); purple->light(QColor(123, 76, 157));
purple->lighter("#8d6ebd"); purple->lighter(QColor(141, 110, 189));
purple->lightest("#9e8ed9"); purple->lightest(QColor(158, 142, 217));
Purple(purple); Purple(purple);
FluColorSet *blue = new FluColorSet(this); FluAccentColor *blue = new FluAccentColor(this);
blue->darkest("#004A83"); blue->darkest(QColor(0, 74, 131));
blue->darker("#005494"); blue->darker(QColor(0, 84, 148));
blue->dark("#0066B4"); blue->dark(QColor(0, 102, 180));
blue->normal("#0078D4"); blue->normal(QColor(0, 120, 212));
blue->light("#268CDC"); blue->light(QColor(38, 140, 220));
blue->lighter("#4CA0E0"); blue->lighter(QColor(76, 160, 224));
blue->lightest("#60ABE4"); blue->lightest(QColor(96, 171, 228));
Blue(blue); Blue(blue);
FluColorSet *teal = new FluColorSet(this); FluAccentColor *teal = new FluAccentColor(this);
teal->darkest("#006E5B"); teal->darkest(QColor(0, 110, 91));
teal->darker("#007C67"); teal->darker(QColor(0, 124, 103));
teal->dark("#00977D"); teal->dark(QColor(0, 151, 125));
teal->normal("#00B294"); teal->normal(QColor(0, 178, 148));
teal->light("#26BDA4"); teal->light(QColor(38, 189, 164));
teal->lighter("#4DC9B4"); teal->lighter(QColor(77, 201, 180));
teal->lightest("#60CFBC"); teal->lightest(QColor(96, 207, 188));
Teal(teal); Teal(teal);
FluColorSet *green = new FluColorSet(this); FluAccentColor *green = new FluAccentColor(this);
green->darkest("#094C09"); green->darkest(QColor(9, 76, 9));
green->darker("#0C5D0C"); green->darker(QColor(12, 93, 12));
green->dark("#0E6F0E"); green->dark(QColor(14, 111, 14));
green->normal("#107C10"); green->normal(QColor(16, 124, 16));
green->light("#278939"); green->light(QColor(39, 137, 57));
green->lighter("#4C9C4C"); green->lighter(QColor(76, 156, 76));
green->lightest("#6AAD6A"); green->lightest(QColor(106, 173, 106));
Green(green); Green(green);
} }
FluAccentColor* FluColors::createAccentColor(QColor primaryColor){
FluAccentColor *accentColor = new FluAccentColor(this);
accentColor->darkest(withOpacity(primaryColor,0.7));
accentColor->darker(withOpacity(primaryColor,0.8));
accentColor->dark(withOpacity(primaryColor,0.9));
accentColor->normal(primaryColor);
accentColor->light(withOpacity(primaryColor,0.9));
accentColor->lighter(withOpacity(primaryColor,0.8));
accentColor->lightest(withOpacity(primaryColor,0.7));
return accentColor;
}
QColor FluColors::withOpacity(QColor color,qreal opacity){
int alpha = qRound(opacity * 255) & 0xff;
return QColor::fromRgba((alpha << 24) | (color.rgba() & 0xffffff));
}

70
src/FluColors.h
View File

@ -3,7 +3,7 @@
#include <QObject> #include <QObject>
#include <QtQml/qqml.h> #include <QtQml/qqml.h>
#include "FluColorSet.h" #include "FluAccentColor.h"
#include "stdafx.h" #include "stdafx.h"
#include "singleton.h" #include "singleton.h"
@ -13,45 +13,47 @@
class FluColors : public QObject class FluColors : public QObject
{ {
Q_OBJECT Q_OBJECT
Q_PROPERTY_AUTO(QString,Transparent); Q_PROPERTY_AUTO(QColor,Transparent);
Q_PROPERTY_AUTO(QString,Black); Q_PROPERTY_AUTO(QColor,Black);
Q_PROPERTY_AUTO(QString,White); Q_PROPERTY_AUTO(QColor,White);
Q_PROPERTY_AUTO(QString,Grey10); Q_PROPERTY_AUTO(QColor,Grey10);
Q_PROPERTY_AUTO(QString,Grey20); Q_PROPERTY_AUTO(QColor,Grey20);
Q_PROPERTY_AUTO(QString,Grey30); Q_PROPERTY_AUTO(QColor,Grey30);
Q_PROPERTY_AUTO(QString,Grey40); Q_PROPERTY_AUTO(QColor,Grey40);
Q_PROPERTY_AUTO(QString,Grey50); Q_PROPERTY_AUTO(QColor,Grey50);
Q_PROPERTY_AUTO(QString,Grey60); Q_PROPERTY_AUTO(QColor,Grey60);
Q_PROPERTY_AUTO(QString,Grey70); Q_PROPERTY_AUTO(QColor,Grey70);
Q_PROPERTY_AUTO(QString,Grey80); Q_PROPERTY_AUTO(QColor,Grey80);
Q_PROPERTY_AUTO(QString,Grey90); Q_PROPERTY_AUTO(QColor,Grey90);
Q_PROPERTY_AUTO(QString,Grey100); Q_PROPERTY_AUTO(QColor,Grey100);
Q_PROPERTY_AUTO(QString,Grey110); Q_PROPERTY_AUTO(QColor,Grey110);
Q_PROPERTY_AUTO(QString,Grey120); Q_PROPERTY_AUTO(QColor,Grey120);
Q_PROPERTY_AUTO(QString,Grey130); Q_PROPERTY_AUTO(QColor,Grey130);
Q_PROPERTY_AUTO(QString,Grey140); Q_PROPERTY_AUTO(QColor,Grey140);
Q_PROPERTY_AUTO(QString,Grey150); Q_PROPERTY_AUTO(QColor,Grey150);
Q_PROPERTY_AUTO(QString,Grey160); Q_PROPERTY_AUTO(QColor,Grey160);
Q_PROPERTY_AUTO(QString,Grey170); Q_PROPERTY_AUTO(QColor,Grey170);
Q_PROPERTY_AUTO(QString,Grey180); Q_PROPERTY_AUTO(QColor,Grey180);
Q_PROPERTY_AUTO(QString,Grey190); Q_PROPERTY_AUTO(QColor,Grey190);
Q_PROPERTY_AUTO(QString,Grey200); Q_PROPERTY_AUTO(QColor,Grey200);
Q_PROPERTY_AUTO(QString,Grey210); Q_PROPERTY_AUTO(QColor,Grey210);
Q_PROPERTY_AUTO(QString,Grey220); Q_PROPERTY_AUTO(QColor,Grey220);
Q_PROPERTY_AUTO(FluColorSet*,Yellow); Q_PROPERTY_AUTO(FluAccentColor*,Yellow);
Q_PROPERTY_AUTO(FluColorSet*,Orange); Q_PROPERTY_AUTO(FluAccentColor*,Orange);
Q_PROPERTY_AUTO(FluColorSet*,Red); Q_PROPERTY_AUTO(FluAccentColor*,Red);
Q_PROPERTY_AUTO(FluColorSet*,Magenta); Q_PROPERTY_AUTO(FluAccentColor*,Magenta);
Q_PROPERTY_AUTO(FluColorSet*,Purple); Q_PROPERTY_AUTO(FluAccentColor*,Purple);
Q_PROPERTY_AUTO(FluColorSet*,Blue); Q_PROPERTY_AUTO(FluAccentColor*,Blue);
Q_PROPERTY_AUTO(FluColorSet*,Teal); Q_PROPERTY_AUTO(FluAccentColor*,Teal);
Q_PROPERTY_AUTO(FluColorSet*,Green); Q_PROPERTY_AUTO(FluAccentColor*,Green);
QML_NAMED_ELEMENT(FluColors) QML_NAMED_ELEMENT(FluColors)
QML_SINGLETON QML_SINGLETON
private: private:
explicit FluColors(QObject *parent = nullptr); explicit FluColors(QObject *parent = nullptr);
QColor withOpacity(QColor color,qreal opacity);
public: public:
SINGLETON(FluColors) SINGLETON(FluColors)
Q_INVOKABLE FluAccentColor* createAccentColor(QColor primaryColor);
static FluColors *create(QQmlEngine *qmlEngine, QJSEngine *jsEngine){return getInstance();} static FluColors *create(QQmlEngine *qmlEngine, QJSEngine *jsEngine){return getInstance();}
}; };

6
src/FluTheme.cpp
View File

@ -17,8 +17,8 @@ FluTheme::FluTheme(QObject *parent):QObject{parent}{
Q_EMIT darkChanged(); Q_EMIT darkChanged();
}); });
connect(this,&FluTheme::darkChanged,this,[=]{refreshColors();}); connect(this,&FluTheme::darkChanged,this,[=]{refreshColors();});
connect(this,&FluTheme::themeColorChanged,this,[=]{refreshColors();}); connect(this,&FluTheme::accentColorChanged,this,[=]{refreshColors();});
themeColor(FluColors::getInstance()->Blue()); accentColor(FluColors::getInstance()->Blue());
darkMode(FluThemeType::DarkMode::Light); darkMode(FluThemeType::DarkMode::Light);
nativeText(false); nativeText(false);
enableAnimation(true); enableAnimation(true);
@ -28,7 +28,7 @@ FluTheme::FluTheme(QObject *parent):QObject{parent}{
void FluTheme::refreshColors(){ void FluTheme::refreshColors(){
auto isDark = dark(); auto isDark = dark();
primaryColor(isDark ? _themeColor->lighter() : _themeColor->dark()); primaryColor(isDark ? _accentColor->lighter() : _accentColor->dark());
backgroundColor(isDark ? QColor(0,0,0,255) : QColor(1,1,1,255)); backgroundColor(isDark ? QColor(0,0,0,255) : QColor(1,1,1,255));
dividerColor(isDark ? QColor(80,80,80,255) : QColor(210,210,210,255)); dividerColor(isDark ? QColor(80,80,80,255) : QColor(210,210,210,255));
windowBackgroundColor(isDark ? QColor(32,32,32,255) : QColor(237,237,237,255)); windowBackgroundColor(isDark ? QColor(32,32,32,255) : QColor(237,237,237,255));

4
src/FluTheme.h
View File

@ -6,7 +6,7 @@
#include <QJsonArray> #include <QJsonArray>
#include <QJsonObject> #include <QJsonObject>
#include <QColor> #include <QColor>
#include "FluColorSet.h" #include "FluAccentColor.h"
#include "stdafx.h" #include "stdafx.h"
#include "singleton.h" #include "singleton.h"
@ -17,7 +17,7 @@ class FluTheme : public QObject
{ {
Q_OBJECT Q_OBJECT
Q_PROPERTY(bool dark READ dark NOTIFY darkChanged) Q_PROPERTY(bool dark READ dark NOTIFY darkChanged)
Q_PROPERTY_AUTO(FluColorSet*,themeColor); Q_PROPERTY_AUTO(FluAccentColor*,accentColor);
Q_PROPERTY_AUTO(QColor,primaryColor); Q_PROPERTY_AUTO(QColor,primaryColor);
Q_PROPERTY_AUTO(QColor,backgroundColor); Q_PROPERTY_AUTO(QColor,backgroundColor);
Q_PROPERTY_AUTO(QColor,dividerColor); Q_PROPERTY_AUTO(QColor,dividerColor);

2
src/FluentUI.cpp
View File

@ -31,7 +31,7 @@ void FluentUI::registerTypes(const char *uri){
qmlRegisterType<FluQrCodeItem>(uri,major,minor,"FluQrCodeItem"); qmlRegisterType<FluQrCodeItem>(uri,major,minor,"FluQrCodeItem");
qmlRegisterType<FluCaptcha>(uri,major,minor,"FluCaptcha"); qmlRegisterType<FluCaptcha>(uri,major,minor,"FluCaptcha");
qmlRegisterType<FluWatermark>(uri,major,minor,"FluWatermark"); qmlRegisterType<FluWatermark>(uri,major,minor,"FluWatermark");
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet"); qmlRegisterType<FluAccentColor>(uri,major,minor,"FluAccentColor");
qmlRegisterType<FluEvent>(uri,major,minor,"FluEvent"); qmlRegisterType<FluEvent>(uri,major,minor,"FluEvent");
qmlRegisterType<FluViewModel>(uri,major,minor,"FluViewModel"); qmlRegisterType<FluViewModel>(uri,major,minor,"FluViewModel");
qmlRegisterType<FluTreeModel>(uri,major,minor,"FluTreeModel"); qmlRegisterType<FluTreeModel>(uri,major,minor,"FluTreeModel");

1
src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml
View File

@ -60,7 +60,6 @@ Button {
return hovered ? hoverColor :normalColor return hovered ? hoverColor :normalColor
} }
} }
} }
contentItem: FluText { contentItem: FluText {
text: control.text text: control.text

46
src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml
View File

@ -7,9 +7,9 @@ Button {
property string contentDescription: "" property string contentDescription: ""
property color normalColor: { property color normalColor: {
if(checked){ if(checked){
return FluTheme.primaryColor return FluTheme.primaryColor
}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: {
@ -40,31 +40,45 @@ Button {
verticalPadding: 0 verticalPadding: 0
horizontalPadding:12 horizontalPadding:12
onClicked: clickListener() onClicked: clickListener()
onCheckableChanged: {
if(checkable){
checkable = false
}
}
background: Rectangle{ background: Rectangle{
implicitWidth: 28 implicitWidth: 28
implicitHeight: 28 implicitHeight: 28
radius: 4 radius: 4
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: checked ? 0 : 1
FluFocusRectangle{ FluFocusRectangle{
visible: control.activeFocus visible: control.activeFocus
radius:4 radius:4
} }
color:{ gradient: Gradient {
if(!enabled){ GradientStop { position: 0.33; color: control.normalColor }
return disableColor GradientStop { position: 1.0; color: Qt.darker(control.normalColor,1.3) }
}
Rectangle{
radius: parent.radius
anchors{
fill: parent
topMargin: checked ? 1 : 0
leftMargin: checked ? 1 : 0
rightMargin: checked ? 1 : 0
bottomMargin: checked ? 2 : 0
} }
if(checked){ color:{
if(pressed){ if(!enabled){
return pressedColor return disableColor
} }
if(checked){
if(pressed){
return pressedColor
}
}
return hovered ? hoverColor :normalColor
} }
return hovered ? hoverColor :normalColor }
Rectangle{
color:"#00000000"
anchors.fill: parent
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: checked ? 0 : 1
radius: parent.radius
} }
} }
contentItem: FluText { contentItem: FluText {

1
src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml
View File

@ -61,7 +61,6 @@ Button {
return hovered ? hoverColor :normalColor return hovered ? hoverColor :normalColor
} }
} }
} }
contentItem: FluText { contentItem: FluText {
text: control.text text: control.text

41
src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml
View File

@ -8,9 +8,9 @@ Button {
property string contentDescription: "" property string contentDescription: ""
property color normalColor: { property color normalColor: {
if(checked){ if(checked){
return FluTheme.primaryColor return FluTheme.primaryColor
}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: {
@ -45,22 +45,41 @@ Button {
implicitWidth: 28 implicitWidth: 28
implicitHeight: 28 implicitHeight: 28
radius: 4 radius: 4
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: checked ? 0 : 1
FluFocusRectangle{ FluFocusRectangle{
visible: control.activeFocus visible: control.activeFocus
radius:4 radius:4
} }
color:{ gradient: Gradient {
if(!enabled){ GradientStop { position: 0.33; color: control.normalColor }
return disableColor GradientStop { position: 1.0; color: Qt.darker(control.normalColor,1.3) }
}
Rectangle{
radius: parent.radius
anchors{
fill: parent
topMargin: checked ? 1 : 0
leftMargin: checked ? 1 : 0
rightMargin: checked ? 1 : 0
bottomMargin: checked ? 2 : 0
} }
if(checked){ color:{
if(pressed){ if(!enabled){
return pressedColor return disableColor
} }
if(checked){
if(pressed){
return pressedColor
}
}
return hovered ? hoverColor :normalColor
} }
return hovered ? hoverColor :normalColor }
Rectangle{
color:"#00000000"
anchors.fill: parent
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: checked ? 0 : 1
radius: parent.radius
} }
} }
contentItem: FluText { contentItem: FluText {