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

Merge branch 'main' of https://github.com/zhuzichu520/FluentUI

Browse Source
This commit is contained in:
zhuzihcu 2023-06-19 09:12:59 +08:00
commit 5acf664492
19 changed files with 431 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/qml/component/CodeExpander.qml
View File

@ -130,7 +130,8 @@ FluExpander{
"FluBreadcrumbBar",
"FluCopyableText",
"FluAcrylic",
"FluRemoteLoader"
"FluRemoteLoader",
"FluMenuBar"
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");

8
example/qml/page/T_Buttons.qml
View File

@ -210,20 +210,18 @@ FluScrollablePage{
verticalCenter: parent.verticalCenter
left: parent.left
}
items:[
FluMenuItem{
text:"Menu_1"
},
}
FluMenuItem{
text:"Menu_2"
},
}
FluMenuItem{
text:"Menu_3"
},
}
FluMenuItem{
text:"Menu_4"
}
]
}
FluToggleSwitch{
id:drop_down_button_switch

111
example/qml/page/T_Menu.qml
View File

@ -9,6 +9,24 @@ FluScrollablePage{
title:"Menu"
FluMenu {
id:menu
title: qsTr("File")
Action { text: qsTr("New...")}
Action { text: qsTr("Open...") }
Action { text: qsTr("Save") }
FluMenuSeparator { }
Action { text: qsTr("Quit") }
FluMenuSeparator { }
Action { text: qsTr("Check");checkable: true;checked: true}
FluMenu{
title: "Save As..."
Action { text: qsTr("Doc") }
Action { text: qsTr("PDF") }
}
}
FluArea{
Layout.fillWidth: true
height: 100
@ -22,28 +40,19 @@ FluScrollablePage{
left:parent.left
}
FluText{
text:"Menu"
}
FluButton{
text:"左击菜单"
text:"Show Menu Popup"
Layout.topMargin: 20
onClicked:{
menu.popup()
}
}
FluButton{
text:"右击菜单"
Layout.topMargin: 20
onClicked: {
showSuccess("请按鼠标右击")
}
MouseArea{
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: {
menu.popup()
}
}
}
}
}
@ -69,20 +78,74 @@ menu.popup()
'
}
FluArea{
Layout.fillWidth: true
height: 100
paddings: 10
Layout.topMargin: 20
Column{
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
}
FluText{
text:"MenuBar"
}
FluMenuBar {
id:menu_bar
FluMenu {
title: qsTr("File")
Action { text: qsTr("New...") }
Action { text: qsTr("Open...") }
Action { text: qsTr("Save") }
FluMenuSeparator { }
Action { text: qsTr("Quit") }
FluMenu{
id:menu
FluMenuItem{
text:"删除"
onClicked: {
showError("删除")
title: "Save As..."
Action { text: qsTr("Doc") }
Action { text: qsTr("PDF") }
}
}
FluMenuItem{
text:"修改"
onClicked: {
showInfo("修改")
FluMenu {
title: qsTr("Edit")
Action { text: qsTr("Cut") }
Action { text: qsTr("Copy") }
Action { text: qsTr("Paste") }
}
FluMenu {
title: qsTr("Help")
Action { text: qsTr("About") }
}
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluMenuBar{
id:menu
FluMenu:{
title:"File"
Action { text: qsTr("New...") }
}
FluMenu:{
title:"Edit"
Action { text: qsTr("Cut") }
Action { text: qsTr("Copy") }
Action { text: qsTr("Paste") }
}
}
menu.popup()
'
}
}

8
example/qml/page/T_StatusView.qml
View File

@ -21,28 +21,27 @@ FluScrollablePage{
id:btn_status_mode
Layout.preferredWidth: 140
text:"Loading"
items:[
FluMenuItem{
text:"Loading"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Loading
}
},
}
FluMenuItem{
text:"Empty"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Empty
}
},
}
FluMenuItem{
text:"Error"
onClicked: {
btn_status_mode.text = text
status_view.statusMode = FluStatusView.Error
}
},
}
FluMenuItem{
text:"Success"
onClicked: {
@ -50,7 +49,6 @@ FluScrollablePage{
status_view.statusMode = FluStatusView.Success
}
}
]
}
}
}

12
example/qml/page/T_TabView.qml
View File

@ -40,21 +40,20 @@ FluScrollablePage{
id:btn_tab_width_behavior
Layout.preferredWidth: 140
text:"Equal"
items:[
FluMenuItem{
text:"Equal"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.Equal
}
},
}
FluMenuItem{
text:"SizeToContent"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.SizeToContent
}
},
}
FluMenuItem{
text:"Compact"
onClicked: {
@ -62,27 +61,25 @@ FluScrollablePage{
tab_view.tabWidthBehavior = FluTabView.Compact
}
}
]
}
FluDropDownButton{
id:btn_close_button_visibility
text:"Always"
Layout.preferredWidth: 120
items:[
FluMenuItem{
text:"Nerver"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.Nerver
}
},
}
FluMenuItem{
text:"Always"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.Always
}
},
}
FluMenuItem{
text:"OnHover"
onClicked: {
@ -90,7 +87,6 @@ FluScrollablePage{
tab_view.closeButtonVisibility = FluTabView.OnHover
}
}
]
}
}
}

6
example/qml/page/T_TreeView.qml
View File

@ -60,21 +60,20 @@ FluScrollablePage {
id:btn_selection_model
Layout.preferredWidth: 140
text:"None"
items:[
FluMenuItem{
text:"None"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.Equal
}
},
}
FluMenuItem{
text:"Single"
onClicked: {
btn_selection_model.text = text
tree_view.selectionMode = FluTabView.SizeToContent
}
},
}
FluMenuItem{
text:"Muiltple"
onClicked: {
@ -82,7 +81,6 @@ FluScrollablePage {
tree_view.selectionMode = FluTabView.Compact
}
}
]
}
FluFilledButton{
text:"获取选中的数据"

2
example/qml/window/MainWindow.qml
View File

@ -135,7 +135,7 @@ CustomWindow {
FluRemoteLoader{
id:loader
anchors.fill: parent
// source: "http://localhost:9000/RemoteComponent.qml"
// source: "http://localhost:9000/RemoteComponent.qml"
source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
}
}

22
example/qml/window/StandardWindow.qml
View File

@ -13,6 +13,28 @@ CustomWindow {
fixSize: true
launchMode: FluWindow.Standard
FluMenuBar {
FluMenu {
title: qsTr("File")
Action { text: qsTr("New...") }
Action { text: qsTr("Open...") }
Action { text: qsTr("Save") }
Action { text: qsTr("Save As...") }
FluMenuSeparator { }
Action { text: qsTr("Quit") }
}
FluMenu {
title: qsTr("Edit")
Action { text: qsTr("Cut") }
Action { text: qsTr("Copy") }
Action { text: qsTr("Paste") }
}
FluMenu {
title: qsTr("Help")
Action { text: qsTr("About") }
}
}
FluText{
anchors.centerIn: parent
text:"我是一个Standard模式的窗口，每次我都会创建一个新的窗口"

4
src/FluApp.cpp
View File

@ -43,6 +43,10 @@ void FluApp::navigate(const QString& route,const QJsonObject& argument,FluRegist
}
QQmlEngine *engine = qmlEngine(appWindow);
QQmlComponent component(engine, routes().value(route).toString());
if (component.isError()) {
qWarning() << component.errors();
return;
}
QVariantMap properties;
properties.insert("route",route);
if(fluRegister){

2
src/FluTextStyle.cpp
View File

@ -8,7 +8,7 @@ FluTextStyle::FluTextStyle(QObject *parent)
Caption(caption);
QFont body;
body.setPixelSize(14);
body.setPixelSize(13);
Body(body);
QFont bodyStrong;

2
src/imports/FluentUI/Controls/FluDivider.qml
View File

@ -3,5 +3,5 @@ import QtQuick.Window
import FluentUI
Rectangle {
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,230/255,234/255,1)
color: FluTheme.dark ? Qt.rgba(60/255,60/255,60/255,1) : Qt.rgba(210/255,210/255,210/255,1)
}

6
src/imports/FluentUI/Controls/FluDropDownButton.qml
View File

@ -30,7 +30,7 @@ Button {
}
}
property var window : Window.window
property alias items: menu.content
default property alias contentData: menu.contentData
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
@ -75,9 +75,9 @@ Button {
color: control.textColor
}
onClicked: {
if(items && menu.getContainerCount()!==0){
if(items && menu.count !==0){
var pos = control.mapToItem(null, 0, 0)
var containerHeight = menu.getContainerHeight()
var containerHeight = menu.height
if(window.height>pos.y+control.height+containerHeight){
menu.y = control.height
}else if(pos.y>containerHeight){

73
src/imports/FluentUI/Controls/FluMenu.qml
View File

@ -1,23 +1,28 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Controls.impl
import QtQuick.Templates as T
import FluentUI
Menu {
default property alias content: container.data
property bool enableAnimation: true
id: popup
width: 140
height: container.height
modal:true
dim:false
T.Menu {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)
margins: 0
overlap: 1
spacing: 0
delegate: FluMenuItem { }
enter: Transition {
reversible: true
NumberAnimation {
property: "opacity"
from:0
to:1
duration: enableAnimation ? 83 : 0
duration: 83
}
}
exit:Transition {
@ -25,38 +30,36 @@ Menu {
property: "opacity"
from:1
to:0
duration: enableAnimation ? 83 : 0
duration: 83
}
}
background:Item{
FluShadow{
radius: 5
}
}
contentItem: Item {
contentItem: ListView {
implicitHeight: contentHeight
model: control.contentModel
interactive: Window.window
? contentHeight + control.topPadding + control.bottomPadding > Window.window.height
: false
clip: true
Rectangle{
anchors.fill: parent
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1)
currentIndex: control.currentIndex
ScrollIndicator.vertical: ScrollIndicator {}
}
background: Rectangle {
implicitWidth: 150
implicitHeight: 40
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(240/255,240/255,240/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.width: 1
radius: 5
FluShadow{}
}
Column{
id:container
spacing: 5
topPadding: 5
bottomPadding: 5
width: popup.width
function closePopup(){
popup.close()
T.Overlay.modal: Rectangle {
color: Color.transparent(control.palette.shadow, 0.5)
}
}
}
function getContainerHeight(){
return container.height
}
function getContainerCount(){
return container.children.length
T.Overlay.modeless: Rectangle {
color: Color.transparent(control.palette.shadow, 0.12)
}
}

25
src/imports/FluentUI/Controls/FluMenuBar.qml Normal file
View File

@ -0,0 +1,25 @@
import QtQuick
import QtQuick.Templates as T
import QtQuick.Controls.impl
T.MenuBar {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)
delegate: FluMenuBarItem { }
contentItem: Row {
spacing: control.spacing
Repeater {
model: control.contentModel
}
}
background: Item {
implicitHeight: 30
}
}

53
src/imports/FluentUI/Controls/FluMenuBarItem.qml Normal file
View File

@ -0,0 +1,53 @@
import QtQuick
import QtQuick.Templates as T
import QtQuick.Controls.impl
import FluentUI
T.MenuBarItem {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
spacing: 6
padding: 6
leftPadding: 12
rightPadding: 16
icon.width: 24
icon.height: 24
icon.color: control.palette.buttonText
contentItem: FluText {
verticalAlignment: Text.AlignVCenter
text: control.text
}
background: Rectangle {
implicitWidth: 30
implicitHeight: 30
radius: 3
color: {
if(FluTheme.dark){
if(control.highlighted){
return Qt.rgba(1,1,1,0.06)
}
if(control.hovered){
return Qt.rgba(1,1,1,0.03)
}
return Qt.rgba(0,0,0,0)
}else{
if(control.highlighted){
return Qt.rgba(0,0,0,0.06)
}
if(control.hovered){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
}
}
}
}

88
src/imports/FluentUI/Controls/FluMenuItem.qml
View File

@ -1,53 +1,69 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.impl
import QtQuick.Templates as T
import FluentUI
Item {
property string text: "MenuItem"
property var onClickFunc
signal clicked
id:control
width: {
if(control.parent){
return control.parent.width
T.MenuItem {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
padding: 6
spacing: 6
icon.width: 24
icon.height: 24
icon.color: control.palette.windowText
height: visible ? implicitHeight : 0
contentItem: FluText {
readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
leftPadding: !control.mirrored ? indicatorPadding : arrowPadding
rightPadding: control.mirrored ? indicatorPadding : arrowPadding
verticalAlignment: Text.AlignVCenter
text: control.text
}
return 140
indicator: FluIcon {
x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
y: control.topPadding + (control.availableHeight - height) / 2
visible: control.checked
iconSource: FluentIcons.CheckMark
}
height: 32
Rectangle{
anchors.centerIn: parent
width: control.width-40
height: 32
radius: 4
arrow: FluIcon {
x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
visible: control.subMenu
iconSource: FluentIcons.ChevronRightMed
}
background: Rectangle {
implicitWidth: 150
implicitHeight: 40
x: 1
y: 1
width: control.width - 2
height: control.height - 2
color:{
if(FluTheme.dark){
if(mouse_area.containsMouse){
return Qt.rgba(1,1,1,0.05)
if(control.highlighted){
return Qt.rgba(1,1,1,0.06)
}
return Qt.rgba(0,0,0,0)
}else{
if(mouse_area.containsMouse){
return Qt.rgba(0,0,0,0.05)
if(control.highlighted){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
}
}
FluText{
text: control.text
anchors.centerIn: parent
}
MouseArea{
id:mouse_area
hoverEnabled: true
anchors.fill: parent
onClicked: {
if(control.onClickFunc){
control.onClickFunc()
return
}
control.parent.closePopup()
control.clicked()
}
}
}
}

22
src/imports/FluentUI/Controls/FluMenuSeparator.qml Normal file
View File

@ -0,0 +1,22 @@
import QtQuick
import QtQuick.Controls.impl
import QtQuick.Templates as T
import FluentUI
T.MenuSeparator {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
padding: 0
verticalPadding: 0
contentItem: Rectangle {
implicitWidth: 188
implicitHeight: 1
color: FluTheme.dark ? Qt.rgba(60/255,60/255,60/255,1) : Qt.rgba(210/255,210/255,210/255,1)
}
}

1
src/imports/FluentUI/Controls/FluTextBox.qml
View File

@ -73,6 +73,5 @@ TextField{
id:menu
inputItem: control
}
}

3
src/imports/FluentUI/Controls/FluTextBoxMenu.qml
View File

@ -9,8 +9,7 @@ FluMenu{
property string selectAllText : "全选"
property var inputItem
id:menu
focus:false
enableAnimation:false
width: 120
onVisibleChanged: {
if(visible){
inputItem.forceActiveFocus()