2 files changed, 24 insertions, 14 deletions
diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
index 1de3e068b..760b0efd1 100644
--- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx
+++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
@@ -10,6 +10,7 @@ import { debounce } from 'react-decoration';
 import UploadButtonContainer from '../containers/upload_button_container';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import Toggle from 'react-toggle';
+import { Motion, spring } from 'react-motion';
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
@@ -24,9 +25,11 @@ const ComposeForm = React.createClass({
     suggestions: ImmutablePropTypes.list,
     sensitive: React.PropTypes.bool,
     unlisted: React.PropTypes.bool,
+    private: React.PropTypes.bool,
     is_submitting: React.PropTypes.bool,
     is_uploading: React.PropTypes.bool,
     in_reply_to: ImmutablePropTypes.map,
+    media_count: React.PropTypes.number,
     onChange: React.PropTypes.func.isRequired,
     onSubmit: React.PropTypes.func.isRequired,
     onCancelReply: React.PropTypes.func.isRequired,
@@ -74,7 +77,7 @@ const ComposeForm = React.createClass({
   handleChangeVisibility (e) {
     this.props.onChangeVisibility(e.target.checked);
   },
-    
+
   handleChangeListability (e) {
     this.props.onChangeListability(e.target.checked);
   },
@@ -125,18 +128,24 @@ const ComposeForm = React.createClass({
           <Toggle checked={this.props.private} onChange={this.handleChangeVisibility} />
           <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span>
         </label>
-        
-        <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', marginTop: '10px', borderTop: '1px solid #282c37', paddingTop: '10px' }}>
-          <Toggle checked={this.props.private} onChange={this.handleChangeListability} />
-          <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display in public timeline' /></span>
-        </label>
 
-        <span style={{ display: 'block', verticalAlign: 'middle', marginTop: '10px', marginBottom: '10px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.unlisted_caveat' defaultMessage='(Private posts will never display in public timeline.)' /></span>
-
-        <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle' }}>
-          <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} />
-          <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark content as sensitive' /></span>
-        </label>
+        <Motion defaultStyle={{ opacity: 100, height: 39.5 }} style={{ opacity: spring(this.props.private ? 0 : 100), height: spring(this.props.private ? 0 : 39.5) }}>
+          {({ opacity, height }) =>
+            <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
+              <Toggle checked={this.props.unlisted} onChange={this.handleChangeListability} />
+              <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display in public timeline' /></span>
+            </label>
+          }
+        </Motion>
+
+        <Motion defaultStyle={{ opacity: 100, height: 39.5 }} style={{ opacity: spring(this.props.media_count === 0 ? 0 : 100), height: spring(this.props.media_count === 0 ? 0 : 39.5) }}>
+          {({ opacity, height }) =>
+            <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
+              <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} />
+              <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark content as sensitive' /></span>
+            </label>
+          }
+        </Motion>
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx
index 00c641fb9..1d8f20ca7 100644
--- a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx
+++ b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx
@@ -26,7 +26,8 @@ const makeMapStateToProps = () => {
       private: state.getIn(['compose', 'private']),
       is_submitting: state.getIn(['compose', 'is_submitting']),
       is_uploading: state.getIn(['compose', 'is_uploading']),
-      in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to']))
+      in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])),
+      media_count: state.getIn(['compose', 'media_attachments']).size
     };
   };
 
@@ -66,7 +67,7 @@ const mapDispatchToProps = function (dispatch) {
     onChangeVisibility (checked) {
       dispatch(changeComposeVisibility(checked));
     },
-    
+
     onChangeListability (checked) {
       dispatch(changeComposeListability(checked));
     }