From 2a03f24941a174c90647924aa950b4ad5ed4f83a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?= Date: Thu, 7 Mar 2024 13:58:23 +0800 Subject: [PATCH] update --- example/qml-Qt6/page/T_StaggeredLayout.qml | 5 +- example/qml-Qt6/page/T_TabView.qml | 5 +- example/qml-Qt6/page/T_Theme.qml | 53 ++++- example/qml/page/T_StaggeredLayout.qml | 6 +- example/qml/page/T_TabView.qml | 5 +- example/qml/page/T_Theme.qml | 53 ++++- src/FluAccentColor.cpp | 4 + src/FluAccentColor.h | 27 +++ src/FluColorSet.cpp | 4 - src/FluColorSet.h | 26 --- src/FluColors.cpp | 196 ++++++++++-------- src/FluColors.h | 70 ++++--- src/FluTheme.cpp | 6 +- src/FluTheme.h | 4 +- src/FluentUI.cpp | 2 +- .../FluentUI/Controls/FluFilledButton.qml | 1 - .../FluentUI/Controls/FluToggleButton.qml | 46 ++-- .../FluentUI/Controls/FluFilledButton.qml | 1 - .../FluentUI/Controls/FluToggleButton.qml | 41 +++- 19 files changed, 338 insertions(+), 217 deletions(-) create mode 100644 src/FluAccentColor.cpp create mode 100644 src/FluAccentColor.h delete mode 100644 src/FluColorSet.cpp delete mode 100644 src/FluColorSet.h diff --git a/example/qml-Qt6/page/T_StaggeredLayout.qml b/example/qml-Qt6/page/T_StaggeredLayout.qml index fd1e98c6..a719d726 100644 --- a/example/qml-Qt6/page/T_StaggeredLayout.qml +++ b/example/qml-Qt6/page/T_StaggeredLayout.qml @@ -16,7 +16,7 @@ FluContentPage{ Component.onCompleted: { for(var i=0;i<=100;i++){ var item = {} - item.color = colors[rand(0,7)].dark + item.color = colors[rand(0,7)] item.height = rand(100,300) append(item) } @@ -39,7 +39,7 @@ FluContentPage{ model:list_model delegate: Rectangle{ height: model.height - color:model.color + color:model.color.normal FluText{ color:"#FFFFFF" text:model.index @@ -56,4 +56,3 @@ FluContentPage{ } } - diff --git a/example/qml-Qt6/page/T_TabView.qml b/example/qml-Qt6/page/T_TabView.qml index 93982504..ead55372 100644 --- a/example/qml-Qt6/page/T_TabView.qml +++ b/example/qml-Qt6/page/T_TabView.qml @@ -15,12 +15,12 @@ FluScrollablePage{ id:com_page Rectangle{ anchors.fill: parent - color: argument + color: argument.normal } } 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: { @@ -126,5 +126,4 @@ FluScrollablePage{ } ' } - } diff --git a/example/qml-Qt6/page/T_Theme.qml b/example/qml-Qt6/page/T_Theme.qml index ba7cd305..5846ea4f 100644 --- a/example/qml-Qt6/page/T_Theme.qml +++ b/example/qml-Qt6/page/T_Theme.qml @@ -7,32 +7,40 @@ import "../component" FluScrollablePage{ + property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] + id:root title:"Theme" FluArea{ Layout.fillWidth: true Layout.topMargin: 20 - height: 270 + Layout.preferredHeight: 340 paddings: 10 + ColumnLayout{ spacing:0 anchors{ left: parent.left } - RowLayout{ + FluText{ + text:"主题颜色" Layout.topMargin: 10 + } + RowLayout{ + Layout.topMargin: 5 Repeater{ - model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] - delegate: FluRectangle{ + model: root.colorData + delegate: Rectangle{ width: 42 height: 42 - radius: [4,4,4,4] + radius: 4 color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal + border.color: modelData.darkest FluIcon { anchors.centerIn: parent iconSource: FluentIcons.AcceptMedium 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) } MouseArea{ @@ -40,12 +48,41 @@ FluScrollablePage{ anchors.fill: parent hoverEnabled: true 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{ text:"夜间模式" Layout.topMargin: 20 @@ -88,7 +125,7 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true Layout.topMargin: -1 - code:'FluTheme.themeColor = FluColors.Orange + code:'FluTheme.accentColor = FluColors.Orange FluTheme.dark = true diff --git a/example/qml/page/T_StaggeredLayout.qml b/example/qml/page/T_StaggeredLayout.qml index 82855509..dfc5139e 100644 --- a/example/qml/page/T_StaggeredLayout.qml +++ b/example/qml/page/T_StaggeredLayout.qml @@ -11,13 +11,12 @@ FluContentPage{ property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] - ListModel{ id:list_model Component.onCompleted: { for(var i=0;i<=100;i++){ var item = {} - item.color = colors[rand(0,7)].dark + item.color = colors[rand(0,7)] item.height = rand(100,300) append(item) } @@ -40,7 +39,7 @@ FluContentPage{ model:list_model delegate: Rectangle{ height: model.height - color:model.color + color:model.color.normal FluText{ color:"#FFFFFF" text:model.index @@ -57,4 +56,3 @@ FluContentPage{ } } - diff --git a/example/qml/page/T_TabView.qml b/example/qml/page/T_TabView.qml index 67ac9419..2a7d1a82 100644 --- a/example/qml/page/T_TabView.qml +++ b/example/qml/page/T_TabView.qml @@ -15,12 +15,12 @@ FluScrollablePage{ id:com_page Rectangle{ anchors.fill: parent - color: argument + color: argument.normal } } 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: { @@ -126,5 +126,4 @@ FluScrollablePage{ } ' } - } diff --git a/example/qml/page/T_Theme.qml b/example/qml/page/T_Theme.qml index 67f4a987..915b5d64 100644 --- a/example/qml/page/T_Theme.qml +++ b/example/qml/page/T_Theme.qml @@ -7,32 +7,40 @@ import "../component" FluScrollablePage{ + property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] + id:root title:"Theme" FluArea{ Layout.fillWidth: true Layout.topMargin: 20 - height: 270 + Layout.preferredHeight: 340 paddings: 10 + ColumnLayout{ spacing:0 anchors{ left: parent.left } - RowLayout{ + FluText{ + text:"主题颜色" Layout.topMargin: 10 + } + RowLayout{ + Layout.topMargin: 5 Repeater{ - model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] - delegate: FluRectangle{ + model: root.colorData + delegate: Rectangle{ width: 42 height: 42 - radius: [4,4,4,4] + radius: 4 color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal + border.color: modelData.darkest FluIcon { anchors.centerIn: parent iconSource: FluentIcons.AcceptMedium 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) } MouseArea{ @@ -40,12 +48,41 @@ FluScrollablePage{ anchors.fill: parent hoverEnabled: true 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{ text:"夜间模式" Layout.topMargin: 20 @@ -88,7 +125,7 @@ FluScrollablePage{ CodeExpander{ Layout.fillWidth: true Layout.topMargin: -1 - code:'FluTheme.themeColor = FluColors.Orange + code:'FluTheme.accentColor = FluColors.Orange FluTheme.dark = true diff --git a/src/FluAccentColor.cpp b/src/FluAccentColor.cpp new file mode 100644 index 00000000..976b7912 --- /dev/null +++ b/src/FluAccentColor.cpp @@ -0,0 +1,4 @@ +#include "FluAccentColor.h" + +FluAccentColor::FluAccentColor(QObject *parent):QObject{parent}{ +} diff --git a/src/FluAccentColor.h b/src/FluAccentColor.h new file mode 100644 index 00000000..7ad043ea --- /dev/null +++ b/src/FluAccentColor.h @@ -0,0 +1,27 @@ +#ifndef FLUACCENTCOLOR_H +#define FLUACCENTCOLOR_H + +#include +#include +#include +#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 diff --git a/src/FluColorSet.cpp b/src/FluColorSet.cpp deleted file mode 100644 index be41fa50..00000000 --- a/src/FluColorSet.cpp +++ /dev/null @@ -1,4 +0,0 @@ -#include "FluColorSet.h" - -FluColorSet::FluColorSet(QObject *parent):QObject{parent}{ -} diff --git a/src/FluColorSet.h b/src/FluColorSet.h deleted file mode 100644 index 51f025e2..00000000 --- a/src/FluColorSet.h +++ /dev/null @@ -1,26 +0,0 @@ -#ifndef FLUCOLORSET_H -#define FLUCOLORSET_H - -#include -#include -#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 diff --git a/src/FluColors.cpp b/src/FluColors.cpp index 3e06ed4c..d7c79fc4 100644 --- a/src/FluColors.cpp +++ b/src/FluColors.cpp @@ -1,109 +1,127 @@ #include "FluColors.h" FluColors::FluColors(QObject *parent):QObject{parent}{ - Transparent("#00000000"); - 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"); + Transparent(QColor(0, 0, 0, 0)); + Black(QColor(0, 0, 0)); + White(QColor(255, 255, 255)); + Grey10(QColor(250, 249, 248)); + Grey20(QColor(243, 242, 241)); + Grey30(QColor(237, 235, 233)); + Grey40(QColor(225, 223, 221)); + Grey50(QColor(210, 208, 206)); + Grey60(QColor(200, 198, 196)); + Grey70(QColor(190, 185, 184)); + Grey80(QColor(179, 176, 173)); + Grey90(QColor(161, 159, 157)); + Grey100(QColor(151, 149, 146)); + Grey110(QColor(138, 136, 134)); + Grey120(QColor(121, 119, 117)); + Grey130(QColor(96, 94, 92)); + Grey140(QColor(72, 70, 68)); + Grey150(QColor(59, 58, 57)); + Grey160(QColor(50, 49, 48)); + Grey170(QColor(41, 40, 39)); + Grey180(QColor(37, 36, 35)); + Grey190(QColor(32, 31, 30)); + Grey200(QColor(27, 26, 25)); + Grey210(QColor(22, 21, 20)); + Grey220(QColor(17, 16, 15)); - FluColorSet *yellow = new FluColorSet(this); - yellow->darkest("#f9a825"); - yellow->darker("#fbc02d"); - yellow->dark("#fdd435"); - yellow->normal("#ffeb3b"); - yellow->light("#ffee58"); - yellow->lighter("#fff176"); - yellow->lightest("#fff59b"); + + FluAccentColor *yellow = new FluAccentColor(this); + yellow->darkest(QColor(249, 168, 37)); + yellow->darker(QColor(251, 192, 45)); + yellow->dark(QColor(253, 212, 53)); + yellow->normal(QColor(255, 235, 59)); + yellow->light(QColor(255, 238, 88)); + yellow->lighter(QColor(255, 241, 118)); + yellow->lightest(QColor(255, 245, 155)); Yellow(yellow); - FluColorSet *orange = new FluColorSet(this); - orange->darkest("#993d07"); - orange->darker("#ac4408"); - orange->dark("#d1580a"); - orange->normal("#f7630c"); - orange->light("#f87a30"); - orange->lighter("#f99154"); - orange->lightest("#fac06a"); + FluAccentColor *orange = new FluAccentColor(this); + orange->darkest(QColor(153, 61, 7)); + orange->darker(QColor(172, 68, 8)); + orange->dark(QColor(209, 88, 10)); + orange->normal(QColor(247, 99, 12)); + orange->light(QColor(248, 122, 48)); + orange->lighter(QColor(249, 145, 84)); + orange->lightest(QColor(250, 192, 106)); Orange(orange); - FluColorSet *red = new FluColorSet(this); - red->darkest("#8f0a15"); - red->darker("#a20b18"); - red->dark("#b90d1c"); - red->normal("#e81123"); - red->light("#ec404f"); - red->lighter("#ee5865"); - red->lightest("#f06b76"); + FluAccentColor *red = new FluAccentColor(this); + red->darkest(QColor(143, 10, 21)); + red->darker(QColor(162, 11, 24)); + red->dark(QColor(185, 13, 28)); + red->normal(QColor(232, 17, 35)); + red->light(QColor(236, 64, 79)); + red->lighter(QColor(238, 88, 101)); + red->lightest(QColor(240, 107, 118)); Red(red); - FluColorSet *magenta = new FluColorSet(this); - magenta->darkest("#6f004f"); - magenta->darker("#a0076c"); - magenta->dark("#b50d7d"); - magenta->normal("#e3008c"); - magenta->light("#ea4da8"); - magenta->lighter("#ee6ec1"); - magenta->lightest("#f18cd5"); + FluAccentColor *magenta = new FluAccentColor(this); + magenta->darkest(QColor(111, 0, 79)); + magenta->darker(QColor(160, 7, 108)); + magenta->dark(QColor(181, 13, 125)); + magenta->normal(QColor(227, 0, 140)); + magenta->light(QColor(234, 77, 168)); + magenta->lighter(QColor(238, 110, 193)); + magenta->lightest(QColor(241, 140, 213)); Magenta(magenta); - FluColorSet *purple = new FluColorSet(this); - purple->darkest("#2c0f76"); - purple->darker("#3d0f99"); - purple->dark("#4e11ae"); - purple->normal("#68217a"); - purple->light("#7b4c9d"); - purple->lighter("#8d6ebd"); - purple->lightest("#9e8ed9"); + FluAccentColor *purple = new FluAccentColor(this); + purple->darkest(QColor(44, 15, 118)); + purple->darker(QColor(61, 15, 153)); + purple->dark(QColor(78, 17, 174)); + purple->normal(QColor(104, 33, 122)); + purple->light(QColor(123, 76, 157)); + purple->lighter(QColor(141, 110, 189)); + purple->lightest(QColor(158, 142, 217)); Purple(purple); - FluColorSet *blue = new FluColorSet(this); - blue->darkest("#004A83"); - blue->darker("#005494"); - blue->dark("#0066B4"); - blue->normal("#0078D4"); - blue->light("#268CDC"); - blue->lighter("#4CA0E0"); - blue->lightest("#60ABE4"); + FluAccentColor *blue = new FluAccentColor(this); + blue->darkest(QColor(0, 74, 131)); + blue->darker(QColor(0, 84, 148)); + blue->dark(QColor(0, 102, 180)); + blue->normal(QColor(0, 120, 212)); + blue->light(QColor(38, 140, 220)); + blue->lighter(QColor(76, 160, 224)); + blue->lightest(QColor(96, 171, 228)); Blue(blue); - FluColorSet *teal = new FluColorSet(this); - teal->darkest("#006E5B"); - teal->darker("#007C67"); - teal->dark("#00977D"); - teal->normal("#00B294"); - teal->light("#26BDA4"); - teal->lighter("#4DC9B4"); - teal->lightest("#60CFBC"); + FluAccentColor *teal = new FluAccentColor(this); + teal->darkest(QColor(0, 110, 91)); + teal->darker(QColor(0, 124, 103)); + teal->dark(QColor(0, 151, 125)); + teal->normal(QColor(0, 178, 148)); + teal->light(QColor(38, 189, 164)); + teal->lighter(QColor(77, 201, 180)); + teal->lightest(QColor(96, 207, 188)); Teal(teal); - FluColorSet *green = new FluColorSet(this); - green->darkest("#094C09"); - green->darker("#0C5D0C"); - green->dark("#0E6F0E"); - green->normal("#107C10"); - green->light("#278939"); - green->lighter("#4C9C4C"); - green->lightest("#6AAD6A"); + FluAccentColor *green = new FluAccentColor(this); + green->darkest(QColor(9, 76, 9)); + green->darker(QColor(12, 93, 12)); + green->dark(QColor(14, 111, 14)); + green->normal(QColor(16, 124, 16)); + green->light(QColor(39, 137, 57)); + green->lighter(QColor(76, 156, 76)); + green->lightest(QColor(106, 173, 106)); 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)); +} diff --git a/src/FluColors.h b/src/FluColors.h index 9b935fc7..fa53fa60 100644 --- a/src/FluColors.h +++ b/src/FluColors.h @@ -3,7 +3,7 @@ #include #include -#include "FluColorSet.h" +#include "FluAccentColor.h" #include "stdafx.h" #include "singleton.h" @@ -13,45 +13,47 @@ class FluColors : public QObject { Q_OBJECT - Q_PROPERTY_AUTO(QString,Transparent); - 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); + Q_PROPERTY_AUTO(QColor,Transparent); + Q_PROPERTY_AUTO(QColor,Black); + Q_PROPERTY_AUTO(QColor,White); + Q_PROPERTY_AUTO(QColor,Grey10); + Q_PROPERTY_AUTO(QColor,Grey20); + Q_PROPERTY_AUTO(QColor,Grey30); + Q_PROPERTY_AUTO(QColor,Grey40); + Q_PROPERTY_AUTO(QColor,Grey50); + Q_PROPERTY_AUTO(QColor,Grey60); + Q_PROPERTY_AUTO(QColor,Grey70); + Q_PROPERTY_AUTO(QColor,Grey80); + Q_PROPERTY_AUTO(QColor,Grey90); + Q_PROPERTY_AUTO(QColor,Grey100); + Q_PROPERTY_AUTO(QColor,Grey110); + Q_PROPERTY_AUTO(QColor,Grey120); + Q_PROPERTY_AUTO(QColor,Grey130); + Q_PROPERTY_AUTO(QColor,Grey140); + Q_PROPERTY_AUTO(QColor,Grey150); + Q_PROPERTY_AUTO(QColor,Grey160); + Q_PROPERTY_AUTO(QColor,Grey170); + Q_PROPERTY_AUTO(QColor,Grey180); + Q_PROPERTY_AUTO(QColor,Grey190); + Q_PROPERTY_AUTO(QColor,Grey200); + Q_PROPERTY_AUTO(QColor,Grey210); + Q_PROPERTY_AUTO(QColor,Grey220); + Q_PROPERTY_AUTO(FluAccentColor*,Yellow); + Q_PROPERTY_AUTO(FluAccentColor*,Orange); + Q_PROPERTY_AUTO(FluAccentColor*,Red); + Q_PROPERTY_AUTO(FluAccentColor*,Magenta); + Q_PROPERTY_AUTO(FluAccentColor*,Purple); + Q_PROPERTY_AUTO(FluAccentColor*,Blue); + Q_PROPERTY_AUTO(FluAccentColor*,Teal); + Q_PROPERTY_AUTO(FluAccentColor*,Green); QML_NAMED_ELEMENT(FluColors) QML_SINGLETON private: explicit FluColors(QObject *parent = nullptr); + QColor withOpacity(QColor color,qreal opacity); public: SINGLETON(FluColors) + Q_INVOKABLE FluAccentColor* createAccentColor(QColor primaryColor); static FluColors *create(QQmlEngine *qmlEngine, QJSEngine *jsEngine){return getInstance();} }; diff --git a/src/FluTheme.cpp b/src/FluTheme.cpp index c11607a9..e967dc90 100644 --- a/src/FluTheme.cpp +++ b/src/FluTheme.cpp @@ -17,8 +17,8 @@ FluTheme::FluTheme(QObject *parent):QObject{parent}{ Q_EMIT darkChanged(); }); connect(this,&FluTheme::darkChanged,this,[=]{refreshColors();}); - connect(this,&FluTheme::themeColorChanged,this,[=]{refreshColors();}); - themeColor(FluColors::getInstance()->Blue()); + connect(this,&FluTheme::accentColorChanged,this,[=]{refreshColors();}); + accentColor(FluColors::getInstance()->Blue()); darkMode(FluThemeType::DarkMode::Light); nativeText(false); enableAnimation(true); @@ -28,7 +28,7 @@ FluTheme::FluTheme(QObject *parent):QObject{parent}{ void FluTheme::refreshColors(){ 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)); dividerColor(isDark ? QColor(80,80,80,255) : QColor(210,210,210,255)); windowBackgroundColor(isDark ? QColor(32,32,32,255) : QColor(237,237,237,255)); diff --git a/src/FluTheme.h b/src/FluTheme.h index a160c89c..1c9cabee 100644 --- a/src/FluTheme.h +++ b/src/FluTheme.h @@ -6,7 +6,7 @@ #include #include #include -#include "FluColorSet.h" +#include "FluAccentColor.h" #include "stdafx.h" #include "singleton.h" @@ -17,7 +17,7 @@ class FluTheme : public QObject { Q_OBJECT 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,backgroundColor); Q_PROPERTY_AUTO(QColor,dividerColor); diff --git a/src/FluentUI.cpp b/src/FluentUI.cpp index 308d8b7c..8b36a6cd 100644 --- a/src/FluentUI.cpp +++ b/src/FluentUI.cpp @@ -31,7 +31,7 @@ void FluentUI::registerTypes(const char *uri){ qmlRegisterType(uri,major,minor,"FluQrCodeItem"); qmlRegisterType(uri,major,minor,"FluCaptcha"); qmlRegisterType(uri,major,minor,"FluWatermark"); - qmlRegisterType(uri,major,minor,"FluColorSet"); + qmlRegisterType(uri,major,minor,"FluAccentColor"); qmlRegisterType(uri,major,minor,"FluEvent"); qmlRegisterType(uri,major,minor,"FluViewModel"); qmlRegisterType(uri,major,minor,"FluTreeModel"); diff --git a/src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml b/src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml index 25702ebf..2827fd60 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml @@ -60,7 +60,6 @@ Button { return hovered ? hoverColor :normalColor } } - } contentItem: FluText { text: control.text diff --git a/src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml b/src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml index 900bf169..4013eb2c 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml @@ -7,9 +7,9 @@ Button { property string contentDescription: "" property color normalColor: { if(checked){ - return FluTheme.primaryColor + return FluTheme.primaryColor }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: { @@ -40,31 +40,45 @@ Button { verticalPadding: 0 horizontalPadding:12 onClicked: clickListener() - onCheckableChanged: { - if(checkable){ - checkable = false - } - } background: Rectangle{ implicitWidth: 28 implicitHeight: 28 radius: 4 - border.color: FluTheme.dark ? "#505050" : "#DFDFDF" - border.width: checked ? 0 : 1 FluFocusRectangle{ visible: control.activeFocus radius:4 } - color:{ - if(!enabled){ - return disableColor + gradient: Gradient { + GradientStop { position: 0.33; color: control.normalColor } + 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){ - if(pressed){ - return pressedColor + color:{ + if(!enabled){ + 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 { diff --git a/src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml b/src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml index edc889b9..d95b64cc 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml @@ -61,7 +61,6 @@ Button { return hovered ? hoverColor :normalColor } } - } contentItem: FluText { text: control.text diff --git a/src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml b/src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml index 078827c1..83b1ba05 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml @@ -8,9 +8,9 @@ Button { property string contentDescription: "" property color normalColor: { if(checked){ - return FluTheme.primaryColor + return FluTheme.primaryColor }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: { @@ -45,22 +45,41 @@ Button { implicitWidth: 28 implicitHeight: 28 radius: 4 - border.color: FluTheme.dark ? "#505050" : "#DFDFDF" - border.width: checked ? 0 : 1 FluFocusRectangle{ visible: control.activeFocus radius:4 } - color:{ - if(!enabled){ - return disableColor + gradient: Gradient { + GradientStop { position: 0.33; color: control.normalColor } + 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){ - if(pressed){ - return pressedColor + color:{ + if(!enabled){ + 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 {