diff options
-rw-r--r-- | webapp/components/edit_post_modal.jsx | 2 | ||||
-rw-r--r-- | webapp/components/webrtc/webrtc_controller.jsx | 16 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 6 | ||||
-rw-r--r-- | webapp/sass/components/_suggestion-list.scss | 1 | ||||
-rw-r--r-- | webapp/sass/components/_webrtc.scss | 42 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 7 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 2 |
7 files changed, 64 insertions, 12 deletions
diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx index 2ab4ec35f..44050bb12 100644 --- a/webapp/components/edit_post_modal.jsx +++ b/webapp/components/edit_post_modal.jsx @@ -206,7 +206,7 @@ export default class EditPostModal extends React.Component { tabIndex='-1' aria-hidden='true' > - <div className='modal-dialog modal-push-down'> + <div className='modal-dialog modal-push-down modal-xl'> <div className='modal-content'> <div className='modal-header'> <button diff --git a/webapp/components/webrtc/webrtc_controller.jsx b/webapp/components/webrtc/webrtc_controller.jsx index e609e4fdb..40b5dc9c2 100644 --- a/webapp/components/webrtc/webrtc_controller.jsx +++ b/webapp/components/webrtc/webrtc_controller.jsx @@ -97,6 +97,7 @@ export default class WebrtcController extends React.Component { isAnswering: false, callInProgress: false, error: null, + errorType: '', ended: null }; } @@ -155,7 +156,7 @@ export default class WebrtcController extends React.Component { clearError() { setTimeout(() => { - this.setState({error: null, ended: null}); + this.setState({error: null, ended: null, errorType: ''}); }, Constants.WEBRTC_CLEAR_ERROR_DELAY); } @@ -296,7 +297,8 @@ export default class WebrtcController extends React.Component { id='webrtc.inProgress' defaultMessage='You have a call in progress. Please hangup first.' /> - ) + ), + errorType: ' warning' }); this.clearError(); break; @@ -381,7 +383,8 @@ export default class WebrtcController extends React.Component { id='webrtc.inProgress' defaultMessage='You have a call in progress. Please hangup first.' /> - ) + ), + errorType: ' warning' }); } else if (this.state.isCalling) { this.handleCancelOffer(); @@ -1054,6 +1057,7 @@ export default class WebrtcController extends React.Component { let localImage; let localVideoHidden; let remoteVideoHidden = 'hidden'; + let remoteVideoHiddenLocal = 'full'; let error; let remoteMute; let videoClass = ''; @@ -1064,7 +1068,7 @@ export default class WebrtcController extends React.Component { error = ( <div className='webrtc__error'> <div className='form-group has-error'> - <label className='control-label'>{this.state.error}</label> + <label className={'control-label' + this.state.errorType}>{this.state.error}</label> </div> </div> ); @@ -1144,9 +1148,11 @@ export default class WebrtcController extends React.Component { if (this.state.isRemotePaused) { remoteVideoHidden = 'hidden'; + remoteVideoHiddenLocal = 'full'; remoteImageHidden = 'webrtc__remote-image'; } else { remoteVideoHidden = ''; + remoteVideoHiddenLocal = ''; remoteImageHidden = 'webrtc__remote-image hidden'; } } else { @@ -1180,7 +1186,7 @@ export default class WebrtcController extends React.Component { </div> <div id='local-video' - className={localVideoHidden} + className={localVideoHidden + ' ' + remoteVideoHiddenLocal} > <video ref='local-video' diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index e4d2b9da7..00fd838f0 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -124,10 +124,14 @@ margin-left: auto; margin-right: auto; max-width: 95%; + + &.modal-xl { + width: 800px; + } } .modal-push-down { - margin-top: 5%; + margin-top: 60px; } .modal-next-bar { diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss index 3fdff10d5..51f4d2b02 100644 --- a/webapp/sass/components/_suggestion-list.scss +++ b/webapp/sass/components/_suggestion-list.scss @@ -56,7 +56,6 @@ } > span { - @include opacity(.7); display: inline-block; font-size: .9em; padding: 0 10px 0 5px; diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss index 37da97b32..42d491341 100644 --- a/webapp/sass/components/_webrtc.scss +++ b/webapp/sass/components/_webrtc.scss @@ -20,12 +20,18 @@ .webrtc__notification--rhs { background: $button--ready; border-radius: 3px 0 0 3px; - bottom: -5px; color: $white; cursor: pointer; + left: 50%; + margin-left: -150px; + overflow: hidden; padding: 10px 15px; position: absolute; - right: 0; + text-align: center; + text-overflow: ellipsis; + top: 0; + white-space: nowrap; + width: 300px; z-index: 9999; &:empty { @@ -41,6 +47,14 @@ padding: 0 20px; text-align: center; + .sidebar--right--expanded & { + bottom: 80px; + padding: 0 20px; + position: absolute; + text-align: center; + width: 100%; + } + .form-group { padding: 0 20px; position: relative; @@ -55,7 +69,6 @@ font-weight: normal; margin: 1em 0 -1em; padding: .7em 1em; - width: 100%; } .has-error { @@ -63,6 +76,14 @@ color: #a94442; font-size: .95em; + &.warning { + color: #444; + + &:before { + display: none; + } + } + &:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -81,6 +102,7 @@ #videos { background: $black; font-size: 0; + height: 300px; left: 0; pointer-events: none; position: relative; @@ -89,6 +111,10 @@ width: 100%; #main-video video { + height: 100%; + left: 0; + position: absolute; + top: 0; width: 100%; } @@ -102,6 +128,16 @@ transition: opacity 1s; z-index: 2; + &.full { + background: $black; + border: none; + height: 80%; + max-width: 100% !important; + right: 0; + top: 0; + width: 100%; + } + video { -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index b9b62c020..e0915178a 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,13 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .webrtc__notification--rhs { + left: auto; + right: 0; + top: 47px; + width: 205px; + } + .filtered-user-list { max-height: 65vh !important; } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 80f704e69..10a59c25c 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -585,7 +585,7 @@ export function applyTheme(theme) { changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header, .app__body .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.app__body .popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); - changeCss('.app__body .search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1); + changeCss('.app__body .search-help-popover .search-autocomplete__divider span, .app__body .suggestion-list__divider > span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1); changeCss('.app__body .popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.app__body .popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.app__body .popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); |