diff --git a/Oqtane.Client/Modules/Controls/ModuleMessage.razor b/Oqtane.Client/Modules/Controls/ModuleMessage.razor index 440feff0..f03eafed 100644 --- a/Oqtane.Client/Modules/Controls/ModuleMessage.razor +++ b/Oqtane.Client/Modules/Controls/ModuleMessage.razor @@ -4,29 +4,57 @@ @if (!string.IsNullOrEmpty(Message)) { - + } + + @if (_action == "Toast") + { +
+ +
+ } } @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(); } diff --git a/Oqtane.Client/Modules/ModuleBase.cs b/Oqtane.Client/Modules/ModuleBase.cs index 782a4b0a..979e2300 100644 --- a/Oqtane.Client/Modules/ModuleBase.cs +++ b/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() diff --git a/Oqtane.Client/UI/RenderModeBoundary.razor b/Oqtane.Client/UI/RenderModeBoundary.razor index 4e2f38f1..a0841974 100644 --- a/Oqtane.Client/UI/RenderModeBoundary.razor +++ b/Oqtane.Client/UI/RenderModeBoundary.razor @@ -12,7 +12,7 @@ { @if (!string.IsNullOrEmpty(_messageContent) && _messagePosition == "top") { - + } @DynamicComponent @if (_progressIndicator) @@ -21,7 +21,7 @@ } @if (!string.IsNullOrEmpty(_messageContent) && _messagePosition == "bottom") { - + } } } @@ -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 - || type != _messageType - || position != _messagePosition) + 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) + { + if (message != _messageContent || type != _messageType || position != _messagePosition || action != _action) { _messageContent = message; _messageType = type; _messagePosition = position; + _action = action; _progressIndicator = false; StateHasChanged(); diff --git a/Oqtane.Server/wwwroot/css/app.css b/Oqtane.Server/wwwroot/css/app.css index 46e749f7..13c7d539 100644 --- a/Oqtane.Server/wwwroot/css/app.css +++ b/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; + } +}