forked from FoundKeyGang/FoundKey
Merge pull request 'client: remove click-anime directive' (#185) from remove-anime into main
This commit is contained in:
commit
def5eb0d2e
12 changed files with 39 additions and 86 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
|
@ -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);
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) ;
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue