From 346c89424f4e6eda4c995a9c5c30e13926dbd23b Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Thu, 13 Feb 2025 21:31:42 +0800
Subject: [PATCH] feat: add Nav tag, enhance footer.

---
 demo/Ursa.Demo/Pages/NavMenuDemo.axaml        | 14 +++------
 .../Ursa.Demo/ViewModels/MainViewViewModel.cs |  9 ++++++
 demo/Ursa.Demo/ViewModels/MenuViewModel.cs    | 30 +++++++++----------
 demo/Ursa.Demo/Views/MainView.axaml           | 25 ++++++++--------
 4 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/NavMenuDemo.axaml b/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
index 771b2e3..424e03a 100644
--- a/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
+++ b/demo/Ursa.Demo/Pages/NavMenuDemo.axaml
@@ -20,16 +20,10 @@
         HorizontalAlignment="Left"
         ColumnDefinitions="Auto, Auto"
         RowDefinitions="Auto, Auto, *">
-        <ToggleButton
-            Name="collapse"
-            Grid.Row="0"
-            Grid.Column="0"
-            Grid.ColumnSpan="2">
-            Collapse
-        </ToggleButton>
-        <StackPanel Grid.Row="1" Grid.Column="0">
+        <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
+            <ToggleSwitch Name="collapse" OnContent="Collapse" OffContent="Expand" />
+            <Button HorizontalAlignment="Left" Command="{Binding RandomCommand}" Content="Random a selection" />
             <TextBlock Text="{Binding SelectedMenuItem.Header}" />
-            <Button Command="{Binding RandomCommand}">Random a selection</Button>
         </StackPanel>
         <Border
             Grid.Row="2"
@@ -123,4 +117,4 @@
             </u:NavMenuItem>
         </u:NavMenu>
     </Grid>
-</UserControl>
+</UserControl>
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs b/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
index 66038c1..2abaaf4 100644
--- a/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
@@ -107,6 +107,15 @@ public partial class MainViewViewModel : ViewModelBase
             app.RequestedThemeVariant = newValue.Theme;
         }
     }
+
+    [ObservableProperty] private string? _footerText = "Settings";
+
+    [ObservableProperty] private bool _isCollapsed;
+
+    partial void OnIsCollapsedChanged(bool value)
+    {
+        FooterText = value ? null : "Settings";
+    }
 }
 
 public class ThemeItem(string name, ThemeVariant theme)
diff --git a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
index a54b6b3..b044516 100644
--- a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
@@ -12,10 +12,10 @@ public class MenuViewModel : ViewModelBase
             new() { MenuHeader = "Controls", IsSeparator = true },
             new()
             {
-                MenuHeader = "Buttons and Inputs", Children = new ObservableCollection<MenuItemViewModel>
+                MenuHeader = "Buttons & Inputs", Children = new ObservableCollection<MenuItemViewModel>
                 {
                     new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup },
-                    new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton },
+                    new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton, Status = "Redesigned" },
                     new() { MenuHeader = "AutoCompleteBox", Key = MenuKeys.MenuKeyAutoCompleteBox },
                     new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput },
                     new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector },
@@ -25,7 +25,7 @@ public class MenuViewModel : ViewModelBase
                     new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox },
                     new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
                     new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad },
-                    new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker },
+                    new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker, Status = "New" },
                     new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode },
                     new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
                     new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating },
@@ -37,11 +37,11 @@ public class MenuViewModel : ViewModelBase
             },
             new()
             {
-                MenuHeader = "Dialog and Feedbacks", Children = new ObservableCollection<MenuItemViewModel>()
+                MenuHeader = "Dialog & Feedbacks", Children = new ObservableCollection<MenuItemViewModel>()
                 {
                     new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog },
-                    new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer },
-                    new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading },
+                    new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer, Status = "Updated" },
+                    new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading, Status = "Updated" },
                     new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox },
                     new() { MenuHeader = "Notification", Key = MenuKeys.MenuKeyNotification },
                     new() { MenuHeader = "Toast", Key = MenuKeys.MenuKeyToast },
@@ -50,7 +50,7 @@ public class MenuViewModel : ViewModelBase
             },
             new()
             {
-                MenuHeader = "Date and Time", Children = new ObservableCollection<MenuItemViewModel>
+                MenuHeader = "Date & Time", Children = new ObservableCollection<MenuItemViewModel>
                 {
                     new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker },
                     new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
@@ -61,37 +61,35 @@ public class MenuViewModel : ViewModelBase
             },
             new()
             {
-                MenuHeader = "Navigation and Menus", Children = new ObservableCollection<MenuItemViewModel>
+                MenuHeader = "Navigation & Menus", Children = new ObservableCollection<MenuItemViewModel>
                 {
-                    new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb },
-                    new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu },
+                    new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb, Status = "Updated" },
+                    new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu, Status = "Updated" },
                     new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
                     new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar },
                 }
             },
             new()
             {
-                MenuHeader = "Layout and Display",
+                MenuHeader = "Layout & Display",
                 Children = new ObservableCollection<MenuItemViewModel>
                 {
                     new() { MenuHeader = "AspectRatioLayout", Key = MenuKeys.AspectRatioLayout },
-                    new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar },
+                    new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar, Status = "WIP" },
                     new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge },
-                    new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner },
+                    new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner, Status = "Updated" },
                     new() { MenuHeader = "Disable Container", Key = MenuKeys.MenuKeyDisableContainer },
                     new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider },
                     new() { MenuHeader = "DualBadge", Key = MenuKeys.MenuKeyDualBadge },
                     new() { MenuHeader = "ImageViewer", Key = MenuKeys.MenuKeyImageViewer },
                     new() { MenuHeader = "ElasticWrapPanel", Key = MenuKeys.MenuKeyElasticWrapPanel },
-                    new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee },
+                    new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee, Status = "New" },
                     new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer },
                     new() { MenuHeader = "Scroll To", Key = MenuKeys.MenuKeyScrollToButton },
                     new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline },
                     new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon }
                 }
             },
-            
-            
         };
     }
 
diff --git a/demo/Ursa.Demo/Views/MainView.axaml b/demo/Ursa.Demo/Views/MainView.axaml
index 29752b1..b579f16 100644
--- a/demo/Ursa.Demo/Views/MainView.axaml
+++ b/demo/Ursa.Demo/Views/MainView.axaml
@@ -38,6 +38,7 @@
                     SubMenuBinding="{Binding Children}"
                     HeaderBinding="{Binding}"
                     IconBinding="{Binding MenuHeader}"
+                    IsHorizontalCollapsed="{Binding IsCollapsed, Mode=TwoWay}"
                     ItemsSource="{Binding Menus.MenuItems}">
                     <u:NavMenu.Styles>
                         <Style x:DataType="vm:MenuItemViewModel" Selector="u|NavMenuItem">
@@ -59,12 +60,12 @@
                     </u:NavMenu.IconTemplate>
                     <u:NavMenu.HeaderTemplate>
                         <DataTemplate x:DataType="vm:MenuItemViewModel">
-                            <StackPanel Orientation="Horizontal">
+                            <StackPanel Orientation="Horizontal" Spacing="{StaticResource SemiSpacingExtraTight}">
                                 <TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" />
-                                <u:Badge
-                                    Margin="8,0,0,0"
-                                    HorizontalAlignment="Left"
-                                    Header="{Binding Status}"
+                                <Label
+                                    Theme="{StaticResource TagLabel}"
+                                    Classes="Purple"
+                                    Content="{Binding Status}"
                                     IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}" />
                             </StackPanel>
                         </DataTemplate>
@@ -91,20 +92,20 @@
                         <u:IconButton
                             HorizontalAlignment="Stretch"
                             Classes="Tertiary"
+                            Icon="{StaticResource SemiIconSetting}"
+                            Content="{Binding FooterText}"
+                            RenderTransform="{x:Null}"
+                            ToolTip.Tip="Settings"
+                            FontWeight="Normal"
                             Theme="{DynamicResource BorderlessIconButton}">
-                            <TextBlock IsVisible="{Binding !#menu.IsHorizontalCollapsed}" Text="Settings" />
-                            <u:IconButton.Icon>
-                                <PathIcon Data="{StaticResource SemiIconSetting}" Theme="{StaticResource InnerPathIcon}" />
-                            </u:IconButton.Icon>
                             <Button.Flyout>
                                 <Flyout Placement="RightEdgeAlignedBottom">
                                     <u:Form LabelPosition="Left">
                                         <ComboBox
-                                            MinWidth="100"
-                                            u:FormItem.Label="ThemeVariant"
+                                            Width="110"
+                                            u:FormItem.Label="Theme"
                                             DisplayMemberBinding="{Binding Name}"
                                             ItemsSource="{Binding Themes}"
-                                            PlaceholderText="Select a theme"
                                             SelectedItem="{Binding SelectedTheme}" />
                                     </u:Form>
                                 </Flyout>