wip
This commit is contained in:
syuilo
parent
cbec4229d3
commit
eb1fa6e43c
5
src/web/app/common/views/directives/focus.ts
Normal file
5
src/web/app/common/views/directives/focus.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
inserted(el) {
|
||||
el.focus();
|
||||
}
|
||||
};
|
||||
5
src/web/app/common/views/directives/index.ts
Normal file
5
src/web/app/common/views/directives/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import focus from './focus';
|
||||
|
||||
Vue.directive('focus', focus);
|
||||
@ -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>
|
||||
63
src/web/app/desktop/views/components/post-form-window.vue
Normal file
63
src/web/app/desktop/views/components/post-form-window.vue
Normal file
@ -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>
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user