Merge pull request #2340 from rodrigocorsi2/PLT-2076

PLT-2076: Add help text below the input box when a user starts typing

4 files changed, 80 insertions, 7 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'
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 4478b3f15..a667a851c 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -58,22 +58,38 @@ body.ios {
 		box-shadow: none;
 		white-space: normal;
 	}
-	.textbox-preview-link, .textbox-help-link {
+	.textbox-help-link {
 		position: absolute;
 		z-index: 3;
 		bottom: -23px;
 		font-size: 13px;
 		cursor: pointer;
 	}
-	.textbox-preview-link {
-		right: 45px;
-	}
 	.textbox-help-link {
 		right: 0;
 	}
 	min-height:36px;
 }
 
+.help_format_text {
+	position: absolute;
+	z-index: 3;
+	bottom: -23px;
+	font-size: 0.7em;
+	right: 45px;
+	color: #999;
+	transition: visibility 0s, opacity 0.5s linear;
+
+	b, i, code {
+		margin-right: 3px;
+	}
+	.textbox-preview-link{
+		font-size: 13px;
+		cursor: pointer;
+		margin-left: 15px;
+	}
+}
+
 .date-separator, .new-separator {
 	text-align: center;
 	height: 2em;
diff --git a/web/static/i18n/en.json b/web/static/i18n/en.json
index 114b6bdb5..03b21e944 100644
--- a/web/static/i18n/en.json
+++ b/web/static/i18n/en.json
@@ -1054,9 +1054,15 @@
   "team_signup_welcome.validEmailError": "Please enter a valid email address",
   "team_signup_welcome.welcome": "Welcome to:",
   "team_signup_welcome.yes": "Yes, this address is correct",
+  "textbox.bold": "**bold**",
   "textbox.edit": "Edit message",
   "textbox.help": "Help",
+  "textbox.inlinecode": "`inline code`",
+  "textbox.italic": "_italic_",
+  "textbox.preformatted": "```preformatted```",
   "textbox.preview": "Preview",
+  "textbox.quote": ">quote",
+  "textbox.strike": "strike",
   "tutorial_intro.allSet": "You’re all set",
   "tutorial_intro.end": "Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.",
   "tutorial_intro.invite": "Invite teammates",
diff --git a/web/static/i18n/pt.json b/web/static/i18n/pt.json
index eaec8ba78..c38ae86c6 100644
--- a/web/static/i18n/pt.json
+++ b/web/static/i18n/pt.json
@@ -1049,9 +1049,15 @@
   "team_signup_welcome.validEmailError": "Por favor entre um endereço de e-mail válido",
   "team_signup_welcome.welcome": "Bem-vindo:",
   "team_signup_welcome.yes": "Sim, este endereço de email está correto",
+  "textbox.bold": "**negrito**",
   "textbox.edit": "Editar mensagem",
   "textbox.help": "Ajuda",
+  "textbox.inlinecode": "`código`",
+  "textbox.italic": "_itálico_",
+  "textbox.preformatted": "```pre-formatado```",
   "textbox.preview": "Pré-visualização",
+  "textbox.quote": ">citado",
+  "textbox.strike": "tachado",
   "tutorial_intro.allSet": "Está tudo pronto",
   "tutorial_intro.end": "Clique em “Próximo” para entrar Town Square. Este é o primeiro canal que sua equipe de trabalho vê quando eles se inscrevem. Use para postar atualizações que todos precisam saber.",
   "tutorial_intro.invite": "Convidar pessoas para equipe",