mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-18 22:11:03 +00:00
104 lines
1.9 KiB
Vue
104 lines
1.9 KiB
Vue
<template>
|
|
<div
|
|
class="member"
|
|
@click="openUserInformation()"
|
|
@mouseover="hover = true" @mouseleave="hover = false"
|
|
>
|
|
<Profile-picture
|
|
class="avatar"
|
|
:url="`${userAvatar}${hover ? '' : '?type=png'}`"
|
|
size="35px"
|
|
:unique-i-d="user.uniqueID"
|
|
:status="presense"
|
|
/>
|
|
<div class="information">
|
|
<div class="username">
|
|
{{ user.username }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="type === 'OWNER'"
|
|
class="type-box"
|
|
>
|
|
Owner
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import ProfilePicture from '@/components/ProfilePictureTemplate';
|
|
import config from '@/config';
|
|
export default {
|
|
components: { ProfilePicture },
|
|
props: ['user', 'avatar', 'type'],
|
|
data() {
|
|
return {
|
|
hover: false
|
|
}
|
|
},
|
|
computed: {
|
|
userAvatar() {
|
|
return config.domain + "/avatars/" + this.avatar
|
|
},
|
|
presense(){
|
|
//attach presense
|
|
if (this.user.uniqueID === this.$store.getters.user.uniqueID) {
|
|
return this.$store.getters.user.status || 0
|
|
}
|
|
const presences = this.$store.getters['members/presences'];
|
|
const userPresense = presences[this.user.uniqueID]
|
|
return userPresense || 0
|
|
}
|
|
},
|
|
methods: {
|
|
openUserInformation() {
|
|
this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.member {
|
|
display: flex;
|
|
padding: 3px;
|
|
margin: 10px;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
align-items: center;
|
|
align-content: center;
|
|
border-radius: 10px;
|
|
transition: 0.3s;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
overflow: hidden;
|
|
}
|
|
.member:hover {
|
|
background: rgba(0, 0, 0, 0.301);
|
|
}
|
|
.information {
|
|
margin-left: 5px;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
}
|
|
.username {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.type-box{
|
|
padding: 3px;
|
|
border-radius: 5px;
|
|
height: 100%;
|
|
background: rgb(255, 71, 71);
|
|
}
|
|
|
|
.avatar {
|
|
|
|
}
|
|
|
|
</style>
|