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

Add swap overlay when changing modes and improve styles

This commit is contained in:
Andrew Kingston 2024-02-26 13:31:34 +00:00
parent d666d03328
commit ad576e2c01
4 changed files with 89 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/bbui/src/Drawer/Drawer.svelte
View File

@ -197,6 +197,9 @@
bottom: calc(var(--spacing) + 210px); bottom: calc(var(--spacing) + 210px);
max-width: calc(100vw - 200px); max-width: calc(100vw - 200px);
max-height: calc(100vh - 200px); max-height: calc(100vh - 200px);
display: flex;
flex-direction: column;
align-items: stretch;
} }
.drawer.modal { .drawer.modal {
left: 50vw; left: 50vw;

3
packages/bbui/src/Drawer/DrawerContent.svelte
View File

@ -17,8 +17,9 @@
<style> <style>
.drawer-contents { .drawer-contents {
height: 100%;
overflow-y: auto; overflow-y: auto;
flex: 1 1 auto;
height: 0;
} }
.container { .container {
height: 100%; height: 100%;

101
packages/builder/src/components/common/bindings/BindingPanel.svelte
View File

@ -1,5 +1,12 @@
<script> <script>
import { DrawerContent, ActionButton, Icon, Helpers } from "@budibase/bbui" import {
DrawerContent,
ActionButton,
Icon,
Heading,
Body,
Button,
} from "@budibase/bbui"
import { createEventDispatcher, getContext, onMount } from "svelte" import { createEventDispatcher, getContext, onMount } from "svelte"
import { import {
isValid, isValid,
@ -67,17 +74,16 @@
$: usingJS = mode === Modes.JavaScript $: usingJS = mode === Modes.JavaScript
$: editorMode = $: editorMode =
mode === Modes.JavaScript ? EditorModes.JS : EditorModes.Handlebars mode === Modes.JavaScript ? EditorModes.JS : EditorModes.Handlebars
$: editorValue = editorMode === EditorModes.JS ? jsValue : hbsValue
$: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode) $: bindingCompletions = bindingsToCompletions(enrichedBindings, editorMode)
$: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value) $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
$: requestUpdateEvaluation(runtimeExpression, context) $: requestUpdateEvaluation(runtimeExpression, context)
$: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos) $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
const updateEvaluation = (expression, context) => { const debouncedUpdateEvaluation = Utils.debounce((expression, context) => {
expressionResult = processStringSync(expression || "", context) expressionResult = processStringSync(expression || "", context)
evaluating = false evaluating = false
} }, 260)
const debouncedUpdateEvaluation = Utils.debounce(updateEvaluation, 260)
const requestUpdateEvaluation = (expression, context) => { const requestUpdateEvaluation = (expression, context) => {
evaluating = true evaluating = true
@ -131,8 +137,22 @@
} }
const changeMode = newMode => { const changeMode = newMode => {
mode = newMode if (targetMode || newMode === mode) {
updateValue(newMode === Modes.JavaScript ? jsValue : hbsValue) return
}
if (editorValue) {
targetMode = newMode
} else {
mode = newMode
}
}
const confirmChangeMode = () => {
jsValue = null
hbsValue = null
updateValue(null)
mode = targetMode
targetMode = null
} }
const changeSidePanel = newSidePanel => { const changeSidePanel = newSidePanel => {
@ -149,18 +169,6 @@
updateValue(jsValue) updateValue(jsValue)
} }
const switchMode = () => {
if (targetMode === "Text") {
jsValue = null
updateValue(jsValue)
} else {
hbsValue = null
updateValue(hbsValue)
}
mode = targetMode + ""
targetMode = null
}
const convert = () => { const convert = () => {
const runtime = readableToRuntimeBinding(enrichedBindings, hbsValue) const runtime = readableToRuntimeBinding(enrichedBindings, hbsValue)
const runtimeJs = encodeJSBinding(convertToJS(runtime)) const runtimeJs = encodeJSBinding(convertToJS(runtime))
@ -250,6 +258,30 @@
placeholder="Add bindings by typing $ or use the menu on the right" placeholder="Add bindings by typing $ or use the menu on the right"
/> />
{/if} {/if}
{#if targetMode}
<div class="mode-overlay">
<div class="prompt-body">
<Heading size="S">
Switch to {targetMode}?
</Heading>
<Body>This will discard anything in your binding</Body>
<div class="switch-actions">
<Button
secondary
size="S"
on:click={() => {
targetMode = null
}}
>
No - keep {mode}
</Button>
<Button cta size="S" on:click={confirmChangeMode}>
Yes - discard {mode}
</Button>
</div>
</div>
</div>
{/if}
</div> </div>
</div> </div>
<div class="side" class:visible={!!sidePanel}> <div class="side" class:visible={!!sidePanel}>
@ -319,6 +351,7 @@
.editor { .editor {
flex: 1 1 auto; flex: 1 1 auto;
height: 0; height: 0;
position: relative;
} }
.editor :global(.code-editor), .editor :global(.code-editor),
.editor :global(.code-editor > div), .editor :global(.code-editor > div),
@ -329,4 +362,34 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
} }
/* Overlay */
.mode-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(
--spectrum-textfield-m-background-color,
var(--spectrum-global-color-gray-50)
);
border-radius: var(--border-radius-s);
}
.prompt-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-l);
}
.prompt-body .switch-actions {
display: flex;
gap: var(--spacing-l);
}
</style> </style>

4
packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
View File

@ -85,7 +85,7 @@
border-left: var(--border-light); border-left: var(--border-light);
} }
.header { .header {
padding: var(--spacing-m); padding: var(--spacing-m) var(--spacing-l);
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
border-bottom: var(--border-light); border-bottom: var(--border-light);
@ -116,7 +116,7 @@
} }
.body { .body {
flex: 1 1 auto; flex: 1 1 auto;
padding: var(--spacing-m); padding: var(--spacing-m) var(--spacing-l);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 12px; font-size: 12px;
overflow-y: scroll; overflow-y: scroll;