diff options
| -rw-r--r-- | css/icons.scss | 9 | ||||
| -rw-r--r-- | src/components/TopBar/CallButton.vue | 46 |
2 files changed, 50 insertions, 5 deletions
diff --git a/css/icons.scss b/css/icons.scss index 5bbdcd38c..6805a5e1c 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -80,6 +80,15 @@ @include icon-color('video', 'actions', 'E9322D', 1, true); } + .icon-start-call, + .icon-incoming-call { + @include icon-color('video', 'actions', $color-primary-text, 1, true); + } + + .icon-leave-call { + @include icon-color('video-off', 'actions', $color-primary-text, 1, true); + } + .icon-delete-critical { @include icon-color('delete', 'actions', $color-error, 1, true); &:hover, diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue index dae640f4d..f59901c9d 100644 --- a/src/components/TopBar/CallButton.vue +++ b/src/components/TopBar/CallButton.vue @@ -24,12 +24,18 @@ :disabled="startCallButtonDisabled || loading" class="top-bar__button primary" @click="joinCall"> + <span + class="icon" + :class="startCallIcon" /> {{ startCallLabel }} </button> <button v-else-if="showLeaveCallButton" class="top-bar__button primary" :disabled="loading" @click="leaveCall"> + <span + class="icon" + :class="leaveCallIcon" /> {{ leaveCallLabel }} </button> </template> @@ -90,23 +96,35 @@ export default { }, leaveCallLabel() { + return t('spreed', 'Leave call') + }, + + leaveCallIcon() { if (this.loading) { - return t('spreed', 'Leaving call') + return 'icon-loading-small' } - return t('spreed', 'Leave call') + return 'icon-leave-call' }, startCallLabel() { + if (this.conversation.hasCall && !this.isBlockedByLobby) { + return t('spreed', 'Join call') + } + + return t('spreed', 'Start call') + }, + + startCallIcon() { if (this.loading) { - return t('spreed', 'Joining call') + return 'icon-loading-small' } if (this.conversation.hasCall && !this.isBlockedByLobby) { - return t('spreed', 'Join call') + return 'icon-incoming-call' } - return t('spreed', 'Start call') + return 'icon-start-call' }, showStartCallButton() { @@ -150,5 +168,23 @@ export default { </script> <style lang="scss" scoped> +.top-bar__button .icon { + opacity: 1; + + &.icon-incoming-call { + animation: pulse 2s infinite; + } +} +@keyframes pulse { + 0% { + opacity: .5; + } + 50% { + opacity: 1; + } + 100% { + opacity: .5; + } +} </style> |