CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-31 10:51:43 +12:00
Code Issues Projects Releases Wiki Activity

Add selected styles to component dropdowns

Browse source
This commit is contained in:
Andrew Kingston 2020-10-23 10:37:28 +01:00
parent 4e4aa5c525
commit 767846e4c4
1 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/builder/src/components/userInterface/ComponentSelectionList.svelte
View file

@ -12,7 +12,6 @@
$: anchor = selectedIndex === -1 ? null : anchors[selectedIndex] $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
const close = () => { const close = () => {
selectedIndex = null
popover.hide() popover.hide()
} }
@ -38,14 +37,19 @@
<div <div
bind:this={anchors[idx]} bind:this={anchors[idx]}
class="category" class="category"
on:click={() => onCategoryChosen(category, idx)}> on:click={() => onCategoryChosen(category, idx)}
class:active={idx === selectedIndex}>
{#if category.icon}<i class={category.icon} />{/if} {#if category.icon}<i class={category.icon} />{/if}
<span>{category.name}</span> <span>{category.name}</span>
{#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if} {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
</div> </div>
{/each} {/each}
</div> </div>
<DropdownMenu bind:this={popover} {anchor} align="left"> <DropdownMenu
on:close={() => (selectedIndex = null)}
bind:this={popover}
{anchor}
align="left">
<Tab <Tab
list={categories[selectedIndex]} list={categories[selectedIndex]}
on:selectItem={(e) => onComponentChosen(e.detail)} /> on:selectItem={(e) => onComponentChosen(e.detail)} />
@ -76,6 +80,7 @@
font-weight: 500; font-weight: 500;
user-select: none; user-select: none;
} }
.category.active,
.category:hover { .category:hover {
color: var(--ink); color: var(--ink);
} }