wip menu component

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-12 11:24:03 +02:00
parent 439fda6785
commit 199756134b
4 changed files with 12 additions and 15 deletions

View File

@ -0,0 +1,3 @@
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel"><slot /></span>
</li>

View File

@ -1,15 +1,9 @@
<span class="spectrum-Menu-sectionHeading"><slot /></span> <script>
export let heading
</script>
<li role="presentation"> <li role="presentation">
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Section Heading</span> <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">{heading}</span>
<ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1"> <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0"> <slot />
<span class="spectrum-Menu-itemLabel">Action 1</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Action 2</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Action 3</span>
</li>
</ul> </ul>
</li> </li>

View File

@ -1,7 +1,7 @@
<script> <script>
import { sortBy } from "lodash/fp" import { sortBy } from "lodash/fp"
import { automationStore } from "builderStore" import { automationStore } from "builderStore"
import { Button, DropdownMenu, Modal } from "@budibase/bbui" import { ActionButton, DropdownMenu, Modal } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte" import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
@ -64,14 +64,14 @@
<div class="tab-container"> <div class="tab-container">
{#each tabs as tab, idx} {#each tabs as tab, idx}
<div bind:this={anchors[idx]}> <div bind:this={anchors[idx]}>
<Button <ActionButton
size="S" size="S"
quiet quiet
icon={tab.icon} icon={tab.icon}
disabled={tab.disabled} disabled={tab.disabled}
on:click={tab.disabled ? null : () => onChangeTab(idx)}> on:click={tab.disabled ? null : () => onChangeTab(idx)}>
{tab.label} {tab.label}
</Button> </ActionButton>
</div> </div>
{/each} {/each}
</div> </div>

View File

@ -61,7 +61,7 @@
<div class="button-group"> <div class="button-group">
<Button secondary on:click={initiateAppImport}>Import Web App</Button> <Button secondary on:click={initiateAppImport}>Import Web App</Button>
<Spacer medium /> <Spacer medium />
<Button primary on:click={modal.show}>Create New Web App</Button> <Button cta on:click={modal.show}>Create New Web App</Button>
</div> </div>
</div> </div>