oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

enhance(profile): 相互リンク機能の改修 (MisskeyIO#684)

Browse source
This commit is contained in:
まっちゃてぃー。 2024-08-11 08:32:14 +09:00 • committed by GitHub
parent b6a5a36eaa
commit 5a9d8a5564
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
41 changed files with 471 additions and 900 deletions
Download patch file Download diff file Expand all files Collapse all files

85
packages/frontend/src/pages/user/home.vue
View file

@ -80,6 +80,18 @@ SPDX-License-Identifier: AGPL-3.0-only
<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
</MkOmit>
</div>
<MkContainer v-if="user?.mutualLinkSections?.length > 0" :showHeader="false" :max-height="200" class="fields" :style="{borderRadius: 0}">
<div v-for="(section, index) in user?.mutualLinkSections" :key="index" :class="$style.mutualLinkSections">
<span v-if="section.name">{{ section.name }}</span>
<div :class="$style.mutualLinks">
<div v-for="(mutualLink, i) in section.mutualLinks" :key="i">
<MkLink :hideIcon="true" :url="mutualLink.url">
<img :class="$style.mutualLinkImg" :src="mutualLink.imgSrc" :alt="mutualLink.description"/>
</MkLink>
</div>
</div>
</div>
</MkContainer>
<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>
@ -143,28 +155,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</dd>
</dl>
</div>
<div v-if="user?.myMutualBanner" class="fields">
{{ i18n.ts.mutualBannerThisUser }}
<div :class="$style.myMutualBanner">
<MkLink :hideIcon="true" :url="user.myMutualBanner.url">
<img :class="$style.mutualBannerImg" :src="user.myMutualBanner.imgUrl" :alt="user.myMutualBanner.description"/>
</MkLink>
<span>{{ (user.myMutualBanner?.description === '' || user.myMutualBanner?.description === null) ? i18n.ts.noDescription : user.myMutualBanner?.description }}</span>
<MkButton v-if="$i && $i?.id !== user.id && !$i?.mutualBanners?.some(banner => banner.id === user.myMutualBanner?.id) " @click="mutualBannerFollow(user.myMutualBanner?.id)">{{ i18n.ts.follow }}</MkButton>
<MkButton v-else-if="$i && $i?.id !== user.id" @click="mutualBannerUnFollow(user.myMutualBanner?.id)">{{ i18n.ts.unfollow }}</MkButton>
</div>
</div>
<div v-if="user?.mutualBanners && user?.mutualBanners.length > 0" class="fields">
{{ i18n.ts.mutualBanner }}
<div :class="$style.mutualBanner">
<div v-for="(mutualBanner, i) in mutualBanners?.slice(0, 9)" :key="i">
<MkLink :hideIcon="true" :url="mutualBanner.url">
<img :class="$style.mutualBannerImg" :src="mutualBanner.imgUrl" :alt="mutualBanner.description"/>
</MkLink>
</div>
</div>
</div>
<div class="status">
<MkA :to="userPage(user)">
<b>{{ number(user.notesCount) }}</b>
@ -235,6 +226,7 @@ import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
import { useRouter } from '@/router/supplier.js';
import MkLink from '@/components/MkLink.vue';
import MkContainer from '@/components/MkContainer.vue';
function calcAge(birthdate: string): number {
const date = new Date(birthdate);
@ -276,7 +268,6 @@ const memoDraft = ref(props.user.memo);
const isEditingMemo = ref(false);
const moderationNote = ref(props.user.moderationNote);
const editModerationNote = ref(false);
const mutualBanners = ref(props.user.mutualBanners);
watch(moderationNote, async () => {
await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
@ -323,23 +314,6 @@ function showMemoTextarea() {
});
}
function mutualBannerFollow(id: string) {
os.apiWithDialog('i/update', {
mutualBannerPining: [
...($i?.mutualBanners?.map(banner => banner.id) ?? []),
id,
],
});
}
function mutualBannerUnFollow(id:string) {
os.apiWithDialog('i/update', {
mutualBannerPining: [
...($i?.mutualBanners?.map(banner => banner.id) ?? []).filter(bannerId => bannerId !== id),
],
});
}
function adjustMemoTextarea() {
if (!memoTextareaEl.value) return;
memoTextareaEl.value.style.height = '0px';
@ -829,27 +803,36 @@ onUnmounted(() => {
background-color: rgb(54, 54, 54);
}
.myMutualBanner {
.mutualLinkSections {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
flex-flow: column wrap;
padding: 16px;
flex-direction: column;
background: var(--panel);
gap: 8px;
margin-bottom: 8px;
}
.mutualBanner {
.mutualLinks {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 16px;
gap: 12px;
padding-top: 8px;
@media (max-width: 500px) {
gap: 8px;
}
}
.mutualBannerImg {
max-width: 300px;
min-width: 200px;
max-height: 60px;
min-height: 40px;
object-fit: contain;
.mutualLink {
display: flex;
flex-direction: column;
align-items: center;
}
.mutualLinkImg {
max-width: 150px;
max-height: 30px;
}
</style>