This commit is contained in:
syuilo 2018-02-22 05:57:24 +09:00
parent c30fff623d
commit 0b1bcf614b
3 changed files with 50 additions and 41 deletions

View File

@ -4,7 +4,7 @@
%fa:exclamation-triangle%%i18n:common.tags.mk-poll-editor.no-only-one-choice%
</p>
<ul ref="choices">
<li v-for="(choice, i) in choices" :key="choice">
<li v-for="(choice, i) in choices">
<input :value="choice" @input="onInput(i, $event)" :placeholder="'%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1)">
<button @click="remove(i)" title="%i18n:common.tags.mk-poll-editor.remove%">
%fa:times%
@ -26,6 +26,11 @@ export default Vue.extend({
choices: ['', '']
};
},
watch: {
choices() {
this.$emit('updated');
}
},
methods: {
onInput(i, e) {
Vue.set(this.choices, i, e.target.value);
@ -33,7 +38,9 @@ export default Vue.extend({
add() {
this.choices.push('');
(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
this.$nextTick(() => {
(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
});
},
remove(i) {
@ -53,6 +60,7 @@ export default Vue.extend({
set(data) {
if (data.choices.length == 0) return;
this.choices = data.choices;
if (data.choices.length == 1) this.choices = this.choices.concat('');
}
}
});

View File

@ -1,14 +1,12 @@
<template>
<div>
<a class="mk-images-image"
:href="image.url"
@mousemove="onMousemove"
@mouseleave="onMouseleave"
@click.prevent="onClick"
:style="style"
:title="image.name"
></a>
</div>
<a class="mk-images-image"
:href="image.url"
@mousemove="onMousemove"
@mouseleave="onMouseleave"
@click.prevent="onClick"
:style="style"
:title="image.name"
></a>
</template>
<script lang="ts">
@ -53,18 +51,15 @@ export default Vue.extend({
<style lang="stylus" scoped>
.mk-images-image
display block
cursor zoom-in
overflow hidden
width 100%
height 100%
background-position center
border-radius 4px
> a
display block
cursor zoom-in
overflow hidden
width 100%
height 100%
background-position center
&:not(:hover)
background-size cover
&:not(:hover)
background-size cover
</style>

View File

@ -11,15 +11,15 @@
@keydown="onKeydown" @paste="onPaste" :placeholder="placeholder"
></textarea>
<div class="medias" :class="{ with: poll }" v-show="files.length != 0">
<ul ref="media">
<li v-for="file in files" :key="file.id">
<x-draggable :list="files" :options="{ animation: 150 }">
<div v-for="file in files" :key="file.id">
<div class="img" :style="{ backgroundImage: `url(${file.url}?thumbnail&size=64)` }" :title="file.name"></div>
<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
</li>
</ul>
</div>
</x-draggable>
<p class="remain">{{ 4 - files.length }}/4</p>
</div>
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false"/>
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="saveDraft()"/>
</div>
<mk-uploader @uploaded="attachMedia" @change="onChangeUploadings"/>
<button class="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" @click="chooseFile">%fa:upload%</button>
@ -37,11 +37,14 @@
<script lang="ts">
import Vue from 'vue';
import * as Sortable from 'sortablejs';
import * as XDraggable from 'vuedraggable';
import Autocomplete from '../../scripts/autocomplete';
import getKao from '../../../common/scripts/get-kao';
export default Vue.extend({
components: {
XDraggable
},
props: ['reply', 'repost'],
data() {
return {
@ -80,6 +83,17 @@ export default Vue.extend({
return !this.posting && (this.text.length != 0 || this.files.length != 0 || this.poll || this.repost);
}
},
watch: {
text() {
this.saveDraft();
},
poll() {
this.saveDraft();
},
files() {
this.saveDraft();
}
},
mounted() {
this.$nextTick(() => {
this.autocomplete = new Autocomplete(this.$refs.text);
@ -92,14 +106,12 @@ export default Vue.extend({
this.files = draft.data.files;
if (draft.data.poll) {
this.poll = true;
(this.$refs.poll as any).set(draft.data.poll);
this.$nextTick(() => {
(this.$refs.poll as any).set(draft.data.poll);
});
}
this.$emit('change-attached-media', this.files);
}
new Sortable(this.$refs.media, {
animation: 150
});
});
},
beforeDestroy() {
@ -322,22 +334,16 @@ export default Vue.extend({
padding 0
color rgba($theme-color, 0.4)
> ul
display block
margin 0
> div
padding 4px
list-style none
&:after
content ""
display block
clear both
> li
display block
> div
float left
margin 0
padding 0
border solid 4px transparent
cursor move