wip
This commit is contained in:
parent
6ab0c386cb
commit
03d09e9d24
|
@ -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…
Reference in New Issue