CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 22:11:23 +12:00
Code Issues Projects Releases Wiki Activity

UI update to the Table dropdown

Browse source 
Spacing within the dropdown improved. Utilised new components from bbui.
Attempted to change the dropdown button to a select so it was consistent with the other inputs but failed.
I did improve the dropdown button by ensuring the width remains the same when selecting different values.
This commit is contained in:
Joe 2020-09-28 11:50:29 +01:00
parent b79626450b
commit ff5e0aa8cc
1 changed files with 21 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
packages/builder/src/components/userInterface/ModelViewSelect.svelte
View file

@ -1,10 +1,10 @@
<script> <script>
import { Button, Icon, DropdownMenu } from "@budibase/bbui" import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { backendUiStore } from "builderStore" import { backendUiStore } from "builderStore"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let anchor, dropdown let anchorRight, dropdownRight
export let value = {} export let value = {}
@ -30,21 +30,17 @@
}, []) }, [])
</script> </script>
<div bind:this={anchor}> <div class="dropdownbutton" bind:this={anchorRight}>
<Button secondary small on:click={dropdown.show}> <Button secondary wide on:click={dropdownRight.show}>
<span>{value.label ? value.label : 'Model / View'}</span> <span>{value.label ? value.label : 'Model / View'}</span>
<Icon name="arrowdown" /> <Icon name="arrowdown" />
</Button> </Button>
</div> </div>
<DropdownMenu <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
bind:this={dropdown} <div class="dropdown">
width="175px" <div class="title">
borderColor="#d1d1d1ff" <Heading extraSmall>Tables</Heading>
{anchor} </div>
align="right">
<div class="model-view-container">
<p>Tables</p>
<ul> <ul>
{#each models as model} {#each models as model}
<li <li
@ -55,7 +51,9 @@
{/each} {/each}
</ul> </ul>
<hr /> <hr />
<p>Views</p> <div class="title">
<Heading extraSmall>Views</Heading>
</div>
<ul> <ul>
{#each views as view} {#each views as view}
<li <li
@ -69,23 +67,18 @@
</DropdownMenu> </DropdownMenu>
<style> <style>
.model-view-container { .dropdownbutton {
padding-bottom: 8px; width: 100%;
font: var(--smallheavybodytext);
} }
.dropdown {
p { padding: var(--spacing-m) 0;
color: var(--grey-7);
margin: 0px;
padding: 8px;
} }
.title {
span { padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
text-transform: capitalize;
} }
hr { hr {
margin: 10px 0px 5px 0px; margin: var(--spacing-m) 0 var(--spacing-xl) 0;
} }
ul { ul {
@ -97,7 +90,8 @@
li { li {
cursor: pointer; cursor: pointer;
margin: 0px; margin: 0px;
padding: 5px 8px; padding: var(--spacing-s) var(--spacing-m);
font-size: var(--font-size-xs);
} }
.selected { .selected {