diff --git a/locales/en.yml b/locales/en.yml index 8e1dee826d..9ac9a36cd5 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -591,7 +591,6 @@ mobile: submit: "Post" reply-placeholder: "Reply to this post..." post-placeholder: "What's happening?" - attach-media-from-local: "Attach media from your device" mk-search-posts: empty: "There is no post related to the 「{}」" diff --git a/locales/ja.yml b/locales/ja.yml index 1497bdb6d1..2f95998a86 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -591,7 +591,6 @@ mobile: submit: "投稿" reply-placeholder: "この投稿への返信..." post-placeholder: "いまどうしてる?" - attach-media-from-local: "デバイスからメディアを添付" mk-search-posts: empty: "「{}」に関する投稿は見つかりませんでした。" diff --git a/src/web/app/desktop/tags/post-form.tag b/src/web/app/desktop/tags/post-form.tag index 8e5171c83e..0b4c07906a 100644 --- a/src/web/app/desktop/tags/post-form.tag +++ b/src/web/app/desktop/tags/post-form.tag @@ -1,13 +1,12 @@ <mk-post-form ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }> <div class="content"> <textarea class={ with: (files.length != 0 || poll) } ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ placeholder }></textarea> - <div class="medias { with: poll }" if={ files.length != 0 }> - <ul> - <li each={ files }> + <div class="medias { with: poll }" show={ files.length != 0 }> + <ul ref="media"> + <li each={ files } data-id={ id }> <div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div> <img class="remove" onclick={ removeFile } src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/> </li> - <li class="add" if={ files.length < 4 } title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:plus%</li> </ul> <p class="remain">{ 4 - files.length }/4</p> </div> @@ -118,8 +117,9 @@ > li display block float left - margin 4px + margin 0 padding 0 + border solid 4px transparent cursor move &:hover > .remove @@ -140,29 +140,6 @@ height 16px cursor pointer - > .add - display block - float left - margin 4px - padding 0 - border dashed 2px rgba($theme-color, 0.2) - cursor pointer - - &:hover - border-color rgba($theme-color, 0.3) - - > i - color rgba($theme-color, 0.4) - - > i - display block - width 60px - height 60px - line-height 60px - text-align center - font-size 1.2em - color rgba($theme-color, 0.2) - > mk-poll-editor background lighten($theme-color, 98%) border solid 1px rgba($theme-color, 0.1) @@ -306,6 +283,7 @@ </style> <script> + import Sortable from 'sortablejs'; import getKao from '../../common/scripts/get-kao'; import notify from '../scripts/notify'; import Autocomplete from '../scripts/autocomplete'; @@ -365,6 +343,10 @@ this.trigger('change-files', this.files); this.update(); } + + new Sortable(this.refs.media, { + animation: 150 + }); }); this.on('unmount', () => { @@ -413,14 +395,17 @@ const data = e.dataTransfer.getData('text'); if (data == null) return false; - // パース - // TODO: Validate JSON - const obj = JSON.parse(data); + try { + // パース + const obj = JSON.parse(data); + + // (ドライブの)ファイルだったら + if (obj.type == 'file') { + this.files.push(obj.file); + this.update(); + } + } catch (e) { - // (ドライブの)ファイルだったら - if (obj.type == 'file') { - this.files.push(obj.file); - this.update(); } }; @@ -483,13 +468,19 @@ this.post = e => { this.wait = true; - const files = this.files && this.files.length > 0 - ? this.files.map(f => f.id) - : undefined; + const files = []; + + if (this.files.length > 0) { + Array.from(this.refs.media.children).forEach(el => { + const id = el.getAttribute('data-id'); + const file = this.files.find(f => f.id == id); + files.push(file); + }); + } this.api('posts/create', { text: this.refs.text.value == '' ? undefined : this.refs.text.value, - media_ids: files, + media_ids: this.files.length > 0 ? files.map(f => f.id) : undefined, reply_id: this.inReplyToPost ? this.inReplyToPost.id : undefined, repost_id: this.repost ? this.repost.id : undefined, poll: this.poll ? this.refs.poll.get() : undefined diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag index 3ac7296f73..f09f40bb5c 100644 --- a/src/web/app/mobile/tags/post-form.tag +++ b/src/web/app/mobile/tags/post-form.tag @@ -9,12 +9,11 @@ <div class="form"> <mk-post-preview if={ opts.reply } post={ opts.reply }/> <textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ opts.reply ? '%i18n:mobile.tags.mk-post-form.reply-placeholder%' : '%i18n:mobile.tags.mk-post-form.post-placeholder%' }></textarea> - <div class="attaches" if={ files.length != 0 }> + <div class="attaches" show={ files.length != 0 }> <ul class="files" ref="attaches"> - <li class="file" each={ files }> - <div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div> + <li class="file" each={ files } data-id={ id }> + <div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name } onclick={ removeFile }></div> </li> - <li class="add" if={ files.length < 4 } title="%i18n:mobile.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:plus%</li> </ul> </div> <mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/> @@ -93,12 +92,9 @@ > .file display block float left - margin 4px + margin 0 padding 0 - cursor move - - &:hover > .remove - display block + border solid 4px transparent > .img width 64px @@ -106,38 +102,6 @@ background-size cover background-position center center - > .remove - display none - position absolute - top -6px - right -6px - width 16px - height 16px - cursor pointer - - > .add - display block - float left - margin 4px - padding 0 - border dashed 2px rgba($theme-color, 0.2) - cursor pointer - - &:hover - border-color rgba($theme-color, 0.3) - - > [data-fa] - color rgba($theme-color, 0.4) - - > [data-fa] - display block - width 60px - height 60px - line-height 60px - text-align center - font-size 1.2em - color rgba($theme-color, 0.2) - > mk-uploader margin 8px 0 0 0 padding 8px @@ -181,6 +145,7 @@ </style> <script> + import Sortable from 'sortablejs'; import getKao from '../../common/scripts/get-kao'; this.mixin('api'); @@ -200,6 +165,10 @@ }); this.refs.text.focus(); + + new Sortable(this.refs.attaches, { + animation: 150 + }); }); this.onkeydown = e => { @@ -247,6 +216,13 @@ this.update(); }; + this.removeFile = e => { + const file = e.item; + this.files = this.files.filter(x => x.id != file.id); + this.trigger('change-files', this.files); + this.update(); + }; + this.addPoll = () => { this.poll = true; }; @@ -258,15 +234,23 @@ }; this.post = () => { - this.wait = true; + this.update({ + wait: true + }); - const files = this.files && this.files.length > 0 - ? this.files.map(f => f.id) - : undefined; + const files = []; + + if (this.files.length > 0) { + Array.from(this.refs.attaches.children).forEach(el => { + const id = el.getAttribute('data-id'); + const file = this.files.find(f => f.id == id); + files.push(file); + }); + } this.api('posts/create', { text: this.refs.text.value == '' ? undefined : this.refs.text.value, - media_ids: files, + media_ids: this.files.length > 0 ? files.map(f => f.id) : undefined, reply_id: opts.reply ? opts.reply.id : undefined, poll: this.poll ? this.refs.poll.get() : undefined }).then(data => {