diff options
author | Joas Schilling <coding@schilljs.com> | 2019-10-24 16:50:46 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2019-10-29 13:47:46 +0300 |
commit | b90754359f6d9113e9ba2d7d852f2ac42e638ea2 (patch) | |
tree | 82ff37055b197f6a8c54ac3be184ca9e0f23d8cc /src/components/MessagesList/MessagesGroup/AuthorAvatar.vue | |
parent | 88e830fdcb74609b75bf1b169b618967eb56b750 (diff) |
Author avatar component with bots and guest support
Signed-off-by: Joas Schilling <coding@schilljs.com>
Diffstat (limited to 'src/components/MessagesList/MessagesGroup/AuthorAvatar.vue')
-rw-r--r-- | src/components/MessagesList/MessagesGroup/AuthorAvatar.vue | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue new file mode 100644 index 000000000..0ba66458b --- /dev/null +++ b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue @@ -0,0 +1,115 @@ +<!-- + - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me> + - + - @author Marco Ambrosini <marcoambrosini@pm.me> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. +--> + +<template> + <Avatar v-if="isUser" + class="messages__avatar__icon" + :user="authorId" + :display-name="displayName" /> + <div v-else-if="isGuest" + class="avatar guest"> + {{ firstLetterOfGuestName }} + </div> + <div v-else-if="isChangelog" + class="avatar icon icon-changelog" /> + <div v-else + class="avatar bot"> + >_ + </div> +</template> + +<script> +import Avatar from 'nextcloud-vue/dist/Components/Avatar' + +export default { + name: 'AuthorAvatar', + components: { + Avatar + }, + props: { + authorType: { + type: String, + required: true + }, + authorId: { + type: String, + required: true + }, + displayName: { + type: String, + required: true + } + }, + + computed: { + isChangelog() { + return this.authorType === 'bots' && this.authorId === 'changelog' + }, + isUser() { + return this.authorType === 'users' + }, + isGuest() { + return this.authorType === 'guests' + }, + + firstLetterOfGuestName() { + const customName = this.displayName !== t('spreed', 'Guest') ? this.displayName : '?' + return customName.charAt(0) + } + } +} +</script> + +<style lang="scss" scoped> + +// size of avtars of chat message authors +$author-avatar-size: 32px; + +.avatar { + position: sticky; + top: 0; + height: $author-avatar-size; + width: $author-avatar-size; + + &.icon { + padding: 20px 10px 10px 10px; + border-radius: 50%; + height: $author-avatar-size; + width: $author-avatar-size; + } + + &.bot { + padding-left: 5px; + line-height: $author-avatar-size; + border-radius: 50%; + background-color: var(--color-background-darker); + } + + &.guest { + padding: 0; + line-height: $author-avatar-size; + border-radius: 50%; + background-color: #b9b9b9; + display: block; + text-align: center; + } +} +</style> |