feat: demo page & perf

kikipoulet · May 31, 2024 · ede3089 · ede3089
1 parent 5496b7d
commit ede3089
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 5 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/Controls/InfoBar.axaml b/SukiUI/Controls/InfoBar.axaml
@@ -14,12 +14,13 @@
         <Setter Property="MinWidth" Value="200" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Border Background="{DynamicResource SukiCardBackground}"
+                <Border Padding="0,0,0,15"
+                        Background="{DynamicResource SukiCardBackground}"
                         BorderBrush="{DynamicResource SukiBorderBrush}"
                         BorderThickness="2"
                         CornerRadius="5"
                         IsVisible="{TemplateBinding IsOpen}">
-                    <Grid Margin="0,0,0,15" ColumnDefinitions="50,*,40">
+                    <Grid ColumnDefinitions="50,*,40">
                         <StackPanel Grid.Column="0"
                                     HorizontalAlignment="Left"
                                     Orientation="Horizontal">
@@ -76,9 +77,6 @@
                 </Border>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^[IsClosable=False] /template/ WrapPanel#PART_TextPanel">
-            <Setter Property="Margin" Value="0, 11, -40, 0" />
-        </Style>
     </ControlTheme>
     <ControlTheme x:Key="{x:Type suki:InfoBar}"
                   BasedOn="{StaticResource SukiInfoBarStyle}"