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

update

Browse Source
This commit is contained in:
zhuzihcu
2023-02-27 18:46:39 +08:00
parent 8ef76d2707
commit a772e18b93
25 changed files with 1400 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/controls/FluAppBar.qml Normal file
View File

@ -0,0 +1,112 @@
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Rectangle{
color: FluApp.isDark ? "#323232" : "#FFFFFF"
height: 50
width: {
if(parent==null)
return 200
return parent.width
}
property string title: "标题"
MouseArea{
property var lastClickTime: new Date()
anchors.fill: parent
anchors.topMargin: 5
acceptedButtons: Qt.LeftButton
onPressed: Window.window.startSystemMove()
onDoubleClicked: {
toggleMaximized();
}
}
function toggleMaximized() {
if (Window.window.visibility === Window.Maximized) {
Window.window.showNormal();
} else {
Window.window.showMaximized();
}
}
FluText {
text: title
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 14
}
fontStyle: FluText.Title
font.pixelSize: 14
font.bold: true
}
RowLayout{
anchors.right: parent.right;
height: parent.height
spacing: 5
RowLayout{
Layout.alignment: Qt.AlignVCenter
spacing: 5
FluText{
text:"夜间模式"
fontStyle: FluText.Body
}
FluToggleSwitch{
checked: FluApp.isDark
onClicked2:{
FluApp.isDark = !FluApp.isDark
}
}
}
FluIconButton{
icon : FluentIcons.FA_window_minimize
Layout.alignment: Qt.AlignVCenter
iconSize: 15
iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
onClicked: {
Window.window.showMinimized()
}
}
FluIconButton{
icon : {
if(Window.window == null)
return false
return Window.Maximized === Window.window.visibility ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
}
Layout.alignment: Qt.AlignVCenter
iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
iconSize: 15
onClicked: {
toggleMaximized()
}
}
FluIconButton{
icon : FluentIcons.FA_close
Layout.alignment: Qt.AlignVCenter
iconSize: 15
iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
onClicked: {
Window.window.close()
}
}
}
Rectangle{
width: parent.width;
height: 1;
anchors.bottom: parent.bottom;
color: FluApp.isDark ? "#666666" : "#EEEEEE"
}
}

27
src/controls/FluButton.qml
View File

@ -1,6 +1,5 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
Rectangle {
id: button
@ -10,19 +9,33 @@ Rectangle {
property int topPadding: 8
property int bottomPadding: 8
property bool disabled: false
property color primaryColor : "#0064B0"
signal clicked
radius: 4
color: button_mouse.containsMouse ? "#eeeeee" : "#FFFFFF"
color:{
if(FluApp.isDark){
if(disabled){
return "#C7C7C7"
}
return button_mouse.containsMouse ? "#444444" : "#3e3e3e"
}else{
if(disabled){
return "#C7C7C7"
}
return button_mouse.containsMouse ? "#FBFBFB" : "#FFFFFF"
}
}
width: button_text.implicitWidth
height: button_text.implicitHeight
border.color: "#cccccc"
border.color: FluApp.isDark ? "#505050" : "#DFDFDF"
border.width: 1
Text {
FluText {
id: button_text
text: "Standard Button"
color: "#000000"
font.pixelSize: 13
font.pixelSize: 14
leftPadding: button.startPadding
rightPadding: button.endPadding
topPadding: button.topPadding
@ -35,6 +48,8 @@ Rectangle {
anchors.fill: parent
hoverEnabled: true
onClicked: {
if(disabled)
return
button.clicked()
}
}

9
src/controls/FluFilledButton.qml
View File

@ -1,6 +1,5 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
Rectangle {
id: button
@ -21,14 +20,12 @@ Rectangle {
}
width: button_text.implicitWidth
height: button_text.implicitHeight
border.color: "#cccccc"
border.width: 1
Text {
FluText {
id: button_text
text: "Standard Button"
text: "Filled Button"
color: "#FFFFFFFF"
font.pixelSize: 13
font.pixelSize: 14
leftPadding: button.startPadding
rightPadding: button.endPadding
topPadding: button.topPadding

34
src/controls/FluIconButton.qml
View File

@ -2,19 +2,43 @@
Rectangle {
width: text.implicitWidth
height: text.implicitHeight
id:button
width: 30
height: 30
property int iconSize: 20
property int icon
property color iconColor: "#000000"
signal clicked
radius: 4
color: {
if(FluApp.isDark){
return button_mouse.containsMouse ? "#000000" : "#00000000"
}else{
return button_mouse.containsMouse ? "#F4F4F4" : "#00000000"
}
}
Text {
id:text
id:text_icon
font.family: "fontawesome"
font.pixelSize: 16
font.pixelSize: iconSize
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
// text:icon
anchors.centerIn: parent
color: iconColor
text: (String.fromCharCode(icon).toString(16));
}
MouseArea{
id:button_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
button.clicked()
}
}
}

5
src/controls/FluRectangle.qml Normal file
View File

@ -0,0 +1,5 @@
import QtQuick 2.15
Item {
}

7
src/controls/FluText.qml
View File

@ -16,10 +16,10 @@ Text {
Caption
}
property int fontStyle: FluText.Display
property color textColor: "#333333"
property int fontStyle: FluText.Body
property color textColor: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
property int pixelSize : 16
property int pixelSize : 14
color: textColor
@ -66,6 +66,7 @@ Text {
font.pixelSize = text.pixelSize * 0.8
break
default:
font.pixelSize = text.pixelSize * 1.0
break
}
}

20
src/controls/FluToggleSwitch.qml
View File

@ -4,10 +4,15 @@ import QtQuick.Controls 2.0
Switch {
id: root
property color checkedColor: "#0064B0"
signal clicked2
width: 40
implicitWidth: 40
height: 20
implicitHeight: 20
checkable: false
indicator: Rectangle {
width: 40
height: 20
width: root.width
height: root.height
radius: height / 2
color: root.checked ? checkedColor : "white"
border.width: 1
@ -21,10 +26,17 @@ Switch {
anchors.verticalCenter: parent.verticalCenter
color: root.checked ? "#FFFFFF" : "#666666"
// border.color: "#D5D5D5"
Behavior on x {
NumberAnimation { duration: 200 }
}
}
}
MouseArea{
id:switch_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
root.clicked2()
}
}
}

36
src/controls/FluWindow.qml Normal file
View File

@ -0,0 +1,36 @@
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Rectangle {
id:root
property bool isMax: {
if(Window.window == null)
return false
return Window.Maximized === Window.window.visibility
}
property string title: "FluentUI"
onIsMaxChanged: {
if(isMax){
root.anchors.margins = 4
root.anchors.fill = parent
}else{
root.anchors.margins = 0
root.anchors.fill = null
}
}
color : FluApp.isDark ? "#202020" : "#F3F3F3"
Component.onCompleted: {
}
WindowHelper{
id:helper
}
}