Style dialog and buttons
This commit is contained in:
Leon Grünewald
parent
723b305064
commit
3ddbe83ad4
6 changed files with 169 additions and 54 deletions
|
|
@ -3,6 +3,7 @@
|
|||
import Header from "./lib/Header.svelte";
|
||||
import Stream from "./lib/Stream.svelte";
|
||||
import AddStreamDialog from "./lib/AddStreamDialog.svelte";
|
||||
import ManageStreamDialog from "./lib/ManageStreamDialog.svelte";
|
||||
|
||||
let streams = $state([]);
|
||||
let fracsX = $state(0);
|
||||
|
|
@ -39,6 +40,10 @@
|
|||
fracsY = 3;
|
||||
}
|
||||
});
|
||||
|
||||
function closeDialog() {
|
||||
currentDialog = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
|
|
@ -54,8 +59,13 @@
|
|||
newUrl.searchParams.append(newStream.type, newStream.streamId);
|
||||
window.history.pushState({}, null, newUrl);
|
||||
}}
|
||||
close={() => closeDialog()}
|
||||
></AddStreamDialog>
|
||||
{/if}
|
||||
{#if currentDialog === "manage-streams"}
|
||||
<ManageStreamDialog close={() => closeDialog()} bind:streams
|
||||
></ManageStreamDialog>
|
||||
{/if}
|
||||
<!--{#if currentDialog === "remove-stream"}
|
||||
<RemoveStreamDialog
|
||||
remove={(streamId) => {
|
||||
|
|
|
|||
30
src/app.css
30
src/app.css
|
|
@ -1,4 +1,30 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background: white;
|
||||
line-height: 2rem;
|
||||
padding: 0 1rem;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background: white;
|
||||
line-height: 2rem;
|
||||
padding: 0 1rem;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
color: #000000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,71 @@
|
|||
<script>
|
||||
let { add } = $props();
|
||||
import Dialog from "./Dialog.svelte";
|
||||
|
||||
let { add, close } = $props();
|
||||
let step = $state(0);
|
||||
|
||||
let type = null;
|
||||
let streamId = $state("doggoat");
|
||||
</script>
|
||||
|
||||
<div class="add-stream-dialog">
|
||||
{#if step === 0}
|
||||
<div>
|
||||
<h2>Add stream</h2>
|
||||
<button
|
||||
onclick={() => {
|
||||
type = "vdo";
|
||||
step = 1;
|
||||
}}>vdo.ninja</button
|
||||
>
|
||||
<button
|
||||
onclick={() => {
|
||||
type = "twitch";
|
||||
step = 1;
|
||||
}}>Twitch</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{#if step === 1}
|
||||
<div>
|
||||
<p>
|
||||
Example:<br />
|
||||
https://vdo.ninja/?view=<strong>doggoat</strong
|
||||
>&bitrate=4500&proaudio<br />
|
||||
https://www.twitch.tv/<strong>saltybet</strong>
|
||||
</p>
|
||||
<label>Stream ID: <input bind:value={streamId} /></label>
|
||||
<button
|
||||
onclick={() => {
|
||||
add({ type, streamId });
|
||||
step = 0;
|
||||
}}>Add</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<Dialog close={() => close()}>
|
||||
<div class="add-stream-dialog">
|
||||
{#if step === 0}
|
||||
<div class="step-0">
|
||||
<h2>Add stream</h2>
|
||||
<div class="buttons">
|
||||
<button
|
||||
onclick={() => {
|
||||
type = "vdo";
|
||||
step = 1;
|
||||
}}>vdo.ninja</button
|
||||
>
|
||||
<button
|
||||
onclick={() => {
|
||||
type = "twitch";
|
||||
step = 1;
|
||||
}}>Twitch</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if step === 1}
|
||||
<div class="step-1">
|
||||
<h2>Add stream</h2>
|
||||
<p>
|
||||
Example:<br />
|
||||
https://vdo.ninja/?view=<strong>doggoat</strong
|
||||
>&bitrate=4500&proaudio<br />
|
||||
https://www.twitch.tv/<strong>saltybet</strong>
|
||||
</p>
|
||||
<label
|
||||
>Stream ID: <input
|
||||
type="text"
|
||||
bind:value={streamId}
|
||||
/></label
|
||||
>
|
||||
<button
|
||||
onclick={() => {
|
||||
add({ type, streamId });
|
||||
step = 0;
|
||||
}}>Add</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<style>
|
||||
.add-stream-dialog {
|
||||
padding: 1rem;
|
||||
background-color: #0000000a;
|
||||
position: absolute;
|
||||
width: 50vh;
|
||||
height: 50vh;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
43
src/lib/Dialog.svelte
Normal file
43
src/lib/Dialog.svelte
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script>
|
||||
let { children, close } = $props();
|
||||
</script>
|
||||
|
||||
<div class="dialog">
|
||||
<button
|
||||
class="close"
|
||||
onclick={() => {
|
||||
if (close) close();
|
||||
}}>x</button
|
||||
>
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dialog {
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
width: 50vw;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
|
||||
/*
|
||||
* Created with https://www.css-gradient.com
|
||||
* Gradient link: https://www.css-gradient.com/?c1=0b49d0&c2=8e0871>=l&gd=dtl
|
||||
*/
|
||||
background: #0b49d0;
|
||||
background: linear-gradient(135deg, #0b49d0, #8e0871);
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,11 @@
|
|||
currentDialog = $bindable(null),
|
||||
containerElement = $bindable(null),
|
||||
} = $props();
|
||||
|
||||
const buttons = [
|
||||
{ key: "add-stream", label: "Add Stream" },
|
||||
{ key: "manage-streams", label: "Manage Streams" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<header>
|
||||
|
|
@ -13,13 +18,15 @@
|
|||
}}>[{showButtons ? "<" : ">"}]</button
|
||||
>
|
||||
{#if showButtons}
|
||||
<button
|
||||
onclick={() => {
|
||||
currentDialog = "add-stream";
|
||||
}}
|
||||
>
|
||||
Add Stream</button
|
||||
>
|
||||
{#each buttons as { key, label }}
|
||||
<button
|
||||
onclick={() => {
|
||||
currentDialog = key;
|
||||
}}
|
||||
>
|
||||
{label}</button
|
||||
>
|
||||
{/each}
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
|
|
@ -27,6 +34,7 @@
|
|||
header {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
|
|||
14
src/lib/ManageStreamDialog.svelte
Normal file
14
src/lib/ManageStreamDialog.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
import Dialog from "./Dialog.svelte";
|
||||
|
||||
let { streams = $bindable(null), close } = $props();
|
||||
</script>
|
||||
|
||||
<Dialog close={() => close()}>
|
||||
<pre>
|
||||
{JSON.stringify(streams)}
|
||||
</pre>
|
||||
</Dialog>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Loading…
Reference in a new issue