fix,Lint,add animation
This commit is contained in:
mappi-pr
parent
f06fe5a44b
commit
e9d36da36a
|
|
@ -17,7 +17,7 @@
|
|||
<div :class="$style.statusItem">
|
||||
<p :class="$style.statusItemLabel">{{ i18n.ts.notes }}</p><span :class="$style.statusItemValue">{{ user.notesCount }}</span>
|
||||
</div>
|
||||
<template v-if="isFfVisibility(id, props.user)">
|
||||
<template v-if="isFfVisibility($i, props.user)">
|
||||
<div :class="$style.statusItem">
|
||||
<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue">{{ user.followingCount }}</span>
|
||||
</div>
|
||||
|
|
@ -27,10 +27,10 @@
|
|||
</template>
|
||||
<template v-else>
|
||||
<div :class="$style.statusItem">
|
||||
<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock"></i></span>
|
||||
<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock" :class="{[$style.animation]: animation}"></i></span>
|
||||
</div>
|
||||
<div :class="$style.statusItem">
|
||||
<p :class="$style.statusItemLabel">{{ i18n.ts.followers }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock"></i></span>
|
||||
<p :class="$style.statusItemLabel">{{ i18n.ts.followers }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock" :class="{[$style.animation]: animation}"></i></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -45,17 +45,13 @@ import { userPage } from '@/filters/user';
|
|||
import { i18n } from '@/i18n';
|
||||
import { $i } from '@/account';
|
||||
import { isFfVisibility } from '@/scripts/is-ff-visibility';
|
||||
import { defaultStore } from '@/store';
|
||||
|
||||
const props = defineProps<{
|
||||
user: misskey.entities.UserDetailed;
|
||||
}>();
|
||||
|
||||
const id = () => {
|
||||
if ($i) {
|
||||
return 'dummy';
|
||||
}
|
||||
return $i.id;
|
||||
};
|
||||
const animation = $ref(defaultStore.state.animation);
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
@ -146,6 +142,10 @@ const id = () => {
|
|||
.statusItemValue {
|
||||
font-size: 1em;
|
||||
color: var(--accent);
|
||||
|
||||
> i {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.follow {
|
||||
|
|
@ -153,4 +153,32 @@ const id = () => {
|
|||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
@keyframes keywiggle {
|
||||
0% { transform: translate(-3px,-1px) rotate(-8deg); }
|
||||
5% { transform: translateY(-1px) rotate(-10deg); }
|
||||
10% { transform: translate(1px,-3px) rotate(0); }
|
||||
15% { transform: translate(1px,1px) rotate(11deg); }
|
||||
20% { transform: translate(-2px,1px) rotate(1deg); }
|
||||
25% { transform: translate(-1px,-2px) rotate(-2deg); }
|
||||
30% { transform: translate(-1px,2px) rotate(-3deg); }
|
||||
35% { transform: translate(2px,1px) rotate(6deg); }
|
||||
40% { transform: translate(-2px,-3px) rotate(-9deg); }
|
||||
45% { transform: translateY(-1px) rotate(-12deg); }
|
||||
50% { transform: translate(1px,2px) rotate(10deg); }
|
||||
55% { transform: translateY(-3px) rotate(8deg); }
|
||||
60% { transform: translate(1px,-1px) rotate(8deg); }
|
||||
65% { transform: translateY(-1px) rotate(-7deg); }
|
||||
70% { transform: translate(-1px,-3px) rotate(6deg); }
|
||||
75% { transform: translateY(-2px) rotate(4deg); }
|
||||
80% { transform: translate(-2px,-1px) rotate(3deg); }
|
||||
85% { transform: translate(1px,-3px) rotate(-10deg); }
|
||||
90% { transform: translate(1px) rotate(3deg); }
|
||||
95% { transform: translate(-2px) rotate(-3deg); }
|
||||
to { transform: translate(2px,1px) rotate(2deg); }
|
||||
}
|
||||
|
||||
.animation:hover {
|
||||
animation: keywiggle 1s;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<div :class="$style.statusItemLabel">{{ i18n.ts.notes }}</div>
|
||||
<div>{{ number(user.notesCount) }}</div>
|
||||
</div>
|
||||
<template v-if="isFfVisibility(id, user)">
|
||||
<template v-if="isFfVisibility($i, user)">
|
||||
<div :class="$style.statusItem">
|
||||
<div :class="$style.statusItemLabel">{{ i18n.ts.following }}</div>
|
||||
<div>{{ number(user.followingCount) }}</div>
|
||||
|
|
@ -43,11 +43,11 @@
|
|||
<template v-else>
|
||||
<div :class="$style.statusItem">
|
||||
<div :class="$style.statusItemLabel">{{ i18n.ts.following }}</div>
|
||||
<div><i class="ti ti-lock"></i></div>
|
||||
<div><i class="ti ti-lock" :class="{[$style.animation]: animation}"></i></div>
|
||||
</div>
|
||||
<div :class="$style.statusItem">
|
||||
<div :class="$style.statusItemLabel">{{ i18n.ts.followers }}</div>
|
||||
<div><i class="ti ti-lock"></i></div>
|
||||
<div><i class="ti ti-lock" :class="{[$style.animation]: animation}"></i></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -89,12 +89,7 @@ const emit = defineEmits<{
|
|||
|
||||
const zIndex = os.claimZIndex('middle');
|
||||
|
||||
const id = () => {
|
||||
if ($i) {
|
||||
return 'dummy';
|
||||
}
|
||||
return $i.id;
|
||||
};
|
||||
const animation = $ref(defaultStore.state.animation);
|
||||
|
||||
let user = $ref<misskey.entities.UserDetailed | null>(null);
|
||||
let top = $ref(0);
|
||||
|
|
@ -221,6 +216,13 @@ onMounted(() => {
|
|||
display: inline-block;
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
|
||||
> div {
|
||||
> i {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statusItemLabel {
|
||||
|
|
@ -242,4 +244,32 @@ onMounted(() => {
|
|||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
@keyframes keywiggle {
|
||||
0% { transform: translate(-3px,-1px) rotate(-8deg); }
|
||||
5% { transform: translateY(-1px) rotate(-10deg); }
|
||||
10% { transform: translate(1px,-3px) rotate(0); }
|
||||
15% { transform: translate(1px,1px) rotate(11deg); }
|
||||
20% { transform: translate(-2px,1px) rotate(1deg); }
|
||||
25% { transform: translate(-1px,-2px) rotate(-2deg); }
|
||||
30% { transform: translate(-1px,2px) rotate(-3deg); }
|
||||
35% { transform: translate(2px,1px) rotate(6deg); }
|
||||
40% { transform: translate(-2px,-3px) rotate(-9deg); }
|
||||
45% { transform: translateY(-1px) rotate(-12deg); }
|
||||
50% { transform: translate(1px,2px) rotate(10deg); }
|
||||
55% { transform: translateY(-3px) rotate(8deg); }
|
||||
60% { transform: translate(1px,-1px) rotate(8deg); }
|
||||
65% { transform: translateY(-1px) rotate(-7deg); }
|
||||
70% { transform: translate(-1px,-3px) rotate(6deg); }
|
||||
75% { transform: translateY(-2px) rotate(4deg); }
|
||||
80% { transform: translate(-2px,-1px) rotate(3deg); }
|
||||
85% { transform: translate(1px,-3px) rotate(-10deg); }
|
||||
90% { transform: translate(1px) rotate(3deg); }
|
||||
95% { transform: translate(-2px) rotate(-3deg); }
|
||||
to { transform: translate(2px,1px) rotate(2deg); }
|
||||
}
|
||||
|
||||
.animation:hover {
|
||||
animation: keywiggle 1s;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@
|
|||
<b>{{ number(user.notesCount) }}</b>
|
||||
<span>{{ i18n.ts.notes }}</span>
|
||||
</MkA>
|
||||
<template v-if="isFfVisibility(id, props.user)">
|
||||
<template v-if="isFfVisibility($i, props.user)">
|
||||
<MkA v-click-anime :to="userPage(user, 'following')">
|
||||
<b>{{ number(user.followingCount) }}</b>
|
||||
<span>{{ i18n.ts.following }}</span>
|
||||
|
|
@ -221,13 +221,6 @@ const age = $computed(() => {
|
|||
|
||||
const animation = $ref(defaultStore.state.animation);
|
||||
|
||||
const id = () => {
|
||||
if ($i) {
|
||||
return 'dummy';
|
||||
}
|
||||
return $i.id;
|
||||
};
|
||||
|
||||
function menu(ev) {
|
||||
os.popupMenu(getUserMenu(props.user, router), ev.currentTarget ?? ev.target);
|
||||
}
|
||||
|
|
@ -691,27 +684,27 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
@keyframes keywiggle {
|
||||
0% { transform: translate(-3px,-1px) rotate(-8deg); }
|
||||
5% { transform: translateY(-1px) rotate(-10deg); }
|
||||
10% { transform: translate(1px,-3px) rotate(0); }
|
||||
15% { transform: translate(1px,1px) rotate(11deg); }
|
||||
20% { transform: translate(-2px,1px) rotate(1deg); }
|
||||
25% { transform: translate(-1px,-2px) rotate(-2deg); }
|
||||
30% { transform: translate(-1px,2px) rotate(-3deg); }
|
||||
35% { transform: translate(2px,1px) rotate(6deg); }
|
||||
40% { transform: translate(-2px,-3px) rotate(-9deg); }
|
||||
45% { transform: translateY(-1px) rotate(-12deg); }
|
||||
50% { transform: translate(1px,2px) rotate(10deg); }
|
||||
55% { transform: translateY(-3px) rotate(8deg); }
|
||||
60% { transform: translate(1px,-1px) rotate(8deg); }
|
||||
65% { transform: translateY(-1px) rotate(-7deg); }
|
||||
70% { transform: translate(-1px,-3px) rotate(6deg); }
|
||||
75% { transform: translateY(-2px) rotate(4deg); }
|
||||
80% { transform: translate(-2px,-1px) rotate(3deg); }
|
||||
85% { transform: translate(1px,-3px) rotate(-10deg); }
|
||||
90% { transform: translate(1px) rotate(3deg); }
|
||||
95% { transform: translate(-2px) rotate(-3deg); }
|
||||
to { transform: translate(2px,1px) rotate(2deg); }
|
||||
0% { transform: translate(-3px,-1px) rotate(-8deg); }
|
||||
5% { transform: translateY(-1px) rotate(-10deg); }
|
||||
10% { transform: translate(1px,-3px) rotate(0); }
|
||||
15% { transform: translate(1px,1px) rotate(11deg); }
|
||||
20% { transform: translate(-2px,1px) rotate(1deg); }
|
||||
25% { transform: translate(-1px,-2px) rotate(-2deg); }
|
||||
30% { transform: translate(-1px,2px) rotate(-3deg); }
|
||||
35% { transform: translate(2px,1px) rotate(6deg); }
|
||||
40% { transform: translate(-2px,-3px) rotate(-9deg); }
|
||||
45% { transform: translateY(-1px) rotate(-12deg); }
|
||||
50% { transform: translate(1px,2px) rotate(10deg); }
|
||||
55% { transform: translateY(-3px) rotate(8deg); }
|
||||
60% { transform: translate(1px,-1px) rotate(8deg); }
|
||||
65% { transform: translateY(-1px) rotate(-7deg); }
|
||||
70% { transform: translate(-1px,-3px) rotate(6deg); }
|
||||
75% { transform: translateY(-2px) rotate(4deg); }
|
||||
80% { transform: translate(-2px,-1px) rotate(3deg); }
|
||||
85% { transform: translate(1px,-3px) rotate(-10deg); }
|
||||
90% { transform: translate(1px) rotate(3deg); }
|
||||
95% { transform: translate(-2px) rotate(-3deg); }
|
||||
to { transform: translate(2px,1px) rotate(2deg); }
|
||||
}
|
||||
|
||||
.animation:hover {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,32 @@
|
|||
export function isFfVisibility(id, user):boolean {
|
||||
if (id === user.id) {
|
||||
return true;
|
||||
}
|
||||
export function isFfVisibility(i, user):boolean {
|
||||
|
||||
let checkFlag:boolean;
|
||||
|
||||
switch (user.ffVisibility) {
|
||||
case 'private':
|
||||
return false;
|
||||
checkFlag = false;
|
||||
break;
|
||||
case 'followers':
|
||||
if (!user.isFollowing) {
|
||||
return false;
|
||||
checkFlag = false;
|
||||
break;
|
||||
}
|
||||
// fallthrough
|
||||
default: return true;
|
||||
default: checkFlag = true;
|
||||
}
|
||||
|
||||
if (!i) {
|
||||
if (checkFlag) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
//自分自身の場合は一律true
|
||||
if (i.id === user.id) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return checkFlag;
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue