1
1
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-23 11:08:31 +09:00
cherrypick/src/client/app/desktop/views/components/timeline.vue

261 lines
6.4 KiB
Vue
Raw Normal View History

2018-02-11 16:52:37 +09:00
<template>
2018-02-13 08:31:03 +09:00
<div class="mk-timeline">
<header>
<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
2019-01-16 14:54:14 +09:00
<span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
<div class="buttons">
<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
<button @click="chooseTag" :title="$t('hashtag')" ref="tagButton"><fa icon="hashtag"/></button>
<button @click="chooseList" :title="$t('list')" ref="listButton"><fa icon="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"/>
2018-07-11 13:43:09 +09:00
<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"/>
2018-04-26 18:24:14 +09:00
<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
2018-02-11 23:26:35 +09:00
</div>
2018-02-11 16:52:37 +09:00
</template>
2018-02-11 17:04:03 +09:00
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import XCore from './timeline.core.vue';
import Menu from '../../../common/views/components/menu.vue';
import MkSettingsWindow from './settings-window.vue';
2018-02-11 16:52:37 +09:00
2018-02-11 17:04:03 +09:00
export default Vue.extend({
i18n: i18n('desktop/views/components/timeline.vue'),
components: {
XCore
},
2018-02-13 09:12:54 +09:00
data() {
return {
2018-04-25 23:08:40 +09:00
src: 'home',
2018-09-12 02:48:19 +09:00
list: null,
tagTl: null,
2019-01-16 14:54:14 +09:00
enableLocalTimeline: false,
enableGlobalTimeline: false,
2018-02-13 09:12:54 +09:00
};
},
2018-04-17 07:40:19 +09:00
2018-05-27 00:18:44 +09:00
watch: {
src() {
2018-05-27 02:56:54 +09:00
this.saveSrc();
2018-05-27 00:18:44 +09:00
},
list(x) {
2018-05-27 02:56:54 +09:00
this.saveSrc();
if (x != null) this.tagTl = null;
},
tagTl(x) {
this.saveSrc();
if (x != null) this.list = null;
2018-05-27 00:18:44 +09:00
}
},
created() {
2018-11-09 08:13:34 +09:00
this.$root.getMeta().then(meta => {
2019-01-16 14:46:54 +09:00
this.enableLocalTimeline = !meta.disableLocalTimeline || this.$store.state.i.isModerator || this.$store.state.i.isAdmin;
2019-01-16 14:54:14 +09:00
this.enableGlobalTimeline = !meta.disableGlobalTimeline || this.$store.state.i.isModerator || this.$store.state.i.isAdmin;
2018-09-12 02:48:19 +09:00
});
2018-05-27 00:18:44 +09:00
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;
2018-05-27 00:18:44 +09:00
}
2018-05-27 13:49:09 +09:00
} else if (this.$store.state.i.followingCount == 0) {
2018-07-14 11:58:21 +09:00
this.src = 'hybrid';
}
},
2018-02-13 09:12:54 +09:00
mounted() {
(this.$refs.tl as any).$once('loaded', () => {
this.$emit('loaded');
});
2018-02-13 09:12:54 +09:00
},
2018-04-17 07:40:19 +09:00
2018-02-11 17:04:03 +09:00
methods: {
2018-05-27 02:56:54 +09:00
saveSrc() {
this.$store.commit('device/setTl', {
src: this.src,
arg: this.src == 'list' ? this.list : this.tagTl
2018-05-27 02:56:54 +09:00
});
},
focus() {
(this.$refs.tl as any).focus();
},
2018-02-19 18:26:20 +09:00
warp(date) {
(this.$refs.tl as any).warp(date);
2018-04-25 22:50:05 +09:00
},
async chooseList() {
2018-11-09 08:13:34 +09:00
const lists = await this.$root.api('users/lists/list');
let menu = [{
icon: 'plus',
text: this.$t('add-list'),
action: () => {
2018-12-02 20:10:53 +09:00
this.$root.dialog({
title: this.$t('list-name'),
2018-12-02 20:10:53 +09:00
input: true
}).then(async ({ canceled, result: title }) => {
if (canceled) return;
2018-11-09 08:13:34 +09:00
const list = await this.$root.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: 'list',
text: list.title,
action: () => {
this.list = list;
this.src = 'list';
}
})));
2018-11-09 08:13:34 +09:00
this.$root.new(Menu, {
source: this.$refs.listButton,
items: menu
});
},
chooseTag() {
let menu = [{
icon: 'plus',
text: this.$t('add-tag-timeline'),
action: () => {
2018-11-09 08:13:34 +09:00
this.$root.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: 'hashtag',
text: t.title,
action: () => {
this.tagTl = t;
this.src = 'tag';
}
})));
2018-11-09 08:13:34 +09:00
this.$root.new(Menu, {
source: this.$refs.tagButton,
items: menu
2018-04-25 23:08:40 +09:00
});
2018-02-11 17:04:03 +09:00
}
}
2018-02-11 16:52:37 +09:00
});
</script>
<style lang="stylus" scoped>
2018-09-27 14:32:48 +09:00
.mk-timeline
2018-09-26 20:28:13 +09:00
background var(--face)
2018-09-22 20:39:12 +09:00
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
2018-02-11 16:52:37 +09:00
> header
2018-04-17 19:32:18 +09:00
padding 0 8px
2018-04-17 20:17:00 +09:00
z-index 10
2018-09-26 20:28:13 +09:00
background var(--faceHeader)
2018-12-30 14:00:57 +09:00
box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
2018-02-11 16:52:37 +09:00
> .buttons
2018-04-25 22:50:05 +09:00
position absolute
z-index 2
top 0
right 0
2018-09-17 09:05:51 +09:00
padding-right 8px
2018-04-25 22:50:05 +09:00
> button
2018-09-17 09:05:51 +09:00
padding 0 8px
font-size 0.9em
line-height 42px
2018-09-27 14:32:48 +09:00
color var(--faceTextButton)
2018-09-19 14:18:34 +09:00
> .badge
position absolute
top -4px
right 4px
font-size 10px
2018-12-31 01:15:32 +09:00
color var(--notificationIndicator)
2018-09-19 14:18:34 +09:00
&:hover
2018-09-27 14:32:48 +09:00
color var(--faceTextButtonHover)
2018-04-25 22:50:05 +09:00
&[data-active]
2018-09-26 20:19:35 +09:00
color var(--primary)
cursor default
&:before
content ""
display block
position absolute
bottom 0
left 0
width 100%
height 2px
2018-09-26 20:19:35 +09:00
background var(--primary)
> span
2018-04-17 19:32:18 +09:00
display inline-block
padding 0 10px
line-height 42px
font-size 12px
user-select none
2018-04-26 14:38:37 +09:00
&[data-active]
2018-09-26 20:19:35 +09:00
color var(--primary)
2018-04-17 19:32:18 +09:00
cursor default
2018-04-17 19:33:43 +09:00
font-weight bold
2018-04-17 19:32:18 +09:00
&:before
content ""
display block
position absolute
bottom 0
left -8px
width calc(100% + 16px)
height 2px
2018-09-26 20:19:35 +09:00
background var(--primary)
2018-04-17 19:32:18 +09:00
2018-04-26 14:38:37 +09:00
&:not([data-active])
2018-09-27 14:32:48 +09:00
color var(--desktopTimelineSrc)
cursor pointer
&:hover
2018-09-27 14:32:48 +09:00
color var(--desktopTimelineSrcHover)
2018-02-11 16:52:37 +09:00
</style>