From 02e4579021f621c1e5a5e04c2ea8edd18414281a Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Tue, 28 Feb 2023 18:29:00 +0800 Subject: [PATCH] update --- example/AboutPage.qml | 28 ++++ example/App.qml | 3 +- example/MainPage.qml | 18 ++- example/SettingPage.qml | 9 +- example/T-Rectangle.qml | 59 ++++++++ example/T_Buttons.qml | 141 +++++++++++++++++ example/T_Controls.qml | 50 ------- example/T_InfoBar.qml | 54 +++++++ example/T_ToggleSwitch.qml | 26 ++++ example/qml.qrc | 6 +- src/FluApp.cpp | 2 - src/Fluent.cpp | 14 +- src/FluentUI.cpp | 4 +- src/build-preset/plugins.qmltypes | 146 ++++++++++++++++-- src/controls/FluAppBar.qml | 12 +- src/controls/FluButton.qml | 20 ++- src/controls/FluCheckBox.qml | 3 +- src/controls/FluComboBox.qml | 3 +- src/controls/FluDivider.qml | 8 + src/controls/FluDropDownButton.qml | 3 +- src/controls/FluFilledButton.qml | 30 +++- src/controls/FluIcon.qml | 16 ++ src/controls/FluIconButton.qml | 40 ++++- src/controls/FluInfoBar.qml | 233 +++++++++++++++++++++++++++++ src/controls/FluObject.qml | 7 + src/controls/FluProgressBar.qml | 3 +- src/controls/FluProgressRing.qml | 3 +- src/controls/FluRadioButton.qml | 108 ++++++++++++- src/controls/FluRectangle.qml | 53 ++++++- src/controls/FluShadow.qml | 71 +++++++++ src/controls/FluSlider.qml | 3 +- src/controls/FluText.qml | 90 ++++++----- src/controls/FluTextBox.qml | 3 +- src/controls/FluTimePicker.qml | 1 + src/controls/FluToggleSwitch.qml | 14 +- src/controls/FluTooltip.qml | 27 ++++ src/controls/FluWindow.qml | 27 +++- src/res.qrc | 6 + 38 files changed, 1188 insertions(+), 156 deletions(-) create mode 100644 example/AboutPage.qml create mode 100644 example/T-Rectangle.qml create mode 100644 example/T_Buttons.qml delete mode 100644 example/T_Controls.qml create mode 100644 example/T_InfoBar.qml create mode 100644 example/T_ToggleSwitch.qml create mode 100644 src/controls/FluDivider.qml create mode 100644 src/controls/FluIcon.qml create mode 100644 src/controls/FluInfoBar.qml create mode 100644 src/controls/FluObject.qml create mode 100644 src/controls/FluShadow.qml create mode 100644 src/controls/FluTooltip.qml diff --git a/example/AboutPage.qml b/example/AboutPage.qml new file mode 100644 index 00000000..92388a94 --- /dev/null +++ b/example/AboutPage.qml @@ -0,0 +1,28 @@ +import QtQuick 2.15 +import FluentUI 1.0 + +FluWindow { + + width: 500 + height: 500 + title:"关于" + + FluAppBar{ + id:appbar + } + + FluText{ + text:"关于" + fontStyle: FluText.Display + anchors.centerIn: parent + + MouseArea{ + anchors.fill: parent + onClicked: { + + } + } + + } + +} diff --git a/example/App.qml b/example/App.qml index 1734d3ae..0c86219b 100644 --- a/example/App.qml +++ b/example/App.qml @@ -12,7 +12,8 @@ Window { FluApp.setAppWindow(app) FluApp.routes = { "/":"qrc:/MainPage.qml", - "/Setting":"qrc:/SettingPage.qml" + "/Setting":"qrc:/SettingPage.qml", + "/About":"qrc:/AboutPage.qml" } FluApp.initialRoute = "/" FluApp.run() diff --git a/example/MainPage.qml b/example/MainPage.qml index 6b84803c..faa287b1 100644 --- a/example/MainPage.qml +++ b/example/MainPage.qml @@ -19,8 +19,20 @@ FluWindow { ListModel{ id:nav_items ListElement{ - text:"Controls" - page:"qrc:/T_Controls.qml" + text:"Buttons" + page:"qrc:/T_Buttons.qml" + } + ListElement{ + text:"ToggleSwitch" + page:"qrc:/T_ToggleSwitch.qml" + } + ListElement{ + text:"InfoBar" + page:"qrc:/T_InfoBar.qml" + } + ListElement{ + text:"Rectangle" + page:"qrc:/T-Rectangle.qml" } ListElement{ text:"Typography" @@ -108,7 +120,7 @@ FluWindow { bottomMargin: 20 } border.width: 1 - border.color: FluApp.isDark ? "#666666" : "#EEEEEE" + border.color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1) Loader{ anchors.fill: parent diff --git a/example/SettingPage.qml b/example/SettingPage.qml index 93e435f2..8514536d 100644 --- a/example/SettingPage.qml +++ b/example/SettingPage.qml @@ -12,10 +12,17 @@ FluWindow { } FluText{ - text:"Display" + text:"设置" fontStyle: FluText.Display anchors.centerIn: parent + MouseArea{ + anchors.fill: parent + onClicked: { + FluApp.navigate("/About") + } + } + } } diff --git a/example/T-Rectangle.qml b/example/T-Rectangle.qml new file mode 100644 index 00000000..e9594ede --- /dev/null +++ b/example/T-Rectangle.qml @@ -0,0 +1,59 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import QtGraphicalEffects 1.15 +import FluentUI 1.0 + +Item { + + ColumnLayout{ + spacing: 5 + + FluText{ + text:"Rectangle" + fontStyle: FluText.TitleLarge + } + + FluRectangle{ + width: 50 + height: 50 + color:"#ffeb3b" + radius:[15,0,0,0] + } + + FluRectangle{ + width: 50 + height: 50 + color:"#f7630c" + radius:[0,15,0,0] + } + + FluRectangle{ + width: 50 + height: 50 + color:"#e71123" + radius:[0,0,15,0] + } + + FluRectangle{ + width: 50 + height: 50 + color:"#b4009e" + radius:[0,0,0,15] + } + + FluRectangle{ + width: 50 + height: 50 + color:"#744da9" + radius:[15,15,15,15] + } + + FluRectangle{ + width: 50 + height: 50 + color:"#0078d4" + radius:[0,0,0,0] + } + } +} diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml new file mode 100644 index 00000000..e600290d --- /dev/null +++ b/example/T_Buttons.qml @@ -0,0 +1,141 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import QtGraphicalEffects 1.15 +import FluentUI 1.0 + +Item { + + width: parent.width + + + ColumnLayout{ + spacing: 5 + + width: parent.width + + FluText{ + text:"Buttons" + fontStyle: FluText.TitleLarge + } + + + RowLayout{ + Layout.topMargin: 20 + width: parent.width + FluButton{ + disabled:button_switch.checked + onClicked: { + showInfo("点击StandardButton") + } + } + Item{ + height: 1 + Layout.fillWidth: true + } + FluToggleSwitch{ + id:button_switch + Layout.alignment: Qt.AlignRight + } + FluText{ + text:"Disabled" + } + } + + FluDivider{ + Layout.fillWidth: true ; height:1; + } + + + RowLayout{ + Layout.topMargin: 20 + width: parent.width + FluFilledButton{ + disabled:filled_button_switch.checked + onClicked:{ + showWarning("点击FilledButton") + } + } + Item{ + height: 1 + Layout.fillWidth: true + } + FluToggleSwitch{ + id:filled_button_switch + Layout.alignment: Qt.AlignRight + } + FluText{ + text:"Disabled" + } + } + + + + FluDivider{ + Layout.fillWidth: true ; height:1 + } + + + RowLayout{ + Layout.topMargin: 20 + width: parent.width + FluIconButton{ + icon:FluentIcons.FA_close + disabled:icon_button_switch.checked + onClicked:{ + showSuccess("点击IconButton") + } + } + Item{ + height: 1 + Layout.fillWidth: true + } + FluToggleSwitch{ + id:icon_button_switch + Layout.alignment: Qt.AlignRight + } + FluText{ + text:"Disabled" + } + } + + + FluDivider{ + Layout.fillWidth: true ; height:1 + } + + RowLayout{ + Layout.topMargin: 20 + width: parent.width + ColumnLayout{ + spacing: 8 + + Repeater{ + id:repeater + property int selecIndex : 0 + model: 3 + delegate: FluRadioButton{ + checked : repeater.selecIndex===index + disabled:radio_button_switch.checked + text:"RodioButton_"+index + onClicked:{ + repeater.selecIndex = index + } + } + } + } + Item{ + height: 1 + Layout.fillWidth: true + } + FluToggleSwitch{ + id:radio_button_switch + Layout.alignment: Qt.AlignRight + } + FluText{ + text:"Disabled" + } + } + } + +} diff --git a/example/T_Controls.qml b/example/T_Controls.qml deleted file mode 100644 index 99c23368..00000000 --- a/example/T_Controls.qml +++ /dev/null @@ -1,50 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Window 2.15 -import FluentUI 1.0 - -Item { - - ColumnLayout{ - spacing: 5 - - - FluText{ - text:"Controls" - fontStyle: FluText.TitleLarge - } - - FluButton{ - Layout.topMargin: 20 - onClicked: { - - } - } - - FluFilledButton{ - onClicked:{ - FluApp.navigate("/Setting") - } - } - - FluFilledButton{ - disabled: true - onClicked:{ - } - } - - FluIconButton{ - Component.onCompleted: { - - } - icon:FluentIcons.FA_close - } - - FluToggleSwitch{ - - } - - } - - -} diff --git a/example/T_InfoBar.qml b/example/T_InfoBar.qml new file mode 100644 index 00000000..ec599d3d --- /dev/null +++ b/example/T_InfoBar.qml @@ -0,0 +1,54 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import QtGraphicalEffects 1.15 +import FluentUI 1.0 + +Item { + + ColumnLayout{ + spacing: 5 + + + FluText{ + text:"InfoBar" + fontStyle: FluText.TitleLarge + } + + FluButton{ + text:"Info" + Layout.topMargin: 20 + onClicked: { + showInfo("这是一个Info样式的InfoBar") + } + } + + FluButton{ + text:"Warning" + Layout.topMargin: 20 + onClicked: { + showWarning("这是一个Warning样式的InfoBar") + } + } + + FluButton{ + text:"Error" + Layout.topMargin: 20 + onClicked: { + showError("这是一个Error样式的InfoBar") + } + } + + FluButton{ + text:"Success" + Layout.topMargin: 20 + onClicked: { + showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar") + } + } + + + + } + +} diff --git a/example/T_ToggleSwitch.qml b/example/T_ToggleSwitch.qml new file mode 100644 index 00000000..8786a56e --- /dev/null +++ b/example/T_ToggleSwitch.qml @@ -0,0 +1,26 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import QtGraphicalEffects 1.15 +import FluentUI 1.0 + +Item { + + ColumnLayout{ + spacing: 5 + + + FluText{ + text:"ToggleSwitch" + fontStyle: FluText.TitleLarge + } + + FluToggleSwitch{ + Layout.topMargin: 20 + } + + + } + + +} diff --git a/example/qml.qrc b/example/qml.qrc index eabb5715..0610303f 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -1,9 +1,13 @@ - T_Controls.qml + T_ToggleSwitch.qml T_Typography.qml App.qml MainPage.qml SettingPage.qml + AboutPage.qml + T_Buttons.qml + T-Rectangle.qml + T_InfoBar.qml diff --git a/src/FluApp.cpp b/src/FluApp.cpp index 3b1c27b2..33061990 100644 --- a/src/FluApp.cpp +++ b/src/FluApp.cpp @@ -39,10 +39,8 @@ void FluApp::navigate(const QString& route){ qErrnoWarning("没有找到当前路由"); return; } - bool isAppWindow = route==initialRoute(); FramelessView *view = new FramelessView(); - view->engine()->rootContext()->setContextProperty("FluApp",FluApp::getInstance()); view->setColor(isDark() ? QColor(0,0,0,1) : QColor(255, 255, 255, 1)); QObject::connect(view, &QQuickView::statusChanged, view, [&](QQuickView::Status status) { if (status == QQuickView::Status::Ready) { diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 91996c6b..772da0c8 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -30,6 +30,12 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(uri,major,minor,"WindowHelper"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluShadow.qml"),uri,major,minor,"FluShadow"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTooltip.qml"),uri,major,minor,"FluTooltip"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDivider.qml"),uri,major,minor,"FluDivider"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluIcon.qml"),uri,major,minor,"FluIcon"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluObject.qml"),uri,major,minor,"FluObject"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluInfoBar.qml"),uri,major,minor,"FluInfoBar"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluWindow.qml"),uri,major,minor,"FluWindow"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluRectangle.qml"),uri,major,minor,"FluRectangle"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAppBar.qml"),uri,major,minor,"FluAppBar"); @@ -57,10 +63,10 @@ void Fluent::initializeEngine(QQmlEngine *engine, const char *uri) { Q_UNUSED(engine) Q_UNUSED(uri) - QFont font; - font.setFamily("Microsoft YaHei"); - QGuiApplication::setFont(font); - QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering); +// QFont font; +// font.setFamily("Microsoft YaHei"); +// QGuiApplication::setFont(font); +// QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering); QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf"); engine->rootContext()->setContextProperty("FluApp",FluApp::getInstance()); } diff --git a/src/FluentUI.cpp b/src/FluentUI.cpp index 999171f7..2b6f3cd1 100644 --- a/src/FluentUI.cpp +++ b/src/FluentUI.cpp @@ -4,9 +4,9 @@ void FluentUI::create(QQmlEngine *engine) { - Fluent::getInstance()->registerTypes(URI_STR); - Fluent::getInstance()->initializeEngine(engine,URI_STR); engine->addImportPath("/"); + Fluent::getInstance()->initializeEngine(engine,URI_STR); + Fluent::getInstance()->registerTypes(URI_STR); } QString FluentUI::version() diff --git a/src/build-preset/plugins.qmltypes b/src/build-preset/plugins.qmltypes index 06845e5d..ed45259c 100644 --- a/src/build-preset/plugins.qmltypes +++ b/src/build-preset/plugins.qmltypes @@ -855,6 +855,7 @@ Module { exportMetaObjectRevisions: [0] isComposite: true defaultProperty: "data" + Property { name: "text"; type: "string" } Property { name: "startPadding"; type: "int" } Property { name: "endPadding"; type: "int" } Property { name: "topPadding"; type: "int" } @@ -879,6 +880,14 @@ Module { isComposite: true defaultProperty: "data" } + Component { + prototype: "QQuickRectangle" + name: "FluentUI/FluDivider 1.0" + exports: ["FluentUI/FluDivider 1.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } Component { prototype: "QQuickItem" name: "FluentUI/FluDropDownButton 1.0" @@ -894,12 +903,12 @@ Module { exportMetaObjectRevisions: [0] isComposite: true defaultProperty: "data" + Property { name: "text"; type: "string" } Property { name: "startPadding"; type: "int" } Property { name: "endPadding"; type: "int" } Property { name: "topPadding"; type: "int" } Property { name: "bottomPadding"; type: "int" } Property { name: "disabled"; type: "bool" } - Property { name: "primaryColor"; type: "QColor" } Signal { name: "clicked" } } Component { @@ -909,12 +918,12 @@ Module { exportMetaObjectRevisions: [0] isComposite: true defaultProperty: "data" + Property { name: "text"; type: "string" } Property { name: "startPadding"; type: "int" } Property { name: "endPadding"; type: "int" } Property { name: "topPadding"; type: "int" } Property { name: "bottomPadding"; type: "int" } Property { name: "disabled"; type: "bool" } - Property { name: "primaryColor"; type: "QColor" } Signal { name: "clicked" } } Component { @@ -924,14 +933,25 @@ Module { exportMetaObjectRevisions: [0] isComposite: true defaultProperty: "data" + Property { name: "text"; type: "string" } Property { name: "startPadding"; type: "int" } Property { name: "endPadding"; type: "int" } Property { name: "topPadding"; type: "int" } Property { name: "bottomPadding"; type: "int" } Property { name: "disabled"; type: "bool" } - Property { name: "primaryColor"; type: "QColor" } Signal { name: "clicked" } } + Component { + prototype: "QQuickText" + name: "FluentUI/FluIcon 1.0" + exports: ["FluentUI/FluIcon 1.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "icon"; type: "int" } + Property { name: "iconSize"; type: "int" } + Property { name: "iconColor"; type: "QColor" } + } Component { prototype: "QQuickRectangle" name: "FluentUI/FluIconButton 1.0" @@ -941,9 +961,64 @@ Module { defaultProperty: "data" Property { name: "iconSize"; type: "int" } Property { name: "icon"; type: "int" } - Property { name: "iconColor"; type: "QColor" } + Property { name: "disabled"; type: "bool" } + Property { name: "text"; type: "string" } Signal { name: "clicked" } } + Component { + prototype: "QObject" + name: "FluentUI/FluInfoBar 1.0" + exports: ["FluentUI/FluInfoBar 1.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "children" + Property { name: "root"; type: "QVariant" } + Property { name: "layoutY"; type: "int" } + Method { + name: "showSuccess" + type: "QVariant" + Parameter { name: "text"; type: "QVariant" } + Parameter { name: "duration"; type: "QVariant" } + Parameter { name: "moremsg"; type: "QVariant" } + } + Method { + name: "showInfo" + type: "QVariant" + Parameter { name: "text"; type: "QVariant" } + Parameter { name: "duration"; type: "QVariant" } + Parameter { name: "moremsg"; type: "QVariant" } + } + Method { + name: "showWarning" + type: "QVariant" + Parameter { name: "text"; type: "QVariant" } + Parameter { name: "duration"; type: "QVariant" } + Parameter { name: "moremsg"; type: "QVariant" } + } + Method { + name: "showError" + type: "QVariant" + Parameter { name: "text"; type: "QVariant" } + Parameter { name: "duration"; type: "QVariant" } + Parameter { name: "moremsg"; type: "QVariant" } + } + Method { + name: "showCustom" + type: "QVariant" + Parameter { name: "itemcomponent"; type: "QVariant" } + Parameter { name: "duration"; type: "QVariant" } + } + Property { name: "children"; type: "QObject"; isList: true; isReadonly: true } + } + Component { + prototype: "QObject" + name: "FluentUI/FluObject 1.0" + exports: ["FluentUI/FluObject 1.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "children" + Property { name: "children"; type: "QObject"; isList: true; isReadonly: true } + } Component { prototype: "QQuickItem" name: "FluentUI/FluProgressBar 1.0" @@ -967,6 +1042,10 @@ Module { exportMetaObjectRevisions: [0] isComposite: true defaultProperty: "data" + Property { name: "checked"; type: "bool" } + Property { name: "text"; type: "string" } + Property { name: "disabled"; type: "bool" } + Signal { name: "clicked" } } Component { prototype: "QQuickItem" @@ -974,7 +1053,23 @@ Module { exports: ["FluentUI/FluRectangle 1.0"] exportMetaObjectRevisions: [0] isComposite: true + defaultProperty: "contentItem" + Property { name: "radius"; type: "QVariant" } + Property { name: "color"; type: "QColor" } + Property { name: "borderColor"; type: "QColor" } + Property { name: "borderWidth"; type: "int" } + Property { name: "contentItem"; type: "QQuickItem"; isList: true; isReadonly: true } + } + Component { + prototype: "QQuickItem" + name: "FluentUI/FluShadow 1.0" + exports: ["FluentUI/FluShadow 1.0"] + exportMetaObjectRevisions: [0] + isComposite: true defaultProperty: "data" + Property { name: "shadowColor"; type: "QColor" } + Property { name: "radius"; type: "int" } + Property { name: "isShadow"; type: "bool" } } Component { prototype: "QQuickItem" @@ -1007,11 +1102,6 @@ Module { Property { name: "fontStyle"; type: "int" } Property { name: "textColor"; type: "QColor" } Property { name: "pixelSize"; type: "int" } - Method { - name: "setFontStyle" - type: "QVariant" - Parameter { name: "fontStyle"; type: "QVariant" } - } } Component { prototype: "QQuickItem" @@ -1037,7 +1127,15 @@ Module { isComposite: true defaultProperty: "data" Property { name: "checkedColor"; type: "QColor" } - Signal { name: "clicked2" } + Property { name: "onClickFunc"; type: "QVariant" } + } + Component { + prototype: "QQuickToolTip" + name: "FluentUI/FluTooltip 1.0" + exports: ["FluentUI/FluTooltip 1.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "contentData" } Component { prototype: "QQuickRectangle" @@ -1049,5 +1147,33 @@ Module { Property { name: "isMax"; type: "bool" } Property { name: "title"; type: "string" } Property { name: "window"; type: "QVariant" } + Method { + name: "showSuccess" + type: "QVariant" + Parameter { name: "text"; type: "QVariant" } + Parameter { name: "duration"; type: "QVariant" } + Parameter { name: "moremsg"; type: "QVariant" } + } + Method { + name: "showInfo" + type: "QVariant" + Parameter { name: "text"; type: "QVariant" } + Parameter { name: "duration"; type: "QVariant" } + Parameter { name: "moremsg"; type: "QVariant" } + } + Method { + name: "showWarning" + type: "QVariant" + Parameter { name: "text"; type: "QVariant" } + Parameter { name: "duration"; type: "QVariant" } + Parameter { name: "moremsg"; type: "QVariant" } + } + Method { + name: "showError" + type: "QVariant" + Parameter { name: "text"; type: "QVariant" } + Parameter { name: "duration"; type: "QVariant" } + Parameter { name: "moremsg"; type: "QVariant" } + } } } diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml index 82448b3f..240bb81e 100644 --- a/src/controls/FluAppBar.qml +++ b/src/controls/FluAppBar.qml @@ -3,7 +3,6 @@ import QtQuick.Window 2.15 import QtQuick.Layouts 1.15 import FluentUI 1.0 - Rectangle{ color: FluApp.isDark ? "#323232" : "#FFFFFF" @@ -63,7 +62,7 @@ Rectangle{ } FluToggleSwitch{ checked: FluApp.isDark - onClicked2:{ + onClickFunc:function(){ FluApp.isDark = !FluApp.isDark } } @@ -73,7 +72,7 @@ Rectangle{ icon : FluentIcons.FA_window_minimize Layout.alignment: Qt.AlignVCenter iconSize: 15 - iconColor: FluApp.isDark ? "#FFFFFF" : "#000000" + text:"最小化" onClicked: { Window.window.showMinimized() } @@ -85,7 +84,7 @@ Rectangle{ return Window.Maximized === Window.window.visibility ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize } Layout.alignment: Qt.AlignVCenter - iconColor: FluApp.isDark ? "#FFFFFF" : "#000000" + text:Window.Maximized === Window.window.visibility?"向下还原":"最大化" iconSize: 15 onClicked: { toggleMaximized() @@ -94,19 +93,18 @@ Rectangle{ FluIconButton{ icon : FluentIcons.FA_close Layout.alignment: Qt.AlignVCenter + text:"关闭" iconSize: 15 - iconColor: FluApp.isDark ? "#FFFFFF" : "#000000" onClicked: { Window.window.close() } } } - Rectangle{ + FluDivider{ width: parent.width; height: 1; anchors.bottom: parent.bottom; - color: FluApp.isDark ? "#666666" : "#EEEEEE" } } diff --git a/src/controls/FluButton.qml b/src/controls/FluButton.qml index 494af32d..2c42f3cf 100644 --- a/src/controls/FluButton.qml +++ b/src/controls/FluButton.qml @@ -4,6 +4,7 @@ import QtQuick.Controls 2.15 Rectangle { id: button + property string text: "Standard Button" property int startPadding : 15 property int endPadding : 15 property int topPadding: 8 @@ -15,12 +16,12 @@ Rectangle { color:{ if(FluApp.isDark){ if(disabled){ - return "#C7C7C7" + return Qt.rgba(59/255,59/255,59/255,1) } return button_mouse.containsMouse ? "#444444" : "#3e3e3e" }else{ if(disabled){ - return "#C7C7C7" + return Qt.rgba(252/255,252/255,252/255,1) } return button_mouse.containsMouse ? "#FBFBFB" : "#FFFFFF" } @@ -34,13 +35,26 @@ Rectangle { FluText { id: button_text - text: "Standard Button" + text: button.text font.pixelSize: 14 leftPadding: button.startPadding rightPadding: button.endPadding topPadding: button.topPadding bottomPadding: button.bottomPadding anchors.centerIn: parent + color: { + if(FluApp.isDark){ + if(disabled){ + return Qt.rgba(131/255,131/255,131/255,1) + } + return Qt.rgba(1,1,1,1) + }else{ + if(disabled){ + return Qt.rgba(160/255,160/255,160/255,1) + } + return Qt.rgba(0,0,0,1) + } + } } MouseArea { diff --git a/src/controls/FluCheckBox.qml b/src/controls/FluCheckBox.qml index 68c21087..17454a4f 100644 --- a/src/controls/FluCheckBox.qml +++ b/src/controls/FluCheckBox.qml @@ -1,4 +1,5 @@ -import QtQuick 2.15 +import QtQuick 2.15 +import FluentUI 1.0 Item { diff --git a/src/controls/FluComboBox.qml b/src/controls/FluComboBox.qml index 68c21087..17454a4f 100644 --- a/src/controls/FluComboBox.qml +++ b/src/controls/FluComboBox.qml @@ -1,4 +1,5 @@ -import QtQuick 2.15 +import QtQuick 2.15 +import FluentUI 1.0 Item { diff --git a/src/controls/FluDivider.qml b/src/controls/FluDivider.qml new file mode 100644 index 00000000..1d84545c --- /dev/null +++ b/src/controls/FluDivider.qml @@ -0,0 +1,8 @@ +import QtQuick 2.15 +import FluentUI 1.0 + +Rectangle { + + color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1) + +} diff --git a/src/controls/FluDropDownButton.qml b/src/controls/FluDropDownButton.qml index 68c21087..17454a4f 100644 --- a/src/controls/FluDropDownButton.qml +++ b/src/controls/FluDropDownButton.qml @@ -1,4 +1,5 @@ -import QtQuick 2.15 +import QtQuick 2.15 +import FluentUI 1.0 Item { diff --git a/src/controls/FluFilledButton.qml b/src/controls/FluFilledButton.qml index 1f6f1f2e..0e4cb72e 100644 --- a/src/controls/FluFilledButton.qml +++ b/src/controls/FluFilledButton.qml @@ -1,30 +1,48 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 +import FluentUI 1.0 Rectangle { id: button + property string text: "Filled Button" property int startPadding : 15 property int endPadding : 15 property int topPadding: 8 property int bottomPadding: 8 property bool disabled: false - property color primaryColor : "#0064B0" + signal clicked radius: 4 color:{ - if(disabled){ - return "#C7C7C7" + if(FluApp.isDark){ + if(disabled){ + return Qt.rgba(199/255,199/255,199/255,1) + } + return button_mouse.containsMouse ? Qt.rgba(74/255,149/255,207/255,1) : Qt.rgba(76/255,160/255,224/255,1) + }else{ + if(disabled){ + return Qt.rgba(199/255,199/255,199/255,1) + } + return button_mouse.containsMouse ? Qt.rgba(25/255,117/255,187/255,1) : Qt.rgba(0/255,102/255,180/255,1) } - return button_mouse.containsMouse ? Qt.lighter(primaryColor,1.15) : primaryColor } width: button_text.implicitWidth height: button_text.implicitHeight FluText { id: button_text - text: "Filled Button" - color: "#FFFFFFFF" + text: button.text + color: { + if(FluApp.isDark){ + if(disabled){ + return Qt.rgba(173/255,173/255,173/255,1) + } + return Qt.rgba(0,0,0,1) + }else{ + return Qt.rgba(1,1,1,1) + } + } font.pixelSize: 14 leftPadding: button.startPadding rightPadding: button.endPadding diff --git a/src/controls/FluIcon.qml b/src/controls/FluIcon.qml new file mode 100644 index 00000000..1445cce7 --- /dev/null +++ b/src/controls/FluIcon.qml @@ -0,0 +1,16 @@ +import QtQuick 2.15 + +Text { + + property int icon + property int iconSize: 20 + property color iconColor: FluApp.isDark ? "#FFFFFF" : "#000000" + + id:text_icon + font.family: "fontawesome" + font.pixelSize: iconSize + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + color: iconColor + text: (String.fromCharCode(icon).toString(16)); +} diff --git a/src/controls/FluIconButton.qml b/src/controls/FluIconButton.qml index 2005fa3d..d26666fb 100644 --- a/src/controls/FluIconButton.qml +++ b/src/controls/FluIconButton.qml @@ -1,4 +1,5 @@ import QtQuick 2.15 +import FluentUI 1.0 Rectangle { @@ -8,16 +9,23 @@ Rectangle { property int iconSize: 20 property int icon - property color iconColor: "#000000" + property alias text: tool_tip.text signal clicked + property bool disabled: false radius: 4 color: { if(FluApp.isDark){ - return button_mouse.containsMouse ? "#000000" : "#00000000" + if(disabled){ + return Qt.rgba(59/255,59/255,59/255,1) + } + return button_mouse.containsMouse ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(50/255,50/255,50/255,1) }else{ - return button_mouse.containsMouse ? "#F4F4F4" : "#00000000" + if(disabled){ + return Qt.rgba(1,1,1,1) + } + return button_mouse.containsMouse ? Qt.rgba(244/255,244/255,244/255,1) : Qt.rgba(1,1,1,1) } } @@ -28,7 +36,19 @@ Rectangle { horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter anchors.centerIn: parent - color: iconColor + color:{ + if(FluApp.isDark){ + if(disabled){ + return Qt.rgba(130/255,130/255,130/255,1) + } + return Qt.rgba(1,1,1,1) + }else{ + if(disabled){ + return Qt.rgba(161/255,161/255,161/255,1) + } + return Qt.rgba(0,0,0,1) + } + } text: (String.fromCharCode(icon).toString(16)); } @@ -36,9 +56,21 @@ Rectangle { id:button_mouse anchors.fill: parent hoverEnabled: true + enabled: !disabled onClicked: { button.clicked() } } + FluTooltip{ + id:tool_tip + visible: { + if(button.text === ""){ + return false + } + return button_mouse.containsMouse + } + delay: 1000 + } + } diff --git a/src/controls/FluInfoBar.qml b/src/controls/FluInfoBar.qml new file mode 100644 index 00000000..919c329d --- /dev/null +++ b/src/controls/FluInfoBar.qml @@ -0,0 +1,233 @@ +import QtQuick 2.15 +import FluentUI 1.0 + +FluObject { + id:infoBar + + property var root; + property int layoutY: 75; + + function showSuccess(text,duration,moremsg){ + mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : ""); + } + + function showInfo(text,duration,moremsg){ + mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : ""); + } + + function showWarning(text,duration,moremsg){ + mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : ""); + } + + function showError(text,duration,moremsg){ + mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : ""); + } + + function showCustom(itemcomponent,duration){ + mcontrol.createCustom(itemcomponent,duration); + } + + FluObject{ + id:mcontrol + + property string const_success: "success"; + property string const_info: "info"; + property string const_warning: "warning"; + property string const_error: "error"; + + property int maxWidth: 300; + + property var screenLayout: null; + + function create(type,text,duration,moremsg){ + if(screenLayout){ + var last = screenLayout.getLastloader(); + if(last.type === type && last.text === text && moremsg === last.moremsg){ + last.restart(); + return; + } + } + + initScreenLayout(); + contentComponent.createObject(screenLayout,{ + type:type, + text:text, + duration:duration, + moremsg:moremsg, + }); + } + + function createCustom(itemcomponent,duration){ + initScreenLayout(); + if(itemcomponent){ + contentComponent.createObject(screenLayout,{itemcomponent:itemcomponent,duration:duration}); + } + } + + function initScreenLayout(){ + if(screenLayout == null){ + screenLayout = screenlayoutComponent.createObject(root); + screenLayout.y = infoBar.layoutY; + screenLayout.z = 100000; + } + } + + Component{ + id:screenlayoutComponent + Column{ + spacing: 20 + width: parent.width + move: Transition { + NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 } + } + + onChildrenChanged: if(children.length === 0) destroy(); + + function getLastloader(){ + if(children.length > 0){ + return children[children.length - 1]; + } + return null; + } + } + } + + Component{ + id:contentComponent + Item{ + id:content; + property int duration: 1500 + property var itemcomponent + property string type + property string text + property string moremsg + + width: parent.width; + height: loader.height; + + function close(){ + content.destroy(); + } + + function restart(){ + delayTimer.restart(); + } + + Timer { + id:delayTimer + interval: duration; running: true; repeat: true + onTriggered: content.close(); + } + + Loader{ + id:loader; + x:(parent.width - width) / 2; + property var _super: content; + + scale: item ? 1 : 0; + asynchronous: true + + Behavior on scale { + NumberAnimation { + easing.type: Easing.OutBack; + duration: 100 + } + } + + sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle; + } + + } + } + + property Component fluent_sytle: Rectangle{ + width: rowlayout.width + (_super.moremsg ? 25 : 80); + height: rowlayout.height + 20; + color: { + if(FluApp.isDark){ + switch(_super.type){ + case mcontrol.const_success: return Qt.rgba(57/255,61/255,27/255,1); + case mcontrol.const_warning: return Qt.rgba(67/255,53/255,25/255,1); + case mcontrol.const_info: return Qt.rgba(39/255,39/255,39/255,1); + case mcontrol.const_error: return Qt.rgba(68/255,39/255,38/255,1); + } + return Qt.rgba(255,255,255,1) + }else{ + switch(_super.type){ + case mcontrol.const_success: return "#dff6dd"; + case mcontrol.const_warning: return "#fff4ce"; + case mcontrol.const_info: return "#f4f4f4"; + case mcontrol.const_error: return "#fde7e9"; + } + return "#FFFFFF" + } + } + radius: 4 + border.width: 1 + border.color: { + if(FluApp.isDark){ + switch(_super.type){ + case mcontrol.const_success: return Qt.rgba(56/255,61/255,27/255,1); + case mcontrol.const_warning: return Qt.rgba(66/255,53/255,25/255,1); + case mcontrol.const_info: return Qt.rgba(38/255,39/255,39/255,1); + case mcontrol.const_error: return Qt.rgba(67/255,39/255,38/255,1); + } + return "#FFFFFF" + }else{ + switch(_super.type){ + case mcontrol.const_success: return "#d2e8d0"; + case mcontrol.const_warning: return "#f0e6c2"; + case mcontrol.const_info: return "#e6e6e6"; + case mcontrol.const_error: return "#eed9db"; + } + return "#FFFFFF" + } + } + Row{ + id:rowlayout + x:20; + y:(parent.height - height) / 2; + spacing: 10 + + FluIcon{ + icon:{ + switch(_super.type){ + case mcontrol.const_success: return FluentIcons.FA_check_circle; + case mcontrol.const_warning: return FluentIcons.FA_info_circle; + case mcontrol.const_info: return FluentIcons.FA_info_circle; + case mcontrol.const_error: return FluentIcons.FA_times_circle; + } + return FluentIcons.FA_info_circle + } + iconSize:20 + color: { + if(FluApp.isDark){ + switch(_super.type){ + case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1); + case mcontrol.const_warning: return Qt.rgba(252/255,225/255,0/255,1); + case mcontrol.const_info: return Qt.rgba(76/255,160/255,224/255,1); + case mcontrol.const_error: return Qt.rgba(255/255,153/255,164/255,1); + } + return "#FFFFFF" + }else{ + switch(_super.type){ + case mcontrol.const_success: return "#0f7b0f"; + case mcontrol.const_warning: return "#9d5d00"; + case mcontrol.const_info: return "#0066b4"; + case mcontrol.const_error: return "#c42b1c"; + } + return "#FFFFFF" + } + } + } + + FluText{ + text:_super.text + wrapMode: Text.WrapAnywhere + width: Math.min(implicitWidth,mcontrol.maxWidth) + } + } + } + } + +} diff --git a/src/controls/FluObject.qml b/src/controls/FluObject.qml new file mode 100644 index 00000000..48894703 --- /dev/null +++ b/src/controls/FluObject.qml @@ -0,0 +1,7 @@ +import QtQuick 2.15 + +QtObject { + id:flu_object; + + default property list children; +} diff --git a/src/controls/FluProgressBar.qml b/src/controls/FluProgressBar.qml index 68c21087..17454a4f 100644 --- a/src/controls/FluProgressBar.qml +++ b/src/controls/FluProgressBar.qml @@ -1,4 +1,5 @@ -import QtQuick 2.15 +import QtQuick 2.15 +import FluentUI 1.0 Item { diff --git a/src/controls/FluProgressRing.qml b/src/controls/FluProgressRing.qml index 68c21087..17454a4f 100644 --- a/src/controls/FluProgressRing.qml +++ b/src/controls/FluProgressRing.qml @@ -1,4 +1,5 @@ -import QtQuick 2.15 +import QtQuick 2.15 +import FluentUI 1.0 Item { diff --git a/src/controls/FluRadioButton.qml b/src/controls/FluRadioButton.qml index 68c21087..b198cde2 100644 --- a/src/controls/FluRadioButton.qml +++ b/src/controls/FluRadioButton.qml @@ -1,5 +1,111 @@ -import QtQuick 2.15 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import FluentUI 1.0 + Item { + id:root + width: childrenRect.width + height: childrenRect.height + property bool checked: false + property string text: "RodioButton" + signal clicked + property bool disabled: false + + RowLayout{ + Rectangle{ + id:rect_check + width: 20 + height: 20 + radius: 10 + layer.samples: 4 + layer.enabled: true + layer.smooth: true + border.width: { + if(checked&&disabled){ + return 3 + } + if(root_mouse.containsPress){ + if(checked){ + return 5 + } + return 1 + } + if(root_mouse.containsMouse){ + if(checked){ + return 3 + } + return 1 + } + return checked ? 5 : 1 + } + Behavior on border.width { + NumberAnimation{ + duration: 100 + } + } + border.color: { + if(disabled){ + if(FluApp.isDark){ + return Qt.rgba(82/255,82/255,82/255,1) + }else{ + return Qt.rgba(198/255,198/255,198/255,1) + } + } + if(checked){ + if(FluApp.isDark){ + return Qt.rgba(76/255,164/255,224/255,1) + }else{ + + return Qt.rgba(0/255,102/255,180/255,1) + } + }else{ + if(FluApp.isDark){ + return Qt.rgba(161/255,161/255,161/255,1) + }else{ + + return Qt.rgba(141/255,141/255,141/255,1) + } + } + } + color:{ + if(disabled&&checked){ + return Qt.rgba(159/255,159/255,159/255,1) + } + if(FluApp.isDark){ + if(root_mouse.containsMouse){ + return Qt.rgba(43/255,43/255,43/255,1) + } + return Qt.rgba(50/255,50/255,50/255,1) + }else{ + if(root_mouse.containsMouse){ + if(checked){ + return Qt.rgba(1,1,1,1) + } + return Qt.rgba(222/255,222/255,222/255,1) + } + return Qt.rgba(1,1,1,1) + } + } + } + + FluText{ + text: root.text + Layout.alignment: Qt.AlignVCenter + } + + } + + MouseArea{ + id:root_mouse + hoverEnabled: true + anchors.fill: parent + enabled: !disabled + onClicked: { + root.clicked() + } + } + } + diff --git a/src/controls/FluRectangle.qml b/src/controls/FluRectangle.qml index 68c21087..721e75c3 100644 --- a/src/controls/FluRectangle.qml +++ b/src/controls/FluRectangle.qml @@ -1,5 +1,54 @@ -import QtQuick 2.15 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Shapes 1.15 +import QtGraphicalEffects 1.15 -Item { +Item{ + id:root + property var radius:[0,0,0,0] + property color color : "#FFFFFF" + property color borderColor:"transparent" + property int borderWidth: 1 + default property alias contentItem: container.children + + Rectangle{ + id:container + width: root.width + height: root.height + visible: false + color:root.color + + } + + Shape { + id: shape + width: root.width + height: root.height + layer.enabled: true + layer.samples: 4 + layer.smooth: true + visible: false + ShapePath { + startX: 0 + startY: radius[0] + fillColor: color + strokeColor: borderColor + strokeWidth: borderWidth + PathQuad { x: radius[0]; y: 0; controlX: 0; controlY: 0 } + PathLine { x: shape.width - radius[1]; y: 0 } + PathQuad { x: shape.width; y: radius[1]; controlX: shape.width; controlY: 0 } + PathLine { x: shape.width; y: shape.height - radius[2] } + PathQuad { x: shape.width - radius[2]; y: shape.height; controlX: shape.width; controlY: shape.height } + PathLine { x: radius[3]; y: shape.height } + PathQuad { x: 0; y: shape.height - radius[3]; controlX: 0; controlY: shape.height } + PathLine { x: 0; y: radius[0] } + } + } + + OpacityMask { + anchors.fill: container + source: container + maskSource: shape + } } diff --git a/src/controls/FluShadow.qml b/src/controls/FluShadow.qml new file mode 100644 index 00000000..4e100aca --- /dev/null +++ b/src/controls/FluShadow.qml @@ -0,0 +1,71 @@ +import QtQuick 2.15 + +Item { + + id:root + + anchors.fill: parent + anchors.margins: -5 + property color shadowColor: "#333333" + property int radius: 5 + property bool isShadow: true + + + Rectangle{ + id:react_background + width: root.width - 8 + height: root.height - 8 + anchors.centerIn: parent + radius: root.radius + color:"#00000000" + opacity: 0.25 + border.width: 1 + border.color : Qt.lighter(shadowColor,1.1) + } + + Rectangle{ + width: root.width - 6 + height: root.height - 6 + anchors.centerIn: parent + radius: root.radius + color:"#00000000" + border.width: 1 + opacity: 0.2 + border.color : Qt.lighter(shadowColor,1.2) + } + + Rectangle{ + width: root.width - 4 + height: root.height - 4 + anchors.centerIn: parent + radius: root.radius + color:"#00000000" + border.width: 1 + opacity: 0.15 + border.color : Qt.lighter(shadowColor,1.3) + } + + Rectangle{ + width: root.width - 2 + height: root.height - 2 + anchors.centerIn: parent + radius: root.radius + color:"#00000000" + border.width: 1 + opacity: 0.1 + border.color : Qt.lighter(shadowColor,1.4) + } + + Rectangle{ + width: root.width + height: root.height + anchors.centerIn: parent + radius: root.radius + color:"#00000000" + border.width: 1 + opacity:0.05 + border.color : Qt.lighter(shadowColor,1.5) + } + + +} diff --git a/src/controls/FluSlider.qml b/src/controls/FluSlider.qml index 68c21087..17454a4f 100644 --- a/src/controls/FluSlider.qml +++ b/src/controls/FluSlider.qml @@ -1,4 +1,5 @@ -import QtQuick 2.15 +import QtQuick 2.15 +import FluentUI 1.0 Item { diff --git a/src/controls/FluText.qml b/src/controls/FluText.qml index ff4a507a..828b5359 100644 --- a/src/controls/FluText.qml +++ b/src/controls/FluText.qml @@ -1,5 +1,5 @@ import QtQuick 2.15 - +import FluentUI 1.0 Text { @@ -18,57 +18,55 @@ Text { property int fontStyle: FluText.Body property color textColor: FluApp.isDark ? "#FFFFFF" : "#1A1A1A" - property int pixelSize : 14 color: textColor - Component.onCompleted: { - setFontStyle(fontStyle) - } - - onStyleChanged: { - setFontStyle(fontStyle) - } - - function setFontStyle(fontStyle) { + font.bold: { switch (fontStyle) { - case FluText.Display: - font.bold = true - font.pixelSize = text.pixelSize * 4 - break - case FluText.TitleLarge: - font.bold = true - font.pixelSize = text.pixelSize * 2 - break - case FluText.Title: - font.bold = true - font.pixelSize = text.pixelSize * 1.5 - break - case FluText.Subtitle: - font.bold = true - font.pixelSize = text.pixelSize * 0.9 - break - case FluText.BodyLarge: - font.bold = false - font.pixelSize = text.pixelSize * 1.1 - break - case FluText.BodyStrong: - font.bold = true - font.pixelSize = text.pixelSize * 1.0 - break - case FluText.Body: - font.bold = false - font.pixelSize = text.pixelSize - break - case FluText.Caption: - font.bold = false - font.pixelSize = text.pixelSize * 0.8 - break - default: - font.pixelSize = text.pixelSize * 1.0 - break + case FluText.Display: + return true + case FluText.TitleLarge: + return true + case FluText.Title: + return true + case FluText.Subtitle: + return true + case FluText.BodyLarge: + return false + case FluText.BodyStrong: + return true + case FluText.Body: + return false + case FluText.Caption: + return false + default: + return false } } + font.pixelSize: { + switch (fontStyle) { + case FluText.Display: + return text.pixelSize * 4 + case FluText.TitleLarge: + return text.pixelSize * 2 + case FluText.Title: + return text.pixelSize * 1.5 + case FluText.Subtitle: + return text.pixelSize * 0.9 + case FluText.BodyLarge: + return text.pixelSize * 1.1 + case FluText.BodyStrong: + return text.pixelSize * 1.0 + case FluText.Body: + return text.font.pixelSize = 14 + case FluText.Caption: + return text.pixelSize * 0.8 + default: + return text.pixelSize * 1.0 + } + } + + } diff --git a/src/controls/FluTextBox.qml b/src/controls/FluTextBox.qml index 68c21087..17454a4f 100644 --- a/src/controls/FluTextBox.qml +++ b/src/controls/FluTextBox.qml @@ -1,4 +1,5 @@ -import QtQuick 2.15 +import QtQuick 2.15 +import FluentUI 1.0 Item { diff --git a/src/controls/FluTimePicker.qml b/src/controls/FluTimePicker.qml index cc79a76f..ad3bd10b 100644 --- a/src/controls/FluTimePicker.qml +++ b/src/controls/FluTimePicker.qml @@ -1,6 +1,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Shapes 1.15 +import FluentUI 1.0 Item { diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml index e366a084..1c2fa7b7 100644 --- a/src/controls/FluToggleSwitch.qml +++ b/src/controls/FluToggleSwitch.qml @@ -1,10 +1,11 @@ import QtQuick 2.0 import QtQuick.Controls 2.0 +import FluentUI 1.0 Switch { id: root property color checkedColor: "#0064B0" - signal clicked2 + property var onClickFunc width: 40 implicitWidth: 40 height: 20 @@ -24,10 +25,13 @@ Switch { } return "#323232" }else{ + if(root.checked){ + return checkedColor + } if(switch_mouse.containsMouse){ return "#F4F4F4" } - return root.checked ? checkedColor : "white" + return "#FFFFFF" } } border.width: 1 @@ -52,7 +56,11 @@ Switch { anchors.fill: parent hoverEnabled: true onClicked: { - root.clicked2() + if(root.onClickFunc){ + root.onClickFunc() + }else{ + root.checked = !root.checked + } } } } diff --git a/src/controls/FluTooltip.qml b/src/controls/FluTooltip.qml new file mode 100644 index 00000000..d126fdb8 --- /dev/null +++ b/src/controls/FluTooltip.qml @@ -0,0 +1,27 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtGraphicalEffects 1.15 +import FluentUI 1.0 + +ToolTip { + id:tool_tip + + contentItem: FluText { + text: tool_tip.text + font: tool_tip.font + padding: 4 + wrapMode: Text.WrapAnywhere + } + + background: Rectangle{ + anchors.fill: parent + color: FluApp.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1) + radius: 5 + layer.enabled: true + layer.effect: DropShadow { + radius: 5 + samples: 4 + color: "#80000000" + } + } +} diff --git a/src/controls/FluWindow.qml b/src/controls/FluWindow.qml index a2682363..db939264 100644 --- a/src/controls/FluWindow.qml +++ b/src/controls/FluWindow.qml @@ -15,7 +15,7 @@ Rectangle { Behavior on opacity{ NumberAnimation{ - duration: 100 + duration: 100 } } @@ -27,7 +27,7 @@ Rectangle { onIsMaxChanged: { if(isMax){ - root.anchors.margins = 8 + root.anchors.margins = 8*(1/Screen.devicePixelRatio) root.anchors.fill = parent }else{ root.anchors.margins = 0 @@ -38,7 +38,7 @@ Rectangle { color : FluApp.isDark ? "#202020" : "#F3F3F3" Component.onCompleted: { - console.debug("onCompleted") + console.debug("onCompleted") } Connections{ @@ -55,4 +55,25 @@ Rectangle { id:helper } + FluInfoBar{ + id:infoBar + root: root + } + + + function showSuccess(text,duration,moremsg){ + infoBar.showSuccess(text,duration,moremsg); + } + function showInfo(text,duration,moremsg){ + infoBar.showInfo(text,duration,moremsg); + } + function showWarning(text,duration,moremsg){ + infoBar.showWarning(text,duration,moremsg); + } + function showError(text,duration,moremsg){ + infoBar.showError(text,duration,moremsg); + } + + + } diff --git a/src/res.qrc b/src/res.qrc index 4bd00c49..8e83cb0b 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -18,5 +18,11 @@ controls/FluAppBar.qml controls/FluRectangle.qml controls/FluWindow.qml + controls/FluInfoBar.qml + controls/FluObject.qml + controls/FluIcon.qml + controls/FluDivider.qml + controls/FluTooltip.qml + controls/FluShadow.qml