starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-26 08:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

App editor preview (#954)

Browse Source 
* fix(frontend): Fix refresh button

* fix(frontend): remove preview border
This commit is contained in:
Faton Ramadani
2022-11-28 11:49:47 +01:00
committed by GitHub
parent ed7838d6bc
commit acdd0fea7d
2 changed files with 49 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+12 -9
View File
@@ -7,7 +7,7 @@
import TestJobLoader from '$lib/components/TestJobLoader.svelte'
import { AppService, type CompletedJob } from '$lib/gen'
import { workspaceStore } from '$lib/stores'
import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
import { faArrowsRotate, faRefresh } from '@fortawesome/free-solid-svg-icons'
import { getContext } from 'svelte'
import Icon from 'svelte-awesome'
import type { Output } from '../../rx'
@@ -206,14 +206,17 @@
{#if autoRefresh === true}
{#if isValid}
<Button size="xs" color="dark" on:click={() => executeComponent()} disabled={!isValid}>
<div>
{Object.keys(args).length > 0 ? 'Submit' : 'Refresh'}
{#if testIsLoading}
<Icon data={faArrowsRotate} class="animate-spin ml-2" scale={0.8} />
{/if}
</div>
</Button>
<div class="flex flex-row-reverse">
<Button
size="xs"
color="light"
variant="border"
on:click={() => executeComponent()}
disabled={!isValid}
startIcon={{ icon: faRefresh, classes: testIsLoading ? 'animate-spin' : '' }}
iconOnly
/>
</div>
<slot />
{:else}
<Alert type="warning" size="xs" class="mt-2" title="Missing inputs">
frontend/src/lib/components/apps/editor/AppEditor.svelte
+37 -39
View File
@@ -64,55 +64,53 @@
})
}
})
$: previewing = $mode === 'preview'
</script>
<AppEditorHeader bind:title={$appStore.title} bind:mode={$mode} />
<SplitPanesWrapper>
<Pane size={20} minSize={20} maxSize={40}>
{#if $mode === 'dnd'}
<ContextPanel appPath={path} />
{/if}
<Pane size={previewing ? 0 : 20} minSize={20} maxSize={40}>
<ContextPanel appPath={path} />
</Pane>
<Pane size={60} maxSize={100}>
<Pane size={previewing ? 100 : 60}>
<div class="p-4 bg-gray-100 h-full" id="faton">
{#if $appStore.grid}
<GridEditor />
{/if}
</div>
</Pane>
<Pane size={25} minSize={20} maxSize={40}>
{#if $mode === 'dnd'}
<Tabs bind:selected={selectedTab}>
<Tab value="insert" size="xs">
<div class="m-1 flex flex-row gap-2">
<Icon data={faPlus} />
<span>Insert</span>
</div>
</Tab>
<Tab value="settings" size="xs">
<div class="m-1 flex flex-row gap-2">
<Icon data={faSliders} />
<span>Settings</span>
</div>
</Tab>
<svelte:fragment slot="content">
<TabContent value="settings">
{#if $selectedComponent !== undefined}
{#each $appStore.grid as gridItem (gridItem.id)}
{#if gridItem.data.id === $selectedComponent}
<ComponentPanel bind:component={gridItem.data} />
{/if}
{/each}
{/if}
{#if $selectedComponent === undefined}
<div class="p-4 text-sm">No component selected.</div>
{/if}
</TabContent>
<TabContent value="insert">
<ComponentList />
</TabContent>
</svelte:fragment>
</Tabs>
{/if}
<Pane size={previewing ? 0 : 25} minSize={20} maxSize={40}>
<Tabs bind:selected={selectedTab}>
<Tab value="insert" size="xs">
<div class="m-1 flex flex-row gap-2">
<Icon data={faPlus} />
<span>Insert</span>
</div>
</Tab>
<Tab value="settings" size="xs">
<div class="m-1 flex flex-row gap-2">
<Icon data={faSliders} />
<span>Settings</span>
</div>
</Tab>
<svelte:fragment slot="content">
<TabContent value="settings">
{#if $selectedComponent !== undefined}
{#each $appStore.grid as gridItem (gridItem.id)}
{#if gridItem.data.id === $selectedComponent}
<ComponentPanel bind:component={gridItem.data} />
{/if}
{/each}
{/if}
{#if $selectedComponent === undefined}
<div class="p-4 text-sm">No component selected.</div>
{/if}
</TabContent>
<TabContent value="insert">
<ComponentList />
</TabContent>
</svelte:fragment>
</Tabs>
</Pane>
</SplitPanesWrapper>