54 lines
1.1 KiB
Svelte
54 lines
1.1 KiB
Svelte
<script>
|
|
import { Icon, Modal } from "@budibase/bbui"
|
|
import ChooseIconModal from "components/start/ChooseIconModal.svelte"
|
|
|
|
export let name
|
|
export let size = "M"
|
|
export let app
|
|
export let color
|
|
export let autoSave = false
|
|
export let disabled = false
|
|
|
|
let modal
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div class="editable-icon">
|
|
{#if !disabled}
|
|
<div class="hover" on:click={modal.show}>
|
|
<Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
|
|
</div>
|
|
<div class="normal">
|
|
<Icon name={name || "Apps"} {size} {color} />
|
|
</div>
|
|
{:else}
|
|
<Icon {name} {size} {color} />
|
|
{/if}
|
|
</div>
|
|
|
|
<Modal bind:this={modal}>
|
|
<ChooseIconModal {name} {color} {app} {autoSave} on:change />
|
|
</Modal>
|
|
|
|
<style>
|
|
.editable-icon {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
.normal {
|
|
display: block;
|
|
}
|
|
.hover {
|
|
display: none;
|
|
cursor: pointer;
|
|
}
|
|
.editable-icon:hover .normal {
|
|
display: none;
|
|
}
|
|
.editable-icon:hover .hover {
|
|
display: block;
|
|
}
|
|
</style>
|