diff options
| author | Acid Chicken (硫酸鶏) <root@acid-chicken.com> | 2018-08-13 03:36:42 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-08-13 03:36:42 +0900 |
| commit | 80d343bb0ba2ee8299dd194e5b95fbf55664c540 (patch) | |
| tree | 00545b20b6695cd001a3df2624d849d9e95f1141 /src | |
| parent | Fix ActivityPub followers/specified detection (diff) | |
| download | misskey-80d343bb0ba2ee8299dd194e5b95fbf55664c540.tar.gz misskey-80d343bb0ba2ee8299dd194e5b95fbf55664c540.tar.bz2 misskey-80d343bb0ba2ee8299dd194e5b95fbf55664c540.zip | |
Update avatar.vue
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/app/common/views/components/avatar.vue | 50 |
1 files 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> |