CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-08 21:51:58 +12:00
Code Issues Projects Releases Wiki Activity

Feedback

Browse source
This commit is contained in:
Dean 2024-02-23 11:04:19 +00:00
parent d7fa333fce
commit a87b158d41
2 changed files with 63 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/builder/src/components/portal/onboarding/TourWrap.svelte
View file

@ -17,15 +17,7 @@
} }
} }
$: tourKeyWatch = $builderStore.tourKey const scrollToStep = () => {
$: tourStepKeyWatch = $builderStore.tourStepKey
$: if (tourKeyWatch || stepKeys || ready) {
stepKeys.forEach(tourStepKey => {
registerTourNode(tourKeyWatch, tourStepKey)
})
}
$: if (tourKeyWatch || tourStepKeyWatch) {
let tourStepIdx = getCurrentStepIdx( let tourStepIdx = getCurrentStepIdx(
TOURS[tourKeyWatch]?.steps, TOURS[tourKeyWatch]?.steps,
tourStepKeyWatch tourStepKeyWatch
@ -39,6 +31,15 @@
} }
} }
$: tourKeyWatch = $builderStore.tourKey
$: tourStepKeyWatch = $builderStore.tourStepKey
$: if (tourKeyWatch || stepKeys || ready) {
stepKeys.forEach(tourStepKey => {
registerTourNode(tourKeyWatch, tourStepKey)
})
}
$: scrollToStep(tourKeyWatch, tourStepKeyWatch)
onMount(() => { onMount(() => {
ready = true ready = true
}) })

51
packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/FormTypeModal.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { ModalContent, Layout, Body } from "@budibase/bbui" import { ModalContent, Layout, Body, Icon } from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
export let onCancel = () => {} export let onCancel = () => {}
@ -19,6 +19,7 @@
disabled={!type} disabled={!type}
size="L" size="L"
> >
<!-- svelte-ignore a11y-click-events-have-key-events -->
<Layout noPadding gap="S"> <Layout noPadding gap="S">
<div <div
class="form-type" class="form-type"
@ -27,8 +28,19 @@
dispatch("select", "Create") dispatch("select", "Create")
}} }}
> >
<div class="form-type-wrap">
<div class="form-type-content">
<Body noPadding>Create a new row</Body> <Body noPadding>Create a new row</Body>
<Body size="S">For capturing and storing new data from your users</Body> <Body size="S">
For capturing and storing new data from your users
</Body>
</div>
{#if type === "Create"}
<span class="form-type-check">
<Icon size="S" name="CheckmarkCircle" />
</span>
{/if}
</div>
</div> </div>
<div <div
class="form-type" class="form-type"
@ -37,9 +49,18 @@
dispatch("select", "Update") dispatch("select", "Update")
}} }}
> >
<div class="form-type-wrap">
<div class="form-type-content">
<Body noPadding>Update an existing row</Body> <Body noPadding>Update an existing row</Body>
<Body size="S">For viewing and updating existing data</Body> <Body size="S">For viewing and updating existing data</Body>
</div> </div>
{#if type === "Update"}
<span class="form-type-check">
<Icon size="S" name="CheckmarkCircle" />
</span>
{/if}
</div>
</div>
<div <div
class="form-type" class="form-type"
class:selected={type === "View"} class:selected={type === "View"}
@ -47,9 +68,18 @@
dispatch("select", "View") dispatch("select", "View")
}} }}
> >
<div class="form-type-wrap">
<div class="form-type-content">
<Body noPadding>View an existing row</Body> <Body noPadding>View an existing row</Body>
<Body size="S">For a read only view of your data</Body> <Body size="S">For a read only view of your data</Body>
</div> </div>
{#if type === "View"}
<span class="form-type-check">
<Icon size="S" name="CheckmarkCircle" />
</span>
{/if}
</div>
</div>
</Layout> </Layout>
</ModalContent> </ModalContent>
</span> </span>
@ -59,7 +89,6 @@
cursor: pointer; cursor: pointer;
gap: var(--spacing-s); gap: var(--spacing-s);
padding: var(--spacing-m) var(--spacing-xl); padding: var(--spacing-m) var(--spacing-xl);
/* padding: 10px 16px technically correct*/
background: var(--spectrum-alias-background-color-secondary); background: var(--spectrum-alias-background-color-secondary);
transition: 0.3s all; transition: 0.3s all;
border: 1px solid var(--spectrum-global-color-gray-300); border: 1px solid var(--spectrum-global-color-gray-300);
@ -71,7 +100,23 @@
.form-type:hover { .form-type:hover {
background: var(--spectrum-alias-background-color-tertiary); background: var(--spectrum-alias-background-color-tertiary);
} }
.form-type-wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-type :global(p:nth-child(2)) { .form-type :global(p:nth-child(2)) {
color: var(--grey-6); color: var(--grey-6);
} }
.form-type-check {
margin-left: auto;
}
.form-type-check :global(.spectrum-Icon) {
color: var(--spectrum-global-color-green-600);
}
.form-type-content {
gap: var(--spacing-s);
display: flex;
flex-direction: column;
}
</style> </style>