From eb1fa6e43c43baf871aa7a2fd5311ac997523923 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 12 Feb 2018 00:17:51 +0900
Subject: [PATCH] wip
---
src/web/app/common/views/directives/focus.ts | 5 ++
src/web/app/common/views/directives/index.ts | 5 ++
.../app/desktop/-tags/post-form-window.tag | 68 -------------------
.../views/components/post-form-window.vue | 63 +++++++++++++++++
.../views/components/timeline-post.vue | 16 ++---
.../app/desktop/views/components/window.vue | 4 +-
src/web/app/init.ts | 9 ++-
7 files changed, 89 insertions(+), 81 deletions(-)
create mode 100644 src/web/app/common/views/directives/focus.ts
create mode 100644 src/web/app/common/views/directives/index.ts
delete mode 100644 src/web/app/desktop/-tags/post-form-window.tag
create mode 100644 src/web/app/desktop/views/components/post-form-window.vue
diff --git a/src/web/app/common/views/directives/focus.ts b/src/web/app/common/views/directives/focus.ts
new file mode 100644
index 000000000..b4fbcb6a8
--- /dev/null
+++ b/src/web/app/common/views/directives/focus.ts
@@ -0,0 +1,5 @@
+export default {
+ inserted(el) {
+ el.focus();
+ }
+};
diff --git a/src/web/app/common/views/directives/index.ts b/src/web/app/common/views/directives/index.ts
new file mode 100644
index 000000000..358866f50
--- /dev/null
+++ b/src/web/app/common/views/directives/index.ts
@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+import focus from './focus';
+
+Vue.directive('focus', focus);
diff --git a/src/web/app/desktop/-tags/post-form-window.tag b/src/web/app/desktop/-tags/post-form-window.tag
deleted file mode 100644
index 562621bde..000000000
--- a/src/web/app/desktop/-tags/post-form-window.tag
+++ /dev/null
@@ -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>
diff --git a/src/web/app/desktop/views/components/post-form-window.vue b/src/web/app/desktop/views/components/post-form-window.vue
new file mode 100644
index 000000000..37670ccd9
--- /dev/null
+++ b/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>
diff --git a/src/web/app/desktop/views/components/timeline-post.vue b/src/web/app/desktop/views/components/timeline-post.vue
index ed0596741..38f5f0891 100644
--- a/src/web/app/desktop/views/components/timeline-post.vue
+++ b/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
diff --git a/src/web/app/desktop/views/components/window.vue b/src/web/app/desktop/views/components/window.vue
index 28f368253..26f3cbcd3 100644
--- a/src/web/app/desktop/views/components/window.vue
+++ b/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>
diff --git a/src/web/app/init.ts b/src/web/app/init.ts
index dfb1e96b8..4ef2a8921 100644
--- a/src/web/app/init.ts
+++ b/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: {