Merge pull request #628 from mattermost/mm-2127

MM-2127 Added send icon button to create post control for mobile view.

web/react/components/create_post.jsx

@@ -315,25 +315,33 @@ export default class CreatePost extends React.Component {
             >
                 <div className='post-create'>
                     <div className='post-create-body'>
-                        <Textbox
+                        <div className='post-body__cell'>
-                            onUserInput={this.handleUserInput}
+                            <Textbox
-                            onKeyPress={this.postMsgKeyPress}
+                                onUserInput={this.handleUserInput}
-                            onHeightChange={this.resizePostHolder}
+                                onKeyPress={this.postMsgKeyPress}
-                            messageText={this.state.messageText}
+                                onHeightChange={this.resizePostHolder}
-                            createMessage='Write a message...'
+                                messageText={this.state.messageText}
-                            channelId={this.state.channelId}
+                                createMessage='Write a message...'
-                            id='post_textbox'
+                                channelId={this.state.channelId}
-                            ref='textbox'
+                                id='post_textbox'
-                        />
+                                ref='textbox'
-                        <FileUpload
+                            />
-                            ref='fileUpload'
+                            <FileUpload
-                            getFileCount={this.getFileCount}
+                                ref='fileUpload'
-                            onUploadStart={this.handleUploadStart}
+                                getFileCount={this.getFileCount}
-                            onFileUpload={this.handleFileUploadComplete}
+                                onUploadStart={this.handleUploadStart}
-                            onUploadError={this.handleUploadError}
+                                onFileUpload={this.handleFileUploadComplete}
-                            postType='post'
+                                onUploadError={this.handleUploadError}
-                            channelId=''
+                                postType='post'
-                        />
+                                channelId=''
+                            />
+                        </div>
+                        <a
+                            className='send-button theme'
+                            onClick={this.handleSubmit}
+                        >
+                            <i className='fa fa-paper-plane' />
+                        </a>
                     </div>
                     <div className={postFooterClassName}>
                         {postError}

web/sass-files/sass/partials/_post.scss

@@ -188,6 +188,25 @@ body.ios {
 		max-width: 850px;
 		padding: 0 0 2px;
 		position: relative;
+		.post-body__cell {
+			vertical-align: top;
+			position: relative;
+		}
+		.send-button {
+			display: none;
+			cursor: pointer;
+			padding-right: 4px;
+			width: 45px;
+			height: 37px;
+			font-size: 18px;
+			line-height: 37px;
+			vertical-align: top;
+			text-align: center;
+			@include single-transition(all, 0.15s);
+			&:active {
+				@include opacity(0.75);
+			}
+		}
 		.custom-textarea {
 			padding-top: 8px;
 			padding-right: 28px;

web/sass-files/sass/partials/_responsive.scss

@@ -409,9 +409,22 @@
             }
         }
     }
-    #post-create {
+    .post-create__container {
+        form {
+            padding: 0;
+        }
         .post-create-body {
             padding-bottom: 10px;
+            display: table;
+            width: 100%;
+            table-layout: fixed;
+            .post-body__cell {
+                display: table-cell;
+                padding-left: 1em;
+            }
+            .send-button {
+                display: table-cell;
+            }
         }
         .post-create-footer .msg-typing {
             display: none;