diff --git a/src/web/app/desktop/-tags/drive/nav-folder.tag b/src/web/app/desktop/views/components/drive-nav-folder.vue similarity index 60% rename from src/web/app/desktop/-tags/drive/nav-folder.tag rename to src/web/app/desktop/views/components/drive-nav-folder.vue index 4bca80f68..556c64f11 100644 --- a/src/web/app/desktop/-tags/drive/nav-folder.tag +++ b/src/web/app/desktop/views/components/drive-nav-folder.vue @@ -1,35 +1,38 @@ -<mk-drive-browser-nav-folder data-draghover={ draghover } @click="onclick" ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }> - <template v-if="folder == null">%fa:cloud%</template><span>{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }</span> - <style lang="stylus" scoped> - :scope - &[data-draghover] - background #eee +<template> +<div class="mk-drive-nav-folder" + :data-draghover="draghover" + @click="onClick" + @dragover.prevent.stop="onDragover" + @dragenter="onDragenter" + @dragleave="onDragleave" + @drop.stop="onDrop" +> + <template v-if="folder == null">%fa:cloud%</template> + <span>{{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }}</span> +</div> +</template> - </style> - <script lang="typescript"> - this.mixin('api'); - - this.folder = this.opts.folder ? this.opts.folder : null; - this.browser = this.parent; - - this.hover = false; - - this.onclick = () => { +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: ['folder', 'browser'], + data() { + return { + hover: false, + draghover: false + }; + }, + methods: { + onClick() { this.browser.move(this.folder); - }; - - this.onmouseover = () => { - this.hover = true - }; - - this.onmouseout = () => { - this.hover = false - }; - - this.ondragover = e => { - e.preventDefault(); - e.stopPropagation(); - + }, + onMouseover() { + this.hover = true; + }, + onMouseout() { + this.hover = false; + }, + onDragover(e) { // このフォルダがルートかつカレントディレクトリならドロップ禁止 if (this.folder == null && this.browser.folder == null) { e.dataTransfer.dropEffect = 'none'; @@ -40,18 +43,14 @@ e.dataTransfer.dropEffect = 'move'; } return false; - }; - - this.ondragenter = () => { + }, + onDragenter() { if (this.folder || this.browser.folder) this.draghover = true; - }; - - this.ondragleave = () => { + }, + onDragleave() { if (this.folder || this.browser.folder) this.draghover = false; - }; - - this.ondrop = e => { - e.stopPropagation(); + }, + onDrop(e) { this.draghover = false; // ファイルだったら @@ -74,7 +73,7 @@ if (obj.type == 'file') { const file = obj.id; this.browser.removeFile(file); - this.api('drive/files/update', { + this.$root.$data.os.api('drive/files/update', { file_id: file, folder_id: this.folder ? this.folder.id : null }); @@ -84,13 +83,21 @@ // 移動先が自分自身ならreject if (this.folder && folder == this.folder.id) return false; this.browser.removeFolder(folder); - this.api('drive/folders/update', { + this.$root.$data.os.api('drive/folders/update', { folder_id: folder, parent_id: this.folder ? this.folder.id : null }); } return false; - }; - </script> -</mk-drive-browser-nav-folder> + } + } +}); +</script> + +<style lang="stylus" scoped> +.mk-drive-nav-folder + &[data-draghover] + background #eee + +</style> diff --git a/src/web/app/desktop/views/components/post-form-window.vue b/src/web/app/desktop/views/components/post-form-window.vue index 39e89ca44..dc16d7c9d 100644 --- a/src/web/app/desktop/views/components/post-form-window.vue +++ b/src/web/app/desktop/views/components/post-form-window.vue @@ -1,13 +1,13 @@ <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 v-if="!reply">%i18n:desktop.tags.mk-post-form-window.post%</span> + <span v-if="reply">%i18n:desktop.tags.mk-post-form-window.reply%</span> <span :class="$style.count" v-if="media.length != 0">{{ '%i18n:desktop.tags.mk-post-form-window.attaches%'.replace('{}', media.length) }}</span> <span :class="$style.count" v-if="uploadings.length != 0">{{ '%i18n:desktop.tags.mk-post-form-window.uploading-media%'.replace('{}', uploadings.length) }}<mk-ellipsis/></span> </span> <div slot="content"> - <mk-post-preview v-if="parent.opts.reply" :class="$style.postPreview" :post="reply"/> + <mk-post-preview v-if="reply" :class="$style.postPreview" :post="reply"/> <mk-post-form ref="form" :reply="reply" @posted="$refs.window.close" diff --git a/src/web/app/desktop/views/components/post-form.vue b/src/web/app/desktop/views/components/post-form.vue index c062c57e1..91ceb5227 100644 --- a/src/web/app/desktop/views/components/post-form.vue +++ b/src/web/app/desktop/views/components/post-form.vue @@ -26,7 +26,7 @@ <button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" @click="selectFileFromDrive">%fa:cloud%</button> <button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" @click="kao">%fa:R smile%</button> <button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" @click="poll = true">%fa:chart-pie%</button> - <p class="text-count { over: refs.text.value.length > 1000 }">{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - refs.text.value.length) }</p> + <p class="text-count" :class="{ over: text.length > 1000 }">{{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - text.length) }}</p> <button :class="{ posting }" ref="submit" :disabled="!canPost" @click="post"> {{ posting ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }}<mk-ellipsis v-if="posting"/> </button>