diff --git a/css/icons.scss b/css/icons.scss
index b33b9620fdf..f777f2dcb6d 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 adbc7a50885..2aef7d5ac5f 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" />
+
+
+ {{ t('spreed', 'Call in progress') }}
+
+ class="overlap-icon">
{{ t('spreed', 'Favorite') }}
@@ -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 1b25936358b..a62378882e1 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -27,7 +27,8 @@
+ :hide-favorite="false"
+ :hide-call="false" />