From 0867043d7a6781960ecc33fcfefced2b19637529 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?= Date: Thu, 9 Mar 2023 23:11:59 +0800 Subject: [PATCH] update --- example/MainPage.qml | 4 +- example/T_Buttons.qml | 2 +- example/T_Expander.qml | 2 +- example/T_Typography.qml | 38 ++++++++++++++++- src/FluTheme.cpp | 1 + src/FluTheme.h | 1 + src/Fluent.cpp | 3 ++ src/controls/FluAutoSuggestBox.qml | 61 ++++++++++++++++++++++++--- src/controls/FluButton.qml | 1 - src/controls/FluCheckBox.qml | 4 +- src/controls/FluExpander.qml | 2 +- src/controls/FluMultiLineTextBox.qml | 56 ++++++++++++++++++++++++ src/controls/FluSlider.qml | 11 +++-- src/controls/FluText.qml | 12 ++---- src/controls/FluTextBox.qml | 54 ++++++++++++++++++++++++ src/controls/FluTextBoxBackground.qml | 3 ++ src/controls/FluTreeView.qml | 6 +-- 17 files changed, 231 insertions(+), 30 deletions(-) diff --git a/example/MainPage.qml b/example/MainPage.qml index a9b65da..38b1e70 100644 --- a/example/MainPage.qml +++ b/example/MainPage.qml @@ -11,7 +11,7 @@ FluWindow { width: 800 height: 600 title: "FluentUI" - minimumWidth: 600 + minimumWidth: 500 minimumHeight: 400 FluAppBar{ @@ -123,7 +123,6 @@ FluWindow { height: 38 width: nav_list.width - Rectangle{ radius: 4 anchors{ @@ -167,7 +166,6 @@ FluWindow { FluText{ text:model.text anchors.centerIn: parent - fontStyle: FluText.Caption } } diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml index 5733f28..48ab840 100644 --- a/example/T_Buttons.qml +++ b/example/T_Buttons.qml @@ -108,7 +108,7 @@ Item { delegate: FluRadioButton{ checked : repeater.selecIndex===index disabled:radio_button_switch.checked - text:"RodioButton_"+index + text:"Radio Button_"+index onClicked:{ repeater.selecIndex = index } diff --git a/example/T_Expander.qml b/example/T_Expander.qml index e9ea5eb..239dff2 100644 --- a/example/T_Expander.qml +++ b/example/T_Expander.qml @@ -43,7 +43,7 @@ Item { model: 3 delegate: FluRadioButton{ checked : repeater.selecIndex===index - text:"RodioButton_"+index + text:"Radio Button_"+index onClicked:{ repeater.selecIndex = index } diff --git a/example/T_Typography.qml b/example/T_Typography.qml index da7895d..2d35bcc 100644 --- a/example/T_Typography.qml +++ b/example/T_Typography.qml @@ -4,11 +4,15 @@ import QtQuick.Controls 2.15 import FluentUI 1.0 Item { + + property int textSize: 13 + FluText{ id:title text:"Typography" fontStyle: FluText.TitleLarge } + ScrollView{ clip: true width: parent.width @@ -18,40 +22,72 @@ Item { bottom: parent.bottom } ColumnLayout{ - spacing: 5 + spacing: 0 FluText{ text:"Display" Layout.topMargin: 20 + padding: 0 + pixelSize: textSize fontStyle: FluText.Display } FluText{ text:"Title Large" + padding: 0 + pixelSize: textSize fontStyle: FluText.TitleLarge } FluText{ text:"Title" + padding: 0 + pixelSize: textSize fontStyle: FluText.Title } FluText{ text:"Subtitle" + padding: 0 + pixelSize: textSize fontStyle: FluText.Subtitle } FluText{ text:"Body Large" + padding: 0 + pixelSize: textSize fontStyle: FluText.BodyLarge } FluText{ text:"Body Strong" + padding: 0 + pixelSize: textSize fontStyle: FluText.BodyStrong } FluText{ text:"Body" + padding: 0 + pixelSize: textSize fontStyle: FluText.Body } FluText{ text:"Caption" + padding: 0 + pixelSize: textSize fontStyle: FluText.Caption } } } + + + FluSlider{ + orientation:FluSlider.Vertical + anchors{ + right: parent.right + rightMargin: 30 + top: parent.top + topMargin: 30 + } + onValueChanged:{ + textSize = value/100*16+8 + } + value: 31 + } + } diff --git a/src/FluTheme.cpp b/src/FluTheme.cpp index d290ead..1c39df0 100644 --- a/src/FluTheme.cpp +++ b/src/FluTheme.cpp @@ -16,6 +16,7 @@ FluTheme::FluTheme(QObject *parent) : QObject{parent} { primaryColor(FluColors::getInstance()->Blue()); + textSize(13); isFrameless(true); isDark(false); } diff --git a/src/FluTheme.h b/src/FluTheme.h index 0b88a7f..6de6304 100644 --- a/src/FluTheme.h +++ b/src/FluTheme.h @@ -11,6 +11,7 @@ class FluTheme : public QObject Q_PROPERTY_AUTO(FluColorSet*,primaryColor) Q_PROPERTY_AUTO(bool,isFrameless); Q_PROPERTY_AUTO(bool,isDark); + Q_PROPERTY_AUTO(int,textSize); public: explicit FluTheme(QObject *parent = nullptr); static FluTheme *getInstance(); diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 17da8b0..a92557f 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -73,9 +73,12 @@ void Fluent::initializeEngine(QQmlEngine *engine, const char *uri) { Q_UNUSED(engine) Q_UNUSED(uri) +#ifdef Q_OS_WIN QFont font; font.setFamily("Microsoft YaHei"); QGuiApplication::setFont(font); + QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering); +#endif QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf"); FluApp* app = FluApp::getInstance(); engine->rootContext()->setContextProperty("FluApp",app); diff --git a/src/controls/FluAutoSuggestBox.qml b/src/controls/FluAutoSuggestBox.qml index 6fed5a6..43daa70 100644 --- a/src/controls/FluAutoSuggestBox.qml +++ b/src/controls/FluAutoSuggestBox.qml @@ -3,9 +3,13 @@ import QtQuick.Controls 2.15 import FluentUI 1.0 TextField{ + + property var values:[] + property int fontStyle: FluText.Body + property int pixelSize : FluTheme.textSize + id:input width: 300 - property var values:[] color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" selectionColor: { if(FluTheme.isDark){ @@ -14,9 +18,58 @@ TextField{ return FluTheme.primaryColor.dark } } + placeholderTextColor: { + 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.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) + } rightPadding: 30 selectByMouse: true - + font.bold: { + switch (fontStyle) { + 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 input.pixelSize * 4 + case FluText.TitleLarge: + return input.pixelSize * 2 + case FluText.Title: + return input.pixelSize * 1.5 + case FluText.Subtitle: + return input.pixelSize * 0.9 + case FluText.BodyLarge: + return input.pixelSize * 1.1 + case FluText.BodyStrong: + return input.pixelSize * 1.0 + case FluText.Body: + return input.pixelSize * 1.0 + case FluText.Caption: + return input.pixelSize * 0.8 + default: + return input.pixelSize * 1.0 + } + } background: FluTextBoxBackground{ inputItem: input @@ -72,7 +125,7 @@ TextField{ anchors{ verticalCenter: parent.verticalCenter left: parent.left - leftMargin: 15 + leftMargin: 10 } } } @@ -84,8 +137,6 @@ TextField{ anchors.fill: parent anchors.topMargin: 2 anchors.bottomMargin: 2 - anchors.leftMargin: 5 - anchors.rightMargin: 5 color: { if(item_mouse.containsMouse){ return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(234/255,234/255,234/255,1) diff --git a/src/controls/FluButton.qml b/src/controls/FluButton.qml index cfbf82f..757d33c 100644 --- a/src/controls/FluButton.qml +++ b/src/controls/FluButton.qml @@ -37,7 +37,6 @@ Rectangle { FluText { id: button_text text: button.text - font.pixelSize: 14 leftPadding: button.startPadding rightPadding: button.endPadding topPadding: button.topPadding diff --git a/src/controls/FluCheckBox.qml b/src/controls/FluCheckBox.qml index 9e68505..e0e2a5a 100644 --- a/src/controls/FluCheckBox.qml +++ b/src/controls/FluCheckBox.qml @@ -32,8 +32,8 @@ Item { RowLayout{ spacing: 4 Rectangle{ - width: 22 - height: 22 + width: 20 + height: 20 radius: 4 border.color: { if(disabled){ diff --git a/src/controls/FluExpander.qml b/src/controls/FluExpander.qml index 699b385..0b4c8ea 100644 --- a/src/controls/FluExpander.qml +++ b/src/controls/FluExpander.qml @@ -18,7 +18,7 @@ Item { Rectangle{ id:layout_header width: parent.width - height: 50 + height: 45 radius: 4 border.color: FluTheme.isDark ? Qt.rgba(53/255,53/255,53/255,1) : Qt.rgba(240/255,240/255,240/255,1) color: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) diff --git a/src/controls/FluMultiLineTextBox.qml b/src/controls/FluMultiLineTextBox.qml index 9c72025..4c9a455 100644 --- a/src/controls/FluMultiLineTextBox.qml +++ b/src/controls/FluMultiLineTextBox.qml @@ -3,6 +3,10 @@ import QtQuick.Controls 2.15 import FluentUI 1.0 TextArea{ + + property int fontStyle: FluText.Body + property int pixelSize : FluTheme.textSize + id:input width: 300 color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" @@ -18,5 +22,57 @@ TextArea{ background: FluTextBoxBackground{ inputItem: input } + placeholderTextColor: { + 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.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) + } + font.bold: { + switch (fontStyle) { + 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 input.pixelSize * 4 + case FluText.TitleLarge: + return input.pixelSize * 2 + case FluText.Title: + return input.pixelSize * 1.5 + case FluText.Subtitle: + return input.pixelSize * 0.9 + case FluText.BodyLarge: + return input.pixelSize * 1.1 + case FluText.BodyStrong: + return input.pixelSize * 1.0 + case FluText.Body: + return input.pixelSize * 1.0 + case FluText.Caption: + return input.pixelSize * 0.8 + default: + return input.pixelSize * 1.0 + } + } + } diff --git a/src/controls/FluSlider.qml b/src/controls/FluSlider.qml index b9a3799..cd9f732 100644 --- a/src/controls/FluSlider.qml +++ b/src/controls/FluSlider.qml @@ -6,8 +6,10 @@ Item{ id:root - property int lineWidth: 5 + property int lineSize: 5 + property int size: 180 property int dotSize: 26 + property int value: 50 enum Orientation { @@ -22,6 +24,8 @@ Item{ property bool isHorizontal: orientation === FluSlider.Horizontal + rotation: isHorizontal ? 0 : 180 + Component.onCompleted: { if(isHorizontal){ dot.x =value/100*control.width - dotSize/2 @@ -38,8 +42,8 @@ Item{ FluRectangle { id: control - width: isHorizontal ? 200 : root.lineWidth - height: isHorizontal ? root.lineWidth : 200 + width: isHorizontal ? size : root.lineSize + height: isHorizontal ? root.lineSize : size radius: [3,3,3,3] clip: true anchors.verticalCenter: parent.verticalCenter @@ -101,6 +105,7 @@ Item{ FluTooltip{ id:tool_tip text:String(root.value) + y: isHorizontal ? -40 : 32 } } diff --git a/src/controls/FluText.qml b/src/controls/FluText.qml index c1f130e..ca3d6ff 100644 --- a/src/controls/FluText.qml +++ b/src/controls/FluText.qml @@ -3,7 +3,9 @@ import FluentUI 1.0 Text { - id:text + property int fontStyle: FluText.Body + property color textColor: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" + property int pixelSize : FluTheme.textSize enum FontStyle { Display, @@ -16,12 +18,8 @@ Text { Caption } - property int fontStyle: FluText.Body - property color textColor: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" - property int pixelSize : 14 - + id:text color: textColor - font.bold: { switch (fontStyle) { case FluText.Display: @@ -44,7 +42,6 @@ Text { return false } } - font.pixelSize: { switch (fontStyle) { case FluText.Display: @@ -68,5 +65,4 @@ Text { } } - } diff --git a/src/controls/FluTextBox.qml b/src/controls/FluTextBox.qml index 5d44386..72e3118 100644 --- a/src/controls/FluTextBox.qml +++ b/src/controls/FluTextBox.qml @@ -3,6 +3,10 @@ import QtQuick.Controls 2.15 import FluentUI 1.0 TextField{ + + property int fontStyle: FluText.Body + property int pixelSize : FluTheme.textSize + id:input width: 300 color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" @@ -13,6 +17,56 @@ TextField{ return FluTheme.primaryColor.dark } } + placeholderTextColor: { + 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.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1) + } + font.bold: { + switch (fontStyle) { + 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 input.pixelSize * 4 + case FluText.TitleLarge: + return input.pixelSize * 2 + case FluText.Title: + return input.pixelSize * 1.5 + case FluText.Subtitle: + return input.pixelSize * 0.9 + case FluText.BodyLarge: + return input.pixelSize * 1.1 + case FluText.BodyStrong: + return input.pixelSize * 1.0 + case FluText.Body: + return input.pixelSize * 1.0 + case FluText.Caption: + return input.pixelSize * 0.8 + default: + return input.pixelSize * 1.0 + } + } selectByMouse: true background: FluTextBoxBackground{ inputItem: input diff --git a/src/controls/FluTextBoxBackground.qml b/src/controls/FluTextBoxBackground.qml index 30c6c59..c02f0b5 100644 --- a/src/controls/FluTextBoxBackground.qml +++ b/src/controls/FluTextBoxBackground.qml @@ -9,6 +9,9 @@ Rectangle{ radius: 4 layer.enabled: true color: { + if(input.focus){ + return FluTheme.isDark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1) + } if(input.hovered){ return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) } diff --git a/src/controls/FluTreeView.qml b/src/controls/FluTreeView.qml index 7541abb..277d942 100644 --- a/src/controls/FluTreeView.qml +++ b/src/controls/FluTreeView.qml @@ -198,8 +198,6 @@ Rectangle { } } } - - } checkClicked:function(){ @@ -239,8 +237,8 @@ Rectangle { FluText { text: item_layout.text Layout.alignment: Qt.AlignVCenter - topPadding: 10 - bottomPadding: 10 + topPadding: 7 + bottomPadding: 7 } } }