-
-
+ {serverError}
+
+
);
}
}
+
+ChannelNotificationsModal.propTypes = {
+ show: React.PropTypes.bool.isRequired,
+ onHide: React.PropTypes.func.isRequired,
+ channel: React.PropTypes.object.isRequired
+};
diff --git a/web/react/components/delete_channel_modal.jsx b/web/react/components/delete_channel_modal.jsx
index b7d633b385..271f21c3ac 100644
--- a/web/react/components/delete_channel_modal.jsx
+++ b/web/react/components/delete_channel_modal.jsx
@@ -1,102 +1,72 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
-const Client = require('../utils/client.jsx');
const AsyncClient = require('../utils/async_client.jsx');
-const ChannelStore = require('../stores/channel_store.jsx');
-var TeamStore = require('../stores/team_store.jsx');
+const Client = require('../utils/client.jsx');
+const Modal = ReactBootstrap.Modal;
+const TeamStore = require('../stores/team_store.jsx');
+const Utils = require('../utils/utils.jsx');
export default class DeleteChannelModal extends React.Component {
constructor(props) {
super(props);
this.handleDelete = this.handleDelete.bind(this);
- this.onShow = this.onShow.bind(this);
-
- this.state = {
- title: '',
- channelId: ''
- };
}
+
handleDelete() {
- if (this.state.channelId.length !== 26) {
+ if (this.props.channel.id.length !== 26) {
return;
}
- Client.deleteChannel(this.state.channelId,
- function handleDeleteSuccess() {
+ Client.deleteChannel(
+ this.props.channel.id,
+ () => {
AsyncClient.getChannels(true);
window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square';
},
- function handleDeleteError(err) {
+ (err) => {
AsyncClient.dispatchError(err, 'handleDelete');
}
);
}
- onShow(e) {
- var button = $(e.relatedTarget);
- this.setState({
- title: button.attr('data-title'),
- channelId: button.attr('data-channelid')
- });
- }
- componentDidMount() {
- $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow);
- }
+
render() {
- const channel = ChannelStore.getCurrent();
- let channelType = 'channel';
- if (channel && channel.type === 'P') {
- channelType = 'private group';
- }
+ const channelTerm = Utils.getChannelTerm(this.props.channel.type).toLowerCase();
return (
-
-
-
-
-
-
Confirm DELETE Channel
-
-
-
- Are you sure you wish to delete the {this.state.title} {channelType}?
-
-
-
-
-
-
-
-
-
+
{'Confirm DELETE Channel'}
+
+ {`Are you sure you wish to delete the ${this.props.channel.display_name} ${channelTerm}?`}
+
+
+
+
+
+
);
}
}
+
+DeleteChannelModal.propTypes = {
+ show: React.PropTypes.bool.isRequired,
+ onHide: React.PropTypes.func.isRequired,
+ channel: React.PropTypes.object.isRequired
+};
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 7ad1f9305c..1fcfabccd5 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -5,7 +5,11 @@ const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx');
const MessageWrapper = require('./message_wrapper.jsx');
const NotifyCounts = require('./notify_counts.jsx');
const ChannelMembersModal = require('./channel_members_modal.jsx');
+const ChannelInfoModal = require('./channel_info_modal.jsx');
const ChannelInviteModal = require('./channel_invite_modal.jsx');
+const ChannelNotificationsModal = require('./channel_notifications_modal.jsx');
+const DeleteChannelModal = require('./delete_channel_modal.jsx');
+const ToggleModalButton = require('./toggle_modal_button.jsx');
const UserStore = require('../stores/user_store.jsx');
const ChannelStore = require('../stores/channel_store.jsx');
@@ -104,15 +108,13 @@ export default class Navbar extends React.Component {
if (channel) {
var viewInfoOption = (
-
{'View Info'}
-
+
);
@@ -194,16 +196,13 @@ export default class Navbar extends React.Component {
deleteChannelOption = (
-
{'Delete Channel...'}
-
+
);
}
@@ -229,16 +228,13 @@ export default class Navbar extends React.Component {
if (!isDirect) {
notificationPreferenceOption = (
-
- {'Notification Preferences'}
-
+ {'Notification Preferences'}
+
);
}
diff --git a/web/react/components/toggle_modal_button.jsx b/web/react/components/toggle_modal_button.jsx
new file mode 100644
index 0000000000..51c8d1f207
--- /dev/null
+++ b/web/react/components/toggle_modal_button.jsx
@@ -0,0 +1,62 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export default class ModalToggleButton extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.show = this.show.bind(this);
+ this.hide = this.hide.bind(this);
+
+ this.state = {
+ show: false
+ };
+ }
+
+ show() {
+ this.setState({show: true});
+ }
+
+ hide() {
+ this.setState({show: false});
+ }
+
+ render() {
+ const {children, dialogType, dialogProps, ...props} = this.props;
+
+ // this assumes that all modals will have a show property and an onHide event
+ const dialog = React.createElement(this.props.dialogType, Object.assign({}, dialogProps, {
+ show: this.state.show,
+ onHide: () => {
+ this.hide();
+
+ if (dialogProps.onHide) {
+ dialogProps.onHide();
+ }
+ }
+ }));
+
+ // nesting the dialog in the anchor tag looks like it shouldn't work, but it does due to how react-bootstrap
+ // renders modals at the top level of the DOM instead of where you specify in the virtual DOM
+ return (
+
+ {children}
+ {dialog}
+
+ );
+ }
+}
+
+ModalToggleButton.propTypes = {
+ children: React.PropTypes.node.isRequired,
+ dialogType: React.PropTypes.func.isRequired,
+ dialogProps: React.PropTypes.object
+};
+
+ModalToggleButton.defaultProps = {
+ dialogProps: {}
+};
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx
index 4dcf32cb9b..776201295d 100644
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -10,6 +10,7 @@ export default class UserSettingsModal extends React.Component {
constructor(props) {
super(props);
+ this.handleShow = this.handleShow.bind(this);
this.handleHide = this.handleHide.bind(this);
this.handleHidden = this.handleHidden.bind(this);
this.handleCollapse = this.handleCollapse.bind(this);
@@ -33,12 +34,22 @@ export default class UserSettingsModal extends React.Component {
this.requireConfirm = false;
}
+ componentDidMount() {
+ if (this.props.show) {
+ this.handleShow();
+ }
+ }
+
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();
- }
+ if (this.props.show && !prevProps.show) {
+ this.handleShow();
+ }
+ }
+
+ handleShow() {
+ $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+ if ($(window).width() > 768) {
+ $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
}
}
diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx
index 61d13ed8b4..16ace0abcd 100644
--- a/web/react/components/user_settings/user_settings_security.jsx
+++ b/web/react/components/user_settings/user_settings_security.jsx
@@ -5,6 +5,7 @@ var SettingItemMin = require('../setting_item_min.jsx');
var SettingItemMax = require('../setting_item_max.jsx');
var AccessHistoryModal = require('../access_history_modal.jsx');
var ActivityLogModal = require('../activity_log_modal.jsx');
+var ToggleModalButton = require('../toggle_modal_button.jsx');
var Client = require('../../utils/client.jsx');
var AsyncClient = require('../../utils/async_client.jsx');
var Constants = require('../../utils/constants.jsx');
@@ -13,34 +14,13 @@ export default class SecurityTab extends React.Component {
constructor(props) {
super(props);
- this.showAccessHistoryModal = this.showAccessHistoryModal.bind(this);
- this.showActivityLogModal = this.showActivityLogModal.bind(this);
- this.hideModals = this.hideModals.bind(this);
this.submitPassword = this.submitPassword.bind(this);
this.updateCurrentPassword = this.updateCurrentPassword.bind(this);
this.updateNewPassword = this.updateNewPassword.bind(this);
this.updateConfirmPassword = this.updateConfirmPassword.bind(this);
this.setupInitialState = this.setupInitialState.bind(this);
- const state = this.setupInitialState();
- state.showAccessHistoryModal = false;
- state.showActivityLogModal = false;
- this.state = state;
- }
- showAccessHistoryModal() {
- this.props.setEnforceFocus(false);
- this.setState({showAccessHistoryModal: true});
- }
- showActivityLogModal() {
- this.props.setEnforceFocus(false);
- this.setState({showActivityLogModal: true});
- }
- hideModals() {
- this.props.setEnforceFocus(true);
- this.setState({
- showAccessHistoryModal: false,
- showActivityLogModal: false
- });
+ this.state = this.setupInitialState();
}
submitPassword(e) {
e.preventDefault();
@@ -258,30 +238,20 @@ export default class SecurityTab extends React.Component {
{passwordSection}
-
View Access History
-
+
-
- View and Logout of Active Sessions
-
+
{'View and Logout of Active Sessions'}
+