SWREI/switched
0
0
Fork 0
Code

disable animations on more transitions (#8112)

Browse Source
This commit is contained in:
Johann150 2022-01-25 15:18:21 +01:00 committed by GitHub
parent 3f610edc2a
commit e51f59e1b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/form/suspense.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<transition name="fade" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="pending"> <div v-if="pending">
<MkLoading/> <MkLoading/>
</div> </div>

2
packages/client/src/components/notification-toast.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-notification-toast" :style="{ zIndex }"> <div class="mk-notification-toast" :style="{ zIndex }">
<transition name="notification-toast" appear @after-leave="$emit('closed')"> <transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="$emit('closed')">
<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/> <XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
</transition> </transition>
</div> </div>

2
packages/client/src/components/toast.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-toast"> <div class="mk-toast">
<transition name="toast" appear @after-leave="emit('closed')"> <transition :name="$store.state.animation ? 'toast' : ''" appear @after-leave="emit('closed')">
<div v-if="showing" class="body _acrylic" :style="{ zIndex }"> <div v-if="showing" class="body _acrylic" :style="{ zIndex }">
<div class="message"> <div class="message">
{{ message }} {{ message }}

2
packages/client/src/components/ui/container.vue
View File

@ -10,7 +10,7 @@
</button> </button>
</div> </div>
</header> </header>
<transition name="container-toggle" <transition :name="$store.state.animation ? 'container-toggle' : ''"
@enter="enter" @enter="enter"
@after-enter="afterEnter" @after-enter="afterEnter"
@leave="leave" @leave="leave"

2
packages/client/src/components/ui/folder.vue
View File

@ -8,7 +8,7 @@
<template v-else><i class="fas fa-angle-down"></i></template> <template v-else><i class="fas fa-angle-down"></i></template>
</button> </button>
</header> </header>
<transition name="folder-toggle" <transition :name="$store.state.animation ? 'folder-toggle' : ''"
@enter="enter" @enter="enter"
@after-enter="afterEnter" @after-enter="afterEnter"
@leave="leave" @leave="leave"

2
packages/client/src/components/ui/pagination.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<transition name="fade" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
<MkError v-else-if="error" @retry="init()"/> <MkError v-else-if="error" @retry="init()"/>

2
packages/client/src/components/ui/tooltip.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<transition name="tooltip" appear @after-leave="$emit('closed')"> <transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="$emit('closed')">
<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }"> <div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
<slot>{{ text }}</slot> <slot>{{ text }}</slot>
</div> </div>

2
packages/client/src/components/url-preview-popup.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }"> <div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
<transition name="zoom" @after-leave="$emit('closed')"> <transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="$emit('closed')">
<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/> <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
</transition> </transition>
</div> </div>

2
packages/client/src/components/url-preview.vue
View File

@ -7,7 +7,7 @@
<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe> <iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
</div> </div>
<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview"> <div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
<transition name="zoom" mode="out-in"> <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<component :is="self ? 'MkA' : 'a'" v-if="!fetching" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url"> <component :is="self ? 'MkA' : 'a'" v-if="!fetching" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`"> <div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
<button v-if="!playerEnabled && player.url" class="_button" :title="$ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button> <button v-if="!playerEnabled && player.url" class="_button" :title="$ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button>

2
packages/client/src/components/user-preview.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<transition name="popup" appear @after-leave="$emit('closed')"> <transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="$emit('closed')">
<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }"> <div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
<div v-if="fetched" class="info"> <div v-if="fetched" class="info">
<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>

2
packages/client/src/pages/gallery/post.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="_root"> <div class="_root">
<transition name="fade" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="post" class="rkxwuolj"> <div v-if="post" class="rkxwuolj">
<div class="files"> <div class="files">
<div v-for="file in post.files" :key="file.id" class="file"> <div v-for="file in post.files" :key="file.id" class="file">

2
packages/client/src/pages/messaging/messaging-room.vue
View File

@ -24,7 +24,7 @@
</I18n> </I18n>
<MkEllipsis/> <MkEllipsis/>
</div> </div>
<transition name="fade"> <transition :name="$store.state.animation ? 'fade' : ''">
<div v-show="showIndicator" class="new-message"> <div v-show="showIndicator" class="new-message">
<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ $ts.newMessageExists }}</button> <button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ $ts.newMessageExists }}</button>
</div> </div>

4
packages/client/src/pages/my-groups/group.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-group-page"> <div class="mk-group-page">
<transition name="zoom" mode="out-in"> <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<div v-if="group" class="_section"> <div v-if="group" class="_section">
<div class="_content" style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_content" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<MkButton inline @click="invite()">{{ $ts.invite }}</MkButton> <MkButton inline @click="invite()">{{ $ts.invite }}</MkButton>
@ -11,7 +11,7 @@
</div> </div>
</transition> </transition>
<transition name="zoom" mode="out-in"> <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<div v-if="group" class="_section members _gap"> <div v-if="group" class="_section members _gap">
<div class="_title">{{ $ts.members }}</div> <div class="_title">{{ $ts.members }}</div>
<div class="_content"> <div class="_content">

4
packages/client/src/pages/my-lists/list.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<div class="mk-list-page"> <div class="mk-list-page">
<transition name="zoom" mode="out-in"> <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<div v-if="list" class="_section"> <div v-if="list" class="_section">
<div class="_content"> <div class="_content">
<MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton> <MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
@ -11,7 +11,7 @@
</div> </div>
</transition> </transition>
<transition name="zoom" mode="out-in"> <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<div v-if="list" class="_section members _gap"> <div v-if="list" class="_section members _gap">
<div class="_title">{{ $ts.members }}</div> <div class="_title">{{ $ts.members }}</div>
<div class="_content"> <div class="_content">

2
packages/client/src/pages/note.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<div class="fcuexfpr"> <div class="fcuexfpr">
<transition name="fade" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="note" class="note"> <div v-if="note" class="note">
<div v-if="showNext" class="_gap"> <div v-if="showNext" class="_gap">
<XNotes class="_content" :pagination="next" :no-gap="true"/> <XNotes class="_content" :pagination="next" :no-gap="true"/>

2
packages/client/src/pages/page.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<transition name="fade" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh"> <div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
<div class="_block main"> <div class="_block main">
<!-- <!--

2
packages/client/src/pages/user/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<transition name="fade" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="user && narrow === false" class="ftskorzw wide"> <div v-if="user && narrow === false" class="ftskorzw wide">
<MkRemoteCaution v-if="user.host != null" :href="user.url"/> <MkRemoteCaution v-if="user.host != null" :href="user.url"/>

4
packages/client/src/ui/classic.vue
View File

@ -30,7 +30,7 @@
</div> </div>
</div> </div>
<transition name="tray-back"> <transition :name="$store.state.animation ? 'tray-back' : ''">
<div v-if="widgetsShowing" <div v-if="widgetsShowing"
class="tray-back _modalBg" class="tray-back _modalBg"
@click="widgetsShowing = false" @click="widgetsShowing = false"
@ -38,7 +38,7 @@
></div> ></div>
</transition> </transition>
<transition name="tray"> <transition :name="$store.state.animation ? 'tray' : ''">
<XWidgets v-if="widgetsShowing" class="tray"/> <XWidgets v-if="widgetsShowing" class="tray"/>
</transition> </transition>

4
packages/client/src/ui/deck.vue
View File

@ -29,7 +29,7 @@
<button class="button post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button> <button class="button post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button>
</div> </div>
<transition name="menu-back"> <transition :name="$store.state.animation ? 'menu-back' : ''">
<div v-if="drawerMenuShowing" <div v-if="drawerMenuShowing"
class="menu-back _modalBg" class="menu-back _modalBg"
@click="drawerMenuShowing = false" @click="drawerMenuShowing = false"
@ -37,7 +37,7 @@
></div> ></div>
</transition> </transition>
<transition name="menu"> <transition :name="$store.state.animation ? 'menu' : ''">
<XDrawerMenu v-if="drawerMenuShowing" class="menu"/> <XDrawerMenu v-if="drawerMenuShowing" class="menu"/>
</transition> </transition>

8
packages/client/src/ui/universal.vue
View File

@ -36,7 +36,7 @@
<button class="button post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button> <button class="button post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button>
</div> </div>
<transition name="menuDrawer-back"> <transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
<div v-if="drawerMenuShowing" <div v-if="drawerMenuShowing"
class="menuDrawer-back _modalBg" class="menuDrawer-back _modalBg"
@click="drawerMenuShowing = false" @click="drawerMenuShowing = false"
@ -44,11 +44,11 @@
></div> ></div>
</transition> </transition>
<transition name="menuDrawer"> <transition :name="$store.state.animation ? 'menuDrawer' : ''">
<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/> <XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/>
</transition> </transition>
<transition name="widgetsDrawer-back"> <transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
<div v-if="widgetsShowing" <div v-if="widgetsShowing"
class="widgetsDrawer-back _modalBg" class="widgetsDrawer-back _modalBg"
@click="widgetsShowing = false" @click="widgetsShowing = false"
@ -56,7 +56,7 @@
></div> ></div>
</transition> </transition>
<transition name="widgetsDrawer"> <transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
<XWidgets v-if="widgetsShowing" class="widgetsDrawer"/> <XWidgets v-if="widgetsShowing" class="widgetsDrawer"/>
</transition> </transition>

4
packages/client/src/ui/visitor/b.vue
View File

@ -25,7 +25,7 @@
</div> </div>
</div> </div>
<transition name="tray-back"> <transition :name="$store.state.animation ? 'tray-back' : ''">
<div v-if="showMenu" <div v-if="showMenu"
class="menu-back _modalBg" class="menu-back _modalBg"
@click="showMenu = false" @click="showMenu = false"
@ -33,7 +33,7 @@
></div> ></div>
</transition> </transition>
<transition name="tray"> <transition :name="$store.state.animation ? 'tray' : ''">
<div v-if="showMenu" class="menu"> <div v-if="showMenu" class="menu">
<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA> <MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA> <MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>

2
packages/client/src/widgets/federation.vue
View File

@ -4,7 +4,7 @@
<div class="wbrkwalb"> <div class="wbrkwalb">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
<transition-group v-else tag="div" name="chart" class="instances"> <transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
<div v-for="(instance, i) in instances" :key="instance.id" class="instance"> <div v-for="(instance, i) in instances" :key="instance.id" class="instance">
<img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/> <img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
<div class="body"> <div class="body">

2
packages/client/src/widgets/trends.vue
View File

@ -4,7 +4,7 @@
<div class="wbrkwala"> <div class="wbrkwala">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
<transition-group v-else tag="div" name="chart" class="tags"> <transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="tags">
<div v-for="stat in stats" :key="stat.tag"> <div v-for="stat in stats" :key="stat.tag">
<div class="tag"> <div class="tag">
<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA> <MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>