From a00b0d21103e9003e5121e58102c2cb1a7a3aa48 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Tue, 10 Dec 2024 18:54:30 +0800
Subject: [PATCH] feat: redesign Banner.

---
 demo/Ursa.Demo/Pages/BannerDemo.axaml         | 39 ++++++-----
 demo/Ursa.Demo/Pages/BannerDemo.axaml.cs      | 38 ++---------
 src/Ursa.Themes.Semi/Controls/Banner.axaml    | 66 +++++++++----------
 .../Themes/Shared/Banner.axaml                |  3 +
 4 files changed, 64 insertions(+), 82 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/BannerDemo.axaml b/demo/Ursa.Demo/Pages/BannerDemo.axaml
index 91c8f89..d8e6b85 100644
--- a/demo/Ursa.Demo/Pages/BannerDemo.axaml
+++ b/demo/Ursa.Demo/Pages/BannerDemo.axaml
@@ -13,28 +13,27 @@
     </Design.DataContext>
     <StackPanel Spacing="20">
         <Grid ColumnDefinitions="*, 300">
-            <Grid Grid.Column="0">
-                <Border Margin="20">
-                    <u:Banner
-                        Classes.Bordered="{Binding Bordered}"
-                        Content="This is the Demo of Ursa Banner. "
-                        Header="Welcome to Ursa"
-                        Type="{Binding SelectedType}" />
-                </Border>
-            </Grid>
+            <u:Banner
+                Margin="20"
+                Grid.Column="0"
+                Classes.Bordered="{Binding Bordered}"
+                CanClose="{Binding CanClose}"
+                Content="This is the Demo of Ursa Banner. "
+                Header="Welcome to Ursa"
+                Type="{Binding SelectedType}" />
             <Border Grid.Column="1" VerticalAlignment="Top">
-                <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *">
+                <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *">
                     <Label
                         Grid.Row="0"
                         Grid.Column="0"
                         VerticalAlignment="Center"
                         Content="Type" />
-                    <ComboBox
+                    <u:EnumSelector
                         Grid.Row="0"
                         Grid.Column="1"
-                        MinWidth="200"
-                        ItemsSource="{Binding Types}"
-                        SelectedItem="{Binding SelectedType}" />
+                        Width="200"
+                        EnumType="NotificationType"
+                        Value="{Binding SelectedType}" />
                     <Label
                         Grid.Row="1"
                         Grid.Column="0"
@@ -45,8 +44,18 @@
                         Grid.Column="1"
                         VerticalAlignment="Center"
                         IsChecked="{Binding Bordered}" />
+                    <Label
+                        Grid.Row="2"
+                        Grid.Column="0"
+                        VerticalAlignment="Center"
+                        Content="CanClose" />
+                    <ToggleSwitch
+                        Grid.Row="2"
+                        Grid.Column="1"
+                        VerticalAlignment="Center"
+                        IsChecked="{Binding CanClose}" />
                 </Grid>
             </Border>
         </Grid>
     </StackPanel>
-</UserControl>
+</UserControl>
\ No newline at end of file
diff --git a/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs b/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
index cd7b94d..e0d16d1 100644
--- a/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
+++ b/demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
@@ -1,7 +1,7 @@
-using System.Collections.ObjectModel;
 using Avalonia.Controls;
 using Avalonia.Controls.Notifications;
 using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
 using Ursa.Demo.ViewModels;
 
 namespace Ursa.Demo.Pages;
@@ -20,37 +20,9 @@ public partial class BannerDemo : UserControl
     }
 }
 
-public class BannerDemoViewModel : ViewModelBase
+public partial class BannerDemoViewModel : ViewModelBase
 {
-    private ObservableCollection<NotificationType>? _types;
-
-    public ObservableCollection<NotificationType>? Types
-    {
-        get => _types;
-        set => SetProperty(ref _types, value);
-    }
-
-    private NotificationType _selectedType;
-
-    public NotificationType SelectedType
-    {
-        get => _selectedType;
-        set => SetProperty(ref _selectedType, value);
-    }
-
-    private bool _bordered;
-
-    public bool Bordered
-    {
-        get => _bordered;
-        set => SetProperty(ref _bordered, value);
-    }
-
-    public BannerDemoViewModel()
-    {
-        Types = new ObservableCollection<NotificationType>()
-        {
-            NotificationType.Information, NotificationType.Success, NotificationType.Warning, NotificationType.Error
-        };
-    }
+    [ObservableProperty] private NotificationType _selectedType;
+    [ObservableProperty] private bool _bordered;
+    [ObservableProperty] private bool _canClose;
 }
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Controls/Banner.axaml b/src/Ursa.Themes.Semi/Controls/Banner.axaml
index e69fc97..4050b03 100644
--- a/src/Ursa.Themes.Semi/Controls/Banner.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Banner.axaml
@@ -2,8 +2,18 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:u="https://irihi.tech/ursa">
-    <!--  Add Resources Here  -->
+    <Design.PreviewWith>
+        <HeaderedContentControl Theme="{StaticResource GroupBox}" Width="500">
+            <u:Banner
+                Classes="Bordered"
+                Header="Title"
+                Content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+                Type="Warning"
+                CanClose="True" />
+        </HeaderedContentControl>
+    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type u:Banner}" TargetType="u:Banner">
+        <Setter Property="Padding" Value="{DynamicResource BannerBorderPadding}" />
         <Setter Property="BorderThickness" Value="{DynamicResource BannerBorderThickness}" />
         <Setter Property="BorderBrush" Value="{DynamicResource BannerBorderBrush}" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
@@ -11,19 +21,16 @@
             <ControlTemplate TargetType="u:Banner">
                 <Border
                     Name="PART_Container"
-                    Padding="12"
+                    Padding="{TemplateBinding Padding}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}">
                     <Grid ColumnDefinitions="*, Auto">
                         <Grid
                             Grid.Column="0"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            ColumnDefinitions="Auto, *"
-                            RowDefinitions="Auto, *">
+                            ColumnDefinitions="Auto, *">
                             <!--  Icon Area  -->
                             <Panel
-                                Grid.Row="0"
-                                Grid.RowSpan="2"
                                 Grid.Column="0"
                                 Margin="{DynamicResource BannerIconMargin}"
                                 VerticalAlignment="Top"
@@ -31,38 +38,29 @@
                                 <ContentPresenter Content="{TemplateBinding Icon}" />
                                 <PathIcon
                                     Name="PART_BuildInIcon"
-                                    Width="16"
-                                    Height="16"
-                                    IsVisible="{TemplateBinding Icon,
-                                                                Converter={x:Static ObjectConverters.IsNull}}" />
+                                    Theme="{DynamicResource InnerPathIcon}"
+                                    Classes="Large"
+                                    IsVisible="{TemplateBinding Icon, Converter={x:Static ObjectConverters.IsNull}}" />
                             </Panel>
-                            <ContentPresenter
-                                Grid.Row="0"
-                                Grid.Column="1"
-                                Content="{TemplateBinding Header}"
-                                ContentTemplate="{TemplateBinding HeaderTemplate}"
-                                IsVisible="{TemplateBinding Header,
-                                                            Converter={x:Static ObjectConverters.IsNotNull}}"
-                                TextElement.FontWeight="{DynamicResource TextBlockTitleFontWeight}" />
-                            <ContentPresenter
-                                Grid.Row="1"
-                                Grid.Column="1"
-                                Content="{TemplateBinding Content}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <StackPanel Grid.Column="1" Spacing="2">
+                                <ContentPresenter
+                                    Content="{TemplateBinding Header}"
+                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                    TextElement.FontSize="{DynamicResource BannerTitleFontSize}"
+                                    TextElement.FontWeight="{DynamicResource TextBlockTitleFontWeight}" />
+                                <ContentPresenter
+                                    Content="{TemplateBinding Content}"
+                                    ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            </StackPanel>
                         </Grid>
                         <Button
                             Name="{x:Static u:Banner.PART_CloseButton}"
                             Grid.Column="1"
-                            Padding="4"
-                            Cursor="Hand"
-                            IsVisible="{TemplateBinding CanClose}"
-                            Theme="{DynamicResource BorderlessButton}">
-                            <PathIcon
-                                Width="12"
-                                Height="12"
-                                Data="{DynamicResource BannerCloseIconGeometry}"
-                                Foreground="{DynamicResource BannerCloseButtonForeground}" />
-                        </Button>
+                            Margin="{DynamicResource BannerCloseButtonMargin}"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Top"
+                            Theme="{DynamicResource NotificationCloseButton}"
+                            IsVisible="{TemplateBinding CanClose}" />
                     </Grid>
                 </Border>
             </ControlTemplate>
@@ -120,4 +118,4 @@
             </Style>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Shared/Banner.axaml b/src/Ursa.Themes.Semi/Themes/Shared/Banner.axaml
index df1300f..93e5a38 100644
--- a/src/Ursa.Themes.Semi/Themes/Shared/Banner.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Shared/Banner.axaml
@@ -6,6 +6,9 @@
     <StaticResource x:Key="BannerCloseIconGeometry" ResourceKey="SemiIconClose" />
 
     <CornerRadius x:Key="BannerCornerRadius">3</CornerRadius>
+    <Thickness x:Key="BannerBorderPadding">12</Thickness>
     <Thickness x:Key="BannerBorderThickness">1</Thickness>
     <Thickness x:Key="BannerIconMargin">0 0 12 0</Thickness>
+    <Thickness x:Key="BannerCloseButtonMargin">12 0 0 0</Thickness>
+    <x:Double x:Key="BannerTitleFontSize">18</x:Double>
 </ResourceDictionary>
\ No newline at end of file