Activity panel browser UI
This commit is contained in:
Sipke Schoorstra
parent
39b4137a53
commit
b8d6155e8f
|
|
@ -291,50 +291,16 @@
|
|||
<div class="tree">
|
||||
<ul>
|
||||
<li>
|
||||
<div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" id="activity-1" 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">
|
||||
<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"></path>
|
||||
<circle cx="12" cy="12" r="9"></circle>
|
||||
<polyline points="12 7 12 12 15 15"></polyline>
|
||||
</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"></path>
|
||||
<circle cx="5" cy="12" r="1"></circle>
|
||||
<circle cx="12" cy="12" r="1"></circle>
|
||||
<circle cx="19" cy="12" r="1"></circle>
|
||||
</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>
|
||||
<div class="inline-flex flex flex-col items-center">
|
||||
<button id="start-button" type="button" class="px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-green-600 hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green active:bg-green-700 transition ease-in-out duration-150">
|
||||
Start
|
||||
</button>
|
||||
<div id="start-button-plus" class="mt-6">
|
||||
<svg class="h-8 w-8 text-gray-400 hover:text-blue-500 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" id="activity-2" 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">
|
||||
|
|
@ -1225,23 +1191,18 @@
|
|||
</div>
|
||||
<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 x-on: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-md md: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">
|
||||
<!-- Header -->
|
||||
<header class="px-4 py-6 bg-gray-50 sm:px-6">
|
||||
<header class="p-6">
|
||||
<div class="flex items-start justify-between space-x-3">
|
||||
<div class="space-y-1">
|
||||
<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>
|
||||
<h2 class="text-lg leading-7 font-medium text-gray-900">
|
||||
Activities
|
||||
</h2>
|
||||
<div class="h-7 flex items-center">
|
||||
<button x-on:click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
|
||||
<button @click="open = false; setTimeout(() => open = true, 1000);" 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>
|
||||
|
|
@ -1250,177 +1211,80 @@
|
|||
</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>
|
||||
<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 class="p-6">
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<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"></path>
|
||||
<circle cx="10" cy="10" r="7"></circle>
|
||||
<line x1="21" y1="21" x2="15" y2="15"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<input id="email" class="form-input block w-full pl-10 sm:text-sm sm:leading-5" placeholder="Search activities">
|
||||
</div>
|
||||
</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>
|
||||
<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="border-b border-gray-200">
|
||||
<div class="px-6">
|
||||
<nav class="-mb-px flex space-x-6" x-descriptions="Tab component">
|
||||
<a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-blue-500 font-medium text-sm leading-5 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700" aria-current="page">All</a>
|
||||
<a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">Actions</a>
|
||||
<a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">Triggers</a>
|
||||
</nav>
|
||||
</div>
|
||||
</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="sm:col-span-2">
|
||||
<div class="flex space-x-2">
|
||||
<div class="p-6 space-y-6 overflow-y-auto">
|
||||
|
||||
<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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Tom Warner">
|
||||
</a>
|
||||
<div>
|
||||
<h2>Primitives</h2>
|
||||
|
||||
<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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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>
|
||||
<ul class="grid grid-cols-1 gap-4 mt-3" x-max="1">
|
||||
<li class="relative col-span-1 flex shadow-sm rounded-md">
|
||||
<div class="flex-shrink-0 flex items-center justify-center w-16 bg-blue-600 text-white text-sm leading-5 font-medium rounded-l-md">
|
||||
<svg class="h-10 w-10 text-white" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
|
||||
<div class="flex-1 px-4 py-2 text-sm leading-5">
|
||||
<a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
|
||||
Timer
|
||||
</a>
|
||||
<p class="text-gray-500">Trigger the workflow at the specified time interval.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</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="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="public_access" class="font-medium text-gray-900">
|
||||
Public access
|
||||
</label>
|
||||
<p id="public_access_description" class="text-gray-500">
|
||||
Everyone with the link will see this project
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex items-start">
|
||||
<div class="absolute flex items-center h-5">
|
||||
|
||||
<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="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="private_access_description" class="text-gray-500">
|
||||
You are the only one able to access this project
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Primitives</h2>
|
||||
|
||||
<ul class="grid grid-cols-1 gap-4 mt-3" x-max="1">
|
||||
<li class="relative col-span-1 flex shadow-sm rounded-md">
|
||||
<div class="flex-shrink-0 flex items-center justify-center w-16 bg-blue-600 text-white text-sm leading-5 font-medium rounded-l-md">
|
||||
<svg class="h-10 w-10 text-white" 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>
|
||||
</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>
|
||||
<div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
|
||||
<div class="flex-1 px-4 py-2 text-sm leading-5">
|
||||
<a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
|
||||
Timer
|
||||
</a>
|
||||
<p class="text-gray-500">Trigger the workflow at the specified time
|
||||
interval.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
|
|
@ -1453,7 +1317,12 @@
|
|||
jsPlumbInstance.batch(function () {
|
||||
|
||||
jsPlumbInstance.connect({
|
||||
source: "activity-1",
|
||||
source: "start-button",
|
||||
target: "start-button-plus"
|
||||
});
|
||||
|
||||
jsPlumbInstance.connect({
|
||||
source: "start-button-plus",
|
||||
target: "activity-2"
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<div x-show="open" x-data="{ open: true }" x-on: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 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">
|
||||
<section x-on:click.away="open = false" class="absolute inset-y-0 right-0 pl-10 max-w-md md: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">
|
||||
<!-- Header -->
|
||||
<header class="px-4 py-6 bg-gray-50 sm:px-6">
|
||||
<header class="p-6">
|
||||
<div class="flex items-start justify-between space-x-3">
|
||||
<div class="space-y-1">
|
||||
<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>
|
||||
<h2 class="text-lg leading-7 font-medium text-gray-900">
|
||||
Activities
|
||||
</h2>
|
||||
<div class="h-7 flex items-center">
|
||||
<button x-on:click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
|
||||
<button @click="open = false; setTimeout(() => open = true, 1000);" 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>
|
||||
|
|
@ -25,177 +25,89 @@
|
|||
</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>
|
||||
<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 class="p-6">
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<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="10" cy="10" r="7"/>
|
||||
<line x1="21" y1="21" x2="15" y2="15"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input id="email" class="form-input block w-full pl-10 sm:text-sm sm:leading-5" placeholder="Search activities">
|
||||
</div>
|
||||
</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>
|
||||
<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="border-b border-gray-200">
|
||||
<div class="px-6">
|
||||
<nav class="-mb-px flex space-x-6" x-descriptions="Tab component">
|
||||
<a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-blue-500 font-medium text-sm leading-5 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700" aria-current="page">All</a>
|
||||
<a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">Actions</a>
|
||||
<a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">Triggers</a>
|
||||
</nav>
|
||||
</div>
|
||||
</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="sm:col-span-2">
|
||||
<div class="flex space-x-2">
|
||||
<div class="p-6 space-y-6 overflow-y-auto">
|
||||
|
||||
<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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Tom Warner">
|
||||
</a>
|
||||
<div>
|
||||
<h2>Primitives</h2>
|
||||
|
||||
<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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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>
|
||||
<ul class="grid grid-cols-1 gap-4 mt-3" x-max="1">
|
||||
<li class="relative col-span-1 flex shadow-sm rounded-md">
|
||||
<div
|
||||
class="flex-shrink-0 flex items-center justify-center w-16 bg-blue-600 text-white text-sm leading-5 font-medium rounded-l-md">
|
||||
<svg class="h-10 w-10 text-white" 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"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
|
||||
<div class="flex-1 px-4 py-2 text-sm leading-5">
|
||||
<a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
|
||||
Timer
|
||||
</a>
|
||||
<p class="text-gray-500">Trigger the workflow at the specified time interval.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</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="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="public_access" class="font-medium text-gray-900">
|
||||
Public access
|
||||
</label>
|
||||
<p id="public_access_description" class="text-gray-500">
|
||||
Everyone with the link will see this project
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex items-start">
|
||||
<div class="absolute flex items-center h-5">
|
||||
|
||||
<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="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="private_access_description" class="text-gray-500">
|
||||
You are the only one able to access this project
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Primitives</h2>
|
||||
|
||||
<ul class="grid grid-cols-1 gap-4 mt-3" x-max="1">
|
||||
<li class="relative col-span-1 flex shadow-sm rounded-md">
|
||||
<div
|
||||
class="flex-shrink-0 flex items-center justify-center w-16 bg-blue-600 text-white text-sm leading-5 font-medium rounded-l-md">
|
||||
<svg class="h-10 w-10 text-white" 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"/>
|
||||
</svg>
|
||||
</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>
|
||||
<div
|
||||
class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
|
||||
<div class="flex-1 px-4 py-2 text-sm leading-5">
|
||||
<a href="#"
|
||||
class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
|
||||
Timer
|
||||
</a>
|
||||
<p class="text-gray-500">Trigger the workflow at the specified time
|
||||
interval.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.0/js/jsplumb.min.js" integrity="sha512-vVRd/8cnj1FEVrL2EPkHJ+om6q7hlTFgoq7Wixfby4hNneUomS+G5zkwE1IIc+Ru8HZ1hxDfH8lcIsXpydfVmw==" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.0/js/jsplumb.min.js"
|
||||
integrity="sha512-vVRd/8cnj1FEVrL2EPkHJ+om6q7hlTFgoq7Wixfby4hNneUomS+G5zkwE1IIc+Ru8HZ1hxDfH8lcIsXpydfVmw=="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<module href="./src/partials/layout.html">
|
||||
<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">
|
||||
|
|
@ -9,7 +11,8 @@
|
|||
</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">
|
||||
<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>
|
||||
|
|
@ -24,13 +27,27 @@
|
|||
<div class="tree">
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html" locals='{ "id": "activity-1" }'></module>
|
||||
<div class="inline-flex flex flex-col items-center">
|
||||
<button id="start-button" type="button"
|
||||
class="px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-green-600 hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green active:bg-green-700 transition ease-in-out duration-150">
|
||||
Start
|
||||
</button>
|
||||
<div id="start-button-plus" class="mt-6">
|
||||
<svg class="h-8 w-8 text-gray-400 hover:text-blue-500 cursor-pointer" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html" locals='{ "id": "activity-2" }'></module>
|
||||
<module href="./src/partials/activity.html"
|
||||
locals='{ "id": "activity-2" }'></module>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html" locals='{ "id": "activity-3" }'></module>
|
||||
<module href="./src/partials/activity.html"
|
||||
locals='{ "id": "activity-3" }'></module>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
|
|
@ -38,36 +55,47 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html" locals='{ "id": "activity-4a" }'></module>
|
||||
<module href="./src/partials/activity.html"
|
||||
locals='{ "id": "activity-4a" }'></module>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html" locals='{ "id": "activity-5" }'></module>
|
||||
<module href="./src/partials/activity.html"
|
||||
locals='{ "id": "activity-5" }'></module>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockno ">
|
||||
<span style="padding: 6px;">No</span>
|
||||
<div
|
||||
class="blockcondition blockno ">
|
||||
<span
|
||||
style="padding: 6px;">No</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
<span style="padding: 6px;">Yes</span>
|
||||
<div
|
||||
class="blockcondition blockyes ">
|
||||
<span
|
||||
style="padding: 6px;">Yes</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
<span style="padding: 6px;">Yes</span>
|
||||
<div
|
||||
class="blockcondition blockyes ">
|
||||
<span
|
||||
style="padding: 6px;">Yes</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -87,29 +115,38 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html" locals='{ "id": "activity-4b" }'></module>
|
||||
<module href="./src/partials/activity.html"
|
||||
locals='{ "id": "activity-4b" }'></module>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockno ">
|
||||
<span style="padding: 6px;">No</span>
|
||||
<div
|
||||
class="blockcondition blockno ">
|
||||
<span
|
||||
style="padding: 6px;">No</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
<span style="padding: 6px;">Yes</span>
|
||||
<div
|
||||
class="blockcondition blockyes ">
|
||||
<span
|
||||
style="padding: 6px;">Yes</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -120,34 +157,45 @@
|
|||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
<span style="padding: 6px;">Yes</span>
|
||||
<div
|
||||
class="blockcondition blockyes ">
|
||||
<span
|
||||
style="padding: 6px;">Yes</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
<span style="padding: 6px;">Yes</span>
|
||||
<div
|
||||
class="blockcondition blockyes ">
|
||||
<span
|
||||
style="padding: 6px;">Yes</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
<span style="padding: 6px;">+</span>
|
||||
<div
|
||||
class="blockcondition blockyes ">
|
||||
<span
|
||||
style="padding: 6px;">+</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
<module
|
||||
href="./src/partials/activity.html"></module>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -202,7 +250,12 @@
|
|||
jsPlumbInstance.batch(function () {
|
||||
|
||||
jsPlumbInstance.connect({
|
||||
source: "activity-1",
|
||||
source: "start-button",
|
||||
target: "start-button-plus"
|
||||
});
|
||||
|
||||
jsPlumbInstance.connect({
|
||||
source: "start-button-plus",
|
||||
target: "activity-2"
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -23,13 +23,26 @@
|
|||
<div class="tree">
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-1" OnClick="@(async e => await OnActivityClick(e))" />
|
||||
<div class="inline-flex flex flex-col items-center">
|
||||
<button id="start-button" type="button"
|
||||
class="px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-green-600 hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green active:bg-green-700 transition ease-in-out duration-150"
|
||||
@onclick="@(async e => await OnStartClick(e))">
|
||||
Start
|
||||
</button>
|
||||
<div id="start-button-plus" class="mt-6">
|
||||
<svg class="h-8 w-8 text-gray-400 hover:text-blue-500 cursor-pointer" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-2" />
|
||||
<Activity ActivityId="activity-2" OnClick="@(async e => await OnActivityClick(e))"/>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-3" />
|
||||
<Activity ActivityId="activity-3"/>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
|
|
@ -37,10 +50,10 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-4a" />
|
||||
<Activity ActivityId="activity-4a"/>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-5" />
|
||||
<Activity ActivityId="activity-5"/>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockno ">
|
||||
|
|
@ -48,7 +61,7 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-6" />
|
||||
<Activity ActivityId="activity-6"/>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -58,7 +71,7 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-7" />
|
||||
<Activity ActivityId="activity-7"/>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
|
|
@ -66,7 +79,7 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-8" />
|
||||
<Activity ActivityId="activity-8"/>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -86,7 +99,7 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-4b" />
|
||||
<Activity ActivityId="activity-4b"/>
|
||||
<ul>
|
||||
<li>
|
||||
<module href="./src/partials/activity.html"></module>
|
||||
|
|
@ -97,7 +110,7 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-9" />
|
||||
<Activity ActivityId="activity-9"/>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
|
|
@ -105,10 +118,10 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-10" />
|
||||
<Activity ActivityId="activity-10"/>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-11" />
|
||||
<Activity ActivityId="activity-11"/>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -124,7 +137,7 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-12" />
|
||||
<Activity ActivityId="activity-12"/>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
|
|
@ -132,7 +145,7 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-13" />
|
||||
<Activity ActivityId="activity-13"/>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="blockcondition blockyes ">
|
||||
|
|
@ -140,13 +153,13 @@
|
|||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-14" />
|
||||
<Activity ActivityId="activity-14"/>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-15" />
|
||||
<Activity ActivityId="activity-15"/>
|
||||
<ul>
|
||||
<li>
|
||||
<Activity ActivityId="activity-16" />
|
||||
<Activity ActivityId="activity-16"/>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ namespace ElsaDashboard.Blazor.Application.Pages.Designer
|
|||
{
|
||||
if (firstRender)
|
||||
{
|
||||
_designerModule = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/ElsaDashboard.Blazor.Shared/workflowDesigner.js");
|
||||
_designerModule = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/ElsaDashboard.Blazor.Application/workflowDesigner.js");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -26,6 +26,11 @@ namespace ElsaDashboard.Blazor.Application.Pages.Designer
|
|||
await _designerModule.DisposeAsync();
|
||||
}
|
||||
|
||||
private async ValueTask OnStartClick(MouseEventArgs e)
|
||||
{
|
||||
await FlyoutPanelService.ShowAsync();
|
||||
}
|
||||
|
||||
private async ValueTask OnActivityClick(MouseEventArgs e)
|
||||
{
|
||||
await FlyoutPanelService.ShowAsync();
|
||||
|
|
|
|||
|
|
@ -1,201 +1,107 @@
|
|||
<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">
|
||||
<section x-on:click.away="$store.flyoutPanel.show = false" class="absolute inset-y-0 right-0 pl-10 max-w-md md: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">
|
||||
<header class="p-6">
|
||||
<div class="flex items-start justify-between space-x-3">
|
||||
<div class="space-y-1">
|
||||
<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>
|
||||
<h2 class="text-lg leading-7 font-medium text-gray-900">
|
||||
Activities
|
||||
</h2>
|
||||
<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>
|
||||
<button @click="open = false; setTimeout(() => open = true, 1000);"
|
||||
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>
|
||||
<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 class="p-6">
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<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="10" cy="10" r="7"/>
|
||||
<line x1="21" y1="21" x2="15" y2="15"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input id="email" class="form-input block w-full pl-10 sm:text-sm sm:leading-5"
|
||||
placeholder="Search activities">
|
||||
</div>
|
||||
</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>
|
||||
<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="border-b border-gray-200">
|
||||
<div class="px-6">
|
||||
<nav class="-mb-px flex space-x-6" x-descriptions="Tab component">
|
||||
<a href="#"
|
||||
class="whitespace-no-wrap pb-4 px-1 border-b-2 border-blue-500 font-medium text-sm leading-5 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700"
|
||||
aria-current="page">
|
||||
All
|
||||
</a>
|
||||
<a href="#"
|
||||
class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
|
||||
Actions
|
||||
</a>
|
||||
<a href="#"
|
||||
class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
|
||||
Triggers
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</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 class="p-6 space-y-6 overflow-y-auto">
|
||||
|
||||
@for (var category = 0; category < 3; category++)
|
||||
{
|
||||
<div>
|
||||
<h3 class="text-sm font-medium leading-5 text-gray-900">
|
||||
Team Members
|
||||
</h3>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<div class="flex space-x-2">
|
||||
<h2>Primitives</h2>
|
||||
|
||||
<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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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>
|
||||
</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="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="public_access" class="font-medium text-gray-900">
|
||||
Public access
|
||||
</label>
|
||||
<p id="public_access_description" class="text-gray-500">
|
||||
Everyone with the link will see this project
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex items-start">
|
||||
<div class="absolute flex items-center h-5">
|
||||
|
||||
<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="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="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>
|
||||
<ul class="grid grid-cols-1 gap-4 mt-3" x-max="1">
|
||||
@for (var i = 0; i < 8; i++)
|
||||
{
|
||||
<li class="relative col-span-1 flex shadow-sm rounded-md">
|
||||
<div
|
||||
class="flex-shrink-0 flex items-center justify-center w-16 bg-blue-600 text-white text-sm leading-5 font-medium rounded-l-md">
|
||||
<svg class="h-10 w-10 text-white" 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"/>
|
||||
</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>
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
|
||||
<div class="flex-1 px-4 py-2 text-sm leading-5">
|
||||
<a href="#"
|
||||
class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
|
||||
Timer
|
||||
</a>
|
||||
<p class="text-gray-500">
|
||||
Trigger the workflow at the specified time
|
||||
interval.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</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>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue