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 @@