mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-30 07:03:46 +08:00
update
This commit is contained in:
parent
cbebb51d62
commit
7618fe0f37
@ -2,16 +2,26 @@ import QtQuick 2.15
|
|||||||
import QtQuick.Window 2.15
|
import QtQuick.Window 2.15
|
||||||
import FluentUI 1.0
|
import FluentUI 1.0
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
property real spacing
|
Item {
|
||||||
property alias separatorHeight:separator.height
|
|
||||||
id:control
|
id:control
|
||||||
color:Qt.rgba(0,0,0,0)
|
property int orientation: Qt.Horizontal
|
||||||
height: spacing*2+separator.height
|
property int spacing:0
|
||||||
|
property int size: 1
|
||||||
|
|
||||||
|
QtObject{
|
||||||
|
id:d
|
||||||
|
property bool isVertical : orientation === Qt.Vertical
|
||||||
|
}
|
||||||
|
|
||||||
|
width: d.isVertical ? spacing*2+size : parent.width
|
||||||
|
height: d.isVertical ? parent.height : spacing*2+size
|
||||||
|
|
||||||
FluRectangle{
|
FluRectangle{
|
||||||
id:separator
|
|
||||||
color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
|
color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
|
||||||
width:parent.width
|
width: d.isVertical ? size : parent.width
|
||||||
|
height: d.isVertical ? parent.height : size
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -16,8 +16,11 @@ Item {
|
|||||||
property int pageMode: FluNavigationViewType.Stack
|
property int pageMode: FluNavigationViewType.Stack
|
||||||
property FluMenu navItemRightMenu
|
property FluMenu navItemRightMenu
|
||||||
property FluMenu navItemExpanderRightMenu
|
property FluMenu navItemExpanderRightMenu
|
||||||
|
property int navCompactWidth: 50
|
||||||
|
property int navTopMargin: 0
|
||||||
property int cellHeight: 38
|
property int cellHeight: 38
|
||||||
property int cellWidth: 300
|
property int cellWidth: 300
|
||||||
|
property bool hideNavAppBar: false
|
||||||
signal logoClicked
|
signal logoClicked
|
||||||
id:control
|
id:control
|
||||||
Item{
|
Item{
|
||||||
@ -120,7 +123,7 @@ Item {
|
|||||||
}
|
}
|
||||||
return 1
|
return 1
|
||||||
}
|
}
|
||||||
separatorHeight: {
|
size: {
|
||||||
if(!model){
|
if(!model){
|
||||||
return 1
|
return 1
|
||||||
}
|
}
|
||||||
@ -179,7 +182,7 @@ Item {
|
|||||||
FluTooltip {
|
FluTooltip {
|
||||||
text: model.title
|
text: model.title
|
||||||
visible: item_control.hovered && model.title && d.isCompact
|
visible: item_control.hovered && model.title && d.isCompact
|
||||||
delay: 400
|
delay: 800
|
||||||
}
|
}
|
||||||
MouseArea{
|
MouseArea{
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
@ -204,7 +207,7 @@ Item {
|
|||||||
if(h+y>control.height){
|
if(h+y>control.height){
|
||||||
y = control.height - h
|
y = control.height - h
|
||||||
}
|
}
|
||||||
control_popup.showPopup(Qt.point(50,y),h,model.children)
|
control_popup.showPopup(Qt.point(control.navCompactWidth,y),h,model.children)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
model.isExpand = !model.isExpand
|
model.isExpand = !model.isExpand
|
||||||
@ -335,9 +338,9 @@ Item {
|
|||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
left:parent.left
|
left:parent.left
|
||||||
leftMargin: 3
|
verticalCenter: parent.verticalCenter
|
||||||
|
leftMargin: d.isCompactAndNotPanel ? (parent.width - 30)/2 : 3
|
||||||
}
|
}
|
||||||
FluLoader{
|
FluLoader{
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
@ -463,7 +466,7 @@ Item {
|
|||||||
FluTooltip {
|
FluTooltip {
|
||||||
text: model.title
|
text: model.title
|
||||||
visible: item_control.hovered && model.title && d.isCompact
|
visible: item_control.hovered && model.title && d.isCompact
|
||||||
delay: 400
|
delay: 800
|
||||||
}
|
}
|
||||||
onClicked:{
|
onClicked:{
|
||||||
if(type === 0){
|
if(type === 0){
|
||||||
@ -558,9 +561,9 @@ Item {
|
|||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
left:parent.left
|
left:parent.left
|
||||||
leftMargin: 3
|
verticalCenter: parent.verticalCenter
|
||||||
|
leftMargin: d.isCompactAndNotPanel ? (parent.width - 30)/2 : 3
|
||||||
}
|
}
|
||||||
FluLoader{
|
FluLoader{
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
@ -677,11 +680,12 @@ Item {
|
|||||||
Item {
|
Item {
|
||||||
id:nav_app_bar
|
id:nav_app_bar
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: 40
|
height: visible ? 40 : 0
|
||||||
anchors{
|
anchors{
|
||||||
top: parent.top
|
top: parent.top
|
||||||
topMargin: control.topPadding
|
topMargin: control.topPadding
|
||||||
}
|
}
|
||||||
|
visible: !control.hideNavAppBar
|
||||||
z:999
|
z:999
|
||||||
RowLayout{
|
RowLayout{
|
||||||
height:parent.height
|
height:parent.height
|
||||||
@ -844,7 +848,7 @@ Item {
|
|||||||
return 0
|
return 0
|
||||||
}
|
}
|
||||||
if(d.isCompact){
|
if(d.isCompact){
|
||||||
return 50
|
return control.navCompactWidth
|
||||||
}
|
}
|
||||||
return control.cellWidth
|
return control.cellWidth
|
||||||
}
|
}
|
||||||
@ -872,12 +876,13 @@ Item {
|
|||||||
id:layout_list
|
id:layout_list
|
||||||
width: {
|
width: {
|
||||||
if(d.isCompactAndNotPanel){
|
if(d.isCompactAndNotPanel){
|
||||||
return 50
|
return control.navCompactWidth
|
||||||
}
|
}
|
||||||
return control.cellWidth
|
return control.cellWidth
|
||||||
}
|
}
|
||||||
anchors{
|
anchors{
|
||||||
top: parent.top
|
top: parent.top
|
||||||
|
topMargin: control.navTopMargin
|
||||||
bottom: parent.bottom
|
bottom: parent.bottom
|
||||||
}
|
}
|
||||||
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
|
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
|
||||||
@ -937,10 +942,13 @@ Item {
|
|||||||
}
|
}
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
visible:d.isCompactAndNotPanel
|
visible:d.isCompactAndNotPanel
|
||||||
width:38
|
anchors{
|
||||||
height:34
|
fill: parent
|
||||||
x:6
|
leftMargin: 6
|
||||||
y:2
|
rightMargin: 6
|
||||||
|
topMargin: 2
|
||||||
|
bottomMargin: 2
|
||||||
|
}
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
iconSource: {
|
iconSource: {
|
||||||
if(loader_auto_suggest_box.item){
|
if(loader_auto_suggest_box.item){
|
||||||
|
@ -254,6 +254,7 @@ Item {
|
|||||||
FluDivider{
|
FluDivider{
|
||||||
width: 1
|
width: 1
|
||||||
height: 16
|
height: 16
|
||||||
|
orientation: Qt.Vertical
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
right: parent.right
|
right: parent.right
|
||||||
|
@ -2,16 +2,25 @@ import QtQuick
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Rectangle {
|
Item {
|
||||||
property real spacing
|
|
||||||
property alias separatorHeight:separator.height
|
|
||||||
id:control
|
id:control
|
||||||
color:Qt.rgba(0,0,0,0)
|
property int orientation: Qt.Horizontal
|
||||||
height: spacing*2+separator.height
|
property int spacing:0
|
||||||
|
property int size: 1
|
||||||
|
|
||||||
|
QtObject{
|
||||||
|
id:d
|
||||||
|
property bool isVertical : orientation === Qt.Vertical
|
||||||
|
}
|
||||||
|
|
||||||
|
width: d.isVertical ? spacing*2+size : parent.width
|
||||||
|
height: d.isVertical ? parent.height : spacing*2+size
|
||||||
|
|
||||||
FluRectangle{
|
FluRectangle{
|
||||||
id:separator
|
|
||||||
color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
|
color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
|
||||||
width:parent.width
|
width: d.isVertical ? size : parent.width
|
||||||
|
height: d.isVertical ? parent.height : size
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -17,8 +17,11 @@ Item {
|
|||||||
property int pageMode: FluNavigationViewType.Stack
|
property int pageMode: FluNavigationViewType.Stack
|
||||||
property FluMenu navItemRightMenu
|
property FluMenu navItemRightMenu
|
||||||
property FluMenu navItemExpanderRightMenu
|
property FluMenu navItemExpanderRightMenu
|
||||||
|
property int navCompactWidth: 50
|
||||||
|
property int navTopMargin: 0
|
||||||
property int cellHeight: 38
|
property int cellHeight: 38
|
||||||
property int cellWidth: 300
|
property int cellWidth: 300
|
||||||
|
property bool hideNavAppBar: false
|
||||||
signal logoClicked
|
signal logoClicked
|
||||||
id:control
|
id:control
|
||||||
Item{
|
Item{
|
||||||
@ -121,7 +124,7 @@ Item {
|
|||||||
}
|
}
|
||||||
return 1
|
return 1
|
||||||
}
|
}
|
||||||
separatorHeight: {
|
size: {
|
||||||
if(!model){
|
if(!model){
|
||||||
return 1
|
return 1
|
||||||
}
|
}
|
||||||
@ -180,7 +183,7 @@ Item {
|
|||||||
FluTooltip {
|
FluTooltip {
|
||||||
text: model.title
|
text: model.title
|
||||||
visible: item_control.hovered && model.title && d.isCompact
|
visible: item_control.hovered && model.title && d.isCompact
|
||||||
delay: 400
|
delay: 800
|
||||||
}
|
}
|
||||||
MouseArea{
|
MouseArea{
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
@ -205,7 +208,7 @@ Item {
|
|||||||
if(h+y>control.height){
|
if(h+y>control.height){
|
||||||
y = control.height - h
|
y = control.height - h
|
||||||
}
|
}
|
||||||
control_popup.showPopup(Qt.point(50,y),h,model.children)
|
control_popup.showPopup(Qt.point(control.navCompactWidth,y),h,model.children)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
model.isExpand = !model.isExpand
|
model.isExpand = !model.isExpand
|
||||||
@ -336,9 +339,9 @@ Item {
|
|||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
left:parent.left
|
left:parent.left
|
||||||
leftMargin: 3
|
verticalCenter: parent.verticalCenter
|
||||||
|
leftMargin: d.isCompactAndNotPanel ? (parent.width - 30)/2 : 3
|
||||||
}
|
}
|
||||||
FluLoader{
|
FluLoader{
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
@ -348,7 +351,6 @@ Item {
|
|||||||
}
|
}
|
||||||
return com_icon
|
return com_icon
|
||||||
}
|
}
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluText{
|
FluText{
|
||||||
@ -396,7 +398,6 @@ Item {
|
|||||||
right: item_title.right
|
right: item_title.right
|
||||||
rightMargin: 8
|
rightMargin: 8
|
||||||
}
|
}
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
sourceComponent: {
|
sourceComponent: {
|
||||||
if(d.isCompact){
|
if(d.isCompact){
|
||||||
return undefined
|
return undefined
|
||||||
@ -466,7 +467,7 @@ Item {
|
|||||||
FluTooltip {
|
FluTooltip {
|
||||||
text: model.title
|
text: model.title
|
||||||
visible: item_control.hovered && model.title && d.isCompact
|
visible: item_control.hovered && model.title && d.isCompact
|
||||||
delay: 400
|
delay: 800
|
||||||
}
|
}
|
||||||
onClicked:{
|
onClicked:{
|
||||||
if(type === 0){
|
if(type === 0){
|
||||||
@ -561,13 +562,12 @@ Item {
|
|||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
left:parent.left
|
left:parent.left
|
||||||
leftMargin: 3
|
verticalCenter: parent.verticalCenter
|
||||||
|
leftMargin: d.isCompactAndNotPanel ? (parent.width - 30)/2 : 3
|
||||||
}
|
}
|
||||||
FluLoader{
|
FluLoader{
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
sourceComponent: {
|
sourceComponent: {
|
||||||
if(model&&model.iconDelegate){
|
if(model&&model.iconDelegate){
|
||||||
return model.iconDelegate
|
return model.iconDelegate
|
||||||
@ -630,7 +630,6 @@ Item {
|
|||||||
}
|
}
|
||||||
return model.showEdit ? model.editDelegate : undefined
|
return model.showEdit ? model.editDelegate : undefined
|
||||||
}
|
}
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
onStatusChanged: {
|
onStatusChanged: {
|
||||||
if(status === FluLoader.Ready){
|
if(status === FluLoader.Ready){
|
||||||
item.forceActiveFocus()
|
item.forceActiveFocus()
|
||||||
@ -666,7 +665,6 @@ Item {
|
|||||||
}
|
}
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
Connections{
|
Connections{
|
||||||
target: d
|
target: d
|
||||||
function onIsCompactAndNotPanelChanged(){
|
function onIsCompactAndNotPanelChanged(){
|
||||||
@ -683,11 +681,12 @@ Item {
|
|||||||
Item {
|
Item {
|
||||||
id:nav_app_bar
|
id:nav_app_bar
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: 40
|
height: visible ? 40 : 0
|
||||||
anchors{
|
anchors{
|
||||||
top: parent.top
|
top: parent.top
|
||||||
topMargin: control.topPadding
|
topMargin: control.topPadding
|
||||||
}
|
}
|
||||||
|
visible: !control.hideNavAppBar
|
||||||
z:999
|
z:999
|
||||||
RowLayout{
|
RowLayout{
|
||||||
height:parent.height
|
height:parent.height
|
||||||
@ -800,7 +799,6 @@ Item {
|
|||||||
id:loader_action
|
id:loader_action
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
sourceComponent: actionItem
|
sourceComponent: actionItem
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -851,12 +849,11 @@ Item {
|
|||||||
return 0
|
return 0
|
||||||
}
|
}
|
||||||
if(d.isCompact){
|
if(d.isCompact){
|
||||||
return 50
|
return control.navCompactWidth
|
||||||
}
|
}
|
||||||
return control.cellWidth
|
return control.cellWidth
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
Behavior on anchors.leftMargin {
|
Behavior on anchors.leftMargin {
|
||||||
enabled: FluTheme.enableAnimation && d.animDisabled
|
enabled: FluTheme.enableAnimation && d.animDisabled
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
@ -880,12 +877,13 @@ Item {
|
|||||||
id:layout_list
|
id:layout_list
|
||||||
width: {
|
width: {
|
||||||
if(d.isCompactAndNotPanel){
|
if(d.isCompactAndNotPanel){
|
||||||
return 50
|
return control.navCompactWidth
|
||||||
}
|
}
|
||||||
return control.cellWidth
|
return control.cellWidth
|
||||||
}
|
}
|
||||||
anchors{
|
anchors{
|
||||||
top: parent.top
|
top: parent.top
|
||||||
|
topMargin: control.navTopMargin
|
||||||
bottom: parent.bottom
|
bottom: parent.bottom
|
||||||
}
|
}
|
||||||
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
|
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
|
||||||
@ -936,7 +934,6 @@ Item {
|
|||||||
rightMargin: 6
|
rightMargin: 6
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
visible: {
|
visible: {
|
||||||
if(d.isCompactAndNotPanel){
|
if(d.isCompactAndNotPanel){
|
||||||
return false
|
return false
|
||||||
@ -946,10 +943,13 @@ Item {
|
|||||||
}
|
}
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
visible:d.isCompactAndNotPanel
|
visible:d.isCompactAndNotPanel
|
||||||
width:38
|
anchors{
|
||||||
height:34
|
fill: parent
|
||||||
x:6
|
leftMargin: 6
|
||||||
y:2
|
rightMargin: 6
|
||||||
|
topMargin: 2
|
||||||
|
bottomMargin: 2
|
||||||
|
}
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
iconSource: {
|
iconSource: {
|
||||||
if(loader_auto_suggest_box.item){
|
if(loader_auto_suggest_box.item){
|
||||||
@ -1008,7 +1008,6 @@ Item {
|
|||||||
property var model: modelData
|
property var model: modelData
|
||||||
property var _idx: index
|
property var _idx: index
|
||||||
property int type: 0
|
property int type: 0
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
sourceComponent: {
|
sourceComponent: {
|
||||||
if(model === null || !model)
|
if(model === null || !model)
|
||||||
return undefined
|
return undefined
|
||||||
@ -1066,7 +1065,6 @@ Item {
|
|||||||
property var model: modelData
|
property var model: modelData
|
||||||
property var _idx: index
|
property var _idx: index
|
||||||
property int type: 1
|
property int type: 1
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
sourceComponent: {
|
sourceComponent: {
|
||||||
if(modelData instanceof FluPaneItem){
|
if(modelData instanceof FluPaneItem){
|
||||||
return com_panel_item
|
return com_panel_item
|
||||||
@ -1135,7 +1133,6 @@ Item {
|
|||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
rightMargin: 10
|
rightMargin: 10
|
||||||
}
|
}
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
sourceComponent: {
|
sourceComponent: {
|
||||||
if(model.infoBadge){
|
if(model.infoBadge){
|
||||||
return model.infoBadge
|
return model.infoBadge
|
||||||
@ -1188,7 +1185,6 @@ Item {
|
|||||||
}
|
}
|
||||||
FluLoader{
|
FluLoader{
|
||||||
property var modelData
|
property var modelData
|
||||||
Component.onDestruction: sourceComponent = undefined
|
|
||||||
id:loader_item_menu
|
id:loader_item_menu
|
||||||
}
|
}
|
||||||
Connections{
|
Connections{
|
||||||
|
@ -254,6 +254,7 @@ Item {
|
|||||||
FluDivider{
|
FluDivider{
|
||||||
width: 1
|
width: 1
|
||||||
height: 16
|
height: 16
|
||||||
|
orientation: Qt.Vertical
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
right: parent.right
|
right: parent.right
|
||||||
|
Loading…
Reference in New Issue
Block a user