wip
This commit is contained in:
syuilo
parent
c30fff623d
commit
0b1bcf614b
|
|
@ -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.$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('');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<a class="mk-images-image"
|
||||
<a class="mk-images-image"
|
||||
:href="image.url"
|
||||
@mousemove="onMousemove"
|
||||
@mouseleave="onMouseleave"
|
||||
@click.prevent="onClick"
|
||||
:style="style"
|
||||
:title="image.name"
|
||||
></a>
|
||||
</div>
|
||||
></a>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -53,16 +51,13 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-images-image
|
||||
overflow hidden
|
||||
border-radius 4px
|
||||
|
||||
> a
|
||||
display block
|
||||
cursor zoom-in
|
||||
overflow hidden
|
||||
width 100%
|
||||
height 100%
|
||||
background-position center
|
||||
border-radius 4px
|
||||
|
||||
&:not(:hover)
|
||||
background-size cover
|
||||
|
|
|
|||
|
|
@ -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.$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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue