Multi Collapse
This commit is contained in:
Sidharth Vinod
@@ -1,11 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { slide } from 'svelte/transition';
|
||||
import Tabs from '$lib/components/tabs.svelte';
|
||||
export let isOpen: boolean = true;
|
||||
export let tabs: Tab[] = [];
|
||||
export let title: string;
|
||||
</script>
|
||||
|
||||
<div class={`bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col `}>
|
||||
<div class="bg-blue-400 border-gray-400 p-2 flex-none">
|
||||
<slot name="title" />
|
||||
<div class="flex justify-between">
|
||||
<Tabs on:select {tabs} bind:isOpen {title} />
|
||||
<div class="flex gap-x-4 text-white">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if isOpen}
|
||||
<div class="flex-grow overflow-auto" transition:slide>
|
||||
|
||||
@@ -69,19 +69,14 @@
|
||||
let isOpen = true;
|
||||
</script>
|
||||
|
||||
<Card {isOpen}>
|
||||
<div slot="title" class="flex justify-between">
|
||||
<div class="flex">
|
||||
<Tabs on:select={tabSelectHandler} bind:isOpen {tabs} title="History" />
|
||||
</div>
|
||||
<div class="flex gap-x-4 text-white">
|
||||
<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => saveHistory()}
|
||||
>💾</button
|
||||
>
|
||||
<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => clearHistory()}
|
||||
>❌</button
|
||||
>
|
||||
</div>
|
||||
<Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
|
||||
<div slot="actions">
|
||||
<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => saveHistory()}
|
||||
>💾</button
|
||||
>
|
||||
<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => clearHistory()}
|
||||
>❌</button
|
||||
>
|
||||
</div>
|
||||
<ul class="p-2 space-y-2 overflow-auto h-56">
|
||||
{#each $historyStore as { state, time, name }}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { updateCode, updateCodeStore } from '$lib/util/state';
|
||||
import { updateCode } from '$lib/util/state';
|
||||
import Card from '$lib/components/card.svelte';
|
||||
|
||||
const samples = {
|
||||
'Flow Chart': `graph TD
|
||||
@@ -76,11 +77,13 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="flex gap-2 flex-wrap p-2">
|
||||
{#each Object.keys(samples) as sample}
|
||||
<button
|
||||
class="rounded p-2 bg-blue-400 shadow flex-auto text-white hover:bg-blue-500"
|
||||
on:click={() => loadSampleDiagram(sample)}>{sample}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
<Card title="Presets" isOpen={false}>
|
||||
<div class="flex gap-2 flex-wrap p-2">
|
||||
{#each Object.keys(samples) as sample}
|
||||
<button
|
||||
class="rounded p-2 bg-blue-400 shadow flex-auto text-white hover:bg-blue-500"
|
||||
on:click={() => loadSampleDiagram(sample)}>{sample}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -3,10 +3,11 @@
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let tabs: Tab[] = [];
|
||||
export let activeTabID: string = tabs[0].id;
|
||||
export let title: string;
|
||||
|
||||
export let isOpen = false;
|
||||
|
||||
let activeTabID: string = tabs[0]?.id;
|
||||
|
||||
const dispatch = createEventDispatcher<TabEvents>();
|
||||
const toggleTabs = (tab: Tab) => {
|
||||
activeTabID = tab.id;
|
||||
@@ -14,22 +15,24 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<span class="text-white mr-2" on:click={() => (isOpen = !isOpen)}>{title}</span>
|
||||
{#if isOpen}
|
||||
<ul class="flex list-none flex-wrap flex-row" transition:fade>
|
||||
{#each tabs as tab}
|
||||
<li class="mr-2 last:mr-0 flex-auto text-center">
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
class="text font-bold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t block leading-normal {activeTabID ===
|
||||
tab.id
|
||||
? 'text-blue-500 bg-white border-white'
|
||||
: 'text-white bg-blue-500 border-blue-500'}"
|
||||
on:click={() => toggleTabs(tab)}
|
||||
>
|
||||
{tab.title}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
<div class="flex">
|
||||
<span class="text-white mr-2" on:click={() => (isOpen = !isOpen)}>{title}</span>
|
||||
{#if isOpen && tabs}
|
||||
<ul class="flex list-none flex-wrap flex-row" transition:fade>
|
||||
{#each tabs as tab}
|
||||
<li class="mr-2 last:mr-0 flex-auto text-center">
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
class="text font-bold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t block leading-normal {activeTabID ===
|
||||
tab.id
|
||||
? 'text-blue-500 bg-white border-white'
|
||||
: 'text-white bg-blue-500 border-blue-500'}"
|
||||
on:click={() => toggleTabs(tab)}
|
||||
>
|
||||
{tab.title}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
+18
-25
@@ -4,7 +4,6 @@
|
||||
import Preset from '$lib/components/preset.svelte';
|
||||
import View from '$lib/components/view.svelte';
|
||||
import Card from '$lib/components/card.svelte';
|
||||
import Tabs from '$lib/components/tabs.svelte';
|
||||
import History from '$lib/components/history/history.svelte';
|
||||
import {
|
||||
initURLSubscription,
|
||||
@@ -111,22 +110,17 @@
|
||||
<Navbar />
|
||||
<div class="flex-1 flex overflow-hidden">
|
||||
<div class="w-2/5 flex flex-col">
|
||||
<Card>
|
||||
<div slot="title" class="flex justify-between">
|
||||
<div class="flex">
|
||||
<Tabs on:select={tabSelectHandler} {tabs} isOpen={true} title="Mermaid" />
|
||||
</div>
|
||||
<div class="flex gap-x-4 text-white">
|
||||
{#if !$codeStore.autoSync}
|
||||
<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}
|
||||
>🔄</button
|
||||
>
|
||||
{/if}
|
||||
<label for="autoSync">
|
||||
<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
|
||||
Auto sync
|
||||
</label>
|
||||
</div>
|
||||
<Card on:select={tabSelectHandler} {tabs} isOpen={true} title="Mermaid">
|
||||
<div slot="actions">
|
||||
{#if !$codeStore.autoSync}
|
||||
<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}
|
||||
>🔄</button
|
||||
>
|
||||
{/if}
|
||||
<label for="autoSync">
|
||||
<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
|
||||
Auto sync
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
|
||||
@@ -140,14 +134,13 @@
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<Card>
|
||||
<div slot="title" class="text-white flex justify-between">
|
||||
<div>Diagram</div>
|
||||
<button
|
||||
class="rounded shadow px-2 bg-blue-500 hover:bg-blue-700"
|
||||
on:click={() => viewDiagram()}>View</button
|
||||
>
|
||||
</div>
|
||||
<Card title="Diagram">
|
||||
<button
|
||||
slot="actions"
|
||||
class="rounded shadow px-2 bg-blue-500 hover:bg-blue-700"
|
||||
on:click={() => viewDiagram()}>View</button
|
||||
>
|
||||
|
||||
<div class="flex-1 overflow-auto">
|
||||
<View />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user