SemianiakaVY/elsa-core
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

clear styles with notification allert change

Browse source
This commit is contained in:
Vadim Lev 2022-12-15 09:21:59 +02:00
parent a21ed913ff
commit 2b4bcb2d8b
1 changed files with 86 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx
View file

@ -54,12 +54,92 @@ export class NotificationManager {
const { notifications } = notificationStore;
console.log(notifications)
return (
<div class={`notifications-container bg-white z-30 right-0 w-80 ${this.isOpened ? 'block' : 'hidden'} `}>
{notifications.length === 0 && <div class="m-4 p-3 rounded border border-black bg-white shadow-lg">There is no notifications yet</div>}
{notifications.map(notif => (
<div class="m-4 p-3 rounded border border-black bg-white shadow-lg">{notif.message}</div>
))}
</div>
<div>
{/*<div class="m-4 p-3 rounded border border-black bg-white shadow-lg">{notif.message}</div>*/}
<div class={`notifications-container ${this.isOpened ? 'block' : 'hidden'}`}>
<div class="">
<div class={`transform transition ease-in-out duration-500 sm:duration-700 pointer-events-auto w-screen max-w-md ${this.isOpened ? 'translate-x-0' : 'translate-x-full' }`}>
<div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
<div class="p-6">
<div class="flex items-start justify-between">
<h2 class="text-lg font-medium text-gray-900" id="slide-over-title">Team</h2>
<div class="ml-3 flex h-7 items-center">
<button onClick={() => this.handleToggle()}
type="button"
class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500">
<span class="sr-only">Close panel</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
</div>
{notifications.length === 0 && <div class="m-4 p-3 rounded border border-black bg-white shadow-lg">There is no notifications yet</div>}
{notifications.map(notif => (
<ul role="list" class="flex-1 divide-y divide-gray-200 overflow-y-auto">
<li>
<div class="group relative flex items-center py-6 px-5">
<a href="#" class="-m-1 block flex-1 p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="relative flex min-w-0 flex-1 items-center">
<span class="relative inline-block flex-shrink-0">
<img class="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""/>
<span
class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white"
aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="truncate text-sm font-medium text-gray-900">Leslie Alexander</p>
<p class="truncate text-sm text-gray-500">@lesliealexander</p>
</div>
</div>
</a>
<div class="relative ml-2 inline-block flex-shrink-0 text-left">
<button type="button"
class="group relative inline-flex h-8 w-8 items-center justify-center rounded-full bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
id="options-menu-0-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open options menu</span>
<span class="flex h-full w-full items-center justify-center rounded-full">
<svg class="h-5 w-5 text-gray-400 group-hover:text-gray-500"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path
d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z"/>
</svg>
</span>
</button>
<div
class="absolute top-0 right-9 z-10 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu" aria-orientation="vertical" aria-labelledby="options-menu-0-button"
>
<div class="py-1" role="none">
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem"
id="options-menu-0-item-0">View profile</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem"
id="options-menu-0-item-1">Send message</a>
</div>
</div>
</div>
</div>
</li>
</ul>
))}
</div>
</div>
</div>
</div>
</div>
);
}
}