b frorgorot to commit this

This commit is contained in:
May 2023-02-05 16:45:28 -08:00
parent 94c73b6dc0
commit 2516643561
7 changed files with 48 additions and 23 deletions

View file

@ -35,4 +35,12 @@
} }
z-index: 1001; z-index: 1001;
}
.pulldown_display {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
} }

View file

@ -1,6 +1,17 @@
<script context="module"> <script context="module">
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import { allPulldowns } from "./pulldowns/Pulldown.svelte";
// can't find a better way to do this
import Files from "./pulldowns/Files.svelte";
import Accounts from "./pulldowns/Accounts.svelte";
import FAQ from "./pulldowns/FAQ.svelte";
export let allPulldowns = new Map()
allPulldowns
.set("account",Accounts)
.set("faq",FAQ)
.set("files",Files)
export const pulldownOpen = writable(false); export const pulldownOpen = writable(false);
</script> </script>
@ -8,7 +19,7 @@
<script> <script>
import { onMount } from "svelte"; import { onMount } from "svelte";
import { fade, scale } from "svelte/transition"; import { fade, scale } from "svelte/transition";
export function isOpen() { export function isOpen() {
return $pulldownOpen return $pulldownOpen
} }
@ -27,9 +38,7 @@
</script> </script>
{#if $pulldownOpen} {#if $pulldownOpen}
<div class="pulldown" transition:fade={{duration:200}}> <div class="pulldown" transition:fade={{duration:200}}>
<!-- I'm not sure how I could do this any better, so... yeah --> <svelte:component this={allPulldowns.get($pulldownOpen)} />
</div> </div>
<button <button

View file

@ -18,9 +18,12 @@
transition:_void={{duration:200,prop:"width",easingFunc:circOut}} transition:_void={{duration:200,prop:"width",easingFunc:circOut}}
>close</button> >close</button>
{/if} {/if}
<button class="menuBtn" on:click={pulldown.openPulldown}>what's new</button>
<button class="menuBtn">files</button> <!-- too lazy to make this better -->
<button class="menuBtn">account</button>
<button class="menuBtn" on:click={() => pulldown.openPulldown("files")}>files</button>
<button class="menuBtn" on:click={() => pulldown.openPulldown("account")}>account</button>
<button class="menuBtn" on:click={() => pulldown.openPulldown("faq")}>faq</button>
<div /> <!-- not sure what's offcenter but something is <div /> <!-- not sure what's offcenter but something is
so this div is here to ""fix"" that --> so this div is here to ""fix"" that -->

View file

@ -1,7 +1,7 @@
<script> <script>
import { Pulldown } from "./Pulldown.svelte" import Pulldown from "./Pulldown.svelte"
</script> </script>
<Pulldown name="accounts"> <Pulldown>
<p>accs</p>
</Pulldown> </Pulldown>

View file

@ -0,0 +1,7 @@
<script>
import Pulldown from "./Pulldown.svelte"
</script>
<Pulldown>
<p>faq: how do i kms</p>
</Pulldown>

View file

@ -0,0 +1,7 @@
<script>
import Pulldown from "./Pulldown.svelte"
</script>
<Pulldown>
<p>no</p>
</Pulldown>

View file

@ -1,20 +1,11 @@
<script context="module">
import { writable } from "svelte/store";
export const allPulldowns = writable(new Map());
</script>
<script> <script>
import { pulldownOpen } from "../PulldownManager.svelte";
export let name; import { fade } from "svelte/transition";
allPulldowns
.set(name,this)
</script> </script>
<div <div
class="pulldown_display" class="pulldown_display"
style:display={$pulldownOpen == name ? "block" : "none"} transition:fade={{duration:200}}
> >
<slot /> <slot />
</div> </div>