iridium/neko
2
2
Fork 0
mirror of https://github.com/m1k1o/neko.git synced 2024-07-24 14:40:50 +12:00
Code Issues Packages Projects Releases Wiki Activity

create avatars component

Browse Source
This commit is contained in:
m1k1o 2020-10-18 14:39:31 +02:00
parent 6286e38ef4
commit 6e101b6ac0
4 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/components/avatar.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<img :src="`https://ui-avatars.com/api/?name=${seed}&size=${size}`" />
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component({
name: 'neko-avatar',
})
export default class extends Vue {
@Prop(String) readonly seed: string | undefined;
@Prop(Number) readonly size: number | undefined;
}
</script>

4
client/src/components/chat.vue
View File

@ -4,7 +4,7 @@
<template v-for="(message, index) in history">
<li :key="index" class="message" v-if="message.type === 'text'">
<div class="author" @contextmenu.stop.prevent="onContext($event, { member: member(message.id) })">
<img :src="`https://api.adorable.io/avatars/40/${member(message.id).displayname}.png`" />
<neko-avatar :seed="member(message.id).displayname" :size="40" />
</div>
<div class="content">
<div class="content-head">
@ -329,6 +329,7 @@
import Markdown from './markdown'
import Content from './context.vue'
import Emoji from './emoji.vue'
import Avatar from './avatar.vue'
const length = 512 // max length of message
@ -338,6 +339,7 @@
'neko-markdown': Markdown,
'neko-context': Content,
'neko-emoji': Emoji,
'neko-avatar': Avatar,
},
})
export default class extends Vue {

4
client/src/components/context.vue
View File

@ -3,7 +3,7 @@
<template slot-scope="child" v-if="child.data">
<li class="header">
<div class="user">
<img :src="`https://api.adorable.io/avatars/25/${child.data.member.displayname}.png`" />
<neko-avatar :seed="child.data.member.displayname" :size="25" />
<strong>{{ child.data.member.displayname }}</strong>
</div>
</li>
@ -137,11 +137,13 @@
// @ts-ignore
import { VueContext } from 'vue-context'
import Avatar from './avatar.vue'
@Component({
name: 'neko-context',
components: {
'vue-context': VueContext,
'neko-avatar': Avatar,
},
})
export default class extends Vue {

14
client/src/components/members.vue
View File

@ -4,7 +4,7 @@
<ul class="members-list">
<li v-if="member">
<div :class="[{ host: member.id === host }, 'self', 'member']">
<img :src="`https://api.adorable.io/avatars/50/${member.displayname}.png`" />
<neko-avatar :seed="member.displayname" :size="50" />
</div>
</li>
<template v-for="(member, index) in members">
@ -13,11 +13,11 @@
:key="index"
v-tooltip="{ content: member.displayname, placement: 'bottom', offset: -15, boundariesElement: 'body' }"
>
<div :class="[{ host: member.id === host, admin: member.admin }, 'member']">
<img
:src="`https://api.adorable.io/avatars/50/${member.displayname}.png`"
@contextmenu.stop.prevent="onContext($event, { member })"
/>
<div
:class="[{ host: member.id === host, admin: member.admin }, 'member']"
@contextmenu.stop.prevent="onContext($event, { member })"
>
<neko-avatar :seed="member.displayname" :size="50" />
</div>
</li>
</template>
@ -161,11 +161,13 @@
import { Member } from '~/neko/types'
import Content from './context.vue'
import Avatar from './avatar.vue'
@Component({
name: 'neko-members',
components: {
'neko-context': Content,
'neko-avatar': Avatar,
},
})
export default class extends Vue {