remember chosen enditor when reloading

invopop · Sep 8, 2023 · 02f5fd7 · 02f5fd7
1 parent 57ace0a
commit 02f5fd7
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 22 deletions.
diff --git a/src/lib/GOBLBuilder.svelte b/src/lib/GOBLBuilder.svelte
@@ -52,7 +52,7 @@
  export let signEnabled = true;
 
  // Whether shows the code or the form editor
- let editorView = "code";
+ let editorView = localStorage.getItem("editor-view") || "code";
  let initialEditorData = "";
 
  if (signEnabled) {
@@ -61,6 +61,8 @@
  });
  }
 
+ $: localStorage.setItem("editor-view", editorView);
+
  // jsonSchema is stored for validations in code editor
  $: jsonSchema.set(jsonSchemaURL);
 

diff --git a/src/lib/editor/form/EditableDateField.svelte b/src/lib/editor/form/EditableDateField.svelte
@@ -20,7 +20,9 @@
  on:change={handleChange}
  on:keyup={handleChange}
  on:blur
- class="outline-none w-full bg-white rounded border h-8 py-1.5 px-2 text-gray-700 focus:border-gray-400"
+ class="outline-none w-full border rounded h-8 py-1.5 px-2 text-gray-700 focus:border-gray-400"
  class:border-rose-500={showError}
+ class:bg-slate-50={field.is.calculated}
+ class:border-slate-100={field.is.calculated}
  class:focus:border-rose-500={showError}
 />
diff --git a/src/lib/editor/form/EditableSelectField.svelte b/src/lib/editor/form/EditableSelectField.svelte
@@ -21,8 +21,10 @@
  on:change={handleChange}
  on:keyup={handleChange}
  on:blur
- class="text-ellipsis outline-none w-full bg-white rounded border h-8 py-1.5 pl-2 pr-8 text-gray-700 appearance-none focus:border-gray-400 cursor-pointer"
+ class="text-ellipsis outline-none w-full rounded border h-8 py-1.5 pl-2 pr-8 text-gray-700 appearance-none focus:border-gray-400 cursor-pointer"
  class:border-rose-500={showError}
+ class:bg-slate-50={field.is.calculated}
+ class:border-slate-100={field.is.calculated}
  class:focus:border-rose-500={showError}
 >
  {#each options as opt (opt.value)}

diff --git a/src/lib/editor/form/EditableTextField.svelte b/src/lib/editor/form/EditableTextField.svelte
@@ -27,8 +27,8 @@
  on:keyup={handleChange}
  on:blur
  class="focus:border-gray-400 {classes}"
- class:bg-white={!field.is.calculated}
  class:bg-slate-50={field.is.calculated}
+ class:border-slate-100={field.is.calculated}
  class:border-rose-500={showError}
  class:focus:border-rose-500={showError}
 />

diff --git a/src/lib/editor/form/FieldButtons.svelte b/src/lib/editor/form/FieldButtons.svelte
@@ -9,16 +9,15 @@
 
  const dispatch = createEventDispatcher();
 
- $: classes = field?.is.calculated ? "bg-blue-100" : "bg-color2";
  $: showAdd = ["object", "array"].includes(field?.type || "");
  $: addLabel = field?.type === "array" ? "Add Row" : "Add Property";
  $: canMove = field?.parent?.type === "array";
  $: canMoveUp = canMove && Number(field?.key) > 0;
  $: canMoveDown = canMove && Number(field?.key) < Number(field?.parent?.children?.length) - 1;
 </script>
 
-<div id="fieldBackground" class="flex w-full h-full rounded {classes}" transition:fade={{ duration: 200 }}>
- <div class="flex-shrink-0 left-full h-9 ml-1 top-0 rounded {classes}">
+<div id="fieldBackground" class="flex w-full h-full rounded bg-color2" transition:fade={{ duration: 200 }}>
+ <div class="flex-shrink-0 left-full h-9 top-0 rounded bg-color2">
  <ul class="flex align-middle text-grey-5 h-full">
  {#if showAdd}
  <li>

diff --git a/src/lib/editor/form/FieldTitle.svelte b/src/lib/editor/form/FieldTitle.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
  import type { UIModelField } from "$lib/editor/form/utils/model.js";
- import Tooltip from "$lib/ui/Tooltip.svelte";
- import CalculatedIcon from "$lib/ui/icons/CalculatedIcon.svelte";
  import { Hashtag, Icon } from "svelte-hero-icons";
  export let field: UIModelField<unknown>;
 
@@ -12,17 +10,6 @@
  {#if field.parent?.isArray()}
  <Icon src={Hashtag} class="h-3 text-grey-5 mr-1" /> {arrayTitle} {Number(field.key) + 1}
  {:else}
- <span class:text-blue-500={field.is.calculated}>{field.schema.title || field.key}</span>
- {#if field.is.calculated}
- <span class="ml-2 text-blue-500">
- <Tooltip
- label="This is a calculated field. It will be generated by the builder if missing."
- bgClass="bg-blue-300"
- delay={1000}
- >
- <CalculatedIcon />
- </Tooltip>
- </span>
- {/if}
+ <span class:italic={field.is.calculated}>{field.schema.title || field.key}</span>
  {/if}
 </span>
diff --git a/src/lib/editor/form/LeafField.svelte b/src/lib/editor/form/LeafField.svelte
@@ -9,9 +9,10 @@
  export let parseValue: (value: SchemaValue) => SchemaValue;
  export let parseKey: ((key: SchemaValue) => string) | undefined = undefined;
  export let field: UIModelField<string>;
+ $: label = `${field.schema.description}${field.is.calculated ? " (calculated)" : ""}`;
 </script>
 
-<Tooltip label={field.schema.description} delay={1000} placement="bottom" containerClass="block w-full">
+<Tooltip {label} delay={1000} placement="bottom" containerClass="block w-full">
  <div class="flex items-stretch justify-between w-full gap-2">
  <div class="flex items-start justify-start">
  {#if field.is.editableKey}