sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

アイコンを四角で表示するオプション

Browse Source
This commit is contained in:
syuilo
2021-07-19 15:11:28 +09:00
parent 862ddde0db
commit f1c9e596e8
4 changed files with 43 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/client/components/global/avatar.vue
View File

@ -1,9 +1,9 @@
<template>
<span class="eiwwqkts _noSelect" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
<span class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
<img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</span>
<MkA class="eiwwqkts _noSelect" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
<MkA class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
<img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</MkA>
@ -81,28 +81,6 @@ export default defineComponent({
border-radius: 100%;
line-height: 16px;
&.cat {
&:before, &:after {
background: #df548f;
border: solid 4px currentColor;
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 {
position: absolute;
bottom: 0;
@ -125,5 +103,35 @@ export default defineComponent({
width: 20%;
height: 20%;
}
&.square {
border-radius: 20%;
> .inner {
border-radius: 20%;
}
}
&.cat {
&:before, &:after {
background: #df548f;
border: solid 4px currentColor;
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);
}
}
}
</style>