Refactor the alert component
All styling properties and classes have been removed in favor of named subcomponents. Any and all component styling should be through classes.
This commit is contained in:
parent
3b6045c3e1
commit
88710e4e3b
@ -6,12 +6,12 @@
|
|||||||
class="@CompiledClassList"
|
class="@CompiledClassList"
|
||||||
@attributes="CustomAttributes"
|
@attributes="CustomAttributes"
|
||||||
@onclick="Clicked">
|
@onclick="Clicked">
|
||||||
<div class="@CompiledAlignmentClassList">
|
<div name="alert-content">
|
||||||
|
|
||||||
@if (GlyphVisible)
|
@if (GlyphVisible)
|
||||||
{
|
{
|
||||||
<div class="alert-icon alert-icon-left">
|
<div class="alert-icon alert-icon-left">
|
||||||
<Icon Glyph="@CustomGlyph" />
|
<Icon Glyph="@Glyph" />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -6,18 +6,6 @@ namespace Connected.Components;
|
|||||||
|
|
||||||
public partial class Alert : UIComponent
|
public partial class Alert : UIComponent
|
||||||
{
|
{
|
||||||
/// <summary>
|
|
||||||
/// Defines the classlist used in aligning the alert content internally.
|
|
||||||
/// </summary>
|
|
||||||
private CssBuilder CompiledAlignmentClassList
|
|
||||||
{
|
|
||||||
get
|
|
||||||
{
|
|
||||||
return new CssBuilder("alert-position")
|
|
||||||
.AddClass($"justify-sm-{HorizontalAlignment.GetAbsolute(RightToLeft)}");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Contains the default container classlist and the user defined classes.
|
/// Contains the default container classlist and the user defined classes.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
@ -27,9 +15,6 @@ public partial class Alert : UIComponent
|
|||||||
{
|
{
|
||||||
return new CssBuilder("alert")
|
return new CssBuilder("alert")
|
||||||
.AddClass($"alert-{Variant}-{Severity}")
|
.AddClass($"alert-{Variant}-{Severity}")
|
||||||
.AddClass($"dense", Dense)
|
|
||||||
.AddClass($"square", Square)
|
|
||||||
.AddClass($"elevation-{Elevation}")
|
|
||||||
.AddClass(ClassList);
|
.AddClass(ClassList);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -64,16 +49,10 @@ public partial class Alert : UIComponent
|
|||||||
/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
|
/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string CustomGlyph { get; set; } = default!;
|
public string Glyph { get; set; } = default!;
|
||||||
#endregion
|
#endregion
|
||||||
|
|
||||||
#region Styling properties
|
#region Styling properties
|
||||||
/// <summary>
|
|
||||||
/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public HorizontalAlignment HorizontalAlignment { get; set; } = HorizontalAlignment.Start;
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// A space separated list of class names, added on top of the default class list.
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
@ -86,18 +65,6 @@ public partial class Alert : UIComponent
|
|||||||
[Parameter]
|
[Parameter]
|
||||||
public bool CloseGlyphVisible { get; set; }
|
public bool CloseGlyphVisible { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, compact padding will be used.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool Dense { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public int Elevation { set; get; } = 0;
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If true, no alert glyph will be used.
|
/// If true, no alert glyph will be used.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
@ -107,6 +74,7 @@ public partial class Alert : UIComponent
|
|||||||
/// <summary>
|
/// <summary>
|
||||||
/// Specifies the control's display style
|
/// Specifies the control's display style
|
||||||
/// </summary>
|
/// </summary>
|
||||||
|
//TODO: Implement in DOM
|
||||||
[CascadingParameter(Name = "RightToLeft")]
|
[CascadingParameter(Name = "RightToLeft")]
|
||||||
public bool RightToLeft { get; set; }
|
public bool RightToLeft { get; set; }
|
||||||
|
|
||||||
@ -116,12 +84,6 @@ public partial class Alert : UIComponent
|
|||||||
[Parameter]
|
[Parameter]
|
||||||
public Severity Severity { get; set; } = Severity.Normal;
|
public Severity Severity { get; set; } = Severity.Normal;
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, rounded corners are disabled.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool Square { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The variant to use.
|
/// The variant to use.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
@ -131,10 +93,10 @@ public partial class Alert : UIComponent
|
|||||||
|
|
||||||
protected override void OnParametersSet()
|
protected override void OnParametersSet()
|
||||||
{
|
{
|
||||||
if (!string.IsNullOrEmpty(CustomGlyph))
|
if (!string.IsNullOrEmpty(Glyph))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
CustomGlyph = GetGlyphForSeverity(Severity);
|
Glyph = GetGlyphForSeverity(Severity);
|
||||||
}
|
}
|
||||||
|
|
||||||
private string GetGlyphForSeverity(Severity severity)
|
private string GetGlyphForSeverity(Severity severity)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user