(feat) add icon to scroll to bottom

Author: antoine92190

README.md

@@ -215,7 +215,8 @@ colors="{
     pencil: '#9e9e9e',
     checkmark: '#0696c7',
     eye: '#fff',
-    dropdown: '#fff'
+    dropdown: '#fff',
+    dropdownScroll: '#0a0a0a'
 		}
 }"
 ```

src/ChatWindow/MessagesList.vue

@@ -66,6 +66,11 @@
 					</div>
 				</transition-group>
 			</div>
+			<transition name="bounce">
+				<div class="icon-scroll" v-if="scrollIcon" @click="scrollToBottom">
+					<svg-icon name="dropdown" param="scroll" />
+				</div>
+			</transition>
 		</div>
 		<div ref="roomFooter" class="room-footer">
 			<transition name="slide-up-fade">
@@ -200,14 +205,23 @@ export default {
 			file: null,
 			imageFile: null,
 			menuOpened: false,
-			emojiOpened: false
+			emojiOpened: false,
+			scrollIcon: true
 		}
 	},
 
 	mounted() {
 		window.addEventListener('keypress', e => {
 			if (e.keyCode === 13 && !e.shiftKey) this.sendMessage()
 		})
+
+		document
+			.getElementsByClassName('container-scroll')[0]
+			.addEventListener('scroll', e => {
+				this.scrollIcon =
+					e.target.scrollHeight > 500 &&
+					e.target.scrollHeight - e.target.scrollTop > 1000
+			})
 	},
 
 	watch: {
@@ -335,6 +349,10 @@ export default {
 
 			setTimeout(() => this.resizeTextarea(this.$refs['roomTextarea']), 0)
 		},
+		scrollToBottom() {
+			const element = document.getElementsByClassName('container-scroll')[0]
+			element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' })
+		},
 		autoGrow(el) {
 			this.resizeTextarea(el.srcElement)
 		},
@@ -508,6 +526,24 @@ export default {
 	margin-bottom: 20px;
 }
 
+.icon-scroll {
+	position: absolute;
+	bottom: 80px;
+	right: 20px;
+	padding: 8px;
+	background: #fff;
+	border-radius: 50%;
+	box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+		0 1px 2px 0 rgba(0, 0, 0, 0.12);
+	display: flex;
+	cursor: pointer;
+
+	svg {
+		height: 25px;
+		width: 25px;
+	}
+}
+
 .room-footer {
 	position: absolute;
 	bottom: 0;
@@ -664,4 +700,24 @@ textarea {
 	transform: translateY(10px);
 	opacity: 0;
 }
+
+.bounce-enter-active {
+	animation: bounce-in 0.5s;
+}
+
+.bounce-leave-active {
+	animation: bounce-in 0.3s reverse;
+}
+
+@keyframes bounce-in {
+	0% {
+		transform: scale(0);
+	}
+	50% {
+		transform: scale(1.05);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
 </style>

src/ChatWindow/SvgIcon.vue

@@ -162,4 +162,8 @@ export default {
 #chat-icon-dropdown {
 	fill: var(--chat-icon-color-dropdown);
 }
+
+#chat-icon-dropdown-sroll {
+	fill: var(--chat-icon-color-dropdown-scroll);
+}
 </style>

src/themes/index.js

@@ -43,7 +43,8 @@ export const defaultThemeColors = {
 			pencil: '#9e9e9e',
 			checkmark: '#0696c7',
 			eye: '#fff',
-			dropdown: '#fff'
+			dropdown: '#fff',
+			dropdownScroll: '#0a0a0a'
 		}
 	},
 	dark: {
@@ -90,7 +91,8 @@ export const defaultThemeColors = {
 			pencil: '#ebedf2',
 			checkmark: '#f0d90a',
 			eye: '#fff',
-			dropdown: '#fff'
+			dropdown: '#fff',
+			dropdownScroll: '#0a0a0a'
 		}
 	}
 }
@@ -168,6 +170,7 @@ export const cssThemeVars = ({
 		'--chat-icon-color-pencil': iconsColor.pencil,
 		'--chat-icon-color-checkmark': iconsColor.checkmark,
 		'--chat-icon-color-eye': iconsColor.eye,
-		'--chat-icon-color-dropdown': iconsColor.dropdown
+		'--chat-icon-color-dropdown': iconsColor.dropdown,
+		'--chat-icon-color-dropdown-scroll': iconsColor.dropdownScroll
 	}
 }