update
This commit is contained in:
mattyatea
parent
5e140a7ff5
commit
509181a6d0
9 changed files with 288 additions and 229 deletions
|
|
@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.root">
|
||||
<div :class="$style.head">
|
||||
<MkAvatar v-if="['pollEnded', 'note'].includes(notification.type) && notification.note" :class="$style.icon" :user="notification.note.user" link preview/>
|
||||
<MkAvatar v-else-if="['roleAssigned', 'achievementEarned'].includes(notification.type)" :class="$style.icon" :user="$i" link preview/>
|
||||
<MkAvatar v-else-if="['roleAssigned', 'achievementEarned', 'loginbonus'].includes(notification.type)" :class="$style.icon" :user="$i" link preview/>
|
||||
<div v-else-if="notification.type === 'reaction:grouped' && notification.note.reactionAcceptance === 'likeOnly'" :class="[$style.icon, $style.icon_reactionGroupHeart]"><i class="ti ti-heart" style="line-height: 1;"></i></div>
|
||||
<div v-else-if="notification.type === 'reaction:grouped'" :class="[$style.icon, $style.icon_reactionGroup]"><i class="ti ti-plus" style="line-height: 1;"></i></div>
|
||||
<div v-else-if="notification.type === 'renote:grouped'" :class="[$style.icon, $style.icon_renoteGroup]"><i class="ti ti-repeat" style="line-height: 1;"></i></div>
|
||||
|
|
@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
[$style.t_quote]: notification.type === 'quote',
|
||||
[$style.t_pollEnded]: notification.type === 'pollEnded',
|
||||
[$style.t_achievementEarned]: notification.type === 'achievementEarned',
|
||||
[$style.t_achievementEarned]: notification.type === 'loginbonus',
|
||||
[$style.t_roleAssigned]: notification.type === 'roleAssigned' && notification.role.iconUrl == null,
|
||||
}]"
|
||||
>
|
||||
|
|
@ -37,6 +38,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<i v-else-if="notification.type === 'quote'" class="ti ti-quote"></i>
|
||||
<i v-else-if="notification.type === 'pollEnded'" class="ti ti-chart-arrows"></i>
|
||||
<i v-else-if="notification.type === 'achievementEarned'" class="ti ti-medal"></i>
|
||||
<i v-else-if="notification.type === 'loginbonus'" class="ti ti-medal"></i>
|
||||
|
||||
<template v-else-if="notification.type === 'roleAssigned'">
|
||||
<img v-if="notification.role.iconUrl" style="height: 1.3em; vertical-align: -22%;" :src="notification.role.iconUrl" alt=""/>
|
||||
<i v-else class="ti ti-badges"></i>
|
||||
|
|
@ -56,6 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<span v-else-if="notification.type === 'note'">{{ i18n.ts._notification.newNote }}: <MkUserName :user="notification.note.user"/></span>
|
||||
<span v-else-if="notification.type === 'roleAssigned'">{{ i18n.ts._notification.roleAssigned }}</span>
|
||||
<span v-else-if="notification.type === 'achievementEarned'">{{ i18n.ts._notification.achievementEarned }}</span>
|
||||
<span v-else-if="notification.type === 'loginbonus'">{{ i18n.ts._notification.loginbonus }}</span>
|
||||
<span v-else-if="notification.type === 'test'">{{ i18n.ts._notification.testNotification }}</span>
|
||||
<MkA v-else-if="notification.type === 'follow' || notification.type === 'mention' || notification.type === 'reply' || notification.type === 'renote' || notification.type === 'quote' || notification.type === 'reaction' || notification.type === 'receiveFollowRequest' || notification.type === 'followRequestAccepted'" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
|
||||
<span v-else-if="notification.type === 'reaction:grouped' && notification.note.reactionAcceptance === 'likeOnly'">{{ i18n.tsx._notification.likedBySomeUsers({ n: getActualReactedUsersCount(notification) }) }}</span>
|
||||
|
|
@ -94,10 +98,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkA>
|
||||
<div v-else-if="notification.type === 'roleAssigned'" :class="$style.text">
|
||||
{{ notification.role.name }}
|
||||
</div> <div v-else-if="notification.type === 'loginbonus'" :class="$style.text">
|
||||
{{ notification.loginbonus }}プリズム入手しました！
|
||||
</div>
|
||||
<MkA v-else-if="notification.type === 'achievementEarned'" :class="$style.text" to="/my/achievements">
|
||||
{{ i18n.ts._achievements._types['_' + notification.achievement].title }}
|
||||
</MkA>
|
||||
|
||||
<template v-else-if="notification.type === 'follow'">
|
||||
<span :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,159 +11,175 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<!-- <div class="punished" v-if="user.isSuspended"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
|
||||
<!-- <div class="punished" v-if="user.isSilenced"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
|
||||
|
||||
<div class="profile _gaps">
|
||||
<MkAccountMoved v-if="user.movedTo" :movedTo="user.movedTo"/>
|
||||
<MkRemoteCaution v-if="user.host != null" :href="user.url ?? user.uri!" class="warn"/>
|
||||
<MkRemoteInfoUpdate v-if="user.host != null" :UserId="user.id" class="warn"/>
|
||||
<div :key="user.id" class="main _panel">
|
||||
<div class="banner-container" :style="style">
|
||||
<div ref="bannerEl" class="banner" :style="style"></div>
|
||||
<div class="fade"></div>
|
||||
<div class="title">
|
||||
<MkUserName class="name" :user="user" :nowrap="true"/>
|
||||
<div class="bottom">
|
||||
<span class="username"><MkAcct :user="user" :detail="true"/></span>
|
||||
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i
|
||||
class="ti ti-shield"></i></span>
|
||||
<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
|
||||
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
|
||||
<button v-if="$i && !isEditingMemo && !memoDraft" class="_button add-note-button" @click="showMemoTextarea">
|
||||
<i class="ti ti-edit"/> {{ i18n.ts.addMemo }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
|
||||
<div v-if="$i" class="actions">
|
||||
<button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
|
||||
<MkNotifyButton v-if="$i.id != user.id " :user="user"></MkNotifyButton>
|
||||
<MkFollowButton v-if="$i.id != user.id" v-model:user="user" :inline="true" :transparent="false" :full="true"
|
||||
class="koudoku"/>
|
||||
</div>
|
||||
</div>
|
||||
<MkAvatar class="avatar" :user="user" indicator/>
|
||||
<div class="title">
|
||||
<MkUserName :user="user" :nowrap="false" class="name"/>
|
||||
<div class="bottom">
|
||||
<span class="username"><MkAcct :user="user" :detail="true"/></span>
|
||||
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i
|
||||
class="ti ti-shield"></i></span>
|
||||
<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
|
||||
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="user.roles.length > 0" class="roles">
|
||||
<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role"
|
||||
:style="{ '--color': role.color }">
|
||||
<div class="profile _gaps">
|
||||
<MkAccountMoved v-if="user.movedTo" :movedTo="user.movedTo"/>
|
||||
<MkRemoteCaution v-if="user.host != null" :href="user.url ?? user.uri!" class="warn"/>
|
||||
<MkRemoteInfoUpdate v-if="user.host != null" :UserId="user.id" class="warn"/>
|
||||
<div :key="user.id" class="main _panel">
|
||||
<div class="banner-container" :style="style">
|
||||
<div ref="bannerEl" class="banner" :style="style"></div>
|
||||
<div class="fade"></div>
|
||||
<div class="title">
|
||||
<MkUserName class="name" :user="user" :nowrap="true"/>
|
||||
<div class="bottom">
|
||||
<span class="username"><MkAcct :user="user" :detail="true"/></span>
|
||||
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i
|
||||
class="ti ti-shield"
|
||||
></i></span>
|
||||
<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
|
||||
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
|
||||
<button v-if="$i && !isEditingMemo && !memoDraft" class="_button add-note-button" @click="showMemoTextarea">
|
||||
<i class="ti ti-edit"/> {{ i18n.ts.addMemo }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
|
||||
<div v-if="$i" class="actions">
|
||||
<button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
|
||||
<MkNotifyButton v-if="$i.id != user.id " :user="user"></MkNotifyButton>
|
||||
<MkFollowButton
|
||||
v-if="$i.id != user.id" v-model:user="user" :inline="true" :transparent="false" :full="true"
|
||||
class="koudoku"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<MkAvatar class="avatar" :user="user" indicator/>
|
||||
<div class="title">
|
||||
<MkUserName :user="user" :nowrap="false" class="name"/>
|
||||
<div class="bottom">
|
||||
<span class="username"><MkAcct :user="user" :detail="true"/></span>
|
||||
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i
|
||||
class="ti ti-shield"
|
||||
></i></span>
|
||||
<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
|
||||
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="user.roles.length > 0" class="roles">
|
||||
<span
|
||||
v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role"
|
||||
:style="{ '--color': role.color }"
|
||||
>
|
||||
<MkA v-adaptive-bg :to="`/roles/${role.id}`">
|
||||
<img v-if="role.iconUrl" style="height: 1.3em; vertical-align: -22%;" :src="role.iconUrl"/>
|
||||
{{ role.name }}
|
||||
</MkA>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="iAmModerator" class="moderationNote">
|
||||
<MkTextarea v-if="editModerationNote || (moderationNote != null && moderationNote !== '')"
|
||||
v-model="moderationNote" manualSave>
|
||||
<template #label>{{ i18n.ts.moderationNote }}</template>
|
||||
</MkTextarea>
|
||||
<div v-else>
|
||||
<MkButton small @click="editModerationNote = true">{{ i18n.ts.addModerationNote }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isEditingMemo || memoDraft" class="memo" :class="{'no-memo': !memoDraft}">
|
||||
<div class="heading" v-text="i18n.ts.memo"/>
|
||||
<textarea
|
||||
ref="memoTextareaEl"
|
||||
v-model="memoDraft"
|
||||
rows="1"
|
||||
@focus="isEditingMemo = true"
|
||||
@blur="updateMemo"
|
||||
@input="adjustMemoTextarea"
|
||||
/>
|
||||
</div>
|
||||
<div class="description">
|
||||
<MkOmit>
|
||||
<Mfm v-if="user.description" :text="user.description" :isNote="false" :author="user"/>
|
||||
<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
|
||||
</MkOmit>
|
||||
</div>
|
||||
<div class="fields system">
|
||||
<dl v-if="user.location" class="field">
|
||||
<dt class="name"><i class="ti ti-map-pin ti-fw"></i> {{ i18n.ts.location }}</dt>
|
||||
<dd class="value">{{ user.location }}</dd>
|
||||
</dl>
|
||||
<dl v-if="user.birthday" class="field">
|
||||
<dt class="name"><i class="ti ti-cake ti-fw"></i> {{ i18n.ts.birthday }}</dt>
|
||||
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{
|
||||
i18n.tsx.yearsOld({age})
|
||||
}})
|
||||
</dd>
|
||||
</dl>
|
||||
<dl class="field">
|
||||
<dt class="name"><i class="ti ti-calendar ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>
|
||||
<dd class="value">{{ dateString(user.createdAt) }} (
|
||||
<MkTime :time="user.createdAt"/>
|
||||
)
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div v-if="user.fields.length > 0" class="fields">
|
||||
<dl v-for="(field, i) in user.fields" :key="i" class="field">
|
||||
<dt class="name">
|
||||
<Mfm :text="field.name" :plain="true" :colored="false"/>
|
||||
</dt>
|
||||
<dd class="value">
|
||||
<Mfm :text="field.value" :author="user" :colored="false"/>
|
||||
<i v-if="user.verifiedLinks.includes(field.value)" v-tooltip:dialog="i18n.ts.verifiedLink"
|
||||
class="ti ti-circle-check" :class="$style.verifiedLink"></i>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="status">
|
||||
<MkA :to="userPage(user)">
|
||||
<b>{{ number(user.notesCount) }}</b>
|
||||
<span>{{ i18n.ts.notes }}</span>
|
||||
</MkA>
|
||||
<MkA v-if="isFollowingVisibleForMe(user)" :to="userPage(user, 'following')">
|
||||
<b>{{ number(user.followingCount) }}</b>
|
||||
<span>{{ i18n.ts.following }}</span>
|
||||
</MkA>
|
||||
<MkA v-if="isFollowersVisibleForMe(user)" :to="userPage(user, 'followers')">
|
||||
<b>{{ number(user.followersCount) }}</b>
|
||||
<span>{{ i18n.ts.followers }}</span>
|
||||
</MkA>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="iAmModerator" class="moderationNote">
|
||||
<MkTextarea
|
||||
v-if="editModerationNote || (moderationNote != null && moderationNote !== '')"
|
||||
v-model="moderationNote" manualSave
|
||||
>
|
||||
<template #label>{{ i18n.ts.moderationNote }}</template>
|
||||
</MkTextarea>
|
||||
<div v-else>
|
||||
<MkButton small @click="editModerationNote = true">{{ i18n.ts.addModerationNote }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isEditingMemo || memoDraft" class="memo" :class="{'no-memo': !memoDraft}">
|
||||
<div class="heading" v-text="i18n.ts.memo"/>
|
||||
<textarea
|
||||
ref="memoTextareaEl"
|
||||
v-model="memoDraft"
|
||||
rows="1"
|
||||
@focus="isEditingMemo = true"
|
||||
@blur="updateMemo"
|
||||
@input="adjustMemoTextarea"
|
||||
/>
|
||||
</div>
|
||||
<div class="description">
|
||||
<MkOmit>
|
||||
<Mfm v-if="user.description" :text="user.description" :isNote="false" :author="user"/>
|
||||
<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
|
||||
</MkOmit>
|
||||
</div>
|
||||
<div class="fields system">
|
||||
<dl v-if="user.location" class="field">
|
||||
<dt class="name"><i class="ti ti-map-pin ti-fw"></i> {{ i18n.ts.location }}</dt>
|
||||
<dd class="value">{{ user.location }}</dd>
|
||||
</dl>
|
||||
<dl v-if="user.birthday" class="field">
|
||||
<dt class="name"><i class="ti ti-cake ti-fw"></i> {{ i18n.ts.birthday }}</dt>
|
||||
<dd class="value">
|
||||
{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{
|
||||
i18n.tsx.yearsOld({age})
|
||||
}})
|
||||
</dd>
|
||||
</dl>
|
||||
<dl class="field">
|
||||
<dt class="name"><i class="ti ti-calendar ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>
|
||||
<dd class="value">
|
||||
{{ dateString(user.createdAt) }} (
|
||||
<MkTime :time="user.createdAt"/>
|
||||
)
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div v-if="user.fields.length > 0" class="fields">
|
||||
<dl v-for="(field, i) in user.fields" :key="i" class="field">
|
||||
<dt class="name">
|
||||
<Mfm :text="field.name" :plain="true" :colored="false"/>
|
||||
</dt>
|
||||
<dd class="value">
|
||||
<Mfm :text="field.value" :author="user" :colored="false"/>
|
||||
<i
|
||||
v-if="user.verifiedLinks.includes(field.value)" v-tooltip:dialog="i18n.ts.verifiedLink"
|
||||
class="ti ti-circle-check" :class="$style.verifiedLink"
|
||||
></i>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="status">
|
||||
<MkA :to="userPage(user)">
|
||||
<b>{{ number(user.notesCount) }}</b>
|
||||
<span>{{ i18n.ts.notes }}</span>
|
||||
</MkA>
|
||||
<MkA v-if="isFollowingVisibleForMe(user)" :to="userPage(user, 'following')">
|
||||
<b>{{ number(user.followingCount) }}</b>
|
||||
<span>{{ i18n.ts.following }}</span>
|
||||
</MkA>
|
||||
<MkA v-if="isFollowersVisibleForMe(user)" :to="userPage(user, 'followers')">
|
||||
<b>{{ number(user.followersCount) }}</b>
|
||||
<span>{{ i18n.ts.followers }}</span>
|
||||
</MkA>
|
||||
<MkA>
|
||||
<b> {{ number(user.getPoints) }}</b>
|
||||
<span>{{ i18n.ts.points }}</span>
|
||||
</MkA>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contents _gaps">
|
||||
<div v-if="user.pinnedNotes.length > 0" class="_gaps">
|
||||
<MkNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
|
||||
</div>
|
||||
<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
|
||||
<template v-if="narrow">
|
||||
<MkLazy>
|
||||
<div class="contents _gaps">
|
||||
<div v-if="user.pinnedNotes.length > 0" class="_gaps">
|
||||
<MkNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
|
||||
</div>
|
||||
<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
|
||||
<template v-if="narrow">
|
||||
<MkLazy>
|
||||
<XFiles :key="user.id" :user="user"/>
|
||||
</MkLazy>
|
||||
</MkLazy>
|
||||
<MkLazy>
|
||||
<XActivity :key="user.id" :user="user"/>
|
||||
</MkLazy>
|
||||
</MkLazy>
|
||||
</template>
|
||||
<div>
|
||||
<div style="margin-bottom: 8px;">{{ i18n.ts._sfx.note }}</div>
|
||||
<MkNotes :class="$style.tl" :noGap="true" :pagination="Notes"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
|
||||
<XFiles :key="user.id" :user="user"/>
|
||||
<XActivity :key="user.id" :user="user"/>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
<div>
|
||||
<div style="margin-bottom: 8px;">{{ i18n.ts._sfx.note }}</div>
|
||||
<MkNotes :class="$style.tl" :noGap="true" :pagination="Notes"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
|
||||
<XFiles :key="user.id" :user="user"/>
|
||||
<XActivity :key="user.id" :user="user"/>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
|
||||
import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MkNote from '@/components/MkNote.vue';
|
||||
import MkFollowButton from '@/components/MkFollowButton.vue';
|
||||
|
|
@ -173,36 +189,36 @@ import MkTextarea from '@/components/MkTextarea.vue';
|
|||
import MkOmit from '@/components/MkOmit.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import {getScrollPosition} from '@/scripts/scroll.js';
|
||||
import {getUserMenu} from '@/scripts/get-user-menu.js';
|
||||
import { getScrollPosition } from '@/scripts/scroll.js';
|
||||
import { getUserMenu } from '@/scripts/get-user-menu.js';
|
||||
import number from '@/filters/number.js';
|
||||
import {userPage} from '@/filters/user.js';
|
||||
import { userPage } from '@/filters/user.js';
|
||||
import * as os from '@/os.js';
|
||||
import { useRouter } from '@/router/supplier.js';
|
||||
import {i18n} from '@/i18n.js';
|
||||
import {$i, iAmModerator} from '@/account.js';
|
||||
import {dateString} from '@/filters/date.js';
|
||||
import {confetti} from '@/scripts/confetti.js';
|
||||
import {misskeyApi} from '@/scripts/misskey-api.js';
|
||||
import {isFollowingVisibleForMe, isFollowersVisibleForMe} from '@/scripts/isFfVisibleForMe.js';
|
||||
import MkNotifyButton from "@/components/MkNotifyButton.vue";
|
||||
import MkRemoteInfoUpdate from "@/components/MkRemoteInfoUpdate.vue";
|
||||
import MkNotes from "@/components/MkNotes.vue";
|
||||
import MkLazy from "@/components/global/MkLazy.vue";
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { $i, iAmModerator } from '@/account.js';
|
||||
import { dateString } from '@/filters/date.js';
|
||||
import { confetti } from '@/scripts/confetti.js';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
|
||||
import MkNotifyButton from '@/components/MkNotifyButton.vue';
|
||||
import MkRemoteInfoUpdate from '@/components/MkRemoteInfoUpdate.vue';
|
||||
import MkNotes from '@/components/MkNotes.vue';
|
||||
import MkLazy from '@/components/global/MkLazy.vue';
|
||||
|
||||
function calcAge(birthdate: string): number {
|
||||
const date = new Date(birthdate);
|
||||
const now = new Date();
|
||||
const date = new Date(birthdate);
|
||||
const now = new Date();
|
||||
|
||||
let yearDiff = now.getFullYear() - date.getFullYear();
|
||||
const monthDiff = now.getMonth() - date.getMonth();
|
||||
const pastDate = now.getDate() < date.getDate();
|
||||
let yearDiff = now.getFullYear() - date.getFullYear();
|
||||
const monthDiff = now.getMonth() - date.getMonth();
|
||||
const pastDate = now.getDate() < date.getDate();
|
||||
|
||||
if (monthDiff < 0 || (monthDiff === 0 && pastDate)) {
|
||||
yearDiff--;
|
||||
}
|
||||
if (monthDiff < 0 || (monthDiff === 0 && pastDate)) {
|
||||
yearDiff--;
|
||||
}
|
||||
|
||||
return yearDiff;
|
||||
return yearDiff;
|
||||
}
|
||||
|
||||
const XFiles = defineAsyncComponent(() => import('./index.files.vue'));
|
||||
|
|
@ -214,7 +230,7 @@ const props = withDefaults(defineProps<{
|
|||
/** Test only; MkNotes currently causes problems in vitest */
|
||||
disableNotes: boolean;
|
||||
}>(), {
|
||||
disableNotes: false,
|
||||
disableNotes: false,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
|
@ -231,107 +247,107 @@ const moderationNote = ref(props.user.moderationNote);
|
|||
const editModerationNote = ref(false);
|
||||
|
||||
watch(moderationNote, async () => {
|
||||
await misskeyApi('admin/update-user-note', {userId: props.user.id, text: moderationNote.value });
|
||||
await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
|
||||
});
|
||||
|
||||
const pagination = {
|
||||
endpoint: 'users/featured-notes' as const,
|
||||
limit: 10,
|
||||
params: computed(() => ({
|
||||
userId: props.user.id,
|
||||
})),
|
||||
endpoint: 'users/featured-notes' as const,
|
||||
limit: 10,
|
||||
params: computed(() => ({
|
||||
userId: props.user.id,
|
||||
})),
|
||||
};
|
||||
const Notes = {
|
||||
endpoint: 'users/notes' as const,
|
||||
limit: 10,
|
||||
params: computed(() => ({
|
||||
userId: props.user.id,
|
||||
})),
|
||||
};
|
||||
const Notes ={
|
||||
endpoint: 'users/notes' as const,
|
||||
limit: 10,
|
||||
params: computed(() => ({
|
||||
userId: props.user.id,
|
||||
})),
|
||||
}
|
||||
|
||||
const style = computed(() => {
|
||||
if (props.user.bannerUrl == null) return {};
|
||||
return {
|
||||
backgroundImage: `url(${props.user.bannerUrl})`,
|
||||
};
|
||||
if (props.user.bannerUrl == null) return {};
|
||||
return {
|
||||
backgroundImage: `url(${props.user.bannerUrl})`,
|
||||
};
|
||||
});
|
||||
|
||||
const age = computed(() => {
|
||||
return calcAge(props.user.birthday);
|
||||
return calcAge(props.user.birthday);
|
||||
});
|
||||
|
||||
function menu(ev: MouseEvent) {
|
||||
const {menu, cleanup} = getUserMenu(user.value, router);
|
||||
os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup);
|
||||
const { menu, cleanup } = getUserMenu(user.value, router);
|
||||
os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup);
|
||||
}
|
||||
|
||||
function parallaxLoop() {
|
||||
parallaxAnimationId.value = window.requestAnimationFrame(parallaxLoop);
|
||||
parallax();
|
||||
parallaxAnimationId.value = window.requestAnimationFrame(parallaxLoop);
|
||||
parallax();
|
||||
}
|
||||
|
||||
function parallax() {
|
||||
const banner = bannerEl.value as any;
|
||||
if (banner == null) return;
|
||||
const banner = bannerEl.value as any;
|
||||
if (banner == null) return;
|
||||
|
||||
const top = getScrollPosition(rootEl.value);
|
||||
const top = getScrollPosition(rootEl.value);
|
||||
|
||||
if (top < 0) return;
|
||||
if (top < 0) return;
|
||||
|
||||
const z = 1.75; // 奥行き(小さいほど奥)
|
||||
const pos = -(top / z);
|
||||
banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
|
||||
const z = 1.75; // 奥行き(小さいほど奥)
|
||||
const pos = -(top / z);
|
||||
banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
|
||||
}
|
||||
|
||||
function showMemoTextarea() {
|
||||
isEditingMemo.value = true;
|
||||
nextTick(() => {
|
||||
memoTextareaEl.value?.focus();
|
||||
});
|
||||
isEditingMemo.value = true;
|
||||
nextTick(() => {
|
||||
memoTextareaEl.value?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function adjustMemoTextarea() {
|
||||
if (!memoTextareaEl.value) return;
|
||||
memoTextareaEl.value.style.height = '0px';
|
||||
memoTextareaEl.value.style.height = `${memoTextareaEl.value.scrollHeight}px`;
|
||||
if (!memoTextareaEl.value) return;
|
||||
memoTextareaEl.value.style.height = '0px';
|
||||
memoTextareaEl.value.style.height = `${memoTextareaEl.value.scrollHeight}px`;
|
||||
}
|
||||
|
||||
async function updateMemo() {
|
||||
await misskeyApi('users/update-memo', {
|
||||
memo: memoDraft.value,
|
||||
userId: props.user.id,
|
||||
});
|
||||
isEditingMemo.value = false;
|
||||
await misskeyApi('users/update-memo', {
|
||||
memo: memoDraft.value,
|
||||
userId: props.user.id,
|
||||
});
|
||||
isEditingMemo.value = false;
|
||||
}
|
||||
|
||||
watch([props.user], () => {
|
||||
memoDraft.value = props.user.memo;
|
||||
memoDraft.value = props.user.memo;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.requestAnimationFrame(parallaxLoop);
|
||||
narrow.value = rootEl.value!.clientWidth < 1000;
|
||||
window.requestAnimationFrame(parallaxLoop);
|
||||
narrow.value = rootEl.value!.clientWidth < 1000;
|
||||
|
||||
if (props.user.birthday) {
|
||||
const m = new Date().getMonth() + 1;
|
||||
const d = new Date().getDate();
|
||||
const bm = parseInt(props.user.birthday.split('-')[1]);
|
||||
const bd = parseInt(props.user.birthday.split('-')[2]);
|
||||
if (m === bm && d === bd) {
|
||||
confetti({
|
||||
duration: 1000 * 4,
|
||||
});
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
adjustMemoTextarea();
|
||||
});
|
||||
if (props.user.birthday) {
|
||||
const m = new Date().getMonth() + 1;
|
||||
const d = new Date().getDate();
|
||||
const bm = parseInt(props.user.birthday.split('-')[1]);
|
||||
const bd = parseInt(props.user.birthday.split('-')[2]);
|
||||
if (m === bm && d === bd) {
|
||||
confetti({
|
||||
duration: 1000 * 4,
|
||||
});
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
adjustMemoTextarea();
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (parallaxAnimationId.value) {
|
||||
window.cancelAnimationFrame(parallaxAnimationId.value);
|
||||
}
|
||||
if (parallaxAnimationId.value) {
|
||||
window.cancelAnimationFrame(parallaxAnimationId.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue