Skip to content

Commit

Permalink
dialog styling
Browse files Browse the repository at this point in the history
  • Loading branch information
kikipoulet committed Aug 16, 2024
1 parent 4279d44 commit 1daf5a2
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 29 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ private void OpenMessageBoxStyleDialog()
dialogManager.CreateDialog()
.OfType(SelectedType)
.WithTitle("MessageBox style dialog.")
.WithContent($"This MessageBox is - {SelectedType}.")
.WithActionButton("Dismiss", _ => { }, true)
.WithContent("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")
.WithActionButton("Close " + SelectedType.ToString(), _ => { }, true)
.Dismiss().ByClickingBackground()
.TryShow();
}
Expand Down
2 changes: 1 addition & 1 deletion SukiUI/ColorTheme/Dark.axaml
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<BoxShadows x:Key="SukiSwitchShadow">0 1 5 0 #555555</BoxShadows>
<BoxShadows x:Key="SukiSmallPopupShadow">0 0 4 1 #101010</BoxShadows>
<BoxShadows x:Key="SukiPopupShadow">1 1 14 1 #101010</BoxShadows>
<BoxShadows x:Key="SukiBigPopupShadow">1 1 15 0 #606060</BoxShadows>
<BoxShadows x:Key="SukiBigPopupShadow">1 4 17 0 #111111</BoxShadows>

<LinearGradientBrush x:Key="PopupGradientBrush" StartPoint="0%,0%" EndPoint="100%,100%">
<GradientStop Color="{DynamicResource SukiAccentColor10}" Offset="0"></GradientStop>
Expand Down
2 changes: 1 addition & 1 deletion SukiUI/ColorTheme/Light.axaml
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<BoxShadows x:Key="SukiSwitchShadow">0 1 5 0 #aaaaaa</BoxShadows>
<BoxShadows x:Key="SukiSmallPopupShadow">0 0 2 0 DimGray</BoxShadows>
<BoxShadows x:Key="SukiPopupShadow">1 1 8 0 LightGray</BoxShadows>
<BoxShadows x:Key="SukiBigPopupShadow">1 1 15 0 #dedede</BoxShadows>
<BoxShadows x:Key="SukiBigPopupShadow">1 4 17 0 #999999</BoxShadows>

<LinearGradientBrush x:Key="PopupGradientBrush" StartPoint="0%,0%" EndPoint="100%,100%">
<GradientStop Color="{DynamicResource SukiAccentColor5}" Offset="0"></GradientStop>
Expand Down
52 changes: 47 additions & 5 deletions SukiUI/ColorTheme/NotificationColor.cs
Original file line number Diff line number Diff line change
@@ -1,11 +1,53 @@
using Avalonia.Media;
using Avalonia;
using Avalonia.Media;
using Avalonia.Styling;

namespace SukiUI.ColorTheme;

public static class NotificationColor
{
public static readonly SolidColorBrush InfoIconForeground = new(Color.FromRgb(47,84,235));
public static readonly SolidColorBrush SuccessIconForeground = new(Color.FromRgb(56,158,13));
public static readonly SolidColorBrush WarningIconForeground = new(Color.FromRgb(240,140,22));
public static readonly SolidColorBrush ErrorIconForeground = new(Color.FromRgb(236,63,48));
public static readonly LinearGradientBrush InfoIconForeground = new LinearGradientBrush()
{
EndPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
StartPoint = new RelativePoint(1, 1, RelativeUnit.Relative),
GradientStops = new GradientStops()
{
new() { Color = Color.FromRgb(89,126,247), Offset = 0.3 },
new() { Color = Color.FromRgb(47,84,235), Offset = 1 },

}
};
public static readonly LinearGradientBrush SuccessIconForeground = new LinearGradientBrush()
{
EndPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
StartPoint = new RelativePoint(1, 1, RelativeUnit.Relative),
GradientStops = new GradientStops()
{
new() { Color = Color.FromRgb(82,196,26), Offset = 0.3 },
new() { Color = Color.FromRgb(56,158,13), Offset = 1 },

}
};
public static readonly LinearGradientBrush WarningIconForeground = new LinearGradientBrush()
{
EndPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
StartPoint = new RelativePoint(1, 1, RelativeUnit.Relative),
GradientStops = new GradientStops()
{
new() { Color = Color.FromRgb(255,169,64), Offset = 0.3 },
new() { Color = Color.FromRgb(250,140,22), Offset = 1 },

}
};
public static readonly LinearGradientBrush ErrorIconForeground = new LinearGradientBrush()
{
EndPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
StartPoint = new RelativePoint(1, 1, RelativeUnit.Relative),
GradientStops = new GradientStops()
{
new() { Color = Color.FromRgb(255,77,79), Offset = 0.3 },
new() { Color = Color.FromRgb(245,34,45), Offset = 1 },

}
};
}
59 changes: 39 additions & 20 deletions SukiUI/Controls/SukiDialog.axaml
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:suki="https://github.com/kikipoulet/SukiUI">
xmlns:suki="https://github.com/kikipoulet/SukiUI"
xmlns:dialogs="clr-namespace:SukiUI.Dialogs">
<ControlTheme TargetType="suki:SukiDialog" x:Key="SukiDialogTheme">
<Setter Property="ClipToBounds" Value="False"/>
<Setter Property="Template">
<ControlTemplate>
<Panel>
<Border Padding="0"
ClipToBounds="True"
<Border Padding="0" Margin="0,55,0,0"
ClipToBounds="True" MinWidth="450"
Background="{DynamicResource SukiCardBackground}"
CornerRadius="20">
CornerRadius="25">
<Panel>
<Panel IsVisible="{DynamicResource IsDark}" Margin="-5">
<Panel.Background>
Expand All @@ -27,37 +28,55 @@
</LinearGradientBrush>
</Panel.Background>
</Panel>
<suki:GroupBox Header="{TemplateBinding Title}" Margin="15"
IsVisible="{Binding !IsViewModelOnly, RelativeSource={RelativeSource TemplatedParent}}">
<StackPanel Spacing="5">
<ContentControl Content="{TemplateBinding Content}" />
<ItemsControl ItemsSource="{TemplateBinding ActionButtons}">


<StackPanel Margin="30,30,30,5" IsVisible="{Binding !IsViewModelOnly, RelativeSource={RelativeSource TemplatedParent}}" Spacing="24">
<Border Margin="0,10,0,0" IsVisible="{TemplateBinding IconColor, Converter={x:Static ObjectConverters.IsNotNull}}"></Border>
<TextBlock Margin="0,0,0,0" IsVisible="{TemplateBinding Title,Converter={x:Static StringConverters.IsNotNullOrEmpty}}" HorizontalAlignment="Center" FontSize="22" FontWeight="DemiBold" Text="{TemplateBinding Title}" />
<ContentControl MaxWidth="{TemplateBinding Content, Converter={x:Static dialogs:DialogContentMaxWidthValueConverter.Instance}}" Content="{TemplateBinding Content}" >
<ContentControl.Styles>
<Style Selector="TextBlock">
<Setter Property="FontSize" Value="14" />
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
</ContentControl.Styles>
</ContentControl>
<ItemsControl Margin="0,2,0,0" ItemsSource="{TemplateBinding ActionButtons}">
<ItemsControl.Styles>
<Style Selector="Button:nth-child(1n+2)">
<Setter Property="Margin" Value="5,0,0,0" />
<Style Selector="Button">
<Setter Property="Margin" Value="15,0,0,25" />
</Style>
</ItemsControl.Styles>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="0" Rows="1" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</suki:GroupBox>

<ContentControl Content="{TemplateBinding ViewModel}" Margin="15"
IsVisible="{TemplateBinding IsViewModelOnly}" />
</Panel>
</Border>
<Panel HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="-15,-15,0,0">
<Ellipse Width="35" Height="35" Fill="{TemplateBinding IconColor}"/>
<PathIcon Data="{TemplateBinding Icon}"
<Border CornerRadius="50" HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="-15,-15,0,0" Width="100" Height="100">
<Panel >
<Border Width="90" HorizontalAlignment="Center"
Height="100"
IsVisible="{TemplateBinding IconColor, Converter={x:Static ObjectConverters.IsNotNull}}"

BoxShadow="{DynamicResource SukiBigPopupShadow}"
CornerRadius="50" />
<Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" Fill="{TemplateBinding IconColor}"/>
<PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" Data="{TemplateBinding Icon}"
Foreground="White"
Width="25"
Height="25" />
Width="28"
Height="28" />

</Panel>
</Border>
</Panel>
</ControlTemplate>
</Setter>
Expand Down
29 changes: 29 additions & 0 deletions SukiUI/Dialogs/DialogContentMaxWidthValueConverter.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
using System;
using System.Globalization;
using Avalonia.Data.Converters;
using Avalonia.Media.Immutable;

namespace SukiUI.Dialogs
{
public class DialogContentMaxWidthValueConverter: IValueConverter
{

public static readonly DialogContentMaxWidthValueConverter Instance = new();

public object? Convert(object? value, Type targetType, object? parameter,
CultureInfo culture)
{
if (value is string)
return 450;

return 2000;
}

public object ConvertBack(object? value, Type targetType,
object? parameter, CultureInfo culture)
{
throw new NotSupportedException();
}

}
}

0 comments on commit 1daf5a2

Please sign in to comment.