Add scroll to bottom button

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

1 files changed, 40 insertions, 6 deletions

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 7405d0d59..02784230a 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -51,6 +51,13 @@ get the messagesList array and loop through the list to generate the messages.
 				type="messages"
 				:count="15" />
 		</template>
+		<transition name="fade">
+			<button v-show="!isScrolledToBottom"
+				class="scroll-to-bottom"
+				@click="scrollToBottom">
+				<ChevronDown :size="24" fill-color="#fff" />
+			</button>
+		</transition>
 	</div>
 </template>
 
@@ -65,12 +72,14 @@ import isInLobby from '../../mixins/isInLobby'
 import debounce from 'debounce'
 import { EventBus } from '../../services/EventBus'
 import LoadingPlaceholder from '../LoadingPlaceholder'
+import ChevronDown from 'vue-material-design-icons/ChevronDown'
 
 export default {
 	name: 'MessagesList',
 	components: {
 		LoadingPlaceholder,
 		MessagesGroup,
+		ChevronDown,
 	},
 
 	mixins: [
@@ -200,6 +209,10 @@ export default {
 		chatIdentifier() {
 			return this.token + ':' + this.isParticipant + ':' + this.isInLobby
 		},
+
+		scroller() {
+			return document.querySelector('.scroller')
+		},
 	},
 
 	watch: {
@@ -503,17 +516,16 @@ export default {
 
 		debounceHandleScroll: debounce(function() {
 			this.handleScroll()
-		}, 600),
+		}, 200),
 		/**
 		 * When the div is scrolled, this method checks if it's been scrolled to the top
 		 * or to the bottom of the list bottom.
 		 */
 		async handleScroll() {
-			const scroller = document.querySelector('.scroller')
-			const scrollHeight = scroller.scrollHeight
-			const scrollTop = scroller.scrollTop
+			const scrollHeight = this.scroller.scrollHeight
+			const scrollTop = this.scroller.scrollTop
 			const scrollOffset = scrollHeight - scrollTop
-			const elementHeight = scroller.clientHeight
+			const elementHeight = this.scroller.clientHeight
 			const tolerance = 10
 			if (scrollOffset < elementHeight + tolerance && scrollOffset > elementHeight - tolerance) {
 				this.isScrolledToBottom = true
@@ -549,8 +561,9 @@ export default {
 		 */
 		scrollToBottom() {
 			this.$nextTick(function() {
-				document.querySelector('.scroller').scrollTop = document.querySelector('.scroller').scrollHeight
+				this.scroller.scrollTop = this.scroller.scrollHeight
 			})
+			this.isScrolledToBottom = true
 		},
 
 		/**
@@ -581,9 +594,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../assets/variables.scss';
+
 .scroller {
 	flex: 1 0;
 	overflow-y: auto;
+	scroll-behavior: smooth;
 	&__loading {
 		height: 50px;
 		display: flex;
@@ -591,4 +607,22 @@ export default {
 	}
 }
 
+.scroll-to-bottom {
+	position: absolute;
+	width: 44px;
+	height: 44px;
+	background-color: var(--color-primary-element);
+	bottom: 76px;
+	right: 24px;
+	z-index: 2;
+	padding: 0;
+	margin: 0;
+	&:hover,
+	&:focus {
+		background-color: var(--color-primary-element-light);
+		opacity: 1 !important;
+		border: none;
+	}
+}
+
 </style>