Merge pull request #7786 from KDSBrowne/issue-7782

Fix panel resizing for RTL locales

bigbluebutton-html5/imports/ui/components/app/component.jsx

@@ -206,13 +206,14 @@ class App extends Component {
 
   renderPanel() {
     const { enableResize } = this.state;
-    const { openPanel } = this.props;
+    const { openPanel, isRTL } = this.props;
 
     return (
       <PanelManager
         {...{
           openPanel,
           enableResize,
+          isRTL,
         }}
         shouldAriaHide={this.shouldAriaHide}
       />

bigbluebutton-html5/imports/ui/components/app/container.jsx

@@ -105,6 +105,7 @@ export default injectIntl(withModalMounter(withTracker(({ intl, baseControls })
     notify,
     validIOSVersion,
     isPhone: deviceInfo.type().isPhone,
+    isRTL: document.documentElement.getAttribute('dir') === 'rtl',
     meetingMuted: voiceProp.muteOnStart,
     currentUserEmoji: mapUser(currentUser).emoji,
     hasPublishedPoll: publishedPoll,

bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx

@@ -124,12 +124,13 @@ class PanelManager extends PureComponent {
 
   renderUserListResizable() {
     const { userlistWidth } = this.state;
+    const { isRTL } = this.props;
 
     const resizableEnableOptions = {
       top: false,
-      right: true,
+      right: !isRTL,
       bottom: false,
-      left: false,
+      left: !!isRTL,
       topRight: false,
       bottomRight: false,
       bottomLeft: false,
@@ -172,12 +173,13 @@ class PanelManager extends PureComponent {
 
   renderChatResizable() {
     const { chatWidth } = this.state;
+    const { isRTL } = this.props;
 
     const resizableEnableOptions = {
       top: false,
-      right: true,
+      right: !isRTL,
       bottom: false,
-      left: false,
+      left: !!isRTL,
       topRight: false,
       bottomRight: false,
       bottomLeft: false,
@@ -220,12 +222,13 @@ class PanelManager extends PureComponent {
 
   renderNoteResizable() {
     const { noteWidth } = this.state;
+    const { isRTL } = this.props;
 
     const resizableEnableOptions = {
       top: false,
-      right: true,
+      right: !isRTL,
       bottom: false,
-      left: false,
+      left: !!isRTL,
       topRight: false,
       bottomRight: false,
       bottomLeft: false,
@@ -268,12 +271,13 @@ class PanelManager extends PureComponent {
 
   renderCaptionsResizable() {
     const { captionsWidth } = this.state;
+    const { isRTL } = this.props;
 
     const resizableEnableOptions = {
       top: false,
-      right: true,
+      right: !isRTL,
       bottom: false,
-      left: false,
+      left: !!isRTL,
       topRight: false,
       bottomRight: false,
       bottomLeft: false,
@@ -316,12 +320,13 @@ class PanelManager extends PureComponent {
 
   renderWaitingUsersPanelResizable() {
     const { waitingWidth } = this.state;
+    const { isRTL } = this.props;
 
     const resizableEnableOptions = {
       top: false,
-      right: true,
+      right: !isRTL,
       bottom: false,
-      left: false,
+      left: !!isRTL,
       topRight: false,
       bottomRight: false,
       bottomLeft: false,
@@ -366,12 +371,13 @@ class PanelManager extends PureComponent {
 
   renderPollResizable() {
     const { pollWidth } = this.state;
+    const { isRTL } = this.props;
 
     const resizableEnableOptions = {
       top: false,
-      right: true,
+      right: !isRTL,
       bottom: false,
-      left: false,
+      left: !!isRTL,
       topRight: false,
       bottomRight: false,
       bottomLeft: false,