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

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

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

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

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

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 hotkey from "./hotkey";
import appear from "./appear"; import appear from "./appear";
import anim from "./anim"; import anim from "./anim";
import clickAnime from "./click-anime";
import panel from "./panel"; import panel from "./panel";
import adaptiveBorder from "./adaptive-border"; import adaptiveBorder from "./adaptive-border";
import focus from "./focus"; import focus from "./focus";
@ -23,7 +22,6 @@ export default function (app: App) {
app.directive("hotkey", hotkey); app.directive("hotkey", hotkey);
app.directive("appear", appear); app.directive("appear", appear);
app.directive("anim", anim); app.directive("anim", anim);
app.directive("click-anime", clickAnime);
app.directive("panel", panel); app.directive("panel", panel);
app.directive("adaptive-border", adaptiveBorder); app.directive("adaptive-border", adaptiveBorder);
app.directive("focus", focus); app.directive("focus", focus);

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

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

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

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

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

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

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

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