From 538d109a8268d639032e432ed6138ed57f35e5ef Mon Sep 17 00:00:00 2001
From: Anthony Bellew <anthonyreflected@gmail.com>
Date: Fri, 23 Dec 2016 07:20:16 -0700
Subject: [PATCH 1/2] Re-add unlisted toggle to the UI

---
 .../javascripts/components/actions/compose.jsx     | 10 +++++++++-
 .../features/compose/components/compose_form.jsx   | 14 +++++++++++++-
 .../compose/containers/compose_form_container.jsx  |  8 +++++++-
 .../javascripts/components/reducers/compose.jsx    |  6 +++++-
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/components/actions/compose.jsx b/app/assets/javascripts/components/actions/compose.jsx
index 9c9ec9ddec..0e84723b60 100644
--- a/app/assets/javascripts/components/actions/compose.jsx
+++ b/app/assets/javascripts/components/actions/compose.jsx
@@ -24,6 +24,7 @@ export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
 
 export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
 export const COMPOSE_VISIBILITY_CHANGE  = 'COMPOSE_VISIBILITY_CHANGE';
+export const COMPOSE_LISTABILITY_CHANGE  = 'COMPOSE_LISTABILITY_CHANGE';
 
 export function changeCompose(text) {
   return {
@@ -67,7 +68,7 @@ export function submitCompose() {
       in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
       media_ids: getState().getIn(['compose', 'media_attachments']).map(item => item.get('id')),
       sensitive: getState().getIn(['compose', 'sensitive']),
-      visibility: getState().getIn(['compose', 'private']) ? 'private' : 'public'
+      visibility: getState().getIn(['compose', 'private']) ? 'private' : (getState().getIn(['compose', 'unlisted']) ? 'unlisted' : 'public')
     }).then(function (response) {
       dispatch(submitComposeSuccess({ ...response.data }));
 
@@ -223,3 +224,10 @@ export function changeComposeVisibility(checked) {
     checked
   };
 };
+
+export function changeComposeListability(checked) {
+  return {
+    type: COMPOSE_LISTABILITY_CHANGE,
+    checked
+  };
+};
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 6a0e6778da..1de3e068ba 100644
--- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx
+++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
@@ -34,7 +34,8 @@ const ComposeForm = React.createClass({
     onFetchSuggestions: React.PropTypes.func.isRequired,
     onSuggestionSelected: React.PropTypes.func.isRequired,
     onChangeSensitivity: React.PropTypes.func.isRequired,
-    onChangeVisibility: React.PropTypes.func.isRequired
+    onChangeVisibility: React.PropTypes.func.isRequired,
+    onChangeListability: React.PropTypes.func.isRequired,
   },
 
   mixins: [PureRenderMixin],
@@ -73,6 +74,10 @@ const ComposeForm = React.createClass({
   handleChangeVisibility (e) {
     this.props.onChangeVisibility(e.target.checked);
   },
+    
+  handleChangeListability (e) {
+    this.props.onChangeListability(e.target.checked);
+  },
 
   componentDidUpdate (prevProps) {
     if (prevProps.in_reply_to !== this.props.in_reply_to) {
@@ -120,6 +125,13 @@ 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} />
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 885d7a47f7..00c641fb9e 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
@@ -8,7 +8,8 @@ import {
   fetchComposeSuggestions,
   selectComposeSuggestion,
   changeComposeSensitivity,
-  changeComposeVisibility
+  changeComposeVisibility,
+  changeComposeListability
 } from '../../../actions/compose';
 import { makeGetStatus } from '../../../selectors';
 
@@ -21,6 +22,7 @@ const makeMapStateToProps = () => {
       suggestion_token: state.getIn(['compose', 'suggestion_token']),
       suggestions: state.getIn(['compose', 'suggestions']),
       sensitive: state.getIn(['compose', 'sensitive']),
+      unlisted: state.getIn(['compose', 'unlisted']),
       private: state.getIn(['compose', 'private']),
       is_submitting: state.getIn(['compose', 'is_submitting']),
       is_uploading: state.getIn(['compose', 'is_uploading']),
@@ -63,6 +65,10 @@ const mapDispatchToProps = function (dispatch) {
 
     onChangeVisibility (checked) {
       dispatch(changeComposeVisibility(checked));
+    },
+    
+    onChangeListability (checked) {
+      dispatch(changeComposeListability(checked));
     }
   }
 };
diff --git a/app/assets/javascripts/components/reducers/compose.jsx b/app/assets/javascripts/components/reducers/compose.jsx
index bdf374a008..742272e6f2 100644
--- a/app/assets/javascripts/components/reducers/compose.jsx
+++ b/app/assets/javascripts/components/reducers/compose.jsx
@@ -17,7 +17,8 @@ import {
   COMPOSE_SUGGESTIONS_READY,
   COMPOSE_SUGGESTION_SELECT,
   COMPOSE_SENSITIVITY_CHANGE,
-  COMPOSE_VISIBILITY_CHANGE
+  COMPOSE_VISIBILITY_CHANGE,
+  COMPOSE_LISTABILITY_CHANGE
 } from '../actions/compose';
 import { TIMELINE_DELETE } from '../actions/timelines';
 import { ACCOUNT_SET_SELF } from '../actions/accounts';
@@ -26,6 +27,7 @@ import Immutable from 'immutable';
 const initialState = Immutable.Map({
   mounted: false,
   sensitive: false,
+  unlisted: false,
   private: false,
   text: '',
   in_reply_to: null,
@@ -93,6 +95,8 @@ export default function compose(state = initialState, action) {
       return state.set('sensitive', action.checked);
     case COMPOSE_VISIBILITY_CHANGE:
       return state.set('private', action.checked);
+    case COMPOSE_LISTABILITY_CHANGE:
+      return state.set('unlisted', action.checked);      
     case COMPOSE_CHANGE:
       return state.set('text', action.text);
     case COMPOSE_REPLY:

From 0bc6da89d2c57d3d90d2a71ee7d98d37569449f9 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 24 Dec 2016 01:22:47 +0100
Subject: [PATCH 2/2] Hide unlisted toggle when private is active, hide nsfw
 toggle when no files added

---
 .../components/actions/compose.jsx            |  4 +--
 .../compose/components/compose_form.jsx       | 31 ++++++++++++-------
 .../containers/compose_form_container.jsx     |  5 +--
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/components/actions/compose.jsx b/app/assets/javascripts/components/actions/compose.jsx
index 0e84723b60..05674ba898 100644
--- a/app/assets/javascripts/components/actions/compose.jsx
+++ b/app/assets/javascripts/components/actions/compose.jsx
@@ -24,7 +24,7 @@ export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
 
 export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
 export const COMPOSE_VISIBILITY_CHANGE  = 'COMPOSE_VISIBILITY_CHANGE';
-export const COMPOSE_LISTABILITY_CHANGE  = 'COMPOSE_LISTABILITY_CHANGE';
+export const COMPOSE_LISTABILITY_CHANGE = 'COMPOSE_LISTABILITY_CHANGE';
 
 export function changeCompose(text) {
   return {
@@ -75,7 +75,7 @@ export function submitCompose() {
       // To make the app more responsive, immediately get the status into the columns
       dispatch(updateTimeline('home', { ...response.data }));
 
-      if (response.data.in_reply_to_id === null && !getState().getIn(['compose', 'private'])) {
+      if (response.data.in_reply_to_id === null && !getState().getIn(['compose', 'private']) && !getState().getIn(['compose', 'unlisted'])) {
         dispatch(updateTimeline('public', { ...response.data }));
       }
     }).catch(function (error) {
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 1de3e068ba..760b0efd10 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>
+        <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>
 
-        <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.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 00c641fb9e..1d8f20ca75 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));
     }