mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-26 05:17:05 +08:00
update
This commit is contained in:
朱子楚\zhuzi
parent
723c2a864a
commit
2a03f24941
@ -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{
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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{
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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{
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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{
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
4
src/FluAccentColor.cpp
Normal file
4
src/FluAccentColor.cpp
Normal file
@ -0,0 +1,4 @@
|
||||
#include "FluAccentColor.h"
|
||||
|
||||
FluAccentColor::FluAccentColor(QObject *parent):QObject{parent}{
|
||||
}
|
||||
27
src/FluAccentColor.h
Normal file
27
src/FluAccentColor.h
Normal file
@ -0,0 +1,27 @@
|
||||
#ifndef FLUACCENTCOLOR_H
|
||||
#define FLUACCENTCOLOR_H
|
||||
|
||||
#include <QObject>
|
||||
#include <QtQml/qqml.h>
|
||||
#include <QColor>
|
||||
#include "stdafx.h"
|
||||
|
||||
/**
|
||||
* @brief The FluAccentColor class
|
||||
*/
|
||||
class FluAccentColor : public QObject
|
||||
{
|
||||
Q_OBJECT
|
||||
Q_PROPERTY_AUTO(QColor,darkest)
|
||||
Q_PROPERTY_AUTO(QColor,darker)
|
||||
Q_PROPERTY_AUTO(QColor,dark)
|
||||
Q_PROPERTY_AUTO(QColor,normal)
|
||||
Q_PROPERTY_AUTO(QColor,light)
|
||||
Q_PROPERTY_AUTO(QColor,lighter)
|
||||
Q_PROPERTY_AUTO(QColor,lightest)
|
||||
QML_NAMED_ELEMENT(FluAccentColor)
|
||||
public:
|
||||
explicit FluAccentColor(QObject *parent = nullptr);
|
||||
};
|
||||
|
||||
#endif // FLUACCENTCOLOR_H
|
||||
@ -1,4 +0,0 @@
|
||||
#include "FluColorSet.h"
|
||||
|
||||
FluColorSet::FluColorSet(QObject *parent):QObject{parent}{
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
#ifndef FLUCOLORSET_H
|
||||
#define FLUCOLORSET_H
|
||||
|
||||
#include <QObject>
|
||||
#include <QtQml/qqml.h>
|
||||
#include "stdafx.h"
|
||||
|
||||
/**
|
||||
* @brief The FluColorSet class
|
||||
*/
|
||||
class FluColorSet : public QObject
|
||||
{
|
||||
Q_OBJECT
|
||||
Q_PROPERTY_AUTO(QString,darkest)
|
||||
Q_PROPERTY_AUTO(QString,darker)
|
||||
Q_PROPERTY_AUTO(QString,dark)
|
||||
Q_PROPERTY_AUTO(QString,normal)
|
||||
Q_PROPERTY_AUTO(QString,light)
|
||||
Q_PROPERTY_AUTO(QString,lighter)
|
||||
Q_PROPERTY_AUTO(QString,lightest)
|
||||
QML_NAMED_ELEMENT(FluColorSet)
|
||||
public:
|
||||
explicit FluColorSet(QObject *parent = nullptr);
|
||||
};
|
||||
|
||||
#endif // FLUCOLORSET_H
|
||||
@ -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));
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
#include <QObject>
|
||||
#include <QtQml/qqml.h>
|
||||
#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();}
|
||||
};
|
||||
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
#include <QJsonArray>
|
||||
#include <QJsonObject>
|
||||
#include <QColor>
|
||||
#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);
|
||||
|
||||
@ -31,7 +31,7 @@ void FluentUI::registerTypes(const char *uri){
|
||||
qmlRegisterType<FluQrCodeItem>(uri,major,minor,"FluQrCodeItem");
|
||||
qmlRegisterType<FluCaptcha>(uri,major,minor,"FluCaptcha");
|
||||
qmlRegisterType<FluWatermark>(uri,major,minor,"FluWatermark");
|
||||
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
|
||||
qmlRegisterType<FluAccentColor>(uri,major,minor,"FluAccentColor");
|
||||
qmlRegisterType<FluEvent>(uri,major,minor,"FluEvent");
|
||||
qmlRegisterType<FluViewModel>(uri,major,minor,"FluViewModel");
|
||||
qmlRegisterType<FluTreeModel>(uri,major,minor,"FluTreeModel");
|
||||
|
||||
@ -60,7 +60,6 @@ Button {
|
||||
return hovered ? hoverColor :normalColor
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
contentItem: FluText {
|
||||
text: control.text
|
||||
|
||||
@ -40,21 +40,27 @@ 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
|
||||
}
|
||||
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
|
||||
}
|
||||
color:{
|
||||
if(!enabled){
|
||||
return disableColor
|
||||
@ -67,6 +73,14 @@ Button {
|
||||
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 {
|
||||
text: control.text
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
||||
@ -61,7 +61,6 @@ Button {
|
||||
return hovered ? hoverColor :normalColor
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
contentItem: FluText {
|
||||
text: control.text
|
||||
|
||||
@ -45,12 +45,23 @@ Button {
|
||||
implicitWidth: 28
|
||||
implicitHeight: 28
|
||||
radius: 4
|
||||
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
|
||||
border.width: checked ? 0 : 1
|
||||
FluFocusRectangle{
|
||||
visible: control.activeFocus
|
||||
radius:4
|
||||
}
|
||||
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
|
||||
}
|
||||
color:{
|
||||
if(!enabled){
|
||||
return disableColor
|
||||
@ -63,6 +74,14 @@ Button {
|
||||
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 {
|
||||
text: control.text
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
||||
Loading…
Reference in New Issue
Block a user