From ea44a1969f1c1f36f70d57c0338ce3fbdcefc053 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Wed, 19 Dec 2018 01:33:19 +0000
Subject: [PATCH] make resizable panel width persist
---
.../ui/components/panel-manager/component.jsx | 43 +++++++++++++------
1 file changed, 30 insertions(+), 13 deletions(-)
diff --git a/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx b/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx
index ec52e29e5d..f825d8c485 100644
--- a/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx
@@ -28,6 +28,14 @@ const propTypes = {
openPanel: PropTypes.string.isRequired,
};
+// Variables for resizing user-list.
+const USERLIST_MIN_WIDTH_PX = 150;
+const USERLIST_MAX_WIDTH_PX = 240;
+
+// Variables for resizing chat.
+const CHAT_MIN_WIDTH = 150;
+const CHAT_MAX_WIDTH = 350;
+
class PanelManager extends Component {
constructor() {
super();
@@ -37,6 +45,14 @@ class PanelManager extends Component {
this.breakoutroomKey = _.uniqueId('breakoutroom-');
this.chatKey = _.uniqueId('chat-');
this.pollKey = _.uniqueId('poll-');
+
+ this.state = {
+ chatWidth: 320,
+ // decide whether using pixel or percentage unit as a default width for userList:
+ // userlist default relative width = 18;
+ userlistWidth:
+ (window.innerWidth * (18 / 100.0)) < USERLIST_MAX_WIDTH_PX ? 18 : USERLIST_MAX_WIDTH_PX,
+ };
}
renderUserList() {
@@ -57,13 +73,7 @@ class PanelManager extends Component {
}
renderUserListResizable() {
- // Variables for resizing user-list.
- const USERLIST_MIN_WIDTH_PX = 150;
- const USERLIST_MAX_WIDTH_PX = 240;
- const USERLIST_DEFAULT_WIDTH_RELATIVE = 18;
-
- // decide whether using pixel or percentage unit as a default width for userList
- const USERLIST_DEFAULT_WIDTH = (window.innerWidth * (USERLIST_DEFAULT_WIDTH_RELATIVE / 100.0)) < USERLIST_MAX_WIDTH_PX ? `${USERLIST_DEFAULT_WIDTH_RELATIVE}%` : USERLIST_MAX_WIDTH_PX;
+ const { userlistWidth } = this.state;
const resizableEnableOptions = {
top: false,
@@ -78,13 +88,18 @@ class PanelManager extends Component {
return (
<Resizable
- defaultSize={{ width: USERLIST_DEFAULT_WIDTH }}
minWidth={USERLIST_MIN_WIDTH_PX}
maxWidth={USERLIST_MAX_WIDTH_PX}
ref={(node) => { this.resizableUserList = node; }}
className={styles.resizableUserList}
enable={resizableEnableOptions}
key={this.userlistKey}
+ size={{ width: userlistWidth }}
+ onResizeStop={(e, direction, ref, d) => {
+ this.setState({
+ userlistWidth: userlistWidth + d.width,
+ });
+ }}
>
{this.renderUserList()}
</Resizable>
@@ -106,10 +121,7 @@ class PanelManager extends Component {
}
renderChatResizable() {
- // Variables for resizing chat.
- const CHAT_MIN_WIDTH = '10%';
- const CHAT_MAX_WIDTH = '25%';
- const CHAT_DEFAULT_WIDTH = '15%';
+ const { chatWidth } = this.state;
const resizableEnableOptions = {
top: false,
@@ -124,13 +136,18 @@ class PanelManager extends Component {
return (
<Resizable
- defaultSize={{ width: CHAT_DEFAULT_WIDTH }}
minWidth={CHAT_MIN_WIDTH}
maxWidth={CHAT_MAX_WIDTH}
ref={(node) => { this.resizableChat = node; }}
className={styles.resizableChat}
enable={resizableEnableOptions}
key={this.chatKey}
+ size={{ width: chatWidth }}
+ onResizeStop={(e, direction, ref, d) => {
+ this.setState({
+ chatWidth: chatWidth + d.width,
+ });
+ }}
>
{this.renderChat()}
</Resizable>
--
GitLab