infobar adjustments

kikipoulet · May 31, 2024 · 50f5cd2 · 50f5cd2
1 parent acdf7e5
commit 50f5cd2
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 17 deletions.
diff --git a/SukiUI.Demo/Features/ControlsLibrary/InfoBarView.axaml b/SukiUI.Demo/Features/ControlsLibrary/InfoBarView.axaml
@@ -24,7 +24,7 @@
                         <TextBox Name="MessageTextBox"
                                  Width="500"
                                  Margin="15,0,0,0"
-                                 Text="Example Message" />
+                                 Text="Hello world !" />
                     </StackPanel>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Margin="0,0,0,0"
@@ -42,37 +42,45 @@
                                    Text="IsClosable" />
                         <ToggleSwitch Margin="15,0,0,0" IsChecked="{Binding IsClosable}" />
                     </StackPanel>
+
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock Margin="0,0,0,0"
+                                   VerticalAlignment="Center"
+                                   FontWeight="DemiBold"
+                                   Text="IsOpaque" />
+                        <ToggleSwitch Margin="15,0,0,0" IsChecked="{Binding IsOpaque}" />
+                    </StackPanel>
                 </StackPanel>
             </controls:GroupBox>
         </controls:GlassCard>
         <ScrollViewer Grid.Row="1">
             <WrapPanel Classes="PageContainer">
                 <controls:GlassCard>
-                    <UniformGrid>
-                        <controls:InfoBar Title="Title"
+                    <StackPanel Spacing="7">
+                        <controls:InfoBar Title="Info" IsOpaque="{Binding IsOpaque}"
                                           Margin="10"
                                           IsClosable="{Binding IsClosable}"
                                           IsOpen="{Binding IsOpen, Mode=TwoWay}"
                                           Message="{Binding #MessageTextBox.Text}" />
-                        <controls:InfoBar Title="Title"
+                        <controls:InfoBar Title="Warning"  IsOpaque="{Binding IsOpaque}"
                                           Margin="10"
                                           IsClosable="{Binding IsClosable}"
                                           IsOpen="{Binding IsOpen, Mode=TwoWay}"
                                           Message="{Binding #MessageTextBox.Text}"
                                           Severity="Warning" />
-                        <controls:InfoBar Title="Title"
+                        <controls:InfoBar Title="Error"  IsOpaque="{Binding IsOpaque}"
                                           Margin="10"
                                           IsClosable="{Binding IsClosable}"
                                           IsOpen="{Binding IsOpen, Mode=TwoWay}"
                                           Message="{Binding #MessageTextBox.Text}"
                                           Severity="Error" />
-                        <controls:InfoBar Title="Title"
-                                          Margin="10"
+                        <controls:InfoBar Title="Success"
+                                          Margin="10"  IsOpaque="{Binding IsOpaque}"
                                           IsClosable="{Binding IsClosable}"
                                           IsOpen="{Binding IsOpen, Mode=TwoWay}"
                                           Message="{Binding #MessageTextBox.Text}"
                                           Severity="Success" />
-                    </UniformGrid>
+                    </StackPanel>
                 </controls:GlassCard>
             </WrapPanel>
         </ScrollViewer>

diff --git a/SukiUI.Demo/Features/ControlsLibrary/InfoBarViewModel.cs b/SukiUI.Demo/Features/ControlsLibrary/InfoBarViewModel.cs
@@ -12,6 +12,9 @@ public partial class InfoBarViewModel() : DemoPageBase("InfoBar", MaterialIconKi
     [ObservableProperty]
     private bool _isClosable = true;
 
+    [ObservableProperty]
+    private bool _isOpaque = false;
+
     [RelayCommand]
     private void RefreshIsOpenStatus()
     {

diff --git a/SukiUI/Controls/GlassMorphism/GlassCard.axaml b/SukiUI/Controls/GlassMorphism/GlassCard.axaml
@@ -6,7 +6,7 @@
         <Setter Property="Padding" Value="20" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Panel>
+                <Panel Name="RootPanel" Opacity="0">
                     <Border Name="PART_BorderCard"
                             Background="{DynamicResource SukiGlassCardBackground}"
                             BorderBrush="{TemplateBinding BorderBrush}"
@@ -63,6 +63,19 @@
         <Style Selector="^.Primary /template/ Border#PART_BorderCard">
             <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
         </Style>
+
+        <Style Selector="^[IsVisible=True] /template/ Panel#RootPanel">
+            <Style.Animations>
+                <Animation  FillMode="Forward" Duration="0:0:0.3"> 
+                    <KeyFrame Cue="0%">
+                        <Setter Property="Opacity" Value="0.0"/>
+                    </KeyFrame>
+                    <KeyFrame Cue="100%">
+                        <Setter Property="Opacity" Value="1.0"/>
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+        </Style>
     </ControlTheme>
     <ControlTheme x:Key="{x:Type suki:GlassCard}"
                   BasedOn="{StaticResource SukiGlassCardStyle}"

diff --git a/SukiUI/Controls/InfoBar.axaml b/SukiUI/Controls/InfoBar.axaml
@@ -14,11 +14,8 @@
         <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"
+                <suki:GlassCard MinWidth="300" IsOpaque="{TemplateBinding IsOpaque}" Padding="0,0,0,15"
+                        CornerRadius="10"
                         IsVisible="{TemplateBinding IsOpen}">
                     <Grid ColumnDefinitions="50,*,40">
                         <StackPanel Grid.Column="0"
@@ -48,10 +45,11 @@
 
                         <WrapPanel Name="PART_TextPanel"
                                    Grid.Column="1"
-                                   Margin="0,11,0,0">
+                                   Margin="0,12,0,0">
                             <TextBlock Margin="0,5,10,0"
                                        FontWeight="Bold"
                                        Text="{TemplateBinding Title}" />
+                            <Border Width="7"></Border>
                             <TextBlock Margin="0,5,0,0"
                                        Text="{TemplateBinding Message}"
                                        TextWrapping="Wrap" />
@@ -74,7 +72,7 @@
                                       Opacity="0.7" />
                         </Button>
                     </Grid>
-                </Border>
+                </suki:GlassCard>
             </ControlTemplate>
         </Setter>
     </ControlTheme>

diff --git a/SukiUI/Controls/InfoBar.axaml.cs b/SukiUI/Controls/InfoBar.axaml.cs
@@ -78,6 +78,16 @@ public bool IsClosable
         set => SetValue(IsClosableProperty, value);
     }
 
+
+    public static readonly StyledProperty<bool> IsOpaqueProperty =
+        AvaloniaProperty.Register<InfoBar, bool>(nameof(IsOpaque), false);
+
+    public bool IsOpaque
+    {
+        get => GetValue(IsOpaqueProperty);
+        set => SetValue(IsOpaqueProperty, value);
+    }
+
     public static readonly StyledProperty<string> TitleProperty =
         AvaloniaProperty.Register<InfoBar, string>(nameof(Title), string.Empty);
 

diff --git a/SukiUI/SukiUI.csproj b/SukiUI/SukiUI.csproj
@@ -21,7 +21,7 @@
 		<LangVersion>10</LangVersion>
 		<UserSecretsId>712f85e4-12d3-41b0-a417-5714a113666f</UserSecretsId>
 		<Description>https://github.com/kikipoulet/SukiUI</Description>
-		<PackageVersion>5.1.2</PackageVersion>
+		<PackageVersion>6.0.0</PackageVersion>
 		<Nullable>enable</Nullable>
 		<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
 		<PackageIcon>OIG.N5o-removebg-preview.png</PackageIcon>