wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
朱子楚\zhuzi 2023-05-10 00:27:53 +08:00
parent e4accb8064
commit 9c843a7157
26 changed files with 119 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
example/qml/page/T_Home.qml
View File

@ -41,7 +41,7 @@ FluScrollablePage{
}
FluText{
text:"FluentUI Gallery"
fontStyle: FluText.TitleLarge
font: FluTextStyle.TitleLarge
anchors{
top: parent.top
left: parent.left
@ -101,7 +101,7 @@ FluScrollablePage{
}
FluText{
text: model.title
fontStyle: FluText.Body
font: FluTextStyle.Body
Layout.topMargin: 20
Layout.leftMargin: 20
}
@ -184,7 +184,7 @@ FluScrollablePage{
FluText{
id:item_title
text:modelData.title
fontStyle: FluText.BodyStrong
font: FluTextStyle.BodyStrong
anchors{
left: item_icon.right
leftMargin: 20
@ -198,7 +198,7 @@ FluScrollablePage{
color:FluColors.Grey120
wrapMode: Text.WrapAnywhere
elide: Text.ElideRight
fontStyle: FluText.Caption
font: FluTextStyle.Caption
maximumLineCount: 2
anchors{
left: item_title.left
@ -236,7 +236,7 @@ FluScrollablePage{
FluText{
text: "Recently added samples"
fontStyle: FluText.Title
font: FluTextStyle.Title
Layout.topMargin: 20
Layout.leftMargin: 20
}
@ -253,7 +253,7 @@ FluScrollablePage{
FluText{
text: "Recently updated samples"
fontStyle: FluText.Title
font: FluTextStyle.Title
Layout.topMargin: 20
Layout.leftMargin: 20
}

2
example/qml/page/T_Rectangle.qml
View File

@ -67,7 +67,7 @@ FluScrollablePage{
}
FluText{
text:"配合图片使用"
fontStyle: FluText.SubTitle
font: FluTextStyle.SubTitle
Layout.topMargin: 20
}
RowLayout{

6
example/qml/page/T_Settings.qml
View File

@ -28,7 +28,7 @@ FluScrollablePage{
}
FluText{
text:lang.dark_mode
fontStyle: FluText.BodyStrong
font: FluTextStyle.BodyStrong
Layout.bottomMargin: 4
}
Repeater{
@ -62,7 +62,7 @@ FluScrollablePage{
FluText{
text:lang.navigation_view_display_mode
fontStyle: FluText.BodyStrong
font: FluTextStyle.BodyStrong
Layout.bottomMargin: 4
}
Repeater{
@ -93,7 +93,7 @@ FluScrollablePage{
FluText{
text:lang.locale
fontStyle: FluText.BodyStrong
font: FluTextStyle.BodyStrong
Layout.bottomMargin: 4
}

34
example/qml/page/T_Typography.qml
View File

@ -6,7 +6,7 @@ import FluentUI
FluContentPage {
title: "Typography"
property int textSize: FluTheme.textSize
property real textScale: 1
leftPadding:10
rightPadding:10
bottomPadding:20
@ -26,47 +26,49 @@ FluContentPage {
paddings: 10
ColumnLayout{
spacing: 0
scale: textScale
transformOrigin: Item.TopLeft
FluText{
id:text_Display
text:"Display"
padding: 0
pixelSize: textSize
fontStyle: FluText.Display
font: FluTextStyle.Display
}
FluText{
id:text_TitleLarge
text:"Title Large"
padding: 0
pixelSize: textSize
fontStyle: FluText.TitleLarge
font: FluTextStyle.TitleLarge
}
FluText{
id:text_Title
text:"Title"
padding: 0
pixelSize: textSize
fontStyle: FluText.Title
font: FluTextStyle.Title
}
FluText{
id:text_Subtitle
text:"Subtitle"
padding: 0
pixelSize: textSize
fontStyle: FluText.SubTitle
font: FluTextStyle.Subtitle
}
FluText{
id:text_BodyStrong
text:"Body Strong"
padding: 0
pixelSize: textSize
fontStyle: FluText.BodyStrong
font: FluTextStyle.BodyStrong
}
FluText{
id:text_Body
text:"Body"
padding: 0
pixelSize: textSize
fontStyle: FluText.Body
font: FluTextStyle.Body
}
FluText{
id:text_Caption
text:"Caption"
padding: 0
pixelSize: textSize
fontStyle: FluText.Caption
font: FluTextStyle.Caption
}
}
@ -80,7 +82,7 @@ FluContentPage {
topMargin: 30
}
onValueChanged:{
textSize = value/100*6+FluTheme.textSize
textScale = 1+value/100
}
}
}

4
example/qml/window/AboutWindow.qml
View File

@ -34,11 +34,11 @@ FluWindow {
spacing: 14
FluText{
text:"FluentUI"
fontStyle: FluText.Title
font: FluTextStyle.Title
}
FluText{
text:"v%1".arg(appInfo.version)
fontStyle: FluText.Body
font: FluTextStyle.Body
Layout.alignment: Qt.AlignBottom
}
}

38
src/FluTextStyle.cpp Normal file
View File

@ -0,0 +1,38 @@
#include "FluTextStyle.h"
FluTextStyle::FluTextStyle(QObject *parent)
: QObject{parent}
{
QFont caption;
caption.setPixelSize(12);
Caption(caption);
QFont body;
body.setPixelSize(14);
Body(body);
QFont bodyStrong;
bodyStrong.setPixelSize(14);
bodyStrong.setBold(true);
BodyStrong(bodyStrong);
QFont subtitle;
subtitle.setPixelSize(20);
subtitle.setBold(true);
Subtitle(subtitle);
QFont title;
title.setPixelSize(28);
title.setBold(true);
Title(title);
QFont titleLarge;
titleLarge.setPixelSize(40);
titleLarge.setBold(true);
TitleLarge(titleLarge);
QFont display;
display.setPixelSize(68);
display.setBold(true);
Display(display);
}

27
src/FluTextStyle.h Normal file
View File

@ -0,0 +1,27 @@
#ifndef FLUTEXTSTYLE_H
#define FLUTEXTSTYLE_H
#include <QObject>
#include <QtQml/qqml.h>
#include <QFont>
#include "stdafx.h"
class FluTextStyle : public QObject
{
Q_OBJECT
public:
explicit FluTextStyle(QObject *parent = nullptr);
Q_PROPERTY_AUTO(QFont,Caption);
Q_PROPERTY_AUTO(QFont,Body);
Q_PROPERTY_AUTO(QFont,BodyStrong);
Q_PROPERTY_AUTO(QFont,Subtitle);
Q_PROPERTY_AUTO(QFont,Title);
Q_PROPERTY_AUTO(QFont,TitleLarge);
Q_PROPERTY_AUTO(QFont,Display);
QML_NAMED_ELEMENT(FluTextStyle)
QML_SINGLETON
signals:
};
#endif // FLUTEXTSTYLE_H

1
src/FluTheme.cpp
View File

@ -12,7 +12,6 @@ FluTheme::FluTheme(QObject *parent)
Q_EMIT darkChanged();
});
primaryColor(FluApp::fluColors->Blue());
textSize(13);
nativeText(false);
frameless(true);
darkMode(Fluent_DarkMode::Fluent_DarkModeType::Light);

5
src/FluTheme.h
View File

@ -37,11 +37,6 @@ class FluTheme : public QObject
*/
Q_PROPERTY_AUTO(bool,nativeText);
/**
* @brief textSize 文字大小
*/
Q_PROPERTY_AUTO(int,textSize);
QML_NAMED_ELEMENT(FluTheme)
QML_SINGLETON
public:

3
src/imports/FluentUI/Controls/FluAppBar.qml
View File

@ -55,9 +55,6 @@ Rectangle{
leftMargin: 10
}
color:root.textColor
fontStyle: FluText.Title
font.pixelSize: 14
font.bold: true
}
RowLayout{

2
src/imports/FluentUI/Controls/FluButton.qml
View File

@ -18,6 +18,7 @@ Button {
enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
font:FluTextStyle.Body
background: Rectangle{
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
@ -38,6 +39,7 @@ Button {
text: control.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font: control.font
color: {
if(FluTheme.dark){
if(disabled){

4
src/imports/FluentUI/Controls/FluContentDialog.qml
View File

@ -65,7 +65,7 @@ Popup {
FluText{
id:text_title
fontStyle: FluText.TitleLarge
font: FluTextStyle.TitleLarge
text:title
topPadding: 20
leftPadding: 20
@ -80,7 +80,7 @@ Popup {
FluText{
id:text_message
fontStyle: FluText.Body
font: FluTextStyle.Body
wrapMode: Text.WrapAnywhere
text:message
topPadding: 14

2
src/imports/FluentUI/Controls/FluContentPage.qml
View File

@ -17,7 +17,7 @@ Item {
FluText{
id:text_title
fontStyle: FluText.TitleLarge
font: FluTextStyle.TitleLarge
anchors{
top: parent.top
topMargin: control.topPadding

43
src/imports/FluentUI/Controls/FluCopyableText.qml
View File

@ -4,9 +4,7 @@ import FluentUI
TextField {
property int fontStyle: FluText.Body
property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
property int pixelSize : FluTheme.textSize
id:control
color: textColor
@ -27,46 +25,7 @@ TextField {
implicitWidth: text_metrics.width+10
implicitHeight: text_metrics.height
}
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.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.857
case FluText.TitleLarge:
return text.pixelSize * 2.857
case FluText.Title:
return text.pixelSize * 2
case FluText.SubTitle:
return text.pixelSize * 1.428
case FluText.Body:
return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption:
return text.pixelSize * 0.857
default:
return text.pixelSize * 1.0
}
}
font:FluTextStyle.Body
TapHandler {
acceptedButtons: Qt.RightButton
onTapped: control.echoMode !== TextInput.Password && menu.popup()

2
src/imports/FluentUI/Controls/FluFilledButton.qml
View File

@ -19,6 +19,7 @@ Button {
rightPadding:15
Keys.onSpacePressed: control.visualFocus&&clicked()
focusPolicy:Qt.TabFocus
font:FluTextStyle.Body
background: Rectangle{
radius: 4
FluFocusRectangle{
@ -37,6 +38,7 @@ Button {
}
contentItem: FluText {
text: control.text
font: control.font
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: {

43
src/imports/FluentUI/Controls/FluMultilineTextBox.qml
View File

@ -5,8 +5,6 @@ import FluentUI
TextArea{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property bool disabled: false
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
@ -23,6 +21,7 @@ TextArea{
}
return normalColor
}
font:FluTextStyle.Body
wrapMode: Text.WrapAnywhere
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTheme.primaryColor.lightest
@ -35,46 +34,6 @@ TextArea{
}
return placeholderNormalColor
}
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.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.857
case FluText.TitleLarge:
return text.pixelSize * 2.857
case FluText.Title:
return text.pixelSize * 2
case FluText.SubTitle:
return text.pixelSize * 1.428
case FluText.Body:
return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption:
return text.pixelSize * 0.857
default:
return text.pixelSize * 1.0
}
}
selectByMouse: true
background: FluTextBoxBackground{ inputItem: control }
TapHandler {

4
src/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -148,7 +148,7 @@ Item {
width: layout_list.width
FluText{
text:model.title
fontStyle: FluText.BodyStrong
font: FluTextStyle.BodyStrong
anchors{
bottom: parent.bottom
left:parent.left
@ -535,7 +535,7 @@ Item {
Layout.alignment: Qt.AlignVCenter
text:control.title
Layout.leftMargin: 12
fontStyle: FluText.Body
font: FluTextStyle.Body
}
}
}

43
src/imports/FluentUI/Controls/FluPasswordBox.qml
View File

@ -5,8 +5,6 @@ import FluentUI
TextField{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property bool disabled: false
property int iconSource: 0
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@ -24,6 +22,7 @@ TextField{
}
return normalColor
}
font:FluTextStyle.Body
echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTheme.primaryColor.lightest
@ -36,46 +35,6 @@ TextField{
}
return placeholderNormalColor
}
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.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.857
case FluText.TitleLarge:
return text.pixelSize * 2.857
case FluText.Title:
return text.pixelSize * 2
case FluText.SubTitle:
return text.pixelSize * 1.428
case FluText.Body:
return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption:
return text.pixelSize * 0.857
default:
return text.pixelSize * 1.0
}
}
selectByMouse: true
rightPadding: icon_end.visible ? 50 : 30
background: FluTextBoxBackground{

3
src/imports/FluentUI/Controls/FluPivot.qml
View File

@ -57,8 +57,7 @@ Item {
contentItem: Item{
FluText {
id:item_title
fontStyle: FluText.Title
font.bold: false
font: FluTextStyle.Title
text: modelData.title
anchors.centerIn: parent
color: {

2
src/imports/FluentUI/Controls/FluRadioButton.qml
View File

@ -18,6 +18,7 @@ Button {
visible: control.visualFocus
}
}
font:FluTextStyle.Body
Keys.onSpacePressed: control.visualFocus&&clicked()
contentItem: RowLayout{
Rectangle{
@ -97,6 +98,7 @@ Button {
FluText{
text: control.text
Layout.alignment: Qt.AlignVCenter
font: control.font
}
}
}

2
src/imports/FluentUI/Controls/FluScrollablePage.qml
View File

@ -18,7 +18,7 @@ Item {
FluText{
id:text_title
fontStyle: FluText.TitleLarge
font: FluTextStyle.TitleLarge
visible: text !== ""
height: visible?implicitHeight:0
anchors{

4
src/imports/FluentUI/Controls/FluStatusView.qml
View File

@ -58,7 +58,7 @@ Item{
visible: statusMode === FluStatusView.Empty
FluText{
text:"空空如也"
fontStyle: FluText.BodyStrong
font: FluTextStyle.BodyStrong
Layout.alignment: Qt.AlignHCenter
}
}
@ -77,7 +77,7 @@ Item{
anchors.centerIn: parent
FluText{
text:"页面出错了..."
fontStyle: FluText.BodyStrong
font: FluTextStyle.BodyStrong
Layout.alignment: Qt.AlignHCenter
}
FluFilledButton{

2
src/imports/FluentUI/Controls/FluTableView.qml
View File

@ -99,7 +99,7 @@ Item {
left: parent.left
leftMargin: 14
}
fontStyle: FluText.BodyStrong
font: FluTextStyle.BodyStrong
}
FluDivider{
width: 1

53
src/imports/FluentUI/Controls/FluText.qml
View File

@ -4,62 +4,11 @@ import FluentUI
Text {
enum FontStyle {
Display,
TitleLarge,
Title,
SubTitle,
BodyStrong,
Body,
Caption
}
property int fontStyle: FluText.Body
property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
property int pixelSize : FluTheme.textSize
id:text
color: textColor
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
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.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.857
case FluText.TitleLarge:
return text.pixelSize * 2.857
case FluText.Title:
return text.pixelSize * 2
case FluText.SubTitle:
return text.pixelSize * 1.428
case FluText.Body:
return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption:
return text.pixelSize * 0.857
default:
return text.pixelSize * 1.0
}
}
font: FluTextStyle.Body
}

43
src/imports/FluentUI/Controls/FluTextBox.qml
View File

@ -5,8 +5,6 @@ import FluentUI
TextField{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property bool disabled: false
property int iconSource: 0
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@ -24,6 +22,7 @@ TextField{
}
return normalColor
}
font:FluTextStyle.Body
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTheme.primaryColor.lightest
placeholderTextColor: {
@ -35,46 +34,6 @@ TextField{
}
return placeholderNormalColor
}
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.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.857
case FluText.TitleLarge:
return text.pixelSize * 2.857
case FluText.Title:
return text.pixelSize * 2
case FluText.SubTitle:
return text.pixelSize * 1.428
case FluText.Body:
return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption:
return text.pixelSize * 0.857
default:
return text.pixelSize * 1.0
}
}
selectByMouse: true
rightPadding: icon_end.visible ? 50 : 30
background: FluTextBoxBackground{

5
src/imports/FluentUI/Controls/FluTooltip.qml
View File

@ -6,10 +6,11 @@ ToolTip {
id:tool_tip
// property var font: FluTextStyle.Body
contentItem: FluText {
text: tool_tip.text
font: tool_tip.font
fontStyle: FluText.Body
// font: tool_tip.font
padding: 4
wrapMode: Text.WrapAnywhere
}