(fix) room footer shadow

Author: antoine92190

src/lib/Room/Room.vue

@@ -126,6 +126,9 @@
 			v-show="Object.keys(room).length && showFooter"
 			ref="roomFooter"
 			class="vac-room-footer"
+			:class="{
+				'vac-app-box-shadow': shadowFooter
+			}"
 		>
 			<room-emojis
 				:filtered-emojis="filteredEmojis"
@@ -159,12 +162,7 @@
 				</template>
 			</room-files>
 
-			<div
-				class="vac-box-footer"
-				:class="{
-					'vac-app-box-shadow': filteredEmojis.length || filteredUsersTag.length
-				}"
-			>
+			<div class="vac-box-footer">
 				<div v-if="showAudio && !files.length" class="vac-icon-textarea-left">
 					<template v-if="isRecording">
 						<div
@@ -439,6 +437,14 @@ export default {
 		},
 		recordedTime() {
 			return new Date(this.recorder.duration * 1000).toISOString().substr(14, 5)
+		},
+		shadowFooter() {
+			return (
+				!!this.filteredEmojis.length ||
+				!!this.filteredUsersTag.length ||
+				!!this.files.length ||
+				!!this.messageReply
+			)
 		}
 	},
 

src/lib/Room/RoomEmojis/RoomEmojis.vue

@@ -2,7 +2,7 @@
 	<transition name="vac-slide-up">
 		<div
 			v-if="filteredEmojis.length"
-			class="vac-emojis-container vac-app-box-shadow"
+			class="vac-emojis-container"
 			:style="{ bottom: `${$parent.$refs.roomFooter.clientHeight}px` }"
 		>
 			<div

src/lib/Room/RoomFiles/RoomFiles.vue

@@ -2,7 +2,7 @@
 	<transition name="vac-slide-up">
 		<div
 			v-if="files.length"
-			class="vac-files-container vac-app-box-shadow"
+			class="vac-files-container"
 			:style="{ bottom: `${$parent.$refs.roomFooter.clientHeight}px` }"
 		>
 			<div class="vac-files-box">

src/lib/Room/RoomMessageReply/RoomMessageReply.vue

@@ -2,7 +2,7 @@
 	<transition name="vac-slide-up">
 		<div
 			v-if="messageReply"
-			class="vac-reply-container vac-app-box-shadow"
+			class="vac-reply-container"
 			:style="{ bottom: `${$parent.$refs.roomFooter.clientHeight}px` }"
 		>
 			<div class="vac-reply-box">

src/lib/Room/RoomUsersTag/RoomUsersTag.vue

@@ -2,7 +2,7 @@
 	<transition name="vac-slide-up">
 		<div
 			v-if="filteredUsersTag.length"
-			class="vac-tags-container vac-app-box-shadow"
+			class="vac-tags-container"
 			:style="{ bottom: `${$parent.$refs.roomFooter.clientHeight}px` }"
 		>
 			<div

src/styles/helper.scss

@@ -15,6 +15,7 @@
 }
 
 .vac-app-box-shadow {
+	transition: all 0.5s;
 	box-shadow: 0 2px 2px -4px rgba(0, 0, 0, 0.1),
 		0 2px 2px 1px rgba(0, 0, 0, 0.12), 0 1px 8px 1px rgba(0, 0, 0, 0.12);
 }