From 1ad1aa058a05c73e4d9d0ef4371ff9510be2c3d7 Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Mon, 6 Mar 2023 14:22:13 +0800 Subject: [PATCH] update --- example/App.qml | 2 +- example/MainPage.qml | 10 +- example/T_Theme.qml | 4 +- src/FluApp.cpp | 1 - src/FluApp.h | 1 - src/FluColors.cpp | 116 +++++++++++++++++- src/FluColors.h | 5 +- src/FluTheme.cpp | 20 +++ src/FluTheme.h | 21 ++++ src/Fluent.cpp | 13 +- src/FluentUI.pro | 2 + src/controls/FluAppBar.qml | 88 +++++-------- src/controls/FluButton.qml | 6 +- src/controls/FluCheckBox.qml | 6 +- .../{FluColorSet.qml => FluColorSetOld.qml} | 0 .../{FluColors.qml => FluColorsOld.qml} | 16 +-- src/controls/FluDivider.qml | 2 +- src/controls/FluFilledButton.qml | 4 +- src/controls/FluIcon.qml | 2 +- src/controls/FluIconButton.qml | 31 ++--- src/controls/FluInfoBar.qml | 6 +- src/controls/FluMenu.qml | 2 +- src/controls/FluMenuItem.qml | 4 +- src/controls/FluMultiLineTextBox.qml | 4 +- src/controls/FluProgressBar.qml | 4 +- src/controls/FluProgressRing.qml | 8 +- src/controls/FluRadioButton.qml | 8 +- src/controls/FluShadow.qml | 2 +- src/controls/FluSlider.qml | 8 +- src/controls/FluText.qml | 2 +- src/controls/FluTextBox.qml | 4 +- src/controls/FluTextBoxBackground.qml | 8 +- src/controls/FluTextButton.qml | 6 +- src/controls/FluTheme.qml | 10 -- src/controls/FluThemeOld.qml | 10 ++ src/controls/FluToggleSwitch.qml | 2 +- src/controls/FluTooltip.qml | 2 +- src/controls/FluWindow.qml | 6 +- src/res.qrc | 6 +- 39 files changed, 293 insertions(+), 159 deletions(-) create mode 100644 src/FluTheme.cpp create mode 100644 src/FluTheme.h rename src/controls/{FluColorSet.qml => FluColorSetOld.qml} (100%) rename src/controls/{FluColors.qml => FluColorsOld.qml} (91%) delete mode 100644 src/controls/FluTheme.qml create mode 100644 src/controls/FluThemeOld.qml diff --git a/example/App.qml b/example/App.qml index b19ca2f..c03eb5c 100644 --- a/example/App.qml +++ b/example/App.qml @@ -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", diff --git a/example/MainPage.qml b/example/MainPage.qml index dc44fc9..6217828 100644 --- a/example/MainPage.qml +++ b/example/MainPage.qml @@ -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 diff --git a/example/T_Theme.qml b/example/T_Theme.qml index b351f32..a033eb5 100644 --- a/example/T_Theme.qml +++ b/example/T_Theme.qml @@ -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 diff --git a/src/FluApp.cpp b/src/FluApp.cpp index bdaf2cd..687575a 100644 --- a/src/FluApp.cpp +++ b/src/FluApp.cpp @@ -22,7 +22,6 @@ FluApp *FluApp::getInstance() FluApp::FluApp(QObject *parent) : QObject{parent} { - isDark(false); } void FluApp::init(QWindow *window,QMap properties){ diff --git a/src/FluApp.h b/src/FluApp.h index 5939904..6e4d006 100644 --- a/src/FluApp.h +++ b/src/FluApp.h @@ -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: diff --git a/src/FluColors.cpp b/src/FluColors.cpp index 2b03abf..99d2326 100644 --- a/src/FluColors.cpp +++ b/src/FluColors.cpp @@ -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); } diff --git a/src/FluColors.h b/src/FluColors.h index 1de701a..c494d03 100644 --- a/src/FluColors.h +++ b/src/FluColors.h @@ -44,8 +44,9 @@ class FluColors : public QObject public: explicit FluColors(QObject *parent = nullptr); - -signals: + static FluColors *getInstance(); +private: + static FluColors* m_instance; }; diff --git a/src/FluTheme.cpp b/src/FluTheme.cpp new file mode 100644 index 0000000..7f455b4 --- /dev/null +++ b/src/FluTheme.cpp @@ -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); +} diff --git a/src/FluTheme.h b/src/FluTheme.h new file mode 100644 index 0000000..6fb2150 --- /dev/null +++ b/src/FluTheme.h @@ -0,0 +1,21 @@ +#ifndef FLUTHEME_H +#define FLUTHEME_H + +#include +#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 diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 5538f7a..4813c42 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -4,6 +4,8 @@ #include #include #include +#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(uri,major,minor,"WindowHelper"); + qmlRegisterType(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); } diff --git a/src/FluentUI.pro b/src/FluentUI.pro index 5ddee75..9476f93 100644 --- a/src/FluentUI.pro +++ b/src/FluentUI.pro @@ -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 \ diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml index 242269c..83145ef 100644 --- a/src/controls/FluAppBar.qml +++ b/src/controls/FluAppBar.qml @@ -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() } } } diff --git a/src/controls/FluButton.qml b/src/controls/FluButton.qml index f3c6c5f..2724965 100644 --- a/src/controls/FluButton.qml +++ b/src/controls/FluButton.qml @@ -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) } diff --git a/src/controls/FluCheckBox.qml b/src/controls/FluCheckBox.qml index 50ba8db..9712b19 100644 --- a/src/controls/FluCheckBox.qml +++ b/src/controls/FluCheckBox.qml @@ -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{ diff --git a/src/controls/FluColorSet.qml b/src/controls/FluColorSetOld.qml similarity index 100% rename from src/controls/FluColorSet.qml rename to src/controls/FluColorSetOld.qml diff --git a/src/controls/FluColors.qml b/src/controls/FluColorsOld.qml similarity index 91% rename from src/controls/FluColors.qml rename to src/controls/FluColorsOld.qml index acabda0..28b2425 100644 --- a/src/controls/FluColors.qml +++ b/src/controls/FluColorsOld.qml @@ -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) diff --git a/src/controls/FluDivider.qml b/src/controls/FluDivider.qml index 1d84545..7196149 100644 --- a/src/controls/FluDivider.qml +++ b/src/controls/FluDivider.qml @@ -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) } diff --git a/src/controls/FluFilledButton.qml b/src/controls/FluFilledButton.qml index 9f1a5c1..729c624 100644 --- a/src/controls/FluFilledButton.qml +++ b/src/controls/FluFilledButton.qml @@ -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) } diff --git a/src/controls/FluIcon.qml b/src/controls/FluIcon.qml index 1445cce..d35c5e2 100644 --- a/src/controls/FluIcon.qml +++ b/src/controls/FluIcon.qml @@ -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" diff --git a/src/controls/FluIconButton.qml b/src/controls/FluIconButton.qml index d26666f..bef5539 100644 --- a/src/controls/FluIconButton.qml +++ b/src/controls/FluIconButton.qml @@ -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)); } diff --git a/src/controls/FluInfoBar.qml b/src/controls/FluInfoBar.qml index 08761cb..bcdb3db 100644 --- a/src/controls/FluInfoBar.qml +++ b/src/controls/FluInfoBar.qml @@ -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); diff --git a/src/controls/FluMenu.qml b/src/controls/FluMenu.qml index 2dc061d..bc46d64 100644 --- a/src/controls/FluMenu.qml +++ b/src/controls/FluMenu.qml @@ -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 diff --git a/src/controls/FluMenuItem.qml b/src/controls/FluMenuItem.qml index 4d92e52..a1861d5 100644 --- a/src/controls/FluMenuItem.qml +++ b/src/controls/FluMenuItem.qml @@ -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{ diff --git a/src/controls/FluMultiLineTextBox.qml b/src/controls/FluMultiLineTextBox.qml index ded8085..9c72025 100644 --- a/src/controls/FluMultiLineTextBox.qml +++ b/src/controls/FluMultiLineTextBox.qml @@ -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 diff --git a/src/controls/FluProgressBar.qml b/src/controls/FluProgressBar.qml index 940fc22..cef6c30 100644 --- a/src/controls/FluProgressBar.qml +++ b/src/controls/FluProgressBar.qml @@ -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 diff --git a/src/controls/FluProgressRing.qml b/src/controls/FluProgressRing.qml index 9a0dc4c..2f18a84 100644 --- a/src/controls/FluProgressRing.qml +++ b/src/controls/FluProgressRing.qml @@ -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() } } diff --git a/src/controls/FluRadioButton.qml b/src/controls/FluRadioButton.qml index 2900077..b1a3590 100644 --- a/src/controls/FluRadioButton.qml +++ b/src/controls/FluRadioButton.qml @@ -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) } diff --git a/src/controls/FluShadow.qml b/src/controls/FluShadow.qml index 8e88af2..f1167c0 100644 --- a/src/controls/FluShadow.qml +++ b/src/controls/FluShadow.qml @@ -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 diff --git a/src/controls/FluSlider.qml b/src/controls/FluSlider.qml index b776c9d..fb34c45 100644 --- a/src/controls/FluSlider.qml +++ b/src/controls/FluSlider.qml @@ -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 { diff --git a/src/controls/FluText.qml b/src/controls/FluText.qml index acb3df6..c1f130e 100644 --- a/src/controls/FluText.qml +++ b/src/controls/FluText.qml @@ -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 diff --git a/src/controls/FluTextBox.qml b/src/controls/FluTextBox.qml index df6c727..5d44386 100644 --- a/src/controls/FluTextBox.qml +++ b/src/controls/FluTextBox.qml @@ -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 diff --git a/src/controls/FluTextBoxBackground.qml b/src/controls/FluTextBoxBackground.qml index 9f76f47..30c6c59 100644 --- a/src/controls/FluTextBoxBackground.qml +++ b/src/controls/FluTextBoxBackground.qml @@ -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) diff --git a/src/controls/FluTextButton.qml b/src/controls/FluTextButton.qml index f99dac3..334b9dd 100644 --- a/src/controls/FluTextButton.qml +++ b/src/controls/FluTextButton.qml @@ -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{ diff --git a/src/controls/FluTheme.qml b/src/controls/FluTheme.qml deleted file mode 100644 index 6dfb552..0000000 --- a/src/controls/FluTheme.qml +++ /dev/null @@ -1,10 +0,0 @@ -pragma Singleton - -import QtQuick 2.15 - -QtObject { - - property FluColorSet primaryColor: FluColors._Teal - - -} diff --git a/src/controls/FluThemeOld.qml b/src/controls/FluThemeOld.qml new file mode 100644 index 0000000..31040fd --- /dev/null +++ b/src/controls/FluThemeOld.qml @@ -0,0 +1,10 @@ +pragma Singleton + +import QtQuick 2.15 + +QtObject { + + property FluColorSetOld primaryColor: FluColorsOld._Teal + + +} diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml index 7203d6d..bd028db 100644 --- a/src/controls/FluToggleSwitch.qml +++ b/src/controls/FluToggleSwitch.qml @@ -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 } diff --git a/src/controls/FluTooltip.qml b/src/controls/FluTooltip.qml index d6965ba..822bd04 100644 --- a/src/controls/FluTooltip.qml +++ b/src/controls/FluTooltip.qml @@ -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{} } diff --git a/src/controls/FluWindow.qml b/src/controls/FluWindow.qml index 1ce9e5d..5863e7c 100644 --- a/src/controls/FluWindow.qml +++ b/src/controls/FluWindow.qml @@ -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{ diff --git a/src/res.qrc b/src/res.qrc index 57c11e0..dd0eb1b 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -32,8 +32,8 @@ controls/FluMenuItem.qml controls/FluShadow.qml controls/FluTextButton.qml - controls/FluColorSet.qml - controls/FluColors.qml - controls/FluTheme.qml + controls/FluColorSetOld.qml + controls/FluColorsOld.qml + controls/FluThemeOld.qml