CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 05:20:32 +12:00
Code Issues Projects Releases Wiki Activity

Tidy up options drawer styles

Browse source
This commit is contained in:
Andrew Kingston 2021-08-17 11:33:09 +01:00
parent e5bca9fece
commit d71b7e4b77
2 changed files with 34 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
View file

@ -29,39 +29,38 @@
<DrawerContent>
<div class="container">
<Layout noPadding>
<Body size="S">
{#if !options.length}
Add an option to get started.
{/if}
</Body>
<div class="options">
{#each options as option (option.id)}
<Input
placeholder="Label"
bind:value={option.label}
label="Label"
labelPosition="left"
/>
<Input
placeholder="Value"
bind:value={option.value}
label="Value"
labelPosition="left"
/>
<Icon
name="Close"
hoverable
size="S"
on:click={() => removeOption(option.id)}
/>
{/each}
</div>
<Layout noPadding gap="S">
{#if !options.length}
<Body size="S">Add an option to get started.</Body>
{/if}
{#if options?.length}
<div class="options">
{#each options as option (option.id)}
<Input
placeholder="Label"
bind:value={option.label}
label="Label"
labelPosition="left"
/>
<Input
placeholder="Value"
bind:value={option.value}
label="Value"
labelPosition="left"
/>
<Icon
name="Close"
hoverable
size="S"
on:click={() => removeOption(option.id)}
/>
{/each}
</div>
{/if}
<div>
<Button icon="AddCircle" size="M" on:click={addOption} secondary
>Add Option</Button
>
<Button icon="AddCircle" size="M" on:click={addOption} secondary>
Add Option
</Button>
</div>
</Layout>
</div>
@ -70,7 +69,7 @@
<style>
.container {
width: 100%;
max-width: 1000px;
max-width: 800px;
margin: 0 auto;
}
.options {
@ -78,6 +77,6 @@
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
align-items: center;
grid-template-columns: auto auto 20px;
grid-template-columns: 1fr 1fr auto;
}
</style>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
View file

@ -22,7 +22,7 @@
<ActionButton on:click={drawer.show}>Define Options</ActionButton>
<Drawer bind:this={drawer} title="Options">
<svelte:fragment slot="description">
Add custom picker options
Define the options for this picker.
</svelte:fragment>
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<OptionsDrawer bind:options={tempValue} slot="body" />