Merge pull request #398 from irihitech/toast
New Control: Notification & Toast
This commit is contained in:
Dong Bin
GitHub
463
src/Ursa.Themes.Semi/Controls/Notification.axaml
Normal file
463
src/Ursa.Themes.Semi/Controls/Notification.axaml
Normal file
@@ -0,0 +1,463 @@
|
||||
<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">
|
||||
<ReversibleStackPanel Orientation="Vertical" ReverseOrder="True">
|
||||
<u:NotificationCard ShowIcon="False" ShowClose="False" />
|
||||
<u:NotificationCard ShowIcon="False" />
|
||||
<u:NotificationCard NotificationType="Information">
|
||||
Hello, Ursa!
|
||||
</u:NotificationCard>
|
||||
<u:NotificationCard NotificationType="Success">
|
||||
<u:Notification Title="Welcome" />
|
||||
</u:NotificationCard>
|
||||
<u:NotificationCard NotificationType="Warning">
|
||||
<u:Notification Content="Hello, Ursa!" />
|
||||
</u:NotificationCard>
|
||||
<u:NotificationCard NotificationType="Error" Classes="Light">
|
||||
<u:Notification Title="Welcome">
|
||||
Hello, Ursa!
|
||||
</u:Notification>
|
||||
</u:NotificationCard>
|
||||
</ReversibleStackPanel>
|
||||
</ThemeVariantScope>
|
||||
</Design.PreviewWith>
|
||||
|
||||
<ControlTheme x:Key="{x:Type u:WindowNotificationManager}" TargetType="u:WindowNotificationManager">
|
||||
<Setter Property="Margin" Value="0" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate>
|
||||
<ReversibleStackPanel Name="PART_Items" ReverseOrder="True" />
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^:topleft /template/ ReversibleStackPanel#PART_Items">
|
||||
<Setter Property="VerticalAlignment" Value="Top" />
|
||||
<Setter Property="HorizontalAlignment" Value="Left" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:topright /template/ ReversibleStackPanel#PART_Items">
|
||||
<Setter Property="VerticalAlignment" Value="Top" />
|
||||
<Setter Property="HorizontalAlignment" Value="Right" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:topcenter /template/ ReversibleStackPanel#PART_Items">
|
||||
<Setter Property="VerticalAlignment" Value="Top" />
|
||||
<Setter Property="HorizontalAlignment" Value="Center" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:bottomleft /template/ ReversibleStackPanel#PART_Items">
|
||||
<Setter Property="VerticalAlignment" Value="Bottom" />
|
||||
<Setter Property="HorizontalAlignment" Value="Left" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:bottomright /template/ ReversibleStackPanel#PART_Items">
|
||||
<Setter Property="VerticalAlignment" Value="Bottom" />
|
||||
<Setter Property="HorizontalAlignment" Value="Right" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:bottomcenter /template/ ReversibleStackPanel#PART_Items">
|
||||
<Setter Property="VerticalAlignment" Value="Bottom" />
|
||||
<Setter Property="HorizontalAlignment" Value="Center" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="{x:Type u:NotificationCard}" TargetType="u:NotificationCard">
|
||||
<Setter Property="UseLayoutRounding" Value="True" />
|
||||
<Setter Property="BorderThickness" Value="{DynamicResource NotificationCardBorderThickness}" />
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardBackground}" />
|
||||
<Setter Property="CornerRadius" Value="{DynamicResource NotificationCardCornerRadius}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="u:NotificationCard">
|
||||
<LayoutTransformControl x: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 NotificationCardBoxShadows}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<DockPanel MinWidth="{DynamicResource NotificationCardMinWidth}">
|
||||
<PathIcon
|
||||
x:Name="NotificationIcon"
|
||||
Width="{DynamicResource NotificationCardIconWidth}"
|
||||
Height="{DynamicResource NotificationCardIconHeight}"
|
||||
Margin="{DynamicResource NotificationCardIconMargin}"
|
||||
VerticalAlignment="Top"
|
||||
IsVisible="{TemplateBinding ShowIcon}"
|
||||
Data="{DynamicResource NotificationCardInformationIconPathData}" />
|
||||
<ContentControl
|
||||
x:Name="PART_Content"
|
||||
VerticalContentAlignment="Center"
|
||||
Content="{TemplateBinding Content}">
|
||||
<ContentControl.DataTemplates>
|
||||
<DataTemplate DataType="u:INotification">
|
||||
<StackPanel Spacing="{DynamicResource NotificationCardTitleSpacing}">
|
||||
<SelectableTextBlock
|
||||
Foreground="{DynamicResource NotificationCardTitleForeground}"
|
||||
FontSize="{DynamicResource NotificationCardTitleFontSize}"
|
||||
FontWeight="{DynamicResource NotificationCardTitleFontWeight}"
|
||||
IsVisible="{Binding Title, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
|
||||
Text="{Binding Title}" />
|
||||
<SelectableTextBlock
|
||||
Foreground="{DynamicResource NotificationCardMessageForeground}"
|
||||
FontSize="{DynamicResource NotificationCardMessageFontSize}"
|
||||
FontWeight="{DynamicResource NotificationCardMessageFontWeight}"
|
||||
IsVisible="{Binding Content, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
|
||||
Text="{Binding Content}"
|
||||
TextWrapping="Wrap" />
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
<DataTemplate DataType="x:String">
|
||||
<SelectableTextBlock
|
||||
Foreground="{DynamicResource NotificationCardMessageForeground}"
|
||||
FontSize="{DynamicResource NotificationCardMessageFontSize}"
|
||||
FontWeight="{DynamicResource NotificationCardMessageFontWeight}"
|
||||
Text="{Binding}"
|
||||
TextWrapping="Wrap" />
|
||||
</DataTemplate>
|
||||
</ContentControl.DataTemplates>
|
||||
</ContentControl>
|
||||
<Button
|
||||
x:Name="PART_CloseButton"
|
||||
VerticalAlignment="Top"
|
||||
HorizontalAlignment="Right"
|
||||
Theme="{StaticResource NotificationCloseButton}"
|
||||
IsVisible="{TemplateBinding ShowClose}"
|
||||
u:MessageCard.CloseOnClick="True" />
|
||||
</DockPanel>
|
||||
</Border>
|
||||
</Border>
|
||||
</LayoutTransformControl>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
|
||||
<Style Selector="^">
|
||||
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="Opacity" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="Opacity" Value="1" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.15">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="70%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="1" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:topleft">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.X" Value="-500" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.X" Value="0" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="^:topright">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.X" Value="500" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.X" Value="0" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="^:bottomleft">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.X" Value="-500" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.X" Value="0" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="^:bottomright">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.X" Value="500" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.X" Value="0" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="^:topcenter">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.Y" Value="-100" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.Y" Value="0" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="^:bottomcenter">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.Y" Value="100" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.Y" Value="0" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^[IsClosing=true]">
|
||||
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="Opacity" Value="1" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="Opacity" Value="0" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.15">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="1" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="70%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="1" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="0" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:topleft">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.X" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.X" Value="-500" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="^:topright">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.X" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.X" Value="500" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="^:bottomleft">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.X" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.X" Value="-500" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="^:bottomright">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.X" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.X" Value="500" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="^:topcenter">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.Y" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.Y" Value="-100" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="^:bottomcenter">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
|
||||
<Setter Property="TranslateTransform.Y" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
|
||||
<Setter Property="TranslateTransform.Y" Value="100" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^[IsClosing=true]">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="IsClosed" Value="True" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:information /template/ PathIcon#NotificationIcon">
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardInformationIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardInformationIconPathData}" />
|
||||
</Style>
|
||||
<Style Selector="^:success /template/ PathIcon#NotificationIcon">
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardSuccessIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardSuccessIconPathData}" />
|
||||
</Style>
|
||||
<Style Selector="^:warning /template/ PathIcon#NotificationIcon">
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardWarningIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardWarningIconPathData}" />
|
||||
</Style>
|
||||
<Style Selector="^:error /template/ PathIcon#NotificationIcon">
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardErrorIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardErrorIconPathData}" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^.Light">
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardLightBackground}" />
|
||||
<Style Selector="^:information /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightInformationBorderBrush}" />
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardLightInformationBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:success /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightSuccessBorderBrush}" />
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardLightSuccessBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:warning /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightWarningBorderBrush}" />
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardLightWarningBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:error /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightErrorBorderBrush}" />
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardLightErrorBackground}" />
|
||||
</Style>
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="NotificationCloseButton" TargetType="Button">
|
||||
<Setter Property="CornerRadius" Value="6" />
|
||||
<Setter Property="Height" Value="24" />
|
||||
<Setter Property="Width" Value="24" />
|
||||
<Setter Property="Cursor" Value="Hand" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardCloseButtonForeground}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Border
|
||||
Name="PART_Border"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
Background="Transparent"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<PathIcon
|
||||
Width="10"
|
||||
Height="10"
|
||||
Data="{DynamicResource WindowCloseIconGlyph}" />
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^:pointerover /template/ Border">
|
||||
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed /template/ Border">
|
||||
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
250
src/Ursa.Themes.Semi/Controls/Toast.axaml
Normal file
250
src/Ursa.Themes.Semi/Controls/Toast.axaml
Normal file
@@ -0,0 +1,250 @@
|
||||
<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">
|
||||
<ReversibleStackPanel>
|
||||
<u:ToastCard ShowIcon="False" ShowClose="False" />
|
||||
<u:ToastCard />
|
||||
<u:ToastCard>
|
||||
Hello, Ursa!
|
||||
</u:ToastCard>
|
||||
<u:ToastCard NotificationType="Success" Classes="Light">
|
||||
<u:Toast>
|
||||
Hello, Ursa!
|
||||
</u:Toast>
|
||||
</u:ToastCard>
|
||||
</ReversibleStackPanel>
|
||||
</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="HorizontalAlignment" Value="Center" />
|
||||
<Setter Property="BorderThickness" Value="{DynamicResource ToastCardBorderThickness}" />
|
||||
<Setter Property="Background" Value="{DynamicResource ToastCardBackground}" />
|
||||
<Setter Property="CornerRadius" Value="{DynamicResource ToastCardCornerRadius}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="u:ToastCard">
|
||||
<LayoutTransformControl x:Name="PART_LayoutTransformControl" UseRenderTransform="True">
|
||||
<Border
|
||||
Margin="{DynamicResource ToastCardMargin}"
|
||||
Background="{TemplateBinding Background}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<Border
|
||||
x:Name="PART_RootBorder"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
MinHeight="{DynamicResource ToastCardMinHeight}"
|
||||
Padding="{DynamicResource ToastCardPadding}"
|
||||
VerticalAlignment="Top"
|
||||
BoxShadow="{DynamicResource NotificationCardBoxShadows}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<DockPanel>
|
||||
<PathIcon
|
||||
x:Name="ToastIcon"
|
||||
Width="{DynamicResource ToastCardIconWidth}"
|
||||
Height="{DynamicResource ToastCardIconHeight}"
|
||||
Margin="{DynamicResource ToastCardIconMargin}"
|
||||
VerticalAlignment="Top"
|
||||
IsVisible="{TemplateBinding ShowIcon}"
|
||||
Data="{DynamicResource NotificationCardInformationIconPathData}" />
|
||||
<ContentControl
|
||||
x:Name="PART_Content"
|
||||
Margin="{DynamicResource ToastCardContentMargin}"
|
||||
VerticalContentAlignment="Center"
|
||||
MaxWidth="{DynamicResource ToastCardContentMaxWidth}"
|
||||
Content="{TemplateBinding Content}">
|
||||
<ContentControl.DataTemplates>
|
||||
<DataTemplate DataType="u:IToast">
|
||||
<SelectableTextBlock
|
||||
Foreground="{DynamicResource ToastCardContentForeground}"
|
||||
FontWeight="{DynamicResource ToastCardContentFontWeight}"
|
||||
Text="{Binding Content}"
|
||||
TextWrapping="Wrap" />
|
||||
</DataTemplate>
|
||||
<DataTemplate DataType="x:String">
|
||||
<SelectableTextBlock
|
||||
Foreground="{DynamicResource ToastCardContentForeground}"
|
||||
FontWeight="{DynamicResource ToastCardContentFontWeight}"
|
||||
Text="{Binding}"
|
||||
TextWrapping="Wrap" />
|
||||
</DataTemplate>
|
||||
</ContentControl.DataTemplates>
|
||||
</ContentControl>
|
||||
<Button
|
||||
x:Name="PART_CloseButton"
|
||||
Theme="{StaticResource ToastCloseButton}"
|
||||
VerticalAlignment="Top"
|
||||
IsVisible="{TemplateBinding ShowClose}"
|
||||
u:MessageCard.CloseOnClick="True" />
|
||||
</DockPanel>
|
||||
</Border>
|
||||
</Border>
|
||||
</LayoutTransformControl>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
|
||||
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="Opacity" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="Opacity" Value="1" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="0%">
|
||||
<Setter Property="TranslateTransform.Y" Value="-100" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="100%">
|
||||
<Setter Property="TranslateTransform.Y" Value="0" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
<Animation
|
||||
Easing="QuadraticEaseIn"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.15">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="70%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="1" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="Opacity" Value="1" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="Opacity" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="0%">
|
||||
<Setter Property="TranslateTransform.Y" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="100%">
|
||||
<Setter Property="TranslateTransform.Y" Value="-100" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.15">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="1" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="70%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="1" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="0" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^[IsClosing=true]">
|
||||
<Style.Animations>
|
||||
<Animation
|
||||
Easing="QuadraticEaseOut"
|
||||
FillMode="Forward"
|
||||
Duration="0:0:0.3">
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="IsClosed" Value="True" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:information /template/ PathIcon#ToastIcon">
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardInformationIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardInformationIconPathData}" />
|
||||
</Style>
|
||||
<Style Selector="^:success /template/ PathIcon#ToastIcon">
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardSuccessIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardSuccessIconPathData}" />
|
||||
</Style>
|
||||
<Style Selector="^:warning /template/ PathIcon#ToastIcon">
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardWarningIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardWarningIconPathData}" />
|
||||
</Style>
|
||||
<Style Selector="^:error /template/ PathIcon#ToastIcon">
|
||||
<Setter Property="Foreground" Value="{DynamicResource NotificationCardErrorIconForeground}" />
|
||||
<Setter Property="Data" Value="{DynamicResource NotificationCardErrorIconPathData}" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^.Light">
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardLightBackground}" />
|
||||
<Style Selector="^:information /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightInformationBorderBrush}" />
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardLightInformationBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:success /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightSuccessBorderBrush}" />
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardLightSuccessBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:warning /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightWarningBorderBrush}" />
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardLightWarningBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:error /template/ Border#PART_RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightErrorBorderBrush}" />
|
||||
<Setter Property="Background" Value="{DynamicResource NotificationCardLightErrorBackground}" />
|
||||
</Style>
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="ToastCloseButton" TargetType="Button">
|
||||
<Setter Property="CornerRadius" Value="6" />
|
||||
<Setter Property="Height" Value="24" />
|
||||
<Setter Property="Width" Value="24" />
|
||||
<Setter Property="Cursor" Value="Hand" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Border
|
||||
Name="PART_Border"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
Background="Transparent"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<PathIcon
|
||||
Width="10"
|
||||
Height="10"
|
||||
Data="{DynamicResource WindowCloseIconGlyph}" />
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^:pointerover /template/ Border">
|
||||
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed /template/ Border">
|
||||
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
@@ -30,6 +30,7 @@
|
||||
<ResourceInclude Source="MessageBox.axaml" />
|
||||
<ResourceInclude Source="MultiComboBox.axaml" />
|
||||
<ResourceInclude Source="NavMenu.axaml" />
|
||||
<ResourceInclude Source="Notification.axaml" />
|
||||
<ResourceInclude Source="NumericUpDown.axaml" />
|
||||
<ResourceInclude Source="NumPad.axaml" />
|
||||
<ResourceInclude Source="NumberDisplayer.axaml" />
|
||||
@@ -47,6 +48,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" />
|
||||
|
||||
15
src/Ursa.Themes.Semi/Themes/Dark/NotificationShared.axaml
Normal file
15
src/Ursa.Themes.Semi/Themes/Dark/NotificationShared.axaml
Normal file
@@ -0,0 +1,15 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<BoxShadows x:Key="NotificationCardBoxShadows">inset 0 0 0 1 #1AFFFFFF, 0 4 14 0 #40000000</BoxShadows>
|
||||
<SolidColorBrush x:Key="NotificationCardLightBackground" Color="#16161A" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightInformationBorderBrush" Color="#54A9FF" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightInformationBackground" Opacity="0.2" Color="#54A9FF" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightSuccessBorderBrush" Color="#5DC264" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightSuccessBackground" Opacity="0.2" Color="#5DC264" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightWarningBorderBrush" Color="#FFAE43" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightWarningBackground" Opacity="0.2" Color="#FFAE43" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightErrorBorderBrush" Color="#FC725A" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightErrorBackground" Opacity="0.2" Color="#FC725A" />
|
||||
|
||||
<SolidColorBrush x:Key="NotificationCardCloseButtonForeground" Opacity="0.8" Color="#F9F9F9" />
|
||||
</ResourceDictionary>
|
||||
5
src/Ursa.Themes.Semi/Themes/Dark/Toast.axaml
Normal file
5
src/Ursa.Themes.Semi/Themes/Dark/Toast.axaml
Normal file
@@ -0,0 +1,5 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<SolidColorBrush x:Key="ToastCardContentForeground" Color="#F9F9F9" />
|
||||
<SolidColorBrush x:Key="ToastCardBackground" Color="#43444A" />
|
||||
</ResourceDictionary>
|
||||
@@ -12,10 +12,12 @@
|
||||
<MergeResourceInclude Source="KeyGestureInput.axaml" />
|
||||
<MergeResourceInclude Source="Loading.axaml" />
|
||||
<MergeResourceInclude Source="NavigationMenu.axaml" />
|
||||
<MergeResourceInclude Source="NotificationShared.axaml" />
|
||||
<MergeResourceInclude Source="Pagination.axaml" />
|
||||
<MergeResourceInclude Source="Rating.axaml" />
|
||||
<MergeResourceInclude Source="TagInput.axaml" />
|
||||
<MergeResourceInclude Source="Timeline.axaml" />
|
||||
<MergeResourceInclude Source="Toast.axaml" />
|
||||
<MergeResourceInclude Source="Skeleton.axaml" />
|
||||
<MergeResourceInclude Source="TimeBox.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
|
||||
15
src/Ursa.Themes.Semi/Themes/Light/NotificationShared.axaml
Normal file
15
src/Ursa.Themes.Semi/Themes/Light/NotificationShared.axaml
Normal file
@@ -0,0 +1,15 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<BoxShadows x:Key="NotificationCardBoxShadows">0 0 1 0 #4A000000, 0 4 14 0 #1A000000</BoxShadows>
|
||||
<SolidColorBrush x:Key="NotificationCardLightBackground" Color="White" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightInformationBorderBrush" Color="#0077FA" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightInformationBackground" Color="#EAF5FF" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightSuccessBorderBrush" Color="#3BB346" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightSuccessBackground" Color="#ECF7EC" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightWarningBorderBrush" Color="#FC8800" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightWarningBackground" Color="#FFF8EA" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightErrorBorderBrush" Color="#F93920" />
|
||||
<SolidColorBrush x:Key="NotificationCardLightErrorBackground" Color="#FEF2ED" />
|
||||
|
||||
<SolidColorBrush x:Key="NotificationCardCloseButtonForeground" Opacity="0.8" Color="#1C1F23" />
|
||||
</ResourceDictionary>
|
||||
5
src/Ursa.Themes.Semi/Themes/Light/Toast.axaml
Normal file
5
src/Ursa.Themes.Semi/Themes/Light/Toast.axaml
Normal file
@@ -0,0 +1,5 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<SolidColorBrush x:Key="ToastCardContentForeground" Color="#1C1F23" />
|
||||
<SolidColorBrush x:Key="ToastCardBackground" Color="White" />
|
||||
</ResourceDictionary>
|
||||
@@ -12,10 +12,12 @@
|
||||
<MergeResourceInclude Source="KeyGestureInput.axaml" />
|
||||
<MergeResourceInclude Source="Loading.axaml" />
|
||||
<MergeResourceInclude Source="NavigationMenu.axaml" />
|
||||
<MergeResourceInclude Source="NotificationShared.axaml" />
|
||||
<MergeResourceInclude Source="Pagination.axaml" />
|
||||
<MergeResourceInclude Source="Rating.axaml" />
|
||||
<MergeResourceInclude Source="TagInput.axaml" />
|
||||
<MergeResourceInclude Source="Timeline.axaml" />
|
||||
<MergeResourceInclude Source="Toast.axaml" />
|
||||
<MergeResourceInclude Source="Skeleton.axaml" />
|
||||
<MergeResourceInclude Source="TimeBox.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
|
||||
3
src/Ursa.Themes.Semi/Themes/Shared/Notification.axaml
Normal file
3
src/Ursa.Themes.Semi/Themes/Shared/Notification.axaml
Normal file
@@ -0,0 +1,3 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<Thickness x:Key="NotificationCardPadding">20 16 12 16</Thickness>
|
||||
</ResourceDictionary>
|
||||
17
src/Ursa.Themes.Semi/Themes/Shared/Toast.axaml
Normal file
17
src/Ursa.Themes.Semi/Themes/Shared/Toast.axaml
Normal file
@@ -0,0 +1,17 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<x:Double x:Key="ToastCardMinHeight">40</x:Double>
|
||||
<Thickness x:Key="ToastCardBorderThickness">1</Thickness>
|
||||
<CornerRadius x:Key="ToastCardCornerRadius">6</CornerRadius>
|
||||
|
||||
<Thickness x:Key="ToastCardMargin">12</Thickness>
|
||||
<Thickness x:Key="ToastCardPadding">12 8</Thickness>
|
||||
|
||||
<x:Double x:Key="ToastCardIconWidth">18</x:Double>
|
||||
<x:Double x:Key="ToastCardIconHeight">18</x:Double>
|
||||
<Thickness x:Key="ToastCardIconMargin">0 2 0 0</Thickness>
|
||||
|
||||
<FontWeight x:Key="ToastCardContentFontWeight">600</FontWeight>
|
||||
<Thickness x:Key="ToastCardContentMargin">12 0</Thickness>
|
||||
<x:Double x:Key="ToastCardContentMaxWidth">450</x:Double>
|
||||
</ResourceDictionary>
|
||||
@@ -15,12 +15,14 @@
|
||||
<MergeResourceInclude Source="KeyGestureInput.axaml" />
|
||||
<MergeResourceInclude Source="MessageBox.axaml" />
|
||||
<MergeResourceInclude Source="NavigationMenu.axaml" />
|
||||
<MergeResourceInclude Source="Notification.axaml" />
|
||||
<MergeResourceInclude Source="Pagination.axaml" />
|
||||
<MergeResourceInclude Source="Rating.axaml" />
|
||||
<MergeResourceInclude Source="ScrollToButton.axaml" />
|
||||
<MergeResourceInclude Source="TagInput.axaml" />
|
||||
<MergeResourceInclude Source="Skeleton.axaml" />
|
||||
<MergeResourceInclude Source="ThemeSelector.axaml" />
|
||||
<MergeResourceInclude Source="Toast.axaml" />
|
||||
<MergeResourceInclude Source="ToolBar.axaml" />
|
||||
<MergeResourceInclude Source="TimeBox.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
|
||||
Reference in New Issue
Block a user