wip
This commit is contained in:
parent
6ab0c386cb
commit
03d09e9d24
13 changed files with 233 additions and 47 deletions
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="mk-mentions">
|
||||
<header>
|
||||
<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて</span>
|
||||
<span :data-is-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
|
||||
<span :data-active="mode == 'all'" @click="mode = 'all'">すべて</span>
|
||||
<span :data-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
|
||||
</header>
|
||||
<div class="fetching" v-if="fetching">
|
||||
<mk-ellipsis-icon/>
|
||||
|
|
@ -98,7 +98,7 @@ export default Vue.extend({
|
|||
font-size 18px
|
||||
color #555
|
||||
|
||||
&:not([data-is-active])
|
||||
&:not([data-active])
|
||||
color $theme-color
|
||||
cursor pointer
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { url } from '../../../config';
|
||||
import getNoteSummary from '../../../../../renderers/get-note-summary';
|
||||
|
||||
import XNote from './notes.note.vue';
|
||||
|
||||
|
|
@ -53,6 +54,7 @@ export default Vue.extend({
|
|||
requestInitPromise: null as () => Promise<any[]>,
|
||||
notes: [],
|
||||
queue: [],
|
||||
unreadCount: 0,
|
||||
fetching: true,
|
||||
moreFetching: false
|
||||
};
|
||||
|
|
@ -71,10 +73,12 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
mounted() {
|
||||
document.addEventListener('visibilitychange', this.onVisibilitychange, false);
|
||||
window.addEventListener('scroll', this.onScroll);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('visibilitychange', this.onVisibilitychange);
|
||||
window.removeEventListener('scroll', this.onScroll);
|
||||
},
|
||||
|
||||
|
|
@ -130,6 +134,12 @@ export default Vue.extend({
|
|||
}
|
||||
//#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()) {
|
||||
// Prepend the note
|
||||
this.notes.unshift(note);
|
||||
|
|
@ -172,9 +182,21 @@ export default Vue.extend({
|
|||
this.moreFetching = false;
|
||||
},
|
||||
|
||||
clearNotification() {
|
||||
this.unreadCount = 0;
|
||||
document.title = 'Misskey';
|
||||
},
|
||||
|
||||
onVisibilitychange() {
|
||||
if (!document.hidden) {
|
||||
this.clearNotification();
|
||||
}
|
||||
},
|
||||
|
||||
onScroll() {
|
||||
if (this.isScrollTop()) {
|
||||
this.releaseQueue();
|
||||
this.clearNotification();
|
||||
}
|
||||
|
||||
if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="mk-timeline">
|
||||
<header>
|
||||
<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
|
||||
<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
|
||||
<span :data-is-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 == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
|
||||
<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
|
||||
<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
|
||||
<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
|
||||
<button @click="chooseList" title="リスト">%fa:list%</button>
|
||||
</header>
|
||||
<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
|
||||
|
|
@ -93,7 +93,7 @@ root(isDark)
|
|||
font-size 12px
|
||||
user-select none
|
||||
|
||||
&[data-is-active]
|
||||
&[data-active]
|
||||
color $theme-color
|
||||
cursor default
|
||||
font-weight bold
|
||||
|
|
@ -108,7 +108,7 @@ root(isDark)
|
|||
height 2px
|
||||
background $theme-color
|
||||
|
||||
&:not([data-is-active])
|
||||
&:not([data-active])
|
||||
color isDark ? #9aa2a7 : #6f7477
|
||||
cursor pointer
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export default Vue.extend({
|
|||
},
|
||||
onUserRemoved() {
|
||||
this.fetch();
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<div class="mk-users-list">
|
||||
<nav>
|
||||
<div>
|
||||
<span :data-is-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 :data-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
|
||||
<span v-if="os.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="users" v-if="!fetching && users.length != 0">
|
||||
|
|
@ -98,7 +98,7 @@ export default Vue.extend({
|
|||
*
|
||||
pointer-events none
|
||||
|
||||
&[data-is-active]
|
||||
&[data-active]
|
||||
font-weight bold
|
||||
color $theme-color
|
||||
border-color $theme-color
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="timeline">
|
||||
<header>
|
||||
<span :data-is-active="mode == 'default'" @click="mode = 'default'">投稿</span>
|
||||
<span :data-is-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 == 'default'" @click="mode = 'default'">投稿</span>
|
||||
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
|
||||
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">メディア</span>
|
||||
</header>
|
||||
<div class="loading" v-if="fetching">
|
||||
<mk-ellipsis-icon/>
|
||||
|
|
@ -114,7 +114,7 @@ export default Vue.extend({
|
|||
font-size 18px
|
||||
color #555
|
||||
|
||||
&:not([data-is-active])
|
||||
&:not([data-active])
|
||||
color $theme-color
|
||||
cursor pointer
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue