This commit is contained in:
syuilo 2020-02-16 22:15:49 +09:00
parent bcd7d1f007
commit dc39caed1e
5 changed files with 100 additions and 27 deletions

View file

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

View file

@ -7,16 +7,23 @@
<mk-error v-if="error" @retry="init()"/>
<x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }">
<x-note :note="note" :detail="detail" :key="note.id"/>
</x-list>
<footer class="more" v-if="more">
<div class="more" v-if="more && reversed" style="margin-bottom: 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>
</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);
}
}

View file

@ -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-else-if="error">
<div v-if="note">
<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(() => {

View file

@ -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(x => {
if (!this.pagination.noPaging && (x.length === (this.pagination.limit || 10) + 1)) {
x.pop();
this.items = x;
}).then(items => {
if (!this.pagination.noPaging && (items.length === (this.pagination.limit || 10) + 1)) {
items.pop();
this.items = this.pagination.reversed ? [...items].reverse() : items;
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(x => {
if (x.length === SECOND_FETCH_LIMIT + 1) {
x.pop();
this.items = this.items.concat(x);
}).then(items => {
if (items.length === SECOND_FETCH_LIMIT + 1) {
items.pop();
this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
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;

View file

@ -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;