custom avatars
This commit is contained in:
parent
6e101b6ac0
commit
aeb98e60cd
@ -1,7 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<img :src="`https://ui-avatars.com/api/?name=${seed}&size=${size}`" />
|
<!--
|
||||||
|
<img :src="`https://ui-avatars.com/api/?name=${seed}&size=${size}`" />
|
||||||
|
-->
|
||||||
|
<div class="avatar" :style="{
|
||||||
|
width: size + 'px',
|
||||||
|
height: size + 'px',
|
||||||
|
lineHeight: size + 'px',
|
||||||
|
fontSize: (size/2) + 'px',
|
||||||
|
backgroundColor: Background(),
|
||||||
|
}">
|
||||||
|
{{ seed.substring(0, 2).toUpperCase() }}
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.avatar {
|
||||||
|
user-select: none;
|
||||||
|
text-align: center;
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Vue, Component, Prop } from 'vue-property-decorator'
|
import { Vue, Component, Prop } from 'vue-property-decorator'
|
||||||
|
|
||||||
@ -9,7 +32,21 @@
|
|||||||
name: 'neko-avatar',
|
name: 'neko-avatar',
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
@Prop(String) readonly seed: string | undefined;
|
@Prop(String) readonly seed: string | undefined;
|
||||||
@Prop(Number) readonly size: number | undefined;
|
@Prop(Number) readonly size: number | undefined;
|
||||||
|
|
||||||
|
Background() {
|
||||||
|
let a = 0, b = 0, c = 0;
|
||||||
|
for(let i = 0; i < this.seed.length; i++) {
|
||||||
|
a += this.seed.charCodeAt(i) * 3;
|
||||||
|
b += this.seed.charCodeAt(i) * 5;
|
||||||
|
c += this.seed.charCodeAt(i) * 7;
|
||||||
|
}
|
||||||
|
|
||||||
|
let x = Math.floor(128 + (a % 128));
|
||||||
|
let y = Math.floor(128 + (b % 128));
|
||||||
|
let z = Math.floor(128 + (c % 128));
|
||||||
|
return "rgb(" + x + "," + y + "," + z + ")";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<template v-for="(message, index) in history">
|
<template v-for="(message, index) in history">
|
||||||
<li :key="index" class="message" v-if="message.type === 'text'">
|
<li :key="index" class="message" v-if="message.type === 'text'">
|
||||||
<div class="author" @contextmenu.stop.prevent="onContext($event, { member: member(message.id) })">
|
<div class="author" @contextmenu.stop.prevent="onContext($event, { member: member(message.id) })">
|
||||||
<neko-avatar :seed="member(message.id).displayname" :size="40" />
|
<neko-avatar class="avatar" :seed="member(message.id).displayname" :size="40" />
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="content-head">
|
<div class="content-head">
|
||||||
@ -106,7 +106,7 @@
|
|||||||
background: $style-primary;
|
background: $style-primary;
|
||||||
margin: 0px 10px 10px 0px;
|
margin: 0px 10px 10px 0px;
|
||||||
|
|
||||||
img {
|
.avatar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<template slot-scope="child" v-if="child.data">
|
<template slot-scope="child" v-if="child.data">
|
||||||
<li class="header">
|
<li class="header">
|
||||||
<div class="user">
|
<div class="user">
|
||||||
<neko-avatar :seed="child.data.member.displayname" :size="25" />
|
<neko-avatar class="avatar" :seed="child.data.member.displayname" :size="25" />
|
||||||
<strong>{{ child.data.member.displayname }}</strong>
|
<strong>{{ child.data.member.displayname }}</strong>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
@ -80,7 +80,7 @@
|
|||||||
align-content: center;
|
align-content: center;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
|
|
||||||
img {
|
.avatar {
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<ul class="members-list">
|
<ul class="members-list">
|
||||||
<li v-if="member">
|
<li v-if="member">
|
||||||
<div :class="[{ host: member.id === host }, 'self', 'member']">
|
<div :class="[{ host: member.id === host }, 'self', 'member']">
|
||||||
<neko-avatar :seed="member.displayname" :size="50" />
|
<neko-avatar class="avatar" :seed="member.displayname" :size="50" />
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<template v-for="(member, index) in members">
|
<template v-for="(member, index) in members">
|
||||||
@ -17,7 +17,7 @@
|
|||||||
:class="[{ host: member.id === host, admin: member.admin }, 'member']"
|
:class="[{ host: member.id === host, admin: member.admin }, 'member']"
|
||||||
@contextmenu.stop.prevent="onContext($event, { member })"
|
@contextmenu.stop.prevent="onContext($event, { member })"
|
||||||
>
|
>
|
||||||
<neko-avatar :seed="member.displayname" :size="50" />
|
<neko-avatar class="avatar" :seed="member.displayname" :size="50" />
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
@ -130,7 +130,7 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
.avatar {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
Reference in New Issue
Block a user