more actions, new colors (very bad going to change)
This commit is contained in:
@@ -1,162 +1,203 @@
|
||||
<template>
|
||||
<aside
|
||||
class="bg-[hsl(223,calc(1*6.9%),19.8%)] min-w-60 w-60 h-screen shadow-sm text-white select-none grid grid-rows-[93.5%_1fr] relative z-[2]">
|
||||
<div v-if="serverType === 'dms' || !server">
|
||||
<div>
|
||||
<nuxt-link v-for="dm in dms"
|
||||
:to="'/channel/@me/' + dm.id">
|
||||
<div
|
||||
class="mx-2 my-4 hover:bg-[hsl(223,calc(1*6.9%),25.8%)] px-2 py-2 w-[calc(240px-1rem)] max-h-10 h-10 overflow-ellipsis rounded-md transition-colors">
|
||||
{{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full"
|
||||
v-else>
|
||||
<h4 @click="serverDropdownOpen = !serverDropdownOpen"
|
||||
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-[hsl(223,calc(1*6.9%),19.8%)] transition-all"
|
||||
:class="(!serverDropdownOpen) ? 'hover:bg-[hsl(223,calc(1*6.9%),26.4%)]' : 'bg-[hsl(223,calc(1*6.9%),26.4%)]'">
|
||||
<span>{{ server.name }}</span>
|
||||
<button>
|
||||
<span v-if="!serverDropdownOpen"
|
||||
class="h-fit w-[20px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m6 9l6 6l6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="h-fit w-[20px]"
|
||||
v-else>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18 6L6 18M6 6l12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</h4>
|
||||
<div>
|
||||
<DropdownMenu :opened="serverDropdownOpen">
|
||||
<div>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<DropdownItem v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite">
|
||||
<span>
|
||||
Invite a friend
|
||||
</span>
|
||||
<span class="h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="9"
|
||||
cy="7"
|
||||
r="4" />
|
||||
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
</ul>
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<div class="flex gap-y-1.5 px-1.5 mt-2 flex-col">
|
||||
<button
|
||||
class="flex text-center hover:bg-[hsl(223,calc(1*6.9%),26.4%)] px-2 py-1.5 w-full transition-colors rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
|
||||
v-for="channel in server.channels"
|
||||
@click="openChannel(channel.id)"
|
||||
:key="channel.id">
|
||||
<span class="h-fit">
|
||||
<svg class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>{{ channel.name }}</span>
|
||||
</button>
|
||||
<button v-if="userIsOwner || userIsAdmin"
|
||||
@click="openCreateChannelModel"
|
||||
class="flex text-center hover:bg-[hsl(223,calc(1*6.9%),26.4%)] px-2 py-1.5 w-full transition-colors rounded drop-shadow-sm cursor-pointer items-center">
|
||||
<span>
|
||||
<svg class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v14m-7-7h14" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Add channel</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="bg-[var(--background-color)] min-w-60 w-60 h-screen shadow-sm text-white select-none relative z-[2]">
|
||||
<div v-if="serverType === 'dms' || !server"
|
||||
class="h-full grid grid-rows-[48px_1fr] w-full">
|
||||
<section>
|
||||
<h4 @click="serverDropdownOpen = !serverDropdownOpen"
|
||||
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all">
|
||||
<span>Direct messages</span>
|
||||
</h4>
|
||||
</section>
|
||||
|
||||
<div class="relative">
|
||||
<DropdownMenu class="bottom-full"
|
||||
:inverted="true"
|
||||
:opened="userDropdownOpen">
|
||||
<div
|
||||
class="h-[calc(100%-24px)] my-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
|
||||
<div class="h-fit">
|
||||
<nuxt-link v-for="dm in dms"
|
||||
:to="'/channel/@me/' + dm.id">
|
||||
<div
|
||||
class="mx-2 my-4 bg-inherit hover:backdrop-brightness-[1.35] px-2 py-2 max-h-10 h-10 overflow-ellipsis rounded-md transition-all">
|
||||
{{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
class="w-full h-full max-h-screen grid grid-rows-[48px_1fr]">
|
||||
<section>
|
||||
<h4 @click="serverDropdownOpen = !serverDropdownOpen"
|
||||
class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all rounded-lg"
|
||||
:class="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'">
|
||||
<span>{{ server.name }}</span>
|
||||
<button>
|
||||
<span v-if="!serverDropdownOpen"
|
||||
class="h-fit w-[20px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m6 9l6 6l6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="h-fit w-[20px]"
|
||||
v-else>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18 6L6 18M6 6l12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</h4>
|
||||
<div>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<DropdownItem v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite">
|
||||
<span>
|
||||
Invite a friend
|
||||
</span>
|
||||
<span class="mr-1.5 h-fit">
|
||||
<DropdownMenu :opened="serverDropdownOpen">
|
||||
<div>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<DropdownItem v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite">
|
||||
<span>
|
||||
Invite a friend
|
||||
</span>
|
||||
<span class="h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="9"
|
||||
cy="7"
|
||||
r="4" />
|
||||
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
</ul>
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div
|
||||
class="h-[calc(100%-24px)] my-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
|
||||
<div class="flex gap-y-1.5 px-1.5 mt-2 flex-col overflow-x-scroll">
|
||||
<button
|
||||
class="flex text-center bg-inherit hover:backdrop-brightness-[1.35] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
|
||||
v-for="channel in server.channels"
|
||||
@click="openChannel(channel.id)"
|
||||
:key="channel.id">
|
||||
<span class="h-fit">
|
||||
<svg class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>{{ channel.name }}</span>
|
||||
</button>
|
||||
<button v-if="userIsOwner || userIsAdmin"
|
||||
@click="openCreateChannelModel"
|
||||
class="flex text-center bg-inherit hover:backdrop-brightness-[1.45] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm cursor-pointer items-center">
|
||||
<span>
|
||||
<svg class="text-zinc-300/80 my-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v14m-7-7h14" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Add channel</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative bottom-0">
|
||||
<DropdownMenu class="bottom-full"
|
||||
:inverted="true"
|
||||
:opened="userDropdownOpen">
|
||||
<div>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<DropdownItem v-if="userIsOwner || userIsAdmin"
|
||||
@click="createInvite">
|
||||
<span>
|
||||
Invite a friend
|
||||
</span>
|
||||
<span class="mr-1.5 h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="9"
|
||||
cy="7"
|
||||
r="4" />
|
||||
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
<DropdownItem @click="logout"
|
||||
danger="true">
|
||||
<span>
|
||||
Logout
|
||||
</span>
|
||||
<span class="mr-1.5 h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<path
|
||||
d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2" />
|
||||
<path d="M7 12h14l-3-3m0 6l3-3" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
</ul>
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
<div class="h-full p-3">
|
||||
<div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center">
|
||||
<span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full"></span>
|
||||
<span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span>
|
||||
<button @click="userDropdownOpen = !userDropdownOpen"
|
||||
class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<circle cx="9"
|
||||
cy="7"
|
||||
r="4" />
|
||||
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-10h6m-3-3v6" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
<DropdownItem @click="logout" danger="true">
|
||||
<span>
|
||||
Logout
|
||||
</span>
|
||||
<span class="mr-1.5 h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
@@ -164,38 +205,15 @@
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<path
|
||||
d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2" />
|
||||
<path d="M7 12h14l-3-3m0 6l3-3" />
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065z" />
|
||||
<circle cx="12"
|
||||
cy="12"
|
||||
r="3" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</DropdownItem>
|
||||
</ul>
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
<div class="bg-[hsl(220,calc(1*6.8%),17.3%)] h-full p-3">
|
||||
<div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center">
|
||||
<span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full"></span>
|
||||
<span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span>
|
||||
<button @click="userDropdownOpen = !userDropdownOpen"
|
||||
class="text-zinc-300 hover:bg-[hsl(220,calc(1*6.8%),14.3%)] p-1 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<path
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065z" />
|
||||
<circle cx="12"
|
||||
cy="12"
|
||||
r="3" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -203,7 +221,7 @@
|
||||
|
||||
<div v-if="createChannelModelOpen"
|
||||
class="absolute z-10 top-0 bottom-0 left-0 right-0">
|
||||
<div class="bg-zinc-900/80 w-screen h-screen"
|
||||
<div class="bg-[var(--primary-600)] w-screen h-screen"
|
||||
@click="createChannelModelOpen = false">
|
||||
</div>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user