New Script UX refactor

This commit is contained in:
Ruben Fiszel
2022-10-26 23:09:10 +02:00
parent 340add7f4f
commit c59ee075af
@@ -88,6 +88,7 @@
<div class="justify-between flex flex-row drop-shadow-sm w-full">
<div class="flex flex-row w-full">
<Breadcrumb>
<BreadcrumbItem>New Script</BreadcrumbItem>
<BreadcrumbItem>
<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
Metadata
@@ -155,7 +156,6 @@
{#if step === 1}
<CenteredPage>
<div class="space-y-6">
<h1 class="mb-4">New script</h1>
<h2 class="border-b pb-1 mt-4">Path & Summary</h2>
<Path
bind:error={pathError}
@@ -177,7 +177,7 @@
<textarea
bind:value={script.summary}
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300
focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-lg"
focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder="A very short summary of the script displayed when the script is listed"
rows="1"
/>
@@ -270,38 +270,9 @@
{/if}
<label class="block">
<span class="text-gray-700 mr-2"
>Save as workspace template <Tooltip
>Enable your teammates to use this script as a template to write new scripts.</Tooltip
>
</span>
<span class="text-gray-700 mr-2">Save as workspace template</span>
<input type="checkbox" bind:checked={script.is_template} />
</label>
<label class="block" for="inp">
<span class="text-gray-700 text-sm">
Description<Required required={false} detail="markdown" />
<textarea
id="inp"
bind:value={script.description}
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300
focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder="A description to help users understand what this script does and how to use it."
rows="3"
/>
</span>
</label>
<div>
<div class="font-bold pb-1 mt-4">Description preview</div>
{#if script.description}
<div class="prose max-h-48 mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto">
<SvelteMarkdown source={script.description} />
</div>
{:else}
<div class="text-sm text-gray-500"> Enter a description to see the preview </div>
{/if}
</div>
</div>
</CenteredPage>
{:else if step === 2}