mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-08-19 16:02:14 +00:00
UX improvements
This commit is contained in:
Ruben Fiszel
@@ -10,17 +10,6 @@
|
||||
@apply dark:border-gray-600;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield !important;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('/Inter-Variable.ttf');
|
||||
|
||||
@@ -425,13 +425,17 @@
|
||||
/>
|
||||
</div>
|
||||
{:else if inputCat == 'base64'}
|
||||
<input
|
||||
{autofocus}
|
||||
type="file"
|
||||
class="my-6"
|
||||
on:change={(x) => fileChanged(x, (val) => (value = val))}
|
||||
multiple={false}
|
||||
/>
|
||||
<div class="flex flex-col my-6 w-full">
|
||||
<input
|
||||
{autofocus}
|
||||
type="file"
|
||||
on:change={(x) => fileChanged(x, (val) => (value = val))}
|
||||
multiple={false}
|
||||
/>
|
||||
{#if value?.length}
|
||||
<div class="text-2xs text-tertiary mt-1">File length: {value.length} base64 chars</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if inputCat == 'resource-string'}
|
||||
<ResourcePicker
|
||||
{disablePortal}
|
||||
@@ -510,3 +514,16 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -362,3 +362,16 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -145,7 +145,7 @@
|
||||
<Pane>
|
||||
<div class="w-full flex flex-col gap-4 p-2">
|
||||
<div class="w-full flex justify-between items-center gap-4 flex-wrap">
|
||||
<span class="text-sm font-extrabold flex-shrink-0"
|
||||
<span class="text-sm font-semibold flex-shrink-0"
|
||||
>Saved Inputs <Tooltip
|
||||
>Shared inputs are available to anyone with access to the script</Tooltip
|
||||
></span
|
||||
@@ -260,7 +260,7 @@
|
||||
|
||||
<Pane>
|
||||
<div class="w-full flex flex-col gap-4 p-2">
|
||||
<span class="text-sm font-extrabold">Previous runs</span>
|
||||
<span class="text-sm font-semibold">Previous runs</span>
|
||||
|
||||
<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
|
||||
{#if previousInputs.length > 0}
|
||||
@@ -288,7 +288,7 @@
|
||||
{i.created_by}
|
||||
</div>
|
||||
<div
|
||||
class="whitespace-nowrap col-span-3 font-normal overflow-hidden text-ellipsis flex-shrink text-center"
|
||||
class="whitespace-nowrap col-span-3 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
|
||||
>
|
||||
<TimeAgo date={i.created_at ?? ''} />
|
||||
</div>
|
||||
@@ -315,7 +315,7 @@
|
||||
<Pane>
|
||||
<div class="h-full overflow-hidden min-h-0 flex flex-col justify-between">
|
||||
<div class="w-full flex flex-col min-h-0 gap-2 px-2 py-2 grow">
|
||||
<div class="text-sm font-extrabold">Preview</div>
|
||||
<div class="text-sm font-semibold">Preview</div>
|
||||
<div class="w-full flex flex-col">
|
||||
<Button
|
||||
color="blue"
|
||||
@@ -331,7 +331,7 @@
|
||||
</div>
|
||||
<div class="w-full min-h-0 grow overflow-auto">
|
||||
{#if Object.keys(selectedInput?.args || {}).length > 0}
|
||||
<div class="border overflow-auto h-full p-2">
|
||||
<div class=" overflow-auto h-full p-2">
|
||||
<ObjectViewer json={selectedInput?.args} />
|
||||
</div>
|
||||
{:else}
|
||||
|
||||
@@ -30,7 +30,6 @@
|
||||
import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
|
||||
import ErrorHandlerToggleButton from '$lib/components/details/ErrorHandlerToggleButton.svelte'
|
||||
import {
|
||||
AlertTriangle,
|
||||
Bug,
|
||||
CheckCircle,
|
||||
Code,
|
||||
|
||||
@@ -288,32 +288,21 @@
|
||||
<Splitpanes horizontal>
|
||||
<Pane size={60} minSize={20}>
|
||||
<div class="p-8 w-full max-w-3xl mx-auto gap-2 bg-surface">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
{#if !emptyString(flow.summary)}
|
||||
<span class="text-lg font-semibold">{flow.path}</span>
|
||||
{/if}
|
||||
<span class="text-sm text-tertiary">
|
||||
Edited <TimeAgo date={flow.edited_at ?? ''} /> by {flow.edited_by}
|
||||
</span>
|
||||
|
||||
{#if deploymentInProgress}
|
||||
<Badge color="yellow">
|
||||
<Loader2 size={12} class="inline animate-spin mr-1" />
|
||||
Deployment in progress
|
||||
</Badge>
|
||||
{/if}
|
||||
{#if flow.archived}
|
||||
<div class="" />
|
||||
<Alert type="error" title="Archived">This flow was archived</Alert>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
{#if !emptyString(flow.description)}
|
||||
<div class=" break-words whitespace-pre-wrap text-sm">
|
||||
<div class=" break-words whitespace-pre-wrap text-sm mb-4 !text-secondary">
|
||||
<Urlize text={defaultIfEmptyString(flow.description, 'No description')} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if deploymentInProgress}
|
||||
<Badge color="yellow">
|
||||
<Loader2 size={12} class="inline animate-spin mr-1" />
|
||||
Deployment in progress
|
||||
</Badge>
|
||||
{/if}
|
||||
|
||||
<RunForm
|
||||
viewKeybinding
|
||||
{loading}
|
||||
@@ -326,6 +315,21 @@
|
||||
isFlow
|
||||
bind:this={runForm}
|
||||
/>
|
||||
{#if !emptyString(flow.summary)}
|
||||
<div class="mb-2">
|
||||
<span class="!text-tertiary">{flow.path}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-row gap-x-2 flex-wrap items-center">
|
||||
<span class="text-sm text-tertiary">
|
||||
Edited <TimeAgo date={flow.edited_at ?? ''} /> by {flow.edited_by}
|
||||
</span>
|
||||
|
||||
{#if flow.archived}
|
||||
<div class="" />
|
||||
<Alert type="error" title="Archived">This flow was archived</Alert>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Pane>
|
||||
<Pane size={40} minSize={20}>
|
||||
|
||||
@@ -437,7 +437,7 @@
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="form">
|
||||
<div class="p-8 w-full max-w-3xl mx-auto">
|
||||
<div class="flex flex-col gap-0.5 mb-8">
|
||||
<div class="flex flex-col gap-0.5 mb-4">
|
||||
{#if script.lock_error_logs || topHash || script.archived || script.deleted}
|
||||
<div class="flex flex-col gap-2 my-2">
|
||||
{#if script.lock_error_logs}
|
||||
@@ -471,41 +471,20 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !emptyString(script.summary)}
|
||||
<span class="text-lg font-semibold">{script.path}</span>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-row gap-x-2 flex-wrap items-center mt-2">
|
||||
<span class="text-sm text-secondary">
|
||||
Edited <TimeAgo date={script.created_at || ''} /> by {script.created_by || 'unknown'}
|
||||
</span>
|
||||
<Badge small color="gray">
|
||||
{truncateHash(script?.hash ?? '')}
|
||||
</Badge>
|
||||
{#if script?.is_template}
|
||||
<Badge color="blue">Template</Badge>
|
||||
{/if}
|
||||
{#if script && script.kind !== 'script'}
|
||||
<Badge color="blue">
|
||||
{script?.kind}
|
||||
</Badge>
|
||||
{/if}
|
||||
{#if deploymentInProgress}
|
||||
<Badge color="yellow">
|
||||
<Loader2 size={12} class="inline animate-spin mr-1" />
|
||||
Deployment in progress
|
||||
</Badge>
|
||||
{/if}
|
||||
<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
|
||||
</div>
|
||||
|
||||
{#if !emptyString(script.description)}
|
||||
<div class="border p-2">
|
||||
<div class="py-2 !text-secondary">
|
||||
<Urlize text={defaultIfEmptyString(script.description, 'No description')} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if deploymentInProgress}
|
||||
<Badge color="yellow">
|
||||
<Loader2 size={12} class="inline animate-spin mr-1" />
|
||||
Deployment in progress
|
||||
</Badge>
|
||||
{/if}
|
||||
|
||||
<RunForm
|
||||
viewKeybinding
|
||||
loading={runLoading}
|
||||
@@ -519,6 +498,30 @@
|
||||
isFlow={false}
|
||||
bind:this={runForm}
|
||||
/>
|
||||
|
||||
{#if !emptyString(script.summary)}
|
||||
<div class="mb-2">
|
||||
<span class="!text-tertiary">{script.path}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-row gap-x-2 flex-wrap items-center">
|
||||
<span class="text-sm text-tertiary">
|
||||
Edited <TimeAgo date={script.created_at || ''} /> by {script.created_by || 'unknown'}
|
||||
</span>
|
||||
<Badge small color="gray">
|
||||
{truncateHash(script?.hash ?? '')}
|
||||
</Badge>
|
||||
{#if script?.is_template}
|
||||
<Badge color="blue">Template</Badge>
|
||||
{/if}
|
||||
{#if script && script.kind !== 'script'}
|
||||
<Badge color="blue">
|
||||
{script?.kind}
|
||||
</Badge>
|
||||
{/if}
|
||||
|
||||
<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
|
||||
</div>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="save_inputs">
|
||||
|
||||
Reference in New Issue
Block a user