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>