Ported UserSettingsModal to React-Bootstrap

2015-10-30 11:13:56 -04:00
--- a/web/react/components/navbar_dropdown.jsx
+++ b/web/react/components/navbar_dropdown.jsx
@@ -8,6 +8,7 @@ var TeamStore = require('../stores/team_store.jsx');

 var AboutBuildModal = require('./about_build_modal.jsx');
 var InviteMemberModal = require('./invite_member_modal.jsx');
+var UserSettingsModal = require('./user_settings/user_settings_modal.jsx');

 var Constants = require('../utils/constants.jsx');

@@ -43,6 +44,7 @@ export default class NavbarDropdown extends React.Component {
        this.aboutModalDismissed = this.aboutModalDismissed.bind(this);

        const state = getStateFromStores();
+        state.showUserSettingsModal = false;
        state.showAboutModal = false;
        state.showInviteMemberModal = false;
        this.state = state;
@@ -221,8 +223,7 @@ export default class NavbarDropdown extends React.Component {
                        <li>
                            <a
                                href='#'
-                                data-toggle='modal'
-                                data-target='#user_settings'
+                                onClick={() => this.setState({showUserSettingsModal: true})}
                            >
                                {'Account Settings'}
                            </a>
@@ -267,6 +268,10 @@ export default class NavbarDropdown extends React.Component {
                                {'About Mattermost'}
                            </a>
                        </li>
+                        <UserSettingsModal
+                            show={this.state.showUserSettingsModal}
+                            onModalDismissed={() => this.setState({showUserSettingsModal: false})}
+                        />
                        <AboutBuildModal
                            show={this.state.showAboutModal}
                            onModalDismissed={this.aboutModalDismissed}
--- a/web/react/components/sidebar_right_menu.jsx
+++ b/web/react/components/sidebar_right_menu.jsx
@@ -2,6 +2,7 @@
 // See License.txt for license information.

 var InviteMemberModal = require('./invite_member_modal.jsx');
+var UserSettingsModal = require('./user_settings/user_settings_modal.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var TeamStore = require('../stores/team_store.jsx');
 var client = require('../utils/client.jsx');
@@ -18,6 +19,7 @@ export default class SidebarRightMenu extends React.Component {
        this.handleLogoutClick = this.handleLogoutClick.bind(this);

        this.state = {
+            showUserSettingsModal: false,
            showInviteMemberModal: false
        };
    }
@@ -122,9 +124,11 @@ export default class SidebarRightMenu extends React.Component {
                        <li>
                            <a
                                href='#'
-                                data-toggle='modal'
-                                data-target='#user_settings'
-                            ><i className='glyphicon glyphicon-cog'></i>Account Settings</a></li>
+                                onClick={() => this.setState({showUserSettingsModal: true})}
+                            >
+                                <i className='glyphicon glyphicon-cog'></i>Account Settings
+                            </a>
+                        </li>
                        {teamSettingsLink}
                        {inviteLink}
                        {teamLink}
@@ -148,6 +152,10 @@ export default class SidebarRightMenu extends React.Component {
                            ><i className='glyphicon glyphicon-earphone'></i>Report a Problem</a></li>
                    </ul>
                </div>
+                <UserSettingsModal
+                    show={this.state.showUserSettingsModal}
+                    onModalDismissed={() => this.setState({showUserSettingsModal: false})}
+                />
                <InviteMemberModal
                    show={this.state.showInviteMemberModal}
                    onModalDismissed={() => this.setState({showInviteMemberModal: false})}
--- a/web/react/components/user_settings/import_theme_modal.jsx
+++ b/web/react/components/user_settings/import_theme_modal.jsx
@@ -74,7 +74,6 @@ export default class ImportThemeModal extends React.Component {

                this.setState({show: false});
                Utils.applyTheme(theme);
-                $('#user_settings').modal('show');
            },
            (err) => {
                var state = this.getStateFromStores();
--- a/web/react/components/user_settings/user_settings.jsx
+++ b/web/react/components/user_settings/user_settings.jsx
@@ -32,7 +32,7 @@ export default class UserSettings extends React.Component {
    onListenerChange() {
        var user = UserStore.getCurrentUser();
        if (!utils.areStatesEqual(this.state.user, user)) {
-            this.setState({user: user});
+            this.setState({user});
        }
    }

--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/web/react/components/user_settings/user_settings_appearance.jsx
@@ -126,10 +126,8 @@ export default class UserSettingsAppearance extends React.Component {

        $('.ps-container.modal-body').scrollTop(0);
        $('.ps-container.modal-body').perfectScrollbar('update');
-        $('#user_settings').modal('hide');
    }
    handleImportModal() {
-        $('#user_settings').modal('hide');
        AppDispatcher.handleViewAction({
            type: ActionTypes.TOGGLE_IMPORT_THEME_MODAL,
            value: true
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

+const Modal = ReactBootstrap.Modal;
 var SettingsSidebar = require('../settings_sidebar.jsx');
 var UserSettings = require('./user_settings.jsx');

@@ -8,27 +9,61 @@ export default class UserSettingsModal extends React.Component {
    constructor(props) {
        super(props);

+        this.handleHide = this.handleHide.bind(this);
+        this.handleHidden = this.handleHidden.bind(this);
+
        this.updateTab = this.updateTab.bind(this);
        this.updateSection = this.updateSection.bind(this);

-        this.state = {active_tab: 'general', active_section: ''};
+        this.state = {
+            active_tab: 'general',
+            active_section: ''
+        };
    }
+
    componentDidMount() {
-        $('body').on('click', '.modal-back', function changeDisplay() {
+        $('body').on('click', '.settings-content .modal-back', () => {
            $(this).closest('.modal-dialog').removeClass('display--content');
        });
-        $('body').on('click', '.modal-header .close', () => {
+        $('body').on('click', '.settings-content .modal-header .close', () => {
+            this.handleHide();
+
            setTimeout(() => {
                $('.modal-dialog.display--content').removeClass('display--content');
            }, 500);
        });
    }
+
+    componentDidUpdate(prevProps) {
+        if (!prevProps.show && this.props.show) {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+            if ($(window).width() > 768) {
+                $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            }
+        }
+    }
+
+    handleHide() {
+        // called when the close button is pressed
+        this.props.onModalDismissed();
+    }
+
+    handleHidden() {
+        // called after the dialog is fully hidden and faded out
+        this.setState({
+            active_tag: 'general',
+            active_section: ''
+        });
+    }
+
    updateTab(tab) {
        this.setState({active_tab: tab});
    }
+
    updateSection(section) {
        this.setState({active_section: section});
    }
+
    render() {
        var tabs = [];
        tabs.push({name: 'general', uiName: 'General', icon: 'glyphicon glyphicon-cog'});
@@ -46,33 +81,16 @@ export default class UserSettingsModal extends React.Component {
        tabs.push({name: 'advanced', uiName: 'Advanced', icon: 'glyphicon glyphicon-list-alt'});

        return (
-            <div
-                className='modal fade'
-                ref='modal'
-                id='user_settings'
-                role='dialog'
-                tabIndex='-1'
-                aria-hidden='true'
+            <Modal
+                dialogClassName='settings-modal'
+                show={this.props.show}
+                onHide={this.handleHide}
+                onExited={this.handleHidden}
            >
-              <div className='modal-dialog settings-modal'>
-                <div className='modal-content'>
-                  <div className='modal-header'>
-                    <button
-                        type='button'
-                        className='close'
-                        data-dismiss='modal'
-                        aria-label='Close'
-                    >
-                        <span aria-hidden='true'>{'×'}</span>
-                    </button>
-                    <h4
-                        className='modal-title'
-                        ref='title'
-                    >
-                        {'Account Settings'}
-                    </h4>
-                  </div>
-                  <div className='modal-body'>
+                <Modal.Header closeButton={true}>
+                    <Modal.Title>{'Account Settings'}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body ref='modalBody'>
                    <div className='settings-table'>
                        <div className='settings-links'>
                            <SettingsSidebar
@@ -83,6 +101,7 @@ export default class UserSettingsModal extends React.Component {
                        </div>
                        <div className='settings-content minimize-settings'>
                            <UserSettings
+                                ref='userSettings'
                                activeTab={this.state.active_tab}
                                activeSection={this.state.active_section}
                                updateSection={this.updateSection}
@@ -90,10 +109,13 @@ export default class UserSettingsModal extends React.Component {
                            />
                        </div>
                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+                </Modal.Body>
+            </Modal>
        );
    }
 }
+
+UserSettingsModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onModalDismissed: React.PropTypes.func.isRequired
+};
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -17,7 +17,6 @@ var DeletePostModal = require('../components/delete_post_modal.jsx');
 var MoreChannelsModal = require('../components/more_channels.jsx');
 var PostDeletedModal = require('../components/post_deleted_modal.jsx');
 var ChannelNotificationsModal = require('../components/channel_notifications.jsx');
-var UserSettingsModal = require('../components/user_settings/user_settings_modal.jsx');
 var TeamSettingsModal = require('../components/team_settings_modal.jsx');
 var ChannelMembersModal = require('../components/channel_members.jsx');
 var ChannelInviteModal = require('../components/channel_invite_modal.jsx');
@@ -79,11 +78,6 @@ function setupChannelPage(props) {
        document.getElementById('get_link_modal')
    );

-    ReactDOM.render(
-        <UserSettingsModal />,
-        document.getElementById('user_settings_modal')
-    );
-
    ReactDOM.render(
        <ImportThemeModal />,
        document.getElementById('import_theme_modal')
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -13,6 +13,10 @@
 .settings-modal {
    width:800px;
    max-width: 100%;
+    .modal-content {
+        width:800px;
+        max-width: 100%;
+    }
    .modal-back {
        width: 40px;
        height: 56px;