Skip to content

Commit

Permalink
Merge pull request #544 from irihitech/avatar
Browse files Browse the repository at this point in the history 
Enhance Avatar & Badge
  • Loading branch information
@rabbitism
rabbitism authored Jan 17, 2025
2 parents ea4268e + a366ca6 commit 2ab46bd
Show file tree
Hide file tree
Showing 12 changed files with 392 additions and 355 deletions.
6 changes: 6 additions & 0 deletions demo/Ursa.Demo/Pages/AvatarDemo.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,5 +93,11 @@
</u:Avatar.HoverMask>
</u:Avatar>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<u:Avatar Content="AS" />
<u:Avatar Content="Semi" Padding="4" />
<u:Avatar Content="Semi" Padding="10" />
</StackPanel>

</StackPanel>
</UserControl>
329 changes: 147 additions & 182 deletions demo/Ursa.Demo/Pages/BadgeDemo.axaml
View file

Large diffs are not rendered by default.

74 changes: 27 additions & 47 deletions demo/Ursa.Demo/Pages/IntroductionDemo.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,24 +103,24 @@
Content="Step 1"
Header="ToDo"
Type="Default"
Time="2023-01-14 09:24:05"/>
Time="2023-01-14 09:24:05" />
<u:TimelineItem
Content="Step 2"
Header="Start"
Position="Right"
Type="Ongoing"
Time="2024-01-04 22:32:58"/>
Time="2024-01-04 22:32:58" />
<u:TimelineItem
Content="Step 3"
Header="In Between"
Type="Warning"
Time="2024-01-05 00:08:29"/>
Time="2024-01-05 00:08:29" />
<u:TimelineItem
Content="Step 4"
Header="Finished"
Position="Right"
Type="Success"
Time="2024-01-05 00:27:44"/>
Type="Success"
Time="2024-01-05 00:27:44" />
</u:Timeline>
<StackPanel Grid.Column="2" Spacing="20">
<u:ButtonGroup Classes="Primary Solid" ItemsSource="{Binding ButtonGroupItems}" />
Expand All @@ -133,58 +133,38 @@
</StackPanel>

<StackPanel Grid.Column="2" Grid.Row="1" Spacing="20" Margin="8">
<u:Divider HorizontalContentAlignment="Right">Badge</u:Divider>
<u:Divider HorizontalContentAlignment="Right">
<u:Badge Header="Badge" />
</u:Divider>
<WrapPanel Orientation="Horizontal">
<u:Badge Header="Ursa" CornerPosition="TopRight">
<Border Classes="Hover">
<TextBlock Text="Pyro"/>
</Border>
<u:Badge Classes="Light" Header="Pyro">
<u:Avatar Classes="Red" Content="火" />
</u:Badge>
<u:Badge
HorizontalAlignment="Center"
CornerPosition="TopRight"
Header="500"
OverflowCount="99">
<Border Classes="Hover">
<TextBlock Text="Hydro"/>
</Border>
<u:Badge Classes="Inverted" Header="500" OverflowCount="99">
<u:Avatar Classes="Square Blue" Content="水" />
</u:Badge>
<u:Badge
Header="Ursa"
CornerPosition="TopRight"
Dot="True">
<Border Classes="Hover">
<TextBlock Text="Ameno"/>
</Border>
<u:Badge Classes="Secondary" Dot="True">
<u:Avatar Classes="Square Green" Content="风" />
</u:Badge>

<u:Badge Header="Ursa" />
<u:Badge Header="Ursa" Dot="True" />
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<u:Badge Header="Ursa" Classes="Secondary">
<Border Classes="Hover">
<TextBlock Text="Electro"/>
</Border>
<u:Badge Classes="Tertiary" Header="Electro">
<u:Avatar Classes="Square Violet" Content="雷" />
</u:Badge>
<u:Badge Header="Ursa" Classes="Tertiary" CornerPosition="BottomLeft">
<Border Classes="Hover">
<TextBlock Text="Dendro"/>
</Border>
<u:Badge Classes="Success" Header="Dendro" CornerPosition="BottomLeft">
<u:Avatar Classes="Square Lime" Content="草" />
</u:Badge>
<u:Badge Header="Ursa" Classes="Warning" CornerPosition="BottomRight">
<Border Classes="Hover">
<TextBlock Text="Cryo"/>
</Border>
<u:Badge Classes="Warning" Header="Cryo" CornerPosition="BottomRight">
<u:Avatar Classes="Square LightBlue" Content="冰" />
</u:Badge>
<u:Badge Header="Ursa" Classes="Danger" CornerPosition="TopRight">
<Border Classes="Hover">
<TextBlock Text="Geo"/>
</Border>
<u:Badge Classes="Danger" Header="Geo" CornerPosition="TopRight">
<u:Avatar Classes="Square Amber" Content="岩" />
</u:Badge>
<u:Badge Header="Ursa" />
<u:Badge Dot="True" />
</WrapPanel>

<u:Divider>DualBadge</u:Divider>
<u:Divider>
<u:DualBadge Content="DualBadge" />
</u:Divider>
<WrapPanel Orientation="Horizontal">
<u:DualBadge Header="downloads">
<u:DualBadge.Icon>
Expand Down
31 changes: 21 additions & 10 deletions src/Ursa.Themes.Semi/Controls/Avatar.axaml
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa"
xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa">
<converters:DivideByTwoConverter x:Key="DivideByTwoConverter" />
xmlns:u="https://irihi.tech/ursa">
<Design.PreviewWith>
<StackPanel Margin="20" Orientation="Horizontal" Spacing="8">
<u:Avatar Content="AS" />
<u:Avatar Content="Semi" Padding="4" />
<u:Avatar Content="Semi" Padding="10" />
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type u:Avatar}" TargetType="{x:Type u:Avatar}">
<Setter Property="Foreground" Value="{DynamicResource AvatarForeground}" />
<Setter Property="Background" Value="{DynamicResource AvatarGreyBackground}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarMediumFontSize}" />
<Setter Property="FontWeight" Value="{DynamicResource AvatarFontWeight}" />
<Setter Property="Padding" Value="3" />
<Setter Property="Width" Value="{DynamicResource AvatarMediumWidth}" />
<Setter Property="Height" Value="{Binding $self.Width}" />
<Setter Property="Cursor" Value="Hand" />
Expand All @@ -25,13 +31,18 @@
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="{TemplateBinding Background}" />
<ContentPresenter
Name="PART_ContentPresenter"
IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}"
CornerRadius="{TemplateBinding CornerRadius}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
<Viewbox
Margin="{TemplateBinding Padding}"
StretchDirection="DownOnly">
<ContentPresenter
Name="PART_ContentPresenter"
IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}"
CornerRadius="{TemplateBinding CornerRadius}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
</Viewbox>
<Image Source="{TemplateBinding Source}" />
<ContentPresenter
Name="PART_HoverMask"
Expand Down
82 changes: 46 additions & 36 deletions src/Ursa.Themes.Semi/Controls/Badge.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,30 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<Design.PreviewWith>
<StackPanel Orientation="Horizontal" Margin="20" Width="300" Spacing="10">
<u:Badge Header="5">
<u:Avatar Classes="Square Blue" Content="BM" />
</u:Badge>
<u:Badge Dot="True">
<u:Avatar Classes="Square Blue" Content="YL" />
</u:Badge>
<u:Badge>
<u:Badge.Header>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource SemiIconLock}" />
</u:Badge.Header>
<u:Avatar Classes="Square Blue" Content="YL" />
</u:Badge>
<u:Badge Header="NEW">
<u:Avatar Classes="Square LightBlue" Content="WF" />
</u:Badge>
<u:Badge Classes="Light" Header="Pyro" CornerPosition="BottomLeft">
<u:Avatar Classes="Red" Content="火" />
</u:Badge>
</StackPanel>
</Design.PreviewWith>

<converters:BadgeContentOverflowConverter x:Key="BadgeContentConverter" />

Expand All @@ -22,7 +45,7 @@
<Setter Property="CornerPosition" Value="{DynamicResource BadgeCornerPosition}" />
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type u:Badge}">
<Grid
<Panel
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
ClipToBounds="False">
Expand All @@ -39,16 +62,19 @@
MinWidth="{DynamicResource BadgeMinWidth}"
MinHeight="{DynamicResource BadgeMinHeight}"
Padding="{DynamicResource BadgePadding}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{Binding Header, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}}"
RenderTransformOrigin=".5,.5"
Theme="{TemplateBinding BadgeTheme}"
UseLayoutRounding="False">
<Border.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.Or}">
<Binding Path="Header" RelativeSource="{RelativeSource TemplatedParent}" Converter="{x:Static ObjectConverters.IsNotNull}" />
<Binding Path="Dot" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</Border.IsVisible>
<ContentPresenter
Name="{x:Static u:Badge.PART_HeaderPresenter}"
HorizontalAlignment="Center"
Expand All @@ -65,40 +91,17 @@
</ContentPresenter.Content>
</ContentPresenter>
</Border>
</Grid>
</Panel>
</ControlTemplate>
</Setter>

<Style Selector="^[Dot=True]">
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type u:Badge}">
<Grid
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
ClipToBounds="False">
<ContentPresenter
Name="{x:Static u:Badge.PART_ContentPresenter}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{DynamicResource BadgeContentForeground}" />
<Border
Name="{x:Static u:Badge.PART_BadgeContainer}"
Width="{DynamicResource BadgeDotWidth}"
Height="{DynamicResource BadgeDotHeight}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{Binding Header, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}}"
RenderTransformOrigin=".5,.5" />
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^[Dot=True] /template/ Border#PART_BadgeContainer">
<Setter Property="Padding" Value="0" />
<Setter Property="MinWidth" Value="{DynamicResource BadgeDotWidth}" />
<Setter Property="MinHeight" Value="{DynamicResource BadgeDotHeight}" />
</Style>
<Style Selector="^[Dot=True] /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="IsVisible" Value="False" />
</Style>

<Style Selector="^[CornerPosition=TopLeft] /template/ Border#PART_BadgeContainer">
Expand Down Expand Up @@ -138,6 +141,12 @@
</Style>

<Style Selector="^.Light">
<Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightPrimaryBadgeBackground}" />
</Style>
<Style Selector="^.Primary">
<Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
Expand Down Expand Up @@ -191,6 +200,7 @@
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
</Style>
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
<Style Selector="^.Primary /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
</Style>
Expand Down
Loading

0 comments on commit 2ab46bd

Please sign in to comment.