wip
This commit is contained in:
		
							parent
							
								
									6ab0c386cb
								
							
						
					
					
						commit
						03d09e9d24
					
				
					 13 changed files with 233 additions and 47 deletions
				
			
		| 
						 | 
					@ -1,8 +1,8 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
<div class="mk-mentions">
 | 
					<div class="mk-mentions">
 | 
				
			||||||
	<header>
 | 
						<header>
 | 
				
			||||||
		<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて</span>
 | 
							<span :data-active="mode == 'all'" @click="mode = 'all'">すべて</span>
 | 
				
			||||||
		<span :data-is-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
 | 
							<span :data-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
 | 
				
			||||||
	</header>
 | 
						</header>
 | 
				
			||||||
	<div class="fetching" v-if="fetching">
 | 
						<div class="fetching" v-if="fetching">
 | 
				
			||||||
		<mk-ellipsis-icon/>
 | 
							<mk-ellipsis-icon/>
 | 
				
			||||||
| 
						 | 
					@ -98,7 +98,7 @@ export default Vue.extend({
 | 
				
			||||||
			font-size 18px
 | 
								font-size 18px
 | 
				
			||||||
			color #555
 | 
								color #555
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			&:not([data-is-active])
 | 
								&:not([data-active])
 | 
				
			||||||
				color $theme-color
 | 
									color $theme-color
 | 
				
			||||||
				cursor pointer
 | 
									cursor pointer
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -31,6 +31,7 @@
 | 
				
			||||||
<script lang="ts">
 | 
					<script lang="ts">
 | 
				
			||||||
import Vue from 'vue';
 | 
					import Vue from 'vue';
 | 
				
			||||||
import { url } from '../../../config';
 | 
					import { url } from '../../../config';
 | 
				
			||||||
 | 
					import getNoteSummary from '../../../../../renderers/get-note-summary';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import XNote from './notes.note.vue';
 | 
					import XNote from './notes.note.vue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -53,6 +54,7 @@ export default Vue.extend({
 | 
				
			||||||
			requestInitPromise: null as () => Promise<any[]>,
 | 
								requestInitPromise: null as () => Promise<any[]>,
 | 
				
			||||||
			notes: [],
 | 
								notes: [],
 | 
				
			||||||
			queue: [],
 | 
								queue: [],
 | 
				
			||||||
 | 
								unreadCount: 0,
 | 
				
			||||||
			fetching: true,
 | 
								fetching: true,
 | 
				
			||||||
			moreFetching: false
 | 
								moreFetching: false
 | 
				
			||||||
		};
 | 
							};
 | 
				
			||||||
| 
						 | 
					@ -71,10 +73,12 @@ export default Vue.extend({
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	mounted() {
 | 
						mounted() {
 | 
				
			||||||
 | 
							document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 | 
				
			||||||
		window.addEventListener('scroll', this.onScroll);
 | 
							window.addEventListener('scroll', this.onScroll);
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	beforeDestroy() {
 | 
						beforeDestroy() {
 | 
				
			||||||
 | 
							document.removeEventListener('visibilitychange', this.onVisibilitychange);
 | 
				
			||||||
		window.removeEventListener('scroll', this.onScroll);
 | 
							window.removeEventListener('scroll', this.onScroll);
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -130,6 +134,12 @@ export default Vue.extend({
 | 
				
			||||||
			}
 | 
								}
 | 
				
			||||||
			//#endregion
 | 
								//#endregion
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								// 投稿が自分のものではないかつ、タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
 | 
				
			||||||
 | 
								if ((document.hidden || !this.isScrollTop()) && note.userId !== (this as any).os.i.id) {
 | 
				
			||||||
 | 
									this.unreadCount++;
 | 
				
			||||||
 | 
									document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
 | 
				
			||||||
 | 
								}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			if (this.isScrollTop()) {
 | 
								if (this.isScrollTop()) {
 | 
				
			||||||
				// Prepend the note
 | 
									// Prepend the note
 | 
				
			||||||
				this.notes.unshift(note);
 | 
									this.notes.unshift(note);
 | 
				
			||||||
| 
						 | 
					@ -172,9 +182,21 @@ export default Vue.extend({
 | 
				
			||||||
			this.moreFetching = false;
 | 
								this.moreFetching = false;
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							clearNotification() {
 | 
				
			||||||
 | 
								this.unreadCount = 0;
 | 
				
			||||||
 | 
								document.title = 'Misskey';
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							onVisibilitychange() {
 | 
				
			||||||
 | 
								if (!document.hidden) {
 | 
				
			||||||
 | 
									this.clearNotification();
 | 
				
			||||||
 | 
								}
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		onScroll() {
 | 
							onScroll() {
 | 
				
			||||||
			if (this.isScrollTop()) {
 | 
								if (this.isScrollTop()) {
 | 
				
			||||||
				this.releaseQueue();
 | 
									this.releaseQueue();
 | 
				
			||||||
 | 
									this.clearNotification();
 | 
				
			||||||
			}
 | 
								}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
 | 
								if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,10 +1,10 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
<div class="mk-timeline">
 | 
					<div class="mk-timeline">
 | 
				
			||||||
	<header>
 | 
						<header>
 | 
				
			||||||
		<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
 | 
							<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
 | 
				
			||||||
		<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
 | 
							<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
 | 
				
			||||||
		<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
 | 
							<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
 | 
				
			||||||
		<span :data-is-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
 | 
							<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
 | 
				
			||||||
		<button @click="chooseList" title="リスト">%fa:list%</button>
 | 
							<button @click="chooseList" title="リスト">%fa:list%</button>
 | 
				
			||||||
	</header>
 | 
						</header>
 | 
				
			||||||
	<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
 | 
						<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
 | 
				
			||||||
| 
						 | 
					@ -93,7 +93,7 @@ root(isDark)
 | 
				
			||||||
			font-size 12px
 | 
								font-size 12px
 | 
				
			||||||
			user-select none
 | 
								user-select none
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			&[data-is-active]
 | 
								&[data-active]
 | 
				
			||||||
				color $theme-color
 | 
									color $theme-color
 | 
				
			||||||
				cursor default
 | 
									cursor default
 | 
				
			||||||
				font-weight bold
 | 
									font-weight bold
 | 
				
			||||||
| 
						 | 
					@ -108,7 +108,7 @@ root(isDark)
 | 
				
			||||||
					height 2px
 | 
										height 2px
 | 
				
			||||||
					background $theme-color
 | 
										background $theme-color
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			&:not([data-is-active])
 | 
								&:not([data-active])
 | 
				
			||||||
				color isDark ? #9aa2a7 : #6f7477
 | 
									color isDark ? #9aa2a7 : #6f7477
 | 
				
			||||||
				cursor pointer
 | 
									cursor pointer
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -87,7 +87,7 @@ export default Vue.extend({
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
		onUserRemoved() {
 | 
							onUserRemoved() {
 | 
				
			||||||
			this.fetch();
 | 
								this.fetch();
 | 
				
			||||||
		},
 | 
							}
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -2,8 +2,8 @@
 | 
				
			||||||
<div class="mk-users-list">
 | 
					<div class="mk-users-list">
 | 
				
			||||||
	<nav>
 | 
						<nav>
 | 
				
			||||||
		<div>
 | 
							<div>
 | 
				
			||||||
			<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
 | 
								<span :data-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
 | 
				
			||||||
			<span v-if="os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
 | 
								<span v-if="os.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
 | 
				
			||||||
		</div>
 | 
							</div>
 | 
				
			||||||
	</nav>
 | 
						</nav>
 | 
				
			||||||
	<div class="users" v-if="!fetching && users.length != 0">
 | 
						<div class="users" v-if="!fetching && users.length != 0">
 | 
				
			||||||
| 
						 | 
					@ -98,7 +98,7 @@ export default Vue.extend({
 | 
				
			||||||
				*
 | 
									*
 | 
				
			||||||
					pointer-events none
 | 
										pointer-events none
 | 
				
			||||||
 | 
					
 | 
				
			||||||
				&[data-is-active]
 | 
									&[data-active]
 | 
				
			||||||
					font-weight bold
 | 
										font-weight bold
 | 
				
			||||||
					color $theme-color
 | 
										color $theme-color
 | 
				
			||||||
					border-color $theme-color
 | 
										border-color $theme-color
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,9 +1,9 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
<div class="timeline">
 | 
					<div class="timeline">
 | 
				
			||||||
	<header>
 | 
						<header>
 | 
				
			||||||
		<span :data-is-active="mode == 'default'" @click="mode = 'default'">投稿</span>
 | 
							<span :data-active="mode == 'default'" @click="mode = 'default'">投稿</span>
 | 
				
			||||||
		<span :data-is-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
 | 
							<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
 | 
				
			||||||
		<span :data-is-active="mode == 'with-media'" @click="mode = 'with-media'">メディア</span>
 | 
							<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">メディア</span>
 | 
				
			||||||
	</header>
 | 
						</header>
 | 
				
			||||||
	<div class="loading" v-if="fetching">
 | 
						<div class="loading" v-if="fetching">
 | 
				
			||||||
		<mk-ellipsis-icon/>
 | 
							<mk-ellipsis-icon/>
 | 
				
			||||||
| 
						 | 
					@ -114,7 +114,7 @@ export default Vue.extend({
 | 
				
			||||||
			font-size 18px
 | 
								font-size 18px
 | 
				
			||||||
			color #555
 | 
								color #555
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			&:not([data-is-active])
 | 
								&:not([data-active])
 | 
				
			||||||
				color $theme-color
 | 
									color $theme-color
 | 
				
			||||||
				cursor pointer
 | 
									cursor pointer
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -19,6 +19,7 @@ import notificationPreview from './notification-preview.vue';
 | 
				
			||||||
import usersList from './users-list.vue';
 | 
					import usersList from './users-list.vue';
 | 
				
			||||||
import userPreview from './user-preview.vue';
 | 
					import userPreview from './user-preview.vue';
 | 
				
			||||||
import userTimeline from './user-timeline.vue';
 | 
					import userTimeline from './user-timeline.vue';
 | 
				
			||||||
 | 
					import userListTimeline from './user-list-timeline.vue';
 | 
				
			||||||
import activity from './activity.vue';
 | 
					import activity from './activity.vue';
 | 
				
			||||||
import widgetContainer from './widget-container.vue';
 | 
					import widgetContainer from './widget-container.vue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -41,5 +42,6 @@ Vue.component('mk-notification-preview', notificationPreview);
 | 
				
			||||||
Vue.component('mk-users-list', usersList);
 | 
					Vue.component('mk-users-list', usersList);
 | 
				
			||||||
Vue.component('mk-user-preview', userPreview);
 | 
					Vue.component('mk-user-preview', userPreview);
 | 
				
			||||||
Vue.component('mk-user-timeline', userTimeline);
 | 
					Vue.component('mk-user-timeline', userTimeline);
 | 
				
			||||||
 | 
					Vue.component('mk-user-list-timeline', userListTimeline);
 | 
				
			||||||
Vue.component('mk-activity', activity);
 | 
					Vue.component('mk-activity', activity);
 | 
				
			||||||
Vue.component('mk-widget-container', widgetContainer);
 | 
					Vue.component('mk-widget-container', widgetContainer);
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -36,6 +36,7 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script lang="ts">
 | 
					<script lang="ts">
 | 
				
			||||||
import Vue from 'vue';
 | 
					import Vue from 'vue';
 | 
				
			||||||
 | 
					import getNoteSummary from '../../../../../renderers/get-note-summary';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const displayLimit = 30;
 | 
					const displayLimit = 30;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -52,6 +53,7 @@ export default Vue.extend({
 | 
				
			||||||
			requestInitPromise: null as () => Promise<any[]>,
 | 
								requestInitPromise: null as () => Promise<any[]>,
 | 
				
			||||||
			notes: [],
 | 
								notes: [],
 | 
				
			||||||
			queue: [],
 | 
								queue: [],
 | 
				
			||||||
 | 
								unreadCount: 0,
 | 
				
			||||||
			fetching: true,
 | 
								fetching: true,
 | 
				
			||||||
			moreFetching: false
 | 
								moreFetching: false
 | 
				
			||||||
		};
 | 
							};
 | 
				
			||||||
| 
						 | 
					@ -70,10 +72,12 @@ export default Vue.extend({
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	mounted() {
 | 
						mounted() {
 | 
				
			||||||
 | 
							document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 | 
				
			||||||
		window.addEventListener('scroll', this.onScroll);
 | 
							window.addEventListener('scroll', this.onScroll);
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	beforeDestroy() {
 | 
						beforeDestroy() {
 | 
				
			||||||
 | 
							document.removeEventListener('visibilitychange', this.onVisibilitychange);
 | 
				
			||||||
		window.removeEventListener('scroll', this.onScroll);
 | 
							window.removeEventListener('scroll', this.onScroll);
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -125,6 +129,12 @@ export default Vue.extend({
 | 
				
			||||||
			}
 | 
								}
 | 
				
			||||||
			//#endregion
 | 
								//#endregion
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								// 投稿が自分のものではないかつ、タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
 | 
				
			||||||
 | 
								if ((document.hidden || !this.isScrollTop()) && note.userId !== (this as any).os.i.id) {
 | 
				
			||||||
 | 
									this.unreadCount++;
 | 
				
			||||||
 | 
									document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
 | 
				
			||||||
 | 
								}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			if (this.isScrollTop()) {
 | 
								if (this.isScrollTop()) {
 | 
				
			||||||
				// Prepend the note
 | 
									// Prepend the note
 | 
				
			||||||
				this.notes.unshift(note);
 | 
									this.notes.unshift(note);
 | 
				
			||||||
| 
						 | 
					@ -160,9 +170,21 @@ export default Vue.extend({
 | 
				
			||||||
			this.moreFetching = false;
 | 
								this.moreFetching = false;
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							clearNotification() {
 | 
				
			||||||
 | 
								this.unreadCount = 0;
 | 
				
			||||||
 | 
								document.title = 'Misskey';
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							onVisibilitychange() {
 | 
				
			||||||
 | 
								if (!document.hidden) {
 | 
				
			||||||
 | 
									this.clearNotification();
 | 
				
			||||||
 | 
								}
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		onScroll() {
 | 
							onScroll() {
 | 
				
			||||||
			if (this.isScrollTop()) {
 | 
								if (this.isScrollTop()) {
 | 
				
			||||||
				this.releaseQueue();
 | 
									this.releaseQueue();
 | 
				
			||||||
 | 
									this.clearNotification();
 | 
				
			||||||
			}
 | 
								}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
 | 
								if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -0,0 +1,93 @@
 | 
				
			||||||
 | 
					<template>
 | 
				
			||||||
 | 
					<div>
 | 
				
			||||||
 | 
						<mk-notes ref="timeline" :more="existMore ? more : null"/>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script lang="ts">
 | 
				
			||||||
 | 
					import Vue from 'vue';
 | 
				
			||||||
 | 
					import { UserListStream } from '../../../common/scripts/streaming/user-list';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const fetchLimit = 10;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default Vue.extend({
 | 
				
			||||||
 | 
						props: ['list'],
 | 
				
			||||||
 | 
						data() {
 | 
				
			||||||
 | 
							return {
 | 
				
			||||||
 | 
								fetching: true,
 | 
				
			||||||
 | 
								moreFetching: false,
 | 
				
			||||||
 | 
								existMore: false,
 | 
				
			||||||
 | 
								connection: null
 | 
				
			||||||
 | 
							};
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
 | 
						watch: {
 | 
				
			||||||
 | 
							$route: 'init'
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
 | 
						mounted() {
 | 
				
			||||||
 | 
							this.init();
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
 | 
						beforeDestroy() {
 | 
				
			||||||
 | 
							this.connection.close();
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
 | 
						methods: {
 | 
				
			||||||
 | 
							init() {
 | 
				
			||||||
 | 
								if (this.connection) this.connection.close();
 | 
				
			||||||
 | 
								this.connection = new UserListStream((this as any).os, (this as any).os.i, this.list.id);
 | 
				
			||||||
 | 
								this.connection.on('note', this.onNote);
 | 
				
			||||||
 | 
								this.connection.on('userAdded', this.onUserAdded);
 | 
				
			||||||
 | 
								this.connection.on('userRemoved', this.onUserRemoved);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								this.fetch();
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
							fetch() {
 | 
				
			||||||
 | 
								this.fetching = true;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
 | 
				
			||||||
 | 
									(this as any).api('notes/user-list-timeline', {
 | 
				
			||||||
 | 
										listId: this.list.id,
 | 
				
			||||||
 | 
										limit: fetchLimit + 1,
 | 
				
			||||||
 | 
										includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
 | 
				
			||||||
 | 
										includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
 | 
				
			||||||
 | 
									}).then(notes => {
 | 
				
			||||||
 | 
										if (notes.length == fetchLimit + 1) {
 | 
				
			||||||
 | 
											notes.pop();
 | 
				
			||||||
 | 
											this.existMore = true;
 | 
				
			||||||
 | 
										}
 | 
				
			||||||
 | 
										res(notes);
 | 
				
			||||||
 | 
										this.fetching = false;
 | 
				
			||||||
 | 
										this.$emit('loaded');
 | 
				
			||||||
 | 
									}, rej);
 | 
				
			||||||
 | 
								}));
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
							more() {
 | 
				
			||||||
 | 
								this.moreFetching = true;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								(this as any).api('notes/list-timeline', {
 | 
				
			||||||
 | 
									listId: this.list.id,
 | 
				
			||||||
 | 
									limit: fetchLimit + 1,
 | 
				
			||||||
 | 
									untilId: (this.$refs.timeline as any).tail().id,
 | 
				
			||||||
 | 
									includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
 | 
				
			||||||
 | 
									includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
 | 
				
			||||||
 | 
								}).then(notes => {
 | 
				
			||||||
 | 
									if (notes.length == fetchLimit + 1) {
 | 
				
			||||||
 | 
										notes.pop();
 | 
				
			||||||
 | 
									} else {
 | 
				
			||||||
 | 
										this.existMore = false;
 | 
				
			||||||
 | 
									}
 | 
				
			||||||
 | 
									notes.forEach(n => (this.$refs.timeline as any).append(n));
 | 
				
			||||||
 | 
									this.moreFetching = false;
 | 
				
			||||||
 | 
								});
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
							onNote(note) {
 | 
				
			||||||
 | 
								// Prepend a note
 | 
				
			||||||
 | 
								(this.$refs.timeline as any).prepend(note);
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
							onUserAdded() {
 | 
				
			||||||
 | 
								this.fetch();
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
							onUserRemoved() {
 | 
				
			||||||
 | 
								this.fetch();
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
| 
						 | 
					@ -1,8 +1,8 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
<div class="mk-users-list">
 | 
					<div class="mk-users-list">
 | 
				
			||||||
	<nav>
 | 
						<nav>
 | 
				
			||||||
		<span :data-is-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%<span>{{ count }}</span></span>
 | 
							<span :data-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%<span>{{ count }}</span></span>
 | 
				
			||||||
		<span v-if="os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:@known%<span>{{ youKnowCount }}</span></span>
 | 
							<span v-if="os.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:@known%<span>{{ youKnowCount }}</span></span>
 | 
				
			||||||
	</nav>
 | 
						</nav>
 | 
				
			||||||
	<div class="users" v-if="!fetching && users.length != 0">
 | 
						<div class="users" v-if="!fetching && users.length != 0">
 | 
				
			||||||
		<mk-user-preview v-for="u in users" :user="u" :key="u.id"/>
 | 
							<mk-user-preview v-for="u in users" :user="u" :key="u.id"/>
 | 
				
			||||||
| 
						 | 
					@ -85,7 +85,7 @@ export default Vue.extend({
 | 
				
			||||||
			color #657786
 | 
								color #657786
 | 
				
			||||||
			border-bottom solid 2px transparent
 | 
								border-bottom solid 2px transparent
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			&[data-is-active]
 | 
								&[data-active]
 | 
				
			||||||
				font-weight bold
 | 
									font-weight bold
 | 
				
			||||||
				color $theme-color
 | 
									color $theme-color
 | 
				
			||||||
				border-color $theme-color
 | 
									border-color $theme-color
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -13,7 +13,6 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script lang="ts">
 | 
					<script lang="ts">
 | 
				
			||||||
import Vue from 'vue';
 | 
					import Vue from 'vue';
 | 
				
			||||||
import getNoteSummary from '../../../../../renderers/get-note-summary';
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
const fetchLimit = 10;
 | 
					const fetchLimit = 10;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -73,8 +72,6 @@ export default Vue.extend({
 | 
				
			||||||
			this.connection.on('unfollow', this.onChangeFollowing);
 | 
								this.connection.on('unfollow', this.onChangeFollowing);
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
		this.fetch();
 | 
							this.fetch();
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -85,8 +82,6 @@ export default Vue.extend({
 | 
				
			||||||
			this.connection.off('unfollow', this.onChangeFollowing);
 | 
								this.connection.off('unfollow', this.onChangeFollowing);
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
		this.stream.dispose(this.connectionId);
 | 
							this.stream.dispose(this.connectionId);
 | 
				
			||||||
 | 
					 | 
				
			||||||
		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 | 
					 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	methods: {
 | 
						methods: {
 | 
				
			||||||
| 
						 | 
					@ -133,11 +128,6 @@ export default Vue.extend({
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		onNote(note) {
 | 
							onNote(note) {
 | 
				
			||||||
			if (document.hidden && note.userId !== (this as any).os.i.id) {
 | 
					 | 
				
			||||||
				this.unreadCount++;
 | 
					 | 
				
			||||||
				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
 | 
					 | 
				
			||||||
			}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
			// Prepend a note
 | 
								// Prepend a note
 | 
				
			||||||
			(this.$refs.timeline as any).prepend(note);
 | 
								(this.$refs.timeline as any).prepend(note);
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
| 
						 | 
					@ -153,13 +143,6 @@ export default Vue.extend({
 | 
				
			||||||
		warp(date) {
 | 
							warp(date) {
 | 
				
			||||||
			this.date = date;
 | 
								this.date = date;
 | 
				
			||||||
			this.fetch();
 | 
								this.fetch();
 | 
				
			||||||
		},
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
		onVisibilitychange() {
 | 
					 | 
				
			||||||
			if (!document.hidden) {
 | 
					 | 
				
			||||||
				this.unreadCount = 0;
 | 
					 | 
				
			||||||
				document.title = 'Misskey';
 | 
					 | 
				
			||||||
			}
 | 
					 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -5,7 +5,7 @@
 | 
				
			||||||
			<span v-if="src == 'home'">%fa:home%ホーム</span>
 | 
								<span v-if="src == 'home'">%fa:home%ホーム</span>
 | 
				
			||||||
			<span v-if="src == 'local'">%fa:R comments%ローカル</span>
 | 
								<span v-if="src == 'local'">%fa:R comments%ローカル</span>
 | 
				
			||||||
			<span v-if="src == 'global'">%fa:globe%グローバル</span>
 | 
								<span v-if="src == 'global'">%fa:globe%グローバル</span>
 | 
				
			||||||
			<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
 | 
								<span v-if="src.startsWith('list')">%fa:list%{{ list.title }}</span>
 | 
				
			||||||
		</span>
 | 
							</span>
 | 
				
			||||||
		<span style="margin-left:8px">
 | 
							<span style="margin-left:8px">
 | 
				
			||||||
			<template v-if="!showNav">%fa:angle-down%</template>
 | 
								<template v-if="!showNav">%fa:angle-down%</template>
 | 
				
			||||||
| 
						 | 
					@ -21,9 +21,14 @@
 | 
				
			||||||
		<div class="nav" v-if="showNav">
 | 
							<div class="nav" v-if="showNav">
 | 
				
			||||||
			<div class="bg" @click="showNav = false"></div>
 | 
								<div class="bg" @click="showNav = false"></div>
 | 
				
			||||||
			<div class="body">
 | 
								<div class="body">
 | 
				
			||||||
				<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
 | 
									<div>
 | 
				
			||||||
				<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
 | 
										<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
 | 
				
			||||||
				<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
 | 
										<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
 | 
				
			||||||
 | 
										<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
 | 
				
			||||||
 | 
										<template v-if="lists">
 | 
				
			||||||
 | 
											<span v-for="l in lists" :data-active="src == 'list:' + l.id" @click="src = 'list:' + l.id; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
 | 
				
			||||||
 | 
										</template>
 | 
				
			||||||
 | 
									</div>
 | 
				
			||||||
			</div>
 | 
								</div>
 | 
				
			||||||
		</div>
 | 
							</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -31,7 +36,7 @@
 | 
				
			||||||
			<x-tl v-if="src == 'home'" ref="tl" key="home" src="home" @loaded="onLoaded"/>
 | 
								<x-tl v-if="src == 'home'" ref="tl" key="home" src="home" @loaded="onLoaded"/>
 | 
				
			||||||
			<x-tl v-if="src == 'local'" ref="tl" key="local" src="local"/>
 | 
								<x-tl v-if="src == 'local'" ref="tl" key="local" src="local"/>
 | 
				
			||||||
			<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
 | 
								<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
 | 
				
			||||||
			<mk-user-list-timeline v-if="src == 'list'" ref="tl" key="list" :list="list"/>
 | 
								<mk-user-list-timeline v-if="src.startsWith('list:')" ref="tl" key="list" :list="list"/>
 | 
				
			||||||
		</div>
 | 
							</div>
 | 
				
			||||||
	</main>
 | 
						</main>
 | 
				
			||||||
</mk-ui>
 | 
					</mk-ui>
 | 
				
			||||||
| 
						 | 
					@ -51,10 +56,25 @@ export default Vue.extend({
 | 
				
			||||||
		return {
 | 
							return {
 | 
				
			||||||
			src: 'home',
 | 
								src: 'home',
 | 
				
			||||||
			list: null,
 | 
								list: null,
 | 
				
			||||||
 | 
								lists: null,
 | 
				
			||||||
			showNav: false
 | 
								showNav: false
 | 
				
			||||||
		};
 | 
							};
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						watch: {
 | 
				
			||||||
 | 
							src() {
 | 
				
			||||||
 | 
								this.showNav = false;
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							showNav(v) {
 | 
				
			||||||
 | 
								if (v && this.lists === null) {
 | 
				
			||||||
 | 
									(this as any).api('users/lists/list').then(lists => {
 | 
				
			||||||
 | 
										this.lists = lists;
 | 
				
			||||||
 | 
									});
 | 
				
			||||||
 | 
								}
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	mounted() {
 | 
						mounted() {
 | 
				
			||||||
		document.title = 'Misskey';
 | 
							document.title = 'Misskey';
 | 
				
			||||||
		document.documentElement.style.background = '#313a42';
 | 
							document.documentElement.style.background = '#313a42';
 | 
				
			||||||
| 
						 | 
					@ -79,6 +99,8 @@ export default Vue.extend({
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<style lang="stylus" scoped>
 | 
					<style lang="stylus" scoped>
 | 
				
			||||||
 | 
					@import '~const.styl'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
main
 | 
					main
 | 
				
			||||||
	> .nav
 | 
						> .nav
 | 
				
			||||||
		> .bg
 | 
							> .bg
 | 
				
			||||||
| 
						 | 
					@ -93,10 +115,52 @@ main
 | 
				
			||||||
		> .body
 | 
							> .body
 | 
				
			||||||
			position fixed
 | 
								position fixed
 | 
				
			||||||
			z-index 10001
 | 
								z-index 10001
 | 
				
			||||||
			top 48px
 | 
								top 56px
 | 
				
			||||||
			left 0
 | 
								left 0
 | 
				
			||||||
 | 
								right 0
 | 
				
			||||||
 | 
								width 300px
 | 
				
			||||||
 | 
								margin 0 auto
 | 
				
			||||||
			background #fff
 | 
								background #fff
 | 
				
			||||||
			border-radius 8px
 | 
								border-radius 8px
 | 
				
			||||||
 | 
								box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								$balloon-size = 16px
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								&:before
 | 
				
			||||||
 | 
									content ""
 | 
				
			||||||
 | 
									display block
 | 
				
			||||||
 | 
									position absolute
 | 
				
			||||||
 | 
									top -($balloon-size * 2)
 | 
				
			||||||
 | 
									left s('calc(50% - %s)', $balloon-size)
 | 
				
			||||||
 | 
									border-top solid $balloon-size transparent
 | 
				
			||||||
 | 
									border-left solid $balloon-size transparent
 | 
				
			||||||
 | 
									border-right solid $balloon-size transparent
 | 
				
			||||||
 | 
									border-bottom solid $balloon-size $border-color
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								&:after
 | 
				
			||||||
 | 
									content ""
 | 
				
			||||||
 | 
									display block
 | 
				
			||||||
 | 
									position absolute
 | 
				
			||||||
 | 
									top -($balloon-size * 2) + 1.5px
 | 
				
			||||||
 | 
									left s('calc(50% - %s)', $balloon-size)
 | 
				
			||||||
 | 
									border-top solid $balloon-size transparent
 | 
				
			||||||
 | 
									border-left solid $balloon-size transparent
 | 
				
			||||||
 | 
									border-right solid $balloon-size transparent
 | 
				
			||||||
 | 
									border-bottom solid $balloon-size #fff
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								> div
 | 
				
			||||||
 | 
									padding 8px 0
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
									> *
 | 
				
			||||||
 | 
										display block
 | 
				
			||||||
 | 
										padding 8px 16px
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
										&[data-active]
 | 
				
			||||||
 | 
											color $theme-color-foreground
 | 
				
			||||||
 | 
											background $theme-color
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
										&:not([data-active]):hover
 | 
				
			||||||
 | 
											background #eee
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	> .tl
 | 
						> .tl
 | 
				
			||||||
		max-width 600px
 | 
							max-width 600px
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -45,9 +45,9 @@
 | 
				
			||||||
		</header>
 | 
							</header>
 | 
				
			||||||
		<nav>
 | 
							<nav>
 | 
				
			||||||
			<div class="nav-container">
 | 
								<div class="nav-container">
 | 
				
			||||||
				<a :data-is-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a>
 | 
									<a :data-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a>
 | 
				
			||||||
				<a :data-is-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a>
 | 
									<a :data-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a>
 | 
				
			||||||
				<a :data-is-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a>
 | 
									<a :data-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a>
 | 
				
			||||||
			</div>
 | 
								</div>
 | 
				
			||||||
		</nav>
 | 
							</nav>
 | 
				
			||||||
		<div class="body">
 | 
							<div class="body">
 | 
				
			||||||
| 
						 | 
					@ -256,7 +256,7 @@ main
 | 
				
			||||||
				color #657786
 | 
									color #657786
 | 
				
			||||||
				border-bottom solid 2px transparent
 | 
									border-bottom solid 2px transparent
 | 
				
			||||||
 | 
					
 | 
				
			||||||
				&[data-is-active]
 | 
									&[data-active]
 | 
				
			||||||
					font-weight bold
 | 
										font-weight bold
 | 
				
			||||||
					color $theme-color
 | 
										color $theme-color
 | 
				
			||||||
					border-color $theme-color
 | 
										border-color $theme-color
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue