Merge pull request #5442 from KDSBrowne/xx-add-resizable-component

Make userlist and chat width scalable

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import Modal from 'react-modal';
 import cx from 'classnames';
+import Resizable from 're-resizable';
 
 import ToastContainer from '../toast/container';
 import ModalContainer from '../modal/container';
@@ -122,13 +123,24 @@ class App extends Component {
     });
 
     return (
-      <div
-        className={cx(styles.userList, userListStyle)}
-        aria-label={intl.formatMessage(intlMessages.userListLabel)}
-        aria-hidden={chatIsOpen}
+      <Resizable
+        minWidth="10%"
+        maxWidth="20%"
+        ref={(node) => { this.resizableUserList = node; }}
+        enable={{ right: true }}
+        className={styles.resizableUserList}
+        onResize={(e, direction, ref, d) => {
+          if (e.clientX - ref.offsetLeft <= 50) this.props.router.push('/');
+        }}
       >
-        {userList}
-      </div>
+        <div
+          className={cx(styles.userList, userListStyle)}
+          aria-label={intl.formatMessage(intlMessages.userListLabel)}
+          aria-hidden={chatIsOpen}
+        >
+          {userList}
+        </div>
+      </Resizable>
     );
   }
 
@@ -138,17 +150,28 @@ class App extends Component {
     if (!chat) return null;
 
     return (
-      <section
-        className={styles.chat}
-        aria-label={intl.formatMessage(intlMessages.chatLabel)}
+      <Resizable
+        defaultSize={{width: "22.5%"}}
+        minWidth="15%"
+        maxWidth="30%"
+        ref={(node) => { this.resizableChat = node; }}
+        className={styles.resizableChat}
+        enable={{ right: true }}
       >
-        {chat}
-      </section>
+        <section
+          className={styles.chat}
+          aria-label={intl.formatMessage(intlMessages.chatLabel)}
+        >
+          {chat}
+        </section>
+      </Resizable>
     );
   }
 
   renderMedia() {
-    const { media, intl, chatIsOpen, userlistIsOpen } = this.props;
+    const {
+      media, intl, chatIsOpen, userlistIsOpen,
+    } = this.props;
 
     if (!media) return null;
 
@@ -165,7 +188,9 @@ class App extends Component {
   }
 
   renderActionsBar() {
-    const { actionsbar, intl, userlistIsOpen, chatIsOpen } = this.props;
+    const {
+      actionsbar, intl, userlistIsOpen, chatIsOpen,
+    } = this.props;
 
     if (!actionsbar) return null;
 
@@ -181,7 +206,7 @@ class App extends Component {
   }
 
   render() {
-    const { params } = this.props;
+    const { params, userlistIsOpen, chatIsOpen } = this.props;
 
     return (
       <main className={styles.main}>
@@ -193,6 +218,7 @@ class App extends Component {
             {this.renderActionsBar()}
           </div>
           {this.renderUserList()}
+          {userlistIsOpen ? <div className={styles.userlistPad} /> : null}
           {this.renderChat()}
           {this.renderSidebar()}
         </section>

bigbluebutton-html5/imports/ui/components/app/styles.scss

@@ -91,6 +91,7 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
   }
 }
 
+
 .userList {
   @extend %full-page;
   @extend %text-elipsis;
@@ -102,6 +103,9 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
 
   @include mq($small-only) {
     padding-top: $navbar-height;
+    padding-top: $navbar-height;
+    height: 100vh;
+    width: 100vw;
   }
 
   @include mq($medium-up) {
@@ -114,6 +118,11 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
   }
 }
 
+.userlistPad {
+  background-color: $color-off-white;
+  width: $border-size-large;
+}
+
 .compact {
   flex-basis: 4.6rem;
 }
@@ -122,10 +131,14 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
   @extend %full-page;
 
   order: 2;
+  height: 100%;
 
   @include mq($small-only) {
     z-index: 3;
     padding-top: $navbar-height;
+    padding-top: $navbar-height;
+    height: 100vh;
+    width: 100vw;
   }
 
   @include mq($medium-up) {

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

@@ -101,6 +101,8 @@ class Dropdown extends Component {
   handleWindowClick(event) {
     const triggerElement = findDOMNode(this.trigger);
 
+    if (!triggerElement) return;
+
     if (!this.state.isOpen
       || triggerElement === event.target
       || triggerElement.contains(event.target)) {

bigbluebutton-html5/package-lock.json

@@ -4582,6 +4582,11 @@
       "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
       "dev": true
     },
+    "re-resizable": {
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-4.4.8.tgz",
+      "integrity": "sha512-5Nm4FL5wz41/5SYz8yJIM1kCcftxNPXxv3Yfa5qhkrGasHPgYzmzbbu1pcYM9vuCHog79EVwKWuz7zxDH52Gfw=="
+    },
     "react": {
       "version": "16.0.0",
       "resolved": "https://registry.npmjs.org/react/-/react-16.0.0.tgz",

bigbluebutton-html5/package.json

@@ -44,6 +44,7 @@
     "node-sass": "~4.5.3",
     "probe-image-size": "~3.1.0",
     "prop-types": "~15.6.0",
+    "re-resizable": "^4.4.8",
     "react": "~16.0.0",
     "react-autosize-textarea": "~0.4.9",
     "react-color": "~2.13.8",