Make possible to set extra CSS classes to the vue-at panel

This will be needed to limit the style applied only to the vue-at panel
created by Talk, as by default it uses "atwho-XXX" classes, which clash
for example with the autocompletion in the comments tab of the Files
app.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

src/mixins/vueAtReparenter.js

@@ -42,6 +42,10 @@ export default {
 			 * The selector for the HTML element to reparent the vue-at panel to.
 			 */
 			atWhoPanelParentSelector: 'body',
+			/**
+			 * Extra CSS classes to be set in the vue-at panel.
+			 */
+			atWhoPanelExtraClasses: '',
 			at: null,
 			atWhoPanelElement: null,
 			originalWrapElement: null,
@@ -64,6 +68,16 @@ export default {
 
 			return this.at.atwho
 		},
+
+		/**
+		 * Returns a list of CSS clases from the space separated string
+		 * "atWhoPanelExtraClasses".
+		 *
+		 * @returns {Array} the list of CSS classes
+		 */
+		atWhoPanelExtraClassesList() {
+			return this.atWhoPanelExtraClasses.split(' ').filter(cssClass => cssClass !== '')
+		},
 	},
 
 	watch: {
@@ -93,6 +107,10 @@ export default {
 				Vue.nextTick(function() {
 					this.atWhoPanelElement = this.at.$refs.wrap.querySelector('.atwho-panel')
 
+					if (this.atWhoPanelExtraClassesList.length > 0) {
+						this.atWhoPanelElement.classList.add(...this.atWhoPanelExtraClassesList)
+					}
+
 					this.originalWrapElement = this.at.$refs.wrap
 					this.at.$refs.wrap = window.document.querySelector(this.atWhoPanelParentSelector)