chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #544 from irihitech/avatar

Browse Source 
Enhance Avatar & Badge
This commit is contained in:
Dong Bin
2025-01-17 16:10:12 +08:00
committed by GitHub
parent ea4268ed11 a366ca6f0c
commit 2ab46bd77e
12 changed files with 391 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/Ursa.Themes.Semi/Controls/Avatar.axaml
View File

@@ -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" />
@@ -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"

82
src/Ursa.Themes.Semi/Controls/Badge.axaml
View File

@@ -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" />
@@ -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">
@@ -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"
@@ -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">
@@ -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}" />
@@ -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>

48
src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
View File

@@ -3,32 +3,32 @@
<SolidColorBrush x:Key="BadgeForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="BadgeContentForeground" Color="White" />
<!-- Solid -->
<SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#FF54A9FF" />
<SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#FF40B4F3" />
<SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#FF888D92" />
<SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#FF5DC264" />
<SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FFFFAE43" />
<SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#FFFC725A" />
<SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#54A9FF" />
<SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#40B4F3" />
<SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#888D92" />
<SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#5DC264" />
<SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FFAE43" />
<SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#FC725A" />
<!-- Light -->
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#FF54A9FF" />
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#FF003D8F" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#FF40B4F3" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#FF004B83" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#FF888D92" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#FF2E3238" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#FF5DC264" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#FF1B5924" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FFFFAE43" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#FF7E3100" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#FFFC725A" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#FF8E0805" />
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#053170" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#40B4F3" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#003761" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#888D92" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#1C1F23" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#5DC264" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#123C19" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FFAE43" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#551F03" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#FC725A" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#6C090B" />
<!-- Inverted -->
<SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="#1C1F23" />
<SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#FF54A9FF" />
<SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#FF40B4F3" />
<SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#FF888D92" />
<SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#FF5DC264" />
<SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FFFFAE43" />
<SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#FFFC725A" />
<SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#40B4F3" />
<SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#888D92" />
<SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#5DC264" />
<SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FFAE43" />
<SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#FC725A" />
</ResourceDictionary>

24
src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
View File

@@ -3,32 +3,32 @@
<SolidColorBrush x:Key="BadgeForeground" Color="White" />
<SolidColorBrush x:Key="BadgeContentForeground" Color="#1C1F23" />
<!-- Solid -->
<SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#0077F0" />
<SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#0077FA" />
<SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#0095EE" />
<SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#6B7075" />
<SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#3BB346" />
<SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FC8800" />
<SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#F93920" />
<SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#3BB346" />
<!-- Light -->
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#0077FA" />
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#D4ECFF" />
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#EAF5FF" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#0095EE" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#CEEEFC" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#E9F7FD" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#6B7075" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#E6E8EA" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FC8800" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#FFEFD0" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#F93920" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#FEE0D5" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#F9F9F9" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#3BB346" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#D0F0D1" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#ECF7EC" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FC8800" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#FFF8EA" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#F93920" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#FEF2ED" />
<!-- Inverted -->
<SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="White" />
<SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#0077F0" />
<SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#0077FA" />
<SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#0095EE" />
<SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#6B7075" />
<SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#3BB346" />
<SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FC8800" />
<SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#F93920" />
<SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#3BB346" />
</ResourceDictionary>

4
src/Ursa.Themes.Semi/Themes/Shared/Badge.axaml
View File

@@ -6,9 +6,9 @@
<x:Double x:Key="BadgeMinHeight">18</x:Double>
<x:Double x:Key="BadgeDotWidth">8</x:Double>
<x:Double x:Key="BadgeDotHeight">8</x:Double>
<Thickness x:Key="BadgePadding">6,0</Thickness>
<Thickness x:Key="BadgePadding">4,0</Thickness>
<Thickness x:Key="BadgeBorderThickness">1</Thickness>
<x:Double x:Key="BadgeFontSize">10</x:Double>
<x:Double x:Key="BadgeFontSize">12</x:Double>
<CornerRadius x:Key="BadgeCornerRadius">100</CornerRadius>
<common:CornerPosition x:Key="BadgeCornerPosition">TopRight</common:CornerPosition>
</ResourceDictionary>