gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: start adding popup
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-07-17 17:08:29 +02:00
parent e339b1df10
commit fe77b2c28d
No known key found for this signature in database
2 changed files with 53 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

26
components/Guild/MemberEntry.vue
View file

@ -1,33 +1,33 @@
<template>
<div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
<Avatar :member="props.member" class="member-avatar"/>
<div class="member-item" @click.prevent="createProfileModal(props.member)" tabindex="0">
<Avatar :profile="props.member" class="member-avatar"/>
<span class="member-display-name">{{ getDisplayName(props.member) }}</span>
<UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ModalProfilePopup } from '#components';
import { render } from 'vue';
import type { GuildMemberResponse } from '~/types/interfaces';
const props = defineProps<{
member: GuildMemberResponse
}>();
const isPopupVisible = ref(false);
function createProfileModal(profile: GuildMemberResponse) {
const div = document.createElement("div");
const modal = h(ModalProfilePopup, {
profile: profile
});
const togglePopup = () => {
isPopupVisible.value = false;
// isPopupVisible.value = !isPopupVisible.value;
};
document.body.appendChild(div);
render(modal, div);
}
const hidePopup = () => {
isPopupVisible.value = false;
};
</script>
<style>
.member-item {
position: relative; /* Set the position to relative for absolute positioning of the popup */
position: relative;
}
</style>

39
components/Modal/ProfilePopup.vue Normal file
View file

@ -0,0 +1,39 @@
<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>