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

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2023-03-09 23:11:59 +08:00
parent e2cefb6114
commit 0867043d7a
17 changed files with 231 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
example/MainPage.qml
View File

@ -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
}
}

2
example/T_Buttons.qml
View File

@ -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
}

2
example/T_Expander.qml
View File

@ -43,7 +43,7 @@ Item {
model: 3
delegate: FluRadioButton{
checked : repeater.selecIndex===index
text:"RodioButton_"+index
text:"Radio Button_"+index
onClicked:{
repeater.selecIndex = index
}

38
example/T_Typography.qml
View File

@ -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
}
}

1
src/FluTheme.cpp
View File

@ -16,6 +16,7 @@ FluTheme::FluTheme(QObject *parent)
: QObject{parent}
{
primaryColor(FluColors::getInstance()->Blue());
textSize(13);
isFrameless(true);
isDark(false);
}

1
src/FluTheme.h
View File

@ -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();

3
src/Fluent.cpp
View File

@ -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);

61
src/controls/FluAutoSuggestBox.qml
View File

@ -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)

1
src/controls/FluButton.qml
View File

@ -37,7 +37,6 @@ Rectangle {
FluText {
id: button_text
text: button.text
font.pixelSize: 14
leftPadding: button.startPadding
rightPadding: button.endPadding
topPadding: button.topPadding

4
src/controls/FluCheckBox.qml
View File

@ -32,8 +32,8 @@ Item {
RowLayout{
spacing: 4
Rectangle{
width: 22
height: 22
width: 20
height: 20
radius: 4
border.color: {
if(disabled){

2
src/controls/FluExpander.qml
View File

@ -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)

56
src/controls/FluMultiLineTextBox.qml
View File

@ -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
}
}
}

11
src/controls/FluSlider.qml
View File

@ -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
}
}

12
src/controls/FluText.qml
View File

@ -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 {
}
}
}

54
src/controls/FluTextBox.qml
View File

@ -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

3
src/controls/FluTextBoxBackground.qml
View File

@ -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)
}

6
src/controls/FluTreeView.qml
View File

@ -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
}
}
}