frontend: make "create channel" modal functional
This commit is contained in:
hippoz
parent
b1ff452732
commit
131a270562
2 changed files with 128 additions and 30 deletions
|
|
@ -19,10 +19,24 @@
|
|||
:root {
|
||||
--background-color-1: hsl(180, 11%, 7%);
|
||||
--background-color-2: hsl(180, 11%, 12%);
|
||||
--background-color-3: hsl(180, 11%, 17%);
|
||||
--foreground-color-1: rgb(253, 254, 255);
|
||||
--foreground-color-2: rgb(218, 219, 220);
|
||||
--foreground-color-3: rgb(153, 154, 155);
|
||||
|
||||
--purple-1: hsl(280, 88%, 50%);
|
||||
--blue-1: hsl(200, 88%, 50%);
|
||||
--green-1: hsl(140, 88%, 50%);
|
||||
--yellow-1: hsl(50, 88%, 65%);
|
||||
--red-1: hsl(2, 88%, 65%);
|
||||
|
||||
--purple-2: hsl(280, 88%, 40%);
|
||||
--blue-2: hsl(200, 88%, 40%);
|
||||
--green-2: hsl(140, 88%, 40%);
|
||||
--yellow-2: hsl(50, 88%, 60%);
|
||||
--red-2: hsl(2, 88%, 60%);
|
||||
|
||||
|
||||
--space-unit: 1em;
|
||||
--space-xxs: calc(0.25 * var(--space-unit));
|
||||
--space-xs: calc(0.5 * var(--space-unit));
|
||||
|
|
@ -88,6 +102,89 @@ body {
|
|||
margin-left: var(--space-xxs);
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--background-color-2);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: var(--space-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
margin-top: auto;
|
||||
padding-top: var(--space-norm);
|
||||
}
|
||||
|
||||
.modal-primary-action {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.modal-secondary-action {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
text-transform: uppercase;
|
||||
color: var(--foreground-color-2);
|
||||
}
|
||||
|
||||
.input {
|
||||
background-color : var(--background-color-3);
|
||||
border: none;
|
||||
color: currentColor;
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-sm);
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: var(--background-color-2);
|
||||
text-align: center;
|
||||
border: none;
|
||||
padding: var(--space-sm);
|
||||
border-radius: var(--radius-md);
|
||||
color: currentColor;
|
||||
font: inherit;
|
||||
max-height: 3em;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--background-color-3)
|
||||
}
|
||||
|
||||
.button-accent {
|
||||
background-color: var(--purple-2);
|
||||
}
|
||||
|
||||
.button-accent:hover {
|
||||
background-color: var(--purple-1);
|
||||
}
|
||||
|
||||
.button-accent:disabled {
|
||||
background-color: var(--purple-2);
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 2.488rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,41 +2,42 @@
|
|||
import { fade, fly } from "svelte/transition";
|
||||
import { quintInOut } from "svelte/easing";
|
||||
import { overlayStore } from "../../stores";
|
||||
import request from "../../request";
|
||||
import { apiRoute } from "../../storage";
|
||||
|
||||
let channelName = "";
|
||||
let createButtonEnabled = true;
|
||||
|
||||
const close = () => overlayStore.close('createChannel');
|
||||
const create = async () => {
|
||||
createButtonEnabled = false;
|
||||
await request("POST", apiRoute("channels"), true, {
|
||||
name: channelName
|
||||
});
|
||||
close();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.modal-backdrop {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: block;
|
||||
margin-bottom: var(--space-xxs);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-width: 450px;
|
||||
min-height: 370px;
|
||||
background-color: var(--background-color-2);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-lg);
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal-backdrop" transition:fade="{{ duration: 350, easing: quintInOut }}" on:click="{() => overlayStore.close('createChannel')}">
|
||||
<div class="modal" transition:fly="{{ duration: 350, easing: quintInOut, y: 15 }}">
|
||||
<span class="h2 modal-header">Create Channel</span>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus earum blanditiis, numquam debitis inventore, fugit quidem ipsa, cum quibusdam accusamus repudiandae aut vitae necessitatibus. Libero, sit! Ex placeat illum iure!
|
||||
<div class="modal-backdrop" transition:fade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
|
||||
<div class="modal" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
|
||||
<div class="modal-header">
|
||||
<span class="h3">Create Channel</span>
|
||||
</div>
|
||||
|
||||
<label class="input-label">
|
||||
Channel Name
|
||||
<input class="input full-width" bind:value={ channelName } />
|
||||
</label>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
|
||||
<button class="button button-accent modal-primary-action" on:click="{ create }" disabled="{ !createButtonEnabled }">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue