diff options
-rw-r--r-- | css/icons.scss | 5 | ||||
-rw-r--r-- | src/components/ConversationIcon.vue | 26 | ||||
-rw-r--r-- | src/components/LeftSidebar/ConversationsList/Conversation.vue | 3 |
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"> |