diff options
author | Carlos Tadeu Panato Junior <ctadeu@gmail.com> | 2017-05-16 15:30:44 +0200 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2017-05-16 09:30:44 -0400 |
commit | 128eab2de4376e2b2a822d8ebd4774d5aa6a2119 (patch) | |
tree | 562b7a5bbff023a864f47d79ff143b5ebcd3b180 /webapp/components | |
parent | 9ffc1da55607d3d167947d0761407119ea314b3a (diff) | |
download | chat-128eab2de4376e2b2a822d8ebd4774d5aa6a2119.tar.gz chat-128eab2de4376e2b2a822d8ebd4774d5aa6a2119.tar.bz2 chat-128eab2de4376e2b2a822d8ebd4774d5aa6a2119.zip |
Add "markdown help" and a preview option to "Edit Channel Header" modal (#6342)
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/edit_channel_header_modal.jsx | 71 | ||||
-rw-r--r-- | webapp/components/textbox.jsx | 22 |
2 files changed, 71 insertions, 22 deletions
diff --git a/webapp/components/edit_channel_header_modal.jsx b/webapp/components/edit_channel_header_modal.jsx index d1370506e..2536e0218 100644 --- a/webapp/components/edit_channel_header_modal.jsx +++ b/webapp/components/edit_channel_header_modal.jsx @@ -1,6 +1,8 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import Textbox from './textbox.jsx'; + import ReactDOM from 'react-dom'; import Constants from 'utils/constants.jsx'; import * as Utils from 'utils/utils.jsx'; @@ -8,6 +10,9 @@ import PreferenceStore from 'stores/preference_store.jsx'; import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; import {updateChannelHeader} from 'actions/channel_actions.jsx'; +import * as UserAgent from 'utils/user_agent.jsx'; + +const KeyCodes = Constants.KeyCodes; import {Modal} from 'react-bootstrap'; @@ -27,8 +32,11 @@ class EditChannelHeaderModal extends React.Component { this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); + this.handleEditKeyPress = this.handleEditKeyPress.bind(this); this.onShow = this.onShow.bind(this); this.onHide = this.onHide.bind(this); + this.handlePostError = this.handlePostError.bind(this); + this.focusTextbox = this.focusTextbox.bind(this); this.onPreferenceChange = this.onPreferenceChange.bind(this); this.ctrlSend = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'); @@ -44,6 +52,7 @@ class EditChannelHeaderModal extends React.Component { componentDidMount() { PreferenceStore.addChangeListener(this.onPreferenceChange); this.onShow(); + this.focusTextbox(); } componentWillUnmount() { @@ -81,8 +90,6 @@ class EditChannelHeaderModal extends React.Component { } onShow() { - const textarea = ReactDOM.findDOMNode(this.refs.textarea); - Utils.placeCaretAtEnd(textarea); this.submitted = false; } @@ -90,6 +97,12 @@ class EditChannelHeaderModal extends React.Component { this.setState({show: false}); } + focusTextbox() { + if (!Utils.isMobile()) { + this.refs.textbox.focus(); + } + } + handleKeyDown(e) { if (this.ctrlSend && e.keyCode === Constants.KeyCodes.ENTER && e.ctrlKey) { e.preventDefault(); @@ -100,6 +113,22 @@ class EditChannelHeaderModal extends React.Component { } } + handleEditKeyPress(e) { + if (!UserAgent.isMobile() && !this.state.ctrlSend && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) { + e.preventDefault(); + ReactDOM.findDOMNode(this.refs.editbox).blur(); + this.handleEdit(); + } else if (this.state.ctrlSend && e.ctrlKey && e.which === KeyCodes.ENTER) { + e.preventDefault(); + ReactDOM.findDOMNode(this.refs.editbox).blur(); + this.handleEdit(); + } + } + + handlePostError(postError) { + this.setState({serverError: postError}); + } + render() { var serverError = null; if (this.state.serverError) { @@ -138,23 +167,29 @@ class EditChannelHeaderModal extends React.Component { </Modal.Title> </Modal.Header> <Modal.Body> - <p> - <FormattedMessage - id='edit_channel_header_modal.description' - defaultMessage='Edit the text appearing next to the channel name in the channel header.' + <div className='edit-modal-body'> + <p> + <FormattedMessage + id='edit_channel_header_modal.description' + defaultMessage='Edit the text appearing next to the channel name in the channel header.' + /> + </p> + <Textbox + value={this.state.header} + onChange={this.handleChange} + onKeyPress={this.handleEditKeyPress} + onKeyDown={this.handleKeyDown} + supportsCommands={false} + suggestionListStyle='bottom' + createMessage={Utils.localizeMessage('edit_channel_header.editHeader', 'Edit the Channel Header...')} + previewMessageLink={Utils.localizeMessage('edit_channel_header.previewHeader', 'Edit Header')} + handlePostError={this.handlePostError} + id='edit_textbox' + ref='textbox' /> - </p> - <textarea - ref='textarea' - className='form-control no-resize' - rows='6' - id='edit_header' - maxLength='1024' - value={this.state.header} - onChange={this.handleChange} - onKeyDown={this.handleKeyDown} - /> - {serverError} + <br/> + {serverError} + </div> </Modal.Body> <Modal.Footer> <button diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx index edc4b0502..b183f0514 100644 --- a/webapp/components/textbox.jsx +++ b/webapp/components/textbox.jsx @@ -28,6 +28,7 @@ export default class Textbox extends React.Component { onChange: React.PropTypes.func.isRequired, onKeyPress: React.PropTypes.func.isRequired, createMessage: React.PropTypes.string.isRequired, + previewMessageLink: React.PropTypes.string, onKeyDown: React.PropTypes.func, onBlur: React.PropTypes.func, supportsCommands: React.PropTypes.bool.isRequired, @@ -176,6 +177,22 @@ export default class Textbox extends React.Component { render() { const hasText = this.props.value && this.props.value.length > 0; + let editHeader; + if (this.props.previewMessageLink) { + editHeader = ( + <span> + {this.props.previewMessageLink} + </span> + ); + } else { + editHeader = ( + <FormattedMessage + id='textbox.edit' + defaultMessage='Edit message' + /> + ); + } + let previewLink = null; if (Utils.isFeatureEnabled(PreReleaseFeatures.MARKDOWN_PREVIEW)) { previewLink = ( @@ -184,10 +201,7 @@ export default class Textbox extends React.Component { className='textbox-preview-link' > {this.state.preview ? ( - <FormattedMessage - id='textbox.edit' - defaultMessage='Edit message' - /> + editHeader ) : ( <FormattedMessage id='textbox.preview' |