From d18ee12d2f395648872daccd5eacc75b6fca27a9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Dec 2018 11:32:20 +0900
Subject: [Client] Add some animations :art:

---
 src/client/app/admin/views/drive.vue | 36 +++++++++++++++++++-----------------
 src/client/app/admin/views/users.vue | 30 ++++++++++++++++--------------
 2 files changed, 35 insertions(+), 31 deletions(-)

(limited to 'src/client/app/admin')

diff --git a/src/client/app/admin/views/drive.vue b/src/client/app/admin/views/drive.vue
index 2872155b60..c3a3a40644 100644
--- a/src/client/app/admin/views/drive.vue
+++ b/src/client/app/admin/views/drive.vue
@@ -18,29 +18,31 @@
 					<option value="remote">{{ $t('origin.remote') }}</option>
 				</ui-select>
 			</ui-horizon-group>
-			<div class="kidvdlkg" v-for="file in files">
-				<div @click="file._open = !file._open">
-					<div>
-						<div class="thumbnail" :style="thumbnail(file)"></div>
-					</div>
-					<div>
-						<header>
-							<b>{{ file.name }}</b>
-							<span class="username">@{{ file.user | acct }}</span>
-						</header>
+			<sequential-entrance animation="entranceFromTop" delay="25">
+				<div class="kidvdlkg" v-for="file in files">
+					<div @click="file._open = !file._open">
+						<div>
+							<div class="thumbnail" :style="thumbnail(file)"></div>
+						</div>
 						<div>
+							<header>
+								<b>{{ file.name }}</b>
+								<span class="username">@{{ file.user | acct }}</span>
+							</header>
 							<div>
-								<span style="margin-right:16px;">{{ file.type }}</span>
-								<span>{{ file.datasize | bytes }}</span>
+								<div>
+									<span style="margin-right:16px;">{{ file.type }}</span>
+									<span>{{ file.datasize | bytes }}</span>
+								</div>
+								<div><mk-time :time="file.createdAt" mode="detail"/></div>
 							</div>
-							<div><mk-time :time="file.createdAt" mode="detail"/></div>
 						</div>
 					</div>
+					<div v-show="file._open">
+						<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
+					</div>
 				</div>
-				<div v-show="file._open">
-					<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
-				</div>
-			</div>
+			</sequential-entrance>
 			<ui-button v-if="existMore" @click="fetch">{{ $t('@.load-more') }}</ui-button>
 		</section>
 	</ui-card>
diff --git a/src/client/app/admin/views/users.vue b/src/client/app/admin/views/users.vue
index b0821c2453..21d41efba8 100644
--- a/src/client/app/admin/views/users.vue
+++ b/src/client/app/admin/views/users.vue
@@ -38,25 +38,27 @@
 					<option value="remote">{{ $t('users.origin.remote') }}</option>
 				</ui-select>
 			</ui-horizon-group>
-			<div class="kofvwchc" v-for="user in users">
-				<div>
-					<a :href="user | userPage(null, true)">
-						<mk-avatar class="avatar" :user="user" :disable-link="true"/>
-					</a>
-				</div>
-				<div>
-					<header>
-						<b><mk-user-name :user="user"/></b>
-						<span class="username">@{{ user | acct }}</span>
-					</header>
+			<sequential-entrance animation="entranceFromTop" delay="25">
+				<div class="kofvwchc" v-for="user in users">
 					<div>
-						<span>{{ $t('users.updatedAt') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
+						<a :href="user | userPage(null, true)">
+							<mk-avatar class="avatar" :user="user" :disable-link="true"/>
+						</a>
 					</div>
 					<div>
-						<span>{{ $t('users.createdAt') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
+						<header>
+							<b><mk-user-name :user="user"/></b>
+							<span class="username">@{{ user | acct }}</span>
+						</header>
+						<div>
+							<span>{{ $t('users.updatedAt') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
+						</div>
+						<div>
+							<span>{{ $t('users.createdAt') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
+						</div>
 					</div>
 				</div>
-			</div>
+			</sequential-entrance>
 			<ui-button v-if="existMore" @click="fetchUsers">{{ $t('@.load-more') }}</ui-button>
 		</section>
 	</ui-card>
-- 
cgit v1.2.3-freya