refactor: move chat component outside of videoconference_page (#11138)
This commit is contained in:
Shahab
GitHub
parent
9278414821
commit
3eafaeeedd
|
|
@ -43,18 +43,6 @@ body {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* AtlasKit sets a default margin on the rendered modals, so
|
||||
* when the shift-right class is set when the chat opens, we
|
||||
* pad the modal container in order for the modals to be centered
|
||||
* while also taking the chat size into consideration.
|
||||
*/
|
||||
@media (min-width: 581px) {
|
||||
.shift-right .atlaskit-portal > div:not(.Tooltip) {
|
||||
padding-left: $sidebarWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.jitsi-icon {
|
||||
&-default svg {
|
||||
fill: white;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
#sideToolbarContainer {
|
||||
background-color: $chatBackgroundColor;
|
||||
box-sizing: border-box;
|
||||
color: #FFF;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: width .16s ease-in-out;
|
||||
width: $sidebarWidth;
|
||||
z-index: $sideToolbarContainerZ;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -193,3 +193,17 @@
|
|||
@mixin transparentBg($color, $alpha) {
|
||||
background-color: rgba(red($color), green($color), blue($color), $alpha);
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the direction of the current element to LTR, but do not change the direction
|
||||
* of its children; Keep them RTL.
|
||||
*/
|
||||
@mixin ltr {
|
||||
body[dir=rtl] & {
|
||||
direction: ltr;
|
||||
|
||||
& > * {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,6 @@
|
|||
transition: width .16s ease-in-out;
|
||||
width: 315px;
|
||||
z-index: $zindex0;
|
||||
|
||||
&--closed {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.participants_pane-content {
|
||||
|
|
@ -34,11 +30,6 @@
|
|||
right: 0;
|
||||
top: 0;
|
||||
width: auto;
|
||||
|
||||
&--closed {
|
||||
display: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.participants_pane-content {
|
||||
|
|
|
|||
|
|
@ -88,10 +88,6 @@
|
|||
max-width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
.shift-right .details-container {
|
||||
margin-left: calc(#{$sidebarWidth} / 2);
|
||||
}
|
||||
|
||||
@keyframes hideSubject {
|
||||
0% {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -39,13 +39,6 @@
|
|||
&.no-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 581px) {
|
||||
&.shift-right {
|
||||
margin-left: $sidebarWidth;
|
||||
width: calc(100% - #{$sidebarWidth});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbox-content {
|
||||
|
|
@ -99,6 +92,10 @@
|
|||
max-width: 100%;
|
||||
pointer-events: all;
|
||||
border-radius: 6px;
|
||||
|
||||
.toolbox-content-items {
|
||||
@include ltr;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbox-content-wrapper::after {
|
||||
|
|
@ -183,6 +180,7 @@
|
|||
}
|
||||
|
||||
.toolbox-content-items {
|
||||
@include ltr;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
}
|
||||
|
||||
#layout_wrapper {
|
||||
@include ltr;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -44,15 +45,6 @@
|
|||
position: relative;
|
||||
text-align: center;
|
||||
overflow: 'hidden';
|
||||
|
||||
@media (min-width: 581px) {
|
||||
&.shift-right {
|
||||
&#largeVideoContainer {
|
||||
margin-left: $sidebarWidth;
|
||||
width: calc(100% - #{$sidebarWidth});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#localVideoWrapper {
|
||||
|
|
|
|||
|
|
@ -41,17 +41,6 @@
|
|||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 581px) {
|
||||
&.shift-right {
|
||||
margin-left: $sidebarWidth;
|
||||
width: calc(100% - #{$sidebarWidth});
|
||||
|
||||
.remote-videos {
|
||||
width: calc(100vw - #{$sidebarWidth});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
#remoteVideos {
|
||||
height: calc(100% - #{$newToolbarSizeMobile}) !important;
|
||||
|
|
|
|||
|
|
@ -137,6 +137,7 @@
|
|||
}
|
||||
|
||||
.toolbox-content-items {
|
||||
@include ltr;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -230,13 +230,13 @@ class Conference extends AbstractConference<Props, *> {
|
|||
onMouseEnter = { this._onMouseEnter }
|
||||
onMouseLeave = { this._onMouseLeave }
|
||||
onMouseMove = { this._onMouseMove } >
|
||||
<Chat />
|
||||
<div
|
||||
className = { clsx(_layoutClassName, _showStageFilmstrip && 'stage-filmstrip') }
|
||||
id = 'videoconference_page'
|
||||
onMouseMove = { isMobileBrowser() ? undefined : this._onShowToolbar }
|
||||
ref = { this._setBackground }>
|
||||
<ConferenceInfo />
|
||||
|
||||
<Notice />
|
||||
<div
|
||||
id = 'videospace'
|
||||
|
|
@ -247,7 +247,6 @@ class Conference extends AbstractConference<Props, *> {
|
|||
</div>
|
||||
|
||||
{ _showPrejoin || _showLobby || <Toolbox /> }
|
||||
<Chat />
|
||||
|
||||
{_notificationsVisible && (_overflowDrawer
|
||||
? <JitsiPortal className = 'notification-portal'>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { FlagGroupContext } from '@atlaskit/flag/flag-group';
|
||||
import { AtlasKitThemeProvider } from '@atlaskit/theme';
|
||||
import { withStyles } from '@material-ui/styles';
|
||||
import clsx from 'clsx';
|
||||
import React, { Component } from 'react';
|
||||
import { CSSTransition, TransitionGroup } from 'react-transition-group';
|
||||
|
||||
|
|
@ -67,10 +68,6 @@ const useStyles = theme => {
|
|||
maxWidth: 'calc(100% - 32px)'
|
||||
},
|
||||
|
||||
containerChatOpen: {
|
||||
left: '331px'
|
||||
},
|
||||
|
||||
transitionGroup: {
|
||||
'& > *': {
|
||||
marginBottom: '20px',
|
||||
|
|
@ -166,12 +163,9 @@ class NotificationsContainer extends Component<Props> {
|
|||
<AtlasKitThemeProvider mode = 'light'>
|
||||
<FlagGroupContext.Provider value = { this._api }>
|
||||
<div
|
||||
className = { `${this.props.classes.container} ${this.props.portal
|
||||
? this.props.classes.containerPortal
|
||||
: this.props._isChatOpen
|
||||
? this.props.classes.containerChatOpen
|
||||
: ''}`
|
||||
}
|
||||
className = { clsx(this.props.classes.container, {
|
||||
[this.props.classes.containerPortal]: this.props.portal
|
||||
}) }
|
||||
id = 'notifications-container'>
|
||||
<TransitionGroup className = { this.props.classes.transitionGroup }>
|
||||
{this._renderFlags()}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import { connect } from '../../../base/redux';
|
|||
import { getBreakoutRoomsConfig } from '../../../breakout-rooms/functions';
|
||||
import { MuteEveryoneDialog } from '../../../video-menu/components/';
|
||||
import { close } from '../../actions';
|
||||
import { classList, findAncestorByClass, getParticipantsPaneOpen } from '../../functions';
|
||||
import { findAncestorByClass, getParticipantsPaneOpen } from '../../functions';
|
||||
import { AddBreakoutRoomButton } from '../breakout-rooms/components/web/AddBreakoutRoomButton';
|
||||
import { RoomList } from '../breakout-rooms/components/web/RoomList';
|
||||
|
||||
|
|
@ -214,7 +214,7 @@ class ParticipantsPane extends Component<Props, State> {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className = { classList('participants_pane', !_paneOpen && 'participants_pane--closed') }>
|
||||
<div className = 'participants_pane'>
|
||||
<div className = 'participants_pane-content'>
|
||||
<div className = { classes.header }>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -22,14 +22,6 @@ import { isInBreakoutRoom } from '../breakout-rooms/functions';
|
|||
|
||||
import { QUICK_ACTION_BUTTON, REDUCER_KEY, MEDIA_STATE } from './constants';
|
||||
|
||||
/**
|
||||
* Generates a class attribute value.
|
||||
*
|
||||
* @param {Iterable<string>} args - String iterable.
|
||||
* @returns {string} Class attribute value.
|
||||
*/
|
||||
export const classList = (...args: Array<string | boolean>) => args.filter(Boolean).join(' ');
|
||||
|
||||
/**
|
||||
* Find the first styled ancestor component of an element.
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue