refactor: move chat component outside of videoconference_page (#11138)

css/_base.scss

@@ -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;

css/_chat.scss

@@ -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;
     }
 }
 

css/_mixins.scss

@@ -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;
+        }
+    }
+}

css/_participants-pane.scss

@@ -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 {

css/_subject.scss

@@ -88,10 +88,6 @@
     max-width: calc(100% - 24px);
 }
 
-.shift-right .details-container {
-    margin-left: calc(#{$sidebarWidth} / 2);
-}
-
 @keyframes hideSubject {
     0% {
         max-width: 100%;

css/_toolbars.scss

@@ -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;

css/_videolayout_default.scss

@@ -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 {

css/filmstrip/_tile_view.scss

@@ -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;

css/premeeting/_premeeting-screens.scss

@@ -137,6 +137,7 @@
                 }
 
                 .toolbox-content-items {
+                    @include ltr;
                     background: transparent;
                     box-shadow: none;
                     display: flex;

react/features/conference/components/web/Conference.js

@@ -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'>

react/features/notifications/components/web/NotificationsContainer.js

@@ -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()}

react/features/participants-pane/components/web/ParticipantsPane.js

@@ -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

react/features/participants-pane/functions.js

@@ -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.
  *