amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-30 07:03:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2023-03-28 21:37:10 +08:00
parent b70a982586
commit a298f43388
46 changed files with 191 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

3
example/App.qml
View File

@ -10,7 +10,8 @@ Window {
color: "#00000000" color: "#00000000"
Component.onCompleted: { Component.onCompleted: {
FluApp.init(app,properties) FluApp.init(app,properties)
FluTheme.isDark = false FluTheme.frameless = ("windows" === Qt.platform.os)
FluTheme.dark = false
FluApp.routes = { FluApp.routes = {
"/":"qrc:/page/MainPage.qml", "/":"qrc:/page/MainPage.qml",
"/about":"qrc:/page/AboutPage.qml", "/about":"qrc:/page/AboutPage.qml",

10
example/T_Theme.qml
View File

@ -26,7 +26,7 @@ FluScrollablePage{
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 15
visible: modelData === FluTheme.primaryColor visible: modelData === FluTheme.primaryColor
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
} }
MouseArea{ MouseArea{
id:mouse_item id:mouse_item
@ -44,9 +44,9 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
} }
FluToggleSwitch{ FluToggleSwitch{
selected: FluTheme.isDark selected: FluTheme.dark
clickFunc:function(){ clickFunc:function(){
FluTheme.isDark = !FluTheme.isDark FluTheme.dark = !FluTheme.dark
} }
} }
FluText{ FluText{
@ -54,9 +54,9 @@ FluScrollablePage{
Layout.topMargin: 20 Layout.topMargin: 20
} }
FluToggleSwitch{ FluToggleSwitch{
selected: FluTheme.isNativeText selected: FluTheme.nativeText
clickFunc:function(){ clickFunc:function(){
FluTheme.isNativeText = !FluTheme.isNativeText FluTheme.nativeText = !FluTheme.nativeText
} }
} }
} }

4
example/page/ChatPage.qml
View File

@ -57,7 +57,7 @@ FluWindow {
selectedTextColor: Qt.rgba(51,153,255,1) selectedTextColor: Qt.rgba(51,153,255,1)
color:FluColors.Black color:FluColors.Black
selectionColor: { selectionColor: {
if(FluTheme.isDark){ if(FluTheme.dark){
return FluTheme.primaryColor.lighter return FluTheme.primaryColor.lighter
}else{ }else{
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
@ -82,7 +82,7 @@ FluWindow {
bottom: layout_bottom.top bottom: layout_bottom.top
margins: 10 margins: 10
} }
color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(245/255,245/255,245/255,1) color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(245/255,245/255,245/255,1)
ListView{ ListView{
id:list_message id:list_message
anchors.fill: parent anchors.fill: parent

8
src/FluTheme.cpp
View File

@ -16,8 +16,8 @@ FluTheme::FluTheme(QObject *parent)
: QObject{parent} : QObject{parent}
{ {
primaryColor(FluColors::getInstance()->Blue()); primaryColor(FluColors::getInstance()->Blue());
textSize(14); textSize(13);
isNativeText(false); nativeText(false);
isFrameless(true); frameless(true);
isDark(false); dark(false);
} }

6
src/FluTheme.h
View File

@ -9,9 +9,9 @@ class FluTheme : public QObject
{ {
Q_OBJECT Q_OBJECT
Q_PROPERTY_AUTO(FluColorSet*,primaryColor) Q_PROPERTY_AUTO(FluColorSet*,primaryColor)
Q_PROPERTY_AUTO(bool,isFrameless); Q_PROPERTY_AUTO(bool,frameless);
Q_PROPERTY_AUTO(bool,isDark); Q_PROPERTY_AUTO(bool,dark);
Q_PROPERTY_AUTO(bool,isNativeText); Q_PROPERTY_AUTO(bool,nativeText);
Q_PROPERTY_AUTO(int,textSize); Q_PROPERTY_AUTO(int,textSize);
public: public:
explicit FluTheme(QObject *parent = nullptr); explicit FluTheme(QObject *parent = nullptr);

6
src/FramelessView_unix.cpp
View File

@ -16,7 +16,9 @@ public:
FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessViewPrivate) FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessViewPrivate)
{ {
if(FluTheme::getInstance()->frameless()){
setFlags( Qt::Window | Qt::FramelessWindowHint | Qt::WindowTitleHint | Qt::WindowSystemMenuHint); setFlags( Qt::Window | Qt::FramelessWindowHint | Qt::WindowTitleHint | Qt::WindowSystemMenuHint);
}
setResizeMode(SizeRootObjectToView); setResizeMode(SizeRootObjectToView);
setIsMax(windowState() == Qt::WindowMaximized); setIsMax(windowState() == Qt::WindowMaximized);
setIsFull(windowState() == Qt::WindowFullScreen); setIsFull(windowState() == Qt::WindowFullScreen);
@ -25,6 +27,10 @@ FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessVi
setIsMax(windowState() == Qt::WindowMaximized); setIsMax(windowState() == Qt::WindowMaximized);
setIsFull(windowState() == Qt::WindowFullScreen); setIsFull(windowState() == Qt::WindowFullScreen);
}); });
connect(FluTheme::getInstance(),&FluTheme::framelessChanged,this,[=](){
setFlag(Qt::Window,false);
setFlag(Qt::Window,true);
});
} }
FramelessView::~FramelessView() FramelessView::~FramelessView()

23
src/FramelessView_win.cpp
View File

@ -19,7 +19,10 @@ static bool isFullWin(QQuickView* win)
{ {
return win->windowState() == Qt::WindowFullScreen; return win->windowState() == Qt::WindowFullScreen;
} }
static bool isFixWin(QQuickView* win)
{
return win->minimumWidth() == win->maximumWidth() && win->minimumHeight() == win->maximumHeight();
}
static long hitTest(RECT winrect, long x, long y, int borderWidth) static long hitTest(RECT winrect, long x, long y, int borderWidth)
{ {
if ((x >= winrect.left) && (x < winrect.left + borderWidth) && (y >= winrect.top) && (y < winrect.top + borderWidth)) if ((x >= winrect.left) && (x < winrect.left + borderWidth) && (y >= winrect.top) && (y < winrect.top + borderWidth))
@ -72,15 +75,21 @@ public:
FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessViewPrivate) FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessViewPrivate)
{ {
if(FluTheme::getInstance()->frameless()){
setFlag(Qt::FramelessWindowHint,true); setFlag(Qt::FramelessWindowHint,true);
}
setResizeMode(SizeRootObjectToView); setResizeMode(SizeRootObjectToView);
setIsMax(windowState() == Qt::WindowMaximized); setIsMax(windowState() == Qt::WindowMaximized);
setIsFull(windowState() == Qt::WindowFullScreen); setIsFull(windowState() == Qt::WindowFullScreen);
connect(this, &QWindow::windowStateChanged, this, [&](Qt::WindowState state) { connect(this, &QWindow::windowStateChanged, this, [=](Qt::WindowState state) {
(void)state; (void)state;
setIsMax(windowState() == Qt::WindowMaximized); setIsMax(windowState() == Qt::WindowMaximized);
setIsFull(windowState() == Qt::WindowFullScreen); setIsFull(windowState() == Qt::WindowFullScreen);
}); });
connect(FluTheme::getInstance(),&FluTheme::framelessChanged,this,[=](){
setFlag(Qt::Window,false);
setFlag(Qt::Window,true);
});
} }
FramelessView::~FramelessView() FramelessView::~FramelessView()
@ -92,8 +101,10 @@ void FramelessView::showEvent(QShowEvent *e)
{ {
static const MARGINS shadow_state[2] { { 0, 0, 0, 0 }, { 1, 1, 1, 1 } }; static const MARGINS shadow_state[2] { { 0, 0, 0, 0 }, { 1, 1, 1, 1 } };
::DwmExtendFrameIntoClientArea((HWND)(winId()), &shadow_state[true]); ::DwmExtendFrameIntoClientArea((HWND)(winId()), &shadow_state[true]);
Super::showEvent(e); if(FluTheme::getInstance()->frameless()){
setFlag(Qt::FramelessWindowHint,false); setFlag(Qt::FramelessWindowHint,false);
}
Super::showEvent(e);
} }
QRect FramelessView::calcCenterGeo(const QRect &screenGeo, const QSize &normalSize) QRect FramelessView::calcCenterGeo(const QRect &screenGeo, const QSize &normalSize)
@ -177,14 +188,14 @@ bool FramelessView::nativeEvent(const QByteArray &eventType, void *message, long
{ {
return false; return false;
} }
if (msg->message == WM_NCHITTEST) if (msg->message == WM_NCHITTEST && FluTheme::getInstance()->frameless())
{ {
RECT winrect; RECT winrect;
GetWindowRect(HWND(winId()), &winrect); GetWindowRect(HWND(winId()), &winrect);
long x = GET_X_LPARAM(msg->lParam); long x = GET_X_LPARAM(msg->lParam);
long y = GET_Y_LPARAM(msg->lParam); long y = GET_Y_LPARAM(msg->lParam);
*result = 0; *result = 0;
if (!isMaxWin(this) && !isFullWin(this)) if (!isMaxWin(this) && !isFullWin(this) && !isFixWin(this))
{ {
*result = hitTest(winrect, x, y, 4); *result = hitTest(winrect, x, y, 4);
if (0 != *result) if (0 != *result)
@ -192,7 +203,7 @@ bool FramelessView::nativeEvent(const QByteArray &eventType, void *message, long
return true; return true;
} }
} }
}else if (msg->message == WM_NCCALCSIZE) }else if (msg->message == WM_NCCALCSIZE && FluTheme::getInstance()->frameless())
{ {
const auto mode = static_cast<BOOL>(msg->wParam); const auto mode = static_cast<BOOL>(msg->wParam);
const auto clientRect = mode ? &(reinterpret_cast<LPNCCALCSIZE_PARAMS>(msg->lParam)->rgrc[0]) : reinterpret_cast<LPRECT>(msg->lParam); const auto clientRect = mode ? &(reinterpret_cast<LPNCCALCSIZE_PARAMS>(msg->lParam)->rgrc[0]) : reinterpret_cast<LPRECT>(msg->lParam);

14
src/controls/FluAppBar.qml
View File

@ -7,11 +7,11 @@ import FluentUI 1.0
Rectangle{ Rectangle{
property string title: "" property string title: ""
property color textColor: FluTheme.isDark ? "#FFFFFF" : "#000000" property color textColor: FluTheme.dark ? "#FFFFFF" : "#000000"
property bool showDark: false property bool showDark: false
property bool showFps: false property bool showFps: false
property var window: Window.window property var window: Window.window
property color borerlessColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property bool resizable: { property bool resizable: {
if(window == null){ if(window == null){
return false return false
@ -21,7 +21,7 @@ Rectangle{
id:root id:root
color: Qt.rgba(0,0,0,0) color: Qt.rgba(0,0,0,0)
visible: FluTheme.isFrameless visible: FluTheme.frameless
height: visible ? 30 : 0 height: visible ? 30 : 0
width: { width: {
if(parent==null) if(parent==null)
@ -78,9 +78,9 @@ Rectangle{
fontStyle: FluText.Body fontStyle: FluText.Body
} }
FluToggleSwitch{ FluToggleSwitch{
selected: FluTheme.isDark selected: FluTheme.dark
clickFunc:function(){ clickFunc:function(){
FluTheme.isDark = !FluTheme.isDark FluTheme.dark = !FluTheme.dark
} }
} }
} }
@ -95,7 +95,7 @@ Rectangle{
radius: 0 radius: 0
textColor: root.textColor textColor: root.textColor
color:{ color:{
if(FluTheme.isDark){ if(FluTheme.dark){
if(hovered){ if(hovered){
return Qt.rgba(1,1,1,0.06) return Qt.rgba(1,1,1,0.06)
} }
@ -121,7 +121,7 @@ Rectangle{
} }
iconSource : isRestore ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize iconSource : isRestore ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
color:{ color:{
if(FluTheme.isDark){ if(FluTheme.dark){
if(hovered){ if(hovered){
return Qt.rgba(1,1,1,0.06) return Qt.rgba(1,1,1,0.06)
} }

4
src/controls/FluArea.qml
View File

@ -11,8 +11,8 @@ Rectangle {
property int bottomPadding : 0 property int bottomPadding : 0
radius: 4 radius: 4
color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1 border.width: 1
implicitHeight: height implicitHeight: height
implicitWidth: width implicitWidth: width

22
src/controls/FluAutoSuggestBox.qml
View File

@ -16,26 +16,26 @@ TextField{
enabled: !disabled enabled: !disabled
color: { color: {
if(disabled){ if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
} }
return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) return FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
} }
selectionColor: { selectionColor: {
if(FluTheme.isDark){ if(FluTheme.dark){
return FluTheme.primaryColor.lighter return FluTheme.primaryColor.lighter
}else{ }else{
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
} }
} }
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
placeholderTextColor: { placeholderTextColor: {
if(disabled){ if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
} }
if(focus){ if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) return FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
} }
return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) return FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
} }
rightPadding: icon_right.visible ? 50 : 30 rightPadding: icon_right.visible ? 50 : 30
selectByMouse: true selectByMouse: true
@ -163,7 +163,7 @@ TextField{
FluShadow{ FluShadow{
radius: 4 radius: 4
} }
color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
height: 38*Math.min(Math.max(list_view.count,1),8) height: 38*Math.min(Math.max(list_view.count,1),8)
ListView{ ListView{
id:list_view id:list_view
@ -192,12 +192,12 @@ TextField{
background: Rectangle{ background: Rectangle{
color: { color: {
if(list_view.currentIndex === index){ if(list_view.currentIndex === index){
return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
} }
if(hovered){ if(hovered){
return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
} }
return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
} }
MouseArea{ MouseArea{
id:mouse_area id:mouse_area

10
src/controls/FluButton.qml
View File

@ -5,9 +5,9 @@ import FluentUI 1.0
Button { Button {
property bool disabled: false property bool disabled: false
property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
id: control id: control
topPadding:5 topPadding:5
@ -20,7 +20,7 @@ Button {
Keys.onSpacePressed: control.visualFocus&&clicked() Keys.onSpacePressed: control.visualFocus&&clicked()
background: Rectangle{ background: Rectangle{
border.color: FluTheme.isDark ? "#505050" : "#DFDFDF" border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: 1 border.width: 1
radius: 4 radius: 4
FluFocusRectangle{ FluFocusRectangle{
@ -39,7 +39,7 @@ Button {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: { color: {
if(FluTheme.isDark){ if(FluTheme.dark){
if(disabled){ if(disabled){
return Qt.rgba(131/255,131/255,131/255,1) return Qt.rgba(131/255,131/255,131/255,1)
} }

6
src/controls/FluCalendarPicker.qml
View File

@ -6,9 +6,9 @@ import FluentUI 1.0
Rectangle { Rectangle {
property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1) property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property var window : Window.window property var window : Window.window
id:root id:root

14
src/controls/FluCalendarView.qml
View File

@ -55,7 +55,7 @@ Item {
radius: 4 radius: 4
anchors.centerIn: parent anchors.centerIn: parent
color:{ color:{
if(FluTheme.isDark){ if(FluTheme.dark){
if(item_control.hovered){ if(item_control.hovered){
return Qt.rgba(1,1,1,0.05) return Qt.rgba(1,1,1,0.05)
} }
@ -85,7 +85,7 @@ Item {
return "#FFFFFF" return "#FFFFFF"
} }
if(isDecade){ if(isDecade){
return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
} }
return Qt.rgba(150/255,150/255,150/255,1) return Qt.rgba(150/255,150/255,150/255,1)
} }
@ -115,7 +115,7 @@ Item {
radius: 4 radius: 4
anchors.centerIn: parent anchors.centerIn: parent
color:{ color:{
if(FluTheme.isDark){ if(FluTheme.dark){
if(item_control.hovered){ if(item_control.hovered){
return Qt.rgba(1,1,1,0.05) return Qt.rgba(1,1,1,0.05)
} }
@ -145,7 +145,7 @@ Item {
return "#FFFFFF" return "#FFFFFF"
} }
if(isYear){ if(isYear){
return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
} }
return Qt.rgba(150/255,150/255,150/255,1) return Qt.rgba(150/255,150/255,150/255,1)
} }
@ -176,7 +176,7 @@ Item {
radius: 4 radius: 4
anchors.centerIn: parent anchors.centerIn: parent
color:{ color:{
if(FluTheme.isDark){ if(FluTheme.dark){
if(item_control.hovered){ if(item_control.hovered){
return Qt.rgba(1,1,1,0.05) return Qt.rgba(1,1,1,0.05)
} }
@ -220,7 +220,7 @@ Item {
return "#FFFFFF" return "#FFFFFF"
} }
if(isMonth){ if(isMonth){
return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
} }
return Qt.rgba(150/255,150/255,150/255,1) return Qt.rgba(150/255,150/255,150/255,1)
} }
@ -242,7 +242,7 @@ Item {
id:layout_divider id:layout_divider
height: 1 height: 1
width: parent.width width: parent.width
color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
anchors{ anchors{
top: parent.top top: parent.top
topMargin: 44 topMargin: 44

22
src/controls/FluCheckBox.qml
View File

@ -8,16 +8,16 @@ Button {
property bool selected: false property bool selected: false
property var clickFunc property var clickFunc
property bool disabled: false property bool disabled: false
property color borderNormalColor: FluTheme.isDark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1) property color borderNormalColor: FluTheme.dark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
property color borderSelectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color borderSelectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color borderHoverColor: FluTheme.isDark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1) property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
property color borderDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
property color selectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color selectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
property color selectedHoverColor: FluTheme.isDark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1) property color selectedHoverColor: FluTheme.dark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1)
property color selectedDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) property color selectedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1) property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
id:control id:control
enabled: !disabled enabled: !disabled
@ -78,7 +78,7 @@ Button {
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 15
visible: selected visible: selected
color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
} }
} }
FluText{ FluText{

2
src/controls/FluColorPicker.qml
View File

@ -19,7 +19,7 @@ Button{
border.color: { border.color: {
if(hovered) if(hovered)
return FluTheme.primaryColor.light return FluTheme.primaryColor.light
return FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) return FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
} }
border.width: 1 border.width: 1
} }

4
src/controls/FluContentDialog.qml
View File

@ -25,7 +25,7 @@ Popup {
id:layout_content id:layout_content
implicitWidth:minWidth implicitWidth:minWidth
implicitHeight: text_title.height + text_message.height + layout_actions.height implicitHeight: text_title.height + text_message.height + layout_actions.height
color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1) color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1)
radius:5 radius:5
FluShadow{ FluShadow{
@ -67,7 +67,7 @@ Popup {
id:layout_actions id:layout_actions
height: 68 height: 68
radius: 5 radius: 5
color: FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
anchors{ anchors{
top:text_message.bottom top:text_message.bottom
left: parent.left left: parent.left

20
src/controls/FluDatePicker.qml
View File

@ -6,9 +6,9 @@ import FluentUI 1.0
Rectangle { Rectangle {
property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1) property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property var window : Window.window property var window : Window.window
property bool showYear: true property bool showYear: true
property bool changeFlag: true property bool changeFlag: true
@ -116,7 +116,7 @@ Rectangle {
id:container id:container
width: 300 width: 300
radius: 4 radius: 4
color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
height: 340 height: 340
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
@ -156,16 +156,16 @@ Rectangle {
anchors.rightMargin: 5 anchors.rightMargin: 5
color: { color: {
if(getListView().currentIndex === position){ if(getListView().currentIndex === position){
if(FluTheme.isDark){ if(FluTheme.dark){
return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
}else{ }else{
return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
} }
} }
if(item_mouse.containsMouse){ if(item_mouse.containsMouse){
return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
} }
return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
} }
radius: 3 radius: 3
MouseArea{ MouseArea{
@ -197,13 +197,13 @@ Rectangle {
text:model text:model
color: { color: {
if(getListView().currentIndex === position){ if(getListView().currentIndex === position){
if(FluTheme.isDark){ if(FluTheme.dark){
return Qt.rgba(0,0,0,1) return Qt.rgba(0,0,0,1)
}else{ }else{
return Qt.rgba(1,1,1,1) return Qt.rgba(1,1,1,1)
} }
}else{ }else{
return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
} }
} }
anchors.centerIn: parent anchors.centerIn: parent
@ -289,7 +289,7 @@ Rectangle {
id:layout_actions id:layout_actions
height: 40 height: 40
radius: 5 radius: 5
color: FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
anchors{ anchors{
bottom:parent.bottom bottom:parent.bottom
left: parent.left left: parent.left

2
src/controls/FluDivider.qml
View File

@ -3,7 +3,7 @@ import FluentUI 1.0
Rectangle { Rectangle {
color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1) color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
Behavior on color{ Behavior on color{
ColorAnimation { ColorAnimation {

10
src/controls/FluDropDownButton.qml
View File

@ -6,9 +6,9 @@ import FluentUI 1.0
Button { Button {
property bool disabled: false property bool disabled: false
property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
property var window : Window.window property var window : Window.window
property alias items: menu.content property alias items: menu.content
@ -23,7 +23,7 @@ Button {
Keys.onSpacePressed: control.visualFocus&&clicked() Keys.onSpacePressed: control.visualFocus&&clicked()
background: Rectangle{ background: Rectangle{
border.color: FluTheme.isDark ? "#505050" : "#DFDFDF" border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: 1 border.width: 1
radius: 4 radius: 4
FluFocusRectangle{ FluFocusRectangle{
@ -54,7 +54,7 @@ Button {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: { color: {
if(FluTheme.isDark){ if(FluTheme.dark){
if(disabled){ if(disabled){
return Qt.rgba(131/255,131/255,131/255,1) return Qt.rgba(131/255,131/255,131/255,1)
} }

12
src/controls/FluExpander.qml
View File

@ -20,8 +20,8 @@ Item {
width: parent.width width: parent.width
height: 45 height: 45
radius: 4 radius: 4
color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
MouseArea{ MouseArea{
id:root_mouse id:root_mouse
@ -49,9 +49,9 @@ Item {
} }
color:{ color:{
if(root_mouse.containsMouse){ if(root_mouse.containsMouse){
return FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1) return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
} }
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
} }
iconSize: 15 iconSize: 15
iconSource: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown iconSource: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
@ -72,8 +72,8 @@ Item {
left: layout_header.left left: layout_header.left
} }
radius: 4 radius: 4
color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
height: expand ? contentHeight : 0 height: expand ? contentHeight : 0
Behavior on height { Behavior on height {
NumberAnimation{ NumberAnimation{

8
src/controls/FluFilledButton.qml
View File

@ -5,9 +5,9 @@ import FluentUI 1.0
Button { Button {
property bool disabled: false property bool disabled: false
property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1) property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
id: control id: control
enabled: !disabled enabled: !disabled
@ -35,7 +35,7 @@ Button {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: { color: {
if(FluTheme.isDark){ if(FluTheme.dark){
if(disabled){ if(disabled){
return Qt.rgba(173/255,173/255,173/255,1) return Qt.rgba(173/255,173/255,173/255,1)
} }

2
src/controls/FluFocusRectangle.qml
View File

@ -16,7 +16,7 @@ Item {
color: "#00000000" color: "#00000000"
border.width: 3 border.width: 3
radius: root.radius radius: root.radius
border.color: FluTheme.isDark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) border.color: FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
z: 65535 z: 65535
} }

2
src/controls/FluIcon.qml
View File

@ -4,7 +4,7 @@ Text {
property int iconSource property int iconSource
property int iconSize: 20 property int iconSize: 20
property color iconColor: FluTheme.isDark ? "#FFFFFF" : "#000000" property color iconColor: FluTheme.dark ? "#FFFFFF" : "#000000"
id:text_icon id:text_icon
font.family: "Segoe Fluent Icons" font.family: "Segoe Fluent Icons"

8
src/controls/FluIconButton.qml
View File

@ -8,9 +8,9 @@ Button {
property int iconSource property int iconSource
property bool disabled: false property bool disabled: false
property int radius:4 property int radius:4
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03) property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0) property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0) property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
property color color: { property color color: {
if(disabled){ if(disabled){
return disableColor return disableColor
@ -18,7 +18,7 @@ Button {
return hovered ? hoverColor : normalColor return hovered ? hoverColor : normalColor
} }
property color textColor: { property color textColor: {
if(FluTheme.isDark){ if(FluTheme.dark){
if(disabled){ if(disabled){
return Qt.rgba(130/255,130/255,130/255,1) return Qt.rgba(130/255,130/255,130/255,1)
} }

6
src/controls/FluInfoBar.qml
View File

@ -122,7 +122,7 @@ FluObject {
width: rowlayout.width + (_super.moremsg ? 25 : 80); width: rowlayout.width + (_super.moremsg ? 25 : 80);
height: rowlayout.height + 20; height: rowlayout.height + 20;
color: { color: {
if(FluTheme.isDark){ if(FluTheme.dark){
switch(_super.type){ switch(_super.type){
case mcontrol.const_success: return Qt.rgba(57/255,61/255,27/255,1); 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); case mcontrol.const_warning: return Qt.rgba(67/255,53/255,25/255,1);
@ -143,7 +143,7 @@ FluObject {
radius: 4 radius: 4
border.width: 1 border.width: 1
border.color: { border.color: {
if(FluTheme.isDark){ if(FluTheme.dark){
switch(_super.type){ switch(_super.type){
case mcontrol.const_success: return Qt.rgba(56/255,61/255,27/255,1); 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); case mcontrol.const_warning: return Qt.rgba(66/255,53/255,25/255,1);
@ -179,7 +179,7 @@ FluObject {
} }
iconSize:20 iconSize:20
color: { color: {
if(FluTheme.isDark){ if(FluTheme.dark){
switch(_super.type){ switch(_super.type){
case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1); 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_warning: return Qt.rgba(252/255,225/255,0/255,1);

2
src/controls/FluMediaPlayer.qml
View File

@ -73,7 +73,7 @@ Rectangle {
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97) color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
radius: 5 radius: 5
} }

2
src/controls/FluMenu.qml
View File

@ -25,7 +25,7 @@ Menu {
background: Item { background: Item {
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97) color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
radius: 5 radius: 5
} }
FluShadow{ FluShadow{

2
src/controls/FluMenuItem.qml
View File

@ -22,7 +22,7 @@ Item {
height: 32 height: 32
radius: 4 radius: 4
color:{ color:{
if(FluTheme.isDark){ if(FluTheme.dark){
if(mouse_area.containsMouse){ if(mouse_area.containsMouse){
return Qt.rgba(1,1,1,0.05) return Qt.rgba(1,1,1,0.05)
} }

14
src/controls/FluMultiLineTextBox.qml
View File

@ -12,16 +12,16 @@ TextArea{
width: 300 width: 300
color: { color: {
if(disabled){ if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
} }
return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) return FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
} }
enabled: !disabled enabled: !disabled
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectByMouse: true selectByMouse: true
selectionColor: { selectionColor: {
if(FluTheme.isDark){ if(FluTheme.dark){
return FluTheme.primaryColor.lighter return FluTheme.primaryColor.lighter
}else{ }else{
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
@ -32,12 +32,12 @@ TextArea{
} }
placeholderTextColor: { placeholderTextColor: {
if(disabled){ if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
} }
if(focus){ if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) return FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
} }
return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) return FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
} }
font.bold: { font.bold: {
switch (fontStyle) { switch (fontStyle) {

10
src/controls/FluNavigationView.qml
View File

@ -113,7 +113,7 @@ Item {
} }
} }
color: { color: {
if(FluTheme.isDark){ if(FluTheme.dark){
if(item_mouse.containsMouse){ if(item_mouse.containsMouse){
return Qt.rgba(1,1,1,0.03) return Qt.rgba(1,1,1,0.03)
} }
@ -257,12 +257,12 @@ Item {
color: { color: {
if(displayMode === FluNavigationView.Minimal){ if(displayMode === FluNavigationView.Minimal){
return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1) return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
} }
if(window && window.active){ if(window && window.active){
return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1) return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
} }
return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
} }
Behavior on color{ Behavior on color{
ColorAnimation { ColorAnimation {
@ -270,7 +270,7 @@ Item {
} }
} }
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1) border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
border.width: displayMode === FluNavigationView.Minimal ? 1 : 0 border.width: displayMode === FluNavigationView.Minimal ? 1 : 0
Item{ Item{

4
src/controls/FluProgressBar.qml
View File

@ -11,7 +11,7 @@ FluRectangle {
height: 5 height: 5
radius: [3,3,3,3] radius: [3,3,3,3]
clip: true clip: true
color: FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1) color: FluTheme.dark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
Component.onCompleted: { Component.onCompleted: {
if(indeterminate){ if(indeterminate){
@ -28,7 +28,7 @@ FluRectangle {
radius: 3 radius: 3
width: control.width*progress width: control.width*progress
height: control.height height: control.height
color:FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
Behavior on x{ Behavior on x{
id:behavior id:behavior

6
src/controls/FluProgressRing.qml
View File

@ -7,7 +7,7 @@ Rectangle {
property real progress: 0.25 property real progress: 0.25
property bool indeterminate: true property bool indeterminate: true
readonly property real radius2 : radius - linWidth/2 readonly property real radius2 : radius - linWidth/2
property color primaryColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
id: control id: control
width: 44 width: 44
@ -15,7 +15,7 @@ Rectangle {
radius: 22 radius: 22
border.width: linWidth border.width: linWidth
color: "#00000000" color: "#00000000"
border.color: FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1) border.color: FluTheme.dark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
onProgressChanged: { onProgressChanged: {
canvas.requestPaint() canvas.requestPaint()
@ -23,7 +23,7 @@ Rectangle {
Connections{ Connections{
target: FluTheme target: FluTheme
function onIsDarkChanged(){ function onDarkChanged(){
canvas.requestPaint() canvas.requestPaint()
} }
} }

8
src/controls/FluRadioButton.qml
View File

@ -53,21 +53,21 @@ Button {
} }
border.color: { border.color: {
if(disabled){ if(disabled){
if(FluTheme.isDark){ if(FluTheme.dark){
return Qt.rgba(82/255,82/255,82/255,1) return Qt.rgba(82/255,82/255,82/255,1)
}else{ }else{
return Qt.rgba(198/255,198/255,198/255,1) return Qt.rgba(198/255,198/255,198/255,1)
} }
} }
if(selected){ if(selected){
if(FluTheme.isDark){ if(FluTheme.dark){
return FluTheme.primaryColor.lighter return FluTheme.primaryColor.lighter
}else{ }else{
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
} }
}else{ }else{
if(FluTheme.isDark){ if(FluTheme.dark){
return Qt.rgba(161/255,161/255,161/255,1) return Qt.rgba(161/255,161/255,161/255,1)
}else{ }else{
@ -79,7 +79,7 @@ Button {
if(disabled&&selected){ if(disabled&&selected){
return Qt.rgba(159/255,159/255,159/255,1) return Qt.rgba(159/255,159/255,159/255,1)
} }
if(FluTheme.isDark){ if(FluTheme.dark){
if(hovered){ if(hovered){
return Qt.rgba(43/255,43/255,43/255,1) return Qt.rgba(43/255,43/255,43/255,1)
} }

2
src/controls/FluShadow.qml
View File

@ -2,7 +2,7 @@
Item { Item {
property color color: FluTheme.isDark ? "#FFFFFF" : "#999999" property color color: FluTheme.dark ? "#FFFFFF" : "#999999"
property int radius: 4 property int radius: 4
id:root id:root

8
src/controls/FluSlider.qml
View File

@ -56,13 +56,13 @@ Item{
height: isHorizontal ? 4 : size height: isHorizontal ? 4 : size
radius: 2 radius: 2
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color:FluTheme.isDark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1) color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
Rectangle{ Rectangle{
id:rect id:rect
radius: 2.5 radius: 2.5
width: isHorizontal ? control.width*(value/maxValue) : 5 width: isHorizontal ? control.width*(value/maxValue) : 5
height: isHorizontal ? 5 : control.height*(value/maxValue) height: isHorizontal ? 5 : control.height*(value/maxValue)
color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
} }
@ -78,12 +78,12 @@ Item{
radius: dotSize/2 radius: dotSize/2
anchors.verticalCenter: isHorizontal ? parent.verticalCenter : undefined anchors.verticalCenter: isHorizontal ? parent.verticalCenter : undefined
anchors.horizontalCenter: isHorizontal ? undefined :parent.horizontalCenter anchors.horizontalCenter: isHorizontal ? undefined :parent.horizontalCenter
color:FluTheme.isDark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1) color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
Rectangle{ Rectangle{
width: dotSize/2 width: dotSize/2
height: dotSize/2 height: dotSize/2
radius: dotSize/4 radius: dotSize/4
color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
anchors.centerIn: parent anchors.centerIn: parent
scale: control_mouse.containsMouse || mouse_line.containsMouse ? 1.3 : 1 scale: control_mouse.containsMouse || mouse_line.containsMouse ? 1.3 : 1
Behavior on scale { Behavior on scale {

2
src/controls/FluTabView.qml
View File

@ -176,7 +176,7 @@ Item {
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: { color: {
if(FluTheme.isDark){ if(FluTheme.dark){
if(item_mouse_hove.containsMouse || item_btn_close.hovered){ if(item_mouse_hove.containsMouse || item_btn_close.hovered){
return Qt.rgba(1,1,1,0.03) return Qt.rgba(1,1,1,0.03)
} }

4
src/controls/FluText.qml
View File

@ -4,7 +4,7 @@ import FluentUI 1.0
Text { Text {
property int fontStyle: FluText.Body property int fontStyle: FluText.Body
property color textColor: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" property color textColor: FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
property int pixelSize : FluTheme.textSize property int pixelSize : FluTheme.textSize
enum FontStyle { enum FontStyle {
@ -20,7 +20,7 @@ Text {
id:text id:text
color: textColor color: textColor
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
font.bold: { font.bold: {
switch (fontStyle) { switch (fontStyle) {
case FluText.Display: case FluText.Display:

14
src/controls/FluTextBox.qml
View File

@ -13,13 +13,13 @@ TextField{
enabled: !disabled enabled: !disabled
color: { color: {
if(disabled){ if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
} }
return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) return FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
} }
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: { selectionColor: {
if(FluTheme.isDark){ if(FluTheme.dark){
return FluTheme.primaryColor.lighter return FluTheme.primaryColor.lighter
}else{ }else{
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
@ -27,12 +27,12 @@ TextField{
} }
placeholderTextColor: { placeholderTextColor: {
if(disabled){ if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
} }
if(focus){ if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) return FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
} }
return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) return FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
} }
font.bold: { font.bold: {
switch (fontStyle) { switch (fontStyle) {

14
src/controls/FluTextBoxBackground.qml
View File

@ -10,15 +10,15 @@ Rectangle{
layer.enabled: true layer.enabled: true
color: { color: {
if(inputItem.disabled){ if(inputItem.disabled){
return FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
} }
if(inputItem.focus){ if(inputItem.focus){
return FluTheme.isDark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1) return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
} }
if(inputItem.hovered){ if(inputItem.hovered){
return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
} }
return FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1) return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
} }
layer.effect:OpacityMask { layer.effect:OpacityMask {
maskSource: Rectangle { maskSource: Rectangle {
@ -30,9 +30,9 @@ Rectangle{
border.width: 1 border.width: 1
border.color: { border.color: {
if(inputItem.disabled){ if(inputItem.disabled){
return FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1) return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
} }
return FluTheme.isDark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1) return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
} }
Rectangle{ Rectangle{
width: parent.width width: parent.width
@ -40,7 +40,7 @@ Rectangle{
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
visible: !inputItem.disabled visible: !inputItem.disabled
color: { color: {
if(FluTheme.isDark){ if(FluTheme.dark){
inputItem.focus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1) inputItem.focus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1)
}else{ }else{
return inputItem.focus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1) return inputItem.focus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1)

6
src/controls/FluTextButton.qml
View File

@ -5,9 +5,9 @@ import FluentUI 1.0
Button { Button {
property bool disabled: false property bool disabled: false
property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3) property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3)
property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
property bool textBold: true property bool textBold: true
id: control id: control

20
src/controls/FluTimePicker.qml
View File

@ -10,9 +10,9 @@ Rectangle {
H, H,
HH HH
} }
property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1) property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property var window : Window.window property var window : Window.window
property int hourFormat: FluTimePicker.H property int hourFormat: FluTimePicker.H
property int isH: hourFormat === FluTimePicker.H property int isH: hourFormat === FluTimePicker.H
@ -118,7 +118,7 @@ Rectangle {
id:container id:container
width: 300 width: 300
radius: 4 radius: 4
color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
height: 340 height: 340
MouseArea{ MouseArea{
anchors.fill: parent anchors.fill: parent
@ -158,16 +158,16 @@ Rectangle {
anchors.rightMargin: 5 anchors.rightMargin: 5
color: { color: {
if(getListView().currentIndex === position){ if(getListView().currentIndex === position){
if(FluTheme.isDark){ if(FluTheme.dark){
return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
}else{ }else{
return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
} }
} }
if(item_mouse.containsMouse){ if(item_mouse.containsMouse){
return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
} }
return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
} }
radius: 3 radius: 3
MouseArea{ MouseArea{
@ -191,13 +191,13 @@ Rectangle {
text:model text:model
color: { color: {
if(getListView().currentIndex === position){ if(getListView().currentIndex === position){
if(FluTheme.isDark){ if(FluTheme.dark){
return Qt.rgba(0,0,0,1) return Qt.rgba(0,0,0,1)
}else{ }else{
return Qt.rgba(1,1,1,1) return Qt.rgba(1,1,1,1)
} }
}else{ }else{
return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
} }
} }
anchors.centerIn: parent anchors.centerIn: parent
@ -286,7 +286,7 @@ Rectangle {
id:layout_actions id:layout_actions
height: 40 height: 40
radius: 5 radius: 5
color: FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
anchors{ anchors{
bottom:parent.bottom bottom:parent.bottom
left: parent.left left: parent.left

2
src/controls/FluToggleSwitch.qml
View File

@ -37,7 +37,7 @@ Button {
radius: 20 radius: 20
} }
color: { color: {
if(FluTheme.isDark){ if(FluTheme.dark){
if(selected){ if(selected){
return FluTheme.primaryColor.dark return FluTheme.primaryColor.dark
} }

2
src/controls/FluTooltip.qml
View File

@ -16,7 +16,7 @@ ToolTip {
background: Rectangle{ background: Rectangle{
anchors.fill: parent anchors.fill: parent
color: FluTheme.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
radius: 5 radius: 5
FluShadow{} FluShadow{}
} }

2
src/controls/FluTreeView.qml
View File

@ -92,7 +92,7 @@ Item {
anchors.fill: parent anchors.fill: parent
anchors.margins: 2 anchors.margins: 2
color:{ color:{
if(FluTheme.isDark){ if(FluTheme.dark){
if(item_layout.singleSelected && selectionMode === FluTreeView.Single){ if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
return Qt.rgba(62/255,62/255,62/255,1) return Qt.rgba(62/255,62/255,62/255,1)
} }

8
src/controls/FluWindow.qml
View File

@ -23,9 +23,9 @@ Item {
property color color: { property color color: {
if(window && window.active){ if(window && window.active){
return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1) return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
} }
return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
} }
id:root id:root
@ -40,7 +40,7 @@ Item {
id:container id:container
color:root.color color:root.color
anchors.fill: parent anchors.fill: parent
anchors.margins: (window && (window.visibility === Window.Maximized)) ? 8/Screen.devicePixelRatio : 0 anchors.margins: (window && (window.visibility === Window.Maximized) && FluTheme.frameless) ? 8/Screen.devicePixelRatio : 0
clip: true clip: true
Behavior on color{ Behavior on color{
ColorAnimation { ColorAnimation {
@ -53,7 +53,7 @@ Item {
border.width: 1 border.width: 1
anchors.fill: parent anchors.fill: parent
color: Qt.rgba(0,0,0,0,) color: Qt.rgba(0,0,0,0,)
border.color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1) border.color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
} }