From f4f83cb0919abd2c9d9bee2a8d7e0960a7c2b705 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Tue, 4 Oct 2022 15:34:13 +0200
Subject: [PATCH] client: remove click-anime directive

---
 packages/client/src/components/launch-pad.vue | 10 +++---
 packages/client/src/components/post-form.vue  |  2 +-
 packages/client/src/directives/click-anime.ts | 31 -------------------
 packages/client/src/directives/index.ts       |  2 --
 packages/client/src/pages/gallery/post.vue    |  6 ++--
 packages/client/src/pages/page.vue            |  4 +--
 packages/client/src/pages/user/home.vue       |  6 ++--
 packages/client/src/style.scss                | 14 ---------
 .../src/ui/_common_/sidebar-for-mobile.vue    | 12 +++----
 packages/client/src/ui/_common_/sidebar.vue   | 12 +++----
 packages/client/src/ui/classic.header.vue     | 12 +++----
 packages/client/src/ui/classic.sidebar.vue    | 14 ++++-----
 12 files changed, 39 insertions(+), 86 deletions(-)
 delete mode 100644 packages/client/src/directives/click-anime.ts

diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue
index 383c3e332..bd5494739 100644
--- a/packages/client/src/components/launch-pad.vue
+++ b/packages/client/src/components/launch-pad.vue
@@ -3,12 +3,12 @@
 	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
 		<div class="main">
 			<template v-for="item in items">
-				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
+				<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
 					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 				</button>
-				<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
+				<MkA v-else :to="item.to" @click.passive="close()">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
 					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
@@ -16,15 +16,15 @@
 			</template>
 		</div>
 		<div class="sub">
-			<button v-click-anime class="_button" @click="help">
+			<button class="_button" @click="help">
 				<i class="fas fa-question-circle icon"></i>
 				<div class="text">{{ i18n.ts.help }}</div>
 			</button>
-			<MkA v-click-anime to="/about" @click.passive="close()">
+			<MkA to="/about" @click.passive="close()">
 				<i class="fas fa-info-circle icon"></i>
 				<div class="text">{{ i18n.ts.instanceInfo }}</div>
 			</MkA>
-			<MkA v-click-anime to="/about-foundkey" @click.passive="close()">
+			<MkA to="/about-foundkey" @click.passive="close()">
 				<img src="/static-assets/favicon.png" class="icon"/>
 				<div class="text">{{ i18n.ts.aboutMisskey }}</div>
 			</MkA>
diff --git a/packages/client/src/components/post-form.vue b/packages/client/src/components/post-form.vue
index 8f1b78211..c16680abb 100644
--- a/packages/client/src/components/post-form.vue
+++ b/packages/client/src/components/post-form.vue
@@ -7,7 +7,7 @@
 >
 	<header>
 		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="fas fa-times"></i></button>
-		<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
+		<button v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
 			<MkAvatar :user="postAccount ?? $i" class="avatar"/>
 		</button>
 		<div>
diff --git a/packages/client/src/directives/click-anime.ts b/packages/client/src/directives/click-anime.ts
deleted file mode 100644
index e2f514b7c..000000000
--- a/packages/client/src/directives/click-anime.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Directive } from 'vue';
-import { defaultStore } from '@/store';
-
-export default {
-	mounted(el, binding, vn) {
-		/*
-		if (!defaultStore.state.animation) return;
-
-		el.classList.add('_anime_bounce_standBy');
-
-		el.addEventListener('mousedown', () => {
-			el.classList.add('_anime_bounce_standBy');
-			el.classList.add('_anime_bounce_ready');
-
-			el.addEventListener('mouseleave', () => {
-				el.classList.remove('_anime_bounce_ready');
-			});
-		});
-
-		el.addEventListener('click', () => {
-			el.classList.add('_anime_bounce');
-		});
-
-		el.addEventListener('animationend', () => {
-			el.classList.remove('_anime_bounce_ready');
-			el.classList.remove('_anime_bounce');
-			el.classList.add('_anime_bounce_standBy');
-		});
-		*/
-	},
-} as Directive;
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index fc9b6f86d..548df230d 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -9,7 +9,6 @@ import hotkey from './hotkey';
 import appear from './appear';
 import anim from './anim';
 import stickyContainer from './sticky-container';
-import clickAnime from './click-anime';
 import panel from './panel';
 import adaptiveBorder from './adaptive-border';
 
@@ -23,7 +22,6 @@ export default function(app: App) {
 	app.directive('hotkey', hotkey);
 	app.directive('appear', appear);
 	app.directive('anim', anim);
-	app.directive('click-anime', clickAnime);
 	app.directive('sticky-container', stickyContainer);
 	app.directive('panel', panel);
 	app.directive('adaptive-border', adaptiveBorder);
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 94b5c985f..2886321d2 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -22,9 +22,9 @@
 								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
 							</div>
 							<div class="other">
-								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
-								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
+								<button v-tooltip="i18n.ts.shareWithNote" class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+								<button v-tooltip="i18n.ts.share" class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
 							</div>
 						</div>
 						<div class="user">
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 82b2f7cd1..ebbd930f6 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -17,8 +17,8 @@
 							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
 						</div>
 						<div class="other">
-							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.shareWithNote" class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.share" class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
 						</div>
 					</div>
 					<div class="user">
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 58cd90dd8..cb4d0efce 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -69,15 +69,15 @@
 						</dl>
 					</div>
 					<div class="status">
-						<MkA v-click-anime :to="userPage(user)" :class="{ active: page === 'index' }">
+						<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
 							<b>{{ number(user.notesCount) }}</b>
 							<span>{{ i18n.ts.notes }}</span>
 						</MkA>
-						<MkA v-click-anime :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
+						<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
 							<b>{{ number(user.followingCount) }}</b>
 							<span>{{ i18n.ts.following }}</span>
 						</MkA>
-						<MkA v-click-anime :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
+						<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
 							<b>{{ number(user.followersCount) }}</b>
 							<span>{{ i18n.ts.followers }}</span>
 						</MkA>
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 54358e4ee..f96b0e63f 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -515,20 +515,6 @@ hr {
 	}
 }
 
-._anime_bounce {
-	will-change: transform;
-  animation: bounce ease 0.7s;
-  animation-iteration-count: 1;
-  transform-origin: 50% 50%;
-}
-._anime_bounce_ready {
-	will-change: transform;
-	transform:  scaleX(0.90) scaleY(0.90) ;
-}
-._anime_bounce_standBy {
-	transition: transform 0.1s ease;
-}
-
 @keyframes bounce{
   0% {
     transform:  scaleX(0.90) scaleY(0.90) ;
diff --git a/packages/client/src/ui/_common_/sidebar-for-mobile.vue b/packages/client/src/ui/_common_/sidebar-for-mobile.vue
index 41a82d6cb..88d5c0bf4 100644
--- a/packages/client/src/ui/_common_/sidebar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/sidebar-for-mobile.vue
@@ -1,28 +1,28 @@
 <template>
 <div class="kmwsukvl">
 	<div>
-		<button v-click-anime class="item _button account" @click="openAccountMenuWrapper">
+		<button class="item _button account" @click="openAccountMenuWrapper">
 			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 		</button>
-		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+		<MkA class="item index" active-class="active" to="/" exact>
 			<i class="fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 		</MkA>
 		<template v-for="item in menu" :key="item">
 			<div v-if="item === '-'" class="divider"></div>
-			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
 				<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
 				<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 			</component>
 		</template>
 		<div class="divider"></div>
-		<MkA v-if="iAmModerator" v-click-anime class="item" active-class="active" to="/admin">
+		<MkA v-if="iAmModerator" class="item" active-class="active" to="/admin">
 			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 		</MkA>
-		<button v-click-anime class="item _button" @click="more">
+		<button class="item _button" @click="more">
 			<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
 			<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
-		<MkA v-click-anime class="item" active-class="active" to="/settings">
+		<MkA class="item" active-class="active" to="/settings">
 			<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 		</MkA>
 		<button class="item _button post" data-cy-open-post-form @click="post">
diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue
index fe3c5e84d..e3912df40 100644
--- a/packages/client/src/ui/_common_/sidebar.vue
+++ b/packages/client/src/ui/_common_/sidebar.vue
@@ -1,28 +1,28 @@
 <template>
 <div class="mvcprjjd" :class="{ iconOnly }">
 	<div>
-		<button v-click-anime class="item _button account" @click="openAccountMenu">
+		<button class="item _button account" @click="openAccountMenu">
 			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 		</button>
-		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+		<MkA class="item index" active-class="active" to="/" exact>
 			<i class="fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 		</MkA>
 		<template v-for="item in menu">
 			<div v-if="item === '-'" class="divider"></div>
-			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
 				<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
 				<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 			</component>
 		</template>
 		<div class="divider"></div>
-		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
+		<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin">
 			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 		</MkA>
-		<button v-click-anime class="item _button" @click="more">
+		<button class="item _button" @click="more">
 			<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
 			<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
-		<MkA v-click-anime class="item" active-class="active" to="/settings">
+		<MkA class="item" active-class="active" to="/settings">
 			<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 		</MkA>
 		<button class="item _button post" data-cy-open-post-form @click="os.post">
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 21d1f759c..41d861661 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -2,30 +2,30 @@
 <div class="azykntjl">
 	<div class="body">
 		<div class="left">
-			<MkA v-click-anime v-tooltip="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
+			<MkA v-tooltip="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
 				<i class="fas fa-home fa-fw"></i>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
-				<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime v-tooltip="i18n.ts[menuDef[item].title]" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+				<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-tooltip="i18n.ts[menuDef[item].title]" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
 					<i class="fa-fw" :class="menuDef[item].icon"></i>
 					<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 				</component>
 			</template>
 			<div class="divider"></div>
-			<MkA v-if="iAmModerator" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
+			<MkA v-if="iAmModerator" v-tooltip="i18n.ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
 				<i class="fas fa-door-open fa-fw"></i>
 			</MkA>
-			<button v-click-anime class="item _button" @click="more">
+			<button class="item _button" @click="more">
 				<i class="fas fa-ellipsis-h fa-fw"></i>
 				<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 			</button>
 		</div>
 		<div class="right">
-			<MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
+			<MkA v-tooltip="i18n.ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
 				<i class="fas fa-cog fa-fw"></i>
 			</MkA>
-			<button v-click-anime class="item _button account" @click="openAccountMenuWrapper">
+			<button class="item _button account" @click="openAccountMenuWrapper">
 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
 			</button>
 			<div class="post" @click="post">
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 39b031d6c..00177ba15 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -1,6 +1,6 @@
 <template>
 <div ref="sidebar" class="npcljfve" :class="{ iconOnly }">
-	<button v-if="$i" v-click-anime class="item _button account" @click="openAccountMenuWrapper">
+	<button v-if="$i" class="item _button account" @click="openAccountMenuWrapper">
 		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 	</button>
 	<div class="post" data-cy-open-post-form @click="() => { os.post(); }">
@@ -9,30 +9,30 @@
 		</MkButton>
 	</div>
 	<div class="divider"></div>
-	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+	<MkA class="item index" active-class="active" to="/" exact>
 		<i class="fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 	</MkA>
 	<template v-for="item in menu">
 		<div v-if="item === '-'" class="divider"></div>
-		<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+		<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
 			<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
 			<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 		</component>
 	</template>
 	<div class="divider"></div>
-	<MkA v-if="iAmModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
+	<MkA v-if="iAmModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
 		<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 	</MkA>
-	<button v-click-anime class="item _button" @click="more">
+	<button class="item _button" @click="more">
 		<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
 		<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 	</button>
-	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
+	<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
 		<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 	</MkA>
 	<div class="divider"></div>
 	<div class="about">
-		<MkA v-click-anime class="link" to="/about">
+		<MkA class="link" to="/about">
 			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
 		</MkA>
 	</div>