diff --git a/example/App.qml b/example/App.qml index 0c86219..d71ef1d 100644 --- a/example/App.qml +++ b/example/App.qml @@ -9,6 +9,7 @@ Window { id:app color: "#00000000" Component.onCompleted: { + FluApp.isFps = true FluApp.setAppWindow(app) FluApp.routes = { "/":"qrc:/MainPage.qml", diff --git a/example/MainPage.qml b/example/MainPage.qml index 8047cb9..9883898 100644 --- a/example/MainPage.qml +++ b/example/MainPage.qml @@ -10,6 +10,8 @@ FluWindow { width: 800 height: 600 title: "FluentUI" + minimumSize: Qt.size(600,400) + // property var maximumSize FluAppBar{ id:appbar @@ -26,6 +28,10 @@ FluWindow { text:"ToggleSwitch" page:"qrc:/T_ToggleSwitch.qml" } + ListElement{ + text:"Slider" + page:"qrc:/T_Slider.qml" + } ListElement{ text:"InfoBar" page:"qrc:/T_InfoBar.qml" @@ -36,7 +42,7 @@ FluWindow { } ListElement{ text:"Rectangle" - page:"qrc:/T-Rectangle.qml" + page:"qrc:/T_Rectangle.qml" } ListElement{ text:"Typography" diff --git a/example/T-Rectangle.qml b/example/T-Rectangle.qml deleted file mode 100644 index ebad9aa..0000000 --- a/example/T-Rectangle.qml +++ /dev/null @@ -1,60 +0,0 @@ -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 - Layout.topMargin: 20 - } - - 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_Rectangle.qml b/example/T_Rectangle.qml new file mode 100644 index 0000000..2da12ef --- /dev/null +++ b/example/T_Rectangle.qml @@ -0,0 +1,145 @@ +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 + } + + RowLayout{ + Layout.topMargin: 20 + + FluRectangle{ + width: 50 + height: 50 + color:"#0078d4" + radius:[0,0,0,0] + } + + FluRectangle{ + width: 50 + height: 50 + color:"#744da9" + radius:[15,15,15,15] + } + + 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] + } + + } + + FluText{ + text:"配合图片使用" + fontStyle: FluText.Subtitle + Layout.topMargin: 20 + } + + RowLayout{ + spacing: 14 + FluRectangle{ + width: 50 + height: 50 + radius:[25,0,25,25] + Image { + asynchronous: true + anchors.fill: parent + source: "qrc:/res/svg/avatar_1.svg" + } + layer.enabled: true + layer.effect: FluDropShadow {} + + } + FluRectangle{ + width: 50 + height: 50 + radius:[10,10,10,10] + Image { + asynchronous: true + anchors.fill: parent + source: "qrc:/res/svg/avatar_2.svg" + } + layer.enabled: true + layer.effect: FluDropShadow {} + } + FluRectangle{ + width: 50 + height: 50 + radius:[25,25,25,25] + Image { + asynchronous: true + anchors.fill: parent + source: "qrc:/res/svg/avatar_3.svg" + } + layer.enabled: true + layer.effect: DropShadow { + radius: 5 + samples: 4 + color: "#80000000" + } + } + FluRectangle{ + width: 50 + height: 50 + radius:[0,25,25,25] + Image { + asynchronous: true + anchors.fill: parent + source: "qrc:/res/svg/avatar_4.svg" + } + layer.enabled: true + layer.effect: FluDropShadow {} + } + } + + FluRectangle{ + width: 1080/5 + height: 1439/5 + radius:[25,25,25,25] + Image { + asynchronous: true + source: "qrc:/res/image/image_huoyin.webp" + anchors.fill: parent + } + Layout.topMargin: 10 + layer.enabled: true + layer.effect: FluDropShadow {} + } + + + + + } +} diff --git a/example/T_Slider.qml b/example/T_Slider.qml new file mode 100644 index 0000000..51519b0 --- /dev/null +++ b/example/T_Slider.qml @@ -0,0 +1,27 @@ +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:"Slider" + fontStyle: FluText.TitleLarge + } + + FluSlider{ + Layout.topMargin: 20 + value: 50 + } + + + } + + +} diff --git a/example/qml.qrc b/example/qml.qrc index 56244fd..47c0b13 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -7,8 +7,22 @@ SettingPage.qml AboutPage.qml T_Buttons.qml - T-Rectangle.qml + T_Rectangle.qml T_InfoBar.qml T_Progress.qml + T_Slider.qml + res/image/image_huoyin.webp + res/svg/avatar_1.svg + res/svg/avatar_2.svg + res/svg/avatar_3.svg + res/svg/avatar_4.svg + res/svg/avatar_5.svg + res/svg/avatar_6.svg + res/svg/avatar_7.svg + res/svg/avatar_8.svg + res/svg/avatar_9.svg + res/svg/avatar_10.svg + res/svg/avatar_11.svg + res/svg/avatar_12.svg diff --git a/example/res/image/image_huoyin.webp b/example/res/image/image_huoyin.webp new file mode 100644 index 0000000..1b6557d Binary files /dev/null and b/example/res/image/image_huoyin.webp differ diff --git a/example/res/svg/avatar_1.svg b/example/res/svg/avatar_1.svg new file mode 100644 index 0000000..8ea966a --- /dev/null +++ b/example/res/svg/avatar_1.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_10.svg b/example/res/svg/avatar_10.svg new file mode 100644 index 0000000..b729a36 --- /dev/null +++ b/example/res/svg/avatar_10.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_11.svg b/example/res/svg/avatar_11.svg new file mode 100644 index 0000000..2859ab2 --- /dev/null +++ b/example/res/svg/avatar_11.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_12.svg b/example/res/svg/avatar_12.svg new file mode 100644 index 0000000..b76d2a9 --- /dev/null +++ b/example/res/svg/avatar_12.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_2.svg b/example/res/svg/avatar_2.svg new file mode 100644 index 0000000..40ddfc9 --- /dev/null +++ b/example/res/svg/avatar_2.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_3.svg b/example/res/svg/avatar_3.svg new file mode 100644 index 0000000..93dfa60 --- /dev/null +++ b/example/res/svg/avatar_3.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_4.svg b/example/res/svg/avatar_4.svg new file mode 100644 index 0000000..bbc845a --- /dev/null +++ b/example/res/svg/avatar_4.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_5.svg b/example/res/svg/avatar_5.svg new file mode 100644 index 0000000..98d4f7d --- /dev/null +++ b/example/res/svg/avatar_5.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_6.svg b/example/res/svg/avatar_6.svg new file mode 100644 index 0000000..11541a6 --- /dev/null +++ b/example/res/svg/avatar_6.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_7.svg b/example/res/svg/avatar_7.svg new file mode 100644 index 0000000..2c0840b --- /dev/null +++ b/example/res/svg/avatar_7.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_8.svg b/example/res/svg/avatar_8.svg new file mode 100644 index 0000000..26ebb64 --- /dev/null +++ b/example/res/svg/avatar_8.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/example/res/svg/avatar_9.svg b/example/res/svg/avatar_9.svg new file mode 100644 index 0000000..3c16a75 --- /dev/null +++ b/example/res/svg/avatar_9.svg @@ -0,0 +1 @@ +touxiang \ No newline at end of file diff --git a/src/FluApp.cpp b/src/FluApp.cpp index 3306199..2b75b0a 100644 --- a/src/FluApp.cpp +++ b/src/FluApp.cpp @@ -22,6 +22,7 @@ FluApp::FluApp(QObject *parent) : QObject{parent} { isDark(true); + isFps(true); } diff --git a/src/FluApp.h b/src/FluApp.h index bfc0419..8dcd685 100644 --- a/src/FluApp.h +++ b/src/FluApp.h @@ -12,6 +12,7 @@ class FluApp : public QObject Q_OBJECT Q_PROPERTY_AUTO(QString,initialRoute); Q_PROPERTY_AUTO(bool,isDark); + Q_PROPERTY_AUTO(bool,isFps); Q_PROPERTY_AUTO(QJsonObject,routes); public: diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 87e8d03..9877987 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -30,7 +30,7 @@ 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/FluDropShadow.qml"),uri,major,minor,"FluDropShadow"); 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"); diff --git a/src/WindowHelper.cpp b/src/WindowHelper.cpp index dabade5..65ad722 100644 --- a/src/WindowHelper.cpp +++ b/src/WindowHelper.cpp @@ -14,3 +14,10 @@ void WindowHelper::setTitle(const QString& text){ void WindowHelper::initWindow(FramelessView* window){ this->window = window; } + +void WindowHelper::setMinimumSize(const QSize &size){ + this->window->setMinimumSize(size); +} +void WindowHelper::setMaximumSize(const QSize &size){ + this->window->setMaximumSize(size); +} diff --git a/src/WindowHelper.h b/src/WindowHelper.h index 678ea5b..8258d2c 100644 --- a/src/WindowHelper.h +++ b/src/WindowHelper.h @@ -16,6 +16,8 @@ public: Q_INVOKABLE void initWindow(FramelessView* window); Q_INVOKABLE void setTitle(const QString& text); + Q_INVOKABLE void setMinimumSize(const QSize &size); + Q_INVOKABLE void setMaximumSize(const QSize &size); private: FramelessView* window; diff --git a/src/build-preset/plugins.qmltypes b/src/build-preset/plugins.qmltypes index f237561..f4075a3 100644 --- a/src/build-preset/plugins.qmltypes +++ b/src/build-preset/plugins.qmltypes @@ -817,6 +817,14 @@ Module { name: "setTitle" Parameter { name: "text"; type: "string" } } + Method { + name: "setMinimumSize" + Parameter { name: "size"; type: "QSize" } + } + Method { + name: "setMaximumSize" + Parameter { name: "size"; type: "QSize" } + } } Component { prototype: "QQuickRectangle" @@ -896,6 +904,24 @@ Module { isComposite: true defaultProperty: "data" } + Component { + prototype: "QQuickItem" + name: "FluentUI/FluDropShadow 1.0" + exports: ["FluentUI/FluDropShadow 1.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + Property { name: "fast"; type: "bool" } + Property { name: "source"; type: "QVariant" } + Property { name: "radius"; type: "double" } + Property { name: "samples"; type: "int" } + Property { name: "color"; type: "QColor" } + Property { name: "horizontalOffset"; type: "double" } + Property { name: "verticalOffset"; type: "double" } + Property { name: "spread"; type: "double" } + Property { name: "cached"; type: "bool" } + Property { name: "transparentBorder"; type: "bool" } + } Component { prototype: "QQuickRectangle" name: "FluentUI/FluFilledButton 1.0" @@ -1072,17 +1098,6 @@ Module { 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" name: "FluentUI/FluSlider 1.0" @@ -1161,6 +1176,8 @@ Module { defaultProperty: "data" Property { name: "isMax"; type: "bool" } Property { name: "title"; type: "string" } + Property { name: "minimumSize"; type: "QVariant" } + Property { name: "maximumSize"; type: "QVariant" } Property { name: "window"; type: "QVariant" } Method { name: "showSuccess" diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml index 753020f..92c9066 100644 --- a/src/controls/FluAppBar.qml +++ b/src/controls/FluAppBar.qml @@ -53,6 +53,13 @@ Rectangle{ height: parent.height spacing: 5 + TFpsMonitor{ + Layout.alignment: Qt.AlignVCenter + Layout.rightMargin: 12 + Layout.topMargin: 5 + visible: FluApp.isFps + } + RowLayout{ Layout.alignment: Qt.AlignVCenter spacing: 5 diff --git a/src/controls/FluDropShadow.qml b/src/controls/FluDropShadow.qml new file mode 100644 index 0000000..58e5566 --- /dev/null +++ b/src/controls/FluDropShadow.qml @@ -0,0 +1,8 @@ +import QtQuick 2.15 +import QtGraphicalEffects 1.15 + +DropShadow { + radius: 5 + samples: 4 + color: FluApp.isDark ? "#80FFFFFF" : "#80000000" +} diff --git a/src/controls/FluProgressBar.qml b/src/controls/FluProgressBar.qml index c81c172..70a6176 100644 --- a/src/controls/FluProgressBar.qml +++ b/src/controls/FluProgressBar.qml @@ -1,7 +1,6 @@ import QtQuick 2.12 import QtQuick.Controls 2.12 -//进度条4 FluRectangle { id: control @@ -9,51 +8,41 @@ FluRectangle { height: 6 radius: [3,3,3,3] clip: true - color:Qt.rgba(214/255,214/255,214/255,1) - property real progress: 0.25 + color: FluApp.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1) + property real progress: 0.5 property bool indeterminate: true Component.onCompleted: { - anim.enabled = false if(indeterminate){ - rect.x = -control.width*0.5 + bar.x = -control.width*0.5 + behavior.enabled = true + bar.x = control.width }else{ - rect.x = 0 + bar.x = 0 } - anim.enabled = true - } + } Rectangle{ - id:rect + id:bar radius: 3 width: control.width*progress height: control.height - color:Qt.rgba(0/255,102/255,180/255,1) + color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(0/255,102/255,180/255,1) Behavior on x{ - id:anim - enabled: true + id:behavior + enabled: false NumberAnimation{ - duration: 800 + duration: 1000 onRunningChanged: { if(!running){ - anim.enabled = false - rect.x = -control.width*0.5 - anim.enabled = true - timer.start() + behavior.enabled = false + bar.x = -control.width*0.5 + behavior.enabled = true + bar.x = control.width } } } } - - Timer{ - id:timer - running: indeterminate - interval: 800 - triggeredOnStart: true - onTriggered: { - rect.x = control.width - } - } } } diff --git a/src/controls/FluProgressRing.qml b/src/controls/FluProgressRing.qml index d2d857f..96c1b5f 100644 --- a/src/controls/FluProgressRing.qml +++ b/src/controls/FluProgressRing.qml @@ -1,7 +1,6 @@ import QtQuick 2.12 import QtQuick.Controls 2.12 -//进度条4 Rectangle { id: control @@ -10,28 +9,42 @@ Rectangle { radius: 30 border.width: linWidth color: "#00000000" - border.color: Qt.rgba(214/255,214/255,214/255,1) + border.color: FluApp.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1) property real linWidth : 6 property real progress: 0.25 property bool indeterminate: true readonly property real radius2 : radius - linWidth/2 - property color primaryColor : Qt.rgba(0/255,102/255,180/255,1) + property color primaryColor : FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(0/255,102/255,180/255,1) onProgressChanged: { canvas.requestPaint() } + Connections{ + target: FluApp + function onIsDarkChanged(isDark){ + canvas.requestPaint() + } + } + + Component.onCompleted: { + if(indeterminate){ + behavior.enabled = true + control.rotation = 360 + } + } + Behavior on rotation{ - id:anim - enabled: true + id:behavior + enabled: false NumberAnimation{ - duration: 800 + duration: 1000 onRunningChanged: { if(!running){ - anim.enabled = false + behavior.enabled = false control.rotation = 0 - anim.enabled = true - timer.start() + behavior.enabled = true + control.rotation = 360 } } } @@ -54,30 +67,21 @@ Rectangle { ctx.arc(width/2, height/2, radius2 ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI); ctx.stroke(); ctx.closePath(); -// var start_x = width/2 + Math.cos(-0.5 * Math.PI) * radius2; -// var start_y = height/2 + Math.sin(-0.5 * Math.PI) * radius2; -// ctx.beginPath(); -// ctx.arc(start_x, start_y, 3, 0, 2*Math.PI); -// ctx.fill(); -// ctx.closePath(); -// var end_x = width/2 + Math.cos(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2; -// var end_y = height/2 + Math.sin(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2; -// ctx.beginPath(); -// ctx.arc(end_x, end_y, 3, 0, 2*Math.PI); -// ctx.fill(); -// ctx.closePath(); + // var start_x = width/2 + Math.cos(-0.5 * Math.PI) * radius2; + // var start_y = height/2 + Math.sin(-0.5 * Math.PI) * radius2; + // ctx.beginPath(); + // ctx.arc(start_x, start_y, 3, 0, 2*Math.PI); + // ctx.fill(); + // ctx.closePath(); + // var end_x = width/2 + Math.cos(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2; + // var end_y = height/2 + Math.sin(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2; + // ctx.beginPath(); + // ctx.arc(end_x, end_y, 3, 0, 2*Math.PI); + // ctx.fill(); + // ctx.closePath(); ctx.restore(); } } - Timer{ - id:timer - running: indeterminate - interval: 800 - triggeredOnStart: true - onTriggered: { - control.rotation = 360 - } - } } diff --git a/src/controls/FluRectangle.qml b/src/controls/FluRectangle.qml index 721e75c..ea14824 100644 --- a/src/controls/FluRectangle.qml +++ b/src/controls/FluRectangle.qml @@ -1,13 +1,12 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 -import QtQuick.Shapes 1.15 import QtGraphicalEffects 1.15 Item{ id:root property var radius:[0,0,0,0] property color color : "#FFFFFF" - property color borderColor:"transparent" + property color borderColor:"red" property int borderWidth: 1 default property alias contentItem: container.children @@ -20,35 +19,40 @@ Item{ } - Shape { - id: shape - width: root.width - height: root.height - layer.enabled: true - layer.samples: 4 - layer.smooth: true + Canvas { + id: canvas + anchors.fill: parent 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] } + onPaint: { + var ctx = getContext("2d"); + var x = 0; + var y = 0; + var w = root.width; + var h = root.height; + ctx.setTransform(1, 0, 0, 1, 0, 0); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.save(); + ctx.beginPath(); + ctx.moveTo(x + radius[0], y); + ctx.lineTo(x + w - radius[1], y); + ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1]); + ctx.lineTo(x + w, y + h - radius[2]); + ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2]); + ctx.lineTo(x + radius[3], y + h); + ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3]); + ctx.lineTo(x, y + radius[0]); + ctx.arcTo(x, y, x + radius[0], y, radius[0]); + ctx.closePath(); + ctx.fillStyle = root.color; + ctx.fill(); + ctx.restore(); } } OpacityMask { anchors.fill: container source: container - maskSource: shape + maskSource: canvas } } diff --git a/src/controls/FluShadow.qml b/src/controls/FluShadow.qml deleted file mode 100644 index 4e100ac..0000000 --- a/src/controls/FluShadow.qml +++ /dev/null @@ -1,71 +0,0 @@ -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 f245aab..fea3a56 100644 --- a/src/controls/FluSlider.qml +++ b/src/controls/FluSlider.qml @@ -26,18 +26,16 @@ Item{ radius: [3,3,3,3] clip: true anchors.verticalCenter: parent.verticalCenter - color:Qt.rgba(138/255,138/255,138/255,1) - + color:FluApp.isDark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1) Rectangle{ id:rect radius: 3 width: control.width*(value/100) height: control.height - color:Qt.rgba(0/255,102/255,180/255,1) + color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) :Qt.rgba(0/255,102/255,180/255,1) } - - } + Rectangle{ id:dot width: dotSize @@ -45,16 +43,13 @@ Item{ radius: 15 anchors.verticalCenter: parent.verticalCenter layer.enabled: true - layer.effect: DropShadow { - radius: 5 - samples: 4 - color: "#80000000" - } + color:FluApp.isDark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1) + layer.effect: FluDropShadow {} Rectangle{ width: dotSize/2 height: dotSize/2 radius: dotSize/4 - color:Qt.rgba(0/255,102/255,180/255,1) + color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) :Qt.rgba(0/255,102/255,180/255,1) anchors.centerIn: parent scale: control_mouse.containsMouse ? 1.2 : 1 Behavior on scale { diff --git a/src/controls/FluTooltip.qml b/src/controls/FluTooltip.qml index f71a389..4496346 100644 --- a/src/controls/FluTooltip.qml +++ b/src/controls/FluTooltip.qml @@ -19,10 +19,6 @@ ToolTip { 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" - } + layer.effect: FluDropShadow {} } } diff --git a/src/controls/FluWindow.qml b/src/controls/FluWindow.qml index db93926..dafb41c 100644 --- a/src/controls/FluWindow.qml +++ b/src/controls/FluWindow.qml @@ -12,6 +12,8 @@ Rectangle { return Window.Maximized === Window.window.visibility } property string title: "FluentUI" + property var minimumSize + property var maximumSize Behavior on opacity{ NumberAnimation{ @@ -47,6 +49,12 @@ Rectangle { if(FluApp.equalsWindow(view,window)){ helper.initWindow(view); helper.setTitle(title); + if(minimumSize){ + helper.setMinimumSize(minimumSize) + } + if(maximumSize){ + helper.setMaximumSize(maximumSize) + } } } } diff --git a/src/controls/TFpsMonitor.qml b/src/controls/TFpsMonitor.qml new file mode 100644 index 0000000..e114dbd --- /dev/null +++ b/src/controls/TFpsMonitor.qml @@ -0,0 +1,70 @@ +import QtQuick 2.15 +import FluentUI 1.0 + + +/*! TODO */ +Item { + id: toou2d_fps + width: contentItemLoader.width + 5; + height: contentItemLoader.height + 5; + + readonly property alias fps: _private.fps; + readonly property alias fpsAvg: _private.fpsAvg; + + property color color: "#C0C0C0" + property Component contentItem: contentComponent; + + Component{ + id:contentComponent + FluText{ + text: " Avg " + fpsAvg + " | " + fps + " Fps"; + } + } + + FluObject{ + id:_private; + property int frameCounter: 0 + property int frameCounterAvg: 0 + property int counter: 0 + property int fps: 0 + property int fpsAvg: 0 + } + + Rectangle { + id: monitor + radius: 3 + width: 6 + height: width + opacity: 0; + + NumberAnimation on rotation { + from:0 + to: 360 + duration: 800 + loops: Animation.Infinite + } + onRotationChanged: _private.frameCounter++; + } + + Loader{ + id:contentItemLoader + sourceComponent: contentItem + } + + Timer { + interval: 2000 + repeat: true + running: visible + onTriggered: { + _private.frameCounterAvg += _private.frameCounter; + _private.fps = _private.frameCounter/2; + _private.counter++; + _private.frameCounter = 0; + if (_private.counter >= 3) { + _private.fpsAvg = _private.frameCounterAvg/(2 * _private.counter) + _private.frameCounterAvg = 0; + _private.counter = 0; + } + } + } +} diff --git a/src/res.qrc b/src/res.qrc index 8e83cb0..4061d98 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -23,6 +23,7 @@ controls/FluIcon.qml controls/FluDivider.qml controls/FluTooltip.qml - controls/FluShadow.qml + controls/FluDropShadow.qml + controls/TFpsMonitor.qml