feat: add new Toast.
This commit is contained in:
Zhang Dian
196
src/Ursa.Themes.Semi/Controls/Toast.axaml
Normal file
196
src/Ursa.Themes.Semi/Controls/Toast.axaml
Normal file
@@ -0,0 +1,196 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:u="https://irihi.tech/ursa">
|
||||
<Design.PreviewWith>
|
||||
<ThemeVariantScope RequestedThemeVariant="Dark">
|
||||
<StackPanel>
|
||||
<u:ToastCard>
|
||||
Hello, Semi.Avalonia!
|
||||
</u:ToastCard>
|
||||
<u:ToastCard NotificationType="Success">
|
||||
<u:Toast Content="Hello, Semi.Avalonia!" />
|
||||
</u:ToastCard>
|
||||
<u:ToastCard NotificationType="Warning">
|
||||
<u:Toast Content="Hello, Semi.Avalonia!" />
|
||||
</u:ToastCard>
|
||||
<u:ToastCard NotificationType="Error">
|
||||
<u:Toast Content="Hello, Semi.Avalonia!" />
|
||||
</u:ToastCard>
|
||||
</StackPanel>
|
||||
</ThemeVariantScope>
|
||||
</Design.PreviewWith>
|
||||
|
||||
<ControlTheme x:Key="{x:Type u:WindowToastManager}" TargetType="u:WindowToastManager">
|
||||
<Setter Property="Margin" Value="0" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate>
|
||||
<ReversibleStackPanel Name="PART_Items" />
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^ /template/ ReversibleStackPanel#PART_Items">
|
||||
<Setter Property="VerticalAlignment" Value="Top" />
|
||||
<Setter Property="HorizontalAlignment" Value="Center" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="{x:Type u:ToastCard}" TargetType="u:ToastCard">
|
||||
<Setter Property="UseLayoutRounding" Value="True" />
|
||||
<Setter Property="MinWidth" Value="{DynamicResource NotificationCardMinWidth}" />
|
||||
<Setter Property="RenderTransformOrigin" Value="50%,75%" />
|
||||
<Setter Property="BorderThickness" Value="{DynamicResource NotificationCardBorderThickness}" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardBorderBrush}" />
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardBackground}" />
|
||||
<Setter Property="CornerRadius" Value="{DynamicResource NotificationCardCornerRadius}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="u:ToastCard">
|
||||
<LayoutTransformControl Name="PART_LayoutTransformControl" UseRenderTransform="True">
|
||||
<Border
|
||||
Margin="{DynamicResource NotificationCardMargin}"
|
||||
Background="{TemplateBinding Background}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<Border
|
||||
x:Name="PART_RootBorder"
|
||||
Padding="{DynamicResource NotificationCardPadding}"
|
||||
BoxShadow="{DynamicResource NotificationCardBoxShadow}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<DockPanel>
|
||||
<PathIcon
|
||||
Name="NotificationIcon"
|
||||
Width="{DynamicResource NotificationCardIconWidth}"
|
||||
Height="{DynamicResource NotificationCardIconHeight}"
|
||||
Margin="{DynamicResource NotificationCardIconMargin}"
|
||||
VerticalAlignment="Top"
|
||||
IsVisible="False"
|
||||
Data="{DynamicResource NotificationCardInformationIconPathData}" />
|
||||
<ContentControl
|
||||
Name="PART_Content"
|
||||
Content="{TemplateBinding Content}">
|
||||
<ContentControl.DataTemplates>
|
||||
<DataTemplate DataType="u:IToast">
|
||||
<SelectableTextBlock
|
||||
Foreground="{DynamicResource NotificationCardMessageForeground}"
|
||||
FontSize="{DynamicResource NotificationCardMessageFontSize}"
|
||||
FontWeight="{DynamicResource NotificationCardMessageFontWeight}"
|
||||
Text="{Binding Content}"
|
||||
TextWrapping="Wrap" />
|
||||
</DataTemplate>
|
||||
<DataTemplate DataType="x:String">
|
||||
<SelectableTextBlock
|
||||
Foreground="{DynamicResource NotificationCardMessageForeground}"
|
||||
FontSize="{DynamicResource NotificationCardMessageFontSize}"
|
||||
FontWeight="{DynamicResource NotificationCardMessageFontWeight}"
|
||||
Text="{Binding}"
|
||||
TextWrapping="Wrap" />
|
||||
</DataTemplate>
|
||||
</ContentControl.DataTemplates>
|
||||
</ContentControl>
|
||||
</DockPanel>
|
||||
</Border>
|
||||
</Border>
|
||||
</LayoutTransformControl>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
|
||||
<ControlTheme.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.45">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="Opacity" Value="0" />
|
||||
<Setter Property="TranslateTransform.Y" Value="20" />
|
||||
<Setter Property="ScaleTransform.ScaleX" Value="0.85" />
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="0.85" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="30%">
|
||||
<Setter Property="TranslateTransform.Y" Value="-20" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="Opacity" Value="1" />
|
||||
<Setter Property="TranslateTransform.Y" Value="0" />
|
||||
<Setter Property="ScaleTransform.ScaleX" Value="1" />
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="1" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</ControlTheme.Animations>
|
||||
|
||||
<Style Selector="^[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
|
||||
<Setter Property="RenderTransformOrigin" Value="50%,0%" />
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.75">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="TranslateTransform.X" Value="0" />
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="1" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="70%">
|
||||
<Setter Property="TranslateTransform.X" Value="800" />
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="1" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="0" />
|
||||
<Setter Property="TranslateTransform.X" Value="800" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^[IsClosing=true]">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:1.25">
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="IsClosed" Value="True" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:information /template/ PathIcon#NotificationIcon">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardInformationIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardInformationIconPathData}" />
|
||||
</Style>
|
||||
<Style Selector="^:success /template/ PathIcon#NotificationIcon">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardSuccessIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardSuccessIconPathData}" />
|
||||
</Style>
|
||||
<Style Selector="^:warning /template/ PathIcon#NotificationIcon">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardWarningIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardWarningIconPathData}" />
|
||||
</Style>
|
||||
<Style Selector="^:error /template/ PathIcon#NotificationIcon">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardErrorIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardErrorIconPathData}" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^.Light">
|
||||
<Setter Property="Background" Value="{DynamicResource SemiColorBackground0}" />
|
||||
<Style Selector="^:information /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorInformation}" />
|
||||
<Setter Property="Background" Value="{DynamicResource SemiColorInformationLight}" />
|
||||
</Style>
|
||||
<Style Selector="^:success /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorSuccess}" />
|
||||
<Setter Property="Background" Value="{DynamicResource SemiColorSuccessLight}" />
|
||||
</Style>
|
||||
<Style Selector="^:warning /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorWarning}" />
|
||||
<Setter Property="Background" Value="{DynamicResource SemiColorWarningLight}" />
|
||||
</Style>
|
||||
<Style Selector="^:error /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorDanger}" />
|
||||
<Setter Property="Background" Value="{DynamicResource SemiColorDangerLight}" />
|
||||
</Style>
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
@@ -46,6 +46,7 @@
|
||||
<ResourceInclude Source="TreeComboBox.axaml"/>
|
||||
<ResourceInclude Source="Skeleton.axaml" />
|
||||
<ResourceInclude Source="TwoTonePathIcon.axaml" />
|
||||
<ResourceInclude Source="Toast.axaml" />
|
||||
<ResourceInclude Source="ToolBar.axaml" />
|
||||
<ResourceInclude Source="TimeBox.axaml"/>
|
||||
<ResourceInclude Source="UrsaView.axaml" />
|
||||
|
||||
Reference in New Issue
Block a user