wip

src/web/app/desktop/-tags/settings-window.tag

@@ -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>

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);

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>

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 => {

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();

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);
 		}
 	}
 });

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>

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">