MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tidy up options drawer styles

This commit is contained in:
Andrew Kingston 2021-08-17 11:33:09 +01:00
parent ac850fdc19
commit e274eeffce
2 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
View File

@ -29,13 +29,11 @@
<DrawerContent> <DrawerContent>
<div class="container"> <div class="container">
<Layout noPadding> <Layout noPadding gap="S">
<Body size="S">
{#if !options.length} {#if !options.length}
Add an option to get started. <Body size="S">Add an option to get started.</Body>
{/if} {/if}
</Body> {#if options?.length}
<div class="options"> <div class="options">
{#each options as option (option.id)} {#each options as option (option.id)}
<Input <Input
@ -58,10 +56,11 @@
/> />
{/each} {/each}
</div> </div>
{/if}
<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" />