summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/react/components/navbar_dropdown.jsx9
-rw-r--r--web/react/components/sidebar_right_menu.jsx14
-rw-r--r--web/react/components/user_settings/import_theme_modal.jsx1
-rw-r--r--web/react/components/user_settings/user_settings.jsx2
-rw-r--r--web/react/components/user_settings/user_settings_appearance.jsx2
-rw-r--r--web/react/components/user_settings/user_settings_modal.jsx88
-rw-r--r--web/react/pages/channel.jsx6
-rw-r--r--web/sass-files/sass/partials/_settings.scss4
8 files changed, 78 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')
);
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index fbbd07485..174b7b21d 100644
--- 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;
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-03 05:02:45 +0000