<template> <div class="mk-timeline"> <header> <span :data-active="src == 'home'" @click="src = 'home'">%fa:home% %i18n:@home%</span> <span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span> <span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span> <span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span> <span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl">%fa:hashtag% {{ tagTl.title }}</span> <span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span> <div class="buttons"> <button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%">%fa:at%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></button> <button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%">%fa:envelope R%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></button> <button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton">%fa:hashtag%</button> <button @click="chooseList" title="%i18n:@list%" ref="listButton">%fa:list%</button> </div> </header> <x-core v-if="src == 'home'" ref="tl" key="home" src="home"/> <x-core v-if="src == 'local'" ref="tl" key="local" src="local"/> <x-core v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/> <x-core v-if="src == 'global'" ref="tl" key="global" src="global"/> <x-core v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/> <x-core v-if="src == 'messages'" ref="tl" key="messages" src="messages"/> <x-core v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/> <mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/> </div> </template> <script lang="ts"> import Vue from 'vue'; import XCore from './timeline.core.vue'; import Menu from '../../../common/views/components/menu.vue'; import MkSettingsWindow from './settings-window.vue'; export default Vue.extend({ components: { XCore }, data() { return { src: 'home', list: null, tagTl: null, enableLocalTimeline: false }; }, watch: { src() { this.saveSrc(); }, list(x) { this.saveSrc(); if (x != null) this.tagTl = null; }, tagTl(x) { this.saveSrc(); if (x != null) this.list = null; } }, created() { (this as any).os.getMeta().then(meta => { this.enableLocalTimeline = !meta.disableLocalTimeline; }); if (this.$store.state.device.tl) { this.src = this.$store.state.device.tl.src; if (this.src == 'list') { this.list = this.$store.state.device.tl.arg; } else if (this.src == 'tag') { this.tagTl = this.$store.state.device.tl.arg; } } else if (this.$store.state.i.followingCount == 0) { this.src = 'hybrid'; } }, mounted() { (this.$refs.tl as any).$once('loaded', () => { this.$emit('loaded'); }); }, methods: { saveSrc() { this.$store.commit('device/setTl', { src: this.src, arg: this.src == 'list' ? this.list : this.tagTl }); }, focus() { (this.$refs.tl as any).focus(); }, warp(date) { (this.$refs.tl as any).warp(date); }, async chooseList() { const lists = await (this as any).api('users/lists/list'); let menu = [{ icon: '%fa:plus%', text: '%i18n:@add-list%', action: () => { (this as any).apis.input({ title: '%i18n:@list-name%', }).then(async title => { const list = await (this as any).api('users/lists/create', { title }); this.list = list; this.src = 'list'; }); } }]; if (lists.length > 0) { menu.push(null); } menu = menu.concat(lists.map(list => ({ icon: '%fa:list%', text: list.title, action: () => { this.list = list; this.src = 'list'; } }))); this.os.new(Menu, { source: this.$refs.listButton, compact: false, items: menu }); }, chooseTag() { let menu = [{ icon: '%fa:plus%', text: '%i18n:@add-tag-timeline%', action: () => { (this as any).os.new(MkSettingsWindow, { initialPage: 'hashtags' }); } }]; if (this.$store.state.settings.tagTimelines.length > 0) { menu.push(null); } menu = menu.concat(this.$store.state.settings.tagTimelines.map(t => ({ icon: '%fa:hashtag%', text: t.title, action: () => { this.tagTl = t; this.src = 'tag'; } }))); this.os.new(Menu, { source: this.$refs.tagButton, compact: false, items: menu }); } } }); </script> <style lang="stylus" scoped> root(isDark) background isDark ? #282C37 : #fff box-shadow var(--shadow) border-radius var(--round) overflow hidden > header padding 0 8px z-index 10 background isDark ? #313543 : #fff box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08) > .buttons position absolute z-index 2 top 0 right 0 padding-right 8px > button padding 0 8px font-size 0.9em line-height 42px color isDark ? #9baec8 : #ccc > .badge position absolute top -4px right 4px font-size 10px color var(--primary) &:hover color isDark ? #b2c1d5 : #aaa &:active color isDark ? #b2c1d5 : #999 &[data-active] color var(--primary) cursor default &:before content "" display block position absolute bottom 0 left 0 width 100% height 2px background var(--primary) > span display inline-block padding 0 10px line-height 42px font-size 12px user-select none &[data-active] color var(--primary) cursor default font-weight bold &:before content "" display block position absolute bottom 0 left -8px width calc(100% + 16px) height 2px background var(--primary) &:not([data-active]) color isDark ? #9aa2a7 : #6f7477 cursor pointer &:hover color isDark ? #d9dcde : #525a5f .mk-timeline[data-darkmode] root(true) .mk-timeline:not([data-darkmode]) root(false) </style>