Merge remote-tracking branch 'origin/main' into modal-polish
This commit is contained in:
commit
315867fff5
SSH key fingerprint:
SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
22 changed files with 636 additions and 524 deletions
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>
|
||||
|
|
@ -32,7 +32,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 {
|
||||
|
|
@ -41,4 +47,9 @@ function hideModalPopup() {
|
|||
min-width: 2.3em;
|
||||
max-width: 2.3em;
|
||||
}
|
||||
|
||||
.member-display-name {
|
||||
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, menuItems)" :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"/>
|
||||
<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}`">
|
||||
{{ 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, menuItems)" :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,33 +69,37 @@ import MessageReply from './UserInterface/MessageReply.vue';
|
|||
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
|
||||
|
||||
const { getDisplayName } = useProfile()
|
||||
const { getUser } = useAuth()
|
||||
|
||||
const props = defineProps<MessageProps>();
|
||||
|
||||
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",
|
||||
|
|
@ -121,23 +123,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) {
|
||||
|
|
@ -148,13 +162,13 @@ const menuItems: 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)
|
||||
menuItems.splice(1, 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)
|
||||
menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
|
||||
}
|
||||
|
|
@ -174,14 +188,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 {
|
||||
|
|
@ -197,14 +217,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;
|
||||
|
|
@ -213,10 +225,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;
|
||||
|
|
@ -228,10 +239,10 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
}
|
||||
|
||||
.message-author-avatar {
|
||||
min-height: 2em;
|
||||
max-height: 2em;
|
||||
min-width: 2em;
|
||||
max-width: 2em;
|
||||
min-height: 2.5em;
|
||||
max-height: 2.5em;
|
||||
min-width: 2.5em;
|
||||
max-width: 2.5em;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
|
|
@ -242,8 +253,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;
|
||||
|
|
@ -257,9 +271,7 @@ function getDayDifference(date1: Date, date2: Date) {
|
|||
|
||||
.side-message-date {
|
||||
font-size: .625em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
margin-top: .4em;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -269,11 +281,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);
|
||||
}
|
||||
|
||||
|
|
@ -298,6 +310,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,9 +36,10 @@ 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 {
|
||||
|
|
@ -44,5 +47,4 @@ function createModal(link: string) {
|
|||
max-width: 15dvw;
|
||||
border-radius: var(--embed-radius);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -149,12 +149,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);
|
||||
}
|
||||
|
||||
|
|
@ -223,14 +224,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;
|
||||
|
|
|
|||
|
|
@ -135,8 +135,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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue