From 1a968fd997141596f95a9df94f6ba14b1efca74f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 22 Feb 2018 05:57:24 +0900
Subject: [PATCH] wip
---
.../common/views/components/poll-editor.vue | 12 ++++-
.../desktop/views/components/images-image.vue | 35 +++++++--------
.../desktop/views/components/post-form.vue | 44 +++++++++++--------
3 files changed, 50 insertions(+), 41 deletions(-)
diff --git a/src/web/app/common/views/components/poll-editor.vue b/src/web/app/common/views/components/poll-editor.vue
index 7428d8054..065e91966 100644
--- a/src/web/app/common/views/components/poll-editor.vue
+++ b/src/web/app/common/views/components/poll-editor.vue
@@ -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('');
}
}
});
diff --git a/src/web/app/desktop/views/components/images-image.vue b/src/web/app/desktop/views/components/images-image.vue
index b29428ac3..cb6c529f7 100644
--- a/src/web/app/desktop/views/components/images-image.vue
+++ b/src/web/app/desktop/views/components/images-image.vue
@@ -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>
diff --git a/src/web/app/desktop/views/components/post-form.vue b/src/web/app/desktop/views/components/post-form.vue
index c362d500e..23006d338 100644
--- a/src/web/app/desktop/views/components/post-form.vue
+++ b/src/web/app/desktop/views/components/post-form.vue
@@ -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