Merge pull request #5622 from sbwalker/dev

add toast support to ModuleMessage

Oqtane.Client/Modules/Controls/ModuleMessage.razor

@@ -4,6 +4,8 @@
 
 @if (!string.IsNullOrEmpty(Message))
 {
+    @if (_action == "Alert")
+    {
         <div class="@_classname alert-dismissible fade show mb-3" role="alert">
             @((MarkupString)Message)
             @if (Type == MessageType.Error && PageState != null && UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
@@ -22,11 +24,37 @@
                 }
             }
         </div>
+    }
+
+    @if (_action == "Toast")
+    {
+        <div class="app-modulemessage-toast bottom-0 end-0">
+            <div class="@_classname alert-dismissible fade show mb-3" role="alert">
+                @((MarkupString)Message)
+                @if (Type == MessageType.Error && PageState != null && UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
+                {
+                    <NavLink class="ms-2" href="@NavigateUrl("admin/log")">View Details</NavLink>
+                }
+                @if (ModuleState != null)
+                {
+                    @if (ModuleState.RenderMode == RenderModes.Static)
+                    {
+                        <a href="@NavigationManager.Uri" class="btn-close" data-dismiss="alert" aria-label="close"></a>
+                    }
+                    else
+                    {
+                        <button type="button" class="btn-close" data-dismiss="alert" aria-label="close" @onclick="CloseMessage"></button>
+                    }
+                }
+            </div>
+        </div>
+    }
 }
 
 @code {
     private string _message = string.Empty;
     private string _classname = string.Empty;
+    private string _action = string.Empty;
 
     [Parameter]
     public string Message { get; set; }
@@ -34,6 +62,9 @@
     [Parameter]
     public MessageType Type { get; set; }
 
+    [Parameter]
+    public string Action { get; set; } // Alert (default) or Toast
+
     [Parameter]
     public RenderModeBoundary Parent { get; set; }
 
@@ -43,6 +74,12 @@
         if (!string.IsNullOrEmpty(_message))
         {
             _classname = GetMessageType(Type);
+            _action = Action;
+            if (string.IsNullOrEmpty(_action)) _action = "Toast"; // default
+            if (Type == MessageType.Error)
+            {
+                _action = "Alert"; // errors should always be displayed as alerts
+            }
         }
     }
 
@@ -67,9 +104,10 @@
 
         return classname;
     }
-    private void CloseMessage(MouseEventArgs e)
+
+    private void CloseMessage()
     {
-        if(Parent != null)
+        if (Parent != null)
         {
             Parent.DismissMessage();
         }

Oqtane.Client/Modules/ModuleBase.cs

@@ -379,7 +379,17 @@ namespace Oqtane.Modules
 
         public void AddModuleMessage(string message, MessageType type, string position)
         {
-            RenderModeBoundary.AddModuleMessage(message, type, position);
+            AddModuleMessage(message, type, "top", "");
+        }
+
+        public void AddModuleMessage(string message, string action, MessageType type)
+        {
+            AddModuleMessage(message, type, "top", action);
+        }
+
+        public void AddModuleMessage(string message, MessageType type, string position, string action)
+        {
+            RenderModeBoundary.AddModuleMessage(message, type, position, action);
         }
 
         public void ClearModuleMessage()

Oqtane.Client/UI/RenderModeBoundary.razor

@@ -12,7 +12,7 @@
             {
                 @if (!string.IsNullOrEmpty(_messageContent) && _messagePosition == "top")
                 {
-                    <ModuleMessage Message="@_messageContent" Type="@_messageType" Parent="@this" />
+                    <ModuleMessage Message="@_messageContent" Type="@_messageType" Parent="@this" Action="@_action" />
                 }
                 @DynamicComponent
                 @if (_progressIndicator)
@@ -21,7 +21,7 @@
                 }
                 @if (!string.IsNullOrEmpty(_messageContent) && _messagePosition == "bottom")
                 {
-                    <ModuleMessage Message="@_messageContent" Type="@_messageType" Parent="@this" />
+                    <ModuleMessage Message="@_messageContent" Type="@_messageType" Parent="@this" Action="@_action" />
                 }
             }
         }
@@ -45,6 +45,7 @@
     private string _messageContent;
     private MessageType _messageType;
     private string _messagePosition;
+    private string _action;
     private bool _progressIndicator = false;
     private string _error;
 
@@ -105,13 +106,22 @@
 
     public void AddModuleMessage(string message, MessageType type, string position)
     {
-        if (message != _messageContent
+        AddModuleMessage(message, type, "top", "");
-            || type != _messageType
+    }
-            || position != _messagePosition)
+
+    public void AddModuleMessage(string message, string action, MessageType type)
+    {
+        AddModuleMessage(message, type, "top", action);
+    }
+
+    public void AddModuleMessage(string message, MessageType type, string position, string action)
+    {
+        if (message != _messageContent || type != _messageType || position != _messagePosition || action != _action)
         {
             _messageContent = message;
             _messageType = type;
             _messagePosition = position;
+            _action = action;
             _progressIndicator = false;
 
             StateHasChanged();

Oqtane.Server/wwwroot/css/app.css

@@ -286,3 +286,34 @@ app {
     top: 0;
     right: 5px;
 }
+
+.app-modulemessage-toast {
+    position: fixed;
+    width: 350px;
+    z-index: 1000;
+    animation: slide-in 0.5s ease-out, slide-out 0.5s ease-in 5s forwards;
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slide-out {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}