worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

improve(friendly): Disable transition animations for headers and floating buttons when Reduce UI animations option is enabled

Browse source
This commit is contained in:
NoriDev 2023-02-07 16:58:28 +09:00
parent 396cd5f55c
commit af07ffce2b
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/frontend/src/components/global/MkPageHeader.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="show" ref="el" :class="[$style.root, {[$style.slim]: narrow, [$style.thin]: thin_, [$style.showEl]: showEl && isFriendly && isMobile && !isFixedHeader }]" :style="{ background: bg }" @click="onClick"> <div v-if="show" ref="el" :class="[$style.root, {[$style.slim]: narrow, [$style.thin]: thin_, [$style.reduceAnimation]: !$store.state.animation, [$style.showEl]: showEl && isFriendly && isMobile && !isFixedHeader }]" :style="{ background: bg }" @click="onClick">
<div v-if="narrow" :class="$style.buttonsLeft"> <div v-if="narrow" :class="$style.buttonsLeft">
<MkAvatar v-if="props.displayMyAvatar && $i && !isFriendly" :class="$style.avatar" :user="$i"/> <MkAvatar v-if="props.displayMyAvatar && $i && !isFriendly" :class="$style.avatar" :user="$i"/>
</div> </div>
@ -255,6 +255,10 @@ onUnmounted(() => {
} }
} }
&.reduceAnimation {
transition: opacity 0s, transform 0s;
}
&.showEl { &.showEl {
transform: translateY(-50.55px); transform: translateY(-50.55px);
} }

12
packages/frontend/src/ui/friendly.vue
View file

@ -16,9 +16,9 @@
<XWidgets :margin-top="'var(--margin)'" @mounted="attachSticky"/> <XWidgets :margin-top="'var(--margin)'" @mounted="attachSticky"/>
</div> </div>
<button v-if="isMobile && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" :class="[$style.floatNavButton, {[$style.showEl]: showEl }]" class="nav _button" @click="drawerMenuShowing = true"><CPAvatar :class="$style.floatNavButtonAvatar" :user="$i"/></button> <button v-if="isMobile && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" :class="[$style.floatNavButton, {[$style.reduceAnimation]: !$store.state.animation, [$style.showEl]: showEl }]" class="nav _button" @click="drawerMenuShowing = true"><CPAvatar :class="$style.floatNavButtonAvatar" :user="$i"/></button>
<button v-if="isMobile && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" :class="[$style.floatPostButton, {[$style.showEl]: showEl }]" class="post _button" @click="os.post()"><span :class="[$style.floatPostButtonBg, {[$style.reduceBlurEffect]: !$store.state.useBlurEffect}]"></span><i class="ti ti-pencil"></i></button> <button v-if="isMobile && !(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" :class="[$style.floatPostButton, {[$style.reduceAnimation]: !$store.state.animation, [$style.showEl]: showEl }]" class="post _button" @click="os.post()"><span :class="[$style.floatPostButtonBg, {[$style.reduceBlurEffect]: !$store.state.useBlurEffect}]"></span><i class="ti ti-pencil"></i></button>
<button v-if="!isDesktop && !isMobile" :class="[$style.widgetButton, {[$style.showEl]: showEl }]" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button> <button v-if="!isDesktop && !isMobile" :class="[$style.widgetButton, {[$style.showEl]: showEl }]" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
@ -354,6 +354,10 @@ $float-button-size: 65px;
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px));
transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s;
&.reduceAnimation {
transition: opacity 0s, transform 0s;
}
&.showEl { &.showEl {
transform: translateX(-250px); transform: translateX(-250px);
} }
@ -382,6 +386,10 @@ $float-button-size: 65px;
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px));
transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s;
&.reduceAnimation {
transition: opacity 0s, transform 0s;
}
&.showEl { &.showEl {
transform: translateX(250px); transform: translateX(250px);
} }