(feature) add user tags UI

Author: antoine92190

src/ChatWindow/ChatWindow.vue

@@ -320,6 +320,7 @@ export default {
 	border: var(--chat-container-border);
 	border-radius: var(--chat-container-border-radius);
 	box-shadow: var(--chat-container-box-shadow);
+	-webkit-tap-highlight-color: transparent;
 
 	* {
 		font-family: inherit;

src/ChatWindow/Room.vue

@@ -168,7 +168,11 @@
 			v-show="Object.keys(room).length && showFooter"
 		>
 			<transition name="vac-slide-up">
-				<div v-if="messageReply" class="vac-reply-container">
+				<div
+					v-if="messageReply"
+					class="vac-reply-container"
+					:style="{ bottom: `${roomFooterHeight}px` }"
+				>
 					<div class="vac-reply-box">
 						<img
 							v-if="isImageCheck(messageReply.file)"
@@ -191,7 +195,36 @@
 				</div>
 			</transition>
 
-			<div class="vac-box-footer">
+			<transition name="vac-slide-up">
+				<div
+					v-if="filteredUsersTag.length"
+					class="vac-tags-container vac-app-box-shadow"
+					:style="{ bottom: `${roomFooterHeight}px` }"
+				>
+					<div
+						class="vac-tags-box"
+						v-for="user in filteredUsersTag"
+						:key="user._id"
+						@click="selectUserTag(user)"
+					>
+						<div class="vac-tags-info">
+							<div
+								v-if="user.avatar"
+								class="vac-room-avatar vac-tags-avatar"
+								:style="{ 'background-image': `url('${user.avatar}')` }"
+							></div>
+							<div class="vac-tags-username">
+								{{ user.username }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</transition>
+
+			<div
+				class="vac-box-footer"
+				:class="{ 'vac-app-box-shadow': filteredUsersTag.length }"
+			>
 				<div class="vac-icon-textarea-left" v-if="showAudio && !imageFile">
 					<div class="vac-svg-button" @click="recordAudio">
 						<slot
@@ -255,7 +288,7 @@
 					}"
 					v-model="message"
 					@input="onChangeInput"
-					@keydown.esc="resetMessage"
+					@keydown.esc="escapeTextarea"
 					@keydown.enter.exact.prevent=""
 				></textarea>
 
@@ -339,6 +372,7 @@ import EmojiPicker from './EmojiPicker'
 
 const { messagesValid } = require('../utils/roomValidation')
 const { detectMobile, iOSDevice } = require('../utils/mobileDetection')
+import filteredUsers from '../utils/filterItems'
 import typingText from '../utils/typingText'
 
 export default {
@@ -402,33 +436,40 @@ export default {
 			recorderStream: {},
 			recorder: {},
 			recordedChunks: [],
-			keepKeyboardOpen: false
+			keepKeyboardOpen: false,
+			filteredUsersTag: [],
+			textareaCursorPosition: null,
+			roomFooterHeight: 0
 		}
 	},
 
 	mounted() {
 		this.newMessages = []
+		const isMobile = detectMobile()
 
 		window.addEventListener('keyup', e => {
 			if (e.keyCode === 13 && !e.shiftKey) {
-				if (detectMobile()) {
+				if (isMobile) {
 					this.message = this.message + '\n'
 					setTimeout(() => this.onChangeInput(), 0)
 				} else {
 					this.sendMessage()
 				}
 			}
+
+			this.updateShowUsersTag()
 		})
 
-		if (detectMobile()) {
-			this.$refs['roomTextarea'].addEventListener('blur', () =>
-				setTimeout(() => (this.keepKeyboardOpen = false), 0)
-			)
-			this.$refs['roomTextarea'].addEventListener(
-				'click',
-				() => (this.keepKeyboardOpen = true)
-			)
-		}
+		this.$refs['roomTextarea'].addEventListener('click', () => {
+			if (isMobile) this.keepKeyboardOpen = true
+			this.updateShowUsersTag()
+		})
+
+		this.$refs['roomTextarea'].addEventListener('blur', () => {
+			this.filteredUsersTag = []
+			this.textareaCursorPosition = null
+			if (isMobile) setTimeout(() => (this.keepKeyboardOpen = false), 0)
+		})
 
 		this.$refs.scrollContainer.addEventListener('scroll', e => {
 			this.hideOptions = true
@@ -545,6 +586,55 @@ export default {
 	},
 
 	methods: {
+		updateShowUsersTag() {
+			if (this.$refs['roomTextarea']) {
+				if (
+					this.textareaCursorPosition ===
+					this.$refs['roomTextarea'].selectionStart
+				) {
+					return
+				}
+
+				this.textareaCursorPosition = this.$refs['roomTextarea'].selectionStart
+
+				let n = this.textareaCursorPosition
+
+				while (
+					n > 0 &&
+					this.message.charAt(n - 1) !== '@' &&
+					this.message.charAt(n - 1) !== ' '
+				) {
+					n--
+				}
+
+				const beforeTag = this.message.charAt(n - 2)
+				const notLetterNumber = !beforeTag.match(/^[0-9a-zA-Z]+$/)
+
+				if (
+					this.message.charAt(n - 1) === '@' &&
+					(!beforeTag || beforeTag === ' ' || notLetterNumber)
+				) {
+					const query = this.message.substring(n, this.textareaCursorPosition)
+
+					this.filteredUsersTag = filteredUsers(
+						this.room.users,
+						'username',
+						query,
+						true
+					)
+				} else {
+					this.filteredUsersTag = []
+					this.textareaCursorPosition = null
+				}
+			}
+		},
+		selectUserTag(user) {
+			const cursorPosition = this.$refs['roomTextarea'].selectionStart - 1
+			this.message =
+				this.message.substr(0, cursorPosition + 1) +
+				user.username +
+				this.message.substr(cursorPosition + 1)
+		},
 		onImgLoad() {
 			let height = this.$refs.imageFile.height
 			if (height < 30) height = 30
@@ -624,6 +714,10 @@ export default {
 		addNewMessage(message) {
 			this.newMessages.push(message)
 		},
+		escapeTextarea() {
+			if (this.filteredUsersTag.length) this.filteredUsersTag = []
+			else this.resetMessage()
+		},
 		resetMessage(disableMobileFocus = null, editFile = null) {
 			this.$emit('typing-message', null)
 
@@ -755,6 +849,10 @@ export default {
 
 			el.style.height = 0
 			el.style.height = el.scrollHeight - padding * 2 + 'px'
+
+			setTimeout(() => {
+				this.roomFooterHeight = this.$refs['roomFooter'].clientHeight
+			}, 10)
 		},
 		addEmoji(emoji) {
 			this.message += emoji.icon
@@ -942,7 +1040,7 @@ export default {
 }
 
 .vac-room-footer {
-	width: calc(100% - 1px);
+	width: 100%;
 	border-bottom-right-radius: 4px;
 	z-index: 10;
 }
@@ -954,12 +1052,56 @@ export default {
 	padding: 10px 8px 10px;
 }
 
+.vac-tags-container {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+
+	.vac-tags-box {
+		display: flex;
+		width: 100%;
+		overflow: hidden;
+		cursor: pointer;
+		background: var(--chat-footer-bg-color);
+
+		&:hover {
+			background: var(--chat-footer-bg-color-tag-active);
+			transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+		}
+
+		&:not(:hover) {
+			transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+		}
+	}
+
+	.vac-tags-info {
+		display: flex;
+		overflow: hidden;
+		padding: 10px 20px;
+		align-items: center;
+	}
+
+	.vac-tags-avatar {
+		height: 34px;
+		width: 34px;
+		min-height: 34px;
+		min-width: 34px;
+	}
+
+	.vac-tags-username {
+		font-size: 14px;
+	}
+}
+
 .vac-reply-container {
+	position: absolute;
 	display: flex;
 	padding: 10px 10px 0 10px;
-	background: var(--chat-content-bg-color);
+	background: var(--chat-footer-bg-color);
 	align-items: center;
-	max-width: 100%;
+	width: calc(100% - 20px);
 
 	.vac-reply-box {
 		width: 100%;
@@ -1252,6 +1394,11 @@ export default {
 
 	.vac-reply-container {
 		padding: 5px 8px;
+		width: calc(100% - 16px);
+	}
+
+	.vac-tags-container .vac-tags-info {
+		padding: 8px 12px;
 	}
 
 	.vac-icon-scroll {

src/styles/helper.scss

@@ -14,6 +14,11 @@
 	border-bottom: var(--chat-border-style);
 }
 
+.vac-app-box-shadow {
+	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);
+}
+
 .vac-item-clickable {
 	cursor: pointer;
 }

src/themes/index.js

@@ -27,7 +27,8 @@ export const defaultThemeStyles = {
 			background: '#f8f9fa',
 			borderStyleInput: '1px solid #e1e4e8',
 			borderInputSelected: '#1976d2',
-			backgroundReply: 'rgba(0, 0, 0, 0.08)'
+			backgroundReply: '#e5e5e6',
+			backgroundTagActive: '#e5e5e6'
 		},
 
 		content: {
@@ -152,7 +153,8 @@ export const defaultThemeStyles = {
 			background: '#131415',
 			borderStyleInput: 'none',
 			borderInputSelected: '#1976d2',
-			backgroundReply: '#1b1c1c'
+			backgroundReply: '#1b1c1c',
+			backgroundTagActive: '#1b1c1c'
 		},
 
 		content: {
@@ -290,6 +292,7 @@ export const cssThemeVars = ({
 		'--chat-border-style-input': footer.borderStyleInput,
 		'--chat-border-color-input-selected': footer.borderInputSelected,
 		'--chat-footer-bg-color-reply': footer.backgroundReply,
+		'--chat-footer-bg-color-tag-active': footer.backgroundTagActive,
 
 		// content
 		'--chat-content-bg-color': content.background,

src/utils/filterItems.js

@@ -1,18 +1,15 @@
-export default (items, prop, val) => {
+export default (items, prop, val, startsWith = false) => {
 	if (!val || val === '') return items
 
 	return items.filter(v => {
-		return (
-			v[prop]
-				.toLowerCase()
-				.normalize('NFD')
-				.replace(/[\u0300-\u036f]/g, '')
-				.indexOf(
-					val
-						.toLowerCase()
-						.normalize('NFD')
-						.replace(/[\u0300-\u036f]/g, '')
-				) > -1
-		)
+		if (startsWith) return formatString(v[prop]).startsWith(formatString(val))
+		return formatString(v[prop]).includes(formatString(val))
 	})
 }
+
+function formatString(string) {
+	return string
+		.toLowerCase()
+		.normalize('NFD')
+		.replace(/[\u0300-\u036f]/g, '')
+}