enhance(client): リスト、アンテナタイムラインを個別ページとして分割
This commit is contained in:
syuilo
147
src/client/pages/antenna-timeline.vue
Normal file
147
src/client/pages/antenna-timeline.vue
Normal 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>
|
||||
@@ -6,11 +6,8 @@
|
||||
<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="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
|
||||
:key="src"
|
||||
:src="src"
|
||||
:list="list ? list.id : null"
|
||||
:antenna="antenna ? antenna.id : null"
|
||||
:channel="channel ? channel.id : null"
|
||||
:sound="true"
|
||||
@before="before()"
|
||||
@after="after()"
|
||||
@@ -41,10 +38,6 @@ export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
src: 'home',
|
||||
list: null,
|
||||
antenna: null,
|
||||
channel: null,
|
||||
menuOpened: false,
|
||||
queue: 0,
|
||||
[symbols.PAGE_INFO]: computed(() => ({
|
||||
title: this.$ts.timeline,
|
||||
@@ -116,32 +109,10 @@ export default defineComponent({
|
||||
src() {
|
||||
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() {
|
||||
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: {
|
||||
@@ -164,12 +135,9 @@ export default defineComponent({
|
||||
async chooseList(ev) {
|
||||
const lists = await os.api('users/lists/list');
|
||||
const items = lists.map(list => ({
|
||||
type: 'link',
|
||||
text: list.name,
|
||||
action: () => {
|
||||
this.list = list;
|
||||
this.src = 'list';
|
||||
this.saveSrc();
|
||||
}
|
||||
to: `/timeline/list/${list.id}`
|
||||
}));
|
||||
os.popupMenu(items, ev.currentTarget || ev.target);
|
||||
},
|
||||
@@ -177,13 +145,10 @@ export default defineComponent({
|
||||
async chooseAntenna(ev) {
|
||||
const antennas = await os.api('antennas/list');
|
||||
const items = antennas.map(antenna => ({
|
||||
type: 'link',
|
||||
text: antenna.name,
|
||||
indicate: antenna.hasUnreadNote,
|
||||
action: () => {
|
||||
this.antenna = antenna;
|
||||
this.src = 'antenna';
|
||||
this.saveSrc();
|
||||
}
|
||||
to: `/timeline/antenna/${antenna.id}`
|
||||
}));
|
||||
os.popupMenu(items, ev.currentTarget || ev.target);
|
||||
},
|
||||
@@ -191,15 +156,10 @@ export default defineComponent({
|
||||
async chooseChannel(ev) {
|
||||
const channels = await os.api('channels/followed');
|
||||
const items = channels.map(channel => ({
|
||||
type: 'link',
|
||||
text: channel.name,
|
||||
indicate: channel.hasUnreadNote,
|
||||
action: () => {
|
||||
// NOTE: チャンネルタイムラインをこのコンポーネントで表示するようにすると投稿フォームはどうするかなどの問題が生じるのでとりあえずページ遷移で
|
||||
//this.channel = channel;
|
||||
//this.src = 'channel';
|
||||
//this.saveSrc();
|
||||
this.$router.push(`/channels/${channel.id}`);
|
||||
}
|
||||
to: `/channels/${channel.id}`
|
||||
}));
|
||||
os.popupMenu(items, ev.currentTarget || ev.target);
|
||||
},
|
||||
@@ -207,10 +167,6 @@ export default defineComponent({
|
||||
saveSrc() {
|
||||
this.$store.set('tl', {
|
||||
src: this.src,
|
||||
arg:
|
||||
this.src === 'list' ? this.list :
|
||||
this.src === 'antenna' ? this.antenna :
|
||||
this.channel
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
147
src/client/pages/user-list-timeline.vue
Normal file
147
src/client/pages/user-list-timeline.vue
Normal 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>
|
||||
Reference in New Issue
Block a user