feat(Toasts) Adding toasts

2022-04-10 17:32:22 -04:00
parent 8c06fdd120
commit 4322be0053
29 changed files with 478 additions and 100 deletions
@@ -21,6 +21,7 @@
    <ItemGroup>
        <PackageReference Include="Markdig" Version="0.28.1" />
        <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.0-preview.2.22153.2" />
+        <PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0-preview.2.22153.2" />
    </ItemGroup>

    <ItemGroup>
@@ -1,4 +1,5 @@
-<div class="alertContainer @Type.ToString().ToLower()">
+@using Model.Feedback
+<div class="alertContainer @Type.ToLower()">
    @if (Title != null) {
        <div class="alertTitle">
            @Title
@@ -21,24 +22,25 @@
        width: 100%;
    }

-    .alertContainer.@SeverityType.Warning.ToString().ToLower() {
-        border-color: #2a2000;
-        background-color: #ffbf0029;
+
+    .alertContainer.@SeverityType.Warning.ToLower() {
+        background-color: var(--severity-warning-color);
+        border-color: var(--severity-warning-border-color);
    }

-    .alertContainer.@SeverityType.Error.ToString().ToLower() {
-        border-color: #290102;
-        background-color: #4C2C33;
+    .alertContainer.@SeverityType.Error.ToLower() {
+        background-color: var(--severity-error-color);
+        border-color: var(--severity-error-border-color);
    }

-    .alertContainer.@SeverityType.Information.ToString().ToLower() {
-        border-color: #030129;
-        background-color: #2c3a4c;
+    .alertContainer.@SeverityType.Information.ToLower() {
+        background-color: var(--severity-information-color);
+        border-color: var(--severity-information-border-color);
    }

-    .alertContainer.@SeverityType.Success.ToString().ToLower() {
-        border-color: #042901;
-        background-color: #2E4C2C;
+    .alertContainer.@SeverityType.Success.ToLower() {
+        background-color: var(--severity-success-color);
+        border-color: var(--severity-success-border-color);
    }

    .alertTitle {
@@ -56,6 +58,6 @@
    public RenderFragment? Message { get; set; }

    [Parameter]
-    public SeverityType Type { get; set; } = SeverityType.Warning;
+    public string Type { get; set; } = SeverityType.Warning;

 }
@@ -1,8 +0,0 @@
-namespace Components.Feedback;
-
-public enum SeverityType {
-    Warning,
-    Information,
-    Error,
-    Success
-}
@@ -0,0 +1,114 @@
+@using Services
+@inject IToastService toastService
+
+@implements IDisposable
+
+@if (Toast == null)
+{
+    <div>Add toast object...</div>
+}
+else
+{
+    <div class="toastContainer @Toast.SeverityType.ToLower() @FadeoutStyle">
+            <div class="toastTitle">
+                @Toast.Title
+            </div>
+            <div>
+                @Toast.Message
+            </div>
+    </div>    
+}
+
+<style>
+    .toastContainer {
+        border: 4px solid;
+        border-radius: 4px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-items: stretch;
+        width: 100%;
+        
+        opacity: 1;
+    }
+    
+    .fadeout {
+        transition: opacity 3s ease-in;
+        opacity: 0;
+    }
+
+    .toastContainer.@SeverityType.Warning.ToLower() {
+        background-color: var(--severity-warning-color);
+        border-color: var(--severity-warning-border-color);
+    }
+
+    .toastContainer.@SeverityType.Error.ToLower() {
+        background-color: var(--severity-error-color);
+        border-color: var(--severity-error-border-color);
+    }
+
+    .toastContainer.@SeverityType.Information.ToLower() {
+        background-color: var(--severity-information-color);
+        border-color: var(--severity-information-border-color);
+    }
+
+    .toastContainer.@SeverityType.Success.ToLower() {
+        background-color: var(--severity-success-color);
+        border-color: var(--severity-success-border-color);
+    }
+
+    .toastTitle {
+        font-weight: 800;
+    }
+
+</style>
+
+@code {
+    [Parameter]
+    public ToastModel? Toast { get; set; } = default!;
+
+    private bool isFadingOut = false;
+
+    private string FadeoutStyle => isFadingOut ? "fadeout" : "";
+
+    private int removalTime = 150000;
+    private int fadeoutTime = 4000;
+    
+    //private int fade
+
+    private Timer removalTimer = null!;
+    private Timer fadeoutTimer = null!;
+
+    protected override void OnInitialized()
+    {
+#if DEBUG
+        removalTime = 5000;
+#endif
+
+        removalTimer = new Timer(removalTime);
+        removalTimer.Elapsed += OnRemoval!;
+        removalTimer.Enabled = true;
+        
+        fadeoutTimer = new Timer(removalTime - fadeoutTime);
+        fadeoutTimer.Elapsed += OnFadeout!;
+        fadeoutTimer.Enabled = true;
+    }
+
+    void OnFadeout(object source, ElapsedEventArgs eventArgs)
+    {
+        isFadingOut = true;
+        
+        StateHasChanged();
+    }
+    
+    void OnRemoval(object source, ElapsedEventArgs eventArgs)
+    {
+        toastService.RemoveToast(Toast!);
+    }
+
+    public void Dispose()
+    {
+        removalTimer.Dispose();
+        fadeoutTimer.Dispose();
+    }
+}
@@ -0,0 +1,28 @@
+<a href="@Href" class="codeLinkButton">
+    View on GitHub
+</a>
+
+<style>
+    .codeLinkButton {
+        color: white;
+        background-color: var(--info);
+        border: 1px solid var(--info-border);
+        padding: 16px;
+        border-radius: 3px;
+        display: block;
+        width: 180px;
+        text-align: center;
+    }
+    
+    .codeLinkButton:hover {
+        color: white;
+        background-color: var(--info-hover);
+        border: 2px solid var(--info-border-hover);
+    }
+</style>
+
+@code {
+
+    [Parameter]
+    public string Href { get; set; } = "";
+}
@@ -7,4 +7,10 @@
@using Microsoft.JSInterop
@using System.Text
@using System.Text.Json
-@using YamlDotNet.Serialization
+@using YamlDotNet.Serialization
+@using Model.Feedback
+
+@using System;
+@using System.Threading.Tasks;
+@using System.Timers;
+