midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

6
src/UI/StudioGui.ts
View file

@ -3,7 +3,11 @@ import StudioGUI from "./StudioGUI.svelte"
export default class StudioGui {
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>
<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 async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="https://gc.zgo.at/count.js" crossorigin="anonymous" integrity="sha384-QfJMxHNngbaF6IXH2kBwubsLYh7GVSFmJOX1O1YKJBq+zv1VVypB9BysTzyG1D1U"></script>