Diplomarbeit-Absolventenverein/oqtane.framework
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add toast support to ModuleMessage

Browse Source
This commit is contained in:
sbwalker
2025-09-15 16:42:37 -04:00
parent f9741a82bd
commit a528e5eab2
4 changed files with 111 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
Oqtane.Client/Modules/Controls/ModuleMessage.razor
View File

@ -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();
}

12
Oqtane.Client/Modules/ModuleBase.cs
View File

@ -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()

20
Oqtane.Client/UI/RenderModeBoundary.razor
View File

@ -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
|| 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();

31
Oqtane.Server/wwwroot/css/app.css
View File

@ -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;
}
}