Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo 2018-02-12 12:21:26 +09:00
parent 4d19e8a1b2
commit ae1338f761
1 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/web/app/desktop/views/components/post-form.vue
View File

@ -6,19 +6,19 @@
@drop="onDrop" @drop="onDrop"
> >
<div class="content"> <div class="content">
<textarea :class="{ with: (files.length != 0 || poll) }" ref="text" :disabled="wait" <textarea :class="{ with: (files.length != 0 || poll) }" ref="text" :disabled="posting"
@keydown="onKeydown" @paste="onPaste" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" :placeholder="placeholder"
></textarea> ></textarea>
<div class="medias" :class="{ with: poll }" v-show="files.length != 0"> <div class="medias" :class="{ with: poll }" v-show="files.length != 0">
<ul ref="media"> <ul ref="media">
<li each={ files } data-id={ id }> <li v-for="file in files" :key="file.id">
<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div> <div class="img" :style="{ backgroundImage: `url(${file.url}?thumbnail&size=64)` }" :title="file.name"></div>
<img class="remove" @click="removeFile" src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/> <img class="remove" @click="removeFile(file.id)" src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
</li> </li>
</ul> </ul>
<p class="remain">{ 4 - files.length }/4</p> <p class="remain">{{ 4 - files.length }}/4</p>
</div> </div>
<mk-poll-editor v-if="poll" ref="poll" ondestroy={ onPollDestroyed }/> <mk-poll-editor v-if="poll" ref="poll" @destroyed="onPollDestroyed"/>
</div> </div>
<mk-uploader ref="uploader"/> <mk-uploader ref="uploader"/>
<button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" @click="selectFile">%fa:upload%</button> <button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" @click="selectFile">%fa:upload%</button>
@ -26,10 +26,29 @@
<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" @click="kao">%fa:R smile%</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="addPoll">%fa:chart-pie%</button> <button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" @click="addPoll">%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 { over: refs.text.value.length > 1000 }">{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - refs.text.value.length) }</p>
<button :class="{ wait: wait }" ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0 && !poll　&& !repost) } @click="post"> <button :class="{ posting }" ref="submit" :disabled="!canPost" @click="post">
{ wait ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }<mk-ellipsis v-if="wait"/> { posting ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }<mk-ellipsis v-if="posting"/>
</button> </button>
<input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" onchange={ changeFile }/> <input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" onchange={ changeFile }/>
<div class="dropzone" v-if="draghover"></div> <div class="dropzone" v-if="draghover"></div>
</div> </div>
</template> </template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
posting: false,
};
},
computed: {
canPost(): boolean {
return !this.posting && (refs.text.value.length != 0 || files.length != 0 || poll || repost);
}
}
});
</script>