diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/navbar_dropdown.jsx | 9 | ||||
-rw-r--r-- | web/react/components/sidebar_right_menu.jsx | 14 | ||||
-rw-r--r-- | web/react/components/user_settings/import_theme_modal.jsx | 1 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings.jsx | 2 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_appearance.jsx | 2 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_modal.jsx | 88 | ||||
-rw-r--r-- | web/react/pages/channel.jsx | 6 |
7 files changed, 74 insertions, 48 deletions
diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx index 7d7acf5b9..81ff11fb5 100644 --- 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} diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index 5da8829ad..51f9ab1bc 100644 --- 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})} diff --git a/web/react/components/user_settings/import_theme_modal.jsx b/web/react/components/user_settings/import_theme_modal.jsx index 1a9ac0ad3..384226b20 100644 --- 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(); diff --git a/web/react/components/user_settings/user_settings.jsx b/web/react/components/user_settings/user_settings.jsx index 546e26ca3..ecba238f9 100644 --- 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}); } } diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx index 7b4b54e27..42c3fd65d 100644 --- 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 diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index 18dd490e7..9f29b912b 100644 --- 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 +}; diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index c1085075d..2e7a26d00 100644 --- 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'); @@ -80,11 +79,6 @@ function setupChannelPage(props) { ); ReactDOM.render( - <UserSettingsModal />, - document.getElementById('user_settings_modal') - ); - - ReactDOM.render( <ImportThemeModal />, document.getElementById('import_theme_modal') ); |