SUpport using icons for keybind indicators in menu items
This commit is contained in:
parent
978cdc3968
commit
37f9e7ad1d
1 changed files with 14 additions and 10 deletions
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue