MapComplete/MapComplete
MapComplete/MapComplete
5
9
Fork 10
Code Issues 206 Pull requests 3 Releases Activity Actions 2

Studio: use accordions in SchemaBasedArray.svelte to make browsing more easy

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-06-19 00:29:19 +02:00
parent f2e3888a56
commit 62944c3883
4 changed files with 39 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/UI/Studio/Region.svelte
View file

@ -6,6 +6,7 @@
import type { ConfigMeta } from "./configMeta" import type { ConfigMeta } from "./configMeta"
import EditLayerState from "./EditLayerState" import EditLayerState from "./EditLayerState"
import SchemaBasedInput from "./SchemaBasedInput.svelte" import SchemaBasedInput from "./SchemaBasedInput.svelte"
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
export let state: EditLayerState export let state: EditLayerState
export let configs: ConfigMeta[] export let configs: ConfigMeta[]
@ -25,15 +26,15 @@
{:else if configs.length === 0} {:else if configs.length === 0}
Bug: Region received empty list as configuration at {path.join(".")} Bug: Region received empty list as configuration at {path.join(".")}
{:else if title} {:else if title}
<div class="flex w-full flex-col"> <AccordionSingle>
<h3>{title}</h3> <div slot="header">{title}</div>
<div class="flex w-full flex-col gap-y-1 border border-black pl-2"> <div class="flex w-full flex-col gap-y-1 border border-black pl-2">
<slot name="description" /> <slot name="description" />
{#each configsFiltered as config} {#each configsFiltered as config}
<SchemaBasedInput {state} path={config.path} schema={config} /> <SchemaBasedInput {state} path={config.path} schema={config} />
{/each} {/each}
</div> </div>
</div> </AccordionSingle>
{:else} {:else}
<div class="flex w-full flex-col gap-y-1 pl-2"> <div class="flex w-full flex-col gap-y-1 pl-2">
{#each configsFiltered as config} {#each configsFiltered as config}

10
src/UI/Studio/SchemaBasedArray.svelte
View file

@ -9,6 +9,7 @@
import SchemaBasedMultiType from "./SchemaBasedMultiType.svelte" import SchemaBasedMultiType from "./SchemaBasedMultiType.svelte"
import ShowConversionMessage from "./ShowConversionMessage.svelte" import ShowConversionMessage from "./ShowConversionMessage.svelte"
import Markdown from "../Base/Markdown.svelte" import Markdown from "../Base/Markdown.svelte"
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
export let state: EditLayerState export let state: EditLayerState
export let schema: ConfigMeta export let schema: ConfigMeta
@ -125,6 +126,8 @@
{/each} {/each}
{:else} {:else}
{#each $currentValue as value, i} {#each $currentValue as value, i}
<AccordionSingle>
<span slot="header">
{#if !isTagRenderingBlock} {#if !isTagRenderingBlock}
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h3 class="m-0">{singular} {i}</h3> <h3 class="m-0">{singular} {i}</h3>
@ -138,7 +141,9 @@
</button> </button>
</div> </div>
{/if} {/if}
<div class="border border-black"> </span>
<div class="normal-background p-2">
{#if isTagRenderingBlock} {#if isTagRenderingBlock}
<QuestionPreview {state} path={fusePath(i, [])} {schema}> <QuestionPreview {state} path={fusePath(i, [])} {schema}>
<button <button
@ -191,7 +196,10 @@
<SchemaBasedInput {state} path={fusePath(i, [subpart.path.at(-1)])} schema={subpart} /> <SchemaBasedInput {state} path={fusePath(i, [subpart.path.at(-1)])} schema={subpart} />
{/each} {/each}
{/if} {/if}
</div> </div>
</AccordionSingle>
{/each} {/each}
{/if} {/if}
<div class="flex"> <div class="flex">

6
src/UI/StudioGui.ts
View file

@ -3,7 +3,11 @@ import StudioGUI from "./StudioGUI.svelte"
export default class StudioGui { export default class StudioGui {
public setup() { public setup() {
new SvelteUIElement(StudioGUI, {}).SetClass("h-full").AttachTo("main") new StudioGUI(
{
target: document.getElementById("main")
}
)
} }
} }

2
studio.html
View file

@ -18,7 +18,7 @@
</head> </head>
<body> <body>
<div id="main" class="h-full">Loading studio...</div> <div id="main" class="h-full"></div>
<script src="./src/UI/StudioGui.ts" type="module"></script> <script src="./src/UI/StudioGui.ts" type="module"></script>
<script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="https://gc.zgo.at/count.js" crossorigin="anonymous" integrity="sha384-QfJMxHNngbaF6IXH2kBwubsLYh7GVSFmJOX1O1YKJBq+zv1VVypB9BysTzyG1D1U"></script> <script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="https://gc.zgo.at/count.js" crossorigin="anonymous" integrity="sha384-QfJMxHNngbaF6IXH2kBwubsLYh7GVSFmJOX1O1YKJBq+zv1VVypB9BysTzyG1D1U"></script>