rework Icons to use new API
This commit is contained in:
parent
b635aad8ae
commit
9ee6ef3073
|
@ -20,7 +20,7 @@
|
|||
<div class="property-group-name" on:click={onHeaderClick}>
|
||||
<div class:thin class="name">{name}</div>
|
||||
<div class="icon">
|
||||
<Icon s name={show ? 'Remove' : 'Add'} />
|
||||
<Icon size="S" name={show ? "Remove" : "Add"} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel" class:show>
|
||||
|
|
|
@ -6,26 +6,18 @@
|
|||
export let direction = "n"
|
||||
export let name = "Add"
|
||||
export let hidden = false
|
||||
export let s = false
|
||||
export let m = false
|
||||
export let l = false
|
||||
export let xl = false
|
||||
export let size = "M"
|
||||
export let hoverable = false
|
||||
export let disabled = false
|
||||
|
||||
$: rotation = directions.indexOf(direction) * 45
|
||||
$: useDefault = ![s, m, l, xl].includes(true)
|
||||
</script>
|
||||
|
||||
<svg
|
||||
on:click
|
||||
class:hoverable
|
||||
class:disabled
|
||||
class:spectrum-Icon--sizeS={s}
|
||||
class:spectrum-Icon--sizeM={m || useDefault}
|
||||
class:spectrum-Icon--sizeL={l}
|
||||
class:spectrum-Icon--sizeXL={xl}
|
||||
class="spectrum-Icon"
|
||||
class="spectrum-Icon spectrum-Icon--size{size}"
|
||||
focusable="false"
|
||||
aria-hidden={hidden}
|
||||
aria-label={name}
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
<div>
|
||||
<Input readonly value={fullWebhookURL(value)} />
|
||||
<div class="icon" on:click={() => copyToClipboard()}>
|
||||
<Icon s name="Copy" />
|
||||
<Icon size="S" name="Copy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
<ActionMenu>
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
<Icon size="S" hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
</ActionMenu>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<ActionMenu>
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
<Icon size="S" hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
</ActionMenu>
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
on:change={event => onChange(event.detail)}
|
||||
{placeholder} />
|
||||
<div class="icon" on:click={bindingDrawer.show}>
|
||||
<Icon s name="FlashOn" />
|
||||
<Icon size="S" name="FlashOn" />
|
||||
</div>
|
||||
</div>
|
||||
<Drawer bind:this={bindingDrawer} {title}>
|
||||
|
|
|
@ -29,13 +29,13 @@
|
|||
<div class="content">
|
||||
{#if withArrow}
|
||||
<div class:opened class="icon arrow">
|
||||
<Icon s name="ChevronRight" />
|
||||
<Icon size="S" name="ChevronRight" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<slot name="icon" />
|
||||
{#if icon}
|
||||
<div class="icon"><Icon s name={icon} /></div>
|
||||
<div class="icon"><Icon size="S" name={icon} /></div>
|
||||
{/if}
|
||||
<div class="text">{text}</div>
|
||||
{#if withActions}
|
||||
|
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
<ActionMenu>
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
<Icon size="S" hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
<MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<ActionMenu>
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
<Icon size="S" hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<ActionMenu>
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
<Icon size="S" hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
</ActionMenu>
|
||||
|
|
|
@ -120,7 +120,7 @@
|
|||
on:click={() => deleteAction(index)}
|
||||
style="margin-left: auto;"
|
||||
>
|
||||
<Icon s hoverable name="Close" />
|
||||
<Icon size="S" hoverable name="Close" />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
|
|
@ -87,7 +87,7 @@
|
|||
class="icon"
|
||||
data-cy={`${key}-binding-button`}
|
||||
on:click={bindingDrawer.show}>
|
||||
<Icon s name="FlashOn" />
|
||||
<Icon size="S" name="FlashOn" />
|
||||
</div>
|
||||
<Drawer bind:this={bindingDrawer} title={capitalise(key)}>
|
||||
<svelte:fragment slot="description">
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<div class="root">
|
||||
<Heading m>Your Apps</Heading>
|
||||
<Divider m />
|
||||
<Divider size="M" />
|
||||
{#await promise}
|
||||
<div class="spinner-container">
|
||||
<Spinner size="30" />
|
||||
|
|
Loading…
Reference in New Issue