MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update tour popover to work without data-cy

This commit is contained in:
Andrew Kingston 2023-02-01 08:29:03 +00:00
parent f753116af4
commit c4ed3cbe36
1 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/builder/src/components/portal/onboarding/TourPopover.svelte
View File

@ -115,42 +115,48 @@
anchor={popoverAnchor} anchor={popoverAnchor}
maxWidth={300} maxWidth={300}
dismissible={false} dismissible={false}
offset={15}
> >
<Layout 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">
{#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>
</Layout>
</div>
</Popover> </Popover>
{/key} {/key}
<style> <style>
.tour-content {
padding: var(--spacing-xl);
}
.tour-navigation { .tour-navigation {
grid-gap: var(--spectrum-alias-grid-baseline); grid-gap: var(--spectrum-alias-grid-baseline);
display: flex; display: flex;