Add a red camera icon for conversations with an ongoing call

Signed-off-by: Joas Schilling <coding@schilljs.com>

3 files changed, 29 insertions, 5 deletions

diff --git a/css/icons.scss b/css/icons.scss
index b33b9620f..f777f2dcb 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -71,6 +71,11 @@
 		@include icon-color('star-dark', 'actions', 'FC0', 1, true);
 	}
 
+	.icon-active-call {
+		/* Show red camera icon for ongoing calls. */
+		@include icon-color('video', 'actions', 'E9322D', 1, true);
+	}
+
 	.icon-delete-critical {
 		@include icon-color('delete', 'actions', $color-error, 1, true);
 		&:hover,
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index adbc7a508..2aef7d5ac 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -29,8 +29,13 @@
 			:user="item.name"
 			:display-name="item.displayName"
 			class="conversation-icon__avatar" />
+		<div v-if="showCall"
+			class="overlap-icon">
+			<span class="icon icon-active-call" />
+			<span class="hidden-visually">{{ t('spreed', 'Call in progress') }}</span>
+		</div>
 		<div v-if="showFavorite"
-			class="favorite-mark">
+			class="overlap-icon">
 			<span class="icon icon-favorite" />
 			<span class="hidden-visually">{{ t('spreed', 'Favorite') }}</span>
 		</div>
@@ -54,6 +59,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		hideCall: {
+			type: Boolean,
+			default: true,
+		},
 		item: {
 			type: Object,
 			default: function() {
@@ -67,6 +76,9 @@ export default {
 		},
 	},
 	computed: {
+		showCall() {
+			return !this.hideCall && this.item.hasCall
+		},
 		showFavorite() {
 			return !this.hideFavorite && this.item.isFavorite
 		},
@@ -98,7 +110,7 @@ $icon-size: 44px;
 	width: $icon-size;
 	height: $icon-size;
 
-	.icon:not(.icon-favorite) {
+	.avatar.icon {
 		width: $icon-size;
 		height: $icon-size;
 		line-height: $icon-size;
@@ -108,6 +120,7 @@ $icon-size: 44px;
 		&.icon-changelog {
 			background-size: $icon-size;
 		}
+
 		&.icon-public,
 		&.icon-contacts,
 		&.icon-password,
@@ -115,10 +128,9 @@ $icon-size: 44px;
 		&.icon-mail {
 			background-size: $icon-size / 2;
 		}
-
 	}
 
-	.favorite-mark {
+	.overlap-icon {
 		position: absolute;
 		top: 6px;
 		left: $icon-size - 6px;
@@ -129,6 +141,12 @@ $icon-size: 44px;
 			vertical-align: middle;
 			background-image: var(--icon-star-dark-FC0);
 		}
+
+		.icon-active-call {
+			display: inline-block;
+			vertical-align: middle;
+			background-image: var(--icon-video-E9322D);
+		}
 	}
 }
 
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 1b2593635..a62378882 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -27,7 +27,8 @@
 		<template v-slot:icon>
 			<ConversationIcon
 				:item="item"
-				:hide-favorite="false" />
+				:hide-favorite="false"
+				:hide-call="false" />
 		</template>
 		<template v-slot:subtitle>
 			<strong v-if="item.unreadMessages">