forked from elsa-workflows/elsa-core
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
318 additions
and
93 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 60 additions & 41 deletions
101
...gner/elsa-workflows-designer/src/components/toolbar/workflow-toolbar/workflow-toolbar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,94 @@ | ||
| import {Component, getAssetPath, h} from '@stencil/core'; | ||
| import {Component, State, h, getAssetPath} from '@stencil/core'; | ||
| import Container from 'typedi'; | ||
| import {NotificationEventTypes} from '../../../modules/notifications/event-types'; | ||
| import {EventBus} from '../../../services'; | ||
| import toolbarComponentStore from "../../../data/toolbar-component-store"; | ||
| import notificationService from '../../../modules/notifications/notification-service'; | ||
| import notificationStore from "../../../modules/notifications/notification-store"; | ||
|
|
||
| @Component({ | ||
| tag: 'elsa-workflow-toolbar', | ||
| assetsDirs: ['assets'] | ||
| }) | ||
| export class WorkflowToolbar { | ||
| @State() public modalState: boolean = false; | ||
| private readonly eventBus: EventBus; | ||
|
|
||
| static NotificationService = notificationService; | ||
|
|
||
| constructor() { | ||
| this.eventBus = Container.get(EventBus); | ||
| } | ||
|
|
||
| onNotificationClick = e => { | ||
| e.stopPropagation(); | ||
| this.eventBus.emit(NotificationEventTypes.Toggle, this); | ||
| // this.eventBus.emit(NotificationEventTypes.Toggle, this); | ||
| WorkflowToolbar.NotificationService.toogleNotification(); | ||
| this.modalState = !this.modalState; | ||
| }; | ||
|
|
||
| render() { | ||
| const {notifications, infoPanelBoolean} = notificationStore; | ||
| const logoPath = getAssetPath('./assets/logo.png'); | ||
|
|
||
| return ( | ||
| <nav class="bg-gray-800"> | ||
| <div class="mx-auto px-2 sm:px-6 lg:px-6"> | ||
| <div class="flex items-center h-16"> | ||
| <div class="flex-shrink-0"> | ||
| <div class="flex items-end space-x-1"> | ||
| <div> | ||
| <a href="#"><img class="h-6 w-6" src={logoPath} alt="Workflow"/></a> | ||
| </div> | ||
| <div> | ||
| <span class="text-gray-300 text-sm">elsa 3.0.0</span> | ||
| <div> | ||
| <nav class="bg-gray-800"> | ||
| <div class="mx-auto px-2 sm:px-6 lg:px-6"> | ||
|
|
||
| <div class="flex items-center h-16"> | ||
| <div class="flex-shrink-0"> | ||
| <div class="flex items-end space-x-1"> | ||
| <div> | ||
| <a href="#"><img class="h-6 w-6" src={logoPath} alt="Workflow"/></a> | ||
| </div> | ||
| <div> | ||
| <span class="text-gray-300 text-sm">elsa 3.0.0</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="flex-grow"></div> | ||
| <div class="relative flex items-center justify-end h-16"> | ||
| <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 z-40"> | ||
| {/* Notifications*/} | ||
| <button | ||
| onClick={e => this.onNotificationClick(e)} | ||
| type="button" | ||
| class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white mr-4" | ||
| > | ||
| <span class="sr-only">View notifications</span> | ||
| <svg class="h-6 w-6" xmlns="https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| <div class="flex-grow"></div> | ||
|
|
||
| {toolbarComponentStore.components.map(component => ( | ||
| <div class="flex-shrink-0 mr-4"> | ||
| {component()} | ||
| </div> | ||
| ))} | ||
| <div class="relative flex items-center justify-end h-16"> | ||
| <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 z-40"> | ||
| <div class="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 z-40"> | ||
| {/* Notifications*/} | ||
| <button | ||
| onClick={e => this.onNotificationClick(e)} | ||
| type="button" | ||
| class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white mr-4" | ||
| > | ||
| <span class="sr-only">View notifications</span> | ||
| <svg class="h-6 w-6" xmlns="https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" | ||
| /> | ||
| </svg> | ||
| </button> | ||
|
|
||
| {toolbarComponentStore.components.map(component => ( | ||
| <div class="flex-shrink-0 mr-4"> | ||
| {component()} | ||
| </div> | ||
| ))} | ||
|
|
||
| {/* Menu */} | ||
| <elsa-workflow-toolbar-menu/> | ||
| {/* Menu */} | ||
| <elsa-workflow-toolbar-menu/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| </nav> | ||
| <elsa-notifications-manager modalState={this.modalState}></elsa-notifications-manager> | ||
| {notifications && notifications.map(item => { | ||
| <elsa-awhile-notifications notification={item}></elsa-awhile-notifications> | ||
| })} | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 4 additions & 3 deletions
7
src/designer/elsa-workflows-designer/src/modules/notifications/models.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| export interface Notification { | ||
| message: string; | ||
| id: string; | ||
| export interface NotificationType { | ||
| id?: number | any; | ||
| title: string; | ||
| text: string; | ||
| } |
67 changes: 67 additions & 0 deletions
67
src/designer/elsa-workflows-designer/src/modules/notifications/notification-awhile.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import {Component, h, State, Prop, Watch} from "@stencil/core"; | ||
| import {NotificationType} from "./models"; | ||
|
|
||
| @Component({ | ||
| tag: 'elsa-awhile-notifications', | ||
| shadow: false, | ||
| styleUrl: '', | ||
| }) | ||
| export class NotificationAwhile { | ||
| @State() private isOpened = true; | ||
| @Prop() public notification: NotificationType; | ||
|
|
||
| @Watch('notification') | ||
| onNotificationChange(){ | ||
| console.log('sss') | ||
| } | ||
|
|
||
| componentDidRender() { | ||
| setTimeout(() => { | ||
| this.isOpened = false; | ||
| }, 6000) | ||
| } | ||
|
|
||
| render() { | ||
| console.log(this.notification); | ||
|
|
||
| const {title, text} = this.notification; | ||
|
|
||
| return ( | ||
| this.isOpened ? ( | ||
| <div class='flex w-full flex-col items-center space-y-4 sm:items-end z-30'> | ||
| <div | ||
| class="pointer-events-auto w-full max-w-sm rounded-lg z-50 bg-white shadow-lg ring-1 ring-black ring-opacity-5"> | ||
| <div class="p-4 z-30"> | ||
| <div class="flex items-start z-30"> | ||
| <div class="flex-shrink-0 z-30"> | ||
| <svg class="h-6 w-6 text-green-400 z-30" xmlns="https://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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> | ||
| </svg> | ||
| </div> | ||
| <div class="ml-3 w-0 flex-1 pt-0.5 z-30"> | ||
| <p class="text-sm font-medium text-gray-900">{title}</p> | ||
| <p class="mt-1 text-sm text-gray-500">{text}</p> | ||
| </div> | ||
| <div class="ml-4 flex flex-shrink-0 z-30"> | ||
| <button | ||
| type="button" | ||
| // onclick={() => console.log(id)} | ||
| class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"> | ||
| <span class="sr-only">Close</span> | ||
| <svg class="h-5 w-5" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20" | ||
| fill="currentColor" aria-hidden="true"> | ||
| <path | ||
| d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> ) | ||
| : null | ||
| ) | ||
| } | ||
| } |
Oops, something went wrong.