wip

src/web/app/common/views/directives/focus.ts

@@ -0,0 +1,5 @@
+export default {
+	inserted(el) {
+		el.focus();
+	}
+};

src/web/app/common/views/directives/index.ts

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+import focus from './focus';
+
+Vue.directive('focus', focus);

src/web/app/desktop/-tags/post-form-window.tag

@@ -1,68 +0,0 @@
-<mk-post-form-window>
-	<mk-window ref="window" is-modal={ true }>
-		<yield to="header">
-			<span v-if="!parent.opts.reply">%i18n:desktop.tags.mk-post-form-window.post%</span>
-			<span v-if="parent.opts.reply">%i18n:desktop.tags.mk-post-form-window.reply%</span>
-			<span class="files" v-if="parent.files.length != 0">{ '%i18n:desktop.tags.mk-post-form-window.attaches%'.replace('{}', parent.files.length) }</span>
-			<span class="uploading-files" v-if="parent.uploadingFiles.length != 0">{ '%i18n:desktop.tags.mk-post-form-window.uploading-media%'.replace('{}', parent.uploadingFiles.length) }<mk-ellipsis/></span>
-		</yield>
-		<yield to="content">
-			<div class="ref" v-if="parent.opts.reply">
-				<mk-post-preview post={ parent.opts.reply }/>
-			</div>
-			<div class="body">
-				<mk-post-form ref="form" reply={ parent.opts.reply }/>
-			</div>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-
-				[data-yield='header']
-					> .files
-					> .uploading-files
-						margin-left 8px
-						opacity 0.8
-
-						&:before
-							content '('
-
-						&:after
-							content ')'
-
-				[data-yield='content']
-					> .ref
-						> mk-post-preview
-							margin 16px 22px
-
-	</style>
-	<script lang="typescript">
-		this.uploadingFiles = [];
-		this.files = [];
-
-		this.on('mount', () => {
-			this.$refs.window.refs.form.focus();
-
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-
-			this.$refs.window.refs.form.on('post', () => {
-				this.$refs.window.close();
-			});
-
-			this.$refs.window.refs.form.on('change-uploading-files', files => {
-				this.update({
-					uploadingFiles: files || []
-				});
-			});
-
-			this.$refs.window.refs.form.on('change-files', files => {
-				this.update({
-					files: files || []
-				});
-			});
-		});
-	</script>
-</mk-post-form-window>

src/web/app/desktop/views/components/post-form-window.vue

@@ -0,0 +1,63 @@
+<template>
+<mk-window ref="window" is-modal @closed="$destroy">
+	<span slot="header">
+		<span v-if="!parent.opts.reply">%i18n:desktop.tags.mk-post-form-window.post%</span>
+		<span v-if="parent.opts.reply">%i18n:desktop.tags.mk-post-form-window.reply%</span>
+		<span :class="$style.files" v-if="parent.files.length != 0">{ '%i18n:desktop.tags.mk-post-form-window.attaches%'.replace('{}', parent.files.length) }</span>
+		<span :class="$style.files" v-if="parent.uploadingFiles.length != 0">{ '%i18n:desktop.tags.mk-post-form-window.uploading-media%'.replace('{}', parent.uploadingFiles.length) }<mk-ellipsis/></span>
+	</span>
+	<div slot="content">
+		<div class="ref" v-if="parent.opts.reply">
+			<mk-post-preview :class="$style.postPreview" :post="reply"/>
+		</div>
+		<div class="body">
+			<mk-post-form ref="form"
+				:reply="reply"
+				@post="$refs.window.close"
+				@change-uploadings="onChangeUploadings"
+				@change-attached-media="onChangeMedia"/>
+		</div>
+	</div>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['reply'],
+	data() {
+		return {
+			uploadings: [],
+			media: []
+		};
+	},
+	mounted() {
+		(this.$refs.form as any).focus();
+	},
+	methods: {
+		onChangeUploadings(media) {
+			this.uploadings = media;
+		},
+		onChangeMedia(media) {
+			this.media = media;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.files
+	margin-left 8px
+	opacity 0.8
+
+	&:before
+		content '('
+
+	&:after
+		content ')'
+
+.postPreview
+	margin 16px 22px
+
+</style>

src/web/app/desktop/views/components/timeline-post.vue

@@ -73,8 +73,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import compile from '../../common/scripts/text-compiler';
-import dateStringify from '../../common/scripts/date-stringify';
+import dateStringify from '../../../common/scripts/date-stringify';
 
 export default Vue.extend({
 	props: ['post'],
@@ -156,6 +155,13 @@ export default Vue.extend({
 			if (post.id == this.post.id) {
 				this.$emit('update:post', post);
 			}
+		},
+		reply() {
+			document.body.appendChild(new MkPostFormWindow({
+				propsData: {
+					reply: this.p
+				}
+			}).$mount().$el);
 		}
 	}
 });
@@ -163,12 +169,6 @@ export default Vue.extend({
 
 <script lang="typescript">
 
-this.reply = () => {
-	riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')), {
-		reply: this.p
-	});
-};
-
 this.repost = () => {
 	riot.mount(document.body.appendChild(document.createElement('mk-repost-form-window')), {
 		post: this.p

src/web/app/desktop/views/components/window.vue

@@ -4,13 +4,13 @@
 	<div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown" :style="{ width, height }">
 		<div class="body">
 			<header ref="header" @contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown">
-				<h1 data-yield="header"><yield from="header"/></h1>
+				<h1><slot name="header"></slot></h1>
 				<div>
 					<button class="popout" v-if="popoutUrl" @mousedown.stop="() => {}" @click="popout" title="ポップアウト">%fa:R window-restore%</button>
 					<button class="close" v-if="canClose" @mousedown.stop="() => {}" @click="close" title="閉じる">%fa:times%</button>
 				</div>
 			</header>
-			<div class="content" data-yield="content"><yield from="content"/></div>
+			<div class="content"><slot name="content"></slot></div>
 		</div>
 		<div class="handle top" v-if="canResize" @mousedown.prevent="onTopHandleMousedown"></div>
 		<div class="handle right" v-if="canResize" @mousedown.prevent="onRightHandleMousedown"></div>

src/web/app/init.ts

@@ -14,6 +14,12 @@ import VModal from 'vue-js-modal';
 Vue.use(VueRouter);
 Vue.use(VModal);
 
+// Register global directives
+require('./common/views/directives');
+
+// Register global components
+require('./common/views/components');
+
 import App from './app.vue';
 
 import checkForUpdate from './common/scripts/check-for-update';
@@ -70,9 +76,6 @@ export default (callback: (launch: () => Vue) => void, sw = false) => {
 		// アプリ基底要素マウント
 		document.body.innerHTML = '<div id="app"></div>';
 
-		// Register global components
-		require('./common/views/components');
-
 		const launch = () => {
 			return new Vue({
 				data: {