diff options
author | rodrigo <rodrigocorsi@gmail.com> | 2016-03-06 17:36:15 -0300 |
---|---|---|
committer | rodrigo <rodrigocorsi@gmail.com> | 2016-03-06 17:36:15 -0300 |
commit | d3e914f76a375ecd47a009cb542f824d01241dc2 (patch) | |
tree | 4b3de6f692aa0b7f1c05241980a2a553d6246096 /web/react/components/textbox.jsx | |
parent | 81ccfca2bfc91779d7bf00dbccb6f932d285a87c (diff) | |
download | chat-d3e914f76a375ecd47a009cb542f824d01241dc2.tar.gz chat-d3e914f76a375ecd47a009cb542f824d01241dc2.tar.bz2 chat-d3e914f76a375ecd47a009cb542f824d01241dc2.zip |
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..b84cc9922 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' |