From 3eafaeeedd1d29960913c55acaebab6e1d6eb05e Mon Sep 17 00:00:00 2001 From: Shahab <45701680+c0m1t@users.noreply.github.com> Date: Tue, 29 Mar 2022 13:31:48 +0430 Subject: [PATCH] refactor: move chat component outside of videoconference_page (#11138) --- css/_base.scss | 12 ------------ css/_chat.scss | 17 +++++++++++------ css/_mixins.scss | 14 ++++++++++++++ css/_participants-pane.scss | 9 --------- css/_subject.scss | 4 ---- css/_toolbars.scss | 12 +++++------- css/_videolayout_default.scss | 10 +--------- css/filmstrip/_tile_view.scss | 11 ----------- css/premeeting/_premeeting-screens.scss | 1 + .../conference/components/web/Conference.js | 3 +-- .../components/web/NotificationsContainer.js | 14 ++++---------- .../components/web/ParticipantsPane.js | 4 ++-- react/features/participants-pane/functions.js | 8 -------- 13 files changed, 39 insertions(+), 80 deletions(-) diff --git a/css/_base.scss b/css/_base.scss index 288ad31ed..64bd8125a 100644 --- a/css/_base.scss +++ b/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; diff --git a/css/_chat.scss b/css/_chat.scss index aeaafc431..6821c363c 100644 --- a/css/_chat.scss +++ b/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; } } diff --git a/css/_mixins.scss b/css/_mixins.scss index 46bb83962..673cd5486 100644 --- a/css/_mixins.scss +++ b/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; + } + } +} diff --git a/css/_participants-pane.scss b/css/_participants-pane.scss index 32ca61f7e..de461afbf 100644 --- a/css/_participants-pane.scss +++ b/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 { diff --git a/css/_subject.scss b/css/_subject.scss index 34685c395..df1b5c6d2 100644 --- a/css/_subject.scss +++ b/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%; diff --git a/css/_toolbars.scss b/css/_toolbars.scss index 574ff9554..d84159e12 100644 --- a/css/_toolbars.scss +++ b/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; diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 70535316f..0b339a53b 100644 --- a/css/_videolayout_default.scss +++ b/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 { diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss index 4bc64ef71..607713f1e 100644 --- a/css/filmstrip/_tile_view.scss +++ b/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; diff --git a/css/premeeting/_premeeting-screens.scss b/css/premeeting/_premeeting-screens.scss index 0439ba12a..4bb160282 100644 --- a/css/premeeting/_premeeting-screens.scss +++ b/css/premeeting/_premeeting-screens.scss @@ -137,6 +137,7 @@ } .toolbox-content-items { + @include ltr; background: transparent; box-shadow: none; display: flex; diff --git a/react/features/conference/components/web/Conference.js b/react/features/conference/components/web/Conference.js index e67eddf04..5cd90ff7b 100644 --- a/react/features/conference/components/web/Conference.js +++ b/react/features/conference/components/web/Conference.js @@ -230,13 +230,13 @@ class Conference extends AbstractConference { onMouseEnter = { this._onMouseEnter } onMouseLeave = { this._onMouseLeave } onMouseMove = { this._onMouseMove } > +
-
{
{ _showPrejoin || _showLobby || } - {_notificationsVisible && (_overflowDrawer ? diff --git a/react/features/notifications/components/web/NotificationsContainer.js b/react/features/notifications/components/web/NotificationsContainer.js index 39670a7b4..5ba956d82 100644 --- a/react/features/notifications/components/web/NotificationsContainer.js +++ b/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 {
{this._renderFlags()} diff --git a/react/features/participants-pane/components/web/ParticipantsPane.js b/react/features/participants-pane/components/web/ParticipantsPane.js index ddc3ae56c..9fd5fe6d3 100644 --- a/react/features/participants-pane/components/web/ParticipantsPane.js +++ b/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 { } return ( -
+
} args - String iterable. - * @returns {string} Class attribute value. - */ -export const classList = (...args: Array) => args.filter(Boolean).join(' '); - /** * Find the first styled ancestor component of an element. *