CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-18 19:41:30 +12:00
Code Issues Projects Releases Wiki Activity

Ensure tour popover disappears when finished (#9517)

Browse source
This commit is contained in:
Andrew Kingston 2023-02-02 11:14:40 +00:00 committed by GitHub
parent f73c20147e
commit 0abac846d3
1 changed files with 45 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
packages/builder/src/components/portal/onboarding/TourPopover.svelte
View file

@ -108,50 +108,52 @@
} }
</script> </script>
{#key tourStepKey} {#if tourKey}
<Popover {#key tourStepKey}
align={tourStep?.align} <Popover
bind:this={popover} align={tourStep?.align}
anchor={popoverAnchor} bind:this={popover}
maxWidth={300} anchor={popoverAnchor}
dismissible={false} maxWidth={300}
offset={15} dismissible={false}
> offset={15}
<div class="tour-content"> >
<Layout noPadding gap="M"> <div class="tour-content">
<div class="tour-header"> <Layout noPadding gap="M">
<Heading size="XS">{tourStep?.title || "-"}</Heading> <div class="tour-header">
<div>{`${tourStepIdx + 1}/${tourSteps?.length}`}</div> <Heading size="XS">{tourStep?.title || "-"}</Heading>
</div> <div>{`${tourStepIdx + 1}/${tourSteps?.length}`}</div>
<Body size="S">
<span class="tour-body">
{#if tourStep.layout}
<svelte:component this={tourStep.layout} />
{:else}
{tourStep?.body || ""}
{/if}
</span>
</Body>
<div class="tour-footer">
<div class="tour-navigation">
{#if tourStepIdx > 0}
<Button
secondary
on:click={previousStep}
disabled={tourStepIdx == 0}
>
<div>Back</div>
</Button>
{/if}
<Button cta on:click={nextStep}>
<div>{lastStep ? "Finish" : "Next"}</div>
</Button>
</div> </div>
</div> <Body size="S">
</Layout> <span class="tour-body">
</div> {#if tourStep.layout}
</Popover> <svelte:component this={tourStep.layout} />
{/key} {:else}
{tourStep?.body || ""}
{/if}
</span>
</Body>
<div class="tour-footer">
<div class="tour-navigation">
{#if tourStepIdx > 0}
<Button
secondary
on:click={previousStep}
disabled={tourStepIdx == 0}
>
<div>Back</div>
</Button>
{/if}
<Button cta on:click={nextStep}>
<div>{lastStep ? "Finish" : "Next"}</div>
</Button>
</div>
</div>
</Layout>
</div>
</Popover>
{/key}
{/if}
<style> <style>
.tour-content { .tour-content {