From 43d9d81b538558312ddf447b071d0f871e3f5920 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Thu, 15 Feb 2018 17:50:19 +0900 Subject: [PATCH] wip --- src/web/app/desktop/views/pages/home.vue | 6 +- src/web/app/mobile/tags/page/home.tag | 62 ------------------- .../app/mobile/views/components/ui-header.vue | 11 ++-- src/web/app/mobile/views/components/ui.vue | 5 +- src/web/app/mobile/views/pages/home.vue | 60 ++++++++++++++++++ 5 files changed, 72 insertions(+), 72 deletions(-) delete mode 100644 src/web/app/mobile/tags/page/home.tag create mode 100644 src/web/app/mobile/views/pages/home.vue diff --git a/src/web/app/desktop/views/pages/home.vue b/src/web/app/desktop/views/pages/home.vue index ff20291d5a..2dd7f47a46 100644 --- a/src/web/app/desktop/views/pages/home.vue +++ b/src/web/app/desktop/views/pages/home.vue @@ -1,7 +1,7 @@ <template> - <mk-ui> - <mk-home ref="home" :mode="mode"/> - </mk-ui> +<mk-ui> + <mk-home :mode="mode"/> +</mk-ui> </template> <script lang="ts"> diff --git a/src/web/app/mobile/tags/page/home.tag b/src/web/app/mobile/tags/page/home.tag deleted file mode 100644 index 10af292f39..0000000000 --- a/src/web/app/mobile/tags/page/home.tag +++ /dev/null @@ -1,62 +0,0 @@ -<mk-home-page> - <mk-ui ref="ui"> - <mk-home ref="home"/> - </mk-ui> - <style lang="stylus" scoped> - :scope - display block - </style> - <script lang="typescript"> - import ui from '../../scripts/ui-event'; - import Progress from '../../../common/scripts/loading'; - import getPostSummary from '../../../../../common/get-post-summary.ts'; - import openPostForm from '../../scripts/open-post-form'; - - this.mixin('i'); - - this.mixin('stream'); - this.connection = this.stream.getConnection(); - this.connectionId = this.stream.use(); - - this.unreadCount = 0; - - this.on('mount', () => { - document.title = 'Misskey' - ui.trigger('title', '%fa:home%%i18n:mobile.tags.mk-home.home%'); - document.documentElement.style.background = '#313a42'; - - ui.trigger('func', () => { - openPostForm(); - }, '%fa:pencil-alt%'); - - Progress.start(); - - this.connection.on('post', this.onStreamPost); - document.addEventListener('visibilitychange', this.onVisibilitychange, false); - - this.$refs.ui.refs.home.on('loaded', () => { - Progress.done(); - }); - }); - - this.on('unmount', () => { - this.connection.off('post', this.onStreamPost); - this.stream.dispose(this.connectionId); - document.removeEventListener('visibilitychange', this.onVisibilitychange); - }); - - this.onStreamPost = post => { - if (document.hidden && post.user_id !== this.$root.$data.os.i.id) { - this.unreadCount++; - document.title = `(${this.unreadCount}) ${getPostSummary(post)}`; - } - }; - - this.onVisibilitychange = () => { - if (!document.hidden) { - this.unreadCount = 0; - document.title = 'Misskey'; - } - }; - </script> -</mk-home-page> diff --git a/src/web/app/mobile/views/components/ui-header.vue b/src/web/app/mobile/views/components/ui-header.vue index 176751a663..3bb1054c86 100644 --- a/src/web/app/mobile/views/components/ui-header.vue +++ b/src/web/app/mobile/views/components/ui-header.vue @@ -6,8 +6,10 @@ <div class="content"> <button class="nav" @click="parent.toggleDrawer">%fa:bars%</button> <template v-if="hasUnreadNotifications || hasUnreadMessagingMessages">%fa:circle%</template> - <h1 ref="title">Misskey</h1> - <button v-if="func" @click="func"><mk-raw content={ funcIcon }/></button> + <h1> + <slot>Misskey</slot> + </h1> + <button v-if="func" @click="func" v-html="funcIcon"></button> </div> </div> </div> @@ -17,6 +19,7 @@ import Vue from 'vue'; export default Vue.extend({ + props: ['func', 'funcIcon'], data() { return { func: null, @@ -62,10 +65,6 @@ export default Vue.extend({ } }, methods: { - setFunc(fn, icon) { - this.func = fn; - this.funcIcon = icon; - }, onReadAllNotifications() { this.hasUnreadNotifications = false; }, diff --git a/src/web/app/mobile/views/components/ui.vue b/src/web/app/mobile/views/components/ui.vue index aa5e2457c0..52443430a3 100644 --- a/src/web/app/mobile/views/components/ui.vue +++ b/src/web/app/mobile/views/components/ui.vue @@ -1,6 +1,8 @@ <template> <div class="mk-ui"> - <mk-ui-header/> + <mk-ui-header :func="func" :func-icon="funcIcon"> + <slot name="header"></slot> + </mk-ui-header> <mk-ui-nav :is-open="isDrawerOpening"/> <div class="content"> <slot></slot> @@ -12,6 +14,7 @@ <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ + props: ['title', 'func', 'funcIcon'], data() { return { isDrawerOpening: false, diff --git a/src/web/app/mobile/views/pages/home.vue b/src/web/app/mobile/views/pages/home.vue new file mode 100644 index 0000000000..3b069c6143 --- /dev/null +++ b/src/web/app/mobile/views/pages/home.vue @@ -0,0 +1,60 @@ +<template> +<mk-ui :func="fn" func-icon="%fa:pencil-alt%"> + <span slot="header">%fa:home%%i18n:mobile.tags.mk-home.home%</span> + <mk-home @loaded="onHomeLoaded"/> +</mk-ui> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import Progress from '../../../common/scripts/loading'; +import getPostSummary from '../../../../../common/get-post-summary'; +import openPostForm from '../../scripts/open-post-form'; + +export default Vue.extend({ + data() { + return { + connection: null, + connectionId: null, + unreadCount: 0 + }; + }, + mounted() { + document.title = 'Misskey'; + document.documentElement.style.background = '#313a42'; + + this.connection = this.$root.$data.os.stream.getConnection(); + this.connectionId = this.$root.$data.os.stream.use(); + + this.connection.on('post', this.onStreamPost); + document.addEventListener('visibilitychange', this.onVisibilitychange, false); + + Progress.start(); + }, + beforeDestroy() { + this.connection.off('post', this.onStreamPost); + this.$root.$data.os.stream.dispose(this.connectionId); + document.removeEventListener('visibilitychange', this.onVisibilitychange); + }, + methods: { + fn() { + openPostForm(); + }, + onHomeLoaded() { + Progress.done(); + }, + onStreamPost(post) { + if (document.hidden && post.user_id !== this.$root.$data.os.i.id) { + this.unreadCount++; + document.title = `(${this.unreadCount}) ${getPostSummary(post)}`; + } + }, + onVisibilitychange() { + if (!document.hidden) { + this.unreadCount = 0; + document.title = 'Misskey'; + } + } + } +}); +</script>