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>
<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">
<MkAvatar v-if="props.displayMyAvatar && $i && !isFriendly" :class="$style.avatar" :user="$i"/>
</div>
@ -255,6 +255,10 @@ onUnmounted(() => {
}
}
&.reduceAnimation {
transition: opacity 0s, transform 0s;
}
&.showEl {
transform: translateY(-50.55px);
}

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

@ -16,9 +16,9 @@
<XWidgets :margin-top="'var(--margin)'" @mounted="attachSticky"/>
</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>
@ -354,6 +354,10 @@ $float-button-size: 65px;
backdrop-filter: var(--blur, blur(15px));
transition: opacity 0.5s, transform 0.5s;
&.reduceAnimation {
transition: opacity 0s, transform 0s;
}
&.showEl {
transform: translateX(-250px);
}
@ -382,6 +386,10 @@ $float-button-size: 65px;
backdrop-filter: var(--blur, blur(15px));
transition: opacity 0.5s, transform 0.5s;
&.reduceAnimation {
transition: opacity 0s, transform 0s;
}
&.showEl {
transform: translateX(250px);
}