Fix #5842 and refactoring

7 files changed, 41 insertions, 14 deletions

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 00c3cd6643..461459f3ba 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -1,8 +1,8 @@
 <template>
-<sequential-entrance class="sqadhkmv" ref="list" :direction="direction">
+<sequential-entrance class="sqadhkmv" ref="list" :direction="direction" :reversed="reversed">
 	<template v-for="(item, i) in items">
 		<slot :item="item" :i="i"></slot>
-		<div class="separator" :key="item.id + '_date'" :data-index="i" v-if="i != items.length - 1 && new Date(item.createdAt).getDate() != new Date(items[i + 1].createdAt).getDate()">
+		<div class="separator" :key="item.id + '_date'" v-if="i != items.length - 1 && new Date(item.createdAt).getDate() != new Date(items[i + 1].createdAt).getDate()">
 			<p class="date">
 				<span><fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span>
 				<span>{{ getDateText(items[i + 1].createdAt) }}<fa class="icon" :icon="faAngleDown"/></span>
@@ -28,6 +28,11 @@ export default Vue.extend({
 		direction: {
 			type: String,
 			required: false
+		},
+		reversed: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 
diff --git a/src/client/components/menu.vue b/src/client/components/menu.vue
index c1c5ceaee7..1f9eb95ed5 100644
--- a/src/client/components/menu.vue
+++ b/src/client/components/menu.vue
@@ -2,26 +2,26 @@
 <x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
 	<sequential-entrance class="rrevdjwt" :class="{ left: align === 'left' }" :delay="15" :direction="direction">
 		<template v-for="(item, i) in items.filter(item => item !== undefined)">
-			<div v-if="item === null" class="divider" :key="i" :data-index="i"></div>
-			<span v-else-if="item.type === 'label'" class="label item" :key="i" :data-index="i">
+			<div v-if="item === null" class="divider" :key="i"></div>
+			<span v-else-if="item.type === 'label'" class="label item" :key="i">
 				<span>{{ item.text }}</span>
 			</span>
-			<router-link v-else-if="item.type === 'link'" :to="item.to" @click.native="close()" :tabindex="i" class="_button item" :key="i" :data-index="i">
+			<router-link v-else-if="item.type === 'link'" :to="item.to" @click.native="close()" :tabindex="i" class="_button item" :key="i">
 				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
 				<mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 				<span>{{ item.text }}</span>
 				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
 			</router-link>
-			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item" :key="i" :data-index="i">
+			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item" :key="i">
 				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
 				<span>{{ item.text }}</span>
 				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
 			</a>
-			<button v-else-if="item.type === 'user'" @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i" :data-index="i">
+			<button v-else-if="item.type === 'user'" @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i">
 				<mk-avatar :user="item.user" class="avatar"/><mk-user-name :user="item.user"/>
 				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
 			</button>
-			<button v-else @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i" :data-index="i">
+			<button v-else @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i">
 				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
 				<mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 				<span>{{ item.text }}</span>
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index 7cf2aa2b02..0fa02681fa 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -5,7 +5,7 @@
 	<mk-error v-if="error" @retry="init()"/>
 
 	<x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note, i }">
-		<x-note :note="note" :detail="detail" :key="note.id" :data-index="i"/>
+		<x-note :note="note" :detail="detail" :key="note.id"/>
 	</x-list>
 
 	<footer v-if="more">
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index e067c1acce..ff2fc4af8a 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -2,7 +2,7 @@
 <div class="mk-notifications">
 	<div class="contents">
 		<x-list class="notifications" :items="items" v-slot="{ item: notification, i }">
-			<x-notification :notification="notification" :with-time="true" :full="true" class="notification" :key="notification.id" :data-index="i"/>
+			<x-notification :notification="notification" :with-time="true" :full="true" class="notification" :key="notification.id"/>
 		</x-list>
 
 		<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
diff --git a/src/client/components/reaction-picker.vue b/src/client/components/reaction-picker.vue
index 00b964f07c..ccf6eaa51e 100644
--- a/src/client/components/reaction-picker.vue
+++ b/src/client/components/reaction-picker.vue
@@ -13,7 +13,7 @@
 			mode="out-in"
 			appear
 		>
-			<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :data-index="i" :tabindex="i + 1" :title="/^[a-z]+$/.test(reaction) ? $t('@.reactions.' + reaction) : reaction"><x-reaction-icon :reaction="reaction"/></button>
+			<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="/^[a-z]+$/.test(reaction) ? $t('@.reactions.' + reaction) : reaction"><x-reaction-icon :reaction="reaction"/></button>
 		</transition-group>
 		<input class="text" v-model="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
 	</div>
diff --git a/src/client/components/sequential-entrance.vue b/src/client/components/sequential-entrance.vue
index 70e486719e..33f7a43f7d 100644
--- a/src/client/components/sequential-entrance.vue
+++ b/src/client/components/sequential-entrance.vue
@@ -27,20 +27,42 @@ export default Vue.extend({
 			type: String,
 			required: false,
 			default: 'down'
+		},
+		reversed: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
+	data() {
+		return {
+			currentChildren: [] as Node[],
+			index: 0
+		};
+	},
 	methods: {
+		updateChildren() {
+			this.currentChildren = this.$slots.default!.filter(n => n.elm != null).map(n => n.elm!);
+		},
 		beforeEnter(el) {
 			el.style.opacity = 0;
 			el.style.transform = this.direction === 'down' ? 'translateY(-64px)' : 'translateY(64px)';
 		},
 		enter(el, done) {
+			let index = this.index;
+			// TODO
+			//if (this.reversed) index = ...;
+			//console.log(index);
 			el.style.transition = [getComputedStyle(el).transition, 'transform 0.7s cubic-bezier(0.23, 1, 0.32, 1)', 'opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1)'].filter(x => x != '').join(',');
 			setTimeout(() => {
 				el.style.opacity = 1;
 				el.style.transform = 'translateY(0px)';
-				setTimeout(done, 700);
-			}, this.delay * el.dataset.index)
+				setTimeout(() => {
+					done();
+					this.index--;
+				}, 700);
+			}, this.delay * index)
+			this.index++;
 		},
 		leave(el, done) {
 			setTimeout(() => {
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index 19310bc4e1..a70b3c2d13 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -7,7 +7,7 @@
 		</div>
 
 		<sequential-entrance class="users">
-			<router-link v-for="(item, i) in items" class="user" :key="item.id" :data-index="i" :to="extract ? extract(item) : item | userPage">
+			<router-link v-for="(item, i) in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage">
 				<mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
 				<div class="body">
 					<mk-user-name :user="extract ? extract(item) : item" class="name"/>