enhance(client): リスト、アンテナタイムラインを個別ページとして分割

This commit is contained in:
syuilo 2021-09-21 21:04:59 +09:00
parent b35ca3b739
commit 72a49f334a
9 changed files with 348 additions and 70 deletions

View file

@ -8,13 +8,14 @@
--> -->
## 12.x.x (unreleased) ## 12.x.x (unreleased)
- ActivityPub: deliverキューのメモリ使用量を削減
### Improvements ### Improvements
- ActivityPub: リモートユーザーのDeleteアクティビティに対応 - ActivityPub: リモートユーザーのDeleteアクティビティに対応
- ActivityPub: add resolver check for blocked instance - ActivityPub: add resolver check for blocked instance
- ActivityPub: deliverキューのメモリ使用量を削減
- アカウントが凍結された場合に、凍結された旨を表示してからログアウトするように - アカウントが凍結された場合に、凍結された旨を表示してからログアウトするように
- 凍結されたアカウントにログインしようとしたときに、凍結されている旨を表示するように - 凍結されたアカウントにログインしようとしたときに、凍結されている旨を表示するように
- リスト、アンテナタイムラインを個別ページとして分割
- UIの改善 - UIの改善
### Bugfixes ### Bugfixes

View file

@ -41,7 +41,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref, unref } from 'vue';
import { focusPrev, focusNext } from '@client/scripts/focus'; import { focusPrev, focusNext } from '@client/scripts/focus';
import contains from '@client/scripts/contains'; import contains from '@client/scripts/contains';
@ -79,8 +79,10 @@ export default defineComponent({
}; };
}, },
}, },
created() { watch: {
const items = ref(this.items.filter(item => item !== undefined)); items: {
handler() {
const items = ref(unref(this.items).filter(item => item !== undefined));
for (let i = 0; i < items.value.length; i++) { for (let i = 0; i < items.value.length; i++) {
const item = items.value[i]; const item = items.value[i];
@ -95,6 +97,9 @@ export default defineComponent({
this._items = items; this._items = items;
}, },
immediate: true
}
},
mounted() { mounted() {
if (this.viaKeyboard) { if (this.viaKeyboard) {
this.$nextTick(() => { this.$nextTick(() => {

View file

@ -1,9 +1,10 @@
import { computed } from 'vue'; import { computed, ref } from 'vue';
import { search } from '@client/scripts/search'; import { search } from '@client/scripts/search';
import * as os from '@client/os'; import * as os from '@client/os';
import { i18n } from '@client/i18n'; import { i18n } from '@client/i18n';
import { $i } from './account'; import { $i } from './account';
import { unisonReload } from '@client/scripts/unison-reload'; import { unisonReload } from '@client/scripts/unison-reload';
import { router } from './router';
export const menuDef = { export const menuDef = {
notifications: { notifications: {
@ -58,7 +59,26 @@ export const menuDef = {
title: 'lists', title: 'lists',
icon: 'fas fa-list-ul', icon: 'fas fa-list-ul',
show: computed(() => $i != null), show: computed(() => $i != null),
active: computed(() => router.currentRoute.value.path.startsWith('/timeline/list/') || router.currentRoute.value.path === '/my/lists' || router.currentRoute.value.path.startsWith('/my/lists/')),
action: (ev) => {
const items = ref([{
type: 'pending'
}]);
os.api('users/lists/list').then(lists => {
const _items = [...lists.map(list => ({
type: 'link',
text: list.name,
to: `/timeline/list/${list.id}`
})), null, {
type: 'link',
to: '/my/lists', to: '/my/lists',
text: i18n.locale.manageLists,
icon: 'fas fa-cog',
}];
items.value = _items;
});
os.popupMenu(items, ev.currentTarget || ev.target);
},
}, },
groups: { groups: {
title: 'groups', title: 'groups',

View file

@ -372,7 +372,7 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
}); });
} }
export function popupMenu(items: any[], src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) { export function popupMenu(items: any[] | Ref<any[]>, src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let dispose; let dispose;
popup(import('@client/components/ui/popup-menu.vue'), { popup(import('@client/components/ui/popup-menu.vue'), {

View file

@ -0,0 +1,147 @@
<template>
<div class="tqmomfks" v-hotkey.global="keymap" v-size="{ min: [800] }">
<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block">
<XTimeline ref="tl" class="tl"
:key="antennaId"
src="antenna"
:antenna="antennaId"
:sound="true"
@before="before()"
@after="after()"
@queue="queueUpdated"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, computed } from 'vue';
import Progress from '@client/scripts/loading';
import XTimeline from '@client/components/timeline.vue';
import { scroll } from '@client/scripts/scroll';
import * as os from '@client/os';
import * as symbols from '@client/symbols';
export default defineComponent({
components: {
XTimeline,
},
props: {
antennaId: {
type: String,
required: true
}
},
data() {
return {
antenna: null,
queue: 0,
[symbols.PAGE_INFO]: computed(() => this.antenna ? {
title: this.antenna.name,
icon: 'fas fa-satellite',
bg: 'var(--bg)',
actions: [{
icon: 'fas fa-calendar-alt',
text: this.$ts.jumpToSpecifiedDate,
handler: this.timetravel
}, {
icon: 'fas fa-cog',
text: this.$ts.settings,
handler: this.settings
}],
} : null),
};
},
computed: {
keymap(): any {
return {
't': this.focus
};
},
},
watch: {
antennaId: {
async handler() {
this.antenna = await os.api('antennas/show', {
antennaId: this.antennaId
});
},
immediate: true
}
},
methods: {
before() {
Progress.start();
},
after() {
Progress.done();
},
queueUpdated(q) {
this.queue = q;
},
top() {
scroll(this.$el, 0);
},
async timetravel() {
const { canceled, result: date } = await os.dialog({
title: this.$ts.date,
input: {
type: 'date'
}
});
if (canceled) return;
this.$refs.tl.timetravel(new Date(date));
},
settings() {
this.$router.push(`/my/antennas/${this.antennaId}`);
},
focus() {
(this.$refs.tl as any).focus();
}
}
});
</script>
<style lang="scss" scoped>
.tqmomfks {
padding: var(--margin);
> .new {
position: sticky;
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
> button {
display: block;
margin: var(--margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
}
}
> .tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
}
&.min-width_800px {
max-width: 800px;
margin: 0 auto;
}
}
</style>

View file

@ -6,11 +6,8 @@
<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div> <div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block"> <div class="tl _block">
<XTimeline ref="tl" class="tl" <XTimeline ref="tl" class="tl"
:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src" :key="src"
:src="src" :src="src"
:list="list ? list.id : null"
:antenna="antenna ? antenna.id : null"
:channel="channel ? channel.id : null"
:sound="true" :sound="true"
@before="before()" @before="before()"
@after="after()" @after="after()"
@ -41,10 +38,6 @@ export default defineComponent({
data() { data() {
return { return {
src: 'home', src: 'home',
list: null,
antenna: null,
channel: null,
menuOpened: false,
queue: 0, queue: 0,
[symbols.PAGE_INFO]: computed(() => ({ [symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.timeline, title: this.$ts.timeline,
@ -116,32 +109,10 @@ export default defineComponent({
src() { src() {
this.showNav = false; this.showNav = false;
}, },
list(x) {
this.showNav = false;
if (x != null) this.antenna = null;
if (x != null) this.channel = null;
},
antenna(x) {
this.showNav = false;
if (x != null) this.list = null;
if (x != null) this.channel = null;
},
channel(x) {
this.showNav = false;
if (x != null) this.antenna = null;
if (x != null) this.list = null;
},
}, },
created() { created() {
this.src = this.$store.state.tl.src; this.src = this.$store.state.tl.src;
if (this.src === 'list') {
this.list = this.$store.state.tl.arg;
} else if (this.src === 'antenna') {
this.antenna = this.$store.state.tl.arg;
} else if (this.src === 'channel') {
this.channel = this.$store.state.tl.arg;
}
}, },
methods: { methods: {
@ -164,12 +135,9 @@ export default defineComponent({
async chooseList(ev) { async chooseList(ev) {
const lists = await os.api('users/lists/list'); const lists = await os.api('users/lists/list');
const items = lists.map(list => ({ const items = lists.map(list => ({
type: 'link',
text: list.name, text: list.name,
action: () => { to: `/timeline/list/${list.id}`
this.list = list;
this.src = 'list';
this.saveSrc();
}
})); }));
os.popupMenu(items, ev.currentTarget || ev.target); os.popupMenu(items, ev.currentTarget || ev.target);
}, },
@ -177,13 +145,10 @@ export default defineComponent({
async chooseAntenna(ev) { async chooseAntenna(ev) {
const antennas = await os.api('antennas/list'); const antennas = await os.api('antennas/list');
const items = antennas.map(antenna => ({ const items = antennas.map(antenna => ({
type: 'link',
text: antenna.name, text: antenna.name,
indicate: antenna.hasUnreadNote, indicate: antenna.hasUnreadNote,
action: () => { to: `/timeline/antenna/${antenna.id}`
this.antenna = antenna;
this.src = 'antenna';
this.saveSrc();
}
})); }));
os.popupMenu(items, ev.currentTarget || ev.target); os.popupMenu(items, ev.currentTarget || ev.target);
}, },
@ -191,15 +156,10 @@ export default defineComponent({
async chooseChannel(ev) { async chooseChannel(ev) {
const channels = await os.api('channels/followed'); const channels = await os.api('channels/followed');
const items = channels.map(channel => ({ const items = channels.map(channel => ({
type: 'link',
text: channel.name, text: channel.name,
indicate: channel.hasUnreadNote, indicate: channel.hasUnreadNote,
action: () => { to: `/channels/${channel.id}`
// NOTE: 稿
//this.channel = channel;
//this.src = 'channel';
//this.saveSrc();
this.$router.push(`/channels/${channel.id}`);
}
})); }));
os.popupMenu(items, ev.currentTarget || ev.target); os.popupMenu(items, ev.currentTarget || ev.target);
}, },
@ -207,10 +167,6 @@ export default defineComponent({
saveSrc() { saveSrc() {
this.$store.set('tl', { this.$store.set('tl', {
src: this.src, src: this.src,
arg:
this.src === 'list' ? this.list :
this.src === 'antenna' ? this.antenna :
this.channel
}); });
}, },

View file

@ -0,0 +1,147 @@
<template>
<div class="eqqrhokj" v-hotkey.global="keymap" v-size="{ min: [800] }">
<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block">
<XTimeline ref="tl" class="tl"
:key="listId"
src="list"
:list="listId"
:sound="true"
@before="before()"
@after="after()"
@queue="queueUpdated"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, computed } from 'vue';
import Progress from '@client/scripts/loading';
import XTimeline from '@client/components/timeline.vue';
import { scroll } from '@client/scripts/scroll';
import * as os from '@client/os';
import * as symbols from '@client/symbols';
export default defineComponent({
components: {
XTimeline,
},
props: {
listId: {
type: String,
required: true
}
},
data() {
return {
list: null,
queue: 0,
[symbols.PAGE_INFO]: computed(() => this.list ? {
title: this.list.name,
icon: 'fas fa-list-ul',
bg: 'var(--bg)',
actions: [{
icon: 'fas fa-calendar-alt',
text: this.$ts.jumpToSpecifiedDate,
handler: this.timetravel
}, {
icon: 'fas fa-cog',
text: this.$ts.settings,
handler: this.settings
}],
} : null),
};
},
computed: {
keymap(): any {
return {
't': this.focus
};
},
},
watch: {
listId: {
async handler() {
this.list = await os.api('users/lists/show', {
listId: this.listId
});
},
immediate: true
}
},
methods: {
before() {
Progress.start();
},
after() {
Progress.done();
},
queueUpdated(q) {
this.queue = q;
},
top() {
scroll(this.$el, 0);
},
settings() {
this.$router.push(`/my/lists/${this.listId}`);
},
async timetravel() {
const { canceled, result: date } = await os.dialog({
title: this.$ts.date,
input: {
type: 'date'
}
});
if (canceled) return;
this.$refs.tl.timetravel(new Date(date));
},
focus() {
(this.$refs.tl as any).focus();
}
}
});
</script>
<style lang="scss" scoped>
.eqqrhokj {
padding: var(--margin);
> .new {
position: sticky;
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
> button {
display: block;
margin: var(--margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
}
}
> .tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
}
&.min-width_800px {
max-width: 800px;
margin: 0 auto;
}
}
</style>

View file

@ -48,6 +48,8 @@ const defaultRoutes = [
{ path: '/channels/:channelId/edit', component: page('channel-editor'), props: true }, { path: '/channels/:channelId/edit', component: page('channel-editor'), props: true },
{ path: '/channels/:channelId', component: page('channel'), props: route => ({ channelId: route.params.channelId }) }, { path: '/channels/:channelId', component: page('channel'), props: route => ({ channelId: route.params.channelId }) },
{ path: '/clips/:clipId', component: page('clip'), props: route => ({ clipId: route.params.clipId }) }, { path: '/clips/:clipId', component: page('clip'), props: route => ({ clipId: route.params.clipId }) },
{ path: '/timeline/list/:listId', component: page('user-list-timeline'), props: route => ({ listId: route.params.listId }) },
{ path: '/timeline/antenna/:antennaId', component: page('antenna-timeline'), props: route => ({ antennaId: route.params.antennaId }) },
{ path: '/my/notifications', component: page('notifications') }, { path: '/my/notifications', component: page('notifications') },
{ path: '/my/favorites', component: page('favorites') }, { path: '/my/favorites', component: page('favorites') },
{ path: '/my/messages', component: page('messages') }, { path: '/my/messages', component: page('messages') },

View file

@ -19,7 +19,7 @@
</MkA> </MkA>
<template v-for="item in menu"> <template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div> <div v-if="item === '-'" class="divider"></div>
<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime> <component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span> <i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span> <span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component> </component>