Merge pull request #1316 from asaadmahmoodspin/ui-improvements

Modal improvements for members
2015-11-05 12:08:34 -05:00
--- a/web/react/components/admin_console/user_item.jsx
+++ b/web/react/components/admin_console/user_item.jsx
@@ -212,50 +212,52 @@ export default class UserItem extends React.Component {
        }

        return (
-            <div className='row member-div'>
-                <img
-                    className='post-profile-img pull-left'
-                    src={`/api/v1/users/${user.id}/image?time=${user.update_at}&${Utils.getSessionIndex()}`}
-                    height='36'
-                    width='36'
-                />
-                <span className='member-name'>{Utils.getDisplayName(user)}</span>
-                <span className='member-email'>{email}</span>
-                <div className='dropdown member-drop'>
-                    <a
-                        href='#'
-                        className='dropdown-toggle theme'
-                        type='button'
-                        id='channel_header_dropdown'
-                        data-toggle='dropdown'
-                        aria-expanded='true'
-                    >
-                        <span>{currentRoles} </span>
-                        <span className='caret'></span>
-                    </a>
-                    <ul
-                        className='dropdown-menu member-menu'
-                        role='menu'
-                        aria-labelledby='channel_header_dropdown'
-                    >
-                        {makeAdmin}
-                        {makeMember}
-                        {makeActive}
-                        {makeNotActive}
-                        {makeSystemAdmin}
-                        <li role='presentation'>
-                            <a
-                                role='menuitem'
-                                href='#'
-                                onClick={this.handleResetPassword}
-                            >
-                                {'Reset Password'}
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                {serverError}
-            </div>
+            <tr>
+                <td className='row member-div'>
+                    <img
+                        className='post-profile-img pull-left'
+                        src={`/api/v1/users/${user.id}/image?time=${user.update_at}&${Utils.getSessionIndex()}`}
+                        height='36'
+                        width='36'
+                    />
+                    <span className='member-name'>{Utils.getDisplayName(user)}</span>
+                    <span className='member-email'>{email}</span>
+                    <div className='dropdown member-drop'>
+                        <a
+                            href='#'
+                            className='dropdown-toggle theme'
+                            type='button'
+                            id='channel_header_dropdown'
+                            data-toggle='dropdown'
+                            aria-expanded='true'
+                        >
+                            <span>{currentRoles} </span>
+                            <span className='caret'></span>
+                        </a>
+                        <ul
+                            className='dropdown-menu member-menu'
+                            role='menu'
+                            aria-labelledby='channel_header_dropdown'
+                        >
+                            {makeAdmin}
+                            {makeMember}
+                            {makeActive}
+                            {makeNotActive}
+                            {makeSystemAdmin}
+                            <li role='presentation'>
+                                <a
+                                    role='menuitem'
+                                    href='#'
+                                    onClick={this.handleResetPassword}
+                                >
+                                    {'Reset Password'}
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    {serverError}
+                </td>
+            </tr>
        );
    }
 }
--- a/web/react/components/channel_invite_modal.jsx
+++ b/web/react/components/channel_invite_modal.jsx
@@ -54,6 +54,16 @@ export default class ChannelInviteModal extends React.Component {
            loading
        };
    }
+    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.onListenerChange);
@@ -103,6 +113,11 @@ export default class ChannelInviteModal extends React.Component {
        );
    }
    render() {
+        var maxHeight = 1000;
+        if (Utils.windowHeight() <= 1200) {
+            maxHeight = Utils.windowHeight() - 300;
+        }
+
        var inviteError = null;
        if (this.state.inviteError) {
            inviteError = (<label className='has-error control-label'>{this.state.inviteError}</label>);
@@ -129,13 +144,17 @@ export default class ChannelInviteModal extends React.Component {

        return (
            <Modal
+                dialogClassName='more-modal'
                show={this.props.show}
                onHide={this.props.onModalDismissed}
            >
                <Modal.Header closeButton={true}>
                    <Modal.Title>{'Add New Members to '}<span className='name'>{this.state.channelName}</span></Modal.Title>
                </Modal.Header>
-                <Modal.Body>
+                <Modal.Body
+                    ref='modalBody'
+                    style={{maxHeight}}
+                >
                    {inviteError}
                    {content}
                </Modal.Body>
--- 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>
--- a/web/react/components/member_list.jsx
+++ b/web/react/components/member_list.jsx
@@ -15,7 +15,7 @@ export default class MemberList extends React.Component {
            members = this.props.memberList;
        }

-        var message = '';
+        var message = null;
        if (members.length === 0) {
            message = <tr><td>No users to add.</td></tr>;
        }
--- a/web/react/components/member_list_team_item.jsx
+++ b/web/react/components/member_list_team_item.jsx
@@ -166,40 +166,42 @@ export default class MemberListTeamItem extends React.Component {
        }

        return (
-            <div className='row member-div'>
-                <img
-                    className='post-profile-img pull-left'
-                    src={`/api/v1/users/${user.id}/image?time=${timestamp}&${Utils.getSessionIndex()}`}
-                    height='36'
-                    width='36'
-                />
-                <span className='member-name'>{Utils.getDisplayName(user)}</span>
-                <span className='member-email'>{email}</span>
-                <div className='dropdown member-drop'>
-                    <a
-                        href='#'
-                        className='dropdown-toggle theme'
-                        type='button'
-                        id='channel_header_dropdown'
-                        data-toggle='dropdown'
-                        aria-expanded='true'
-                    >
-                        <span>{currentRoles} </span>
-                        <span className='caret'></span>
-                    </a>
-                    <ul
-                        className='dropdown-menu member-menu'
-                        role='menu'
-                        aria-labelledby='channel_header_dropdown'
-                    >
-                        {makeAdmin}
-                        {makeMember}
-                        {makeActive}
-                        {makeNotActive}
-                    </ul>
-                </div>
-                {serverError}
-            </div>
+            <tr>
+                <td className='row member-div'>
+                    <img
+                        className='post-profile-img pull-left'
+                        src={`/api/v1/users/${user.id}/image?time=${timestamp}&${Utils.getSessionIndex()}`}
+                        height='36'
+                        width='36'
+                    />
+                    <span className='member-name'>{Utils.getDisplayName(user)}</span>
+                    <span className='member-email'>{email}</span>
+                    <div className='dropdown member-drop'>
+                        <a
+                            href='#'
+                            className='dropdown-toggle theme'
+                            type='button'
+                            id='channel_header_dropdown'
+                            data-toggle='dropdown'
+                            aria-expanded='true'
+                        >
+                            <span>{currentRoles} </span>
+                            <span className='caret'></span>
+                        </a>
+                        <ul
+                            className='dropdown-menu member-menu'
+                            role='menu'
+                            aria-labelledby='channel_header_dropdown'
+                        >
+                            {makeAdmin}
+                            {makeMember}
+                            {makeActive}
+                            {makeNotActive}
+                        </ul>
+                    </div>
+                    {serverError}
+                </td>
+            </tr>
        );
    }
 }
--- a/web/react/components/team_members.jsx
+++ b/web/react/components/team_members.jsx
@@ -79,7 +79,7 @@ export default class TeamMembers extends React.Component {

        return (
            <div
-                className='modal fade'
+                className='modal fade more-modal'
                ref='modal'
                id='team_members'
                tabIndex='-1'
@@ -106,12 +106,10 @@ export default class TeamMembers extends React.Component {
                            ref='modalBody'
                            className='modal-body'
                        >
-                            <div className='channel-settings'>
-                                <div className='team-member-list'>
-                                    {renderMembers}
-                                </div>
-                                {serverError}
+                            <div className='team-member-list'>
+                                {renderMembers}
                            </div>
+                            {serverError}
                        </div>
                        <div className='modal-footer'>
                            <button
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -174,7 +174,7 @@
 				td {
 					width: 100%;
 					white-space: nowrap;
-					overflow: hidden;
+					@include legacy-pie-clearfix;
 					text-overflow: ellipsis;
 					padding: 8px 8px 8px 15px;
 					&.td--action {