From bc1820a498633a4c89f58d32e05a084a71f7eccf Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Thu, 5 Nov 2015 21:43:41 +0500
Subject: Modal improvements for members

---
 web/react/components/channel_members_modal.jsx | 35 +++++++++++++++++++-------
 1 file changed, 26 insertions(+), 9 deletions(-)

(limited to 'web/react/components/channel_members_modal.jsx')

diff --git a/web/react/components/channel_members_modal.jsx b/web/react/components/channel_members_modal.jsx
index 1df0da9cf..2fa7ae8ff 100644
--- a/web/react/components/channel_members_modal.jsx
+++ b/web/react/components/channel_members_modal.jsx
@@ -70,6 +70,16 @@ export default class ChannelMembersModal extends React.Component {
             channelName
         };
     }
+    onShow() {
+        if ($(window).width() > 768) {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.show && !prevProps.show) {
+            this.onShow();
+        }
+    }
     componentWillReceiveProps(nextProps) {
         if (!this.props.show && nextProps.show) {
             ChannelStore.addExtraInfoChangeListener(this.onChange);
@@ -128,6 +138,11 @@ export default class ChannelMembersModal extends React.Component {
          );
     }
     render() {
+        var maxHeight = 1000;
+        if (Utils.windowHeight() <= 1200) {
+            maxHeight = Utils.windowHeight() - 300;
+        }
+
         const currentMember = ChannelStore.getCurrentMember();
         let isAdmin = false;
         if (currentMember) {
@@ -137,6 +152,7 @@ export default class ChannelMembersModal extends React.Component {
         return (
             <div>
                 <Modal
+                    dialogClassName='more-modal'
                     show={this.props.show}
                     onHide={this.props.onModalDismissed}
                 >
@@ -153,15 +169,16 @@ export default class ChannelMembersModal extends React.Component {
                             <i className='glyphicon glyphicon-envelope'/>{' Add New Members'}
                         </a>
                     </Modal.Header>
-                    <Modal.Body>
-                        <div className='col-sm-12'>
-                            <div className='team-member-list'>
-                                <MemberList
-                                    memberList={this.state.memberList}
-                                    isAdmin={isAdmin}
-                                    handleRemove={this.handleRemove}
-                                />
-                            </div>
+                    <Modal.Body
+                        ref='modalBody'
+                        style={{maxHeight}}
+                    >
+                        <div className='team-member-list'>
+                            <MemberList
+                                memberList={this.state.memberList}
+                                isAdmin={isAdmin}
+                                handleRemove={this.handleRemove}
+                            />
                         </div>
                     </Modal.Body>
                     <Modal.Footer>
-- 
cgit v1.2.3-1-g7c22