Merge pull request #203 from AuroraZiling/main

[Feat&Docs Update] InfoBar Control & StackPage doc
kikipoulet · May 31, 2024 · acdf7e5 · acdf7e5
2 parents 774b880 + ede3089
commit acdf7e5
Show file tree

Hide file tree

Showing 13 changed files with 390 additions and 12 deletions.
diff --git a/SukiUI.Demo/Features/ControlsLibrary/InfoBarView.axaml b/SukiUI.Demo/Features/ControlsLibrary/InfoBarView.axaml
@@ -0,0 +1,80 @@
+<UserControl x:Class="SukiUI.Demo.Features.ControlsLibrary.InfoBarView"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:controls="clr-namespace:SukiUI.Controls;assembly=SukiUI"
+             xmlns:controlsLibrary="clr-namespace:SukiUI.Demo.Features.ControlsLibrary"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             d:DesignHeight="450"
+             d:DesignWidth="800"
+             x:DataType="controlsLibrary:InfoBarViewModel"
+             mc:Ignorable="d">
+    <Grid RowDefinitions="Auto, *">
+        <controls:GlassCard Classes="HeaderCard">
+            <controls:GroupBox Header="InfoBar">
+                <StackPanel Classes="HeaderContent" Spacing="15">
+                    <TextBlock>
+                        InfoBar is a control that displays a message to the user. It can be used to show specific severity message to the user.
+                    </TextBlock>
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock Margin="0,0,0,0"
+                                   VerticalAlignment="Center"
+                                   FontWeight="DemiBold"
+                                   Text="Long Message:" />
+                        <TextBox Name="MessageTextBox"
+                                 Width="500"
+                                 Margin="15,0,0,0"
+                                 Text="Example Message" />
+                    </StackPanel>
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock Margin="0,0,0,0"
+                                   VerticalAlignment="Center"
+                                   FontWeight="DemiBold"
+                                   Text="IsOpen Status" />
+                        <Button Margin="15,0,0,0"
+                                Command="{Binding RefreshIsOpenStatusCommand}"
+                                Content="Refresh" />
+                    </StackPanel>
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock Margin="0,0,0,0"
+                                   VerticalAlignment="Center"
+                                   FontWeight="DemiBold"
+                                   Text="IsClosable" />
+                        <ToggleSwitch Margin="15,0,0,0" IsChecked="{Binding IsClosable}" />
+                    </StackPanel>
+                </StackPanel>
+            </controls:GroupBox>
+        </controls:GlassCard>
+        <ScrollViewer Grid.Row="1">
+            <WrapPanel Classes="PageContainer">
+                <controls:GlassCard>
+                    <UniformGrid>
+                        <controls:InfoBar Title="Title"
+                                          Margin="10"
+                                          IsClosable="{Binding IsClosable}"
+                                          IsOpen="{Binding IsOpen, Mode=TwoWay}"
+                                          Message="{Binding #MessageTextBox.Text}" />
+                        <controls:InfoBar Title="Title"
+                                          Margin="10"
+                                          IsClosable="{Binding IsClosable}"
+                                          IsOpen="{Binding IsOpen, Mode=TwoWay}"
+                                          Message="{Binding #MessageTextBox.Text}"
+                                          Severity="Warning" />
+                        <controls:InfoBar Title="Title"
+                                          Margin="10"
+                                          IsClosable="{Binding IsClosable}"
+                                          IsOpen="{Binding IsOpen, Mode=TwoWay}"
+                                          Message="{Binding #MessageTextBox.Text}"
+                                          Severity="Error" />
+                        <controls:InfoBar Title="Title"
+                                          Margin="10"
+                                          IsClosable="{Binding IsClosable}"
+                                          IsOpen="{Binding IsOpen, Mode=TwoWay}"
+                                          Message="{Binding #MessageTextBox.Text}"
+                                          Severity="Success" />
+                    </UniformGrid>
+                </controls:GlassCard>
+            </WrapPanel>
+        </ScrollViewer>
+    </Grid>
+</UserControl>
diff --git a/SukiUI.Demo/Features/ControlsLibrary/InfoBarView.axaml.cs b/SukiUI.Demo/Features/ControlsLibrary/InfoBarView.axaml.cs
@@ -0,0 +1,11 @@
+using Avalonia.Controls;
+
+namespace SukiUI.Demo.Features.ControlsLibrary;
+
+public partial class InfoBarView : UserControl
+{
+    public InfoBarView()
+    {
+        InitializeComponent();
+    }
+}
diff --git a/SukiUI.Demo/Features/ControlsLibrary/InfoBarViewModel.cs b/SukiUI.Demo/Features/ControlsLibrary/InfoBarViewModel.cs
@@ -0,0 +1,20 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Material.Icons;
+
+namespace SukiUI.Demo.Features.ControlsLibrary;
+
+public partial class InfoBarViewModel() : DemoPageBase("InfoBar", MaterialIconKind.InfoOutline)
+{
+    [ObservableProperty]
+    private bool _isOpen = true;
+
+    [ObservableProperty]
+    private bool _isClosable = true;
+
+    [RelayCommand]
+    private void RefreshIsOpenStatus()
+    {
+        IsOpen = true;
+    }
+}
diff --git a/SukiUI/ColorTheme/NotificationColor.cs b/SukiUI/ColorTheme/NotificationColor.cs
@@ -0,0 +1,11 @@
+using Avalonia.Media;
+
+namespace SukiUI.ColorTheme;
+
+public static class NotificationColor
+{
+    public static readonly SolidColorBrush InfoIconForeground = new(Color.FromRgb(89,126,255));
+    public static readonly SolidColorBrush SuccessIconForeground = new(Color.FromRgb(35,143,35));
+    public static readonly SolidColorBrush WarningIconForeground = new(Color.FromRgb(177,113,20));
+    public static readonly SolidColorBrush ErrorIconForeground = new(Color.FromRgb(216,63,48));
+}
diff --git a/SukiUI/Controls/InfoBar.axaml b/SukiUI/Controls/InfoBar.axaml
@@ -0,0 +1,84 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:icons="clr-namespace:SukiUI.Content"
+                    xmlns:suki="clr-namespace:SukiUI.Controls">
+    <Design.PreviewWith>
+        <StackPanel Width="400" Spacing="3">
+            <suki:InfoBar Title="Title"
+                          IsClosable="True"
+                          Message="Long Text Test Long Text Test Long Text Test Long Text Test" />
+            <suki:InfoBar Title="Title" Message="Default" />
+        </StackPanel>
+    </Design.PreviewWith>
+    <ControlTheme x:Key="SukiInfoBarStyle" TargetType="suki:InfoBar">
+        <Setter Property="MinWidth" Value="200" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Padding="0,0,0,15"
+                        Background="{DynamicResource SukiCardBackground}"
+                        BorderBrush="{DynamicResource SukiBorderBrush}"
+                        BorderThickness="2"
+                        CornerRadius="5"
+                        IsVisible="{TemplateBinding IsOpen}">
+                    <Grid ColumnDefinitions="50,*,40">
+                        <StackPanel Grid.Column="0"
+                                    HorizontalAlignment="Left"
+                                    Orientation="Horizontal">
+                            <Border Width="20"
+                                    Height="20"
+                                    Margin="15,15,0,0"
+                                    HorizontalAlignment="Left"
+                                    VerticalAlignment="Top"
+                                    Background="{DynamicResource SukiCardBackground}"
+                                    CornerRadius="35">
+                                <Border ClipToBounds="True" CornerRadius="35">
+                                    <Panel>
+                                        <Panel Background="{TemplateBinding IconForeground}" Opacity="1" />
+                                        <PathIcon Width="10"
+                                                  Height="10"
+                                                  Margin="0,0,0,0"
+                                                  HorizontalAlignment="Center"
+                                                  VerticalAlignment="Center"
+                                                  Data="{TemplateBinding Icon}"
+                                                  Foreground="White" />
+                                    </Panel>
+                                </Border>
+                            </Border>
+                        </StackPanel>
+
+                        <WrapPanel Name="PART_TextPanel"
+                                   Grid.Column="1"
+                                   Margin="0,11,0,0">
+                            <TextBlock Margin="0,5,10,0"
+                                       FontWeight="Bold"
+                                       Text="{TemplateBinding Title}" />
+                            <TextBlock Margin="0,5,0,0"
+                                       Text="{TemplateBinding Message}"
+                                       TextWrapping="Wrap" />
+                        </WrapPanel>
+
+                        <Button Name="PART_CloseButton"
+                                Grid.Column="2"
+                                Width="27"
+                                Height="27"
+                                Margin="0,12,12,0"
+                                Padding="0"
+                                HorizontalAlignment="Right"
+                                VerticalAlignment="Top"
+                                BorderThickness="0"
+                                Classes="Basic Rounded WindowControlsButton Close"
+                                IsVisible="{TemplateBinding IsClosable}">
+                            <PathIcon Width="10"
+                                      Height="10"
+                                      Data="{x:Static icons:Icons.WindowClose}"
+                                      Opacity="0.7" />
+                        </Button>
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+    <ControlTheme x:Key="{x:Type suki:InfoBar}"
+                  BasedOn="{StaticResource SukiInfoBarStyle}"
+                  TargetType="suki:InfoBar" />
+</ResourceDictionary>
diff --git a/SukiUI/Controls/InfoBar.axaml.cs b/SukiUI/Controls/InfoBar.axaml.cs
@@ -0,0 +1,111 @@
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Interactivity;
+using Avalonia.Media;
+using SukiUI.ColorTheme;
+using SukiUI.Content;
+using SukiUI.Enums;
+
+namespace SukiUI.Controls;
+
+public class InfoBar : ContentControl
+{
+    public static readonly StyledProperty<NotificationType> SeverityProperty =
+        AvaloniaProperty.Register<InfoBar, NotificationType>(nameof(Severity), NotificationType.Info);
+
+    public NotificationType Severity
+    {
+        get => GetValue(SeverityProperty);
+        set
+        {
+            Icon = value switch
+            {
+                NotificationType.Info => Icons.InformationOutline,
+                NotificationType.Success => Icons.Check,
+                NotificationType.Warning => Icons.AlertOutline,
+                NotificationType.Error => Icons.AlertOutline,
+                _ => Icons.InformationOutline
+            };
+
+            IconForeground = value switch
+            {
+                NotificationType.Info => NotificationColor.InfoIconForeground,
+                NotificationType.Success => NotificationColor.SuccessIconForeground,
+                NotificationType.Warning => NotificationColor.WarningIconForeground,
+                NotificationType.Error => NotificationColor.ErrorIconForeground,
+                _ => NotificationColor.InfoIconForeground
+            };
+
+            SetValue(SeverityProperty, value);
+        }
+    }
+
+    public static readonly StyledProperty<object?> IconProperty =
+        AvaloniaProperty.Register<InfoBar, object?>(nameof(Icon), Icons.InformationOutline);
+
+    public object? Icon
+    {
+        get => GetValue(IconProperty);
+        private set => SetValue(IconProperty, value);
+    }
+
+    public static readonly StyledProperty<IBrush?> IconForegroundProperty =
+        AvaloniaProperty.Register<InfoBar, IBrush?>(nameof(IconForeground), NotificationColor.InfoIconForeground);
+
+    public IBrush? IconForeground
+    {
+        get => GetValue(IconForegroundProperty);
+        private set => SetValue(IconForegroundProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsOpenProperty =
+        AvaloniaProperty.Register<InfoBar, bool>(nameof(IsOpen), true);
+
+    public bool IsOpen
+    {
+        get => GetValue(IsOpenProperty);
+        set => SetValue(IsOpenProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsClosableProperty =
+        AvaloniaProperty.Register<InfoBar, bool>(nameof(IsClosable), true);
+
+    public bool IsClosable
+    {
+        get => GetValue(IsClosableProperty);
+        set => SetValue(IsClosableProperty, value);
+    }
+
+    public static readonly StyledProperty<string> TitleProperty =
+        AvaloniaProperty.Register<InfoBar, string>(nameof(Title), string.Empty);
+
+    public string Title
+    {
+        get => GetValue(TitleProperty);
+        set => SetValue(TitleProperty, value);
+    }
+
+    public static readonly StyledProperty<string> MessageProperty =
+        AvaloniaProperty.Register<InfoBar, string>(nameof(Message), string.Empty);
+
+    public string Message
+    {
+        get => GetValue(MessageProperty);
+        set => SetValue(MessageProperty, value);
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+
+        e.NameScope.Get<Button>("PART_CloseButton").Click += (_, _) => { IsOpen = false;};
+    }
+
+    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        base.OnAttachedToVisualTree(e);
+        if (ContextMenu is null) return;
+    }
+}
diff --git a/SukiUI/Controls/SukiToast.axaml.cs b/SukiUI/Controls/SukiToast.axaml.cs
@@ -7,6 +7,7 @@
 using System.Timers;
 using Avalonia.Interactivity;
 using Avalonia.Media;
+using SukiUI.ColorTheme;
 using SukiUI.Content;
 using SukiUI.Enums;
 
@@ -92,10 +93,7 @@ private async void ToastCardClickedHandler(object o, PointerPressedEventArgs poi
 
     // Icon Foreground Brushes
     // Note: it would be better to place them into a resource dictionary, but findResource performs slightly slower
-    private readonly SolidColorBrush _infoIconForeground = new(Color.FromRgb(89,126,255));
-    private readonly SolidColorBrush _successIconForeground = new(Color.FromRgb(35,143,35));
-    private readonly SolidColorBrush _warningIconForeground = new(Color.FromRgb(177,113,20));
-    private readonly SolidColorBrush _errorIconForeground = new(Color.FromRgb(216,63,48));
+
 
     public void Initialize(ToastModel model, SukiHost host)
     {
@@ -124,11 +122,11 @@ public void Initialize(ToastModel model, SukiHost host)
         };
         Foreground = model.Type switch
         {
-            NotificationType.Info => _infoIconForeground,
-            NotificationType.Success => _successIconForeground,
-            NotificationType.Warning => _warningIconForeground,
-            NotificationType.Error => _errorIconForeground,
-            _ => _infoIconForeground
+            NotificationType.Info => NotificationColor.InfoIconForeground,
+            NotificationType.Success => NotificationColor.SuccessIconForeground,
+            NotificationType.Warning => NotificationColor.WarningIconForeground,
+            NotificationType.Error => NotificationColor.ErrorIconForeground,
+            _ => NotificationColor.InfoIconForeground
         };
         _onClickedCallback = model.OnClicked;
 

diff --git a/SukiUI/Theme/Index.axaml b/SukiUI/Theme/Index.axaml
@@ -47,7 +47,7 @@
             <Easing x:Key="MenuEasing">CircularEaseOut</Easing>
 
             <FontFamily x:Key="QuicksandFont">avares://SukiUI/CustomFont#Quicksand</FontFamily>
-            
+
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="avares://sukiUI/Theme/TextBlock.xaml" />
                 <ResourceInclude Source="avares://SukiUI/Theme/SplitView.axaml" />
@@ -82,6 +82,7 @@
                 <ResourceInclude Source="avares://sukiUI/Controls/SukiSideMenuItem.axaml" />
                 <ResourceInclude Source="avares://sukiUI/Controls/SukiTransitioningContentControl.axaml" />
                 <ResourceInclude Source="avares://sukiUI/Controls/Stepper.axaml" />
+                <ResourceInclude Source="avares://sukiUI/Controls/InfoBar.axaml" />
                 <ResourceInclude Source="avares://sukiUI/Controls/GlassMorphism/GlassCard.axaml" />
                 <ResourceInclude Source="avares://sukiUI/Controls/ContentExpandControl.axaml" />
             </ResourceDictionary.MergedDictionaries>

diff --git a/docs/docs/documentation/controls/layout/glasscard.md b/docs/docs/documentation/controls/layout/glasscard.md
@@ -30,5 +30,4 @@ You can adjust whether the `GlassCard` is opaque or not and with or without inte
 
 [Demo: SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml)
 
-
 [API: Controls/GlassMorphism/GlassCard.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/GlassMorphism/GlassCard.axaml.cs)