1
0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-03 10:16:10 +02:00
This commit is contained in:
syuilo
2018-04-26 14:38:37 +09:00
parent 6ab0c386cb
commit 03d09e9d24
13 changed files with 233 additions and 47 deletions

View File

@@ -13,7 +13,6 @@
<script lang="ts">
import Vue from 'vue';
import getNoteSummary from '../../../../../renderers/get-note-summary';
const fetchLimit = 10;
@@ -73,8 +72,6 @@ export default Vue.extend({
this.connection.on('unfollow', this.onChangeFollowing);
}
document.addEventListener('visibilitychange', this.onVisibilitychange, false);
this.fetch();
},
@@ -85,8 +82,6 @@ export default Vue.extend({
this.connection.off('unfollow', this.onChangeFollowing);
}
this.stream.dispose(this.connectionId);
document.removeEventListener('visibilitychange', this.onVisibilitychange);
},
methods: {
@@ -133,11 +128,6 @@ export default Vue.extend({
},
onNote(note) {
if (document.hidden && note.userId !== (this as any).os.i.id) {
this.unreadCount++;
document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
}
// Prepend a note
(this.$refs.timeline as any).prepend(note);
},
@@ -153,13 +143,6 @@ export default Vue.extend({
warp(date) {
this.date = date;
this.fetch();
},
onVisibilitychange() {
if (!document.hidden) {
this.unreadCount = 0;
document.title = 'Misskey';
}
}
}
});

View File

@@ -5,7 +5,7 @@
<span v-if="src == 'home'">%fa:home%ホーム</span>
<span v-if="src == 'local'">%fa:R comments%ローカル</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 style="margin-left:8px">
<template v-if="!showNav">%fa:angle-down%</template>
@@ -21,9 +21,14 @@
<div class="nav" v-if="showNav">
<div class="bg" @click="showNav = false"></div>
<div class="body">
<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>
<div>
<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>
<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>
@@ -31,7 +36,7 @@
<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 == '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>
</main>
</mk-ui>
@@ -51,10 +56,25 @@ export default Vue.extend({
return {
src: 'home',
list: null,
lists: null,
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() {
document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
@@ -79,6 +99,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
main
> .nav
> .bg
@@ -93,10 +115,52 @@ main
> .body
position fixed
z-index 10001
top 48px
top 56px
left 0
right 0
width 300px
margin 0 auto
background #fff
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
max-width 600px

View File

@@ -45,9 +45,9 @@
</header>
<nav>
<div class="nav-container">
<a :data-is-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a>
<a :data-is-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 == 'home'" @click="page = 'home'">%i18n:@overview%</a>
<a :data-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a>
<a :data-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a>
</div>
</nav>
<div class="body">
@@ -256,7 +256,7 @@ main
color #657786
border-bottom solid 2px transparent
&[data-is-active]
&[data-active]
font-weight bold
color $theme-color
border-color $theme-color