amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-02 08:05:29 +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
Download Patch File Download Diff File Expand all files Collapse all files

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