amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-04 00:55:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzihcu
2023-03-20 18:22:32 +08:00
parent 9545175445
commit e29cb7433e
17 changed files with 220 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/controls/FluAutoSuggestBox.qml
View File

@ -8,11 +8,18 @@ TextField{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property int iconSource: 0
property bool disabled: false
signal itemClicked(string data)
id:input
width: 300
color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
enabled: !disabled
color: {
if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
}
return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
}
selectionColor: {
if(FluTheme.isDark){
return FluTheme.primaryColor.lighter
@ -22,6 +29,9 @@ TextField{
}
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
placeholderTextColor: {
if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
}
if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
}

11
src/controls/FluBadge.qml Normal file
View File

@ -0,0 +1,11 @@
import QtQuick 2.15
Item {
property bool isDot: false
Rectangle{
}
}

12
src/controls/FluMultiLineTextBox.qml
View File

@ -6,10 +6,17 @@ TextArea{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property bool disabled: false
id:input
width: 300
color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
color: {
if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
}
return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
}
enabled: !disabled
wrapMode: Text.WrapAnywhere
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
selectByMouse: true
@ -24,6 +31,9 @@ TextArea{
inputItem: input
}
placeholderTextColor: {
if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
}
if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
}

2
src/controls/FluShadow.qml
View File

@ -4,7 +4,7 @@ Item {
id:root
anchors.fill: parent
anchors.margins: -4
property color color: FluTheme.isDark ? "#FFFFFF" : "#000000"
property color color: FluTheme.isDark ? "#FFFFFF" : "#999999"
property int radius: 4

12
src/controls/FluTextBox.qml
View File

@ -6,10 +6,17 @@ TextField{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property bool disabled: false
id:input
width: 300
color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
enabled: !disabled
color: {
if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
}
return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
}
renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: {
if(FluTheme.isDark){
@ -19,6 +26,9 @@ TextField{
}
}
placeholderTextColor: {
if(disabled){
return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
}
if(focus){
return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
}

21
src/controls/FluTextBoxBackground.qml
View File

@ -9,10 +9,13 @@ Rectangle{
radius: 4
layer.enabled: true
color: {
if(input.focus){
if(inputItem.disabled){
return FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
if(inputItem.focus){
return FluTheme.isDark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
}
if(input.hovered){
if(inputItem.hovered){
return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
return FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
@ -25,16 +28,22 @@ Rectangle{
}
}
border.width: 1
border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
border.color: {
if(inputItem.disabled){
return FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
}
return FluTheme.isDark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
}
Rectangle{
width: parent.width
height: input.focus ? 3 : 1
height: inputItem.focus ? 3 : 1
anchors.bottom: parent.bottom
visible: !inputItem.disabled
color: {
if(FluTheme.isDark){
input.focus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1)
inputItem.focus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1)
}else{
return input.focus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1)
return inputItem.focus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1)
}
}
Behavior on height{

103
src/controls/FluToggleSwitch.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.0
import QtQuick.Controls 2.0
import FluentUI 1.0
import QtQuick.Layouts 1.15
Button {
@ -8,10 +9,8 @@ Button {
property var clickFunc
id: control
width: 40
implicitWidth: 40
height: 20
implicitHeight: 20
implicitHeight: height
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
onClicked: {
@ -21,50 +20,68 @@ Button {
}
selected = !selected
}
background : Rectangle {
width: control.width
height: control.height
radius: height / 2
FluFocusRectangle{
visible: control.visualFocus
radius: 20
}
color: {
if(FluTheme.isDark){
if(selected){
return FluTheme.primaryColor.dark
}
if(hovered){
return "#3E3E3C"
}
return "#323232"
}else{
if(selected){
return FluTheme.primaryColor.dark
}
if(hovered){
return "#F4F4F4"
}
return "#FFFFFF"
}
}
border.width: 1
border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
contentItem: Item{}
background : RowLayout{
spacing: 0
Rectangle {
x: selected ? control.implicitWidth - width - 4 : 4
width: control.height - 8
height: control.height - 8
radius: width / 2
scale: hovered ? 1.2 : 1.0
anchors.verticalCenter: parent.verticalCenter
color: selected ? "#FFFFFF" : "#666666"
Behavior on x {
NumberAnimation { duration: 200 }
id:control_backgound
width: 40
height: control.height
radius: height / 2
smooth: true
antialiasing: true
FluFocusRectangle{
visible: control.visualFocus
radius: 20
}
Behavior on scale {
NumberAnimation { duration: 150 }
color: {
if(FluTheme.isDark){
if(selected){
return FluTheme.primaryColor.dark
}
if(hovered){
return "#3E3E3C"
}
return "#323232"
}else{
if(selected){
return FluTheme.primaryColor.dark
}
if(hovered){
return "#F4F4F4"
}
return "#FFFFFF"
}
}
border.width: 1
border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
Rectangle {
x: selected ? control_backgound.width - width - 4 : 4
width: control.height - 8
height: control.height - 8
radius: width / 2
antialiasing: true
scale: hovered ? 1.2 : 1.0
smooth: true
anchors.verticalCenter: parent.verticalCenter
color: selected ? "#FFFFFF" : "#666666"
Behavior on x {
NumberAnimation { duration: 200 }
}
Behavior on scale {
NumberAnimation { duration: 150 }
}
}
}
FluText{
text: control.text
Layout.leftMargin: 5
visible: text !== ""
}
}
}