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

View file

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

View file

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