wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
zhuzihcu 2023-03-06 14:22:13 +08:00
parent fdecf5a564
commit 1ad1aa058a
39 changed files with 293 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/App.qml
View File

@ -10,7 +10,7 @@ Window {
color: "#00000000"
Component.onCompleted: {
FluApp.init(app,properties)
FluApp.isDark = false
FluTheme.isDark = false
FluApp.routes = {
"/":"qrc:/MainPage.qml",
"/Setting":"qrc:/SettingPage.qml",

10
example/MainPage.qml
View File

@ -9,10 +9,10 @@ import FluentUI 1.0
FluWindow {
id:rootwindow
width: 800
height: 700
height: 600
title: "FluentUI"
minimumWidth: 600
minimumHeight: 500
minimumHeight: 400
FluAppBar{
id:appbar
@ -124,7 +124,7 @@ FluWindow {
Rectangle{
color: {
if(FluApp.isDark){
if(FluTheme.isDark){
if(item_mouse.containsMouse){
return "#292929"
}
@ -177,7 +177,7 @@ FluWindow {
}
Rectangle{
color: FluApp.isDark ? "#323232" : "#FFFFFF"
color: FluTheme.isDark ? "#323232" : "#FFFFFF"
radius: 10
clip: true
anchors{
@ -191,7 +191,7 @@ FluWindow {
bottomMargin: 20
}
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)
Loader{
anchors.fill: parent

4
example/T_Theme.qml
View File

@ -18,7 +18,7 @@ Item {
Repeater{
model: [FluColors._Yellow,FluColors._Orange,FluColors._Red,FluColors._Magenta,FluColors._Purple,FluColors._Blue,FluColors._Teal,FluColors._Green]
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
delegate: Rectangle{
width: 42
height: 42
@ -29,7 +29,7 @@ Item {
icon: FluentIcons.FA_check
iconSize: 15
visible: modelData === FluTheme.primaryColor
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)
}
MouseArea{
id:mouse_item

1
src/FluApp.cpp
View File

@ -22,7 +22,6 @@ FluApp *FluApp::getInstance()
FluApp::FluApp(QObject *parent)
: QObject{parent}
{
isDark(false);
}
void FluApp::init(QWindow *window,QMap<QString, QVariant> properties){

1
src/FluApp.h
View File

@ -14,7 +14,6 @@ class FluApp : public QObject
{
Q_OBJECT
Q_PROPERTY_AUTO(QString,initialRoute);
Q_PROPERTY_AUTO(bool,isDark);
Q_PROPERTY_AUTO(QJsonObject,routes);
public:

116
src/FluColors.cpp
View File

@ -1,7 +1,121 @@
#include "FluColors.h"
#include "FluColors.h"
FluColors* FluColors::m_instance = nullptr;
FluColors *FluColors::getInstance()
{
if(FluColors::m_instance == nullptr){
FluColors::m_instance = new FluColors;
}
return FluColors::m_instance;
}
FluColors::FluColors(QObject *parent)
: QObject{parent}
{
Black("#000000");
White("#ffffff");
Grey10("#faf9f8");
Grey20("#f3f2f1");
Grey30("#edebe9");
Grey40("#e1dfdd");
Grey50("#d2d0ce");
Grey60("#c8c6c4");
Grey70("#beb9b8");
Grey80("#b3b0ad");
Grey90("#a19f9d");
Grey100("#979592");
Grey110("#8a8886");
Grey120("#797775");
Grey130("#605e5c");
Grey140("#484644");
Grey150("#3b3a39");
Grey160("#323130");
Grey170("#292827");
Grey180("#252423");
Grey190("#201f1e");
Grey200("#1b1a19");
Grey210("#161514");
Grey220("#11100f");
FluColorSet *yellow = new FluColorSet();
yellow->darkest("#f9a825");
yellow->darker("#fbc02d");
yellow->dark("#fdd435");
yellow->normal("#ffeb3b");
yellow->light("#ffee58");
yellow->lighter("#fff176");
yellow->lightest("#fff59b");
Yellow(yellow);
FluColorSet *orange = new FluColorSet();
orange->darkest("#993d07");
orange->darker("#ac4408");
orange->dark("#d1580a");
orange->normal("#f7630c");
orange->light("#f87a30");
orange->lighter("#f99154");
orange->lightest("#fac06a");
Orange(orange);
FluColorSet *red = new FluColorSet();
red->darkest("#8f0a15");
red->darker("#a20b18");
red->dark("#b90d1c");
red->normal("#e81123");
red->light("#ec404f");
red->lighter("#ee5865");
red->lightest("#f06b76");
Red(red);
FluColorSet *magenta = new FluColorSet();
magenta->darkest("#6f004f");
magenta->darker("#a0076c");
magenta->dark("#b50d7d");
magenta->normal("#e3008c");
magenta->light("#ea4da8");
magenta->lighter("#ee6ec1");
magenta->lightest("#f18cd5");
Magenta(magenta);
FluColorSet *purple = new FluColorSet();
purple->darkest("#2c0f76");
purple->darker("#3d0f99");
purple->dark("#4e11ae");
purple->normal("#68217a");
purple->light("#7b4c9d");
purple->lighter("#8d6ebd");
purple->lightest("#9e8ed9");
Purple(purple);
FluColorSet *blue = new FluColorSet();
blue->darkest("#004A83");
blue->darker("#005494");
blue->dark("#0066B4");
blue->normal("#0078D4");
blue->light("#268CDC");
blue->lighter("#4CA0E0");
blue->lightest("#60ABE4");
Blue(blue);
FluColorSet *teal = new FluColorSet();
teal->darkest("#006E5B");
teal->darker("#007C67");
teal->dark("#00977D");
teal->normal("#00B294");
teal->light("#26BDA4");
teal->lighter("#4DC9B4");
teal->lightest("#60CFBC");
Teal(teal);
FluColorSet *green = new FluColorSet();
green->darkest("#094C09");
green->darker("#0C5D0C");
green->dark("#0E6F0E");
green->normal("#107C10");
green->light("#278939");
green->lighter("#4C9C4C");
green->lightest("#6AAD6A");
Green(green);
}

5
src/FluColors.h
View File

@ -44,8 +44,9 @@ class FluColors : public QObject
public:
explicit FluColors(QObject *parent = nullptr);
signals:
static FluColors *getInstance();
private:
static FluColors* m_instance;
};

20
src/FluTheme.cpp Normal file
View File

@ -0,0 +1,20 @@
#include "FluTheme.h"
#include "FluColors.h"
FluTheme* FluTheme::m_instance = nullptr;
FluTheme *FluTheme::getInstance()
{
if(FluTheme::m_instance == nullptr){
FluTheme::m_instance = new FluTheme;
}
return FluTheme::m_instance;
}
FluTheme::FluTheme(QObject *parent)
: QObject{parent}
{
primaryColor(FluColors::getInstance()->Blue());
isDark(false);
}

21
src/FluTheme.h Normal file
View File

@ -0,0 +1,21 @@
#ifndef FLUTHEME_H
#define FLUTHEME_H
#include <QObject>
#include "FluColorSet.h"
#include "stdafx.h"
class FluTheme : public QObject
{
Q_OBJECT
Q_PROPERTY_AUTO(FluColorSet*,primaryColor)
Q_PROPERTY_AUTO(bool,isDark);
public:
explicit FluTheme(QObject *parent = nullptr);
static FluTheme *getInstance();
private:
static FluTheme* m_instance;
};
#endif // FLUTHEME_H

13
src/Fluent.cpp
View File

@ -4,6 +4,8 @@
#include <QQmlContext>
#include <QGuiApplication>
#include <QQuickWindow>
#include "FluColors.h"
#include "FluTheme.h"
#include "WindowHelper.h"
#include "FluApp.h"
#include "Def.h"
@ -29,11 +31,12 @@ void Fluent::registerTypes(const char *uri){
int minor = 0;
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
// qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluColors.qml"),uri,major,minor,"FluColors");
// qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluTheme.qml"),uri,major,minor,"FluTheme");
qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluColors.qml"),uri,major,minor,"FluColors");
qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluTheme.qml"),uri,major,minor,"FluTheme");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluColorSetOld.qml"),uri,major,minor,"FluColorSetOld");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluColorSet.qml"),uri,major,minor,"FluColorSet");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMenu.qml"),uri,major,minor,"FluMenu");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMenuItem.qml"),uri,major,minor,"FluMenuItem");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluScrollBar.qml"),uri,major,minor,"FluScrollBar");
@ -76,4 +79,8 @@ void Fluent::initializeEngine(QQmlEngine *engine, const char *uri)
QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf");
FluApp* app = FluApp::getInstance();
engine->rootContext()->setContextProperty("FluApp",app);
FluColors* colors = FluColors::getInstance();
engine->rootContext()->setContextProperty("FluColors",colors);
FluTheme* theme = FluTheme::getInstance();
engine->rootContext()->setContextProperty("FluTheme",theme);
}

2
src/FluentUI.pro
View File

@ -15,6 +15,7 @@ HEADERS += \
FluApp.h \
FluColorSet.h \
FluColors.h \
FluTheme.h \
Fluent.h \
FluentUI.h \
FramelessView.h \
@ -27,6 +28,7 @@ SOURCES += \
FluApp.cpp \
FluColorSet.cpp \
FluColors.cpp \
FluTheme.cpp \
Fluent.cpp \
FluentUI.cpp \
WindowHelper.cpp \

76
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,86 +79,55 @@ 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
text:"最小化"
textColor: root.textColor
color:hovered ? "#20000000" : "#00000000"
onClicked: {
Window.window.showMinimized()
}
}
FluTooltip{
visible: mouse_miniminzed.containsMouse
text:"最小化"
delay: 1000
}
}
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
}
}
FluIcon{
FluIconButton{
icon : FluentIcons.FA_close
Layout.alignment: Qt.AlignVCenter
color:"#FFFFFF"
MouseArea{
id:mouse_close
anchors.fill: parent
hoverEnabled: true
text:"关闭"
textColor: root.textColor
color:hovered ? "#20000000" : "#00000000"
onClicked: {
Window.window.close()
}
}
FluTooltip{
visible: mouse_close.containsMouse
text:"关闭"
delay: 1000
}
}
}
FluDivider{

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{

6
src/res.qrc
View File

@ -32,8 +32,8 @@
<file>controls/FluMenuItem.qml</file>
<file>controls/FluShadow.qml</file>
<file>controls/FluTextButton.qml</file>
<file>controls/FluColorSet.qml</file>
<file>controls/FluColors.qml</file>
<file>controls/FluTheme.qml</file>
<file>controls/FluColorSetOld.qml</file>
<file>controls/FluColorsOld.qml</file>
<file>controls/FluThemeOld.qml</file>
</qresource>
</RCC>