CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-05 06:20:55 +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> <DrawerContent>
<div class="container"> <div class="container">
<Layout noPadding> <Layout noPadding gap="S">
<Body size="S"> {#if !options.length}
{#if !options.length} <Body size="S">Add an option to get started.</Body>
Add an option to get started. {/if}
{/if} {#if options?.length}
</Body> <div class="options">
{#each options as option (option.id)}
<div class="options"> <Input
{#each options as option (option.id)} placeholder="Label"
<Input bind:value={option.label}
placeholder="Label" label="Label"
bind:value={option.label} labelPosition="left"
label="Label" />
labelPosition="left" <Input
/> placeholder="Value"
<Input bind:value={option.value}
placeholder="Value" label="Value"
bind:value={option.value} labelPosition="left"
label="Value" />
labelPosition="left" <Icon
/> name="Close"
<Icon hoverable
name="Close" size="S"
hoverable on:click={() => removeOption(option.id)}
size="S" />
on:click={() => removeOption(option.id)} {/each}
/> </div>
{/each} {/if}
</div>
<div> <div>
<Button icon="AddCircle" size="M" on:click={addOption} secondary <Button icon="AddCircle" size="M" on:click={addOption} secondary>
>Add Option</Button Add Option
> </Button>
</div> </div>
</Layout> </Layout>
</div> </div>
@ -70,7 +69,7 @@
<style> <style>
.container { .container {
width: 100%; width: 100%;
max-width: 1000px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
} }
.options { .options {
@ -78,6 +77,6 @@
column-gap: var(--spacing-l); column-gap: var(--spacing-l);
row-gap: var(--spacing-s); row-gap: var(--spacing-s);
align-items: center; align-items: center;
grid-template-columns: auto auto 20px; grid-template-columns: 1fr 1fr auto;
} }
</style> </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> <ActionButton on:click={drawer.show}>Define Options</ActionButton>
<Drawer bind:this={drawer} title="Options"> <Drawer bind:this={drawer} title="Options">
<svelte:fragment slot="description"> <svelte:fragment slot="description">
Add custom picker options Define the options for this picker.
</svelte:fragment> </svelte:fragment>
<Button cta slot="buttons" on:click={saveFilter}>Save</Button> <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<OptionsDrawer bind:options={tempValue} slot="body" /> <OptionsDrawer bind:options={tempValue} slot="body" />