diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-03-07 13:53:56 -0500 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-03-07 13:53:56 -0500 |
commit | b8b38c0c7269210451dc5fee81ef28ed4e8ae183 (patch) | |
tree | d76420eb9fd14f37781ed127bb316757475da121 /web/react/components/textbox.jsx | |
parent | 0387ac799792fdd0684b863bb029813bbb3eccf7 (diff) | |
parent | 5884495a85cf92c338ab003305d1433df059884c (diff) | |
download | chat-b8b38c0c7269210451dc5fee81ef28ed4e8ae183.tar.gz chat-b8b38c0c7269210451dc5fee81ef28ed4e8ae183.tar.bz2 chat-b8b38c0c7269210451dc5fee81ef28ed4e8ae183.zip |
Merge pull request #2340 from rodrigocorsi2/PLT-2076
PLT-2076: Add help text below the input box when a user starts typing
Diffstat (limited to 'web/react/components/textbox.jsx')
-rw-r--r-- | web/react/components/textbox.jsx | 51 |
1 files changed, 48 insertions, 3 deletions
diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index 23ecfb57b..c119abcbc 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -129,12 +129,12 @@ export default class Textbox extends React.Component { } render() { + const hasText = this.props.messageText.length > 0; + let previewLink = null; if (Utils.isFeatureEnabled(PreReleaseFeatures.MARKDOWN_PREVIEW)) { - const previewLinkVisible = this.props.messageText.length > 0; previewLink = ( <a - style={{visibility: previewLinkVisible ? 'visible' : 'hidden'}} onClick={this.showPreview} className='textbox-preview-link' > @@ -153,6 +153,51 @@ export default class Textbox extends React.Component { ); } + let helpText = ( + <div + style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '1' : '0'}} + className='help_format_text' + > + <b> + <FormattedMessage + id='textbox.bold' + defaultMessage='**bold**' + /> + </b> + <i> + <FormattedMessage + id='textbox.italic' + defaultMessage='_italic_' + /> + </i> + <span>~~<strike> + <FormattedMessage + id='textbox.strike' + defaultMessage='strike' + /> + </strike>~~ </span> + <code> + <FormattedMessage + id='textbox.inlinecode' + defaultMessage='`inline code`' + /> + </code> + <code> + <FormattedMessage + id='textbox.preformatted' + defaultMessage='```preformatted```' + /> + </code> + <span> + <FormattedMessage + id='textbox.quote' + defaultMessage='>quote' + /> + </span> + {previewLink} + </div> + ); + return ( <div ref='wrapper' @@ -184,7 +229,7 @@ export default class Textbox extends React.Component { dangerouslySetInnerHTML={{__html: this.state.preview ? TextFormatting.formatText(this.props.messageText) : ''}} > </div> - {previewLink} + {helpText} <a target='_blank' href='http://docs.mattermost.com/help/getting-started/messaging-basics.html' |