Put the CW field between the toot we are replying to and the toot field (#7508)

* Remove Collapsable and use CSS instead

* Put the CW field between the toot we are replying to and the toot field

* Use same spacing between all fields in the composing column

app/javascript/mastodon/components/collapsable.js

-import React from 'react';
-import Motion from '../features/ui/util/optional_motion';
-import spring from 'react-motion/lib/spring';
-import PropTypes from 'prop-types';
-
-const Collapsable = ({ fullHeight, isVisible, children }) => (
-  <Motion defaultStyle={{ opacity: !isVisible ? 0 : 100, height: isVisible ? fullHeight : 0 }} style={{ opacity: spring(!isVisible ? 0 : 100), height: spring(!isVisible ? 0 : fullHeight) }}>
-    {({ opacity, height }) => (
-      <div style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100, display: Math.floor(opacity) === 0 ? 'none' : 'block' }}>
-        {children}
-      </div>
-    )}
-  </Motion>
-);
-
-Collapsable.propTypes = {
-  fullHeight: PropTypes.number.isRequired,
-  isVisible: PropTypes.bool.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
-export default Collapsable;

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

@@ -7,7 +7,6 @@ import ReplyIndicatorContainer from '../containers/reply_indicator_container';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
 import UploadButtonContainer from '../containers/upload_button_container';
 import { defineMessages, injectIntl } from 'react-intl';
-import Collapsable from '../../../components/collapsable';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
 import SensitiveButtonContainer from '../containers/sensitive_button_container';
@@ -160,17 +159,15 @@ export default class ComposeForm extends ImmutablePureComponent {
       <div className='compose-form'>
         <WarningContainer />
 
-        <Collapsable isVisible={this.props.spoiler} fullHeight={50}>
-          <div className='spoiler-input'>
-            <label>
-              <span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span>
-              <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input'  id='cw-spoiler-input' />
-            </label>
-          </div>
-        </Collapsable>
-
         <ReplyIndicatorContainer />
 
+        <div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}>
+          <label>
+            <span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span>
+            <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input'  id='cw-spoiler-input' />
+          </label>
+        </div>
+
         <div className='compose-form__autosuggest-wrapper'>
           <AutosuggestTextarea
             ref={this.setAutosuggestTextarea}

app/javascript/styles/mastodon/components.scss

@@ -298,6 +298,19 @@
     position: relative;
   }
 
+  .spoiler-input {
+    height: 0;
+    transform-origin: bottom;
+    opacity: 0.0;
+    transition: all 0.4s ease;
+
+    &.spoiler-input--visible {
+      height: 47px;
+      opacity: 1.0;
+      transition: all 0.4s ease;
+    }
+  }
+
   .autosuggest-textarea__textarea,
   .spoiler-input__input {
     display: block;
@@ -569,9 +582,9 @@
 }
 
 .reply-indicator {
-  border-radius: 4px 4px 0 0;
+  border-radius: 4px;
   position: relative;
-  bottom: -2px;
+  bottom: 10px;
   background: $ui-primary-color;
   padding: 10px;
 }