diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index 1ce7b4a0ef..a281e8e1b0 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -300,6 +300,13 @@ export default class ChannelHeader extends React.Component { if (isOffline || busy) { circleClass = 'offline'; + webrtcMessage = ( + + ); + if (busy) { webrtcMessage = ( {webrtcMessage} + ); + webrtc = (
this.initWebrtc(contact.id, !isOffline)} disabled={isOffline} > - - - - {webrtcMessage} - - - - + +
+ ); diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx index e69d917a33..21dbf9699d 100644 --- a/webapp/components/user_profile.jsx +++ b/webapp/components/user_profile.jsx @@ -11,7 +11,7 @@ import Constants from 'utils/constants.jsx'; const UserStatuses = Constants.UserStatuses; const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; -import {Popover, OverlayTrigger} from 'react-bootstrap'; +import {Popover, OverlayTrigger, Tooltip} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; import React from 'react'; @@ -111,8 +111,19 @@ export default class UserProfile extends React.Component { defaultMessage='New call unavailable until your existing call ends' /> ); + } else { + webrtcMessage = ( + + ); } + const webrtcTooltip = ( + {webrtcMessage} + ); + webrtc = (
this.initWebrtc()} disabled={!isOnline} > - - - - {webrtcMessage} - - - - + +
+ ); diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index ae8843dc3b..6cacc67e84 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -998,6 +998,7 @@ "channel_header.viewMembers": "View Members", "channel_header.webrtc.call": "Start Video Call", "channel_header.webrtc.unavailable": "New call unavailable until your existing call ends", + "channel_header.webrtc.offline": "The user is offline", "channel_info.about": "About", "channel_info.close": "Close", "channel_info.header": "Header:", @@ -2055,6 +2056,7 @@ "user_list.notFound": "No users found", "user_profile.webrtc.call": "Start Video Call", "user_profile.webrtc.unavailable": "New call unavailable until your existing call ends", + "user_profile.webrtc.offline": "The user is offline", "view_image.loading": "Loading ", "view_image_popover.download": "Download", "view_image_popover.file": "File {count} of {total}", diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss index 5e71e3a7b1..0049fe1b8a 100644 --- a/webapp/sass/components/_tooltip.scss +++ b/webapp/sass/components/_tooltip.scss @@ -8,3 +8,9 @@ word-break: break-word; } } + +#webrtcTooltip { + .tooltip-inner { + word-break: normal; + } +} diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss index b025ab00c7..c9deada266 100644 --- a/webapp/sass/components/_webrtc.scss +++ b/webapp/sass/components/_webrtc.scss @@ -2,10 +2,14 @@ .webrtc__user-profile { @include webrtc-button; + position: absolute; + right: 7px; text-align: center; + top: 5px; #webrtc-btn { - display: inherit; + height: 23px; + width: 23px; } } @@ -15,6 +19,11 @@ margin-right: 10px; position: relative; top: 13px; + + svg { + position: relative; + width: 20px; + } } .webrtc__notification--rhs { diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss index e252086aec..6a041d6ec8 100644 --- a/webapp/sass/utils/_mixins.scss +++ b/webapp/sass/utils/_mixins.scss @@ -32,68 +32,27 @@ @mixin webrtc-button { .webrtc__button { @include border-radius(50px); + background: $button--ready; display: block; - height: 32px; - width: 32px; + height: 33px; + text-align: center; + width: 33px; &.on, &:hover { background: darken($button--ready, 5%); } - &:hover circle { - fill: darken($button--ready, 5%); - } + &.offline { + background: $video-circle-offline; - circle { - fill: $button--ready; - - &.offline { - fill: $video-circle-offline; + &:hover { + background: $video-circle-offline; } } - path { - .on { - display: none; - } - - .off { - display: block; - } - } - - &.on { - path { - .on { - display: block; - } - - .off { - display: none; - } - } - - circle { - fill-opacity: 0; - } - } - } - - a { - &[disabled] { - .webrtc__button { - &:hover { - background: none; - box-shadow: none; - } - - &:hover { - circle { - fill: $video-circle-offline; - } - } - } + svg { + fill: $white; } } } diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 3524011428..29f4ea64e6 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -373,6 +373,7 @@ export const Constants = { COMMENT_ICON: " ", REPLY_ICON: " ", SCROLL_BOTTOM_ICON: " ", + VIDEO_ICON: " ", UPDATE_TYPING_MS: 5000, THEMES: { default: {