Make secondary toot button work nicer with file attachments & revert to the original behavior if it's disabled

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

@@ -58,6 +58,7 @@ export default class ComposeForm extends ImmutablePureComponent {
     onPickEmoji: PropTypes.func.isRequired,
     showSearch: PropTypes.bool,
     settings : ImmutablePropTypes.map.isRequired,
+    filesAttached : PropTypes.bool,
   };
 
   static defaultProps = {
@@ -159,13 +160,14 @@ export default class ComposeForm extends ImmutablePureComponent {
   }
 
   render () {
-    const { intl, onPaste, showSearch } = this.props;
+    const { intl, onPaste, showSearch, filesAttached } = this.props;
     const disabled = this.props.is_submitting;
     const maybeEye = (this.props.advanced_options && this.props.advanced_options.do_not_federate) ? ' 👁️' : '';
     const text     = [this.props.spoiler_text, countableText(this.props.text), maybeEye].join('');
 
-    const sideArmVisibility = this.props.settings.get('side_arm');
+    const secondaryVisibility = this.props.settings.get('side_arm');
-    let showSideArm = sideArmVisibility !== 'none';
+    const isWideView = this.props.settings.get('stretch');
+    let showSideArm = secondaryVisibility !== 'none';
 
     let publishText = '';
 
@@ -177,25 +179,35 @@ export default class ComposeForm extends ImmutablePureComponent {
       direct: 'envelope',
     };
 
+    if (showSideArm) {
       publishText = (
         <span>
           {
-          (this.props.settings.get('stretch') || !showSideArm) ?
             <i
               className={`fa fa-${privacyIcons[this.props.privacy]}`}
-              style={{ paddingRight: '5px' }}
+              style={{
-            /> :
+                paddingRight: (filesAttached || !isWideView) ? '0' : '5px',
-            ''
+              }}
+            />
+          }{
+            (filesAttached || !isWideView) ? '' :
+              intl.formatMessage(messages.publish)
           }
-        {intl.formatMessage(messages.publish)}
         </span>
       );
+    } else {
+      if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
+        publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
+      } else {
+        publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
+      }
+    }
 
     // side-arm
     let publishText2 = (
       <i
-        className={`fa fa-${privacyIcons[sideArmVisibility]}`}
+        className={`fa fa-${privacyIcons[secondaryVisibility]}`}
-        aria-label={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArmVisibility}.short` })}`}
+        aria-label={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${secondaryVisibility}.short` })}`}
       />
     );
 

app/javascript/mastodon/features/compose/containers/compose_form_container.js

@@ -26,6 +26,7 @@ const mapStateToProps = state => ({
   me: state.getIn(['compose', 'me']),
   showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
   settings: state.get('local_settings'),
+  filesAttached: state.getIn(['compose', 'media_attachments']).size > 0,
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/javascript/styles/components.scss

@@ -433,7 +433,6 @@
   padding: 0 !important;
   width: 4em;
   text-align: center;
-  opacity: .8;
   margin-right: 2px;
 }