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

Incremental work on designer

Browse source
This commit is contained in:
Sipke Schoorstra 2020-11-09 22:18:18 +01:00
parent 207550db75
commit c0638f59c3
24 changed files with 813 additions and 396 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/dashboards/blazor/ElsaDashboard.Blazor/Client/Program.cs
View file

@ -1,11 +1,7 @@
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using ElsaDashboard.Blazor.Shared;
@ -17,8 +13,9 @@ namespace ElsaDashboard.Blazor.WebAssembly
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
var services =builder.Services;
services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}

1
src/dashboards/blazor/ElsaDashboard.Blazor/Server/BlazorServerStartup.cs
View file

@ -24,6 +24,7 @@ namespace ElsaDashboard.Blazor.Server
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddElsaDashboard();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

1
src/dashboards/blazor/ElsaDashboard.Blazor/Server/BlazorWebAssemblyStartup.cs
View file

@ -24,6 +24,7 @@ namespace ElsaDashboard.Blazor.Server
{
services.AddControllersWithViews();
services.AddRazorPages();
services.AddElsaDashboard();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

6
src/dashboards/blazor/ElsaDashboard.Blazor/Server/Pages/_Host.cshtml
View file

@ -18,9 +18,10 @@
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="/tailwind.css">
<link href="ElsaDashboard.Blazor.Server.styles.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
<script src="https://cdn.jsdelivr.net/npm/@@ryangjchandler/spruce@2.0.1/dist/spruce.umd.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js"></script>
</head>
<body class="antialiased font-sans bg-gray-200 overflow-hidden">
<body class="antialiased font-sans bg-gray-200">
@if (Program.UseBlazorServer)
{
<component type="typeof(App)" render-mode="@Program.RenderMode"/>
@ -51,5 +52,6 @@ else
{
<script src="_framework/blazor.webassembly.js"></script>
}
<script src="_content/ElsaDashboard.Blazor.Shared/store.js"></script>
</body>
</html>

21
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/index.html
View file

@ -12,18 +12,17 @@
<link rel="stylesheet" href="/tailwind.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
</head><body class="antialiased font-sans bg-gray-200">
<div class="" style="">
<div>
<div style="min-height: 640px;">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
<div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
<div class="fixed inset-0 flex z-40">
<div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
<div class="absolute top-0 right-0 -mr-14 p-1">
<button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
@ -104,9 +103,9 @@
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="h-0 flex-1 flex flex-col overflow-y-auto">
<!-- User account dropdown -->
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
<button @click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<div class="flex w-full justify-between items-center">
<div class="flex min-w-0 items-center justify-between space-x-3">
<img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
@ -216,7 +215,7 @@
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<!-- Search header -->
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." @click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h8m-8 6h16"></path>
</svg>
@ -237,9 +236,9 @@
</div>
<div class="flex items-center">
<!-- Profile dropdown -->
<div @click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div>
<button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
</button>
</div>
@ -274,6 +273,6 @@
</div>
</div>
</div>
<div style="clear: both; display: block; height: 0px;"></div>
<div style="clear: both; display: block; height: 0;"></div>
</body>
</html>

32
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-designer.html
View file

@ -14,18 +14,17 @@
<link rel="stylesheet" href="/tailwind.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
</head><body class="antialiased font-sans bg-gray-200">
<div class="" style="">
<div>
<div style="min-height: 640px;">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
<div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
<div class="fixed inset-0 flex z-40">
<div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
<div class="absolute top-0 right-0 -mr-14 p-1">
<button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
@ -106,9 +105,9 @@
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="h-0 flex-1 flex flex-col overflow-y-auto">
<!-- User account dropdown -->
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
<button @click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<div class="flex w-full justify-between items-center">
<div class="flex min-w-0 items-center justify-between space-x-3">
<img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
@ -218,7 +217,7 @@
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<!-- Search header -->
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." @click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h8m-8 6h16"></path>
</svg>
@ -239,9 +238,9 @@
</div>
<div class="flex items-center">
<!-- Profile dropdown -->
<div @click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div>
<button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
</button>
</div>
@ -283,13 +282,12 @@
</span>
</div>
</div>
<div class="relative">
<div id="workflow-canvas" class="flex-1 flex">
<div class="flex-1 text-gray-200">
<div class="p-10">
<div class="canvas">
<div class="canvas select-none">
<div class="tree">
<ul>
<li>
@ -1225,9 +1223,9 @@
</div>
</div>
</div>
<div x-show="open" x-data="{ open: true }" @keydown.window.escape="open = false" class="fixed inset-0 overflow-hidden">
<div x-show="open" x-data="{ open: true }" x-on:keydown.window.escape="open = false" class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<section @click.away="open = false" class="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<section x-on:click.away="open = false" class="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<div class="w-screen max-w-2xl" x-description="Slide-over panel, show/hide based on slide-over state." x-show="open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
<div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
<div class="flex-1">
@ -1243,7 +1241,7 @@
</p>
</div>
<div class="h-7 flex items-center">
<button @click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
<button x-on:click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
<svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
@ -1430,14 +1428,12 @@
</div>
</div>
</main>
</div>
</div>
</div>
</div>
<div style="clear: both; display: block; height: 0px;"></div>
<div style="clear: both; display: block; height: 0;"></div>
</body>
</html>

21
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-instances.html
View file

@ -12,18 +12,17 @@
<link rel="stylesheet" href="/tailwind.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
</head><body class="antialiased font-sans bg-gray-200">
<div class="" style="">
<div>
<div style="min-height: 640px;">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
<div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
<div class="fixed inset-0 flex z-40">
<div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
<div class="absolute top-0 right-0 -mr-14 p-1">
<button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
@ -104,9 +103,9 @@
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="h-0 flex-1 flex flex-col overflow-y-auto">
<!-- User account dropdown -->
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
<button @click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<div class="flex w-full justify-between items-center">
<div class="flex min-w-0 items-center justify-between space-x-3">
<img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
@ -216,7 +215,7 @@
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<!-- Search header -->
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." @click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h8m-8 6h16"></path>
</svg>
@ -237,9 +236,9 @@
</div>
<div class="flex items-center">
<!-- Profile dropdown -->
<div @click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div>
<button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
</button>
</div>
@ -503,6 +502,6 @@
</div>
</div>
</div>
<div style="clear: both; display: block; height: 0px;"></div>
<div style="clear: both; display: block; height: 0;"></div>
</body>
</html>

21
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflows.html
View file

@ -12,18 +12,17 @@
<link rel="stylesheet" href="/tailwind.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
</head><body class="antialiased font-sans bg-gray-200">
<div class="" style="">
<div>
<div style="min-height: 640px;">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
<div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
<div class="fixed inset-0 flex z-40">
<div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
<div class="absolute top-0 right-0 -mr-14 p-1">
<button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
@ -104,9 +103,9 @@
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="h-0 flex-1 flex flex-col overflow-y-auto">
<!-- User account dropdown -->
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
<button @click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<div class="flex w-full justify-between items-center">
<div class="flex min-w-0 items-center justify-between space-x-3">
<img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
@ -216,7 +215,7 @@
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<!-- Search header -->
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." @click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h8m-8 6h16"></path>
</svg>
@ -237,9 +236,9 @@
</div>
<div class="flex items-center">
<!-- Profile dropdown -->
<div @click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div>
<button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
</button>
</div>
@ -514,6 +513,6 @@
</div>
</div>
</div>
<div style="clear: both; display: block; height: 0px;"></div>
<div style="clear: both; display: block; height: 0;"></div>
</body>
</html>

6
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/flyoutpanel.html
View file

@ -1,6 +1,6 @@
<div x-show="open" x-data="{ open: true }" @keydown.window.escape="open = false" class="fixed inset-0 overflow-hidden">
<div x-show="open" x-data="{ open: true }" x-on:keydown.window.escape="open = false" class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<section @click.away="open = false" class="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<section x-on:click.away="open = false" class="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<div class="w-screen max-w-2xl" x-description="Slide-over panel, show/hide based on slide-over state." x-show="open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
<div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
<div class="flex-1">
@ -16,7 +16,7 @@
</p>
</div>
<div class="h-7 flex items-center">
<button @click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
<button x-on:click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
<svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>

13
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/layout.html
View file

@ -12,16 +12,15 @@
<link rel="stylesheet" href="/tailwind.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
<body class="antialiased font-sans bg-gray-200">
<div class="" style="">
<div>
<div style="min-height: 640px;">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
<module href="navmenu.html"></module>
<!-- Main column -->
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<!-- Search header -->
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." @click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h8m-8 6h16"></path>
</svg>
@ -42,9 +41,9 @@
</div>
<div class="flex items-center">
<!-- Profile dropdown -->
<div @click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div>
<button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
</button>
</div>
@ -77,6 +76,6 @@
</div>
</div>
</div>
<div style="clear: both; display: block; height: 0px;"></div>
<div style="clear: both; display: block; height: 0;"></div>
</body>
</html>

8
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/navmenu.html
View file

@ -1,11 +1,11 @@
<div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
<div class="fixed inset-0 flex z-40">
<div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
<div class="absolute top-0 right-0 -mr-14 p-1">
<button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
@ -86,9 +86,9 @@
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="h-0 flex-1 flex flex-col overflow-y-auto">
<!-- User account dropdown -->
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
<button @click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<div class="flex w-full justify-between items-center">
<div class="flex min-w-0 items-center justify-between space-x-3">
<img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">

5
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflow-designer.html
View file

@ -15,13 +15,12 @@
</span>
</div>
</div>
<div class="relative">
<div id="workflow-canvas" class="flex-1 flex">
<div class="flex-1 text-gray-200">
<div class="p-10">
<div class="canvas">
<div class="canvas select-none">
<div class="tree">
<ul>
<li>
@ -185,8 +184,6 @@
</div>
<module href="./src/partials/flyoutpanel.html"></module>
</div>
</module>
<script>

5
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ElsaDashboard.Blazor.Shared.csproj
View file

@ -15,4 +15,9 @@
<SupportedPlatform Remove="Android" />
<SupportedPlatform Remove="Windows" />
</ItemGroup>
<ItemGroup>
<None Include="wwwroot\flyoutPanel.js" />
<None Include="wwwroot\workflowDesigner.js" />
</ItemGroup>
</Project>

13
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Extensions/ServiceCollectionExtensions.cs Normal file
View file

@ -0,0 +1,13 @@
using ElsaDashboard.Blazor.Shared.Services;
// ReSharper disable once CheckNamespace
namespace Microsoft.Extensions.DependencyInjection
{
public static class ServiceCollectionExtensions
{
public static IServiceCollection AddElsaDashboard(this IServiceCollection services)
{
return services.AddScoped<IFlyoutPanelService, FlyoutPanelService>();
}
}
}

110
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer.razor
View file

@ -1,110 +0,0 @@
@page "/designer"
<div class="flex-0 border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
<div class="flex-1 min-w-0">
<h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
Workflow Editor
</h1>
</div>
<div class="mt-4 flex sm:mt-0 sm:ml-4">
<span class="order-0 sm:order-1 sm:ml-3 shadow-sm rounded-md">
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 hover:bg-blue-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-700 active:bg-blue-700 transition duration-150 ease-in-out">
Publish
</button>
</span>
</div>
</div>
<div id="workflow-canvas" class="flex-1 flex">
<div class="flex-1 text-gray-200">
<div class="p-10">
<div class="canvas mx-auto">
<ul>
<li>
<div x-data="{ open: false }"
x-on:keydown.escape="open = false"
x-on:click.away="open = false"
class="box border-2 border-solid border-white rounded bg-white text-left text-black text-lg relative hover:border-blue-600 select-none">
<div class="p-5 border-b border-b-solid">
<div class="flex justify-between">
<div class="flex-shrink-0">
<svg class="h-10 w-10 text-blue-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="12" cy="12" r="9"/>
<polyline points="12 7 12 12 15 15"/>
</svg>
</div>
<div class="flex-1 font-medium leading-8 ml-2">
<p>Timer</p>
</div>
<div class="flex-shrink-0">
<button x-on:click="open = !open" aria-haspopup="true" class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
<svg class="h-6 w-6 text-gray-400" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="5" cy="12" r="1"/>
<circle cx="12" cy="12" r="1"/>
<circle cx="19" cy="12" r="1"/>
</svg>
</button>
<div x-show="open"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="z-10 mx-3 origin-top-left absolute -right-48 top-3 w-48 mt-1 rounded-md shadow-lg">
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="pinned-project-options-menu-0">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Edit</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
Removed
from pinned
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 text-gray-400 text-sm">
Every <a href="#" class="font-medium border-b border-solid border-gray-200 text-black">5 minutes</a>
</div>
</div>
</li>
<li>
<ul class="children">
<li>
<div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="manager1">
<p>Manager 1</p>
</div>
</li>
<li>
<div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="manager2">
<p>Manager 2</p>
</div>
</li>
</ul>
</li>
<li>
<ul class="children">
<li>
<div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="child1">
<p>Child 1</p>
</div>
</li>
<li>
<div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="child2">
<p>Child 2</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

63
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Activity.razor Normal file
View file

@ -0,0 +1,63 @@
<div x-data="{ open: false }"
x-on:keydown.escape="open = false"
x-on:click.away="open = false"
id="@ActivityId"
class="activity border-2 border-solid border-white rounded bg-white text-left text-black text-lg hover:border-blue-600 select-none max-w-md shadow-sm"
@onclick="OnClick">
<div class="p-5 border-b border-b-solid">
<div class="flex justify-between space-x-8">
<div class="flex-shrink-0">
<svg class="h-10 w-10 text-blue-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="12" cy="12" r="9"/>
<polyline points="12 7 12 12 15 15"/>
</svg>
</div>
<div class="flex-1 font-medium leading-8">
<p>Activity</p>
</div>
<div class="flex-shrink-0">
<button x-on:click="open = !open" aria-haspopup="true" class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
<svg class="h-6 w-6 text-gray-400" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="5" cy="12" r="1"/>
<circle cx="12" cy="12" r="1"/>
<circle cx="19" cy="12" r="1"/>
</svg>
</button>
<div x-show="open"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="z-10 mx-3 origin-top-left absolute -right-48 top-3 w-48 mt-1 rounded-md shadow-lg">
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="pinned-project-options-menu-0">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Edit</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
Removed
from pinned
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 text-gray-400 text-sm">
Every <a href="#" class="font-medium border-b border-solid border-gray-200 text-black">5 minutes</a>
</div>
</div>
@code {
[Parameter]
public string ActivityId { get; set; }
}

11
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Activity.razor.cs Normal file
View file

@ -0,0 +1,11 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace ElsaDashboard.Blazor.Shared.Pages.Designer
{
partial class Activity
{
[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }
}
}

184
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Designer.razor Normal file
View file

@ -0,0 +1,184 @@
@implements IAsyncDisposable
@page "/designer"
<div class="flex-0 border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
<div class="flex-1 min-w-0">
<h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
Workflow Editor
</h1>
</div>
<div class="mt-4 flex sm:mt-0 sm:ml-4">
<span class="order-0 sm:order-1 sm:ml-3 shadow-sm rounded-md">
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 hover:bg-blue-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-700 active:bg-blue-700 transition duration-150 ease-in-out">
Publish
</button>
</span>
</div>
</div>
<div class="relative">
<div id="workflow-canvas" class="flex-1 flex">
<div class="flex-1 text-gray-200">
<div class="p-10">
<div class="canvas select-none">
<div class="tree">
<ul>
<li>
<Activity ActivityId="activity-1" OnClick="@(async e => await OnActivityClick(e))" />
<ul>
<li>
<Activity ActivityId="activity-2" />
<ul>
<li>
<Activity ActivityId="activity-3" />
<ul>
<li>
<div class="blockcondition blockyes ">
<span style="padding: 6px;">Yes</span>
</div>
<ul>
<li>
<Activity ActivityId="activity-4a" />
<ul>
<li>
<Activity ActivityId="activity-5" />
<ul>
<li>
<div class="blockcondition blockno ">
<span style="padding: 6px;">No</span>
</div>
<ul>
<li>
<Activity ActivityId="activity-6" />
</li>
</ul>
</li>
<li>
<div class="blockcondition blockyes ">
<span style="padding: 6px;">Yes</span>
</div>
<ul>
<li>
<Activity ActivityId="activity-7" />
<ul>
<li>
<div class="blockcondition blockyes ">
<span style="padding: 6px;">Yes</span>
</div>
<ul>
<li>
<Activity ActivityId="activity-8" />
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="blockcondition blockno ">
<span style="padding: 6px;">No</span>
</div>
<ul>
<li>
<Activity ActivityId="activity-4b" />
<ul>
<li>
<module href="./src/partials/activity.html"></module>
<ul>
<li>
<div class="blockcondition blockno ">
<span style="padding: 6px;">No</span>
</div>
<ul>
<li>
<Activity ActivityId="activity-9" />
<ul>
<li>
<div class="blockcondition blockyes ">
<span style="padding: 6px;">Yes</span>
</div>
<ul>
<li>
<Activity ActivityId="activity-10" />
<ul>
<li>
<Activity ActivityId="activity-11" />
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="blockcondition blockyes ">
<span style="padding: 6px;">Yes</span>
</div>
<ul>
<li>
<Activity ActivityId="activity-12" />
<ul>
<li>
<div class="blockcondition blockyes ">
<span style="padding: 6px;">Yes</span>
</div>
<ul>
<li>
<Activity ActivityId="activity-13" />
<ul>
<li>
<div class="blockcondition blockyes ">
<span style="padding: 6px;">+</span>
</div>
<ul>
<li>
<Activity ActivityId="activity-14" />
<ul>
<li>
<Activity ActivityId="activity-15" />
<ul>
<li>
<Activity ActivityId="activity-16" />
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<FlyoutPanel/>
</div>

35
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Designer.razor.cs Normal file
View file

@ -0,0 +1,35 @@
using System;
using System.Threading.Tasks;
using ElsaDashboard.Blazor.Shared.Services;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;
namespace ElsaDashboard.Blazor.Shared.Pages.Designer
{
partial class Designer
{
[Inject] private IJSRuntime JS { get; set; } = default!;
[Inject] private IFlyoutPanelService FlyoutPanelService { get; set; } = default!;
private IJSObjectReference _designerModule;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
_designerModule = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/ElsaDashboard.Blazor.Shared/workflowDesigner.js");
}
}
public async ValueTask DisposeAsync()
{
if(_designerModule != null)
await _designerModule.DisposeAsync();
}
private async ValueTask OnActivityClick(MouseEventArgs e)
{
await FlyoutPanelService.ShowAsync();
}
}
}

40
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Services/FlyoutPanelService.cs Normal file
View file

@ -0,0 +1,40 @@
using System;
using System.Threading.Tasks;
using Microsoft.JSInterop;
namespace ElsaDashboard.Blazor.Shared.Services
{
public class FlyoutPanelService : IFlyoutPanelService, IAsyncDisposable
{
private readonly IJSRuntime _jsRuntime;
private IJSObjectReference _module;
public FlyoutPanelService(IJSRuntime jsRuntime)
{
_jsRuntime = jsRuntime;
}
public async ValueTask ShowAsync()
{
await InitModuleAsync();
await _module.InvokeVoidAsync("show");
}
public async ValueTask HideAsync()
{
await InitModuleAsync();
await _module.InvokeVoidAsync("hide");
}
public async ValueTask DisposeAsync()
{
if (_module != null)
await _module.DisposeAsync();
}
private async Task InitModuleAsync()
{
_module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/ElsaDashboard.Blazor.Shared/flyoutPanel.js");
}
}
}

10
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Services/IFlyoutPanelService.cs Normal file
View file

@ -0,0 +1,10 @@
using System.Threading.Tasks;
namespace ElsaDashboard.Blazor.Shared.Services
{
public interface IFlyoutPanelService
{
ValueTask ShowAsync();
ValueTask HideAsync();
}
}

289
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/FlyoutPanel.razor
View file

@ -1,164 +1,203 @@
<div x-data="{open: true}">
<section x-on:click.away="open = false;" class="absolute inset-y-0 pl-16 max-w-full right-0 flex">
<div class="w-screen max-w-md" x-description="Slide-over panel, show/hide based on slide-over state." x-show="open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
<div class="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
<div class="flex-1 h-0 overflow-y-auto">
<header class="space-y-1 py-6 px-4 bg-indigo-700 sm:px-6">
<div class="flex items-center justify-between space-x-3">
<h2 class="text-lg leading-7 font-medium text-white">
New Project
</h2>
<div class="h-7 flex items-center">
<button x-on:click="open = false;" aria-label="Close panel" class="text-indigo-200 hover:text-white transition ease-in-out duration-150">
<svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<div>
<p class="text-sm leading-5 text-indigo-300">
Get started by filling in the information below to create your new project.
</p>
</div>
</header>
<div class="flex-1 flex flex-col justify-between">
<div class="px-4 divide-y divide-gray-200 sm:px-6">
<div class="space-y-6 pt-6 pb-5">
<div x-show="$store.flyoutPanel.show" x-data="{ open: false }" x-on:keydown.window.escape="$store.flyoutPanel.show = false" class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<section x-on:click.away="$store.flyoutPanel.show = false" class="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<div class="w-screen max-w-2xl" x-description="Slide-over panel, show/hide based on slide-over state." x-show="$store.flyoutPanel.show == true" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
<div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
<div class="flex-1">
<!-- Header -->
<header class="px-4 py-6 bg-gray-50 sm:px-6">
<div class="flex items-start justify-between space-x-3">
<div class="space-y-1">
<label for="project_name" class="block text-sm font-medium leading-5 text-gray-900">
<h2 class="text-lg leading-7 font-medium text-gray-900">
New project
</h2>
<p class="text-sm text-gray-500 leading-5">
Get started by filling in the information below to create your new project.
</p>
</div>
<div class="h-7 flex items-center">
<button x-on:click="$store.flyoutPanel.show = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
<svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</header>
<!-- Divider container -->
<div class="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<!-- Project name -->
<div class="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label for="project_name" class="block text-sm font-medium leading-5 text-gray-900 sm:mt-px sm:pt-2">
Project name
</label>
<div class="relative rounded-md shadow-sm">
<input id="project_name" class="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150">
</div>
<div class="sm:col-span-2">
<div class="rounded-md shadow-sm">
<input id="project_name" class="form-input block w-full sm:text-sm sm:leading-5" placeholder="">
</div>
</div>
<div class="space-y-1">
<label for="description" class="block text-sm font-medium leading-5 text-gray-900">
</div>
<!-- Project description -->
<div class="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label for="project_description" class="block text-sm font-medium leading-5 text-gray-900 sm:mt-px sm:pt-2">
Description
</label>
<div class="relative rounded-md shadow-sm">
<textarea id="description" rows="4" class="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"></textarea>
</div>
<div class="sm:col-span-2">
<div class="flex rounded-md shadow-sm">
<textarea id="project_description" rows="3" class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
</div>
</div>
<div class="space-y-2">
</div>
<!-- Team members -->
<div class="space-y-2 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-center sm:px-6 sm:py-5">
<div>
<h3 class="text-sm font-medium leading-5 text-gray-900">
Team Members
</h3>
<div>
<div class="flex space-x-2">
<a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
</a>
<a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Sally Preston">
</a>
<a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80" alt="Dave Gusman">
</a>
<a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Cook">
</a>
<a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1586297098710-0382a496c814?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.5&amp;w=256&amp;h=256&amp;q=80" alt="Brandon Rogers">
</a>
<button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-dashed border-gray-200 text-gray-400 hover:text-gray-500 hover:border-gray-300 focus:text-gray-500 focus:border-gray-300 focus:outline-none transition ease-in-out duration-150" aria-label="Add team member">
<svg class="h-5 w-5" x-description="Heroicon name: plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
<div class="sm:col-span-2">
<div class="flex space-x-2">
<a href="#" class="flex-shrink-0 rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
</a>
<a href="#" class="flex-shrink-0 rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
</a>
<a href="#" class="flex-shrink-0 rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
</a>
<a href="#" class="flex-shrink-0 rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
</a>
<a href="#" class="flex-shrink-0 rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
<img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1586297098710-0382a496c814?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
</a>
<button type="button" class="flex-shrink-0 inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-dashed border-gray-200 text-gray-400 hover:text-gray-500 hover:border-gray-300 focus:text-gray-500 focus:border-gray-300 focus:outline-none transition ease-in-out duration-150" aria-label="Add team member">
<svg class="h-5 w-5" x-description="Heroicon name: plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
<fieldset class="space-y-2">
<legend class="text-sm leading-5 font-medium text-gray-900">
Privacy
</legend>
<div class="space-y-5">
<div class="relative flex items-start">
<div class="absolute flex items-center h-5">
<input id="privacy_public" aria-describedby="privacy_public_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
</div>
<div class="pl-7 text-sm leading-5">
<label for="privacy_public" class="font-medium text-gray-900">
Public access
</label>
<p id="privacy_public_description" class="text-gray-500">
Everyone with the link will see this project.
</p>
</div>
</div>
<div>
</div>
<!-- Privacy -->
<fieldset>
<div class="space-y-2 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:px-6 sm:py-5">
<div>
<legend class="text-sm leading-5 font-medium text-gray-900">
Privacy
</legend>
</div>
<div class="space-y-5 sm:col-span-2">
<div class="space-y-5 sm:mt-0">
<div class="relative flex items-start">
<div class="absolute flex items-center h-5">
<input id="privacy_private-to-project" aria-describedby="privacy_private-to-project_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
<input id="public_access" aria-describedby="public_access_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" checked="">
</div>
<div class="pl-7 text-sm leading-5">
<label for="privacy_private-to-project" class="font-medium text-gray-900">
Private to project members
<label for="public_access" class="font-medium text-gray-900">
Public access
</label>
<p id="privacy_private-to-project_description" class="text-gray-500">
Only members of this project would be able to access.
<p id="public_access_description" class="text-gray-500">
Everyone with the link will see this project
</p>
</div>
</div>
</div>
<div>
<div class="relative flex items-start">
<div class="absolute flex items-center h-5">
<input id="privacy_private" aria-describedby="privacy_private-to-project_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
<input id="restricted_access" aria-describedby="restricted_access_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
</div>
<div class="pl-7 text-sm leading-5">
<label for="privacy_private" class="font-medium text-gray-900">
<label for="restricted_access" class="font-medium text-gray-900">
Private to Project Members
</label>
<p id="restricted_access_description" class="text-gray-500">
Only members of this project would be able to access
</p>
</div>
</div>
<div class="relative flex items-start">
<div class="absolute flex items-center h-5">
<input id="private_access" aria-describedby="private_access_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
</div>
<div class="pl-7 text-sm leading-5">
<label for="private_access" class="font-medium text-gray-900">
Private to you
</label>
<p id="privacy_private_description" class="text-gray-500">
You are the only one able to access this project.
<p id="private_access_description" class="text-gray-500">
You are the only one able to access this project
</p>
</div>
</div>
</div>
<hr class="border-gray-200">
<div class="flex flex-col space-between space-y-4 sm:flex-row sm:items-center sm:space-between sm:space-y-0">
<div class="flex-1">
<a href="#" class="group flex items-center text-sm leading-5 text-indigo-600 hover:text-indigo-900 focus:text-indigo-900 font-medium space-x-2.5">
<svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-900 group-focus:text-indigo-900" x-description="Heroicon name: link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path>
</svg>
<span>
Copy link
</span>
</a>
</div>
<div>
<a href="#" class="group flex items-center text-sm leading-5 text-gray-500 hover:text-gray-900 focus:text-gray-900 space-x-2.5">
<svg class="h-5 w-5 text-gray-400 group-hover:text-gray-500" x-description="Heroicon name: question-mark-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg>
<span>
Learn more about sharing
</span>
</a>
</div>
</div>
</div>
</fieldset>
</div>
<div class="space-y-4 pt-4 pb-6">
<div class="flex text-sm leading-5">
<a href="#" class="group space-x-2 inline-flex items-center font-medium text-indigo-600 hover:text-indigo-900 transition ease-in-out duration-150">
<svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-900 transition ease-in-out duration-150" x-description="Heroicon name: link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path>
</svg>
<span>
Copy link
</span>
</a>
</div>
<div class="flex text-sm leading-5">
<a href="#" class="group space-x-2 inline-flex items-center text-gray-500 hover:text-gray-900 transition ease-in-out duration-150">
<svg class="h-5 w-5 text-gray-400 group-hover:text-gray-500 transition ease-in-out duration-150" x-description="Heroicon name: question-mark-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg>
<span>
Learn more about sharing
</span>
</a>
</div>
</div>
</fieldset>
</div>
</div>
<!-- Action buttons -->
<div class="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
<div class="space-x-3 flex justify-end">
<span class="inline-flex rounded-md shadow-sm">
<button type="button" class="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
Cancel
</button>
</span>
<span class="inline-flex rounded-md shadow-sm">
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
Create
</button>
</span>
</div>
</div>
</div>
<div class="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
<span class="inline-flex rounded-md shadow-sm">
<button x-on:click="open = false; setTimeout(() => open = true, 1000);" type="button" class="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
Cancel
</button>
</span>
<span class="inline-flex rounded-md shadow-sm">
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
Save
</button>
</span>
</div>
</div>
</div>
</section>
</section>
</div>
</div>

63
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/MainLayout.razor
View file

@ -1,24 +1,67 @@
@inherits LayoutComponentBase
<div>
<div style="min-height: 640px;" class="bg-gray-100">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-keydown.window.escape="sidebarOpen = false">
<div style="min-height: 640px;">
<div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
<NavMenu/>
<!-- Main column -->
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
<button x-on:click.stop="sidebarOpen = true" class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:bg-gray-200 transition ease-in-out duration-150" aria-label="Open sidebar">
<svg class="h-6 w-6" x-description="Heroicon name: menu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<!-- Search header -->
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
<button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
<svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h8m-8 6h16"></path>
</svg>
</button>
<div class="flex-1 flex justify-between px-4 sm:px-6 lg:px-8">
<div class="flex-1 flex">
<form class="w-full flex md:ml-0" action="#" method="GET">
<label for="search_field" class="sr-only">Search</label>
<div class="relative w-full text-gray-400 focus-within:text-gray-600">
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"></path>
</svg>
</div>
<input id="search_field" class="block w-full h-full pl-8 pr-3 py-2 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 sm:text-sm" placeholder="Search" type="search">
</div>
</form>
</div>
<div class="flex items-center">
<!-- Profile dropdown -->
<div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
<div>
<button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
</button>
</div>
<div x-show="open" x-description="Profile dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg" style="display: none;">
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">View profile</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Settings</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Notifications</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Get desktop app</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Support</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Logout</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<main class="flex flex-1 flex-col relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
<main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
@Body
</main>
</div>
<FlyoutPanel/>
</div>
</div>
</div>
<div style="clear: both; display: block; height: 0px;"></div>
<div style="clear: both; display: block; height: 0;"></div>

242
src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/NavMenu.razor
View file

@ -1,102 +1,196 @@
@inherits LayoutComponentBase
<div x-show="sidebarOpen" class="md:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." style="display: none;">
<div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
<div class="fixed inset-0 flex z-40">
<div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
<div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full bg-white" style="display: none;">
<div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
<div class="absolute top-0 right-0 -mr-14 p-1">
<button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
<button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
<div class="flex-shrink-0 flex items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-logo-purple-on-white.svg" alt="Workflow">
</div>
<nav class="mt-5 px-2 space-y-1">
@foreach (var menuItem in MenuItems)
{
<NavLink href="@menuItem.Url"
class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md focus:outline-none transition ease-in-out duration-150 text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:text-gray-900 focus:bg-gray-50"
ActiveClass="text-gray-900 bg-gray-50 text-gray-900 bg-gray-50 text-gray-900 bg-gray-100 hover:bg-gray-100 focus:bg-gray-200">
<svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="@menuItem.Icon"></path>
</svg>
@menuItem.Text
</NavLink>
}
</nav>
<div class="flex-shrink-0 flex items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-logo-purple-on-white.svg" alt="Workflow">
</div>
<div class="flex-shrink-0 flex border-t border-gray-200 p-4">
<a href="#" class="flex-shrink-0 group block focus:outline-none">
<div class="flex items-center">
<div>
<img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
</div>
<div class="ml-3">
<p class="text-base leading-6 font-medium text-gray-700 group-hover:text-gray-900">
Tom Cook
</p>
<p class="text-sm leading-5 font-medium text-gray-500 group-hover:text-gray-700 group-focus:underline transition ease-in-out duration-150">
View profile
</p>
<div class="mt-5 flex-1 h-0 overflow-y-auto">
<nav class="px-2">
<div class="space-y-1">
<a href="#" class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-900 bg-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-200 focus:outline-none transition ease-in-out duration-150">
<svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: home" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
Home
</a>
<a href="#" class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none transition ease-in-out duration-150">
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: view-list" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
</svg>
My tasks
</a>
<a href="#" class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none transition ease-in-out duration-150">
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: clock" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
Recent
</a>
</div>
<div class="mt-8">
<h3 class="px-3 text-xs leading-4 font-semibold text-gray-500 uppercase tracking-wider" id="teams-headline">
Teams
</h3>
<div class="mt-1 space-y-1" role="group" aria-labelledby="teams-headline">
<a href="#" class="group flex items-center px-3 py-2 text-base leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
<span class="w-2.5 h-2.5 mr-4 bg-indigo-500 rounded-full"></span>
<span class="truncate">
Engineering
</span>
</a>
<a href="#" class="group flex items-center px-3 py-2 text-base leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
<span class="w-2.5 h-2.5 mr-4 bg-teal-400 rounded-full"></span>
<span class="truncate">
Human Resources
</span>
</a>
<a href="#" class="group flex items-center px-3 py-2 text-base leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
<span class="w-2.5 h-2.5 mr-4 bg-orange-500 rounded-full"></span>
<span class="truncate">
Customer Success
</span>
</a>
</div>
</div>
</a>
</nav>
</div>
</div>
<div class="flex-shrink-0 w-14">
<!-- Force sidebar to shrink to fit close icon -->
<!-- Dummy element to force sidebar to shrink to fit close icon -->
</div>
</div>
</div>
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64">
<div class="hidden lg:flex lg:flex-shrink-0">
<div class="flex flex-col w-64 border-r border-gray-200 pt-5 pb-4 bg-gray-100">
<div class="flex items-center flex-shrink-0 px-6">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-logo-purple-on-white.svg" alt="Workflow">
</div>
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
<div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-logo-purple-on-white.svg" alt="Workflow">
</div>
<nav class="mt-5 flex-1 px-2 bg-white space-y-1">
@{ var match = NavLinkMatch.All; }
@foreach (var menuItem in MenuItems)
{
<NavLink href="@menuItem.Url"
class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md hover:text-gray-900 focus:outline-none transition ease-in-out duration-150 text-gray-600 hover:bg-gray-50 focus:text-gray-900 focus:bg-gray-50"
Match="match"
ActiveClass="text-gray-900 bg-gray-100 hover:bg-gray-100 focus:bg-gray-200">
<svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="@menuItem.Icon"></path>
<div class="h-0 flex-1 flex flex-col overflow-y-auto">
<!-- User account dropdown -->
<div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
<div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
<button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
<div class="flex w-full justify-between items-center">
<div class="flex min-w-0 items-center justify-between space-x-3">
<img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
<div class="flex-1 min-w-0">
<h2 class="text-gray-900 text-sm leading-5 font-medium truncate">Jessy Schwarz</h2>
<p class="text-gray-500 text-sm leading-5 truncate">@@jessyschwarz</p>
</div>
</div>
<svg class="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" x-description="Heroicon name: selector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
@menuItem.Text
</NavLink>
match = NavLinkMatch.Prefix;
}
</nav>
</div>
<div class="flex-shrink-0 flex border-t border-gray-200 p-4">
<a href="#" class="flex-shrink-0 w-full group block">
<div class="flex items-center">
<div>
<img class="inline-block h-9 w-9 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
</div>
<div class="ml-3">
<p class="text-sm leading-5 font-medium text-gray-700 group-hover:text-gray-900">
Tom Cook
</p>
<p class="text-xs leading-4 font-medium text-gray-500 group-hover:text-gray-700 transition ease-in-out duration-150">
View profile
</p>
</button>
</div>
<div x-show="open" x-description="Dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="z-10 mx-3 origin-top absolute right-0 left-0 mt-1 rounded-md shadow-lg" style="display: none;">
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">View profile</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Settings</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Notifications</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Get desktop app</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Support</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Logout</a>
</div>
</div>
</a>
</div>
</div>
<!-- Sidebar Search -->
<div class="px-3 mt-5">
<label for="search" class="sr-only">Search</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="mr-3 h-4 w-4 text-gray-400" x-description="Heroicon name: search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</div>
<input id="search" class="form-input block w-full pl-9 sm:text-sm sm:leading-5" placeholder="Search">
</div>
</div>
<!-- Navigation -->
<nav class="px-3 mt-6">
<div class="space-y-1">
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-900 bg-gray-200 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
<svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: home" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
Home
</a>
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: view-list" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
</svg>
My tasks
</a>
<a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
<svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: clock" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
Recent
</a>
</div>
<div class="mt-8">
<!-- Secondary navigation -->
<h3 class="px-3 text-xs leading-4 font-semibold text-gray-500 uppercase tracking-wider" id="teams-headline">
Teams
</h3>
<div class="mt-1 space-y-1" role="group" aria-labelledby="teams-headline">
<a href="#" class="group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
<span class="w-2.5 h-2.5 mr-4 bg-indigo-500 rounded-full"></span>
<span class="truncate">
Engineering
</span>
</a>
<a href="#" class="group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
<span class="w-2.5 h-2.5 mr-4 bg-teal-400 rounded-full"></span>
<span class="truncate">
Human Resources
</span>
</a>
<a href="#" class="group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
<span class="w-2.5 h-2.5 mr-4 bg-orange-500 rounded-full"></span>
<span class="truncate">
Customer Success
</span>
</a>
</div>
</div>
</nav>
</div>
</div>
</div>