wait-what/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-12 00:17:51 +09:00
parent cbec4229d3
commit eb1fa6e43c
7 changed files with 89 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/web/app/common/views/directives/focus.ts Normal file
View file

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

5
src/web/app/common/views/directives/index.ts Normal file
View file

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

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

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

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

@ -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
src/web/app/desktop/views/components/window.vue
View file

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

9
src/web/app/init.ts
View file

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