laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo 2021-10-09 04:22:17 +09:00
parent bb3e2c123a
commit d892819a9e
26 changed files with 493 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/client/components/global/header.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }"> <div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }" @click="onClick">
<template v-if="info"> <template v-if="info">
<div class="titleContainer" @click="showTabsPopup"> <div class="titleContainer" @click="showTabsPopup">
<i v-if="info.icon" class="icon" :class="info.icon"></i> <i v-if="info.icon" class="icon" :class="info.icon"></i>
@ -35,9 +35,10 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import * as tinycolor from 'tinycolor2';
import { popupMenu } from '@client/os'; import { popupMenu } from '@client/os';
import { url } from '@client/config'; import { url } from '@client/config';
import * as tinycolor from 'tinycolor2'; import { scrollToTop } from '@client/scripts/scroll';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -77,7 +78,7 @@ export default defineComponent({
}, },
mounted() { mounted() {
const rawBg = this.info.bg || 'var(--bg)'; const rawBg = this.info?.bg || 'var(--bg)';
const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg); const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
bg.setAlpha(0.85); bg.setAlpha(0.85);
this.bg = bg.toRgbString(); this.bg = bg.toRgbString();
@ -136,6 +137,10 @@ export default defineComponent({
preventDrag(ev) { preventDrag(ev) {
ev.stopPropagation(); ev.stopPropagation();
},
onClick(ev) {
scrollToTop(this.$el, { behavior: 'smooth' });
} }
} }
}); });
@ -146,7 +151,7 @@ export default defineComponent({
--height: 60px; --height: 60px;
display: flex; display: flex;
position: sticky; position: sticky;
top: 0; top: var(--stickyTop, 0);
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--blur, blur(15px));

1
src/client/components/modal-page-window.vue
View File

@ -11,7 +11,6 @@
<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button> <button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
</div> </div>
<div class="body _flat_"> <div class="body _flat_">
<MkHeader v-if="!pageInfo?.hide" :info="pageInfo"/>
<keep-alive> <keep-alive>
<component :is="component" v-bind="props" :ref="changePage"/> <component :is="component" v-bind="props" :ref="changePage"/>
</keep-alive> </keep-alive>

4
src/client/components/page-window.vue
View File

@ -9,14 +9,14 @@
> >
<template #header> <template #header>
<template v-if="pageInfo"> <template v-if="pageInfo">
{{ pageInfo.title }} <i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon" style="margin-right: 0.5em;"></i>
<span>{{ pageInfo.title }}</span>
</template> </template>
</template> </template>
<template #headerLeft> <template #headerLeft>
<button v-if="history.length > 0" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button> <button v-if="history.length > 0" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
</template> </template>
<div class="yrolvcoq _flat_"> <div class="yrolvcoq _flat_">
<MkHeader :info="pageInfo"/>
<component :is="component" v-bind="props" :ref="changePage"/> <component :is="component" v-bind="props" :ref="changePage"/>
</div> </div>
</XWindow> </XWindow>

34
src/client/pages/announcements.vue
View File

@ -1,17 +1,20 @@
<template> <template>
<div class="_section"> <div>
<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content"> <MkHeader :info="header"/>
<section class="_card announcement _gap" v-for="(announcement, i) in items" :key="announcement.id"> <div class="_section">
<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div> <MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
<div class="_content"> <section class="_card announcement _gap" v-for="(announcement, i) in items" :key="announcement.id">
<Mfm :text="announcement.text"/> <div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/> <div class="_content">
</div> <Mfm :text="announcement.text"/>
<div class="_footer" v-if="$i && !announcement.isRead"> <img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
<MkButton @click="read(items, announcement, i)" primary><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton> </div>
</div> <div class="_footer" v-if="$i && !announcement.isRead">
</section> <MkButton @click="read(items, announcement, i)" primary><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
</MkPagination> </div>
</section>
</MkPagination>
</div>
</div> </div>
</template> </template>
@ -35,6 +38,11 @@ export default defineComponent({
icon: 'fas fa-broadcast-tower', icon: 'fas fa-broadcast-tower',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
header: {
title: this.$ts.announcements,
icon: 'fas fa-broadcast-tower',
bg: 'var(--bg)',
},
pagination: { pagination: {
endpoint: 'announcements', endpoint: 'announcements',
limit: 10, limit: 10,

2
src/client/pages/antenna-timeline.vue
View File

@ -89,7 +89,7 @@ export default defineComponent({
}, },
top() { top() {
scroll(this.$el, 0); scroll(this.$el, { top: 0 });
}, },
async timetravel() { async timetravel() {

12
src/client/pages/emojis.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div :class="$style.root"> <div>
<XCategory v-if="tab === 'category'"/> <MkHeader :info="header"/>
<div :class="$style.root">
<XCategory v-if="tab === 'category'"/>
</div>
</div> </div>
</template> </template>
@ -22,6 +25,11 @@ export default defineComponent({
icon: 'fas fa-laugh', icon: 'fas fa-laugh',
bg: 'var(--bg)', bg: 'var(--bg)',
})), })),
header: computed(() => ({
title: this.$ts.customEmojis,
icon: 'fas fa-laugh',
bg: 'var(--bg)',
})),
tab: 'category', tab: 'category',
} }
}, },

14
src/client/pages/favorites.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<div class="jmelgwjh"> <div>
<div class="body"> <MkHeader :info="header"/>
<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/> <div class="jmelgwjh">
<div class="body">
<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -25,6 +28,11 @@ export default defineComponent({
icon: 'fas fa-star', icon: 'fas fa-star',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
header: {
title: this.$ts.favorites,
icon: 'fas fa-star',
bg: 'var(--bg)',
},
pagination: { pagination: {
endpoint: 'i/favorites', endpoint: 'i/favorites',
limit: 10, limit: 10,

17
src/client/pages/featured.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div class="_section"> <div>
<XNotes class="_content" ref="notes" :pagination="pagination" @before="before" @after="after"/> <MkHeader :info="header"/>
<div class="_section">
<XNotes class="_content" ref="notes" :pagination="pagination" @before="before" @after="after"/>
</div>
</div> </div>
</template> </template>
@ -19,12 +22,18 @@ export default defineComponent({
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.featured, title: this.$ts.featured,
icon: 'fas fa-fire-alt' icon: 'fas fa-fire-alt',
bg: 'var(--bg)',
},
header: {
title: this.$ts.featured,
icon: 'fas fa-fire-alt',
bg: 'var(--bg)',
}, },
pagination: { pagination: {
endpoint: 'notes/featured', endpoint: 'notes/featured',
limit: 10, limit: 10,
offsetMode: true offsetMode: true,
}, },
}; };
}, },

182
src/client/pages/federation.vue
View File

@ -1,95 +1,98 @@
<template> <template>
<div class="taeiyria"> <div>
<div class="query"> <MkHeader :info="header"/>
<MkInput v-model="host" :debounce="true" class=""> <div class="taeiyria">
<template #prefix><i class="fas fa-search"></i></template> <div class="query">
<template #label>{{ $ts.host }}</template> <MkInput v-model="host" :debounce="true" class="">
</MkInput> <template #prefix><i class="fas fa-search"></i></template>
<div class="_inputSplit"> <template #label>{{ $ts.host }}</template>
<MkSelect v-model="state"> </MkInput>
<template #label>{{ $ts.state }}</template> <div class="_inputSplit">
<option value="all">{{ $ts.all }}</option> <MkSelect v-model="state">
<option value="federating">{{ $ts.federating }}</option> <template #label>{{ $ts.state }}</template>
<option value="subscribing">{{ $ts.subscribing }}</option> <option value="all">{{ $ts.all }}</option>
<option value="publishing">{{ $ts.publishing }}</option> <option value="federating">{{ $ts.federating }}</option>
<option value="suspended">{{ $ts.suspended }}</option> <option value="subscribing">{{ $ts.subscribing }}</option>
<option value="blocked">{{ $ts.blocked }}</option> <option value="publishing">{{ $ts.publishing }}</option>
<option value="notResponding">{{ $ts.notResponding }}</option> <option value="suspended">{{ $ts.suspended }}</option>
</MkSelect> <option value="blocked">{{ $ts.blocked }}</option>
<MkSelect v-model="sort"> <option value="notResponding">{{ $ts.notResponding }}</option>
<template #label>{{ $ts.sort }}</template> </MkSelect>
<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option> <MkSelect v-model="sort">
<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option> <template #label>{{ $ts.sort }}</template>
<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option> <option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option> <option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option> <option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option> <option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option> <option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option> <option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option> <option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option> <option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option> <option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option> <option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option> <option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option> <option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
<option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option> <option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
<option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option> <option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
<option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option> <option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option>
<option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option> <option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option>
</MkSelect> <option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option>
<option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option>
</MkSelect>
</div>
</div> </div>
</div>
<MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state"> <MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
<div class="dqokceoi"> <div class="dqokceoi">
<MkA class="instance" v-for="instance in items" :key="instance.id" :to="`/instance-info/${instance.host}`"> <MkA class="instance" v-for="instance in items" :key="instance.id" :to="`/instance-info/${instance.host}`">
<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div> <div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
<div class="table"> <div class="table">
<div class="cell"> <div class="cell">
<div class="key">{{ $ts.registeredAt }}</div> <div class="key">{{ $ts.registeredAt }}</div>
<div class="value"><MkTime :time="instance.caughtAt"/></div> <div class="value"><MkTime :time="instance.caughtAt"/></div>
</div>
<div class="cell">
<div class="key">{{ $ts.software }}</div>
<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
</div>
<div class="cell">
<div class="key">{{ $ts.version }}</div>
<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
</div>
<div class="cell">
<div class="key">{{ $ts.users }}</div>
<div class="value">{{ instance.usersCount }}</div>
</div>
<div class="cell">
<div class="key">{{ $ts.notes }}</div>
<div class="value">{{ instance.notesCount }}</div>
</div>
<div class="cell">
<div class="key">{{ $ts.sent }}</div>
<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
</div>
<div class="cell">
<div class="key">{{ $ts.received }}</div>
<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
</div>
</div> </div>
<div class="cell"> <div class="footer">
<div class="key">{{ $ts.software }}</div> <span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div> <span class="pubSub">
<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
</span>
<span class="right">
<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
</span>
</div> </div>
<div class="cell"> </MkA>
<div class="key">{{ $ts.version }}</div> </div>
<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div> </MkPagination>
</div> </div>
<div class="cell">
<div class="key">{{ $ts.users }}</div>
<div class="value">{{ instance.usersCount }}</div>
</div>
<div class="cell">
<div class="key">{{ $ts.notes }}</div>
<div class="value">{{ instance.notesCount }}</div>
</div>
<div class="cell">
<div class="key">{{ $ts.sent }}</div>
<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
</div>
<div class="cell">
<div class="key">{{ $ts.received }}</div>
<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
</div>
</div>
<div class="footer">
<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
<span class="pubSub">
<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
</span>
<span class="right">
<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
</span>
</div>
</MkA>
</div>
</MkPagination>
</div> </div>
</template> </template>
@ -119,6 +122,11 @@ export default defineComponent({
icon: 'fas fa-globe', icon: 'fas fa-globe',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
header: {
title: this.$ts.federation,
icon: 'fas fa-globe',
bg: 'var(--bg)',
},
host: '', host: '',
state: 'federating', state: 'federating',
sort: '+pubSub', sort: '+pubSub',

2
src/client/pages/instance/index.vue
View File

@ -127,7 +127,7 @@ export default defineComponent({
pageProps.value = {}; pageProps.value = {};
nextTick(() => { nextTick(() => {
scroll(el.value, 0); scroll(el.value, { top: 0 });
}); });
}, { immediate: true }); }, { immediate: true });

15
src/client/pages/mentions.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div class="_section"> <div>
<XNotes class="_content" :pagination="pagination" @before="before()" @after="after()"/> <MkHeader :info="header"/>
<div class="_section">
<XNotes class="_content" :pagination="pagination" @before="before()" @after="after()"/>
</div>
</div> </div>
</template> </template>
@ -19,7 +22,13 @@ export default defineComponent({
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.mentions, title: this.$ts.mentions,
icon: 'fas fa-at' icon: 'fas fa-at',
bg: 'var(--bg)',
},
header: {
title: this.$ts.mentions,
icon: 'fas fa-at',
bg: 'var(--bg)',
}, },
pagination: { pagination: {
endpoint: 'notes/mentions', endpoint: 'notes/mentions',

13
src/client/pages/messages.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div> <div>
<XNotes :pagination="pagination" @before="before()" @after="after()"/> <MkHeader :info="header"/>
<div>
<XNotes :pagination="pagination" @before="before()" @after="after()"/>
</div>
</div> </div>
</template> </template>
@ -19,7 +22,13 @@ export default defineComponent({
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.directNotes, title: this.$ts.directNotes,
icon: 'fas fa-envelope' icon: 'fas fa-envelope',
bg: 'var(--bg)',
},
header: {
title: this.$ts.directNotes,
icon: 'fas fa-envelope',
bg: 'var(--bg)',
}, },
pagination: { pagination: {
endpoint: 'notes/mentions', endpoint: 'notes/mentions',

71
src/client/pages/messaging/index.vue
View File

@ -1,38 +1,42 @@
<template> <template>
<div class="yweeujhr _root" v-size="{ max: [400] }"> <div>
<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton> <MkHeader :info="header"/>
<div class="history" v-if="messages.length > 0"> <div class="yweeujhr _root" v-size="{ max: [400] }">
<MkA v-for="(message, i) in messages" <MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
class="message _block"
:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }" <div class="history" v-if="messages.length > 0">
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`" <MkA v-for="(message, i) in messages"
:data-index="i" class="message _block"
:key="message.id" :class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
v-anim="i" :to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
> :data-index="i"
<div> :key="message.id"
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/> v-anim="i"
<header v-if="message.groupId"> >
<span class="name">{{ message.group.name }}</span> <div>
<MkTime :time="message.createdAt" class="time"/> <MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
</header> <header v-if="message.groupId">
<header v-else> <span class="name">{{ message.group.name }}</span>
<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span> <MkTime :time="message.createdAt" class="time"/>
<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span> </header>
<MkTime :time="message.createdAt" class="time"/> <header v-else>
</header> <span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
<div class="body"> <span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p> <MkTime :time="message.createdAt" class="time"/>
</header>
<div class="body">
<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
</div>
</div> </div>
</div> </MkA>
</MkA> </div>
<div class="_fullinfo" v-if="!fetching && messages.length == 0">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noHistory }}</div>
</div>
<MkLoading v-if="fetching"/>
</div> </div>
<div class="_fullinfo" v-if="!fetching && messages.length == 0">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noHistory }}</div>
</div>
<MkLoading v-if="fetching"/>
</div> </div>
</template> </template>
@ -56,6 +60,11 @@ export default defineComponent({
icon: 'fas fa-comments', icon: 'fas fa-comments',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
header: {
title: this.$ts.messaging,
icon: 'fas fa-comments',
bg: 'var(--bg)',
},
fetching: true, fetching: true,
moreFetching: false, moreFetching: false,
messages: [], messages: [],

2
src/client/pages/messaging/messaging-room.vue
View File

@ -284,7 +284,7 @@ const Component = defineComponent({
}, },
scrollToBottom() { scrollToBottom() {
scroll(this.$el, this.$el.offsetHeight); scroll(this.$el, { top: this.$el.offsetHeight });
}, },
onIndicatorClick() { onIndicatorClick() {

25
src/client/pages/my-lists/index.vue
View File

@ -1,13 +1,16 @@
<template> <template>
<div class="qkcjvfiv"> <div>
<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton> <MkHeader :info="header"/>
<div class="qkcjvfiv">
<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list"> <MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`"> <MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
<div class="name">{{ list.name }}</div> <div class="name">{{ list.name }}</div>
<MkAvatars :user-ids="list.userIds"/> <MkAvatars :user-ids="list.userIds"/>
</MkA> </MkA>
</MkPagination> </MkPagination>
</div>
</div> </div>
</template> </template>
@ -31,6 +34,12 @@ export default defineComponent({
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.manageLists, title: this.$ts.manageLists,
icon: 'fas fa-list-ul', icon: 'fas fa-list-ul',
bg: 'var(--bg)',
},
header: {
title: this.$ts.manageLists,
icon: 'fas fa-list-ul',
bg: 'var(--bg)',
action: { action: {
icon: 'fas fa-plus', icon: 'fas fa-plus',
handler: this.create handler: this.create

55
src/client/pages/my-lists/list.vue
View File

@ -1,34 +1,37 @@
<template> <template>
<div class="mk-list-page"> <div>
<transition name="zoom" mode="out-in"> <MkHeader v-if="header" :info="header"/>
<div v-if="list" class="_section"> <div class="mk-list-page">
<div class="_content"> <transition name="zoom" mode="out-in">
<MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton> <div v-if="list" class="_section">
<MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton> <div class="_content">
<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton> <MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
<MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
</div>
</div> </div>
</div> </transition>
</transition>
<transition name="zoom" mode="out-in"> <transition name="zoom" mode="out-in">
<div v-if="list" class="_section members _gap"> <div v-if="list" class="_section members _gap">
<div class="_title">{{ $ts.members }}</div> <div class="_title">{{ $ts.members }}</div>
<div class="_content"> <div class="_content">
<div class="users"> <div class="users">
<div class="user _panel" v-for="user in users" :key="user.id"> <div class="user _panel" v-for="user in users" :key="user.id">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/> <MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body"> <div class="body">
<MkUserName :user="user" class="name"/> <MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/> <MkAcct :user="user" class="acct"/>
</div> </div>
<div class="action"> <div class="action">
<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button> <button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </transition>
</transition> </div>
</div> </div>
</template> </template>
@ -50,6 +53,10 @@ export default defineComponent({
title: this.list.name, title: this.list.name,
icon: 'fas fa-list-ul', icon: 'fas fa-list-ul',
} : null), } : null),
header: computed(() => this.list ? {
title: this.list.name,
icon: 'fas fa-list-ul',
} : null),
list: null, list: null,
users: [], users: [],
}; };

13
src/client/pages/pages.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<div> <div>
<MkHeader :info="header"/>
<!-- TODO: MkHeaderに統合 -->
<MkTab v-model="tab" v-if="$i"> <MkTab v-model="tab" v-if="$i">
<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option> <option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option> <option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
@ -46,11 +49,17 @@ export default defineComponent({
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.pages, title: this.$ts.pages,
icon: 'fas fa-sticky-note', icon: 'fas fa-sticky-note',
bg: 'var(--bg)',
},
header: {
title: this.$ts.pages,
icon: 'fas fa-sticky-note',
bg: 'var(--bg)',
actions: [{ actions: [{
icon: 'fas fa-plus', icon: 'fas fa-plus',
text: this.$ts.create, text: this.$ts.create,
handler: this.create handler: this.create,
}] }],
}, },
tab: 'featured', tab: 'featured',
featuredPagesPagination: { featuredPagesPagination: {

15
src/client/pages/search.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<div class="_section"> <div>
<div class="_content"> <MkHeader :info="header"/>
<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/> <div class="_section">
<div class="_content">
<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -21,7 +24,11 @@ export default defineComponent({
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: computed(() => this.$t('searchWith', { q: this.$route.query.q })), title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
icon: 'fas fa-search' icon: 'fas fa-search',
},
header: {
title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
icon: 'fas fa-search',
}, },
pagination: { pagination: {
endpoint: 'notes/search', endpoint: 'notes/search',

2
src/client/pages/settings/index.vue
View File

@ -143,7 +143,7 @@ export default defineComponent({
} }
nextTick(() => { nextTick(() => {
scroll(el.value, 0); scroll(el.value, { top: 0 });
}); });
}, { immediate: true }); }, { immediate: true });

2
src/client/pages/timeline.vue
View File

@ -137,7 +137,7 @@ export default defineComponent({
}, },
top() { top() {
scroll(this.$el, 0); scroll(this.$el, { top: 0 });
}, },
async chooseList(ev) { async chooseList(ev) {

2
src/client/pages/user-list-timeline.vue
View File

@ -89,7 +89,7 @@ export default defineComponent({
}, },
top() { top() {
scroll(this.$el, 0); scroll(this.$el, { top: 0 });
}, },
settings() { settings() {

340
src/client/pages/user/index.vue
View File

@ -1,98 +1,117 @@
<template> <template>
<transition name="fade" mode="out-in"> <div>
<div class="ftskorzw wide" v-if="user && narrow === false"> <MkHeader :info="header"/>
<MkRemoteCaution v-if="user.host != null" :href="user.url"/> <transition name="fade" mode="out-in">
<div class="ftskorzw wide" v-if="user && narrow === false">
<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
<div class="banner-container" :style="style"> <div class="banner-container" :style="style">
<div class="banner" ref="banner" :style="style"></div> <div class="banner" ref="banner" :style="style"></div>
</div>
<div class="contents">
<div class="side _forceContainerFull_">
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
<div class="name">
<MkUserName :user="user" :nowrap="false" class="name"/>
<MkAcct :user="user" :detail="true" class="acct"/>
</div>
<div class="followed" v-if="$i && $i.id != user.id && user.isFollowed"><span>{{ $ts.followsYou }}</span></div>
<div class="status">
<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
<b>{{ number(user.notesCount) }}</b>
<span>{{ $ts.notes }}</span>
</MkA>
<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
<b>{{ number(user.followingCount) }}</b>
<span>{{ $ts.following }}</span>
</MkA>
<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
<b>{{ number(user.followersCount) }}</b>
<span>{{ $ts.followers }}</span>
</MkA>
</div>
<div class="description">
<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
</div>
<div class="fields system">
<dl class="field" v-if="user.location">
<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
<dd class="value">{{ user.location }}</dd>
</dl>
<dl class="field" v-if="user.birthday">
<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
</dl>
<dl class="field">
<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
</dl>
</div>
<div class="fields" v-if="user.fields.length > 0">
<dl class="field" v-for="(field, i) in user.fields" :key="i">
<dt class="name">
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
</dt>
<dd class="value">
<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
</dd>
</dl>
</div>
<XActivity :user="user" :key="user.id" class="_gap"/>
<XPhotos :user="user" :key="user.id" class="_gap"/>
</div> </div>
<div class="main"> <div class="contents">
<div class="actions"> <div class="side _forceContainerFull_">
<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button> <MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
<MkFollowButton v-if="!$i || $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" large class="koudoku"/> <div class="name">
<MkUserName :user="user" :nowrap="false" class="name"/>
<MkAcct :user="user" :detail="true" class="acct"/>
</div>
<div class="followed" v-if="$i && $i.id != user.id && user.isFollowed"><span>{{ $ts.followsYou }}</span></div>
<div class="status">
<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
<b>{{ number(user.notesCount) }}</b>
<span>{{ $ts.notes }}</span>
</MkA>
<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
<b>{{ number(user.followingCount) }}</b>
<span>{{ $ts.following }}</span>
</MkA>
<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
<b>{{ number(user.followersCount) }}</b>
<span>{{ $ts.followers }}</span>
</MkA>
</div>
<div class="description">
<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
</div>
<div class="fields system">
<dl class="field" v-if="user.location">
<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
<dd class="value">{{ user.location }}</dd>
</dl>
<dl class="field" v-if="user.birthday">
<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
</dl>
<dl class="field">
<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
</dl>
</div>
<div class="fields" v-if="user.fields.length > 0">
<dl class="field" v-for="(field, i) in user.fields" :key="i">
<dt class="name">
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
</dt>
<dd class="value">
<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
</dd>
</dl>
</div>
<XActivity :user="user" :key="user.id" class="_gap"/>
<XPhotos :user="user" :key="user.id" class="_gap"/>
</div> </div>
<template v-if="page === 'index'"> <div class="main">
<div v-if="user.pinnedNotes.length > 0" class="_gap"> <div class="actions">
<XNote v-for="note in user.pinnedNotes" class="note _gap" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/> <button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
<MkFollowButton v-if="!$i || $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
</div> </div>
<div class="_gap"> <template v-if="page === 'index'">
<XUserTimeline :user="user"/> <div v-if="user.pinnedNotes.length > 0" class="_gap">
</div> <XNote v-for="note in user.pinnedNotes" class="note _gap" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
</template> </div>
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_gap"/> <div class="_gap">
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_gap"/> <XUserTimeline :user="user"/>
<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/> </div>
<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/> </template>
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_gap"/>
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_gap"/>
<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
</div>
</div> </div>
</div> </div>
</div> <div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }"> <!-- TODO -->
<!-- TODO --> <!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> --> <!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
<div class="profile"> <div class="profile">
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/> <MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
<div class="_block main" :key="user.id"> <div class="_block main" :key="user.id">
<div class="banner-container" :style="style"> <div class="banner-container" :style="style">
<div class="banner" ref="banner" :style="style"></div> <div class="banner" ref="banner" :style="style"></div>
<div class="fade"></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="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
</div>
</div>
<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span>
<div class="actions" v-if="$i">
<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
</div>
</div>
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
<div class="title"> <div class="title">
<MkUserName class="name" :user="user" :nowrap="true"/> <MkUserName :user="user" :nowrap="false" class="name"/>
<div class="bottom"> <div class="bottom">
<span class="username"><MkAcct :user="user" :detail="true" /></span> <span class="username"><MkAcct :user="user" :detail="true" /></span>
<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span> <span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
@ -101,92 +120,76 @@
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span> <span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
</div> </div>
</div> </div>
<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span> <div class="description">
<div class="actions" v-if="$i"> <Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button> <p v-else class="empty">{{ $ts.noAccountDescription }}</p>
<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
</div> </div>
</div> <div class="fields system">
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/> <dl class="field" v-if="user.location">
<div class="title"> <dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
<MkUserName :user="user" :nowrap="false" class="name"/> <dd class="value">{{ user.location }}</dd>
<div class="bottom"> </dl>
<span class="username"><MkAcct :user="user" :detail="true" /></span> <dl class="field" v-if="user.birthday">
<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span> <dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span> <dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span> </dl>
<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span> <dl class="field">
<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
</dl>
</div>
<div class="fields" v-if="user.fields.length > 0">
<dl class="field" v-for="(field, i) in user.fields" :key="i">
<dt class="name">
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
</dt>
<dd class="value">
<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
</dd>
</dl>
</div>
<div class="status">
<MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
<b>{{ number(user.notesCount) }}</b>
<span>{{ $ts.notes }}</span>
</MkA>
<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
<b>{{ number(user.followingCount) }}</b>
<span>{{ $ts.following }}</span>
</MkA>
<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
<b>{{ number(user.followersCount) }}</b>
<span>{{ $ts.followers }}</span>
</MkA>
</div> </div>
</div>
<div class="description">
<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
</div>
<div class="fields system">
<dl class="field" v-if="user.location">
<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
<dd class="value">{{ user.location }}</dd>
</dl>
<dl class="field" v-if="user.birthday">
<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
</dl>
<dl class="field">
<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
</dl>
</div>
<div class="fields" v-if="user.fields.length > 0">
<dl class="field" v-for="(field, i) in user.fields" :key="i">
<dt class="name">
<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
</dt>
<dd class="value">
<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
</dd>
</dl>
</div>
<div class="status">
<MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
<b>{{ number(user.notesCount) }}</b>
<span>{{ $ts.notes }}</span>
</MkA>
<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
<b>{{ number(user.followingCount) }}</b>
<span>{{ $ts.following }}</span>
</MkA>
<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
<b>{{ number(user.followersCount) }}</b>
<span>{{ $ts.followers }}</span>
</MkA>
</div> </div>
</div> </div>
</div>
<div class="contents"> <div class="contents">
<template v-if="page === 'index'"> <template v-if="page === 'index'">
<div> <div>
<div v-if="user.pinnedNotes.length > 0" class="_gap"> <div v-if="user.pinnedNotes.length > 0" class="_gap">
<XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/> <XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
</div>
<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
<XPhotos :user="user" :key="user.id"/>
<XActivity :user="user" :key="user.id"/>
</div> </div>
<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo> <div>
<XPhotos :user="user" :key="user.id"/> <XUserTimeline :user="user"/>
<XActivity :user="user" :key="user.id"/> </div>
</div> </template>
<div> <XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
<XUserTimeline :user="user"/> <XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
</div> <XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
</template> <XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/> <XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/> </div>
<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
</div> </div>
</div> <MkError v-else-if="error" @retry="fetch()"/>
<MkError v-else-if="error" @retry="fetch()"/> <MkLoading v-else/>
<MkLoading v-else/> </transition>
</transition> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -242,6 +245,15 @@ export default defineComponent({
data() { data() {
return { return {
[symbols.PAGE_INFO]: computed(() => this.user ? { [symbols.PAGE_INFO]: computed(() => this.user ? {
icon: 'fas fa-user',
title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
path: `/@${this.user.username}`,
share: {
title: this.user.name,
},
bg: 'var(--bg)',
} : null),
header: computed(() => this.user ? {
title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`, title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
subtitle: `@${getAcct(this.user)}`, subtitle: `@${getAcct(this.user)}`,
userName: this.user, userName: this.user,

20
src/client/scripts/scroll.ts
View File

@ -1,3 +1,5 @@
type ScrollBehavior = 'auto' | 'smooth' | 'instant';
export function getScrollContainer(el: Element | null): Element | null { export function getScrollContainer(el: Element | null): Element | null {
if (el == null || el.tagName === 'BODY') return null; if (el == null || el.tagName === 'BODY') return null;
const overflow = window.getComputedStyle(el).getPropertyValue('overflow'); const overflow = window.getComputedStyle(el).getPropertyValue('overflow');
@ -45,21 +47,25 @@ export function onScrollBottom(el: Element, cb) {
container.addEventListener('scroll', onScroll, { passive: true }); container.addEventListener('scroll', onScroll, { passive: true });
} }
export function scroll(el: Element, top: number) { export function scroll(el: Element, options: {
top?: number;
left?: number;
behavior?: ScrollBehavior;
}) {
const container = getScrollContainer(el); const container = getScrollContainer(el);
if (container == null) { if (container == null) {
window.scroll({ top: top, behavior: 'instant' }); window.scroll(options);
} else { } else {
container.scrollTop = top; container.scroll(options);
} }
} }
export function scrollToTop(el: Element) { export function scrollToTop(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
scroll(el, 0); scroll(el, { top: 0, ...options });
} }
export function scrollToBottom(el: Element) { export function scrollToBottom(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
scroll(el, 99999); // TODO: ちゃんと計算する scroll(el, { top: 99999, ...options }); // TODO: ちゃんと計算する
} }
export function isBottom(el: Element, asobi = 0) { export function isBottom(el: Element, asobi = 0) {

1
src/client/ui/deck/main-column.vue
View File

@ -6,7 +6,6 @@
</template> </template>
</template> </template>
<MkHeader :info="pageInfo"/>
<router-view v-slot="{ Component }" class="_flat_"> <router-view v-slot="{ Component }" class="_flat_">
<transition> <transition>
<keep-alive :include="['timeline']"> <keep-alive :include="['timeline']">

43
src/client/ui/default.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--headerHeight:` + headerHeight + 'px'"> <div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
<XHeaderMenu v-if="showMenuOnTop"/> <XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }"> <div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
<template v-if="!isMobile"> <template v-if="!isMobile">
@ -13,9 +13,6 @@
</template> </template>
<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }"> <main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
<header class="header" @click="onHeaderClick">
<MkHeader :info="pageInfo" v-get-size="(w, h) => headerHeight = h" :thin="true"/>
</header>
<div class="content" :class="{ _flat_: !fullView }"> <div class="content" :class="{ _flat_: !fullView }">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition"> <transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
@ -86,8 +83,8 @@ export default defineComponent({
data() { data() {
return { return {
pageInfo: null, pageInfo: null,
headerHeight: 0,
menuDef: menuDef, menuDef: menuDef,
globalHeaderHeight: 0,
isMobile: window.innerWidth <= MOBILE_THRESHOLD, isMobile: window.innerWidth <= MOBILE_THRESHOLD,
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD, isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
widgetsShowing: false, widgetsShowing: false,
@ -192,10 +189,6 @@ export default defineComponent({
if (window._scroll) window._scroll(); if (window._scroll) window._scroll();
}, },
onHeaderClick() {
window.scroll({ top: 0, behavior: 'smooth' });
},
onContextmenu(e) { onContextmenu(e) {
const isLink = (el: HTMLElement) => { const isLink = (el: HTMLElement) => {
if (el.tagName === 'A') return true; if (el.tagName === 'A') return true;
@ -280,10 +273,6 @@ export default defineComponent({
border: none; border: none;
width: 100%; width: 100%;
border-radius: 0; border-radius: 0;
> .header {
width: 100%;
}
} }
} }
} }
@ -323,29 +312,6 @@ export default defineComponent({
border-radius: 0; border-radius: 0;
overflow: clip; overflow: clip;
--margin: 12px; --margin: 12px;
> .header {
position: sticky;
z-index: 1000;
top: var(--globalHeaderHeight, 0px);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--header);
border-bottom: solid 0.5px var(--divider);
}
> .content {
--stickyTop: calc(var(--globalHeaderHeight, 0px) + var(--headerHeight));
}
@media (max-width: 850px) {
padding-top: var(--headerHeight);
> .header {
position: fixed;
width: calc(100% - #{$nav-icon-only-width});
}
}
} }
> .widgets { > .widgets {
@ -367,12 +333,11 @@ export default defineComponent({
} }
&.withGlobalHeader { &.withGlobalHeader {
--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
> .main { > .main {
margin-top: 0; margin-top: 0;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-radius: var(--radius); border-radius: var(--radius);
--stickyTop: var(--globalHeaderHeight);
} }
> .widgets { > .widgets {

12
src/client/ui/universal.vue
View File

@ -252,18 +252,6 @@ export default defineComponent({
min-width: 0; min-width: 0;
background: var(--panel); background: var(--panel);
> .header {
position: fixed;
z-index: 1000;
top: 0;
//background-color: var(--panel);
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--header);
border-bottom: solid 0.5px var(--divider);
user-select: none;
}
> main { > main {
min-width: 0; min-width: 0;