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

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2024-04-03 19:30:15 +08:00
parent c2b845658d
commit 5cf0812562
39 changed files with 319 additions and 494 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/FluColors.cpp
View File

@ -1,4 +1,5 @@
#include "FluColors.h"
#include "FluTools.h"
FluColors::FluColors(QObject *parent):QObject{parent}{
Transparent(QColor(0, 0, 0, 0));
@ -111,17 +112,12 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
FluAccentColor* FluColors::createAccentColor(QColor primaryColor){
FluAccentColor *accentColor = new FluAccentColor(this);
accentColor->darkest(withOpacity(primaryColor,0.7));
accentColor->darker(withOpacity(primaryColor,0.8));
accentColor->dark(withOpacity(primaryColor,0.9));
accentColor->darkest(FluTools::getInstance()->withOpacity(primaryColor,0.7));
accentColor->darker(FluTools::getInstance()->withOpacity(primaryColor,0.8));
accentColor->dark(FluTools::getInstance()->withOpacity(primaryColor,0.9));
accentColor->normal(primaryColor);
accentColor->light(withOpacity(primaryColor,0.9));
accentColor->lighter(withOpacity(primaryColor,0.8));
accentColor->lightest(withOpacity(primaryColor,0.7));
accentColor->light(FluTools::getInstance()->withOpacity(primaryColor,0.9));
accentColor->lighter(FluTools::getInstance()->withOpacity(primaryColor,0.8));
accentColor->lightest(FluTools::getInstance()->withOpacity(primaryColor,0.7));
return accentColor;
}
QColor FluColors::withOpacity(QColor color,qreal opacity){
int alpha = qRound(opacity * 255) & 0xff;
return QColor::fromRgba((alpha << 24) | (color.rgba() & 0xffffff));
}

2
src/FluColors.h
View File

@ -3,6 +3,7 @@
#include <QObject>
#include <QtQml/qqml.h>
#include "FluAccentColor.h"
#include "stdafx.h"
#include "singleton.h"
@ -50,7 +51,6 @@ class FluColors : public QObject
QML_SINGLETON
private:
explicit FluColors(QObject *parent = nullptr);
QColor withOpacity(QColor color,qreal opacity);
public:
SINGLETON(FluColors)
Q_INVOKABLE FluAccentColor* createAccentColor(QColor primaryColor);

5
src/FluTools.cpp
View File

@ -119,8 +119,9 @@ QUrl FluTools::getUrlByFilePath(const QString& path){
return QUrl::fromLocalFile(path);
}
QColor FluTools::colorAlpha(const QColor& color,qreal alpha){
return QColor(color.red(),color.green(),color.blue(),255*alpha);
QColor FluTools::withOpacity(const QColor& color,qreal opacity){
int alpha = qRound(opacity * 255) & 0xff;
return QColor::fromRgba((alpha << 24) | (color.rgba() & 0xffffff));
}
QString FluTools::md5(QString text){

2
src/FluTools.h
View File

@ -39,7 +39,7 @@ public:
Q_INVOKABLE QRect getVirtualGeometry();
Q_INVOKABLE QString getApplicationDirPath();
Q_INVOKABLE QUrl getUrlByFilePath(const QString& path);
Q_INVOKABLE QColor colorAlpha(const QColor&,qreal alpha);
Q_INVOKABLE QColor withOpacity(const QColor&,qreal alpha);
Q_INVOKABLE QString md5(QString text);
Q_INVOKABLE QString sha256(QString text);
Q_INVOKABLE QString toBase64(QString text);

14
src/Qt5/imports/FluentUI/Controls/FluButton.qml
View File

@ -7,7 +7,7 @@ Button {
property string contentDescription: ""
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color dividerColor: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(233/255,233/255,233/255,1)
property color textColor: {
if(FluTheme.dark){
@ -38,18 +38,18 @@ Button {
horizontalPadding:12
font:FluTextStyle.Body
focusPolicy:Qt.TabFocus
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
border.color: control.dividerColor
border.width: 1
background: FluControlBackground{
implicitWidth: 30
implicitHeight: 30
radius: 4
color:{
color: {
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor
}
shadow: enabled
border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
FluFocusRectangle{
visible: control.activeFocus
radius:4

2
src/Qt5/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -45,7 +45,7 @@ T.ComboBox {
topPadding: 6 - control.padding
bottomPadding: 6 - control.padding
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
selectedTextColor: color
text: control.editable ? control.editText : control.displayText
enabled: control.editable

2
src/Qt5/imports/FluentUI/Controls/FluCopyableText.qml
View File

@ -17,7 +17,7 @@ TextEdit {
selectByMouse: true
selectedTextColor: color
bottomPadding: 0
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
font:FluTextStyle.Body
onSelectedTextChanged: {
control.forceActiveFocus()

74
src/Qt5/imports/FluentUI/Controls/FluDropDownButton.qml
View File

@ -3,75 +3,21 @@ import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import FluentUI 1.0
Button {
property bool disabled: false
property string contentDescription: ""
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
property color textColor: {
if(FluTheme.dark){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
return Qt.rgba(162/255,162/255,162/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){
return Qt.rgba(96/255,96/255,96/255,1)
}
return Qt.rgba(0,0,0,1)
}
}
property var window : Window.window
default property alias contentData: menu.contentData
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
FluButton {
id: control
default property alias contentData: menu.contentData
rightPadding:35
enabled: !disabled
focusPolicy:Qt.TabFocus
verticalPadding: 0
horizontalPadding:12
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: 1
radius: 4
FluFocusRectangle{
visible: control.activeFocus
radius:8
FluIcon{
iconSource:FluentIcons.ChevronDown
iconSize: 15
anchors{
right: parent.right
rightMargin: 10
verticalCenter: parent.verticalCenter
}
color:{
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor
}
FluIcon{
iconSource:FluentIcons.ChevronDown
iconSize: 15
anchors{
right: parent.right
rightMargin: 10
verticalCenter: parent.verticalCenter
}
iconColor:title.color
}
}
contentItem: FluText {
id:title
text: control.text
verticalAlignment: Text.AlignVCenter
color: control.textColor
iconColor:control.textColor
}
onClicked: {
if(menu.count !==0){

4
src/Qt5/imports/FluentUI/Controls/FluExpander.qml
View File

@ -26,8 +26,8 @@ Item {
width: parent.width
height: 45
radius: 4
color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
color: FluTheme.dark ? Window.active ? Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
MouseArea{
id:control_mouse
anchors.fill: parent

41
src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml
View File

@ -29,37 +29,26 @@ Button {
font:FluTextStyle.Body
verticalPadding: 0
horizontalPadding:12
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
background: FluControlBackground{
implicitWidth: 30
implicitHeight: 30
radius: 4
bottomMargin: enabled ? 2 : 0
border.width: enabled ? 1 : 0
border.color: enabled ? Qt.darker(control.normalColor,1.2) : disableColor
color:{
if(!enabled){
return disableColor
}
if(pressed){
return pressedColor
}
return hovered ? hoverColor :normalColor
}
FluFocusRectangle{
visible: control.visualFocus
radius:4
}
gradient: Gradient {
GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
}
Rectangle{
radius: parent.radius
anchors{
fill: parent
topMargin: control.enabled ? 0 : 0
leftMargin: control.enabled ? 1 : 0
rightMargin: control.enabled ? 1 : 0
bottomMargin: control.enabled ? 2 : 0
}
color:{
if(!enabled){
return disableColor
}
if(pressed){
return pressedColor
}
return hovered ? hoverColor :normalColor
}
}
}
contentItem: FluText {
text: control.text

2
src/Qt5/imports/FluentUI/Controls/FluFrame.qml
View File

@ -19,6 +19,6 @@ T.Frame {
id:d
radius: 4
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
color: FluTheme.dark ? Window.active ? Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
}
}

2
src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml
View File

@ -25,7 +25,7 @@ TextArea{
leftPadding: padding+4
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectedTextColor: color
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
placeholderTextColor: {
if(!enabled){
return placeholderDisableColor

2
src/Qt5/imports/FluentUI/Controls/FluPasswordBox.qml
View File

@ -25,7 +25,7 @@ TextField{
leftPadding: padding+4
echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
selectedTextColor: color
placeholderTextColor: {
if(!enabled){

94
src/Qt5/imports/FluentUI/Controls/FluProgressButton.qml
View File

@ -2,14 +2,13 @@ import QtQuick 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
Button {
FluButton {
property real progress
property bool disabled: false
property string contentDescription: ""
QtObject{
id:d
property bool checked: (rect_back.height === background.height) && (progress === 1)
}
id: control
property color normalColor: {
if(d.checked){
return FluTheme.primaryColor
@ -32,59 +31,50 @@ Button {
}
}
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
focusPolicy:Qt.TabFocus
id: control
enabled: !disabled
verticalPadding: 0
horizontalPadding:12
background: FluClip{
implicitWidth: 28
implicitHeight: 28
radius: [4,4,4,4]
Rectangle{
anchors.fill: parent
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: d.checked ? 0 : 1
radius: 4
color:{
if(!enabled){
return disableColor
}
if(d.checked){
if(pressed){
return pressedColor
}
}
return hovered ? hoverColor :normalColor
background: FluControlBackground{
implicitWidth: 30
implicitHeight: 30
radius: 4
border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
border.width: d.checked ? 0 : 1
color:{
if(!enabled){
return disableColor
}
if(d.checked){
if(pressed){
return pressedColor
}
}
return hovered ? hoverColor :normalColor
}
Rectangle{
id:rect_back
width: parent.width * control.progress
height: control.progress === 1 ? background.height : 3
visible: !d.checked
color: FluTheme.primaryColor
anchors.bottom: parent.bottom
Behavior on height{
enabled: control.progress !== 0
SequentialAnimation {
PauseAnimation {
duration: FluTheme.animationEnabled ? 167 : 0
}
NumberAnimation{
duration: FluTheme.animationEnabled ? 167 : 0
from: 3
to: background.height
FluClip{
anchors.fill: parent
radius: [4,4,4,4]
Rectangle{
id:rect_back
width: parent.width * control.progress
height: control.progress === 1 ? background.height : 3
visible: !d.checked
color: FluTheme.primaryColor
anchors.bottom: parent.bottom
Behavior on height{
enabled: control.progress !== 0
SequentialAnimation {
PauseAnimation {
duration: FluTheme.animationEnabled ? 167 : 0
}
NumberAnimation{
duration: FluTheme.animationEnabled ? 167 : 0
from: 3
to: background.height
}
}
}
}
Behavior on width{
NumberAnimation{
duration: 167
Behavior on width{
NumberAnimation{
duration: 167
}
}
}
}

2
src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml
View File

@ -39,7 +39,7 @@ T.SpinBox {
}
return normalColor
}
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
selectedTextColor: color
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter

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

@ -15,7 +15,7 @@ Rectangle {
property bool horizonalHeaderVisible: true
property bool verticalHeaderVisible: true
property color selectedBorderColor: FluTheme.primaryColor
property color selectedColor: FluTools.colorAlpha(FluTheme.primaryColor,0.3)
property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
id:control
color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
onColumnSourceChanged: {

2
src/Qt5/imports/FluentUI/Controls/FluTextBox.qml
View File

@ -25,7 +25,7 @@ TextField{
}
font:FluTextStyle.Body
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
selectedTextColor: color
placeholderTextColor: {
if(!enabled){

67
src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -2,55 +2,36 @@ import QtQuick 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
FluClip{
FluControlBackground{
property Item inputItem
property int borderWidth: 1
id:control
radius: [4,4,4,4]
Rectangle{
radius: 4
anchors.fill: parent
color: {
if(inputItem && inputItem.disabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
if(inputItem && inputItem.activeFocus){
return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
}
if(inputItem && inputItem.hovered){
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
color: {
if(inputItem && inputItem.disabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
border.width: control.borderWidth
border.color: {
if(inputItem && inputItem.disabled){
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
}
return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
if(inputItem && inputItem.activeFocus){
return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
}
if(inputItem && inputItem.hovered){
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
}
Rectangle{
width: parent.width
height: inputItem && inputItem.activeFocus ? 2 : 1
anchors.bottom: parent.bottom
visible: !(inputItem && inputItem.disabled)
color: {
if(inputItem && inputItem.activeFocus){
return FluTheme.primaryColor
}
if(FluTheme.dark){
return Qt.rgba(166/255,166/255,166/255,1)
}else{
return Qt.rgba(134/255,134/255,134/255,1)
}
}
Behavior on height{
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 83
easing.type: Easing.OutCubic
border.width: 1
gradient: Gradient {
GradientStop { position: 0.0; color: d.startColor }
GradientStop { position: 0.92; color: d.startColor }
GradientStop { position: 1.0; color: d.endColor }
}
bottomMargin: inputItem && inputItem.activeFocus ? 2 : 1
QtObject{
id:d
property color startColor: FluTheme.dark ? Qt.rgba(23/255,23/255,23/255,1) : Qt.rgba(232/255,232/255,232/255,1)
property color endColor: {
if(!control.enabled){
return d.startColor
}
return inputItem && inputItem.activeFocus ? FluTheme.primaryColor : FluTheme.dark ? Qt.rgba(123/255,123/255,123/255,1) : Qt.rgba(132/255,132/255,132/255,1)
}
}
}

4
src/Qt5/imports/FluentUI/Controls/FluTextButton.qml
View File

@ -28,8 +28,8 @@ Button {
enabled: !disabled
font:FluTextStyle.Body
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
implicitWidth: 30
implicitHeight: 30
radius: 4
color: {
if(!enabled){

77
src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml
View File

@ -23,7 +23,7 @@ Button {
if(checked){
return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
}else{
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
}
property var clickListener : function(){
@ -39,52 +39,57 @@ Button {
enabled: !disabled
verticalPadding: 0
horizontalPadding:12
onCheckableChanged: {
if(checkable){
checkable = false
}
}
onClicked: clickListener()
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
background: FluControlBackground{
implicitWidth: 30
implicitHeight: 30
radius: 4
FluFocusRectangle{
visible: control.activeFocus
radius:4
}
gradient: Gradient {
GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
}
Rectangle{
radius: parent.radius
anchors{
fill: parent
topMargin: checked && enabled ? 0 : 0
leftMargin: checked && enabled ? 1 : 0
rightMargin: checked && enabled ? 1 : 0
bottomMargin: checked && enabled ? 2 : 0
color:{
if(!enabled){
return disableColor
}
color:{
if(!enabled){
return disableColor
if(checked){
if(pressed){
return pressedColor
}
if(checked){
if(pressed){
return pressedColor
}
}
return hovered ? hoverColor :normalColor
}
return hovered ? hoverColor :normalColor
}
bottomMargin: {
if(checked){
return enabled ? 2 : 0
}else{
return 1
}
}
Rectangle{
color:"#00000000"
anchors.fill: parent
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: checked ? 0 : 1
radius: parent.radius
border.width: {
if(checked){
return enabled ? 1 : 0
}else{
return 1
}
}
shadow: {
if(checked){
return true
}else{
return enabled
}
}
border.color: {
if(checked){
return enabled ? Qt.darker(control.normalColor,1.2) : disableColor
}else{
return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
}
}
}
contentItem: FluText {
text: control.text

4
src/Qt5/imports/FluentUI/Controls/FluWindow.qml
View File

@ -43,9 +43,9 @@ Window {
property bool useSystemAppBar
property color resizeBorderColor: {
if(window.active){
return FluTheme.dark ? "#333333" : "#6E6E6E"
return FluTheme.dark ? Qt.rgba(51/255,51/255,51/255,1) : Qt.rgba(110/255,110/255,110/255,1)
}
return FluTheme.dark ? "#3D3D3E" : "#A7A7A7"
return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(167/255,167/255,167/255,1)
}
property int resizeBorderWidth: 1
property var closeListener: function(event){

1
src/Qt5/imports/fluentui.qrc
View File

@ -109,5 +109,6 @@
<file>FluentUI/Controls/FluFrame.qml</file>
<file>FluentUI/Controls/FluSheet.qml</file>
<file>FluentUI/Controls/FluGroupBox.qml</file>
<file>FluentUI/Controls/FluControlBackground.qml</file>
</qresource>
</RCC>

14
src/Qt6/imports/FluentUI/Controls/FluButton.qml
View File

@ -8,7 +8,7 @@ Button {
property string contentDescription: ""
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color dividerColor: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(233/255,233/255,233/255,1)
property color textColor: {
if(FluTheme.dark){
@ -39,18 +39,18 @@ Button {
horizontalPadding:12
font:FluTextStyle.Body
focusPolicy:Qt.TabFocus
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
border.color: control.dividerColor
border.width: 1
background: FluControlBackground{
implicitWidth: 30
implicitHeight: 30
radius: 4
color:{
color: {
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor
}
shadow: enabled
border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
FluFocusRectangle{
visible: control.activeFocus
radius:4

2
src/Qt6/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -45,7 +45,7 @@ T.ComboBox {
topPadding: 6 - control.padding
bottomPadding: 6 - control.padding
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
selectedTextColor: color
text: control.editable ? control.editText : control.displayText
enabled: control.editable

2
src/Qt6/imports/FluentUI/Controls/FluCopyableText.qml
View File

@ -17,7 +17,7 @@ TextEdit {
selectByMouse: true
selectedTextColor: color
bottomPadding: 0
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
font:FluTextStyle.Body
onSelectedTextChanged: {
control.forceActiveFocus()

74
src/Qt6/imports/FluentUI/Controls/FluDropDownButton.qml
View File

@ -4,75 +4,21 @@ import QtQuick.Controls.Basic
import QtQuick.Window
import FluentUI
Button {
property bool disabled: false
property string contentDescription: ""
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
property color textColor: {
if(FluTheme.dark){
if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(pressed){
return Qt.rgba(162/255,162/255,162/255,1)
}
return Qt.rgba(1,1,1,1)
}else{
if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(pressed){
return Qt.rgba(96/255,96/255,96/255,1)
}
return Qt.rgba(0,0,0,1)
}
}
property var window : Window.window
default property alias contentData: menu.contentData
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
FluButton {
id: control
default property alias contentData: menu.contentData
rightPadding:35
enabled: !disabled
focusPolicy:Qt.TabFocus
verticalPadding: 0
horizontalPadding:12
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: 1
radius: 4
FluFocusRectangle{
visible: control.activeFocus
radius:8
FluIcon{
iconSource:FluentIcons.ChevronDown
iconSize: 15
anchors{
right: parent.right
rightMargin: 10
verticalCenter: parent.verticalCenter
}
color:{
if(!enabled){
return disableColor
}
return hovered ? hoverColor :normalColor
}
FluIcon{
iconSource:FluentIcons.ChevronDown
iconSize: 15
anchors{
right: parent.right
rightMargin: 10
verticalCenter: parent.verticalCenter
}
iconColor:title.color
}
}
contentItem: FluText {
id:title
text: control.text
verticalAlignment: Text.AlignVCenter
color: control.textColor
iconColor:control.textColor
}
onClicked: {
if(menu.count !==0){

4
src/Qt6/imports/FluentUI/Controls/FluExpander.qml
View File

@ -26,8 +26,8 @@ Item {
width: parent.width
height: 45
radius: 4
color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
color: FluTheme.dark ? Window.active ? Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
MouseArea{
id:control_mouse
anchors.fill: parent

41
src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml
View File

@ -30,37 +30,26 @@ Button {
font:FluTextStyle.Body
verticalPadding: 0
horizontalPadding:12
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
background: FluControlBackground{
implicitWidth: 30
implicitHeight: 30
radius: 4
bottomMargin: enabled ? 2 : 0
border.width: enabled ? 1 : 0
border.color: enabled ? Qt.darker(control.normalColor,1.2) : disableColor
color:{
if(!enabled){
return disableColor
}
if(pressed){
return pressedColor
}
return hovered ? hoverColor :normalColor
}
FluFocusRectangle{
visible: control.visualFocus
radius:4
}
gradient: Gradient {
GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
}
Rectangle{
radius: parent.radius
anchors{
fill: parent
topMargin: control.enabled ? 0 : 0
leftMargin: control.enabled ? 1 : 0
rightMargin: control.enabled ? 1 : 0
bottomMargin: control.enabled ? 2 : 0
}
color:{
if(!enabled){
return disableColor
}
if(pressed){
return pressedColor
}
return hovered ? hoverColor :normalColor
}
}
}
contentItem: FluText {
text: control.text

2
src/Qt6/imports/FluentUI/Controls/FluFrame.qml
View File

@ -17,6 +17,6 @@ T.Frame {
id:d
radius: 4
border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
color: FluTheme.dark ? Window.active ? Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
}
}

2
src/Qt6/imports/FluentUI/Controls/FluMultilineTextBox.qml
View File

@ -26,7 +26,7 @@ TextArea{
leftPadding: padding+4
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectedTextColor: color
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
placeholderTextColor: {
if(!enabled){
return placeholderDisableColor

2
src/Qt6/imports/FluentUI/Controls/FluPasswordBox.qml
View File

@ -26,7 +26,7 @@ TextField{
leftPadding: padding+4
echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
selectedTextColor: color
placeholderTextColor: {
if(!enabled){

94
src/Qt6/imports/FluentUI/Controls/FluProgressButton.qml
View File

@ -3,14 +3,13 @@ import QtQuick.Controls
import QtQuick.Controls.Basic
import FluentUI
Button {
FluButton {
property real progress
property bool disabled: false
property string contentDescription: ""
QtObject{
id:d
property bool checked: (rect_back.height === background.height) && (progress === 1)
}
id: control
property color normalColor: {
if(d.checked){
return FluTheme.primaryColor
@ -33,59 +32,50 @@ Button {
}
}
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
focusPolicy:Qt.TabFocus
id: control
enabled: !disabled
verticalPadding: 0
horizontalPadding:12
background: FluClip{
implicitWidth: 28
implicitHeight: 28
radius: [4,4,4,4]
Rectangle{
anchors.fill: parent
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: d.checked ? 0 : 1
radius: 4
color:{
if(!enabled){
return disableColor
}
if(d.checked){
if(pressed){
return pressedColor
}
}
return hovered ? hoverColor :normalColor
background: FluControlBackground{
implicitWidth: 30
implicitHeight: 30
radius: 4
border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
border.width: d.checked ? 0 : 1
color:{
if(!enabled){
return disableColor
}
if(d.checked){
if(pressed){
return pressedColor
}
}
return hovered ? hoverColor :normalColor
}
Rectangle{
id:rect_back
width: parent.width * control.progress
height: control.progress === 1 ? background.height : 3
visible: !d.checked
color: FluTheme.primaryColor
anchors.bottom: parent.bottom
Behavior on height{
enabled: control.progress !== 0
SequentialAnimation {
PauseAnimation {
duration: FluTheme.animationEnabled ? 167 : 0
}
NumberAnimation{
duration: FluTheme.animationEnabled ? 167 : 0
from: 3
to: background.height
FluClip{
anchors.fill: parent
radius: [4,4,4,4]
Rectangle{
id:rect_back
width: parent.width * control.progress
height: control.progress === 1 ? background.height : 3
visible: !d.checked
color: FluTheme.primaryColor
anchors.bottom: parent.bottom
Behavior on height{
enabled: control.progress !== 0
SequentialAnimation {
PauseAnimation {
duration: FluTheme.animationEnabled ? 167 : 0
}
NumberAnimation{
duration: FluTheme.animationEnabled ? 167 : 0
from: 3
to: background.height
}
}
}
}
Behavior on width{
NumberAnimation{
duration: 167
Behavior on width{
NumberAnimation{
duration: 167
}
}
}
}

2
src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml
View File

@ -40,7 +40,7 @@ T.SpinBox {
}
return normalColor
}
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
selectedTextColor: color
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter

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

@ -16,7 +16,7 @@ Rectangle {
property bool horizonalHeaderVisible: true
property bool verticalHeaderVisible: true
property color selectedBorderColor: FluTheme.primaryColor
property color selectedColor: FluTools.colorAlpha(FluTheme.primaryColor,0.3)
property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
id:control
color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
onColumnSourceChanged: {

2
src/Qt6/imports/FluentUI/Controls/FluTextBox.qml
View File

@ -26,7 +26,7 @@ TextField{
}
font:FluTextStyle.Body
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
selectedTextColor: color
placeholderTextColor: {
if(!enabled){

67
src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -2,55 +2,36 @@ import QtQuick
import QtQuick.Controls
import FluentUI
FluClip{
FluControlBackground{
property Item inputItem
property int borderWidth: 1
id:control
radius: [4,4,4,4]
Rectangle{
radius: 4
anchors.fill: parent
color: {
if(inputItem && inputItem.disabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
if(inputItem && inputItem.activeFocus){
return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
}
if(inputItem && inputItem.hovered){
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
color: {
if(inputItem && inputItem.disabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
}
border.width: control.borderWidth
border.color: {
if(inputItem && inputItem.disabled){
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
}
return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
if(inputItem && inputItem.activeFocus){
return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
}
if(inputItem && inputItem.hovered){
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
}
Rectangle{
width: parent.width
height: inputItem && inputItem.activeFocus ? 2 : 1
anchors.bottom: parent.bottom
visible: !(inputItem && inputItem.disabled)
color: {
if(inputItem && inputItem.activeFocus){
return FluTheme.primaryColor
}
if(FluTheme.dark){
return Qt.rgba(166/255,166/255,166/255,1)
}else{
return Qt.rgba(134/255,134/255,134/255,1)
}
}
Behavior on height{
enabled: FluTheme.animationEnabled
NumberAnimation{
duration: 83
easing.type: Easing.OutCubic
border.width: 1
gradient: Gradient {
GradientStop { position: 0.0; color: d.startColor }
GradientStop { position: 0.92; color: d.startColor }
GradientStop { position: 1.0; color: d.endColor }
}
bottomMargin: inputItem && inputItem.activeFocus ? 2 : 1
QtObject{
id:d
property color startColor: FluTheme.dark ? Qt.rgba(23/255,23/255,23/255,1) : Qt.rgba(232/255,232/255,232/255,1)
property color endColor: {
if(!control.enabled){
return d.startColor
}
return inputItem && inputItem.activeFocus ? FluTheme.primaryColor : FluTheme.dark ? Qt.rgba(123/255,123/255,123/255,1) : Qt.rgba(132/255,132/255,132/255,1)
}
}
}

4
src/Qt6/imports/FluentUI/Controls/FluTextButton.qml
View File

@ -29,8 +29,8 @@ Button {
enabled: !disabled
font:FluTextStyle.Body
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
implicitWidth: 30
implicitHeight: 30
radius: 4
color: {
if(!enabled){

72
src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml
View File

@ -24,7 +24,7 @@ Button {
if(checked){
return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
}else{
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
}
property var clickListener : function(){
@ -41,46 +41,56 @@ Button {
verticalPadding: 0
horizontalPadding:12
onClicked: clickListener()
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
background: FluControlBackground{
implicitWidth: 30
implicitHeight: 30
radius: 4
FluFocusRectangle{
visible: control.activeFocus
radius:4
}
gradient: Gradient {
GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
}
Rectangle{
radius: parent.radius
anchors{
fill: parent
topMargin: checked && enabled ? 0 : 0
leftMargin: checked && enabled ? 1 : 0
rightMargin: checked && enabled ? 1 : 0
bottomMargin: checked && enabled ? 2 : 0
color:{
if(!enabled){
return disableColor
}
color:{
if(!enabled){
return disableColor
if(checked){
if(pressed){
return pressedColor
}
if(checked){
if(pressed){
return pressedColor
}
}
return hovered ? hoverColor :normalColor
}
return hovered ? hoverColor :normalColor
}
bottomMargin: {
if(checked){
return enabled ? 2 : 0
}else{
return 1
}
}
Rectangle{
color:"#00000000"
anchors.fill: parent
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: checked ? 0 : 1
radius: parent.radius
border.width: {
if(checked){
return enabled ? 1 : 0
}else{
return 1
}
}
shadow: {
if(checked){
return true
}else{
return enabled
}
}
border.color: {
if(checked){
return enabled ? Qt.darker(control.normalColor,1.2) : disableColor
}else{
return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
}
}
}
contentItem: FluText {
text: control.text

4
src/Qt6/imports/FluentUI/Controls/FluWindow.qml
View File

@ -42,9 +42,9 @@ Window {
property bool useSystemAppBar
property color resizeBorderColor: {
if(window.active){
return FluTheme.dark ? "#333333" : "#6E6E6E"
return FluTheme.dark ? Qt.rgba(51/255,51/255,51/255,1) : Qt.rgba(110/255,110/255,110/255,1)
}
return FluTheme.dark ? "#3D3D3E" : "#A7A7A7"
return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(167/255,167/255,167/255,1)
}
property int resizeBorderWidth: 1
property var closeListener: function(event){