limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-28 21:08:52 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

#983

Browse source
This commit is contained in:
syuilo 2017-12-11 03:25:58 +09:00
parent 4b3477d3a2
commit a32da4ca72
4 changed files with 60 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/en.yml
View file

@ -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 「{}」"

1
locales/ja.yml
View file

@ -591,7 +591,6 @@ mobile:
submit: "投稿"
reply-placeholder: "この投稿への返信..."
post-placeholder: "いまどうしてる？"
attach-media-from-local: "デバイスからメディアを添付"
mk-search-posts:
empty: "「{}」に関する投稿は見つかりませんでした。"

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

@ -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,8 +395,8 @@
const data = e.dataTransfer.getData('text');
if (data == null) return false;
try {
// パース
// TODO: Validate JSON
const obj = JSON.parse(data);
// (ドライブの)ファイルだったら
@ -422,6 +404,9 @@
this.files.push(obj.file);
this.update();
}
} catch (e) {
}
};
this.onkeydown = e => {
@ -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

76
src/web/app/mobile/tags/post-form.tag
View file

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