From af07ffce2b47db20db5d786b535fd5a042ea0620 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Tue, 7 Feb 2023 16:58:28 +0900
Subject: [PATCH] improve(friendly): Disable transition animations for headers
 and floating buttons when Reduce UI animations option is enabled

---
 .../frontend/src/components/global/MkPageHeader.vue  |  6 +++++-
 packages/frontend/src/ui/friendly.vue                | 12 ++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index f56dfb6ca7..1c71e619ad 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -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);
 	}
diff --git a/packages/frontend/src/ui/friendly.vue b/packages/frontend/src/ui/friendly.vue
index 625f7a2ba5..b10b227339 100644
--- a/packages/frontend/src/ui/friendly.vue
+++ b/packages/frontend/src/ui/friendly.vue
@@ -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);
 	}