diff options
-rw-r--r-- | src/components/AvatarWrapper/AvatarWrapper.spec.js | 3 | ||||
-rw-r--r-- | src/components/AvatarWrapper/AvatarWrapper.vue | 7 | ||||
-rw-r--r-- | src/components/AvatarWrapper/AvatarWrapperSmall.vue | 9 |
3 files changed, 13 insertions, 6 deletions
diff --git a/src/components/AvatarWrapper/AvatarWrapper.spec.js b/src/components/AvatarWrapper/AvatarWrapper.spec.js index 2e9308537..c072795ff 100644 --- a/src/components/AvatarWrapper/AvatarWrapper.spec.js +++ b/src/components/AvatarWrapper/AvatarWrapper.spec.js @@ -44,7 +44,8 @@ describe('AvatarWrapper.vue', () => { it('Renders guests icons properly', () => { const wrapper = shallowMount(AvatarWrapper, { propsData: { - id: '', + id: 'random-sha1', + source: 'guests', name: '', size: 24, }, diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue index 9ddfcec19..a44853767 100644 --- a/src/components/AvatarWrapper/AvatarWrapper.vue +++ b/src/components/AvatarWrapper/AvatarWrapper.vue @@ -26,7 +26,7 @@ <div v-if="iconClass" class="icon" :class="[`avatar-${sizeToString}px`, iconClass]" /> - <Avatar v-else-if="id" + <Avatar v-else-if="!isGuest" :user="id" :display-name="name" menu-container="#content-vue" @@ -102,7 +102,7 @@ export default { computed: { // Determines which icon is displayed iconClass() { - if (!this.source || this.source === 'users') { + if (!this.source || this.source === 'users' || this.isGuest) { return '' } if (this.source === 'emails') { @@ -111,6 +111,9 @@ export default { // source: groups, circles return 'icon-contacts' }, + isGuest() { + return this.source === 'guests' + }, firstLetterOfGuestName() { const customName = this.name !== t('spreed', 'Guest') ? this.name : '?' return customName.charAt(0) diff --git a/src/components/AvatarWrapper/AvatarWrapperSmall.vue b/src/components/AvatarWrapper/AvatarWrapperSmall.vue index 9785bfa6b..52bb8029f 100644 --- a/src/components/AvatarWrapper/AvatarWrapperSmall.vue +++ b/src/components/AvatarWrapper/AvatarWrapperSmall.vue @@ -26,14 +26,14 @@ <div v-if="iconClass" class="icon" :class="[`avatar-${sizeToString}px`, iconClass]" /> - <Avatar v-else-if="id" + <Avatar v-else-if="!isGuest" :user="id" :display-name="name" menu-container="#content-vue" menu-position="left" - :show-user-status="showUserStatus" :disable-tooltip="disableTooltip" :disable-menu="disableMenu" + :show-user-status="showUserStatus" :size="size" /> <div v-else class="guest" @@ -91,7 +91,7 @@ export default { computed: { // Determines which icon is displayed iconClass() { - if (!this.source || this.source === 'users') { + if (!this.source || this.source === 'users' || this.isGuest) { return '' } if (this.source === 'emails') { @@ -100,6 +100,9 @@ export default { // source: groups, circles return 'icon-contacts' }, + isGuest() { + return this.source === 'guests' + }, firstLetterOfGuestName() { const customName = this.name !== t('spreed', 'Guest') ? this.name : '?' return customName.charAt(0) |