Updated compose modal

Added "publish" button on top of modal. Added compose modal scroll functionality. Updated max height for textbox. Removed avatar, arrow on compose modal for more room. Updated image upload sizes for composer.
Fixes: #83

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -233,6 +233,8 @@ class ComposeForm extends ImmutablePureComponent {
       publishText = intl.formatMessage(messages.schedulePost);
     }
 
+    const showPublish = isModalOpen ? false : !condensed;
+
     const composeClassNames = classNames({
       'compose-form': true,
       'condensed': condensed,
@@ -309,7 +311,7 @@ class ComposeForm extends ImmutablePureComponent {
         }
 
         {
-          !condensed &&
+          showPublish &&
           <div className='compose-form__publish'>
             <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
           </div>

app/javascript/gabsocial/features/compose/components/upload.js

@@ -10,6 +10,7 @@ import Icon from 'gabsocial/components/icon';
 
 const messages = defineMessages({
   description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
+  delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
 });
 
 export default @injectIntl
@@ -100,7 +101,7 @@ class Upload extends ImmutablePureComponent {
           {({ scale }) => (
             <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
               <div className={classNames('compose-form__upload__actions', { active })}>
-                <button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
+                <button className='icon-button' title={intl.formatMessage(messages.delete)} onClick={this.handleUndoClick}><Icon id='times'/></button>
                 {media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>}
               </div>
 

app/javascript/gabsocial/features/compose/components/upload_form.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import UploadProgressContainer from '../containers/upload_progress_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -13,12 +14,15 @@ export default class UploadForm extends ImmutablePureComponent {
 
   render () {
     const { mediaIds } = this.props;
+    const classes = classNames('compose-form__uploads-wrapper', {
+      'contains-media': mediaIds.size !== 0,
+    });
 
     return (
       <div className='compose-form__upload-wrapper'>
         <UploadProgressContainer />
 
-        <div className='compose-form__uploads-wrapper'>
+        <div className={classes}>
           {mediaIds.map(id => (
             <UploadContainer id={id} key={id} />
           ))}

app/javascript/gabsocial/features/ui/components/compose_modal.js

@@ -4,16 +4,17 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { me } from '../../../initial_state';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import Avatar from '../../../components/avatar';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ComposeFormContainer from '../../compose/containers/compose_form_container';
 import IconButton from 'gabsocial/components/icon_button';
+import Button from 'gabsocial/components/button';
 import { openModal } from '../../../actions/modal';
 import { cancelReplyCompose } from '../../../actions/compose';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
   confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
+  publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
 });
 
 const mapStateToProps = state => {
@@ -51,19 +52,19 @@ class ComposeModal extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, account } = this.props;
+    const { intl } = this.props;
 
     return (
       <div className='modal-root__modal compose-modal'>
         <div className='compose-modal__header'>
-          <h3 className='compose-modal__header__title'><FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new gab' /></h3>
           <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+          <h3 className='compose-modal__header__title'>
+            <FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new gab' />
+          </h3>
+          <Button className='compose-modal__publish' text={intl.formatMessage(messages.publish)} onClick={this.onClickClose} />
         </div>
-        <div className='compose-modal__content'>
+        <div className='compose-modal__content compose-modal__content--scroll'>
           <div className='timeline-compose-block'>
-            <div className='timeline-compose-block__avatar'>
-              <Avatar account={account} size={32} />
-            </div>
             <ComposeFormContainer />
           </div>
         </div>

app/javascript/styles/gabsocial/components.scss

@@ -264,9 +264,11 @@
 				left: -22px;
 				top: 13px;
 			}
-		.autosuggest-textarea__textarea {
-			padding: 14px 32px 13px 10px !important;
-			body.theme-gabsocial-light & {background: $gab-background-base-light;}
+			.autosuggest-textarea__textarea {
+				padding: 14px 32px 13px 10px !important;
+				body.theme-gabsocial-light & {
+					background: $gab-background-base-light;
+				}
 			}
 		}
 	}
@@ -4915,10 +4917,16 @@ noscript {
 
 	&__close {
 	position: absolute;
-	right: 10px;
+	left: 10px;
 	top: 10px;
 	}
 
+	&__publish {
+		position: absolute;
+		right: 10px;
+		top: 4px;
+	}
+
 	&__content {
 		display: flex;
 		flex-direction: row;
@@ -4926,6 +4934,11 @@ noscript {
 		padding: 10px;
 		overflow-y: hidden;
 
+		&--scroll {
+			display: block;
+			overflow-y: scroll;
+		}
+
 		.timeline-compose-block {
 			background: transparent !important;
 			width: 100%;
@@ -4936,9 +4949,14 @@ noscript {
 				max-height: 100%;
 				display: flex;
 				flex-direction: column;
+				padding: 0 !important;
 
 				.compose-form__autosuggest-wrapper .autosuggest-textarea__textarea {
-					max-height: calc(100vh - 363px) !important;
+					max-height: 160px !important;
+				}
+
+				.compose-form__autosuggest-wrapper:before {
+					content: none !important;
 				}
 			}
 		}
@@ -4946,8 +4964,9 @@ noscript {
 
 	@media screen and (max-width:895px) {
 		margin: 0;
-		height: 98vh;
-		width: 98vw;
+		border-radius: 0;
+    height: 100vh;
+		width: 100vw;
 	}
 }
 
@@ -5215,7 +5234,7 @@ noscript {
 	border-bottom: 1px solid;
 	border-top: 1px solid;
 	border-color: darken($ui-base-color, 4%);
-	transition: max-height 2.5s ease;
+	transition: max-height 150ms ease;
 	overflow: hidden;
 
 	&.hidden {

app/javascript/styles/gabsocial/components/compose-form.scss

@@ -170,13 +170,30 @@
 		.compose-form__uploads-wrapper {
 			display: flex;
 			flex-direction: row;
-			padding: 5px;
 			flex-wrap: wrap;
+			&.contains-media {
+				padding: 5px;
+				border-top: 1px solid darken($simple-background-color, 8%);
+			}
 		}
 		.compose-form__upload {
-			flex: 1 1 0;
-			min-width: 40%;
 			margin: 5px;
+			width: calc(50% - 10px);
+    	height: 135px;
+			@media (min-width: 895px) {
+				width: 222px;
+				height: 180px;
+			}
+			@media (min-width: 607px) and (max-width: 895px) {
+				width: 210px;
+				height: 210px;
+			}
+			@media (min-width: 607px) and (max-width: 895px) {
+				width: 210px;
+				height: 210px;
+			}
+
+
 			&__actions {
 				background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
 				display: flex;
@@ -234,7 +251,7 @@
 			background-position: center;
 			background-size: cover;
 			background-repeat: no-repeat;
-			height: 140px;
+			height: 100%;
 			width: 100%;
 			overflow: hidden;
 		}