From c07011408cda731df33cf6b985bfe7e504ef1ba5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?=
 <zhuzichu520@outlook.com>
Date: Tue, 13 Jun 2023 23:57:52 +0800
Subject: [PATCH] update

---
 example/qml/global/ItemsOriginal.qml          | 22 +++++-
 .../FluentUI/Controls/FluNavigationView.qml   | 76 ++++++++++++++++++-
 src/imports/FluentUI/Controls/FluPaneItem.qml |  1 +
 3 files changed, 95 insertions(+), 4 deletions(-)

diff --git a/example/qml/global/ItemsOriginal.qml b/example/qml/global/ItemsOriginal.qml
index dab41ca2..e0f20413 100644
--- a/example/qml/global/ItemsOriginal.qml
+++ b/example/qml/global/ItemsOriginal.qml
@@ -9,7 +9,7 @@ FluObject{
 
     FluPaneItem{
         id:item_home
-        property int count: 8
+        count: 9
         title:lang.home
         infoBadge:FluBadge{
             count: item_home.count
@@ -27,11 +27,17 @@ FluObject{
         title:lang.basic_input
         icon:FluentIcons.CheckboxComposite
         FluPaneItem{
+            id:item_buttons
+            count: 99
+            infoBadge:FluBadge{
+                count: item_buttons.count
+            }
             title:"Buttons"
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
             onTap:{
+                item_buttons.count = 0
                 navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
             }
         }
@@ -168,8 +174,15 @@ FluObject{
             }
         }
         FluPaneItem{
+            id:item_combobox
             title:"ComboBox"
+            count: 9
+            infoBadge:FluBadge{
+                count: item_combobox.count
+                color: Qt.rgba(250/255,173/255,20/255,1)
+            }
             onTap:{
+                item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
             }
         }
@@ -283,8 +296,15 @@ FluObject{
         title:lang.other
         icon:FluentIcons.Shop
         FluPaneItem{
+            id:item_other
             title:"RemoteLoader"
+            count: 99
+            infoBadge:FluBadge{
+                count: item_other.count
+                color: Qt.rgba(82/255,196/255,26/255,1)
+            }
             onTap:{
+                item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
             }
         }
diff --git a/src/imports/FluentUI/Controls/FluNavigationView.qml b/src/imports/FluentUI/Controls/FluNavigationView.qml
index 506245ba..5a738b8b 100644
--- a/src/imports/FluentUI/Controls/FluNavigationView.qml
+++ b/src/imports/FluentUI/Controls/FluNavigationView.qml
@@ -178,6 +178,33 @@ Item {
                     }
                     model.isExpand = !model.isExpand
                 }
+                Rectangle{
+                    color:Qt.rgba(255/255,77/255,79/255,1)
+                    width: 10
+                    height: 10
+                    radius: 5
+                    border.width: 1
+                    border.color: Qt.rgba(1,1,1,1)
+                    anchors{
+                        right: parent.right
+                        verticalCenter: parent.verticalCenter
+                        rightMargin: 3
+                        verticalCenterOffset: -8
+                    }
+                    visible: {
+                        if(!model.isExpand){
+
+                            for(var i=0;i<model.children.length;i++){
+                                var item = model.children[i]
+                                if(item.infoBadge && item.count !==0){
+                                    return true
+                                }
+                            }
+                        }
+                        return false
+                    }
+                }
+
                 Rectangle{
                     radius: 4
                     anchors.fill: parent
@@ -199,7 +226,9 @@ Item {
                             verticalCenter: parent.verticalCenter
                         }
                     }
+
                     FluIcon{
+                        id:item_icon_expand
                         rotation: model.isExpand?0:180
                         iconSource:FluentIcons.ChevronUp
                         iconSize: 15
@@ -279,9 +308,11 @@ Item {
                             }
                             return true
                         }
+                        elide: Text.ElideRight
                         anchors{
                             verticalCenter: parent.verticalCenter
                             left:item_icon.right
+                            right: item_icon_expand.left
                         }
                         color:{
                             if(item_control.pressed){
@@ -429,6 +460,7 @@ Item {
                             }
                             return true
                         }
+                        elide: Text.ElideRight
                         color:{
                             if(item_control.pressed){
                                 return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
@@ -438,13 +470,17 @@ Item {
                         anchors{
                             verticalCenter: parent.verticalCenter
                             left:item_icon.right
+                            right: item_dot_loader.left
                         }
                     }
                     Loader{
+                        id:item_dot_loader
+                        property bool isDot: (item_dot_loader.item&&item_dot_loader.item.isDot)
                         anchors{
                             right: parent.right
-                            rightMargin: 10
                             verticalCenter: parent.verticalCenter
+                            rightMargin: isDot ? 3 : 10
+                            verticalCenterOffset: isDot ? -8 : 0
                         }
                         sourceComponent: {
                             if(model.infoBadge){
@@ -452,6 +488,14 @@ Item {
                             }
                             return undefined
                         }
+                        Connections{
+                            target: d
+                           function onIsCompactAndNotPanelChanged(){
+                                if(item_dot_loader.item){
+                                    item_dot_loader.item.isDot = d.isCompactAndNotPanel
+                                }
+                            }
+                        }
                     }
                 }
             }
@@ -822,6 +866,14 @@ Item {
                 duration: 83
             }
         }
+        Connections{
+            target: d
+            function onIsCompactChanged(){
+                if(!d.isCompact){
+                    control_popup.close()
+                }
+           }
+        }
         padding: 0
         focus: true
         contentItem: Item{
@@ -834,7 +886,7 @@ Item {
                 ScrollBar.vertical: FluScrollBar {}
                 delegate:Button{
                     id:item_button
-                    width: 160
+                    width: 180
                     padding:10
                     focusPolicy:Qt.TabFocus
                     background: Rectangle{
@@ -848,9 +900,27 @@ Item {
                             visible: item_button.activeFocus
                             radius:4
                         }
+
+                        Loader{
+                            id:item_dot_loader
+                            anchors{
+                                right: parent.right
+                                verticalCenter: parent.verticalCenter
+                                rightMargin: 10
+                            }
+                            sourceComponent: {
+                                if(model.infoBadge){
+                                    return model.infoBadge
+                                }
+                                return undefined
+                            }
+                        }
+
                     }
                     contentItem: FluText{
                         text:modelData.title
+                        elide: Text.ElideRight
+                        rightPadding: item_dot_loader.width
                         anchors{
                             verticalCenter: parent.verticalCenter
                         }
@@ -872,7 +942,7 @@ Item {
             }
         }
         background: FluRectangle{
-            implicitWidth: 160
+            implicitWidth: 180
             implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
             radius: [4,4,4,4]
             FluShadow{
diff --git a/src/imports/FluentUI/Controls/FluPaneItem.qml b/src/imports/FluentUI/Controls/FluPaneItem.qml
index ee8b2946..e6abcad3 100644
--- a/src/imports/FluentUI/Controls/FluPaneItem.qml
+++ b/src/imports/FluentUI/Controls/FluPaneItem.qml
@@ -16,6 +16,7 @@ QtObject {
     property var image
     property var parent
     property int idx
+    property int count: 0
     signal tap
     property var tapFunc
 }