toast styling

kikipoulet · Aug 14, 2024 · 4279d44 · 4279d44
1 parent 9affee2
commit 4279d44
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 20 deletions.
diff --git a/SukiUI.Demo/Features/ControlsLibrary/Toasts/ToastsViewModel.cs b/SukiUI.Demo/Features/ControlsLibrary/Toasts/ToastsViewModel.cs
@@ -27,9 +27,9 @@ private void ShowActionToast()
     {
         toastManager.CreateToast()
             .WithTitle("Update Available")
-            .WithContent("Update v1.0.0 Now Available.")
+            .WithContent("Information, Update v1.0.0.0 is Now Available.")
+            .WithActionButtonNormal("Later", _ => { }, true)
             .WithActionButton("Update", _ => ShowUpdatingToast(), true)
-            .WithActionButton("Dismiss", _ => { }, true)
             .Queue();
     }
 
@@ -92,7 +92,7 @@ private void ShowToastWithCallback()
             .WithTitle("Callback Toast")
             .WithContent("Click anywhere (other than the button) on this toast to show another toast.")
             .OnClicked(_ => ShowCallbackToast())
-            .WithActionButton("Dismiss", _ => { }, true)
+            .WithActionButtonNormal("Close", _ => { }, true)
             .Queue();
         return;
 

diff --git a/SukiUI/Controls/SukiToast.axaml b/SukiUI/Controls/SukiToast.axaml
@@ -10,7 +10,7 @@
             <ControlTemplate>
                 <Panel>
                     <Border Name="PART_ToastCard"
-                            Width="300"
+                            MinWidth="300" MaxWidth="400"
                             Margin="40,5,30,10"
                             Padding="0"
                             Background="{DynamicResource SukiCardBackground}"
@@ -40,29 +40,41 @@
                                         </Panel.Background>
                                     </Panel>
                                 </Panel>
-                                <Panel Margin="20,22">
-                                    <DockPanel Margin="0,-7" LastChildFill="True">
+                                <Panel Margin="20,22,20,8">
+                                    <DockPanel Margin="0,-7,0,-4" LastChildFill="True">
                                         <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
                                             <ContentPresenter Margin="12,0,0,0"
                                                               Content="{TemplateBinding Title}"
-                                                              FontSize="15"
+                                                              FontSize="17"
                                                               FontWeight="{DynamicResource DefaultDemiBold}"
-                                                              Foreground="{DynamicResource SukiText}" />
+                                                              Foreground="{DynamicResource SukiText}" >
+                                                <ContentPresenter.Styles>
+                                                    <Style Selector="TextBlock">
+                                                        <Setter Property="FontSize" Value="16" />
+                                                    </Style>
+                                                </ContentPresenter.Styles>
+                                            </ContentPresenter>
                                         </StackPanel>
                                         <ItemsControl DockPanel.Dock="Bottom" 
                                                       ItemsSource="{TemplateBinding ActionButtons}" 
-                                                      Margin="0,14,0,0"
+                                                      Margin="0,10,0,0"
                                                       HorizontalAlignment="Right">
                                             <ItemsControl.ItemsPanel>
                                                 <ItemsPanelTemplate>
-                                                    <StackPanel Orientation="Horizontal" Spacing="5"/>
+                                                    <StackPanel Orientation="Horizontal"/>
                                                 </ItemsPanelTemplate>
                                             </ItemsControl.ItemsPanel>
                                         </ItemsControl>
-                                        <ContentPresenter Margin="12,10,0,0"
+                                        <ContentPresenter Margin="12,10,0,0" 
                                                           Content="{TemplateBinding Content}"
                                                           Foreground="{DynamicResource SukiText}"
-                                                          TextWrapping="Wrap" />
+                                                          TextWrapping="Wrap" >
+                                            <ContentPresenter.Styles>
+                                                <Style Selector="TextBlock">
+                                                    <Setter Property="FontSize" Value="14" />
+                                                </Style>
+                                            </ContentPresenter.Styles>
+                                        </ContentPresenter>
 
                                     </DockPanel>
                                 </Panel>
@@ -71,13 +83,13 @@
                     </Border>
                     <Border Width="35"
                             Height="35"
-                            Margin="22,0,0,0"
+                            Margin="22,0,0,3"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Center"
                             Background="{DynamicResource SukiCardBackground}"
                             BoxShadow="{DynamicResource SukiSmallPopupShadow}"
                             CornerRadius="35">
-                        <Border ClipToBounds="True" CornerRadius="35">
+                        <Border  ClipToBounds="True" CornerRadius="35">
                             <Panel>
                                 <Panel Background="{TemplateBinding Foreground}" Opacity="1" />
                                 <PathIcon Width="15"

diff --git a/SukiUI/Toasts/FluentSukiToastBuilder.cs b/SukiUI/Toasts/FluentSukiToastBuilder.cs
@@ -108,6 +108,12 @@ public static SukiToastBuilder WithActionButton(this SukiToastBuilder builder, o
             builder.AddActionButton(buttonContent, onClicked, dismissOnClick);
             return builder;
         }
+
+        public static SukiToastBuilder WithActionButtonNormal(this SukiToastBuilder builder, object buttonContent, Action<ISukiToast> onClicked, bool dismissOnClick =  false)
+        {
+            builder.AddActionButton(buttonContent, onClicked, dismissOnClick, false);
+            return builder;
+        }
 
         #endregion
     }

diff --git a/SukiUI/Toasts/SukiToastBuilder.cs b/SukiUI/Toasts/SukiToastBuilder.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Threading.Tasks;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Notifications;
 using SukiUI.ColorTheme;
@@ -60,13 +61,17 @@ public void Delay(TimeSpan delay, Action<ISukiToast> action) =>
 
         public void SetOnClicked(Action<ISukiToast> action) => Toast.OnClicked = action;
 
-        public void AddActionButton(object buttonContent, Action<ISukiToast> action, bool dismissOnClick)
+        public void AddActionButton(object buttonContent, Action<ISukiToast> action, bool dismissOnClick, bool flatstyle = true)
         {
-            var btn = new Button()
-            {
-                Content = buttonContent,
-                Classes = { "Flat" }
-            };
+            Button btn = new Button()
+                {
+                    Content = buttonContent,
+                    Classes = { flatstyle ?"Flat" : "Basic" },
+                    Margin = flatstyle ? new Thickness(14, 9, 0, 12) : new Thickness(14, -3, 0, 3)
+                };
+
+
+
             btn.Click += (_, _) =>
             {
                 action(Toast);