Ensure tour popover disappears when finished (#9517)
This commit is contained in:
parent
f73c20147e
commit
0abac846d3
1 changed files with 45 additions and 43 deletions
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue