69 lines
1.3 KiB
Svelte
69 lines
1.3 KiB
Svelte
<script>
|
|
import { Popover, Layout, Icon } from "@budibase/bbui"
|
|
import UpdateAppForm from "./UpdateAppForm.svelte"
|
|
|
|
let formPopover
|
|
let formPopoverAnchor
|
|
let formPopoverOpen = false
|
|
</script>
|
|
|
|
<div bind:this={formPopoverAnchor}>
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div
|
|
class="app-heading"
|
|
class:editing={formPopoverOpen}
|
|
on:click={() => {
|
|
formPopover.show()
|
|
}}
|
|
>
|
|
<slot />
|
|
<span class="edit-icon">
|
|
<Icon size="S" name="Edit" color={"var(--grey-7)"} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Popover
|
|
customZIndex={998}
|
|
bind:this={formPopover}
|
|
align="center"
|
|
anchor={formPopoverAnchor}
|
|
offset={20}
|
|
on:close={() => {
|
|
formPopoverOpen = false
|
|
}}
|
|
on:open={() => {
|
|
formPopoverOpen = true
|
|
}}
|
|
>
|
|
<Layout noPadding gap="M">
|
|
<div class="popover-content">
|
|
<UpdateAppForm
|
|
on:updated={() => {
|
|
formPopover.hide()
|
|
}}
|
|
/>
|
|
</div>
|
|
</Layout>
|
|
</Popover>
|
|
|
|
<style>
|
|
.popover-content {
|
|
padding: var(--spacing-xl);
|
|
}
|
|
.app-heading {
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
gap: var(--spacing-s);
|
|
}
|
|
.edit-icon {
|
|
display: none;
|
|
}
|
|
.app-heading:hover .edit-icon,
|
|
.app-heading.editing .edit-icon {
|
|
display: inline;
|
|
}
|
|
</style>
|