Update events editor and action components with new drawer styles
This commit is contained in:
Andrew Kingston
parent
b3eb783d7b
commit
2f559c3867
|
|
@ -73,54 +73,49 @@
|
|||
</script>
|
||||
|
||||
<DrawerContent>
|
||||
<div class="actions-list" slot="sidebar">
|
||||
<Layout>
|
||||
<ActionMenu>
|
||||
<Button slot="control" secondary>Add Action</Button>
|
||||
{#each actionTypes as actionType}
|
||||
<MenuItem on:click={addAction(actionType)}>
|
||||
{actionType.name}
|
||||
</MenuItem>
|
||||
{/each}
|
||||
</ActionMenu>
|
||||
|
||||
{#if actions && actions.length > 0}
|
||||
<div
|
||||
class="action-dnd-container"
|
||||
use:dndzone={{
|
||||
items: actions,
|
||||
flipDurationMs,
|
||||
dropTargetStyle: { outline: "none" },
|
||||
}}
|
||||
on:consider={handleDndConsider}
|
||||
on:finalize={handleDndFinalize}
|
||||
>
|
||||
{#each actions as action, index (action.id)}
|
||||
<div
|
||||
class="action-container"
|
||||
animate:flip={{ duration: flipDurationMs }}
|
||||
>
|
||||
<div
|
||||
class="action-header"
|
||||
class:selected={action === selectedAction}
|
||||
on:click={selectAction(action)}
|
||||
>
|
||||
{index + 1}.
|
||||
{action[EVENT_TYPE_KEY]}
|
||||
</div>
|
||||
<div
|
||||
on:click={() => deleteAction(index)}
|
||||
style="margin-left: auto;"
|
||||
>
|
||||
<Icon size="S" hoverable name="Close" />
|
||||
</div>
|
||||
<Layout noPadding gap="S" slot="sidebar">
|
||||
{#if actions && actions.length > 0}
|
||||
<div
|
||||
class="actions"
|
||||
use:dndzone={{
|
||||
items: actions,
|
||||
flipDurationMs,
|
||||
dropTargetStyle: { outline: "none" },
|
||||
}}
|
||||
on:consider={handleDndConsider}
|
||||
on:finalize={handleDndFinalize}
|
||||
>
|
||||
{#each actions as action, index (action.id)}
|
||||
<div
|
||||
class="action-container"
|
||||
animate:flip={{ duration: flipDurationMs }}
|
||||
class:selected={action === selectedAction}
|
||||
on:click={selectAction(action)}
|
||||
>
|
||||
<Icon name="DragHandle" size="XL" />
|
||||
<div class="action-header">
|
||||
{index + 1}. {action[EVENT_TYPE_KEY]}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
</div>
|
||||
<Layout>
|
||||
<Icon
|
||||
name="Close"
|
||||
hoverable
|
||||
size="S"
|
||||
on:click={() => deleteAction(index)}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<ActionMenu>
|
||||
<Button slot="control" secondary>Add Action</Button>
|
||||
{#each actionTypes as actionType}
|
||||
<MenuItem on:click={addAction(actionType)}>
|
||||
{actionType.name}
|
||||
</MenuItem>
|
||||
{/each}
|
||||
</ActionMenu>
|
||||
</Layout>
|
||||
<Layout noPadding>
|
||||
{#if selectedAction}
|
||||
<div class="selected-action-container">
|
||||
<svelte:component
|
||||
|
|
@ -133,32 +128,41 @@
|
|||
</DrawerContent>
|
||||
|
||||
<style>
|
||||
.action-header {
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-s);
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
|
||||
.action-header {
|
||||
margin-bottom: var(--spacing-m);
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--grey-7);
|
||||
font-weight: 600;
|
||||
}
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
|
||||
.action-header:hover,
|
||||
.action-header.selected {
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.action-container {
|
||||
border-bottom: 1px solid var(--grey-1);
|
||||
background-color: var(--background);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
border-radius: 4px;
|
||||
border: var(--border-light);
|
||||
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
|
||||
border-color 130ms ease-in-out;
|
||||
gap: var(--spacing-m);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.action-container:last-child {
|
||||
border-bottom: none;
|
||||
.action-container:hover,
|
||||
.action-container.selected {
|
||||
background-color: var(--spectrum-global-color-gray-50);
|
||||
border-color: var(--spectrum-global-color-gray-500);
|
||||
cursor: pointer;
|
||||
}
|
||||
.action-container:hover .action-header,
|
||||
.action-container.selected .action-header {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Layout gap="XS">
|
||||
<Layout gap="XS" noPadding>
|
||||
<Select
|
||||
label="Datasource"
|
||||
bind:value={parameters.datasourceId}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<DrawerContent>
|
||||
<div class="container">
|
||||
<Layout noPadding>
|
||||
<Layout noPadding gap="S">
|
||||
{#if links?.length}
|
||||
<div
|
||||
class="links"
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="button-container">
|
||||
<div>
|
||||
<Button secondary icon="Add" on:click={addLink}>Add Link</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -90,9 +90,9 @@
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
.link {
|
||||
padding: 4px 8px;
|
||||
gap: var(--spacing-l);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -108,7 +108,4 @@
|
|||
flex: 1 1 auto;
|
||||
width: 0;
|
||||
}
|
||||
.button-container {
|
||||
margin-left: var(--spacing-l);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue