Merge branch 'main' into context-menu-ban-kick
This commit is contained in:
commit
2c30b4e0cd
35 changed files with 789 additions and 695 deletions
|
|
@ -12,8 +12,4 @@ export default class Message {
|
|||
this.userUuid = user_uuid;
|
||||
this.message = message;
|
||||
}
|
||||
|
||||
getTimestamp() {
|
||||
return uuidToTimestamp(this.uuid);
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<DefaultIcon v-else
|
||||
class="display-avatar"
|
||||
:name="displayName"
|
||||
:seed="user.uuid"
|
||||
:seed="getUserUuid(props.profile)"
|
||||
:alt="displayName" />
|
||||
</template>
|
||||
|
||||
|
|
@ -14,25 +14,14 @@
|
|||
import { NuxtImg } from '#components';
|
||||
import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
|
||||
|
||||
const { getDisplayName } = useProfile()
|
||||
const { getDisplayName, getAvatarUrl, getUserUuid } = useProfile()
|
||||
|
||||
const props = defineProps<{
|
||||
profile: UserResponse | GuildMemberResponse,
|
||||
}>();
|
||||
|
||||
const displayName = getDisplayName(props.profile)
|
||||
let user: UserResponse
|
||||
let displayAvatar: string | null
|
||||
|
||||
if ("username" in props.profile) {
|
||||
// assume it's a UserResponse
|
||||
displayAvatar = props.profile.avatar
|
||||
user = props.profile
|
||||
} else {
|
||||
// assume it's a GuildMemberResponse
|
||||
displayAvatar = props.profile.user.avatar
|
||||
user = props.profile.user
|
||||
}
|
||||
const displayAvatar = getAvatarUrl(props.profile)
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
let previewName = "";
|
||||
// include the entire name if it's 3 chars or less, use the first char of the first 3 words otherwise
|
||||
if (props.name.length > 3) {
|
||||
let guildName: string[] = props.name.split(' ')
|
||||
for (let i = 0; i < 3; i ++) {
|
||||
|
|
|
|||
85
components/Guild/ChannelNavbar.vue
Normal file
85
components/Guild/ChannelNavbar.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div id="navbar" class="navbar-row">
|
||||
<div id="channel-info" class="navbar-row">
|
||||
<!-- h1 to help screen readers -->
|
||||
<h1 id="channel-name">
|
||||
# {{ channel.name }}
|
||||
</h1>
|
||||
<span id="channel-description">
|
||||
{{ channel.description }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="buttons" class="navbar-row">
|
||||
<a class="button" href="https://git.gorb.app/gorb/frontend">
|
||||
<Icon name="lucide:code-xml" title="Source"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { INavbar } from '~/types/interfaces';
|
||||
|
||||
const props = defineProps<INavbar>();
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navbar-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
--font-size: calc(var(--navbar-height) * 0.45);
|
||||
--side-margins: calc(var(--font-size) * 0.5);
|
||||
|
||||
min-height: var(--navbar-height);
|
||||
max-height: var(--navbar-height);
|
||||
width: 100%;
|
||||
|
||||
background: var(--optional-topbar-background);
|
||||
background-color: var(--topbar-background-color);
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
}
|
||||
|
||||
#channel-info {
|
||||
margin-left: var(--side-margins);
|
||||
gap: calc(var(--font-size) * 0.75);
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#channel-name {
|
||||
font-size: var(--font-size);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#channel-description {
|
||||
font-size: calc(var(--font-size) * 0.8);
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* TODO make new theme colour? unsure of it's name, this is good enough for now */
|
||||
color: var(--reply-text-color);
|
||||
}
|
||||
|
||||
#buttons {
|
||||
margin-right: var(--side-margins);
|
||||
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--secondary-text-color);
|
||||
transition: color 300ms;
|
||||
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: var(--primary-highlighted-color);
|
||||
}
|
||||
</style>
|
||||
92
components/Guild/GuildSidebar.vue
Normal file
92
components/Guild/GuildSidebar.vue
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<ResizableSidebar
|
||||
width="14rem" min-width="8rem" max-width="30rem"
|
||||
border-sides="right" local-storage-name="middleLeftColumn">
|
||||
|
||||
<div id="guild-sidebar">
|
||||
<div id="guild-top-container">
|
||||
<span id="guild-name" :title="props.guild?.name">{{ props.guild?.name }}</span>
|
||||
<button id="guild-settings-button" @click="toggleGuildSettings">
|
||||
<Icon name="lucide:chevron-down" />
|
||||
</button>
|
||||
|
||||
<GuildOptionsMenu v-if="showGuildSettings" />
|
||||
</div>
|
||||
<div id="channels-list">
|
||||
<ChannelEntry v-for="channel of channels"
|
||||
:name="channel.name"
|
||||
:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
|
||||
:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
|
||||
</div>
|
||||
</div>
|
||||
</ResizableSidebar>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
|
||||
import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
|
||||
import type { ChannelResponse, GuildResponse, INavbar } from "~/types/interfaces";
|
||||
|
||||
const props = defineProps<{
|
||||
guild: GuildResponse
|
||||
}>();
|
||||
|
||||
const route = useRoute();
|
||||
const { fetchChannels } = useApi();
|
||||
|
||||
const showGuildSettings = ref(false);
|
||||
|
||||
const channels: ChannelResponse[] = await fetchChannels(props.guild.uuid);
|
||||
|
||||
function toggleGuildSettings(e: Event) {
|
||||
e.preventDefault();
|
||||
showGuildSettings.value = !showGuildSettings.value;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#guild-top-container {
|
||||
min-height: var(--navbar-height);
|
||||
max-height: var(--navbar-height);
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
background-color: var(--topbar-background-color);
|
||||
}
|
||||
|
||||
#guild-name {
|
||||
font-size: 1.5em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#guild-settings-button {
|
||||
background-color: transparent;
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0%;
|
||||
}
|
||||
|
||||
#channels-list {
|
||||
background: var(--optional-channel-list-background);
|
||||
background-color: var(--sidebar-background-color);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
padding-top: .5em;
|
||||
padding-bottom: .5em;
|
||||
max-height: calc(100% - 1em); /* 100% - top and bottom padding */
|
||||
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -37,7 +37,13 @@ function hideModalPopup() {
|
|||
<style>
|
||||
|
||||
.member-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-top: .5em;
|
||||
margin-bottom: .5em;
|
||||
gap: .5em;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
|
|
@ -49,6 +55,7 @@ function hideModalPopup() {
|
|||
|
||||
.member-display-name {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
47
components/Guild/MemberList.vue
Normal file
47
components/Guild/MemberList.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<ResizableSidebar
|
||||
width="14rem" min-width="5.5rem" max-width="30rem"
|
||||
border-sides="left" local-storage-name="membersListWidth">
|
||||
<div id="members-container">
|
||||
<div id="members-list">
|
||||
<MemberEntry v-for="member of members.objects" :member="member" tabindex="0"/>
|
||||
</div>
|
||||
</div>
|
||||
</ResizableSidebar>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
|
||||
import MemberEntry from "./MemberEntry.vue";
|
||||
import type { GuildResponse } from "~/types/interfaces";
|
||||
|
||||
const props = defineProps<{
|
||||
guild: GuildResponse
|
||||
}>();
|
||||
|
||||
const { fetchMembers } = useApi();
|
||||
|
||||
// TODO implement paging
|
||||
const members = await fetchMembers(props.guild.uuid)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#members-container {
|
||||
background-color: var(--chat-background-color);
|
||||
|
||||
padding-top: .5em;
|
||||
padding-bottom: .5em;
|
||||
max-height: calc(100% - 1em); /* 100% - top and bottom padding */
|
||||
}
|
||||
|
||||
#members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +1,22 @@
|
|||
<template>
|
||||
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, messageMenuItems)" :id="props.last ? 'last-message' : undefined"
|
||||
class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.member.user.uuid != props.me.uuid && props.replyMessage?.member.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
|
||||
:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
|
||||
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
|
||||
class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }"
|
||||
:data-message-id="props.message.uuid" :editing.sync="props.editing">
|
||||
<div v-if="props.replyMessage" class="message-reply-svg">
|
||||
<svg
|
||||
width="1.5em" height="1.5em"
|
||||
viewBox="0 0 150 87.5" version="1.1" id="svg1"
|
||||
style="overflow: visible;">
|
||||
<defs id="defs1" />
|
||||
<g id="layer1"
|
||||
transform="translate(40,-35)">
|
||||
<g id="g3"
|
||||
transform="translate(-35,-20)">
|
||||
<g id="layer1" transform="translate(40,-35)">
|
||||
<g id="g3" transform="translate(-35,-20)">
|
||||
<path
|
||||
style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
|
||||
d="m 120.02168,87.850978 100.76157,2.4e-5"
|
||||
d="m 120,87.5 100,2.5e-5"
|
||||
id="path3-5" />
|
||||
<path
|
||||
style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
|
||||
d="M 69.899501,174.963 120.2803,87.700931"
|
||||
d="M 70,150 120,87.5"
|
||||
id="path3-5-2" />
|
||||
</g>
|
||||
</g>
|
||||
|
|
@ -29,36 +27,36 @@
|
|||
:text="props.replyMessage?.message"
|
||||
:reply-id="props.replyMessage.uuid" max-width="reply" />
|
||||
<div class="left-column">
|
||||
<Avatar :profile="props.author" class="message-author-avatar" @contextmenu="showContextMenu($event, contextMenu, memberMenuItems)" />
|
||||
<Avatar :profile="props.message.member" class="message-author-avatar"/>
|
||||
</div>
|
||||
<div class="message-data">
|
||||
<div class="message-metadata">
|
||||
<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`" @contextmenu="showContextMenu($event, contextMenu, memberMenuItems)">
|
||||
{{ getDisplayName(props.author) }}
|
||||
<span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`">
|
||||
{{ getDisplayName(props.message.member) }}
|
||||
</span>
|
||||
<span class="message-date" :title="date.toString()">
|
||||
<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
|
||||
<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
|
||||
|
||||
{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
|
||||
{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
|
||||
<div class="message-text" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
|
||||
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
|
||||
</div>
|
||||
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
|
||||
</div>
|
||||
<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, messageMenuItems)" :id="props.last ? 'last-message' : undefined"
|
||||
class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
|
||||
:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
|
||||
<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
|
||||
class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }"
|
||||
:data-message-id="props.message.uuid" :editing.sync="props.editing">
|
||||
<div class="left-column">
|
||||
<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
|
||||
{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
|
||||
{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="message-data">
|
||||
<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
|
||||
<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
|
||||
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
|
||||
</div>
|
||||
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -71,35 +69,39 @@ import MessageReply from './UserInterface/MessageReply.vue';
|
|||
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
|
||||
|
||||
const { getDisplayName } = useProfile()
|
||||
const { getUser } = useAuth()
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const props = defineProps<MessageProps>();
|
||||
|
||||
const contextMenu = useState<ContextMenuInterface>("contextMenu");
|
||||
const me = await getUser()
|
||||
|
||||
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
|
||||
|
||||
const messageElement = ref<HTMLDivElement>();
|
||||
|
||||
const dateHidden = ref<boolean>(true);
|
||||
|
||||
const date = new Date(props.timestamp);
|
||||
const date = uuidToDate(props.message.uuid);
|
||||
|
||||
const currentDate: Date = new Date()
|
||||
|
||||
console.log("[MSG] message to render:", props.message);
|
||||
console.log("author:", props.author);
|
||||
console.log("author:", props.message.member);
|
||||
console.log("[MSG] reply message:", props.replyMessage);
|
||||
|
||||
const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
|
||||
const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
|
||||
const mediaLinks: string[] = [];
|
||||
const mediaLinks = ref<string[]>([]);
|
||||
console.log("link matches:", linkMatches);
|
||||
|
||||
const hasEmbed = ref(false);
|
||||
const hideText = ref(false);
|
||||
|
||||
const sanitized = ref<string>();
|
||||
|
||||
onMounted(async () => {
|
||||
const parsed = await parse(props.text, { gfm: true });
|
||||
const parsed = await parse(props.message.message, { gfm: true });
|
||||
sanitized.value = DOMPurify.sanitize(parsed, {
|
||||
ALLOWED_TAGS: [
|
||||
"strong", "em", "br", "blockquote",
|
||||
|
|
@ -123,23 +125,35 @@ onMounted(async () => {
|
|||
console.log("added listeners");
|
||||
}
|
||||
|
||||
const links: string[] = [];
|
||||
for (const link of linkMatches) {
|
||||
console.log("link:", link);
|
||||
try {
|
||||
const res = await $fetch.raw(link);
|
||||
if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
|
||||
console.log("link is image");
|
||||
mediaLinks.push(link);
|
||||
console.log("link:", link);
|
||||
try {
|
||||
const res = await $fetch.raw(link);
|
||||
if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
|
||||
console.log("link is image");
|
||||
links.push(link);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
if (mediaLinks.length) {
|
||||
hasEmbed.value = true
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
console.log("media links:", mediaLinks);
|
||||
mediaLinks.value = [...links];
|
||||
}
|
||||
|
||||
if (mediaLinks.value.length) {
|
||||
const nonLinks = props.message.message.split(linkRegex);
|
||||
let invalidContent = false;
|
||||
for (const nonLink of nonLinks) {
|
||||
if (nonLink != "" && nonLink != "\n" && nonLink != "<br>") {
|
||||
invalidContent = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
hideText.value = !invalidContent;
|
||||
};
|
||||
|
||||
console.log("media links:", mediaLinks);
|
||||
});
|
||||
|
||||
//function toggleTooltip(e: Event) {
|
||||
|
|
@ -150,13 +164,13 @@ const messageMenuItems: ContextMenuItem[] = [
|
|||
{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
|
||||
]
|
||||
|
||||
console.log("me:", props.me);
|
||||
if (props.author.user.uuid == props.me.uuid) {
|
||||
console.log("me:", me);
|
||||
if (props.message.member.user.uuid == me!.uuid) {
|
||||
// Inserts "edit" option at index 1 (below the "reply" option)
|
||||
messageMenuItems.splice(Math.min(1, messageMenuItems.length), 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
|
||||
}
|
||||
|
||||
if (props.author.user.uuid == props.me.uuid /* || check message delete permission*/) {
|
||||
if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) {
|
||||
// Inserts "edit" option at index 2 (below the "edit" option)
|
||||
messageMenuItems.splice(Math.min(2, messageMenuItems.length), 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
|
||||
}
|
||||
|
|
@ -178,14 +192,20 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
|
||||
<style scoped>
|
||||
.message {
|
||||
text-align: left;
|
||||
/* border: 1px solid lightcoral; */
|
||||
display: grid;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
grid-template-columns: 4rem 1fr;
|
||||
align-items: center;
|
||||
column-gap: 1dvw;
|
||||
width: 100%;
|
||||
|
||||
text-align: left;
|
||||
/* -4 dvw due to 2dvw of padding on both sides */
|
||||
width: calc(100% - 4dvw);
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
padding-top: .2rem;
|
||||
padding-bottom: .2rem;
|
||||
padding-left: 2dvw;
|
||||
padding-right: 1dvw;
|
||||
border-radius: 0 var(--minor-radius) var(--minor-radius) 0;
|
||||
}
|
||||
|
||||
.message-reply-preview {
|
||||
|
|
@ -201,14 +221,6 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
margin-top: 1dvh;
|
||||
}
|
||||
|
||||
.grouped-message {
|
||||
margin-top: .3em;
|
||||
}
|
||||
|
||||
#last-message {
|
||||
margin-bottom: 2dvh;
|
||||
}
|
||||
|
||||
.message-metadata {
|
||||
display: flex;
|
||||
gap: .5dvw;
|
||||
|
|
@ -217,10 +229,9 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
|
||||
.message-data {
|
||||
/* border: 1px solid white; */
|
||||
margin-left: .5dvw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
|
|
@ -241,6 +252,10 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
|
||||
.message-author-username {
|
||||
cursor: pointer;
|
||||
min-height: 2.5em;
|
||||
max-height: 2.5em;
|
||||
min-width: 2.5em;
|
||||
max-width: 2.5em;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
|
|
@ -251,8 +266,11 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
white-space: nowrap;
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
height: 100%;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
|
||||
.author-username {
|
||||
margin-right: .5dvw;
|
||||
color: white;
|
||||
|
|
@ -266,9 +284,7 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
|
||||
.side-message-date {
|
||||
font-size: .625em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
margin-top: .4em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -278,11 +294,11 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
}
|
||||
*/
|
||||
|
||||
.mentioned {
|
||||
.highlighted {
|
||||
background-color: var(--chat-important-background-color);
|
||||
}
|
||||
|
||||
.mentioned:hover {
|
||||
.highlighted:hover {
|
||||
background-color: var(--chat-important-highlighted-background-color);
|
||||
}
|
||||
|
||||
|
|
@ -307,6 +323,7 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
|
||||
<style>
|
||||
|
||||
/* class used in utils/replyToMessage.ts */
|
||||
.replying-to {
|
||||
background-color: var(--chat-featured-message-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
<template>
|
||||
<div id="message-area">
|
||||
<div id="messages" ref="messagesElement">
|
||||
<Message v-for="(message, i) of messages" :username="getDisplayName(message.member.user)" :key="message.uuid"
|
||||
:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.member.user.avatar"
|
||||
:format="timeFormat" :type="messagesType[message.uuid]"
|
||||
:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
|
||||
:last="i == messages.length - 1" :message-id="message.uuid" :author="message.member" :me="me"
|
||||
<Message v-for="(message, i) of messages" :key="message.uuid"
|
||||
:message="message" :is-reply="message.reply_to"
|
||||
:author-color="`${generateIrcColor(message.member.user.uuid)}`"
|
||||
:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
|
||||
:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined"
|
||||
:type="messagesType[message.uuid]"
|
||||
:editing="false"
|
||||
:is-mentioned="false" />
|
||||
</div>
|
||||
<div id="message-box" class="rounded-corners">
|
||||
<form id="message-form" @submit="sendMessage">
|
||||
|
|
@ -47,6 +45,8 @@ import { generateIrcColor } from '#imports';
|
|||
const { getDisplayName } = useProfile()
|
||||
const { fetchMe } = useApi()
|
||||
|
||||
// TODO this file is a mess, and we need to stop using fetchWithApi
|
||||
|
||||
const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
|
||||
|
||||
const me = await fetchMe() as UserResponse;
|
||||
|
|
@ -320,17 +320,17 @@ router.beforeEach((to, from, next) => {
|
|||
#message-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
|
||||
background-color: var(--chat-background-color);
|
||||
}
|
||||
|
||||
#message-box {
|
||||
margin-top: auto; /* force it to the bottom of the screen */
|
||||
margin-bottom: 2dvh;
|
||||
margin-left: 1dvw;
|
||||
margin-right: 1dvw;
|
||||
margin-left: 2dvw;
|
||||
margin-right: 2dvw;
|
||||
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
|
|
@ -382,8 +382,7 @@ router.beforeEach((to, from, next) => {
|
|||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1dvw;
|
||||
padding-right: 1dvw;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.message-box-button {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div class="media-container">
|
||||
<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
|
||||
<NuxtImg v-for="link of props.links"
|
||||
class="media-item"
|
||||
:src="link"
|
||||
@click.prevent="createModal(link)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,7 +11,6 @@
|
|||
import { ModalBase } from '#components';
|
||||
import { render } from 'vue';
|
||||
|
||||
|
||||
const props = defineProps<{ links: string[] }>();
|
||||
|
||||
function createModal(link: string) {
|
||||
|
|
@ -34,14 +36,15 @@ function createModal(link: string) {
|
|||
<style scoped>
|
||||
|
||||
.media-container {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
margin-left: .5dvw;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.media-item {
|
||||
cursor: pointer;
|
||||
max-width: 15dvw;
|
||||
border-radius: var(--embed-radius);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,18 +1,11 @@
|
|||
<template>
|
||||
<dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
|
||||
<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
|
||||
<Button text="✕" variant="stealth" :callback="onCloseButton" />
|
||||
</span>
|
||||
<div class="modal-content">
|
||||
<h1 class="modal-title">{{ title }}</h1>
|
||||
<slot />
|
||||
</div>
|
||||
<slot />
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ModalProps } from '~/types/interfaces';
|
||||
import Button from '~/components/UserInterface/Button.vue';
|
||||
|
||||
const props = defineProps<ModalProps>();
|
||||
const dialog = ref<HTMLDialogElement>();
|
||||
|
|
@ -20,75 +13,46 @@ const dialog = ref<HTMLDialogElement>();
|
|||
onMounted(() => {
|
||||
if (dialog.value) {
|
||||
dialog.value.showModal();
|
||||
if (props.onClose) {
|
||||
dialog.value.addEventListener("close", props.onClose);
|
||||
}
|
||||
if (props.onCancel) {
|
||||
dialog.value.addEventListener("cancel", props.onCancel);
|
||||
}
|
||||
|
||||
// close the modal if you click outside of it
|
||||
dialog.value.addEventListener('click', (event) => {
|
||||
if (event.target === dialog.value) {
|
||||
dialog.value.close();
|
||||
}
|
||||
});
|
||||
|
||||
if (props.onClose) dialog.value.addEventListener("close", props.onClose);
|
||||
if (props.onCancel) dialog.value.addEventListener("cancel", props.onCancel);
|
||||
}
|
||||
});
|
||||
|
||||
function onCloseButton () {
|
||||
if (dialog.value) {
|
||||
if (props.onCloseButton) {
|
||||
props.onCloseButton()
|
||||
}
|
||||
|
||||
dialog.value.remove
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.modal {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
opacity: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
padding: var(--standard-radius);
|
||||
border-radius: var(--standard-radius);
|
||||
background-color: var(--chat-highlighted-background-color);
|
||||
color: var(--text-color);
|
||||
/* preferably set these to 70dvh and 70dvw in your components, this is a failsafe if you forget */
|
||||
max-height: 90dvh;
|
||||
max-width: 90dvw;
|
||||
|
||||
overflow: hidden;
|
||||
border-radius: var(--standard-radius);
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
|
||||
/* completely transparent colour, fixes weird border radius stuff */
|
||||
background-color: #b00b1e00;
|
||||
}
|
||||
|
||||
.modal-regular::backdrop {
|
||||
background-color: var(--chat-background-color);
|
||||
opacity: 0%;
|
||||
opacity: 10%;
|
||||
}
|
||||
|
||||
.modal-obscure::backdrop {
|
||||
background-color: var(--chat-background-color);
|
||||
opacity: 80%;
|
||||
}
|
||||
|
||||
.modal-top-container {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
margin: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -40,7 +40,8 @@ function copyInvite(type: "link" | "code") {
|
|||
if (!invite.value) return;
|
||||
|
||||
if (type == "link") {
|
||||
const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}`);
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}${runtimeConfig.app.baseURL}`);
|
||||
if (inviteUrl) {
|
||||
navigator.clipboard.writeText(inviteUrl.href);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,15 +27,17 @@
|
|||
</div>
|
||||
<VerticalSpacer />
|
||||
|
||||
<div v-if="aboutMe" id="profile-body">
|
||||
<div v-if="aboutMe" id="about-me-container">
|
||||
<div><Icon name="lucide:info" size="1.1em"/></div>
|
||||
<div id="about-me-text">
|
||||
{{ " " + aboutMe }}
|
||||
<div v-if="aboutMe">
|
||||
<div id="profile-body">
|
||||
<div id="about-me-container">
|
||||
<div><Icon name="lucide:info" size="1.1em"/></div>
|
||||
<div id="about-me-text">
|
||||
{{ " " + aboutMe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VerticalSpacer />
|
||||
</div>
|
||||
<VerticalSpacer v-if="aboutMe" />
|
||||
|
||||
<div id="profile-footer">
|
||||
<div id="dates">
|
||||
|
|
@ -62,7 +64,7 @@ import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/inte
|
|||
import VerticalSpacer from '../UserInterface/VerticalSpacer.vue';
|
||||
import Button from '../UserInterface/Button.vue';
|
||||
|
||||
const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUuid } = useProfile()
|
||||
const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUserUuid } = useProfile()
|
||||
const { addFriend, fetchMe } = useApi();
|
||||
|
||||
const props = defineProps<ModalProps & {
|
||||
|
|
@ -81,7 +83,7 @@ const registrationDate = getRegistrationDate(props.profile)
|
|||
const joinDate = getGuildJoinDate(props.profile)
|
||||
const friendsSince = await getFriendsSince(props.profile)
|
||||
|
||||
const uuid = getUuid(props.profile)
|
||||
const uuid = getUserUuid(props.profile)
|
||||
|
||||
|
||||
function toDateString(date: Date): string {
|
||||
|
|
@ -114,16 +116,16 @@ function buttonEditProfile() {
|
|||
text-align: left;
|
||||
|
||||
position: relative;
|
||||
max-height: 60dvh;
|
||||
max-width: 60dvw;
|
||||
max-height: 70dvh;
|
||||
max-width: 70dvw;
|
||||
height: 30em;
|
||||
width: 40em;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: var(--chat-background-color);
|
||||
border-radius: var(--standard-radius);
|
||||
color: var(--text-color);
|
||||
background-color: var(--modal-background-color);
|
||||
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
|
@ -142,7 +144,6 @@ function buttonEditProfile() {
|
|||
z-index: 0;
|
||||
|
||||
background-color: var(--primary-color);
|
||||
border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
|
||||
}
|
||||
|
||||
#avatar {
|
||||
|
|
@ -150,12 +151,13 @@ function buttonEditProfile() {
|
|||
position: absolute;
|
||||
left: 2em;
|
||||
top: 2.5em;
|
||||
|
||||
|
||||
z-index: 1;
|
||||
|
||||
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
|
||||
|
||||
background-color: var(--accent-color);
|
||||
border: .15em solid var(--accent-color);
|
||||
}
|
||||
|
||||
|
|
@ -224,14 +226,8 @@ function buttonEditProfile() {
|
|||
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
#about-me-text::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#profile-footer {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,8 @@
|
|||
<span class="theme-title" :style="{color:`${layout.complementaryColor}`}">
|
||||
{{ layout.displayName }}
|
||||
</span>
|
||||
<NuxtImg class="layout-preview" :src="layout.previewImageUrl"></NuxtImg>
|
||||
<!-- this breaks if it's a nuxtimg, i don't know why -->
|
||||
<img class="layout-preview" :src="layout.previewImageUrl"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,27 +45,16 @@
|
|||
<!-- <p class="subtitle">Icons</p>
|
||||
<div class="icons">
|
||||
</div> -->
|
||||
|
||||
<p class="subtitle">TIME FORMAT</p>
|
||||
<div class="icons">
|
||||
<RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
|
||||
:default-button-index="settingsLoad().timeFormat?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
|
||||
import type { TimeFormat } from '~/types/settings';
|
||||
import { settingSave, settingsLoad } from '#imports';
|
||||
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const baseURL = runtimeConfig.app.baseURL;
|
||||
|
||||
const styleFolder = `${baseURL}themes/style`
|
||||
const layoutFolder = `${baseURL}themes/layout`
|
||||
|
||||
const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
|
||||
|
||||
enum StyleLayout {
|
||||
Style,
|
||||
Layout
|
||||
|
|
@ -115,6 +105,7 @@ async function parseTheme(url: string): Promise<Theme | void> {
|
|||
break
|
||||
case "previewImageUrl":
|
||||
previewImageUrl = `${layoutFolder}/${lineArray[1].trim()}`
|
||||
console.log(previewImageUrl)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
@ -169,21 +160,6 @@ function changeTheme(themeType: StyleLayout, theme: Theme) {
|
|||
}
|
||||
loadPreferredThemes()
|
||||
}
|
||||
|
||||
async function onTimeFormatClicked(index: number) {
|
||||
let format: "auto" | "12" | "24" = "auto"
|
||||
|
||||
if (index == 0) {
|
||||
format = "auto"
|
||||
} else if (index == 1) {
|
||||
format = "12"
|
||||
} else if (index == 2) {
|
||||
format = "24"
|
||||
}
|
||||
|
||||
const timeFormat: TimeFormat = {index, format}
|
||||
settingSave("timeFormat", timeFormat)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Language (TBA)</h1>
|
||||
<h1>Language</h1>
|
||||
|
||||
<p class="subtitle">TIME FORMAT</p>
|
||||
<div class="icons">
|
||||
<RadioButtons
|
||||
:text-strings="timeFormatTextStrings"
|
||||
:default-button-key='settingsLoad().timeFormat || "Auto"'
|
||||
:callback="(index: number) => { settingSave('timeFormat', timeFormatTextStrings[index]) }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
|
||||
import type { TimeFormat } from '~/types/settings';
|
||||
|
||||
const timeFormatTextStrings: TimeFormat[] = ["Auto", "4:18 PM", "16:18"]
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<div class="radio-buttons-container" ref="radioButtonsContainer">
|
||||
<div v-for="index in indices" :key="index" class="radio-button" @click="onClick(index)">
|
||||
<div v-for="(textString, index) in props.textStrings"
|
||||
class="radio-button"
|
||||
@click="onClick(index)">
|
||||
<span class="radio-button-radio"></span>
|
||||
<span class="radio-button-text">{{ textStrings[index] }}</span>
|
||||
<span class="radio-button-text">{{ textString }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -13,42 +15,64 @@ const radioButtonsContainer = ref<HTMLDivElement>()
|
|||
|
||||
const props = defineProps<{
|
||||
textStrings: string[],
|
||||
buttonCount: number,
|
||||
defaultButtonIndex: number,
|
||||
defaultButtonKey?: string,
|
||||
defaultButtonIndex?: number,
|
||||
callback: CallableFunction,
|
||||
}>();
|
||||
|
||||
// makes an array from 0 to buttonCount - 1
|
||||
const indices = Array.from({ length: props.buttonCount }, (_, i) => i)
|
||||
|
||||
// select default selected button
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
|
||||
if (props.defaultButtonIndex != undefined && radioButtonsContainer.value) {
|
||||
// select default selected button
|
||||
if (radioButtonsContainer.value) {
|
||||
const children = radioButtonsContainer.value.children
|
||||
const defaultButton = children.item(props.defaultButtonIndex)
|
||||
defaultButton?.classList.add("selected-radio-button")
|
||||
defaultButton?.children.item(0)?.classList.add("selected-radio-button-radio")
|
||||
|
||||
// set the button based on key
|
||||
if (props.defaultButtonKey) {
|
||||
const newIndex = props.textStrings.indexOf(props.defaultButtonKey)
|
||||
const defaultButton = children.item(newIndex)
|
||||
if (defaultButton) {
|
||||
selectButton(defaultButton)
|
||||
return // note the return if you're extending this
|
||||
}
|
||||
}
|
||||
// if that fails, set it based on index, defaulting to 0
|
||||
const defaultButton = children.item(props.defaultButtonIndex ?? 0)
|
||||
if (defaultButton) {
|
||||
selectButton(defaultButton)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function onClick(clickedIndex: number) {
|
||||
// remove selected-radio-button class from all buttons except the clicked one
|
||||
if (radioButtonsContainer.value) {
|
||||
// remove selected-radio-button class from all buttons except the clicked one
|
||||
const children = radioButtonsContainer.value.children
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children.item(i)?.classList.remove("selected-radio-button")
|
||||
children.item(i)?.children.item(0)?.classList.remove("selected-radio-button-radio")
|
||||
for (const button of children) {
|
||||
if (button) {
|
||||
unselectButton(button)
|
||||
}
|
||||
}
|
||||
|
||||
children.item(clickedIndex)?.classList.add("selected-radio-button")
|
||||
children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio")
|
||||
const button = children.item(clickedIndex)
|
||||
if (button) {
|
||||
selectButton(button)
|
||||
}
|
||||
}
|
||||
|
||||
props.callback(clickedIndex)
|
||||
}
|
||||
|
||||
function unselectButton(button: Element) {
|
||||
button.classList.remove("selected-radio-button")
|
||||
button.children.item(0)?.classList.remove("selected-radio-button-radio")
|
||||
}
|
||||
|
||||
function selectButton(button: Element) {
|
||||
button.classList.add("selected-radio-button")
|
||||
button.children.item(0)?.classList.add("selected-radio-button-radio")
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -131,8 +131,7 @@ function loadStoredWidth() {
|
|||
|
||||
.sidebar-content {
|
||||
width: 100%;
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-content > :first-child {
|
||||
|
|
|
|||
218
components/UserInterface/SidebarColumn.vue
Normal file
218
components/UserInterface/SidebarColumn.vue
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
<template>
|
||||
<div id="sidebar-column">
|
||||
<div class="side-column-segment">
|
||||
<NuxtLink id="home-button" href="/me">
|
||||
<img class="sidebar-icon" src="/public/icon.svg"/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<VerticalSpacer />
|
||||
<div class="sidebar-column-segment" id="guild-column">
|
||||
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
|
||||
<NuxtImg v-if="guild.icon"
|
||||
class="sidebar-icon guild-icon"
|
||||
:alt="guild.name"
|
||||
:src="guild.icon" />
|
||||
<DefaultIcon v-else
|
||||
class="sidebar-icon guild-icon"
|
||||
:alt="guild.name"
|
||||
:name="guild.name" :seed="guild.uuid"/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<VerticalSpacer />
|
||||
|
||||
<div class="sidebar-column-segment">
|
||||
<div ref="createButtonContainer">
|
||||
<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
|
||||
<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
|
||||
</button>
|
||||
</div>
|
||||
<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
|
||||
<Icon name="lucide:settings" alt="Settings menu" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ModalBase } from '#components';
|
||||
import { render } from 'vue';
|
||||
import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
|
||||
import DefaultIcon from '~/components/DefaultIcon.vue';
|
||||
import Button from '~/components/UserInterface/Button.vue';
|
||||
import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
|
||||
import type { GuildResponse } from '~/types/interfaces';
|
||||
|
||||
const { getDisplayName } = useProfile()
|
||||
const { fetchMyGuilds, joinGuild, createGuild, createChannel } = useApi();
|
||||
|
||||
const createButtonContainer = ref<HTMLButtonElement>();
|
||||
|
||||
const guilds = await fetchMyGuilds();
|
||||
|
||||
// TODO we need to turn this into an actual modal
|
||||
const options = [
|
||||
{ name: "Join", value: "join", callback: async () => {
|
||||
console.log("join guild!");
|
||||
const div = document.createElement("div");
|
||||
const guildJoinModal = h(ModalBase, {
|
||||
title: "Join Guild",
|
||||
id: "guild-join-modal",
|
||||
onClose: () => {
|
||||
unrender(div);
|
||||
},
|
||||
onCancel: () => {
|
||||
unrender(div);
|
||||
},
|
||||
style: "height: 20dvh; width: 15dvw"
|
||||
},
|
||||
[
|
||||
h("input", {
|
||||
id: "guild-invite-input",
|
||||
type: "text",
|
||||
placeholder: "oyqICZ",
|
||||
}),
|
||||
h(Button, {
|
||||
text: "Join",
|
||||
variant: "normal",
|
||||
callback: async () => {
|
||||
const input = document.getElementById("guild-invite-input") as HTMLInputElement;
|
||||
const invite = input.value;
|
||||
if (invite.length == 6) {
|
||||
try {
|
||||
const joinedGuild = await joinGuild(invite);
|
||||
guilds.push(joinedGuild);
|
||||
return await navigateTo(`/servers/${joinedGuild.uuid}`);
|
||||
} catch (error) {
|
||||
alert(`Couldn't use invite: ${error}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
]);
|
||||
document.body.appendChild(div);
|
||||
render(guildJoinModal, div);
|
||||
}
|
||||
},
|
||||
{ name: "Create", value: "create", callback: async () => {
|
||||
console.log("create guild");
|
||||
const user = await useAuth().getUser();
|
||||
const div = document.createElement("div");
|
||||
const guildCreateModal = h(ModalBase, {
|
||||
title: "Create a Guild",
|
||||
id: "guild-join-modal",
|
||||
onClose: () => {
|
||||
unrender(div);
|
||||
},
|
||||
onCancel: () => {
|
||||
unrender(div);
|
||||
},
|
||||
style: "height: 20dvh; width: 15dvw;"
|
||||
},
|
||||
[
|
||||
h("input", {
|
||||
id: "guild-name-input",
|
||||
type: "text",
|
||||
placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
|
||||
style: "width: 100%"
|
||||
}),
|
||||
h(Button, {
|
||||
text: "Create!",
|
||||
variant: "normal",
|
||||
callback: async () => {
|
||||
const input = document.getElementById("guild-name-input") as HTMLInputElement;
|
||||
const name = input.value;
|
||||
try {
|
||||
const guild = (await createGuild(name)) as GuildResponse;
|
||||
await createChannel(guild.uuid, "general");
|
||||
} catch (error) {
|
||||
alert(`Couldn't create guild: ${error}`);
|
||||
}
|
||||
}
|
||||
})
|
||||
]);
|
||||
document.body.appendChild(div);
|
||||
render(guildCreateModal, div);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
function createDropdown() {
|
||||
const dropdown = h(GuildDropdown, { options });
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("dropdown", "destroy-on-click");
|
||||
if (createButtonContainer.value) {
|
||||
createButtonContainer.value.appendChild(div);
|
||||
} else {
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
render(dropdown, div);
|
||||
div.addEventListener("keyup", (e) => {
|
||||
if (e.key == "Escape") {
|
||||
unrender(div);
|
||||
}
|
||||
});
|
||||
div.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#sidebar-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding-left: var(--sidebar-margin);
|
||||
padding-right: var(--sidebar-margin);
|
||||
padding-top: .5em;
|
||||
|
||||
background: var(--optional-sidebar-background);
|
||||
background-color: var(--sidebar-background-color);
|
||||
|
||||
border-right: 1px solid var(--padding-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#guild-column {
|
||||
overflow-y: scroll;
|
||||
flex-grow: 1;
|
||||
gap: var(--sidebar-icon-gap);
|
||||
}
|
||||
#guild-icon-container {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-column-segment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.guild-column-segment::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#home-button {
|
||||
height: var(--sidebar-icon-width);
|
||||
}
|
||||
|
||||
.guild-icon {
|
||||
border-radius: var(--guild-icon-radius);
|
||||
}
|
||||
.sidebar-icon {
|
||||
width: var(--sidebar-icon-width);
|
||||
height: var(--sidebar-icon-width);
|
||||
}
|
||||
|
||||
.sidebar-bottom-buttons {
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 2.4rem;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.sidebar-bottom-buttons:hover {
|
||||
color: var(--primary-highlighted-color);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@ import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"
|
|||
const { fetchFriends } = useApi();
|
||||
|
||||
export const useProfile = () => {
|
||||
function getAboutMe (profile: UserResponse | GuildMemberResponse): string | null {
|
||||
function getAboutMe(profile: UserResponse | GuildMemberResponse): string | null {
|
||||
if ("username" in profile) {
|
||||
return profile.about
|
||||
} else {
|
||||
|
|
@ -11,7 +11,7 @@ export const useProfile = () => {
|
|||
}
|
||||
}
|
||||
|
||||
function getDisplayName (profile: UserResponse | GuildMemberResponse): string {
|
||||
function getDisplayName(profile: UserResponse | GuildMemberResponse): string {
|
||||
if ("username" in profile) {
|
||||
// assume it's a UserResponse
|
||||
if (profile.display_name) return profile.display_name
|
||||
|
|
@ -24,7 +24,15 @@ export const useProfile = () => {
|
|||
}
|
||||
}
|
||||
|
||||
async function getFriendsSince (profile: UserResponse | GuildMemberResponse): Promise<Date | null> {
|
||||
function getAvatarUrl(profile: UserResponse | GuildMemberResponse): string | null {
|
||||
if ("username" in profile) {
|
||||
return profile.avatar
|
||||
} else {
|
||||
return profile.user.avatar
|
||||
}
|
||||
}
|
||||
|
||||
async function getFriendsSince(profile: UserResponse | GuildMemberResponse): Promise<Date | null> {
|
||||
let user_uuid: string;
|
||||
|
||||
if ("username" in profile) {
|
||||
|
|
@ -42,15 +50,15 @@ export const useProfile = () => {
|
|||
return null
|
||||
}
|
||||
|
||||
function getGuildJoinDate (profile: UserResponse | GuildMemberResponse): Date | null {
|
||||
function getGuildJoinDate(profile: UserResponse | GuildMemberResponse): Date | undefined {
|
||||
if ("username" in profile) {
|
||||
return null
|
||||
return undefined
|
||||
} else {
|
||||
return uuidToDate(profile.uuid)
|
||||
}
|
||||
}
|
||||
|
||||
function getPronouns (profile: UserResponse | GuildMemberResponse): string | null {
|
||||
function getPronouns(profile: UserResponse | GuildMemberResponse): string | null {
|
||||
if ("username" in profile) {
|
||||
return profile.pronouns
|
||||
} else {
|
||||
|
|
@ -58,7 +66,7 @@ export const useProfile = () => {
|
|||
}
|
||||
}
|
||||
|
||||
function getRegistrationDate (profile: UserResponse | GuildMemberResponse): Date | null {
|
||||
function getRegistrationDate(profile: UserResponse | GuildMemberResponse): Date {
|
||||
if ("username" in profile) {
|
||||
return uuidToDate(profile.uuid)
|
||||
} else {
|
||||
|
|
@ -66,7 +74,7 @@ export const useProfile = () => {
|
|||
}
|
||||
}
|
||||
|
||||
function getUsername (profile: UserResponse | GuildMemberResponse): string {
|
||||
function getUsername(profile: UserResponse | GuildMemberResponse): string {
|
||||
if ("username" in profile) {
|
||||
return profile.username
|
||||
} else {
|
||||
|
|
@ -74,22 +82,32 @@ export const useProfile = () => {
|
|||
}
|
||||
}
|
||||
|
||||
function getUuid (profile: UserResponse | GuildMemberResponse): string | null {
|
||||
function getUserUuid(profile: UserResponse | GuildMemberResponse): string {
|
||||
if ("username" in profile) {
|
||||
return profile.uuid
|
||||
} else {
|
||||
return profile.user.uuid
|
||||
}
|
||||
}
|
||||
|
||||
function getUser(profile: UserResponse | GuildMemberResponse): UserResponse {
|
||||
if ("username" in profile) {
|
||||
return profile
|
||||
} else {
|
||||
return profile.user
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
getAboutMe,
|
||||
getDisplayName,
|
||||
getAvatarUrl,
|
||||
getFriendsSince,
|
||||
getGuildJoinDate,
|
||||
getRegistrationDate,
|
||||
getPronouns,
|
||||
getUsername,
|
||||
getUuid
|
||||
getUserUuid,
|
||||
getUser
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,17 @@
|
|||
<template>
|
||||
<Loading v-show="loading" />
|
||||
|
||||
<div :class="{ hidden: loading, visible: !loading }" id="client-root">
|
||||
<div id="homebar">
|
||||
<div class="homebar-item">
|
||||
<marquee>
|
||||
gorb!!!!!
|
||||
</marquee>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page-content">
|
||||
<div id="left-column">
|
||||
<div class="left-column-segment">
|
||||
<NuxtLink id="home-button" href="/me">
|
||||
<img class="sidebar-icon" src="/public/icon.svg"/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<VerticalSpacer />
|
||||
<div class="left-column-segment" id="left-column-middle">
|
||||
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
|
||||
<NuxtImg v-if="guild.icon"
|
||||
class="sidebar-icon guild-icon"
|
||||
:alt="guild.name"
|
||||
:src="guild.icon" />
|
||||
<DefaultIcon v-else
|
||||
class="sidebar-icon guild-icon"
|
||||
:alt="guild.name"
|
||||
:name="guild.name" :seed="guild.uuid"/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<VerticalSpacer />
|
||||
<div class="left-column-segment">
|
||||
<div ref="createButtonContainer">
|
||||
<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
|
||||
<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
|
||||
</button>
|
||||
</div>
|
||||
<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
|
||||
<Icon name="lucide:settings" alt="Settings menu" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-container-row">
|
||||
<SidebarColumn />
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ModalBase } from '#components';
|
||||
import { render } from 'vue';
|
||||
import DefaultIcon from '~/components/DefaultIcon.vue';
|
||||
import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
|
||||
import Loading from '~/components/Popups/Loading.vue';
|
||||
import Button from '~/components/UserInterface/Button.vue';
|
||||
import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
|
||||
import type { GuildResponse } from '~/types/interfaces';
|
||||
import SidebarColumn from '~/components/UserInterface/SidebarColumn.vue';
|
||||
|
||||
definePageMeta({
|
||||
keepalive: true
|
||||
|
|
@ -61,117 +19,6 @@ definePageMeta({
|
|||
|
||||
const loading = useState("loading", () => false);
|
||||
|
||||
const createButtonContainer = ref<HTMLButtonElement>();
|
||||
|
||||
const { getDisplayName } = useProfile()
|
||||
const api = useApi();
|
||||
|
||||
const options = [
|
||||
{ name: "Join", value: "join", callback: async () => {
|
||||
console.log("join guild!");
|
||||
const div = document.createElement("div");
|
||||
const guildJoinModal = h(ModalBase, {
|
||||
title: "Join Guild",
|
||||
id: "guild-join-modal",
|
||||
onClose: () => {
|
||||
unrender(div);
|
||||
},
|
||||
onCancel: () => {
|
||||
unrender(div);
|
||||
},
|
||||
style: "height: 20dvh; width: 15dvw"
|
||||
},
|
||||
[
|
||||
h("input", {
|
||||
id: "guild-invite-input",
|
||||
type: "text",
|
||||
placeholder: "oyqICZ",
|
||||
}),
|
||||
h(Button, {
|
||||
text: "Join",
|
||||
variant: "normal",
|
||||
callback: async () => {
|
||||
const input = document.getElementById("guild-invite-input") as HTMLInputElement;
|
||||
const invite = input.value;
|
||||
if (invite.length == 6) {
|
||||
try {
|
||||
const joinedGuild = await api.joinGuild(invite);
|
||||
guilds.push(joinedGuild);
|
||||
return await navigateTo(`/servers/${joinedGuild.uuid}`);
|
||||
} catch (error) {
|
||||
alert(`Couldn't use invite: ${error}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
]);
|
||||
document.body.appendChild(div);
|
||||
render(guildJoinModal, div);
|
||||
}
|
||||
},
|
||||
{ name: "Create", value: "create", callback: async () => {
|
||||
console.log("create guild");
|
||||
const user = await useAuth().getUser();
|
||||
const div = document.createElement("div");
|
||||
const guildCreateModal = h(ModalBase, {
|
||||
title: "Create a Guild",
|
||||
id: "guild-join-modal",
|
||||
onClose: () => {
|
||||
unrender(div);
|
||||
},
|
||||
onCancel: () => {
|
||||
unrender(div);
|
||||
},
|
||||
style: "height: 20dvh; width: 15dvw;"
|
||||
},
|
||||
[
|
||||
h("input", {
|
||||
id: "guild-name-input",
|
||||
type: "text",
|
||||
placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
|
||||
style: "width: 100%"
|
||||
}),
|
||||
h(Button, {
|
||||
text: "Create!",
|
||||
variant: "normal",
|
||||
callback: async () => {
|
||||
const input = document.getElementById("guild-name-input") as HTMLInputElement;
|
||||
const name = input.value;
|
||||
try {
|
||||
const guild = (await api.createGuild(name)) as GuildResponse;
|
||||
await api.createChannel(guild.uuid, "general");
|
||||
} catch (error) {
|
||||
alert(`Couldn't create guild: ${error}`);
|
||||
}
|
||||
}
|
||||
})
|
||||
]);
|
||||
document.body.appendChild(div);
|
||||
render(guildCreateModal, div);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const guilds = await api.fetchMyGuilds();
|
||||
|
||||
function createDropdown() {
|
||||
const dropdown = h(GuildDropdown, { options });
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("dropdown", "destroy-on-click");
|
||||
if (createButtonContainer.value) {
|
||||
createButtonContainer.value.appendChild(div);
|
||||
} else {
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
render(dropdown, div);
|
||||
div.addEventListener("keyup", (e) => {
|
||||
if (e.key == "Escape") {
|
||||
unrender(div);
|
||||
}
|
||||
});
|
||||
div.focus();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -179,8 +26,6 @@ function createDropdown() {
|
|||
height: 100dvh;
|
||||
width: 100dvw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
|
@ -192,89 +37,20 @@ function createDropdown() {
|
|||
transition: opacity 500ms;
|
||||
}
|
||||
|
||||
#homebar {
|
||||
min-height: 4dvh;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
background: var(--optional-topbar-background);
|
||||
background-color: var(--topbar-background-color);
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
padding-left: 5dvw;
|
||||
padding-right: 5dvw;
|
||||
}
|
||||
|
||||
.homebar-item {
|
||||
width: 100dvw;
|
||||
}
|
||||
|
||||
#page-content {
|
||||
.flex-container-row,
|
||||
.flex-container-column {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding-left: var(--sidebar-margin);
|
||||
padding-right: var(--sidebar-margin);
|
||||
padding-top: .5em;
|
||||
|
||||
background: var(--optional-sidebar-background);
|
||||
background-color: var(--sidebar-background-color);
|
||||
|
||||
border-right: 1px solid var(--padding-color);
|
||||
}
|
||||
|
||||
.left-column-segment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.left-column-segment::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#left-column-middle {
|
||||
overflow-y: scroll;
|
||||
flex-grow: 1;
|
||||
gap: var(--sidebar-icon-gap);
|
||||
}
|
||||
|
||||
#home-button {
|
||||
height: var(--sidebar-icon-width);
|
||||
.flex-container-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#guild-icon-container {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.guild-icon {
|
||||
border-radius: var(--guild-icon-radius);
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
width: var(--sidebar-icon-width);
|
||||
height: var(--sidebar-icon-width);
|
||||
}
|
||||
|
||||
.sidebar-bottom-buttons {
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 2.4rem;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sidebar-bottom-buttons:hover {
|
||||
color: var(--primary-highlighted-color);
|
||||
.flex-container-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,4 @@
|
|||
<template>
|
||||
<NuxtLayout>
|
||||
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
await navigateTo("/me/", { replace: true })
|
||||
|
||||
definePageMeta({
|
||||
layout: "client"
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,171 +1,43 @@
|
|||
<template>
|
||||
<NuxtLayout name="client">
|
||||
<ResizableSidebar
|
||||
width="14rem" min-width="8rem" max-width="30rem"
|
||||
border-sides="right" local-storage-name="middleLeftColumn">
|
||||
<div id="middle-left-column" class="main-grid-row">
|
||||
<div id="server-name-container">
|
||||
<span id="server-name" :title="server?.name">{{ server?.name }}</span>
|
||||
<button id="server-settings-button" @click="toggleGuildSettings">
|
||||
<Icon id="server-settings-icon" name="lucide:chevron-down" />
|
||||
</button>
|
||||
<GuildOptionsMenu v-if="showGuildSettings" />
|
||||
</div>
|
||||
<div id="channels-list">
|
||||
<ChannelEntry v-for="channel of channels" :name="channel.name"
|
||||
:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
|
||||
:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
|
||||
</div>
|
||||
<GuildSidebar v-if="guild" :guild="guild" />
|
||||
<div class="flex-container-column">
|
||||
<GuildChannelNavbar id="navbar"
|
||||
v-if="guild && channel"
|
||||
:guild="guild"
|
||||
:channel="channel"/>
|
||||
|
||||
<div class="flex-container-row">
|
||||
<MessageArea :channel-url="channelUrlPath" />
|
||||
<GuildMemberList v-if="guild" :guild="guild" />
|
||||
</div>
|
||||
</ResizableSidebar>
|
||||
<MessageArea :channel-url="channelUrlPath" />
|
||||
<ResizableSidebar
|
||||
width="14rem" min-width="5.5rem" max-width="30rem"
|
||||
border-sides="left" local-storage-name="membersListWidth">
|
||||
<div id="members-container">
|
||||
<div id="members-list">
|
||||
<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
|
||||
</div>
|
||||
</div>
|
||||
</ResizableSidebar>
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
|
||||
import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
|
||||
import MemberEntry from "~/components/Guild/MemberEntry.vue";
|
||||
import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
|
||||
import type { ChannelResponse, GuildMemberResponse, GuildResponse } from "~/types/interfaces";
|
||||
|
||||
const route = useRoute();
|
||||
const { fetchGuild, fetchChannel } = useApi()
|
||||
|
||||
const loading = useState("loading");
|
||||
const channelId = route.params.channelId as string
|
||||
const guildId = route.params.serverId as string
|
||||
|
||||
const channelUrlPath = `channels/${route.params.channelId}`;
|
||||
const channelUrlPath = `channels/${channelId}`;
|
||||
|
||||
const server = ref<GuildResponse | undefined>();
|
||||
const channels = ref<ChannelResponse[] | undefined>();
|
||||
const channel = ref<ChannelResponse | undefined>();
|
||||
const guild = await fetchGuild(guildId)
|
||||
const channel = await fetchChannel(channelId)
|
||||
|
||||
const members = ref<GuildMemberResponse[]>();
|
||||
// function toggleInvitePopup(e: Event) {
|
||||
// e.preventDefault();
|
||||
// showInvitePopup.value = !showInvitePopup.value;
|
||||
// }
|
||||
|
||||
const showInvitePopup = ref(false);
|
||||
const showGuildSettings = ref(false);
|
||||
// function handleMemberClick(member: GuildMemberResponse) {
|
||||
// }
|
||||
|
||||
//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
|
||||
//console.log("channelid: servers:", servers);
|
||||
|
||||
const { fetchMembers, fetchMeMember } = useApi();
|
||||
|
||||
onMounted(async () => {
|
||||
console.log("mounting");
|
||||
const guildUrl = `guilds/${route.params.serverId}`;
|
||||
server.value = await fetchWithApi(guildUrl);
|
||||
console.log("fetched guild");
|
||||
await setArrayVariables();
|
||||
console.log("set array variables");
|
||||
});
|
||||
|
||||
onActivated(async () => {
|
||||
console.log("activating");
|
||||
const guildUrl = `guilds/${route.params.serverId}`;
|
||||
server.value = await fetchWithApi(guildUrl);
|
||||
console.log("fetched guild");
|
||||
await setArrayVariables();
|
||||
console.log("set array variables");
|
||||
});
|
||||
|
||||
async function setArrayVariables() {
|
||||
const membersRes = await fetchMembers(route.params.serverId as string);
|
||||
members.value = membersRes.objects;
|
||||
const guildUrl = `guilds/${route.params.serverId}`;
|
||||
channels.value = await fetchWithApi(`${guildUrl}/channels`);
|
||||
console.log("channels:", channels.value);
|
||||
channel.value = await fetchWithApi(`/channels/${route.params.channelId}`);
|
||||
console.log("channel:", channel.value);
|
||||
const meMember = useState<GuildMemberResponse | undefined>("meMember");
|
||||
console.log("[CHANNEL] meMember:", meMember.value);
|
||||
if (!meMember.value) {
|
||||
console.log("[CHANNEL] meMember is uninitialized, initializing");
|
||||
const fetchedMeMember = await fetchMeMember(route.params.serverId as string);
|
||||
meMember.value = fetchedMeMember;
|
||||
console.log("[CHANNEL] meMember set to:", fetchedMeMember);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleGuildSettings(e: Event) {
|
||||
e.preventDefault();
|
||||
showGuildSettings.value = !showGuildSettings.value;
|
||||
}
|
||||
|
||||
function toggleInvitePopup(e: Event) {
|
||||
e.preventDefault();
|
||||
showInvitePopup.value = !showInvitePopup.value;
|
||||
}
|
||||
|
||||
function handleMemberClick(member: GuildMemberResponse) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#members-container {
|
||||
background: var(--optional-member-list-background);
|
||||
}
|
||||
<style scoped>
|
||||
|
||||
#members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-left: 1.25em;
|
||||
padding-right: 1.25em;
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: flex;
|
||||
margin-top: .5em;
|
||||
margin-bottom: .5em;
|
||||
gap: .5em;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#channels-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.member-display-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#server-name-container {
|
||||
padding-top: 3dvh;
|
||||
padding-bottom: 3dvh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#server-name {
|
||||
font-size: 1.5em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#server-settings-button {
|
||||
background-color: transparent;
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,8 +8,14 @@ complementaryColor = white
|
|||
--sidebar-icon-width: 2.5em;
|
||||
--sidebar-icon-gap: .25em;
|
||||
--sidebar-margin: .5em;
|
||||
|
||||
--navbar-height: 5dvh;
|
||||
--navbar-icon-size: 3dvh;
|
||||
--navbar-gap: calc(3dvh * .2);
|
||||
|
||||
--minor-radius: .35em;
|
||||
--standard-radius: .5em;
|
||||
--embed-radius: .3em;
|
||||
--button-radius: .6em;
|
||||
--guild-icon-radius: 15%;
|
||||
--pfp-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -10,15 +10,16 @@ complementaryColor = white
|
|||
--reply-text-color: #969696;
|
||||
--danger-text-color: #ff0000;
|
||||
|
||||
--chat-background-color: #2f2e2d;
|
||||
--chat-highlighted-background-color: #3f3b38;
|
||||
--chat-background-color: #383432;
|
||||
--chat-highlighted-background-color: #4c4a48;
|
||||
--chat-important-background-color: #ffcf5f38;
|
||||
--chat-important-highlighted-background-color: #ffa86f4f;
|
||||
--chat-featured-message-color: #4f3f2f60;
|
||||
--popup-background-color: #2f2828;
|
||||
--popup-highlighted-background-color: #382f2f;
|
||||
--modal-background-color: #3a352f;
|
||||
|
||||
--sidebar-background-color: #3e3a37;
|
||||
--sidebar-background-color: #322f2d;
|
||||
--sidebar-highlighted-background-color: #46423b;
|
||||
--topbar-background-color: #3a3733;
|
||||
--chatbox-background-color: #3a3733;
|
||||
|
|
|
|||
|
|
@ -10,17 +10,18 @@ complementaryColor = white
|
|||
--reply-text-color: #969696;
|
||||
--danger-text-color: #ff0000;
|
||||
|
||||
--chat-background-color: #1f1e1d;
|
||||
--chat-highlighted-background-color: #2f2b28;
|
||||
--chat-background-color: #282624;
|
||||
--chat-highlighted-background-color: #383430;
|
||||
--chat-important-background-color: #ffc44f2f;
|
||||
--chat-important-highlighted-background-color: #ffa45f4a;
|
||||
--chat-featured-message-color: #4f2f1f58;
|
||||
--popup-background-color: #2f1f1f;
|
||||
--popup-highlighted-background-color: #3f2f2f;
|
||||
--modal-background-color: #28241f;
|
||||
|
||||
--sidebar-background-color: #2e2a27;
|
||||
--sidebar-highlighted-background-color: #36322b;
|
||||
--topbar-background-color: #2a2723;
|
||||
--sidebar-background-color: #1f1e1d;
|
||||
--sidebar-highlighted-background-color: #2f2b28;
|
||||
--topbar-background-color: #1f1e1e;
|
||||
--chatbox-background-color: #1a1713;
|
||||
|
||||
--padding-color: #484848;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ complementaryColor = black
|
|||
--chat-featured-message-color: #4f2f1f58;
|
||||
--popup-background-color: #2f1f1f;
|
||||
--popup-highlighted-background-color: #3f2f2f;
|
||||
--modal-background-color: #181f1f;
|
||||
|
||||
--sidebar-background-color: #80808000;
|
||||
--sidebar-highlighted-background-color: #ffffff20;
|
||||
|
|
|
|||
|
|
@ -10,13 +10,14 @@ complementaryColor = black
|
|||
--reply-text-color: #969696;
|
||||
--danger-text-color: #ff0000;
|
||||
|
||||
--chat-background-color: #f0ebe8;
|
||||
--chat-highlighted-background-color: #e8e4e0;
|
||||
--chat-background-color: #f0edeb;
|
||||
--chat-highlighted-background-color: #aba8a4;
|
||||
--chat-important-background-color: #df5f0b26;
|
||||
--chat-important-hightlighted-background-color: #df5f0b3d;
|
||||
--chat-featured-message-color: #e8ac841f;
|
||||
--popup-background-color: #e8e4e0;
|
||||
--popup-highlighted-background-color: #dfdbd6;
|
||||
--popup-background-color: #b8b4b0;
|
||||
--popup-highlighted-background-color: #a6a4a2;
|
||||
--modal-background-color: #e8e4e0;
|
||||
|
||||
--sidebar-background-color: #dbd8d4;
|
||||
--sidebar-highlighted-background-color: #d4d0ca;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ complementaryColor = white
|
|||
--chat-featured-message-color: #4f8f4f80;
|
||||
--popup-background-color: #80808080;
|
||||
--popup-highlighted-background-color: #9f9f9f9f;
|
||||
--modal-background-color: #7fa87fff;
|
||||
|
||||
--sidebar-background-color: #80808000;
|
||||
--sidebar-highlighted-background-color: #ffffff20;
|
||||
|
|
|
|||
|
|
@ -121,3 +121,22 @@ export interface ContextMenuInterface {
|
|||
pointerY: number,
|
||||
items: ContextMenuItem[]
|
||||
}
|
||||
|
||||
export interface NavbarItem {
|
||||
title: string,
|
||||
icon: string,
|
||||
hasPing?: boolean, // whether to draw a "ping" icon or not
|
||||
callback: (...args: any[]) => any;
|
||||
}
|
||||
|
||||
export interface INavbar {
|
||||
guild: GuildResponse
|
||||
channel: ChannelResponse
|
||||
}
|
||||
|
||||
export interface NavbarOptions {
|
||||
guild?: GuildResponse
|
||||
channel?: ChannelResponse
|
||||
isDirectMessages?: boolean
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,9 @@
|
|||
import type { GuildMemberResponse, MessageResponse, UserResponse } from "./interfaces";
|
||||
import type { MessageResponse, UserResponse } from "./interfaces";
|
||||
|
||||
export interface MessageProps {
|
||||
class?: string,
|
||||
img?: string | null,
|
||||
author: GuildMemberResponse
|
||||
text: string,
|
||||
timestamp: number,
|
||||
format: "12" | "24",
|
||||
type: "normal" | "grouped",
|
||||
marginBottom: boolean,
|
||||
authorColor: string,
|
||||
last: boolean,
|
||||
messageId: string,
|
||||
replyingTo?: boolean,
|
||||
editing?: boolean,
|
||||
me: UserResponse
|
||||
message: MessageResponse,
|
||||
replyMessage?: MessageResponse
|
||||
replyMessage?: MessageResponse,
|
||||
type: "normal" | "grouped",
|
||||
editing?: boolean,
|
||||
isMentioned?: boolean,
|
||||
}
|
||||
|
|
@ -4,7 +4,4 @@ export interface ClientSettings {
|
|||
selectedThemeLayout?: string // URL
|
||||
}
|
||||
|
||||
export interface TimeFormat {
|
||||
index: number,
|
||||
format: "auto" | "12" | "24"
|
||||
}
|
||||
export type TimeFormat = "Auto" | "4:18 PM" | "16:18"
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
export default (): "12" | "24" => {
|
||||
const format = settingsLoad().timeFormat?.format ?? "auto"
|
||||
const format = settingsLoad().timeFormat || "Auto"
|
||||
|
||||
if (format == "12") {
|
||||
if (format == "4:18 PM") {
|
||||
return "12"
|
||||
} else if (format == "24") {
|
||||
} else if (format == "16:18") {
|
||||
return "24"
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,20 +2,17 @@ let styleLinkElement: HTMLLinkElement | null;
|
|||
let layoutLinkElement: HTMLLinkElement | null;
|
||||
|
||||
|
||||
export default () => {
|
||||
export default () => {
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const baseURL = runtimeConfig.app.baseURL;
|
||||
|
||||
let currentStyle = settingsLoad().selectedThemeStyle ?? undefined
|
||||
let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
|
||||
|
||||
if (!currentStyle) {
|
||||
if (prefersLight()) {
|
||||
currentStyle = `${baseURL}themes/style/light.css`
|
||||
} else {
|
||||
currentStyle = `${baseURL}themes/style/dark.css`
|
||||
}
|
||||
}
|
||||
let currentStyle = settingsLoad().selectedThemeStyle || (
|
||||
prefersLight()
|
||||
? `${baseURL}themes/style/light.css`
|
||||
: `${baseURL}themes/style/dark.css`
|
||||
);
|
||||
|
||||
let currentLayout = settingsLoad().selectedThemeLayout || `${baseURL}themes/layout/gorb.css`
|
||||
|
||||
if (styleLinkElement) {
|
||||
styleLinkElement.href = currentStyle;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default (element: HTMLDivElement, props: MessageProps) => {
|
|||
const messageBox = document.getElementById("message-box") as HTMLDivElement;
|
||||
if (messageBox) {
|
||||
const div = document.createElement("div");
|
||||
const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
|
||||
const messageReply = h(MessageReply, { author: getDisplayName(props.message.member), text: props.message.message || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
|
||||
messageBox.prepend(div);
|
||||
render(messageReply, div);
|
||||
const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue