Show mentions to all using a UserBubble

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

css/icons.scss

@@ -29,6 +29,12 @@
 		background-image: url('../img/changelog.svg');
 	}
 
+	// "forced-white" needs to be included in the class name as the UserBubble
+	// does not accept several classes.
+	.icon-group-forced-white {
+		background-image: url(icon-color-path('group', 'actions', 'fff', 1, true));
+	}
+
 	.forced-white {
 		&.icon-menu-people {
 			background-image: url(icon-color-path('menu-people', 'spreed', 'fff', 1));

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -287,6 +287,8 @@ export default {
 				return PlainText
 			} else if (messagePartType === 'user') {
 				return Mention
+			} else if (messagePartType === 'call') {
+				return Mention
 			} else if (messagePartType === 'file') {
 				return FilePreview
 			}

src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue

@@ -20,7 +20,11 @@
 -->
 
 <template>
-	<UserBubble
+	<UserBubble v-if="isMentionToAll"
+		:display-name="data.name"
+		:avatar-image="'icon-group-forced-white'"
+		:primary="true" />
+	<UserBubble v-else
 		:display-name="data.name"
 		:user="data.id"
 		:primary="isCurrentUser" />
@@ -50,6 +54,9 @@ export default {
 	},
 
 	computed: {
+		isMentionToAll() {
+			return this.data.type === 'call'
+		},
 		isCurrentUser() {
 			return this.$store.getters.getActorType() === 'users'
 				&& this.data.id === this.$store.getters.getUserId()