From fdecf5a56413c89116d0db7ed0b5eea0293d1ce3 Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Mon, 6 Mar 2023 12:09:06 +0800 Subject: [PATCH] update --- example/MainPage.qml | 4 + example/T_Theme.qml | 46 +++++++++++ example/qml.qrc | 1 + src/FluColorSet.cpp | 7 ++ src/FluColorSet.h | 23 ++++++ src/FluColors.cpp | 7 ++ src/FluColors.h | 52 ++++++++++++ src/Fluent.cpp | 5 +- src/FluentUI.pro | 4 + src/controls/FluAppBar.qml | 78 +++++++++++++----- src/controls/FluCheckBox.qml | 8 +- src/controls/FluColorSet.qml | 13 +++ src/controls/FluColors.qml | 112 ++++++++++++++++++++++++++ src/controls/FluFilledButton.qml | 4 +- src/controls/FluInfoBar.qml | 2 +- src/controls/FluMultiLineTextBox.qml | 4 +- src/controls/FluProgressBar.qml | 2 +- src/controls/FluProgressRing.qml | 2 +- src/controls/FluRadioButton.qml | 4 +- src/controls/FluSlider.qml | 4 +- src/controls/FluTextBox.qml | 4 +- src/controls/FluTextBoxBackground.qml | 4 +- src/controls/FluTextButton.qml | 4 +- src/controls/FluTheme.qml | 10 +++ src/controls/FluToggleSwitch.qml | 7 +- src/controls/FluWindow.qml | 9 ++- src/controls/TFpsMonitor.qml | 1 + src/res.qrc | 3 + 28 files changed, 376 insertions(+), 48 deletions(-) create mode 100644 example/T_Theme.qml create mode 100644 src/FluColorSet.cpp create mode 100644 src/FluColorSet.h create mode 100644 src/FluColors.cpp create mode 100644 src/FluColors.h create mode 100644 src/controls/FluColorSet.qml create mode 100644 src/controls/FluColors.qml create mode 100644 src/controls/FluTheme.qml diff --git a/example/MainPage.qml b/example/MainPage.qml index c540f4f..dc44fc9 100644 --- a/example/MainPage.qml +++ b/example/MainPage.qml @@ -54,6 +54,10 @@ FluWindow { text:"Rectangle" page:"qrc:/T_Rectangle.qml" } + ListElement{ + text:"Theme" + page:"qrc:/T_Theme.qml" + } ListElement{ text:"Awesome" page:"qrc:/T_Awesome.qml" diff --git a/example/T_Theme.qml b/example/T_Theme.qml new file mode 100644 index 0000000..b351f32 --- /dev/null +++ b/example/T_Theme.qml @@ -0,0 +1,46 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import QtGraphicalEffects 1.15 +import FluentUI 1.0 + +Item { + + ColumnLayout{ + spacing: 5 + + FluText{ + text:"Theme" + fontStyle: FluText.TitleLarge + } + RowLayout{ + Layout.topMargin: 20 + + + Repeater{ + model: [FluColors._Yellow,FluColors._Orange,FluColors._Red,FluColors._Magenta,FluColors._Purple,FluColors._Blue,FluColors._Teal,FluColors._Green] + delegate: Rectangle{ + width: 42 + height: 42 + radius: 4 + color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal + FluIcon { + anchors.centerIn: parent + 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) + } + MouseArea{ + id:mouse_item + anchors.fill: parent + hoverEnabled: true + onClicked: { + FluTheme.primaryColor = modelData + } + } + } + } + } + } +} diff --git a/example/qml.qrc b/example/qml.qrc index 387ebde..50169e8 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -26,5 +26,6 @@ res/svg/avatar_12.svg T_Awesome.qml T_TextBox.qml + T_Theme.qml diff --git a/src/FluColorSet.cpp b/src/FluColorSet.cpp new file mode 100644 index 0000000..ebe9771 --- /dev/null +++ b/src/FluColorSet.cpp @@ -0,0 +1,7 @@ +#include "FluColorSet.h" + +FluColorSet::FluColorSet(QObject *parent) + : QObject{parent} +{ + +} diff --git a/src/FluColorSet.h b/src/FluColorSet.h new file mode 100644 index 0000000..2b2c764 --- /dev/null +++ b/src/FluColorSet.h @@ -0,0 +1,23 @@ +#ifndef FLUCOLORSET_H +#define FLUCOLORSET_H + +#include +#include "stdafx.h" + +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) +public: + explicit FluColorSet(QObject *parent = nullptr); + +}; + +#endif // FLUCOLORSET_H diff --git a/src/FluColors.cpp b/src/FluColors.cpp new file mode 100644 index 0000000..2b03abf --- /dev/null +++ b/src/FluColors.cpp @@ -0,0 +1,7 @@ +#include "FluColors.h" + +FluColors::FluColors(QObject *parent) + : QObject{parent} +{ + +} diff --git a/src/FluColors.h b/src/FluColors.h new file mode 100644 index 0000000..1de701a --- /dev/null +++ b/src/FluColors.h @@ -0,0 +1,52 @@ +#ifndef FLUCOLORS_H +#define FLUCOLORS_H + +#include +#include "FluColorSet.h" +#include "stdafx.h" + +class FluColors : public QObject +{ + Q_OBJECT + Q_PROPERTY_AUTO(QString,Black); + Q_PROPERTY_AUTO(QString,White); + Q_PROPERTY_AUTO(QString,Grey10); + Q_PROPERTY_AUTO(QString,Grey20); + Q_PROPERTY_AUTO(QString,Grey30); + Q_PROPERTY_AUTO(QString,Grey40); + Q_PROPERTY_AUTO(QString,Grey50); + Q_PROPERTY_AUTO(QString,Grey60); + Q_PROPERTY_AUTO(QString,Grey70); + Q_PROPERTY_AUTO(QString,Grey80); + Q_PROPERTY_AUTO(QString,Grey90); + Q_PROPERTY_AUTO(QString,Grey100); + Q_PROPERTY_AUTO(QString,Grey110); + Q_PROPERTY_AUTO(QString,Grey120); + Q_PROPERTY_AUTO(QString,Grey130); + Q_PROPERTY_AUTO(QString,Grey140); + Q_PROPERTY_AUTO(QString,Grey150); + Q_PROPERTY_AUTO(QString,Grey160); + Q_PROPERTY_AUTO(QString,Grey170); + Q_PROPERTY_AUTO(QString,Grey180); + Q_PROPERTY_AUTO(QString,Grey190); + Q_PROPERTY_AUTO(QString,Grey200); + Q_PROPERTY_AUTO(QString,Grey210); + Q_PROPERTY_AUTO(QString,Grey220); + + Q_PROPERTY_AUTO(FluColorSet*,Yellow); + Q_PROPERTY_AUTO(FluColorSet*,Orange); + Q_PROPERTY_AUTO(FluColorSet*,Red); + Q_PROPERTY_AUTO(FluColorSet*,Magenta); + Q_PROPERTY_AUTO(FluColorSet*,Purple); + Q_PROPERTY_AUTO(FluColorSet*,Blue); + Q_PROPERTY_AUTO(FluColorSet*,Teal); + Q_PROPERTY_AUTO(FluColorSet*,Green); + +public: + explicit FluColors(QObject *parent = nullptr); + +signals: + +}; + +#endif // FLUCOLORS_H diff --git a/src/Fluent.cpp b/src/Fluent.cpp index f3473cf..5538f7a 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -30,6 +30,10 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(uri,major,minor,"WindowHelper"); + 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/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"); @@ -43,7 +47,6 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluWindow.qml"),uri,major,minor,"FluWindow"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluRectangle.qml"),uri,major,minor,"FluRectangle"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAppBar.qml"),uri,major,minor,"FluAppBar"); - qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAppBar.qml"),uri,major,minor,"FluAppBar"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluButton.qml"),uri,major,minor,"FluButton"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCheckBox.qml"),uri,major,minor,"FluCheckBox"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluComboBox.qml"),uri,major,minor,"FluComboBox"); diff --git a/src/FluentUI.pro b/src/FluentUI.pro index b6869b6..5ddee75 100644 --- a/src/FluentUI.pro +++ b/src/FluentUI.pro @@ -13,6 +13,8 @@ RESOURCES += \ HEADERS += \ Def.h \ FluApp.h \ + FluColorSet.h \ + FluColors.h \ Fluent.h \ FluentUI.h \ FramelessView.h \ @@ -23,6 +25,8 @@ HEADERS += \ SOURCES += \ Def.cpp \ FluApp.cpp \ + FluColorSet.cpp \ + FluColors.cpp \ Fluent.cpp \ FluentUI.cpp \ WindowHelper.cpp \ diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml index 9f0b01c..242269c 100644 --- a/src/controls/FluAppBar.qml +++ b/src/controls/FluAppBar.qml @@ -5,14 +5,14 @@ import FluentUI 1.0 Rectangle{ - color: FluApp.isDark ? "#323232" : "#FFFFFF" + color: FluTheme.primaryColor.dark height: 50 width: { if(parent==null) return 200 return parent.width } - + z: 65535 property string title: "标题" property bool showDark: false @@ -52,6 +52,7 @@ Rectangle{ left: parent.left leftMargin: 14 } + color:"#FFFFFFFF" fontStyle: FluText.Title font.pixelSize: 14 font.bold: true @@ -59,13 +60,15 @@ Rectangle{ RowLayout{ anchors.right: parent.right; + anchors.rightMargin: 10 height: parent.height - spacing: 5 + spacing: 15 TFpsMonitor{ Layout.alignment: Qt.AlignVCenter Layout.rightMargin: 12 Layout.topMargin: 5 + color:"#FFFFFFFF" visible: showFps } @@ -75,6 +78,7 @@ Rectangle{ visible: showDark FluText{ text:"夜间模式" + color:"#FFFFFFFF" fontStyle: FluText.Body } FluToggleSwitch{ @@ -85,39 +89,73 @@ Rectangle{ } } - FluIconButton{ + FluIcon{ icon : FluentIcons.FA_window_minimize Layout.alignment: Qt.AlignVCenter iconSize: 15 - text:"最小化" - onClicked: { - Window.window.showMinimized() + color:"#FFFFFF" + MouseArea{ + id:mouse_miniminzed + anchors.fill: parent + hoverEnabled: true + onClicked: { + Window.window.showMinimized() + } + } + FluTooltip{ + visible: mouse_miniminzed.containsMouse + text:"最小化" + delay: 1000 } } - FluIconButton{ - icon : { + FluIcon{ + + 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 } Layout.alignment: Qt.AlignVCenter visible: resizable - text:{ - if(Window.window == null) - return "" - Window.Maximized === Window.window.visibility?"向下还原":"最大化" - } iconSize: 15 - onClicked: { - toggleMaximized() + MouseArea{ + id:mouse_maximized + anchors.fill: parent + hoverEnabled: true + onClicked: { + toggleMaximized() + } + } + FluTooltip{ + visible: mouse_maximized.containsMouse + text:{ + return parent.isRestore?"向下还原":"最大化" + } + delay: 1000 } } - FluIconButton{ + FluIcon{ icon : FluentIcons.FA_close Layout.alignment: Qt.AlignVCenter - text:"关闭" - onClicked: { - Window.window.close() + color:"#FFFFFF" + MouseArea{ + id:mouse_close + anchors.fill: parent + hoverEnabled: true + onClicked: { + Window.window.close() + } + } + FluTooltip{ + visible: mouse_close.containsMouse + text:"关闭" + delay: 1000 } } } diff --git a/src/controls/FluCheckBox.qml b/src/controls/FluCheckBox.qml index cc24ab5..50ba8db 100644 --- a/src/controls/FluCheckBox.qml +++ b/src/controls/FluCheckBox.qml @@ -19,7 +19,7 @@ Item { border.color: { if(FluApp.isDark){ if(checked){ - return Qt.rgba(76/255,160/255,224/255,1) + return FluTheme.primaryColor.lighter } return Qt.rgba(160/255,160/255,160/255,1) }else{ @@ -27,7 +27,7 @@ Item { if(mouse_area.containsMouse){ return Qt.rgba(25/255,117/255,187/255,1) } - return Qt.rgba(0/255,102/255,180/255,1) + return FluTheme.primaryColor.dark } return Qt.rgba(136/255,136/255,136/255,1) } @@ -39,7 +39,7 @@ Item { if(mouse_area.containsMouse){ return Qt.rgba(74/255,149/255,207/255,1) } - return Qt.rgba(76/255,160/255,224/255,1) + return FluTheme.primaryColor.lighter } if(mouse_area.containsMouse){ return Qt.rgba(62/255,62/255,62/255,1) @@ -50,7 +50,7 @@ Item { if(mouse_area.containsMouse){ return Qt.rgba(25/255,117/255,187/255,1) } - return Qt.rgba(0/255,102/255,180/255,1) + return FluTheme.primaryColor.dark } if(mouse_area.containsMouse){ return Qt.rgba(244/255,244/255,244/255,1) diff --git a/src/controls/FluColorSet.qml b/src/controls/FluColorSet.qml new file mode 100644 index 0000000..ee2234a --- /dev/null +++ b/src/controls/FluColorSet.qml @@ -0,0 +1,13 @@ +import QtQuick 2.15 + +QtObject { + + property color darkest: Qt.rgba(0/255,74/255,131/255,1) + property color darker:Qt.rgba(0/255,84/255,148/255,1) + property color dark:Qt.rgba(0/255,102/255,180/255,1) + property color normal:Qt.rgba(0/255,120/255,212/255,1) + property color light:Qt.rgba(38/255,140/255,218/255,1) + property color lighter:Qt.rgba(76/255,160/255,224/255,1) + property color lightest:Qt.rgba(96/255,171/255,228/255,1) + +} diff --git a/src/controls/FluColors.qml b/src/controls/FluColors.qml new file mode 100644 index 0000000..acabda0 --- /dev/null +++ b/src/controls/FluColors.qml @@ -0,0 +1,112 @@ +pragma Singleton + +import QtQuick 2.15 + +QtObject { + + property color _Black: Qt.rgba(0/255,0/255,0/255,1) + property color _White: Qt.rgba(255/255,255/255,255/255,1) + + property color _Grey10: Qt.rgba(250/255,249/255,248/255,1) + property color _Grey20: Qt.rgba(243/255,242/255,241/255,1) + property color _Grey30: Qt.rgba(237/255,235/255,233/255,1) + property color _Grey40: Qt.rgba(225/255,223/255,221/255,1) + property color _Grey50: Qt.rgba(210/255,208/255,206/255,1) + property color _Grey60: Qt.rgba(200/255,198/255,196/255,1) + property color _Grey70: Qt.rgba(190/255,187/255,184/255,1) + property color _Grey80: Qt.rgba(179/255,176/255,173/255,1) + property color _Grey90: Qt.rgba(161/255,159/255,157/255,1) + property color _Grey100: Qt.rgba(151/255,149/255,147/255,1) + property color _Grey110: Qt.rgba(138/255,136/255,134/255,1) + property color _Grey120: Qt.rgba(121/255,119/255,117/255,1) + property color _Grey130: Qt.rgba(96/255,94/255,92/255,1) + property color _Grey140: Qt.rgba(72/255,70/255,68/255,1) + property color _Grey150: Qt.rgba(59/255,58/255,57/255,1) + property color _Grey160: Qt.rgba(50/255,49/255,48/255,1) + property color _Grey170: Qt.rgba(41/255,40/255,39/255,1) + property color _Grey180: Qt.rgba(37/255,36/255,35/255,1) + property color _Grey190: Qt.rgba(32/255,31/255,30/255,1) + property color _Grey200: Qt.rgba(27/255,26/255,25/255,1) + 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{ + 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) + normal:Qt.rgba(255/255,235/255,59/255,1) + light:Qt.rgba(255/255,238/255,88/255,1) + lighter:Qt.rgba(255/255,241/255,118/255,1) + lightest:Qt.rgba(255/255,245/255,157/255,1) + } + + property FluColorSet _Orange:FluColorSet{ + 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) + normal:Qt.rgba(247/255,99/255,12/255,1) + light:Qt.rgba(248/255,122/255,48/255,1) + lighter:Qt.rgba(249/255,145/255,84/255,1) + lightest:Qt.rgba(250/255,158/255,104/255,1) + } + + property FluColorSet _Red:FluColorSet{ + 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) + normal:Qt.rgba(232/255,17/255,35/255,1) + light:Qt.rgba(236/255,64/255,79/255,1) + lighter:Qt.rgba(238/255,88/255,101/255,1) + lightest:Qt.rgba(240/255,107/255,118/255,1) + } + + property FluColorSet _Magenta:FluColorSet{ + 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) + normal:Qt.rgba(180/255,0/255,158/255,1) + light:Qt.rgba(195/255,51/255,177/255,1) + lighter:Qt.rgba(202/255,76/255,187/255,1) + lightest:Qt.rgba(208/255,96/255,194/255,1) + } + + property FluColorSet _Purple:FluColorSet{ + 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) + normal:Qt.rgba(116/255,77/255,169/255,1) + light:Qt.rgba(134/255,100/255,180/255,1) + lighter:Qt.rgba(157/255,130/255,194/255,1) + lightest:Qt.rgba(168/255,144/255,201/255,1) + } + + property FluColorSet _Blue:FluColorSet{ + 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) + normal:Qt.rgba(0/255,120/255,212/255,1) + light:Qt.rgba(38/255,140/255,218/255,1) + lighter:Qt.rgba(76/255,160/255,224/255,1) + lightest:Qt.rgba(96/255,171/255,228/255,1) + } + + property FluColorSet _Teal:FluColorSet{ + 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) + normal:Qt.rgba(0/255,178/255,148/255,1) + light:Qt.rgba(38/255,189/255,164/255,1) + lighter:Qt.rgba(76/255,201/255,180/255,1) + lightest:Qt.rgba(96/255,207/255,188/255,1) + } + + property FluColorSet _Green:FluColorSet{ + 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) + normal:Qt.rgba(16/255,124/255,16/255,1) + light:Qt.rgba(39/255,137/255,39/255,1) + lighter:Qt.rgba(75/255,156/255,75/255,1) + lightest:Qt.rgba(106/255,173/255,106/255,1) + } +} diff --git a/src/controls/FluFilledButton.qml b/src/controls/FluFilledButton.qml index 0e4cb72..9f1a5c1 100644 --- a/src/controls/FluFilledButton.qml +++ b/src/controls/FluFilledButton.qml @@ -19,12 +19,12 @@ Rectangle { if(disabled){ return Qt.rgba(199/255,199/255,199/255,1) } - return button_mouse.containsMouse ? Qt.rgba(74/255,149/255,207/255,1) : Qt.rgba(76/255,160/255,224/255,1) + return button_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter }else{ if(disabled){ return Qt.rgba(199/255,199/255,199/255,1) } - return button_mouse.containsMouse ? Qt.rgba(25/255,117/255,187/255,1) : Qt.rgba(0/255,102/255,180/255,1) + return button_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark } } width: button_text.implicitWidth diff --git a/src/controls/FluInfoBar.qml b/src/controls/FluInfoBar.qml index 919c329..08761cb 100644 --- a/src/controls/FluInfoBar.qml +++ b/src/controls/FluInfoBar.qml @@ -205,7 +205,7 @@ FluObject { 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); - case mcontrol.const_info: return Qt.rgba(76/255,160/255,224/255,1); + case mcontrol.const_info: return FluTheme.primaryColor.lighter; case mcontrol.const_error: return Qt.rgba(255/255,153/255,164/255,1); } return "#FFFFFF" diff --git a/src/controls/FluMultiLineTextBox.qml b/src/controls/FluMultiLineTextBox.qml index db43282..ded8085 100644 --- a/src/controls/FluMultiLineTextBox.qml +++ b/src/controls/FluMultiLineTextBox.qml @@ -10,9 +10,9 @@ TextArea{ selectByMouse: true selectionColor: { if(FluApp.isDark){ - return Qt.rgba(76/255,160/255,224/255,1) + return FluTheme.primaryColor.lighter }else{ - return Qt.rgba(0/255,102/255,180/255,1) + return FluTheme.primaryColor.dark } } background: FluTextBoxBackground{ diff --git a/src/controls/FluProgressBar.qml b/src/controls/FluProgressBar.qml index 70a6176..940fc22 100644 --- a/src/controls/FluProgressBar.qml +++ b/src/controls/FluProgressBar.qml @@ -27,7 +27,7 @@ FluRectangle { radius: 3 width: control.width*progress height: control.height - color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(0/255,102/255,180/255,1) + color:FluApp.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 96c1b5f..9a0dc4c 100644 --- a/src/controls/FluProgressRing.qml +++ b/src/controls/FluProgressRing.qml @@ -14,7 +14,7 @@ Rectangle { property real progress: 0.25 property bool indeterminate: true readonly property real radius2 : radius - linWidth/2 - property color primaryColor : FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(0/255,102/255,180/255,1) + property color primaryColor : FluApp.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark onProgressChanged: { canvas.requestPaint() diff --git a/src/controls/FluRadioButton.qml b/src/controls/FluRadioButton.qml index b198cde..2900077 100644 --- a/src/controls/FluRadioButton.qml +++ b/src/controls/FluRadioButton.qml @@ -55,10 +55,10 @@ Item { } if(checked){ if(FluApp.isDark){ - return Qt.rgba(76/255,164/255,224/255,1) + return FluTheme.primaryColor.lighter }else{ - return Qt.rgba(0/255,102/255,180/255,1) + return FluTheme.primaryColor.dark } }else{ if(FluApp.isDark){ diff --git a/src/controls/FluSlider.qml b/src/controls/FluSlider.qml index d482001..b776c9d 100644 --- a/src/controls/FluSlider.qml +++ b/src/controls/FluSlider.qml @@ -32,7 +32,7 @@ Item{ radius: 3 width: control.width*(value/100) height: control.height - color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) :Qt.rgba(0/255,102/255,180/255,1) + color:FluApp.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark } } @@ -50,7 +50,7 @@ Item{ width: dotSize/2 height: dotSize/2 radius: dotSize/4 - color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) :Qt.rgba(0/255,102/255,180/255,1) + color:FluApp.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/FluTextBox.qml b/src/controls/FluTextBox.qml index 72690cd..df6c727 100644 --- a/src/controls/FluTextBox.qml +++ b/src/controls/FluTextBox.qml @@ -8,9 +8,9 @@ TextField{ color: FluApp.isDark ? "#FFFFFF" : "#1A1A1A" selectionColor: { if(FluApp.isDark){ - return Qt.rgba(76/255,160/255,224/255,1) + return FluTheme.primaryColor.lighter }else{ - return Qt.rgba(0/255,102/255,180/255,1) + return FluTheme.primaryColor.dark } } selectByMouse: true diff --git a/src/controls/FluTextBoxBackground.qml b/src/controls/FluTextBoxBackground.qml index 7517a6d..9f76f47 100644 --- a/src/controls/FluTextBoxBackground.qml +++ b/src/controls/FluTextBoxBackground.qml @@ -29,9 +29,9 @@ Rectangle{ anchors.bottom: parent.bottom color: { if(FluApp.isDark){ - input.focus ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(166/255,166/255,166/255,1) + input.focus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1) }else{ - return input.focus ? Qt.rgba(0/255,102/255,180/255,1) : Qt.rgba(183/255,183/255,183/255,1) + return input.focus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1) } } Behavior on height{ diff --git a/src/controls/FluTextButton.qml b/src/controls/FluTextButton.qml index 3bfeb83..f99dac3 100644 --- a/src/controls/FluTextButton.qml +++ b/src/controls/FluTextButton.qml @@ -5,9 +5,9 @@ FluText { id:root color: { if(FluApp.isDark){ - return mouse_area.containsMouse?Qt.rgba(73/255,148/255,206/255,1):Qt.rgba(76/255,160/255,224/255,1) + return mouse_area.containsMouse?Qt.rgba(73/255,148/255,206/255,1):FluTheme.primaryColor.lighter } - return mouse_area.containsMouse?Qt.rgba(24/255,116/255,186/255,1):Qt.rgba(0/255,102/255,180/255,1) + return mouse_area.containsMouse?Qt.rgba(24/255,116/255,186/255,1):FluTheme.primaryColor.dark } signal clicked MouseArea{ diff --git a/src/controls/FluTheme.qml b/src/controls/FluTheme.qml new file mode 100644 index 0000000..6dfb552 --- /dev/null +++ b/src/controls/FluTheme.qml @@ -0,0 +1,10 @@ +pragma Singleton + +import QtQuick 2.15 + +QtObject { + + property FluColorSet primaryColor: FluColors._Teal + + +} diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml index 1c2fa7b..7203d6d 100644 --- a/src/controls/FluToggleSwitch.qml +++ b/src/controls/FluToggleSwitch.qml @@ -4,7 +4,6 @@ import FluentUI 1.0 Switch { id: root - property color checkedColor: "#0064B0" property var onClickFunc width: 40 implicitWidth: 40 @@ -18,7 +17,7 @@ Switch { color: { if(FluApp.isDark){ if(root.checked){ - return checkedColor + return FluTheme.primaryColor.dark } if(switch_mouse.containsMouse){ return "#3E3E3C" @@ -26,7 +25,7 @@ Switch { return "#323232" }else{ if(root.checked){ - return checkedColor + return FluTheme.primaryColor.dark } if(switch_mouse.containsMouse){ return "#F4F4F4" @@ -35,7 +34,7 @@ Switch { } } border.width: 1 - border.color: root.checked ? checkedColor : "#666666" + border.color: root.checked ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666" Rectangle { x: root.checked ? root.implicitWidth - width - 4 : 4 diff --git a/src/controls/FluWindow.qml b/src/controls/FluWindow.qml index 20a21ea..1ce9e5d 100644 --- a/src/controls/FluWindow.qml +++ b/src/controls/FluWindow.qml @@ -39,8 +39,13 @@ Item { } } - FluShadow{ - anchors.fill: container + + Rectangle{ + color:FluTheme.primaryColor.dark + border.width: 1 + anchors.fill: parent + radius: 4 + border.color:Qt.lighter(FluTheme.primaryColor.dark,1.3) } Rectangle{ diff --git a/src/controls/TFpsMonitor.qml b/src/controls/TFpsMonitor.qml index e114dbd..53abc4d 100644 --- a/src/controls/TFpsMonitor.qml +++ b/src/controls/TFpsMonitor.qml @@ -17,6 +17,7 @@ Item { Component{ id:contentComponent FluText{ + color:toou2d_fps.color text: " Avg " + fpsAvg + " | " + fps + " Fps"; } } diff --git a/src/res.qrc b/src/res.qrc index fd39bb5..57c11e0 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -32,5 +32,8 @@ controls/FluMenuItem.qml controls/FluShadow.qml controls/FluTextButton.qml + controls/FluColorSet.qml + controls/FluColors.qml + controls/FluTheme.qml