From 01588085017ea780a1e71f7309b525cb449a65f2 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Tue, 13 Feb 2018 08:24:44 +0900 Subject: [PATCH] wip --- src/web/app/desktop/-tags/settings-window.tag | 30 ------------------- src/web/app/desktop/views/components/index.ts | 22 ++++++++++++-- .../views/components/settings-window.vue | 15 ++++++++++ .../app/desktop/views/components/timeline.vue | 7 ++++- .../views/components/ui-header-account.vue | 4 ++- .../views/components/ui-header-nav.vue | 3 +- .../views/components/ui-header-search.vue | 2 +- .../views/components/ui-notification.vue | 2 +- 8 files changed, 48 insertions(+), 37 deletions(-) delete mode 100644 src/web/app/desktop/-tags/settings-window.tag create mode 100644 src/web/app/desktop/views/components/settings-window.vue diff --git a/src/web/app/desktop/-tags/settings-window.tag b/src/web/app/desktop/-tags/settings-window.tag deleted file mode 100644 index 094225f61f..0000000000 --- a/src/web/app/desktop/-tags/settings-window.tag +++ /dev/null @@ -1,30 +0,0 @@ -<mk-settings-window> - <mk-window ref="window" is-modal={ true } width={ '700px' } height={ '550px' }> - <yield to="header">%fa:cog%設定</yield> - <yield to="content"> - <mk-settings/> - </yield> - </mk-window> - <style lang="stylus" scoped> - :scope - > mk-window - [data-yield='header'] - > [data-fa] - margin-right 4px - - [data-yield='content'] - overflow hidden - - </style> - <script lang="typescript"> - this.on('mount', () => { - this.$refs.window.on('closed', () => { - this.$destroy(); - }); - }); - - this.close = () => { - this.$refs.window.close(); - }; - </script> -</mk-settings-window> diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts index 9788a27f1a..71a049a62c 100644 --- a/src/web/app/desktop/views/components/index.ts +++ b/src/web/app/desktop/views/components/index.ts @@ -1,6 +1,14 @@ import Vue from 'vue'; import ui from './ui.vue'; +import uiHeader from './ui-header.vue'; +import uiHeaderAccount from './ui-header-account.vue'; +import uiHeaderClock from './ui-header-clock.vue'; +import uiHeaderNav from './ui-header-nav.vue'; +import uiHeaderNotifications from './ui-header-notifications.vue'; +import uiHeaderPostButton from './ui-header-post-button.vue'; +import uiHeaderSearch from './ui-header-search.vue'; +import uiNotification from './ui-notification.vue'; import home from './home.vue'; import timeline from './timeline.vue'; import timelinePost from './timeline-post.vue'; @@ -9,13 +17,23 @@ import subPostContent from './sub-post-content.vue'; import window from './window.vue'; import postFormWindow from './post-form-window.vue'; import repostFormWindow from './repost-form-window.vue'; +import analogClock from './analog-clock.vue'; Vue.component('mk-ui', ui); +Vue.component('mk-ui-header', uiHeader); +Vue.component('mk-ui-header-account', uiHeaderAccount); +Vue.component('mk-ui-header-clock', uiHeaderClock); +Vue.component('mk-ui-header-nav', uiHeaderNav); +Vue.component('mk-ui-header-notifications', uiHeaderNotifications); +Vue.component('mk-ui-header-post-button', uiHeaderPostButton); +Vue.component('mk-ui-header-search', uiHeaderSearch); +Vue.component('mk-ui-notification', uiNotification); Vue.component('mk-home', home); Vue.component('mk-timeline', timeline); Vue.component('mk-timeline-post', timelinePost); Vue.component('mk-timeline-post-sub', timelinePostSub); Vue.component('mk-sub-post-content', subPostContent); Vue.component('mk-window', window); -Vue.component('post-form-window', postFormWindow); -Vue.component('repost-form-window', repostFormWindow); +Vue.component('mk-post-form-window', postFormWindow); +Vue.component('mk-repost-form-window', repostFormWindow); +Vue.component('mk-analog-clock', analogClock); diff --git a/src/web/app/desktop/views/components/settings-window.vue b/src/web/app/desktop/views/components/settings-window.vue new file mode 100644 index 0000000000..56d839851f --- /dev/null +++ b/src/web/app/desktop/views/components/settings-window.vue @@ -0,0 +1,15 @@ +<template> +<mk-window ref="window" is-modal width='700px' height='550px' @closed="$destroy"> + <span slot="header" :class="$style.header">%fa:cog%設定</span> + <div to="content"> + <mk-settings/> + </div> +</mk-window> +</template> + +<style lang="stylus" module> +.header + > [data-fa] + margin-right 4px + +</style> diff --git a/src/web/app/desktop/views/components/timeline.vue b/src/web/app/desktop/views/components/timeline.vue index 161eebdf72..933e44825a 100644 --- a/src/web/app/desktop/views/components/timeline.vue +++ b/src/web/app/desktop/views/components/timeline.vue @@ -14,7 +14,12 @@ import Vue from 'vue'; export default Vue.extend({ - props: ['posts'], + props: { + posts: { + type: Array, + default: [] + } + }, computed: { _posts(): any { return this.posts.map(post => { diff --git a/src/web/app/desktop/views/components/ui-header-account.vue b/src/web/app/desktop/views/components/ui-header-account.vue index 435a0dcaf2..8dbd9e5e34 100644 --- a/src/web/app/desktop/views/components/ui-header-account.vue +++ b/src/web/app/desktop/views/components/ui-header-account.vue @@ -32,6 +32,7 @@ <script lang="ts"> import Vue from 'vue'; +import MkSettingsWindow from './settings-window.vue'; import contains from '../../../common/scripts/contains'; import signout from '../../../common/scripts/signout'; @@ -68,7 +69,8 @@ export default Vue.extend({ }, drive() { this.close(); - document.body.appendChild(new MkDriveWindow().$mount().$el); + // TODO + //document.body.appendChild(new MkDriveWindow().$mount().$el); }, settings() { this.close(); diff --git a/src/web/app/desktop/views/components/ui-header-nav.vue b/src/web/app/desktop/views/components/ui-header-nav.vue index 5295787b9f..d0092ebd20 100644 --- a/src/web/app/desktop/views/components/ui-header-nav.vue +++ b/src/web/app/desktop/views/components/ui-header-nav.vue @@ -76,7 +76,8 @@ export default Vue.extend({ }, messaging() { - document.body.appendChild(new MkMessagingWindow().$mount().$el); + // TODO + //document.body.appendChild(new MkMessagingWindow().$mount().$el); } } }); diff --git a/src/web/app/desktop/views/components/ui-header-search.vue b/src/web/app/desktop/views/components/ui-header-search.vue index a9cddd8aed..84ca9848cc 100644 --- a/src/web/app/desktop/views/components/ui-header-search.vue +++ b/src/web/app/desktop/views/components/ui-header-search.vue @@ -1,5 +1,5 @@ <template> -<form class="ui-header-search" @submit.prevent="onSubmit"> +<form class="mk-ui-header-search" @submit.prevent="onSubmit"> %fa:search% <input v-model="q" type="search" placeholder="%i18n:desktop.tags.mk-ui-header-search.placeholder%"/> <div class="result"></div> diff --git a/src/web/app/desktop/views/components/ui-notification.vue b/src/web/app/desktop/views/components/ui-notification.vue index f240037d0b..6ca0cebfad 100644 --- a/src/web/app/desktop/views/components/ui-notification.vue +++ b/src/web/app/desktop/views/components/ui-notification.vue @@ -1,7 +1,7 @@ <template> <div class="mk-ui-notification"> <p>{{ message }}</p> -<div> +</div> </template> <script lang="ts">