Compare commits
No commits in common. "fe77b2c28d154ffaa5c13f4a1028729cdecc3e5e" and "5f2267a448e80cc0901ee29883ea115558ba87e5" have entirely different histories.
fe77b2c28d
...
5f2267a448
9 changed files with 42 additions and 103 deletions
|
@ -13,29 +13,25 @@ import { NuxtImg } from '#components';
|
||||||
import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
|
import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
profile: UserResponse | GuildMemberResponse,
|
user?: UserResponse,
|
||||||
|
member?: GuildMemberResponse,
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const displayName = getDisplayName(props.profile)
|
|
||||||
|
let displayName: string
|
||||||
let displayAvatar: string | null
|
let displayAvatar: string | null
|
||||||
|
|
||||||
|
const user = props.user || props.member?.user
|
||||||
|
|
||||||
if ("username" in props.profile) {
|
if (user) {
|
||||||
// assume it's a UserRespone
|
displayName = getDisplayName(user, props.member)
|
||||||
displayAvatar = props.profile.avatar
|
|
||||||
if (!displayAvatar) {
|
if (user.avatar) {
|
||||||
if (!isCanvasBlocked()) {
|
displayAvatar = user.avatar
|
||||||
displayAvatar = generateDefaultIcon(displayName, props.profile.uuid)
|
} else if (!isCanvasBlocked()){
|
||||||
}
|
displayAvatar = generateDefaultIcon(displayName, user.uuid)
|
||||||
}
|
} else {
|
||||||
|
displayAvatar = null
|
||||||
} else {
|
|
||||||
// assume it's a GuildMemberResponse
|
|
||||||
displayAvatar = props.profile.user.avatar
|
|
||||||
if (!displayAvatar) {
|
|
||||||
if (!isCanvasBlocked()) {
|
|
||||||
displayAvatar = generateDefaultIcon(displayName, props.profile.user_uuid)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,33 +1,33 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="member-item" @click.prevent="createProfileModal(props.member)" tabindex="0">
|
<div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
|
||||||
<Avatar :profile="props.member" class="member-avatar"/>
|
<Avatar :member="props.member" class="member-avatar"/>
|
||||||
<span class="member-display-name">{{ getDisplayName(props.member) }}</span>
|
<span class="member-display-name">{{ getDisplayName(props.member.user, props.member) }}</span>
|
||||||
|
<UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ModalProfilePopup } from '#components';
|
import { ref } from 'vue';
|
||||||
import { render } from 'vue';
|
|
||||||
import type { GuildMemberResponse } from '~/types/interfaces';
|
import type { GuildMemberResponse } from '~/types/interfaces';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
member: GuildMemberResponse
|
member: GuildMemberResponse
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
function createProfileModal(profile: GuildMemberResponse) {
|
const isPopupVisible = ref(false);
|
||||||
const div = document.createElement("div");
|
|
||||||
const modal = h(ModalProfilePopup, {
|
|
||||||
profile: profile
|
|
||||||
});
|
|
||||||
|
|
||||||
document.body.appendChild(div);
|
|
||||||
render(modal, div);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
const togglePopup = () => {
|
||||||
|
isPopupVisible.value = false;
|
||||||
|
// isPopupVisible.value = !isPopupVisible.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const hidePopup = () => {
|
||||||
|
isPopupVisible.value = false;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.member-item {
|
.member-item {
|
||||||
position: relative;
|
position: relative; /* Set the position to relative for absolute positioning of the popup */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -29,7 +29,7 @@
|
||||||
:text="props.replyMessage?.message"
|
:text="props.replyMessage?.message"
|
||||||
:reply-id="props.replyMessage.uuid" max-width="reply" />
|
:reply-id="props.replyMessage.uuid" max-width="reply" />
|
||||||
<div class="left-column">
|
<div class="left-column">
|
||||||
<Avatar :profile="props.author" class="message-author-avatar"/>
|
<Avatar :user="props.author" class="message-author-avatar"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="message-data">
|
<div class="message-data">
|
||||||
<div class="message-metadata">
|
<div class="message-metadata">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
|
<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;">
|
<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
|
||||||
<Button text="✕" variant="stealth" :callback="() => dialog?.remove()" />
|
<Button text="X" variant="neutral" :callback="() => dialog?.remove()" />
|
||||||
</span>
|
</span>
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h1 class="modal-title">{{ title }}</h1>
|
<h1 class="modal-title">{{ title }}</h1>
|
||||||
|
@ -42,12 +42,9 @@ onMounted(() => {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
opacity: 100%;
|
opacity: 100%;
|
||||||
|
padding: 1%;
|
||||||
padding: var(--standard-radius);
|
background-color: var(--sidebar-highlighted-background-color);
|
||||||
border-radius: var(--standard-radius);
|
|
||||||
background-color: var(--chat-highlighted-background-color);
|
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,39 +0,0 @@
|
||||||
<template>
|
|
||||||
<ModalBase :obscure="true">
|
|
||||||
<div id="vertical-container">
|
|
||||||
<span id="cover-background"></span>
|
|
||||||
<Avatar :profile="props.profile" id="pfp"/>
|
|
||||||
</div>
|
|
||||||
</ModalBase>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/interfaces';
|
|
||||||
|
|
||||||
const props = defineProps<ModalProps & {
|
|
||||||
profile: GuildMemberResponse
|
|
||||||
}>();
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
#vertical-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
height: 75dvh;
|
|
||||||
width: 75dvw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cover-background {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 6em;
|
|
||||||
max-height: 6em;
|
|
||||||
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
/* top left and top right */
|
|
||||||
border-radius: var(--standard-radius) var(--standard-radius) 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
|
<NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
|
||||||
<Avatar :profile="props.user" class="user-avatar"/>
|
<Avatar :user="props.user" class="user-avatar"/>
|
||||||
|
|
||||||
<span class="user-display-name">{{ getDisplayName(props.user) }}</span>
|
<span class="user-display-name">{{ getDisplayName(props.user) }}</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="profile-popup">
|
<div id="profile-popup">
|
||||||
<Avatar :profile="props.user" id="avatar"/>
|
<Avatar :user="props.user" id="avatar"/>
|
||||||
|
|
||||||
<div id="cover-color"></div>
|
<div id="cover-color"></div>
|
||||||
<div id="main-body">
|
<div id="main-body">
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<button class="button" :class="props.variant + '-button'"
|
<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
|
||||||
@click="props.callback ? props.callback() : null">
|
{{ props.text }}
|
||||||
{{ props.text }}
|
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -10,7 +9,7 @@
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
text: string,
|
text: string,
|
||||||
callback?: CallableFunction,
|
callback?: CallableFunction,
|
||||||
variant?: "normal" | "scary" | "neutral" | "stealth",
|
variant?: "normal" | "scary" | "neutral",
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -51,11 +50,4 @@ const props = defineProps<{
|
||||||
background-color: var(--accent-highlighted-color);
|
background-color: var(--accent-highlighted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stealth-button {
|
|
||||||
background-color: unset;
|
|
||||||
}
|
|
||||||
.stealth-button:hover {
|
|
||||||
background-color: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
|
@ -1,14 +1,7 @@
|
||||||
import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
|
import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
|
||||||
|
|
||||||
export default (profile: UserResponse | GuildMemberResponse): string => {
|
export function getDisplayName(user: UserResponse, member?: GuildMemberResponse): string {
|
||||||
if ("username" in profile) {
|
if (member?.nickname) return member.nickname
|
||||||
// assume it's a UserRespone
|
if (user.display_name) return user.display_name
|
||||||
if (profile.display_name) return profile.display_name
|
return user.username
|
||||||
return profile.username
|
|
||||||
} else {
|
|
||||||
// assume it's a GuildMemberResponse
|
|
||||||
if (profile.nickname) return profile.nickname
|
|
||||||
if (profile.user.display_name) return profile.user.display_name
|
|
||||||
return profile.user.username
|
|
||||||
}
|
|
||||||
}
|
}
|
Loading…
Add table
Add a link
Reference in a new issue