natty
/
magnetar
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Frontend: Removed the click-anime Vue directive

This commit is contained in:
Natty 2024-01-10 21:27:03 +01:00
parent b2a55f1d6d
commit 22208d4c68
Signed by: natty
GPG Key ID: BF6CB659ADEE60EC
11 changed files with 22 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
fe_calckey/frontend/client/src/components/MkLaunchPad.vue
View File

@ -18,7 +18,6 @@
<template v-for="item in items">
<button
v-if="item.action"
v-click-anime
class="_button"
@click="
($event) => {
@ -33,12 +32,7 @@
><i class="ph-circle ph-fill"></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"
@ -52,14 +46,11 @@
</template>
<script lang="ts" setup>
import {} from "vue";
import MkModal from "@/components/MkModal.vue";
import { navbarItemDef } from "@/navbar";
import { instanceName } from "@/config";
import { defaultStore } from "@/store";
import { i18n } from "@/i18n";
import { deviceKind } from "@/scripts/device-kind";
import * as os from "@/os";
const props = withDefaults(
defineProps<{

1
fe_calckey/frontend/client/src/components/MkPostForm.vue
View File

@ -15,7 +15,6 @@
</button>
<button
v-if="$props.editId == null"
v-click-anime
v-tooltip="i18n.ts.switchAccount"
class="account _button"
@click="openAccountMenu"

39
fe_calckey/frontend/client/src/components/MkTab.vue
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { defineComponent, h, resolveDirective, withDirectives } from "vue";
import { defineComponent, h } from "vue";
export default defineComponent({
props: {
@ -24,27 +24,24 @@ export default defineComponent({
role: "tablist",
},
options.map((option) =>
withDirectives(
h(
"button",
{
class: "_button",
role: "tab",
key: option.key,
"aria-selected":
this.modelValue === option.props?.value
? "true"
: "false",
onClick: () => {
this.$emit(
"update:modelValue",
option.props?.value
);
},
h(
"button",
{
class: "_button",
role: "tab",
key: option.key,
"aria-selected":
this.modelValue === option.props?.value
? "true"
: "false",
onClick: () => {
this.$emit(
"update:modelValue",
option.props?.value
);
},
option.children
),
[[resolveDirective("click-anime")]]
},
option.children
)
)
);

31
fe_calckey/frontend/client/src/directives/click-anime.ts
View File

@ -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;

2
fe_calckey/frontend/client/src/directives/index.ts
View File

@ -8,7 +8,6 @@ import tooltip from "./tooltip";
import hotkey from "./hotkey";
import appear from "./appear";
import anim from "./anim";
import clickAnime from "./click-anime";
import panel from "./panel";
import adaptiveBorder from "./adaptive-border";
import focus from "./focus";
@ -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("panel", panel);
app.directive("adaptive-border", adaptiveBorder);
app.directive("focus", focus);

3
fe_calckey/frontend/client/src/pages/gallery/post.vue
View File

@ -60,7 +60,6 @@
<button
v-if="$i && $i.id === post.user.id"
v-tooltip="i18n.ts.edit"
v-click-anime
class="_button"
@click="edit"
>
@ -70,7 +69,6 @@
</button>
<button
v-tooltip="i18n.ts.shareWithNote"
v-click-anime
class="_button"
@click="shareWithNote"
>
@ -81,7 +79,6 @@
<button
v-if="shareAvailable()"
v-tooltip="i18n.ts.share"
v-click-anime
class="_button"
@click="share"
>

2
fe_calckey/frontend/client/src/pages/page.vue
View File

@ -120,7 +120,6 @@
<div class="other">
<button
v-tooltip="i18n.ts.shareWithNote"
v-click-anime
class="_button"
@click="shareWithNote"
>
@ -131,7 +130,6 @@
<button
v-if="shareAvailable()"
v-tooltip="i18n.ts.share"
v-click-anime
class="_button"
@click="share"
>

3
fe_calckey/frontend/client/src/pages/user/home.vue
View File

@ -309,7 +309,6 @@
</div>
<div class="status">
<MkA
v-click-anime
:to="userPage(user)"
:class="{ active: page === 'index' }"
>
@ -317,7 +316,6 @@
<span>{{ i18n.ts.notes }}</span>
</MkA>
<MkA
v-click-anime
:to="userPage(user, 'following')"
:class="{ active: page === 'following' }"
>
@ -325,7 +323,6 @@
<span>{{ i18n.ts.following }}</span>
</MkA>
<MkA
v-click-anime
:to="userPage(user, 'followers')"
:class="{ active: page === 'followers' }"
>

29
fe_calckey/frontend/client/src/style.scss
View File

@ -735,35 +735,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.9) scaleY(0.9);
}
._anime_bounce_standBy {
transition: transform 0.1s ease;
}
@keyframes bounce {
0% {
transform: scaleX(0.9) scaleY(0.9);
}
19% {
transform: scaleX(1.1) scaleY(1.1);
}
48% {
transform: scaleX(0.95) scaleY(0.95);
}
100% {
transform: scaleX(1) scaleY(1);
}
}
.ph-xxs {
font-size: 0.5em;
}

20
fe_calckey/frontend/client/src/ui/_common_/navbar-for-mobile.vue
View File

@ -8,7 +8,6 @@
:style="{ backgroundImage: `url(${$i.bannerUrl})` }"
></div>
<button
v-click-anime
v-tooltip.noDelay.right="
`${i18n.ts.account}: @${$i.username}`
"
@ -23,13 +22,7 @@
</button>
</div>
<div class="middle">
<MkA
v-click-anime
class="item index"
active-class="active"
to="/"
exact
>
<MkA class="item index" active-class="active" to="/" exact>
<i class="icon ph-house ph-bold ph-lg ph-fw ph-lg"></i
><span class="text">{{ i18n.ts.timeline }}</span>
</MkA>
@ -41,7 +34,6 @@
navbarItemDef[item] &&
navbarItemDef[item].show !== false
"
v-click-anime
class="item _button"
:class="[item, { active: navbarItemDef[item].active }]"
active-class="active"
@ -69,7 +61,6 @@
<div class="divider"></div>
<MkA
v-if="$i.isAdmin || $i.isModerator"
v-click-anime
class="item"
active-class="active"
to="/admin"
@ -77,7 +68,7 @@
<i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></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="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
></i
@ -86,12 +77,7 @@
><i class="icon ph-circle ph-fill"></i
></span>
</button>
<MkA
v-click-anime
class="item"
active-class="active"
to="/settings"
>
<MkA class="item" active-class="active" to="/settings">
<i class="icon ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i
><span class="text">{{ i18n.ts.settings }}</span>
</MkA>

6
fe_calckey/frontend/client/src/ui/_common_/navbar.vue
View File

@ -8,7 +8,6 @@
:style="{ backgroundImage: `url(${$i.bannerUrl})` }"
></div>
<button
v-click-anime
v-tooltip.noDelay.right="
`${i18n.ts.account}: @${$i.username}`
"
@ -24,7 +23,6 @@
</div>
<nav class="middle">
<MkA
v-click-anime
v-tooltip.noDelay.right="i18n.ts.timeline"
class="item index"
active-class="active"
@ -42,7 +40,6 @@
navbarItemDef[item] &&
navbarItemDef[item].show !== false
"
v-click-anime
v-tooltip.noDelay.right="
i18n.ts[navbarItemDef[item].title]
"
@ -73,7 +70,6 @@
<div class="divider"></div>
<MkA
v-if="$i.isAdmin || $i.isModerator"
v-click-anime
v-tooltip.noDelay.right="i18n.ts.controlPanel"
class="item _button"
active-class="active"
@ -92,7 +88,6 @@
><span class="text">{{ i18n.ts.controlPanel }}</span>
</MkA>
<button
v-click-anime
v-tooltip.noDelay.right="i18n.ts.more"
class="item _button"
@click="more"
@ -106,7 +101,6 @@
></span>
</button>
<MkA
v-click-anime
v-tooltip.noDelay.right="i18n.ts.settings"
class="item _button"
active-class="active"