natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Update avatar.vue

This commit is contained in:
Acid Chicken (硫酸鶏) 2018-08-13 03:36:42 +09:00 committed by GitHub
parent c5073b33ef
commit 80d343bb0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/client/app/common/views/components/avatar.vue
View File

@ -1,8 +1,16 @@
<template> <template>
<span class="mk-avatar" :title="user | acct" :style="style" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick"></span> <span :class="{ mk-avatar: true, cat: cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
<span class="mk-avatar" :title="user | acct" :style="style" v-else-if="disableLink && disablePreview" @click="onClick"></span> <span class="inner" :style="style"></span>
<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id"></router-link> </span>
<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else-if="!disableLink && disablePreview"></router-link> <span :class="{ mk-avatar: true, cat: cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
<span class="inner" :style="style"></span>
</span>
<router-link :class="{ mk-avatar: true, cat: cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
<span class="inner" :style="style"></span>
</router-link>
<router-link :class="{ mk-avatar: true, cat: cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
<span class="inner" :style="style"></span>
</router-link>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -30,6 +38,9 @@ export default Vue.extend({
lightmode(): boolean { lightmode(): boolean {
return this.$store.state.device.lightmode; return this.$store.state.device.lightmode;
}, },
cat(): boolean {
return this.user.isCat && this.$store.state.settings.circleIcons;
}
style(): any { style(): any {
return { return {
backgroundColor: this.lightmode backgroundColor: this.lightmode
@ -54,7 +65,32 @@ export default Vue.extend({
.mk-avatar .mk-avatar
display inline-block display inline-block
vertical-align bottom vertical-align bottom
background-size cover
&::before,
&::after
background #df548f
border solid 4px #ffffff
box-sizing border-box
content ''
display inline-block
height 50%
width 50%
&::before
border-radius 0 75% 75%
transform rotate(37.5deg) skew(30deg)
&::after
border-radius 75% 0 75% 75%
transform rotate(-37.5deg) skew(-30deg)
.inner
background-position center center background-position center center
background-size cover
bottom 0
left 0
position absolute
right 0
top 0
transition border-radius 1s ease transition border-radius 1s ease
</style> </style>