Sabe Jones
8b569e2136
* feat(messages): big PMs refactor * add private messages route * move to page * WIP - header + begin with the sidebar * extract userLabel + style sidebar + extract converstation item * correct conversation item style * toggle switch style * add contributor / backer to conversation user-label * fix shadows * fix the conversations list (ignoring own sent) * selected conversation label * faceAvatar component * fix message / avatar height * fix message list / empty messages height * new message padding/styles/functionality - finished sidebar conversation styling - * fix loading messages + perfect-scrollbar * fix load more line * fix loading label * open new conversation from outside * if the user doesn't have avatar-data inside the conversation and does not exist anymore, just load/set the user name * search bar new icon / style * block using from conversation context-menu * fix lint * fix merge / lint * fix merge * first separate page * fix tooltips + full width private message + card max width + more responsive * separate conversations methods, to prevent circular deps * update eslint config * fix open new private message * remove unneeded close icon + fix toggle-switch layout * same content height on empty conversations - remove border / box-shadow * canLoadMore = false * remove inbox conditions on chat components * hide footer / fix empty sidebar * floating shadow * remove tooltip on selected conversation user + pm always full-size * show avatar on empty conversation * disable face-avatar * fix faceAvatar + story * fix loading conversation messages while switching the conversation * refresh private-messages page when you are already on it * add countbadge knob to change the example * fix lint * fix hide tooltip + align header correctly * disable perfect scroll * load messages on refresh event * fix header label + conversation actions not breaking layout on hover * add gifting banner to the max height calculation * correct chunk name Co-authored-by: negue <negue@users.noreply.github.com> Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>
116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
<template>
|
|
<div
|
|
v-if="displayName"
|
|
v-b-tooltip.hover.top="tierTitle"
|
|
class="user-label"
|
|
:class="levelStyle()"
|
|
>
|
|
{{ displayName }}
|
|
<div
|
|
class="svg-icon"
|
|
v-html="tierIcon()"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~@/assets/scss/colors.scss';
|
|
|
|
.user-label.no-tier {
|
|
color: $gray-50;
|
|
}
|
|
|
|
.user-label {
|
|
font-weight: bold;
|
|
margin-bottom: 0;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
|
|
.svg-icon {
|
|
width: 10px;
|
|
display: inline-block;
|
|
margin-left: .5em;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import achievementsLib from '@/../../common/script/libs/achievements';
|
|
|
|
import styleHelper from '@/mixins/styleHelper';
|
|
|
|
import tier1 from '@/assets/svg/tier-1.svg';
|
|
import tier2 from '@/assets/svg/tier-2.svg';
|
|
import tier3 from '@/assets/svg/tier-3.svg';
|
|
import tier4 from '@/assets/svg/tier-4.svg';
|
|
import tier5 from '@/assets/svg/tier-5.svg';
|
|
import tier6 from '@/assets/svg/tier-6.svg';
|
|
import tier7 from '@/assets/svg/tier-7.svg';
|
|
import tier8 from '@/assets/svg/tier-mod.svg';
|
|
import tier9 from '@/assets/svg/tier-staff.svg';
|
|
import tierNPC from '@/assets/svg/tier-npc.svg';
|
|
|
|
export default {
|
|
mixins: [styleHelper],
|
|
props: ['user', 'name', 'backer', 'contributor', 'hideTooltip'],
|
|
data () {
|
|
return {
|
|
icons: Object.freeze({
|
|
tier1,
|
|
tier2,
|
|
tier3,
|
|
tier4,
|
|
tier5,
|
|
tier6,
|
|
tier7,
|
|
tier8,
|
|
tier9,
|
|
tierNPC,
|
|
}),
|
|
};
|
|
},
|
|
computed: {
|
|
displayName () {
|
|
if (this.name) {
|
|
return this.name;
|
|
}
|
|
if (this.user && this.user.profile) {
|
|
return this.user.profile.name;
|
|
}
|
|
|
|
return null;
|
|
},
|
|
level () {
|
|
if (this.contributor) {
|
|
return this.contributor.level;
|
|
} if (this.user && this.user.contributor) {
|
|
return this.user.contributor.level;
|
|
}
|
|
return 0;
|
|
},
|
|
isNPC () {
|
|
if (this.backer) {
|
|
return this.backer.level;
|
|
} if (this.user && this.user.backer) {
|
|
return this.user.backer.level;
|
|
}
|
|
return false;
|
|
},
|
|
},
|
|
methods: {
|
|
tierIcon () {
|
|
if (this.isNPC) {
|
|
return this.icons.tierNPC;
|
|
}
|
|
return this.icons[`tier${this.level}`];
|
|
},
|
|
tierTitle () {
|
|
return this.hideTooltip ? '' : achievementsLib.getContribText(this.contributor, this.isNPC) || '';
|
|
},
|
|
levelStyle () {
|
|
return this.userLevelStyleFromLevel(this.level, this.isNPC);
|
|
},
|
|
},
|
|
};
|
|
</script>
|