-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #192 from TimeWarpEngineering/Cramer/2024-05-04/Fl…
…uentUI Cramer/2024 05 04/fluent UI
- Loading branch information
Showing
30 changed files
with
359 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 93 additions & 3 deletions
96
...TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/Components/Atoms/SimpleAlert.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,97 @@ | ||
| @namespace TimeWarp.Architecture.Components | ||
| @inherits ParentComponent | ||
|
|
||
| <div @attributes=Attributes class=@CssBuilder role="alert"> | ||
| <strong class="font-bold">@Title</strong> | ||
| <span class="block sm:inline">@ChildContent</span> | ||
| <div @attributes=RootAttributes class=@RootCssBuilder> | ||
| <FluentCard Class=@CardClasses.ToString() role="alert" Style=@CardStyle> | ||
| <FluentLabel Typo=Typography.Body Class=@LabelClasses.ToString() Style=@LabelStyle> | ||
| <span class=@TitleClasses style=@TitleStyle>@Title</span> | ||
| <span class=@ContentClasses style=@ContentStyle>@ChildContent</span> | ||
| </FluentLabel> | ||
| </FluentCard> | ||
| </div> | ||
|
|
||
| @code { | ||
|
|
||
| public enum AlertType | ||
| { | ||
| Success, Danger, Warning, Info, Custom | ||
| } | ||
|
|
||
| private const string RootClass = "simple-alert"; | ||
| private const string CardClass = "simple-alert__card"; | ||
| private const string LabelClass = "simple-alert__label"; | ||
| private const string TitleClass = "simple-alert__title"; | ||
| private const string ContentClass = "simple-alert__content"; | ||
|
|
||
| [Parameter, EditorRequired] public string Title { get; set; } = null!; | ||
| [Parameter] public AlertType Type { get; set; } = AlertType.Success; | ||
| [Parameter] public string? CardStyle { get; set; } | ||
| [Parameter] public string? TitleStyle { get; set; } | ||
| [Parameter] public string? ContentStyle { get; set; } | ||
| [Parameter] public string? LabelStyle { get; set; } | ||
|
|
||
|
|
||
| private string SimpleAlertTypeClass => $"{RootClass}--{Type.ToString().ToLower()}"; | ||
|
|
||
| private CssBuilder RootCssBuilder = new(RootClass); | ||
| private CssBuilder CardClasses = new(CardClass); | ||
| private CssBuilder LabelClasses = new(LabelClass); | ||
| private CssBuilder TitleClasses = new(TitleClass); | ||
| private CssBuilder ContentClasses = new(ContentClass); | ||
|
|
||
| private Dictionary<string, object> RootAttributes = new(); | ||
|
|
||
| protected override void OnParametersSet() | ||
| { | ||
| base.OnParametersSet(); | ||
| Guard.Against.Null(Title); | ||
| Guard.Against.EnumOutOfRange(Type); | ||
|
|
||
| ProcessAttributes(); | ||
| } | ||
|
|
||
| private void ProcessAttributes() | ||
| { | ||
| RootAttributes.Clear(); | ||
| RootCssBuilder.AddClass(SimpleAlertTypeClass); | ||
|
|
||
| // Process the "class" attribute specifically | ||
| if (Attributes.TryGetValue("class", out object? classValue) && classValue is string classString) | ||
| { | ||
| string[] classes = classString.Split(' ', StringSplitOptions.RemoveEmptyEntries); | ||
|
|
||
| foreach (string className in classes) | ||
| { | ||
| if (className.StartsWith($"{CardClass}-")) | ||
| { | ||
| CardClasses.AddClass(className[(CardClass.Length + 2)..]); | ||
| } | ||
| else if (className.StartsWith($"{LabelClass}-")) | ||
| { | ||
| LabelClasses.AddClass(className[(LabelClass.Length + 2)..]); | ||
| } | ||
| else if (className.StartsWith($"{TitleClass}-")) | ||
| { | ||
| TitleClasses.AddClass(className[(TitleClass.Length + 2)..]); | ||
| } | ||
| else if (className.StartsWith($"{ContentClass}-")) | ||
| { | ||
| ContentClasses.AddClass(className[(ContentClass.Length + 2)..]); | ||
| } | ||
| else | ||
| { | ||
| RootCssBuilder.AddClass(className); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Copy all other attributes except "class" to the root | ||
| foreach (KeyValuePair<string, object> attribute in Attributes) | ||
| { | ||
| if (attribute.Key != "class") | ||
| { | ||
| RootAttributes[attribute.Key] = attribute.Value; | ||
| } | ||
| } | ||
| } | ||
| } |
21 changes: 0 additions & 21 deletions
21
...eWarp.Architecture/Source/ContainerApps/Web/Web.Spa/Components/Atoms/SimpleAlert.razor.cs
This file was deleted.
Oops, something went wrong.
56 changes: 56 additions & 0 deletions
56
...Warp.Architecture/Source/ContainerApps/Web/Web.Spa/Components/Atoms/SimpleAlert.razor.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| .simple-alert { | ||
| } | ||
|
|
||
| ::deep .simple-alert__label { | ||
| @apply m-0; | ||
| } | ||
|
|
||
| ::deep .simple-alert__title { | ||
| @apply font-bold; | ||
| } | ||
|
|
||
| ::deep .simple-alert__content { | ||
| @apply block sm:inline | ||
| } | ||
|
|
||
| /* Base styles for any alert */ | ||
| ::deep .simple-alert__card { | ||
| @apply px-4 py-3 rounded relative border; | ||
| } | ||
|
|
||
| /* Success Alert Styles */ | ||
| ::deep.simple-alert--success .simple-alert__card { | ||
| @apply bg-positive-100 border-positive-400; | ||
| } | ||
|
|
||
| ::deep.simple-alert--success .simple-alert__label { | ||
| @apply text-positive-700; | ||
| } | ||
|
|
||
| /* Danger Alert Styles */ | ||
| ::deep.simple-alert--danger .simple-alert__card { | ||
| @apply bg-danger-100 border-danger-400; | ||
| } | ||
|
|
||
| ::deep.simple-alert--danger .simple-alert__label { | ||
| @apply text-danger-700; | ||
| } | ||
|
|
||
| /* Warning Alert Styles */ | ||
| ::deep.simple-alert--warning .simple-alert__card { | ||
| @apply bg-warning-100 border-warning-400; | ||
| } | ||
|
|
||
| ::deep.simple-alert--warning .simple-alert__label { | ||
| @apply text-warning-700; | ||
| } | ||
|
|
||
| /* Info Alert Styles */ | ||
| ::deep.simple-alert--info .simple-alert__card { | ||
| @apply bg-info-100 border-info-400; | ||
| } | ||
|
|
||
| ::deep.simple-alert--info .simple-alert__label { | ||
| @apply text-info-700; | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 0 additions & 8 deletions
8
...rchitecture/Source/ContainerApps/Web/Web.Spa/Features/Counter/Components/Counter.razor.cs
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.