Ported UserSettingsModal to React-Bootstrap

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'
+                                onClick={() => this.setState({showUserSettingsModal: true})}
-                                data-target='#user_settings'
                             >
                                 {'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}

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'
+                                onClick={() => this.setState({showUserSettingsModal: true})}
-                                data-target='#user_settings'
+                            >
-                            ><i className='glyphicon glyphicon-cog'></i>Account Settings</a></li>
+                                <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})}

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();

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});
         }
     }
 

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

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
+            <Modal
-                className='modal fade'
+                dialogClassName='settings-modal'
-                ref='modal'
+                show={this.props.show}
-                id='user_settings'
+                onHide={this.handleHide}
-                role='dialog'
+                onExited={this.handleHidden}
-                tabIndex='-1'
-                aria-hidden='true'
             >
-              <div className='modal-dialog settings-modal'>
+                <Modal.Header closeButton={true}>
-                <div className='modal-content'>
+                    <Modal.Title>{'Account Settings'}</Modal.Title>
-                  <div className='modal-header'>
+                </Modal.Header>
-                    <button
+                <Modal.Body ref='modalBody'>
-                        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'>
                     <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>
+                </Modal.Body>
-                </div>
+            </Modal>
-              </div>
-            </div>
         );
     }
 }
+
+UserSettingsModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onModalDismissed: React.PropTypes.func.isRequired
+};

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')

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;