Resolve #5942

CHANGELOG.md

@@ -4,6 +4,7 @@ ChangeLog
 unreleased
 -------------------
 ### ✨Improvements
+* 投稿詳細ページで前後の投稿を見れるように
 * 自分のfollowersノートはRenoteできるように
 * フォロー申請ページの調整
 * 壁紙設定の強化

src/client/components/notes.vue

@@ -7,16 +7,23 @@
 
 	<mk-error v-if="error" @retry="init()"/>
 
-	<x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }">
+	<div class="more" v-if="more && reversed" style="margin-bottom: var(--margin);">
-		<x-note :note="note" :detail="detail" :key="note.id"/>
-	</x-list>
-
-	<footer class="more" v-if="more">
 		<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
 		</mk-button>
-	</footer>
+	</div>
+
+	<x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
+		<x-note :note="note" :detail="detail" :key="note.id"/>
+	</x-list>
+
+	<div class="more" v-if="more && !reversed" style="margin-top: var(--margin);">
+		<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
+			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
+			<template v-if="moreFetching"><mk-loading inline/></template>
+		</mk-button>
+	</div>
 </div>
 </template>
 
@@ -67,6 +74,10 @@ export default Vue.extend({
 		notes(): any[] {
 			return this.extract ? this.extract(this.items) : this.items;
 		},
+
+		reversed(): boolean {
+			return this.pagination.reversed;
+		}
 	},
 
 	methods: {
@@ -92,14 +103,14 @@ export default Vue.extend({
 	}
 
 	> .notes {
-		> ::v-deep * {
+		> ::v-deep *:not(:last-child) {
 			margin-bottom: var(--marginFull);
 		}
 	}
 
 	&.max-width_500px {
 		> .notes {
-			> ::v-deep * {
+			> ::v-deep *:not(:last-child) {
 				margin-bottom: var(--marginHalf);
 			}
 		}

src/client/pages/note.vue

@@ -4,19 +4,32 @@
 	<portal to="title" v-if="note">{{ $t('noteOf', { user: note.user.name }) }}</portal>
 
 	<transition name="zoom" mode="out-in">
-		<x-note v-if="note" :note="note" :key="note.id" :detail="true"/>
+		<div v-if="note">
-		<div v-else-if="error">
+			<mk-button v-if="hasNext && !showNext" @click="showNext = true" primary style="margin: 0 auto var(--margin) auto;"><fa :icon="faChevronUp"/></mk-button>
+			<x-notes v-if="showNext" ref="next" :pagination="next"/>
+			<hr v-if="showNext"/>
+
+			<x-note :note="note" :key="note.id" :detail="true"/>
+			<div v-if="error">
 				<mk-error @retry="fetch()"/>
 			</div>
+
+			<mk-button v-if="hasPrev && !showPrev" @click="showPrev = true" primary style="margin: var(--margin) auto 0 auto;"><fa :icon="faChevronDown"/></mk-button>
+			<hr v-if="showPrev"/>
+			<x-notes v-if="showPrev" ref="prev" :pagination="prev" style="margin-top: var(--margin);"/>
+		</div>
 	</transition>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import i18n from '../i18n';
 import Progress from '../scripts/loading';
 import XNote from '../components/note.vue';
+import XNotes from '../components/notes.vue';
+import MkButton from '../components/ui/button.vue';
 
 export default Vue.extend({
 	i18n,
@@ -26,12 +39,36 @@ export default Vue.extend({
 		};
 	},
 	components: {
-		XNote
+		XNote,
+		XNotes,
+		MkButton,
 	},
 	data() {
 		return {
 			note: null,
+			hasPrev: false,
+			hasNext: false,
+			showPrev: false,
+			showNext: false,
 			error: null,
+			prev: {
+				endpoint: 'users/notes',
+				limit: 10,
+				params: init => ({
+					userId: this.note.userId,
+					untilId: this.note.id,
+				})
+			},
+			next: {
+				reversed: true,
+				endpoint: 'users/notes',
+				limit: 10,
+				params: init => ({
+					userId: this.note.userId,
+					sinceId: this.note.id,
+				})
+			},
+			faChevronUp, faChevronDown
 		};
 	},
 	watch: {
@@ -46,7 +83,22 @@ export default Vue.extend({
 			this.$root.api('notes/show', {
 				noteId: this.$route.params.note
 			}).then(note => {
+				Promise.all([
+					this.$root.api('users/notes', {
+						userId: note.userId,
+						untilId: note.id,
+						limit: 1,
+					}),
+					this.$root.api('users/notes', {
+						userId: note.userId,
+						sinceId: note.id,
+						limit: 1,
+					}),
+				]).then(([prev, next]) => {
+					this.hasPrev = prev.length !== 0;
+					this.hasNext = next.length !== 0;
 					this.note = note;
+				});
 			}).catch(e => {
 				this.error = e;
 			}).finally(() => {

src/client/scripts/paging.ts

@@ -64,18 +64,18 @@ export default (opts) => ({
 			if (params && params.then) params = await params;
 			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
 			await this.$root.api(endpoint, {
+				...params,
 				limit: this.pagination.noPaging ? (this.pagination.limit || 10) : (this.pagination.limit || 10) + 1,
-				...params
+			}).then(items => {
-			}).then(x => {
+				if (!this.pagination.noPaging && (items.length === (this.pagination.limit || 10) + 1)) {
-				if (!this.pagination.noPaging && (x.length === (this.pagination.limit || 10) + 1)) {
+					items.pop();
-					x.pop();
+					this.items = this.pagination.reversed ? [...items].reverse() : items;
-					this.items = x;
 					this.more = true;
 				} else {
-					this.items = x;
+					this.items = this.pagination.reversed ? [...items].reverse() : items;
 					this.more = false;
 				}
-				this.offset = x.length;
+				this.offset = items.length;
 				this.inited = true;
 				this.fetching = false;
 				if (opts.after) opts.after(this, null);
@@ -93,23 +93,25 @@ export default (opts) => ({
 			if (params && params.then) params = await params;
 			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
 			await this.$root.api(endpoint, {
+				...params,
 				limit: SECOND_FETCH_LIMIT + 1,
 				...(this.pagination.offsetMode ? {
 					offset: this.offset,
+				} : this.pagination.reversed ? {
+					sinceId: this.items[0].id,
 				} : {
 					untilId: this.items[this.items.length - 1].id,
 				}),
-				...params
+			}).then(items => {
-			}).then(x => {
+				if (items.length === SECOND_FETCH_LIMIT + 1) {
-				if (x.length === SECOND_FETCH_LIMIT + 1) {
+					items.pop();
-					x.pop();
+					this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
-					this.items = this.items.concat(x);
 					this.more = true;
 				} else {
-					this.items = this.items.concat(x);
+					this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
 					this.more = false;
 				}
-				this.offset += x.length;
+				this.offset += items.length;
 				this.moreFetching = false;
 			}, e => {
 				this.moreFetching = false;

src/client/style.scss

@@ -128,6 +128,13 @@ a {
 	}
 }
 
+hr {
+	margin: var(--margin) 0 var(--margin) 0;
+	border: none;
+	height: 1px;
+	background: var(--divider);
+}
+
 #nprogress {
 	pointer-events: none;
 	position: absolute;