From 80d343bb0ba2ee8299dd194e5b95fbf55664c540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
<root@acid-chicken.com>
Date: Mon, 13 Aug 2018 03:36:42 +0900
Subject: [PATCH] Update avatar.vue
---
.../app/common/views/components/avatar.vue | 50 ++++++++++++++++---
1 file changed, 43 insertions(+), 7 deletions(-)
diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 6685296c16..5339c8999f 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -1,8 +1,16 @@
<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" :title="user | acct" :style="style" v-else-if="disableLink && disablePreview" @click="onClick"></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>
- <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-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
+ <span class="inner" :style="style"></span>
+ </span>
+ <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>
<script lang="ts">
@@ -30,6 +38,9 @@ export default Vue.extend({
lightmode(): boolean {
return this.$store.state.device.lightmode;
},
+ cat(): boolean {
+ return this.user.isCat && this.$store.state.settings.circleIcons;
+ }
style(): any {
return {
backgroundColor: this.lightmode
@@ -54,7 +65,32 @@ export default Vue.extend({
.mk-avatar
display inline-block
vertical-align bottom
- background-size cover
- background-position center center
- transition border-radius 1s ease
+
+ &::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-size cover
+ bottom 0
+ left 0
+ position absolute
+ right 0
+ top 0
+ transition border-radius 1s ease
</style>