zoeissleeping/discord-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small frontend rewrite

Browse Source
This commit is contained in:
Zoe
2023-04-24 20:12:36 -05:00
parent 4890d657b5
commit 5743ae664e
40 changed files with 2630 additions and 2569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
components/Nav.vue Executable file → Normal file
View File

@@ -1,13 +1,9 @@
<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<nav
class="p-4 bg-[var(--background-color)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative"
>
<nav class="bg-[var(--primary-bg)] h-screen p-4 grid grid-cols-1 grid-rows-[56px_1fr_56px] shadow shadow-black/80">
<div>
<nuxt-link to="/channel/@me">
<button
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300"
:class="(serverType === 'dms') ? '!rounded-[1.375rem]' : ''"
class="bg-[var(--tertiary-bg)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--tertiary-lightened-bg)] duration-300"
>
<span>
<svg
@@ -46,132 +42,64 @@
</button>
</nuxt-link>
</div>
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
<div class="overflow-y-auto overflow-x-hidden my-2 flex gap-y-2 flex-col">
<div class="w-full flex justify-center">
<hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5">
<hr class="border-2 rounded-md border-[var(--tertiary-bg)] w-8/12 my-0.5">
</div>
<nuxt-link
v-for="server in servers"
:key="server.id"
:to="'/channel/' + server.channels[0]?.id"
>
<button
:key="server.id"
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 h-[56px] w-[56px]"
:class="(activeServer.id === server.id) ? '!rounded-[1.375rem]' : ''"
class="bg-[var(--tertiary-bg)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--tertiary-lightened-bg)] duration-300 h-[56px] w-[56px]"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 256 154"
>
<defs>
<linearGradient
id="svgIDa"
x1="-2.778%"
x2="100%"
y1="32%"
y2="67.556%"
>
<stop
offset="0%"
stop-color="#2298BD"
/>
<stop
offset="100%"
stop-color="#0ED7B5"
/>
</linearGradient>
</defs>
<path
fill="url(#svgIDa)"
d="M128 0C93.867 0 72.533 17.067 64 51.2C76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z"
/>
</svg>
</button>
</nuxt-link>
</div>
<div>
<button
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 text-[var(--primary-accent)] cursor-pointer"
@click="createServerModelOpen = true"
>
<svg
width="32"
height="32"
viewBox="0 0 24 24"
>
<path
viewBox="0 0 24 24"
><g
fill="none"
stroke="currentColor"
stroke="var(--primary-placeholder)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5v14m-7-7h14"
/>
</svg>
</button>
><path d="m8 9l3 3l-3 3m5 0h3" /><path d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></g></svg>
</button>
</nuxt-link>
</div>
</nav>
<div
v-if="createServerModelOpen"
class="absolute z-10 top-0 bottom-0 left-0 right-0"
>
<div
class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white"
<button
class="p-3 rounded-full transition-colors ease-in-out hover:bg-[var(--tertiary-lightened-bg)] duration-300 cursor-pointer"
>
<h2 class="font-semibold text-xl">
Create a server:
</h2>
<div>
<form
class="w-3/5"
@submit.prevent="createServer"
>
<input
v-model="serverName"
type="text"
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]"
placeholder="Server name"
>
<input
type="submit"
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md"
>
</form>
</div>
</div>
<div
class="bg-black/70 w-screen h-screen"
@click="createServerModelOpen = false"
/>
</div>
<svg
width="32"
height="32"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="var(--primary-accent)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5v14m-7-7h14"
/>
</svg>
</button>
</nav>
</template>
<script lang="ts">
import { useGlobalStore } from '~/stores/store';
import { IServer } from '~/types';
import { useServerStore } from '~/stores/serverStore';
export default {
data() {
return {
servers: storeToRefs(useGlobalStore()).servers,
serverType: storeToRefs(useGlobalStore()).activeServerType,
activeServer: storeToRefs(useGlobalStore()).activeServer,
createServerModelOpen: false,
serverName: ''
servers: storeToRefs(useServerStore()).servers
};
},
methods: {
async createServer() {
const globalStore = useGlobalStore();
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers });
this.createServerModelOpen = false;
this.serverName = '';
globalStore.addServer(server);
},
},
}
};
</script>