CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-18 03:21:29 +12:00
Code Issues Projects Releases Wiki Activity

SUpport using icons for keybind indicators in menu items

Browse source
This commit is contained in:
Andrew Kingston 2022-08-17 14:47:07 +01:00
parent 978cdc3968
commit 37f9e7ad1d
1 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/bbui/src/Menu/Item.svelte
View file

@ -1,5 +1,6 @@
<script> <script>
import { createEventDispatcher, getContext } from "svelte" import { createEventDispatcher, getContext } from "svelte"
import { Icon } from "@budibase/bbui"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
const actionMenu = getContext("actionMenu") const actionMenu = getContext("actionMenu")
@ -42,21 +43,20 @@
tabindex="0" tabindex="0"
> >
{#if icon} {#if icon}
<svg <div class="icon">
class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" <Icon name={icon} size="S" />
focusable="false" </div>
aria-hidden="true"
aria-label={icon}
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if} {/if}
<span class="spectrum-Menu-itemLabel"><slot /></span> <span class="spectrum-Menu-itemLabel"><slot /></span>
{#if keys?.length} {#if keys?.length}
<div class="keys"> <div class="keys">
{#each keys as key} {#each keys as key}
<div class="key"> <div class="key">
{key} {#if key.startsWith("!")}
<Icon size="XS" name={key.split("!")[1]} />
{:else}
{key}
{/if}
</div> </div>
{/each} {/each}
</div> </div>
@ -64,8 +64,9 @@
</li> </li>
<style> <style>
.spectrum-Menu-itemIcon { .icon {
align-self: center; align-self: center;
margin-right: var(--spacing-s);
} }
.keys { .keys {
margin-left: 30px; margin-left: 30px;
@ -83,8 +84,11 @@
background-color: var(--spectrum-global-color-gray-300); background-color: var(--spectrum-global-color-gray-300);
border-radius: 4px; border-radius: 4px;
min-width: 12px; min-width: 12px;
height: 16px;
text-align: center; text-align: center;
margin: -1px 0; margin: -1px 0;
display: grid;
place-items: center;
} }
.is-disabled .key { .is-disabled .key {
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-600);