(clean) templates text and css

Author: antoine92190

demo/package.json

@@ -29,6 +29,6 @@
 		"eslint-plugin-vue": "^7.14.0",
 		"node-sass": "^6.0.1",
 		"sass-loader": "^10.1.1",
-		"vue-template-compiler": "^2.6.11"
+		"vue-template-compiler": "^2.6.14"
 	}
 }

demo/src/ChatContainer.vue

@@ -150,11 +150,11 @@ export default {
 				},
 				{
 					tag: 'action',
-					text: 'this is the action'
+					text: 'This is the action'
 				},
 				{
 					tag: 'action 2',
-					text: 'this is the second action'
+					text: 'This is the second action'
 				}
 			]
 			// ,dbRequestCount: 0

src/lib/Room/Room.vue

@@ -140,7 +140,7 @@
 				@select-user-tag="selectUserTag($event)"
 			/>
 
-			<room-Templates-Text
+			<room-templates-text
 				:filtered-templates-text="filteredTemplatesText"
 				:active-template="activeTemplate"
 				:active-up-or-down="activeUpOrDown"
@@ -536,7 +536,7 @@ export default {
 					if (isMobile) {
 						this.message = this.message + '\n'
 						setTimeout(() => this.onChangeInput())
-					} else if (this.filteredTemplatesText.length === 0) {
+					} else if (!this.filteredTemplatesText.length) {
 						this.sendMessage()
 					}
 				}
@@ -786,7 +786,9 @@ export default {
 		},
 		selectTemplateText(template) {
 			this.activeTemplate = false
+
 			if (!template) return
+
 			const { position, endPosition } = this.getCharPosition('/')
 
 			const space = this.message.substr(endPosition, endPosition).length
@@ -801,6 +803,7 @@ export default {
 
 			this.cursorRangePosition =
 				position + template.text.length + space.length + 1
+
 			this.focusTextarea()
 		},
 		beforeEnter() {

src/lib/Room/RoomEmojis/RoomEmojis.scss

@@ -11,14 +11,11 @@
 		font-size: 30px;
 		border-radius: 4px;
 		cursor: pointer;
+		background: var(--chat-footer-bg-color-tag);
+		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 
 		&: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);
 		}
 	}
 }

src/lib/Room/RoomTemplatesText/RoomTemplatesText.scss

@@ -1,5 +1,4 @@
 .vac-template-container {
-	position: absolute;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -14,21 +13,24 @@
 		background: var(--chat-footer-bg-color-tag);
 		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 	}
+
 	.vac-template-active {
 		background: var(--chat-footer-bg-color-tag-active);
-		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
 	}
+
 	.vac-template-info {
 		display: flex;
 		overflow: hidden;
 		padding: 0 20px;
 		align-items: center;
 	}
+
 	.vac-template-tag {
 		font-size: 14px;
 		font-weight: bold;
 		margin-right: 10px;
 	}
+
 	.vac-template-text {
 		font-size: 14px;
 	}
@@ -42,4 +44,4 @@
 			padding: 0 12px;
 		}
 	}
-}
+}

src/lib/Room/RoomTemplatesText/RoomTemplatesText.vue

@@ -15,8 +15,8 @@
 			>
 				<div class="vac-template-info">
 					<div class="vac-template-tag">
-/{{ template.tag }}
-</div>
+						/{{ template.tag }}
+					</div>
 					<div class="vac-template-text">
 						{{ template.text }}
 					</div>

src/lib/Room/RoomUsersTag/RoomUsersTag.scss

@@ -10,15 +10,11 @@
 		height: 54px;
 		overflow: hidden;
 		cursor: pointer;
-		background: var(--chat-footer-bg-color);
+		background: var(--chat-footer-bg-color-tag);
+		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 
 		&: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);
 		}
 	}
 

src/lib/RoomsList/RoomsList.scss

@@ -43,14 +43,10 @@
 		padding: 0 14px;
 		position: relative;
 		min-height: 71px;
+		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 
 		&:hover {
 			background: var(--chat-sidemenu-bg-color-hover);
-			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);
 		}
 	}
 

src/lib/RoomsList/RoomsList.vue

@@ -68,7 +68,7 @@ import Loader from '../../components/Loader/Loader'
 import RoomsSearch from './RoomsSearch/RoomsSearch'
 import RoomContent from './RoomContent/RoomContent'
 
-import filteredUsers from '../../utils/filter-items'
+import filteredItems from '../../utils/filter-items'
 
 export default {
 	name: 'RoomsList',
@@ -175,7 +175,7 @@ export default {
 			}
 		},
 		searchRoom(ev) {
-			this.filteredRooms = filteredUsers(
+			this.filteredRooms = filteredItems(
 				this.rooms,
 				'roomName',
 				ev.target.value

src/themes/index.js

@@ -29,7 +29,7 @@ export const defaultThemeStyles = {
 			borderInputSelected: '#1976d2',
 			backgroundReply: '#e5e5e6',
 			backgroundTagActive: '#e5e5e6',
-			backgroundTag: '#fff'
+			backgroundTag: '#f8f9fa'
 		},
 
 		content: {