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

Update dashboard home page and login theme

Browse source
This commit is contained in:
Sipke Schoorstra 2022-12-21 21:52:11 +01:00
parent 3755ff3f4d
commit b99de4ab24
6 changed files with 68 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/designer/elsa-workflows-designer/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@elsa-workflows/elsa-workflows-designer",
"version": "3.0.2-preview.9",
"version": "3.0.2-preview.10",
"description": "A workflow designer for Elsa 3",
"main": "./dist/index.cjs.js",
"module": "./dist/index.js",

BIN
src/designer/elsa-workflows-designer/src/components/toolbar/workflow-toolbar/assets/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

68
src/designer/elsa-workflows-designer/src/components/toolbar/workflow-toolbar/workflow-toolbar.tsx
View file

@ -1,4 +1,4 @@
import {Component, h} from '@stencil/core';
import {Component, getAssetPath, h} from '@stencil/core';
import Container from 'typedi';
import {NotificationEventTypes} from '../../../modules/notifications/event-types';
import {EventBus} from '../../../services';
@ -6,6 +6,7 @@ import toolbarComponentStore from "../../../data/toolbar-component-store";
@Component({
tag: 'elsa-workflow-toolbar',
assetsDirs: ['assets']
})
export class WorkflowToolbar {
private readonly eventBus: EventBus;
@ -20,36 +21,51 @@ export class WorkflowToolbar {
};
render() {
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="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="http://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 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 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="http://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>
{/* Menu */}
<elsa-workflow-toolbar-menu/>
{toolbarComponentStore.components.map(component => (
<div class="flex-shrink-0 mr-4">
{component()}
</div>
))}
{/* Menu */}
<elsa-workflow-toolbar-menu/>
</div>
</div>
</div>
</div>

1
src/designer/elsa-workflows-designer/src/modules/home/components/assets/elsa-breaking-barriers-undraw.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

38
src/designer/elsa-workflows-designer/src/modules/home/components/home-page.tsx
View file

@ -16,24 +16,32 @@ export class HomePage {
render() {
const imageUrl = getAssetPath('./assets/elsa-anim.gif');
const visualPath = getAssetPath('./assets/elsa-breaking-barriers-undraw.svg');
return (
<div class="default-background h-full">
<div class="flex max-w-5xl mx-auto">
<div class="flex-grow">
<div class="ml-10 lg:py-24">
<h1 class="mt-4 text-4xl tracking-tight font-extrabold sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
<span class="block main-title-color">Elsa Workflows</span>
<span class="pb-3 block sm:pb-5 sub-title-color">3.0</span>
</h1>
<p class="text-base text-gray-800 sm:text-xl lg:text-lg xl:text-xl">
Decoding the future.
</p>
<div class="home-wrapper relative bg-gray-800 overflow-hidden h-screen">
<main class="mt-16 sm:mt-24">
<div class="mx-auto max-w-7xl">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
<div class="home-caption-wrapper">
<h1 class="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
<span class="md:block"> Welcome to <span class='text-blue-500 md:block'>Elsa Workflows</span> <span>3.0</span></span>
</h1>
<p class="tagline mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Use the dashboard to manage all the things.
</p>
</div>
</div>
<div class="mt-16 sm:mt-24 lg:mt-0 lg:col-span-6">
<div class="sm:max-w-md sm:w-full sm:mx-auto sm:rounded-lg sm:overflow-hidden">
<div class="px-4 py-8 sm:px-10">
<img class="home-visual" src={visualPath} alt="" width={400}/>
</div>
</div>
</div>
</div>
</div>
<div class="flex-shrink">
<img src={imageUrl} alt="Elsa Workflows - Decoding the future" width={750}/>
</div>
</div>
</main>
</div>
);
}

2
src/designer/elsa-workflows-designer/src/modules/login/components/login-page.tsx
View file

@ -73,7 +73,7 @@ export class LoginPage {
render() {
return <div>
<div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
<div class="flex min-h-full flex-col pt-20 bg-gray-800 h-screen">
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">