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

Update form step control to render tooltips above rather than below buttons

This commit is contained in:
Andrew Kingston 2024-05-02 11:37:58 +01:00
parent a8b74f5f8c
commit b374e6bdc9
1 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
packages/builder/src/components/design/settings/controls/FormStepControls.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import { createEventDispatcher, getContext } from "svelte" import { createEventDispatcher, getContext } from "svelte"
import { ActionButton } from "@budibase/bbui" import { ActionButton, AbsTooltip } from "@budibase/bbui"
const multiStepStore = getContext("multi-step-form-block") const multiStepStore = getContext("multi-step-form-block")
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -28,45 +28,49 @@
</div> </div>
{:else} {:else}
<div class="step-actions"> <div class="step-actions">
<ActionButton <AbsTooltip text="Previous step" noWrap>
size="S" <ActionButton
secondary size="S"
icon="ChevronLeft" secondary
disabled={currentStep === 0} icon="ChevronLeft"
on:click={() => { disabled={currentStep === 0}
stepAction("previousStep") on:click={() => {
}} stepAction("previousStep")
tooltip={"Previous step"} }}
/> />
<ActionButton </AbsTooltip>
size="S" <AbsTooltip text="Next step" noWrap>
secondary <ActionButton
disabled={currentStep === stepCount - 1} size="S"
icon="ChevronRight" secondary
on:click={() => { disabled={currentStep === stepCount - 1}
stepAction("nextStep") icon="ChevronRight"
}} on:click={() => {
tooltip={"Next step"} stepAction("nextStep")
/> }}
<ActionButton />
size="S" </AbsTooltip>
secondary <AbsTooltip text="Remove step" noWrap>
icon="Close" <ActionButton
disabled={stepCount === 1} size="S"
on:click={() => { secondary
stepAction("removeStep") icon="Close"
}} disabled={stepCount === 1}
tooltip={"Remove step"} on:click={() => {
/> stepAction("removeStep")
<ActionButton }}
size="S" />
secondary </AbsTooltip>
icon="MultipleAdd" <AbsTooltip text="Add step" noWrap>
on:click={() => { <ActionButton
stepAction("addStep") size="S"
}} secondary
tooltip={"Add step"} icon="MultipleAdd"
/> on:click={() => {
stepAction("addStep")
}}
/>
</AbsTooltip>
</div> </div>
{/if} {/if}