mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-03 00:25:25 +08:00
update
This commit is contained in:
@ -3,7 +3,6 @@ import QtQuick.Window 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
|
||||
Rectangle{
|
||||
|
||||
color: FluApp.isDark ? "#323232" : "#FFFFFF"
|
||||
@ -63,7 +62,7 @@ Rectangle{
|
||||
}
|
||||
FluToggleSwitch{
|
||||
checked: FluApp.isDark
|
||||
onClicked2:{
|
||||
onClickFunc:function(){
|
||||
FluApp.isDark = !FluApp.isDark
|
||||
}
|
||||
}
|
||||
@ -73,7 +72,7 @@ Rectangle{
|
||||
icon : FluentIcons.FA_window_minimize
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
iconSize: 15
|
||||
iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
|
||||
text:"最小化"
|
||||
onClicked: {
|
||||
Window.window.showMinimized()
|
||||
}
|
||||
@ -85,7 +84,7 @@ Rectangle{
|
||||
return Window.Maximized === Window.window.visibility ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
|
||||
}
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
|
||||
text:Window.Maximized === Window.window.visibility?"向下还原":"最大化"
|
||||
iconSize: 15
|
||||
onClicked: {
|
||||
toggleMaximized()
|
||||
@ -94,19 +93,18 @@ Rectangle{
|
||||
FluIconButton{
|
||||
icon : FluentIcons.FA_close
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
text:"关闭"
|
||||
iconSize: 15
|
||||
iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
|
||||
onClicked: {
|
||||
Window.window.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
FluDivider{
|
||||
width: parent.width;
|
||||
height: 1;
|
||||
anchors.bottom: parent.bottom;
|
||||
color: FluApp.isDark ? "#666666" : "#EEEEEE"
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
|
||||
Rectangle {
|
||||
id: button
|
||||
|
||||
property string text: "Standard Button"
|
||||
property int startPadding : 15
|
||||
property int endPadding : 15
|
||||
property int topPadding: 8
|
||||
@ -15,12 +16,12 @@ Rectangle {
|
||||
color:{
|
||||
if(FluApp.isDark){
|
||||
if(disabled){
|
||||
return "#C7C7C7"
|
||||
return Qt.rgba(59/255,59/255,59/255,1)
|
||||
}
|
||||
return button_mouse.containsMouse ? "#444444" : "#3e3e3e"
|
||||
}else{
|
||||
if(disabled){
|
||||
return "#C7C7C7"
|
||||
return Qt.rgba(252/255,252/255,252/255,1)
|
||||
}
|
||||
return button_mouse.containsMouse ? "#FBFBFB" : "#FFFFFF"
|
||||
}
|
||||
@ -34,13 +35,26 @@ Rectangle {
|
||||
|
||||
FluText {
|
||||
id: button_text
|
||||
text: "Standard Button"
|
||||
text: button.text
|
||||
font.pixelSize: 14
|
||||
leftPadding: button.startPadding
|
||||
rightPadding: button.endPadding
|
||||
topPadding: button.topPadding
|
||||
bottomPadding: button.bottomPadding
|
||||
anchors.centerIn: parent
|
||||
color: {
|
||||
if(FluApp.isDark){
|
||||
if(disabled){
|
||||
return Qt.rgba(131/255,131/255,131/255,1)
|
||||
}
|
||||
return Qt.rgba(1,1,1,1)
|
||||
}else{
|
||||
if(disabled){
|
||||
return Qt.rgba(160/255,160/255,160/255,1)
|
||||
}
|
||||
return Qt.rgba(0,0,0,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
8
src/controls/FluDivider.qml
Normal file
8
src/controls/FluDivider.qml
Normal file
@ -0,0 +1,8 @@
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Rectangle {
|
||||
|
||||
color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
|
||||
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
@ -1,30 +1,48 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Rectangle {
|
||||
id: button
|
||||
|
||||
property string text: "Filled Button"
|
||||
property int startPadding : 15
|
||||
property int endPadding : 15
|
||||
property int topPadding: 8
|
||||
property int bottomPadding: 8
|
||||
property bool disabled: false
|
||||
property color primaryColor : "#0064B0"
|
||||
|
||||
signal clicked
|
||||
radius: 4
|
||||
color:{
|
||||
if(disabled){
|
||||
return "#C7C7C7"
|
||||
if(FluApp.isDark){
|
||||
if(disabled){
|
||||
return Qt.rgba(199/255,199/255,199/255,1)
|
||||
}
|
||||
return button_mouse.containsMouse ? Qt.rgba(74/255,149/255,207/255,1) : Qt.rgba(76/255,160/255,224/255,1)
|
||||
}else{
|
||||
if(disabled){
|
||||
return Qt.rgba(199/255,199/255,199/255,1)
|
||||
}
|
||||
return button_mouse.containsMouse ? Qt.rgba(25/255,117/255,187/255,1) : Qt.rgba(0/255,102/255,180/255,1)
|
||||
}
|
||||
return button_mouse.containsMouse ? Qt.lighter(primaryColor,1.15) : primaryColor
|
||||
}
|
||||
width: button_text.implicitWidth
|
||||
height: button_text.implicitHeight
|
||||
|
||||
FluText {
|
||||
id: button_text
|
||||
text: "Filled Button"
|
||||
color: "#FFFFFFFF"
|
||||
text: button.text
|
||||
color: {
|
||||
if(FluApp.isDark){
|
||||
if(disabled){
|
||||
return Qt.rgba(173/255,173/255,173/255,1)
|
||||
}
|
||||
return Qt.rgba(0,0,0,1)
|
||||
}else{
|
||||
return Qt.rgba(1,1,1,1)
|
||||
}
|
||||
}
|
||||
font.pixelSize: 14
|
||||
leftPadding: button.startPadding
|
||||
rightPadding: button.endPadding
|
||||
|
16
src/controls/FluIcon.qml
Normal file
16
src/controls/FluIcon.qml
Normal file
@ -0,0 +1,16 @@
|
||||
import QtQuick 2.15
|
||||
|
||||
Text {
|
||||
|
||||
property int icon
|
||||
property int iconSize: 20
|
||||
property color iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
|
||||
|
||||
id:text_icon
|
||||
font.family: "fontawesome"
|
||||
font.pixelSize: iconSize
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
color: iconColor
|
||||
text: (String.fromCharCode(icon).toString(16));
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Rectangle {
|
||||
|
||||
@ -8,16 +9,23 @@ Rectangle {
|
||||
|
||||
property int iconSize: 20
|
||||
property int icon
|
||||
property color iconColor: "#000000"
|
||||
property alias text: tool_tip.text
|
||||
signal clicked
|
||||
property bool disabled: false
|
||||
|
||||
radius: 4
|
||||
|
||||
color: {
|
||||
if(FluApp.isDark){
|
||||
return button_mouse.containsMouse ? "#000000" : "#00000000"
|
||||
if(disabled){
|
||||
return Qt.rgba(59/255,59/255,59/255,1)
|
||||
}
|
||||
return button_mouse.containsMouse ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(50/255,50/255,50/255,1)
|
||||
}else{
|
||||
return button_mouse.containsMouse ? "#F4F4F4" : "#00000000"
|
||||
if(disabled){
|
||||
return Qt.rgba(1,1,1,1)
|
||||
}
|
||||
return button_mouse.containsMouse ? Qt.rgba(244/255,244/255,244/255,1) : Qt.rgba(1,1,1,1)
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,7 +36,19 @@ Rectangle {
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
anchors.centerIn: parent
|
||||
color: iconColor
|
||||
color:{
|
||||
if(FluApp.isDark){
|
||||
if(disabled){
|
||||
return Qt.rgba(130/255,130/255,130/255,1)
|
||||
}
|
||||
return Qt.rgba(1,1,1,1)
|
||||
}else{
|
||||
if(disabled){
|
||||
return Qt.rgba(161/255,161/255,161/255,1)
|
||||
}
|
||||
return Qt.rgba(0,0,0,1)
|
||||
}
|
||||
}
|
||||
text: (String.fromCharCode(icon).toString(16));
|
||||
}
|
||||
|
||||
@ -36,9 +56,21 @@ Rectangle {
|
||||
id:button_mouse
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
enabled: !disabled
|
||||
onClicked: {
|
||||
button.clicked()
|
||||
}
|
||||
}
|
||||
|
||||
FluTooltip{
|
||||
id:tool_tip
|
||||
visible: {
|
||||
if(button.text === ""){
|
||||
return false
|
||||
}
|
||||
return button_mouse.containsMouse
|
||||
}
|
||||
delay: 1000
|
||||
}
|
||||
|
||||
}
|
||||
|
233
src/controls/FluInfoBar.qml
Normal file
233
src/controls/FluInfoBar.qml
Normal file
@ -0,0 +1,233 @@
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
FluObject {
|
||||
id:infoBar
|
||||
|
||||
property var root;
|
||||
property int layoutY: 75;
|
||||
|
||||
function showSuccess(text,duration,moremsg){
|
||||
mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : "");
|
||||
}
|
||||
|
||||
function showInfo(text,duration,moremsg){
|
||||
mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : "");
|
||||
}
|
||||
|
||||
function showWarning(text,duration,moremsg){
|
||||
mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : "");
|
||||
}
|
||||
|
||||
function showError(text,duration,moremsg){
|
||||
mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : "");
|
||||
}
|
||||
|
||||
function showCustom(itemcomponent,duration){
|
||||
mcontrol.createCustom(itemcomponent,duration);
|
||||
}
|
||||
|
||||
FluObject{
|
||||
id:mcontrol
|
||||
|
||||
property string const_success: "success";
|
||||
property string const_info: "info";
|
||||
property string const_warning: "warning";
|
||||
property string const_error: "error";
|
||||
|
||||
property int maxWidth: 300;
|
||||
|
||||
property var screenLayout: null;
|
||||
|
||||
function create(type,text,duration,moremsg){
|
||||
if(screenLayout){
|
||||
var last = screenLayout.getLastloader();
|
||||
if(last.type === type && last.text === text && moremsg === last.moremsg){
|
||||
last.restart();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
initScreenLayout();
|
||||
contentComponent.createObject(screenLayout,{
|
||||
type:type,
|
||||
text:text,
|
||||
duration:duration,
|
||||
moremsg:moremsg,
|
||||
});
|
||||
}
|
||||
|
||||
function createCustom(itemcomponent,duration){
|
||||
initScreenLayout();
|
||||
if(itemcomponent){
|
||||
contentComponent.createObject(screenLayout,{itemcomponent:itemcomponent,duration:duration});
|
||||
}
|
||||
}
|
||||
|
||||
function initScreenLayout(){
|
||||
if(screenLayout == null){
|
||||
screenLayout = screenlayoutComponent.createObject(root);
|
||||
screenLayout.y = infoBar.layoutY;
|
||||
screenLayout.z = 100000;
|
||||
}
|
||||
}
|
||||
|
||||
Component{
|
||||
id:screenlayoutComponent
|
||||
Column{
|
||||
spacing: 20
|
||||
width: parent.width
|
||||
move: Transition {
|
||||
NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 }
|
||||
}
|
||||
|
||||
onChildrenChanged: if(children.length === 0) destroy();
|
||||
|
||||
function getLastloader(){
|
||||
if(children.length > 0){
|
||||
return children[children.length - 1];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component{
|
||||
id:contentComponent
|
||||
Item{
|
||||
id:content;
|
||||
property int duration: 1500
|
||||
property var itemcomponent
|
||||
property string type
|
||||
property string text
|
||||
property string moremsg
|
||||
|
||||
width: parent.width;
|
||||
height: loader.height;
|
||||
|
||||
function close(){
|
||||
content.destroy();
|
||||
}
|
||||
|
||||
function restart(){
|
||||
delayTimer.restart();
|
||||
}
|
||||
|
||||
Timer {
|
||||
id:delayTimer
|
||||
interval: duration; running: true; repeat: true
|
||||
onTriggered: content.close();
|
||||
}
|
||||
|
||||
Loader{
|
||||
id:loader;
|
||||
x:(parent.width - width) / 2;
|
||||
property var _super: content;
|
||||
|
||||
scale: item ? 1 : 0;
|
||||
asynchronous: true
|
||||
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
easing.type: Easing.OutBack;
|
||||
duration: 100
|
||||
}
|
||||
}
|
||||
|
||||
sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
property Component fluent_sytle: Rectangle{
|
||||
width: rowlayout.width + (_super.moremsg ? 25 : 80);
|
||||
height: rowlayout.height + 20;
|
||||
color: {
|
||||
if(FluApp.isDark){
|
||||
switch(_super.type){
|
||||
case mcontrol.const_success: return Qt.rgba(57/255,61/255,27/255,1);
|
||||
case mcontrol.const_warning: return Qt.rgba(67/255,53/255,25/255,1);
|
||||
case mcontrol.const_info: return Qt.rgba(39/255,39/255,39/255,1);
|
||||
case mcontrol.const_error: return Qt.rgba(68/255,39/255,38/255,1);
|
||||
}
|
||||
return Qt.rgba(255,255,255,1)
|
||||
}else{
|
||||
switch(_super.type){
|
||||
case mcontrol.const_success: return "#dff6dd";
|
||||
case mcontrol.const_warning: return "#fff4ce";
|
||||
case mcontrol.const_info: return "#f4f4f4";
|
||||
case mcontrol.const_error: return "#fde7e9";
|
||||
}
|
||||
return "#FFFFFF"
|
||||
}
|
||||
}
|
||||
radius: 4
|
||||
border.width: 1
|
||||
border.color: {
|
||||
if(FluApp.isDark){
|
||||
switch(_super.type){
|
||||
case mcontrol.const_success: return Qt.rgba(56/255,61/255,27/255,1);
|
||||
case mcontrol.const_warning: return Qt.rgba(66/255,53/255,25/255,1);
|
||||
case mcontrol.const_info: return Qt.rgba(38/255,39/255,39/255,1);
|
||||
case mcontrol.const_error: return Qt.rgba(67/255,39/255,38/255,1);
|
||||
}
|
||||
return "#FFFFFF"
|
||||
}else{
|
||||
switch(_super.type){
|
||||
case mcontrol.const_success: return "#d2e8d0";
|
||||
case mcontrol.const_warning: return "#f0e6c2";
|
||||
case mcontrol.const_info: return "#e6e6e6";
|
||||
case mcontrol.const_error: return "#eed9db";
|
||||
}
|
||||
return "#FFFFFF"
|
||||
}
|
||||
}
|
||||
Row{
|
||||
id:rowlayout
|
||||
x:20;
|
||||
y:(parent.height - height) / 2;
|
||||
spacing: 10
|
||||
|
||||
FluIcon{
|
||||
icon:{
|
||||
switch(_super.type){
|
||||
case mcontrol.const_success: return FluentIcons.FA_check_circle;
|
||||
case mcontrol.const_warning: return FluentIcons.FA_info_circle;
|
||||
case mcontrol.const_info: return FluentIcons.FA_info_circle;
|
||||
case mcontrol.const_error: return FluentIcons.FA_times_circle;
|
||||
}
|
||||
return FluentIcons.FA_info_circle
|
||||
}
|
||||
iconSize:20
|
||||
color: {
|
||||
if(FluApp.isDark){
|
||||
switch(_super.type){
|
||||
case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);
|
||||
case mcontrol.const_warning: return Qt.rgba(252/255,225/255,0/255,1);
|
||||
case mcontrol.const_info: return Qt.rgba(76/255,160/255,224/255,1);
|
||||
case mcontrol.const_error: return Qt.rgba(255/255,153/255,164/255,1);
|
||||
}
|
||||
return "#FFFFFF"
|
||||
}else{
|
||||
switch(_super.type){
|
||||
case mcontrol.const_success: return "#0f7b0f";
|
||||
case mcontrol.const_warning: return "#9d5d00";
|
||||
case mcontrol.const_info: return "#0066b4";
|
||||
case mcontrol.const_error: return "#c42b1c";
|
||||
}
|
||||
return "#FFFFFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
text:_super.text
|
||||
wrapMode: Text.WrapAnywhere
|
||||
width: Math.min(implicitWidth,mcontrol.maxWidth)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
7
src/controls/FluObject.qml
Normal file
7
src/controls/FluObject.qml
Normal file
@ -0,0 +1,7 @@
|
||||
import QtQuick 2.15
|
||||
|
||||
QtObject {
|
||||
id:flu_object;
|
||||
|
||||
default property list<QtObject> children;
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
@ -1,5 +1,111 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
|
||||
Item {
|
||||
|
||||
id:root
|
||||
width: childrenRect.width
|
||||
height: childrenRect.height
|
||||
property bool checked: false
|
||||
property string text: "RodioButton"
|
||||
signal clicked
|
||||
property bool disabled: false
|
||||
|
||||
RowLayout{
|
||||
Rectangle{
|
||||
id:rect_check
|
||||
width: 20
|
||||
height: 20
|
||||
radius: 10
|
||||
layer.samples: 4
|
||||
layer.enabled: true
|
||||
layer.smooth: true
|
||||
border.width: {
|
||||
if(checked&&disabled){
|
||||
return 3
|
||||
}
|
||||
if(root_mouse.containsPress){
|
||||
if(checked){
|
||||
return 5
|
||||
}
|
||||
return 1
|
||||
}
|
||||
if(root_mouse.containsMouse){
|
||||
if(checked){
|
||||
return 3
|
||||
}
|
||||
return 1
|
||||
}
|
||||
return checked ? 5 : 1
|
||||
}
|
||||
Behavior on border.width {
|
||||
NumberAnimation{
|
||||
duration: 100
|
||||
}
|
||||
}
|
||||
border.color: {
|
||||
if(disabled){
|
||||
if(FluApp.isDark){
|
||||
return Qt.rgba(82/255,82/255,82/255,1)
|
||||
}else{
|
||||
return Qt.rgba(198/255,198/255,198/255,1)
|
||||
}
|
||||
}
|
||||
if(checked){
|
||||
if(FluApp.isDark){
|
||||
return Qt.rgba(76/255,164/255,224/255,1)
|
||||
}else{
|
||||
|
||||
return Qt.rgba(0/255,102/255,180/255,1)
|
||||
}
|
||||
}else{
|
||||
if(FluApp.isDark){
|
||||
return Qt.rgba(161/255,161/255,161/255,1)
|
||||
}else{
|
||||
|
||||
return Qt.rgba(141/255,141/255,141/255,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
color:{
|
||||
if(disabled&&checked){
|
||||
return Qt.rgba(159/255,159/255,159/255,1)
|
||||
}
|
||||
if(FluApp.isDark){
|
||||
if(root_mouse.containsMouse){
|
||||
return Qt.rgba(43/255,43/255,43/255,1)
|
||||
}
|
||||
return Qt.rgba(50/255,50/255,50/255,1)
|
||||
}else{
|
||||
if(root_mouse.containsMouse){
|
||||
if(checked){
|
||||
return Qt.rgba(1,1,1,1)
|
||||
}
|
||||
return Qt.rgba(222/255,222/255,222/255,1)
|
||||
}
|
||||
return Qt.rgba(1,1,1,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
text: root.text
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MouseArea{
|
||||
id:root_mouse
|
||||
hoverEnabled: true
|
||||
anchors.fill: parent
|
||||
enabled: !disabled
|
||||
onClicked: {
|
||||
root.clicked()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
@ -1,5 +1,54 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Shapes 1.15
|
||||
import QtGraphicalEffects 1.15
|
||||
|
||||
Item {
|
||||
Item{
|
||||
id:root
|
||||
property var radius:[0,0,0,0]
|
||||
property color color : "#FFFFFF"
|
||||
property color borderColor:"transparent"
|
||||
property int borderWidth: 1
|
||||
default property alias contentItem: container.children
|
||||
|
||||
Rectangle{
|
||||
id:container
|
||||
width: root.width
|
||||
height: root.height
|
||||
visible: false
|
||||
color:root.color
|
||||
|
||||
}
|
||||
|
||||
Shape {
|
||||
id: shape
|
||||
width: root.width
|
||||
height: root.height
|
||||
layer.enabled: true
|
||||
layer.samples: 4
|
||||
layer.smooth: true
|
||||
visible: false
|
||||
ShapePath {
|
||||
startX: 0
|
||||
startY: radius[0]
|
||||
fillColor: color
|
||||
strokeColor: borderColor
|
||||
strokeWidth: borderWidth
|
||||
PathQuad { x: radius[0]; y: 0; controlX: 0; controlY: 0 }
|
||||
PathLine { x: shape.width - radius[1]; y: 0 }
|
||||
PathQuad { x: shape.width; y: radius[1]; controlX: shape.width; controlY: 0 }
|
||||
PathLine { x: shape.width; y: shape.height - radius[2] }
|
||||
PathQuad { x: shape.width - radius[2]; y: shape.height; controlX: shape.width; controlY: shape.height }
|
||||
PathLine { x: radius[3]; y: shape.height }
|
||||
PathQuad { x: 0; y: shape.height - radius[3]; controlX: 0; controlY: shape.height }
|
||||
PathLine { x: 0; y: radius[0] }
|
||||
}
|
||||
}
|
||||
|
||||
OpacityMask {
|
||||
anchors.fill: container
|
||||
source: container
|
||||
maskSource: shape
|
||||
}
|
||||
|
||||
}
|
||||
|
71
src/controls/FluShadow.qml
Normal file
71
src/controls/FluShadow.qml
Normal file
@ -0,0 +1,71 @@
|
||||
import QtQuick 2.15
|
||||
|
||||
Item {
|
||||
|
||||
id:root
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: -5
|
||||
property color shadowColor: "#333333"
|
||||
property int radius: 5
|
||||
property bool isShadow: true
|
||||
|
||||
|
||||
Rectangle{
|
||||
id:react_background
|
||||
width: root.width - 8
|
||||
height: root.height - 8
|
||||
anchors.centerIn: parent
|
||||
radius: root.radius
|
||||
color:"#00000000"
|
||||
opacity: 0.25
|
||||
border.width: 1
|
||||
border.color : Qt.lighter(shadowColor,1.1)
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
width: root.width - 6
|
||||
height: root.height - 6
|
||||
anchors.centerIn: parent
|
||||
radius: root.radius
|
||||
color:"#00000000"
|
||||
border.width: 1
|
||||
opacity: 0.2
|
||||
border.color : Qt.lighter(shadowColor,1.2)
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
width: root.width - 4
|
||||
height: root.height - 4
|
||||
anchors.centerIn: parent
|
||||
radius: root.radius
|
||||
color:"#00000000"
|
||||
border.width: 1
|
||||
opacity: 0.15
|
||||
border.color : Qt.lighter(shadowColor,1.3)
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
width: root.width - 2
|
||||
height: root.height - 2
|
||||
anchors.centerIn: parent
|
||||
radius: root.radius
|
||||
color:"#00000000"
|
||||
border.width: 1
|
||||
opacity: 0.1
|
||||
border.color : Qt.lighter(shadowColor,1.4)
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
width: root.width
|
||||
height: root.height
|
||||
anchors.centerIn: parent
|
||||
radius: root.radius
|
||||
color:"#00000000"
|
||||
border.width: 1
|
||||
opacity:0.05
|
||||
border.color : Qt.lighter(shadowColor,1.5)
|
||||
}
|
||||
|
||||
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
|
||||
import FluentUI 1.0
|
||||
|
||||
Text {
|
||||
|
||||
@ -18,57 +18,55 @@ Text {
|
||||
|
||||
property int fontStyle: FluText.Body
|
||||
property color textColor: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
|
||||
|
||||
property int pixelSize : 14
|
||||
|
||||
color: textColor
|
||||
|
||||
Component.onCompleted: {
|
||||
setFontStyle(fontStyle)
|
||||
}
|
||||
|
||||
onStyleChanged: {
|
||||
setFontStyle(fontStyle)
|
||||
}
|
||||
|
||||
function setFontStyle(fontStyle) {
|
||||
font.bold: {
|
||||
switch (fontStyle) {
|
||||
case FluText.Display:
|
||||
font.bold = true
|
||||
font.pixelSize = text.pixelSize * 4
|
||||
break
|
||||
case FluText.TitleLarge:
|
||||
font.bold = true
|
||||
font.pixelSize = text.pixelSize * 2
|
||||
break
|
||||
case FluText.Title:
|
||||
font.bold = true
|
||||
font.pixelSize = text.pixelSize * 1.5
|
||||
break
|
||||
case FluText.Subtitle:
|
||||
font.bold = true
|
||||
font.pixelSize = text.pixelSize * 0.9
|
||||
break
|
||||
case FluText.BodyLarge:
|
||||
font.bold = false
|
||||
font.pixelSize = text.pixelSize * 1.1
|
||||
break
|
||||
case FluText.BodyStrong:
|
||||
font.bold = true
|
||||
font.pixelSize = text.pixelSize * 1.0
|
||||
break
|
||||
case FluText.Body:
|
||||
font.bold = false
|
||||
font.pixelSize = text.pixelSize
|
||||
break
|
||||
case FluText.Caption:
|
||||
font.bold = false
|
||||
font.pixelSize = text.pixelSize * 0.8
|
||||
break
|
||||
default:
|
||||
font.pixelSize = text.pixelSize * 1.0
|
||||
break
|
||||
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 text.pixelSize * 4
|
||||
case FluText.TitleLarge:
|
||||
return text.pixelSize * 2
|
||||
case FluText.Title:
|
||||
return text.pixelSize * 1.5
|
||||
case FluText.Subtitle:
|
||||
return text.pixelSize * 0.9
|
||||
case FluText.BodyLarge:
|
||||
return text.pixelSize * 1.1
|
||||
case FluText.BodyStrong:
|
||||
return text.pixelSize * 1.0
|
||||
case FluText.Body:
|
||||
return text.font.pixelSize = 14
|
||||
case FluText.Caption:
|
||||
return text.pixelSize * 0.8
|
||||
default:
|
||||
return text.pixelSize * 1.0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
@ -1,6 +1,7 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Shapes 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
@ -1,10 +1,11 @@
|
||||
import QtQuick 2.0
|
||||
import QtQuick.Controls 2.0
|
||||
import FluentUI 1.0
|
||||
|
||||
Switch {
|
||||
id: root
|
||||
property color checkedColor: "#0064B0"
|
||||
signal clicked2
|
||||
property var onClickFunc
|
||||
width: 40
|
||||
implicitWidth: 40
|
||||
height: 20
|
||||
@ -24,10 +25,13 @@ Switch {
|
||||
}
|
||||
return "#323232"
|
||||
}else{
|
||||
if(root.checked){
|
||||
return checkedColor
|
||||
}
|
||||
if(switch_mouse.containsMouse){
|
||||
return "#F4F4F4"
|
||||
}
|
||||
return root.checked ? checkedColor : "white"
|
||||
return "#FFFFFF"
|
||||
}
|
||||
}
|
||||
border.width: 1
|
||||
@ -52,7 +56,11 @@ Switch {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
root.clicked2()
|
||||
if(root.onClickFunc){
|
||||
root.onClickFunc()
|
||||
}else{
|
||||
root.checked = !root.checked
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
27
src/controls/FluTooltip.qml
Normal file
27
src/controls/FluTooltip.qml
Normal file
@ -0,0 +1,27 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
ToolTip {
|
||||
id:tool_tip
|
||||
|
||||
contentItem: FluText {
|
||||
text: tool_tip.text
|
||||
font: tool_tip.font
|
||||
padding: 4
|
||||
wrapMode: Text.WrapAnywhere
|
||||
}
|
||||
|
||||
background: Rectangle{
|
||||
anchors.fill: parent
|
||||
color: FluApp.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
|
||||
radius: 5
|
||||
layer.enabled: true
|
||||
layer.effect: DropShadow {
|
||||
radius: 5
|
||||
samples: 4
|
||||
color: "#80000000"
|
||||
}
|
||||
}
|
||||
}
|
@ -15,7 +15,7 @@ Rectangle {
|
||||
|
||||
Behavior on opacity{
|
||||
NumberAnimation{
|
||||
duration: 100
|
||||
duration: 100
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ Rectangle {
|
||||
|
||||
onIsMaxChanged: {
|
||||
if(isMax){
|
||||
root.anchors.margins = 8
|
||||
root.anchors.margins = 8*(1/Screen.devicePixelRatio)
|
||||
root.anchors.fill = parent
|
||||
}else{
|
||||
root.anchors.margins = 0
|
||||
@ -38,7 +38,7 @@ Rectangle {
|
||||
color : FluApp.isDark ? "#202020" : "#F3F3F3"
|
||||
|
||||
Component.onCompleted: {
|
||||
console.debug("onCompleted")
|
||||
console.debug("onCompleted")
|
||||
}
|
||||
|
||||
Connections{
|
||||
@ -55,4 +55,25 @@ Rectangle {
|
||||
id:helper
|
||||
}
|
||||
|
||||
FluInfoBar{
|
||||
id:infoBar
|
||||
root: root
|
||||
}
|
||||
|
||||
|
||||
function showSuccess(text,duration,moremsg){
|
||||
infoBar.showSuccess(text,duration,moremsg);
|
||||
}
|
||||
function showInfo(text,duration,moremsg){
|
||||
infoBar.showInfo(text,duration,moremsg);
|
||||
}
|
||||
function showWarning(text,duration,moremsg){
|
||||
infoBar.showWarning(text,duration,moremsg);
|
||||
}
|
||||
function showError(text,duration,moremsg){
|
||||
infoBar.showError(text,duration,moremsg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
Reference in New Issue
Block a user