Re-add unlisted toggle to the UI

2 files changed, 20 insertions, 2 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 6a0e6778d..1de3e068b 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 885d7a47f..00c641fb9 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));
     }
   }
 };