mirror of
https://github.com/mollersuite/monofile.git
synced 2024-11-28 16:36:27 -08:00
b frorgorot to commit this
This commit is contained in:
parent
94c73b6dc0
commit
2516643561
|
@ -35,4 +35,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulldown_display {
|
||||||
|
position:absolute;
|
||||||
|
left:0px;
|
||||||
|
top:0px;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
}
|
}
|
|
@ -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
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
|
@ -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>
|
7
src/svelte/elem/pulldowns/FAQ.svelte
Normal file
7
src/svelte/elem/pulldowns/FAQ.svelte
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
<script>
|
||||||
|
import Pulldown from "./Pulldown.svelte"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Pulldown>
|
||||||
|
<p>faq: how do i kms</p>
|
||||||
|
</Pulldown>
|
7
src/svelte/elem/pulldowns/Files.svelte
Normal file
7
src/svelte/elem/pulldowns/Files.svelte
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
<script>
|
||||||
|
import Pulldown from "./Pulldown.svelte"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Pulldown>
|
||||||
|
<p>no</p>
|
||||||
|
</Pulldown>
|
|
@ -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>
|
Loading…
Reference in a new issue