Changed to remove restrictions on privacy options and allow users to …

…switch circles when replying

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

@@ -9,7 +9,9 @@ import { createSelector } from 'reselect';
 
 const messages = defineMessages({
   circle_unselect: { id: 'circle.unselect', defaultMessage: '(Select circle)' },
+  circle_reply: { id: 'circle.reply', defaultMessage: '(Reply to circle context)' },
   circle_open_circle_column: { id: 'circle.open_circle_column', defaultMessage: 'Open circle column' },
+  circle_add_new_circle: { id: 'circle.add_new_circle', defaultMessage: '(Add new circle)' },
   circle_select: { id: 'circle.select', defaultMessage: 'Select circle' },
 });
 
@@ -39,6 +41,7 @@ class CircleDropdown extends React.PureComponent {
     circles: ImmutablePropTypes.list,
     value: PropTypes.string.isRequired,
     visible: PropTypes.bool.isRequired,
+    limitedReply: PropTypes.bool.isRequired,
     onChange: PropTypes.func.isRequired,
     onOpenCircleColumn: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -53,19 +56,23 @@ class CircleDropdown extends React.PureComponent {
   };
 
   render () {
-    const { circles, value, visible, intl } = this.props;
+    const { circles, value, visible, limitedReply, intl } = this.props;
 
     return (
       <div className={classNames('circle-dropdown', { 'circle-dropdown--visible': visible })}>
         <IconButton icon='user-circle' className='circle-dropdown__icon' title={intl.formatMessage(messages.circle_open_circle_column)} style={{ width: 'auto', height: 'auto' }} onClick={this.handleOpenCircleColumn} />
 
-        {/* eslint-disable-next-line jsx-a11y/no-onchange */}
-        <select className='circle-dropdown__menu' title={intl.formatMessage(messages.circle_select)} value={value} onChange={this.handleChange}>
-          <option value='' key='unselect'>{intl.formatMessage(messages.circle_unselect)}</option>
-          {circles.map(circle =>
-            <option value={circle.get('id')} key={circle.get('id')}>{circle.get('title')}</option>,
-          )}
-        </select>
+        {circles.isEmpty() && !limitedReply ?
+          <button className='circle-dropdown__menu' onClick={this.handleOpenCircleColumn}>{intl.formatMessage(messages.circle_add_new_circle)}</button>
+          :
+          /* eslint-disable-next-line jsx-a11y/no-onchange */
+          <select className='circle-dropdown__menu' title={intl.formatMessage(messages.circle_select)} value={value} onChange={this.handleChange}>
+            <option value='' key='unselect'>{intl.formatMessage(limitedReply ? messages.circle_reply : messages.circle_unselect)}</option>
+            {circles.map(circle =>
+              <option value={circle.get('id')} key={circle.get('id')}>{circle.get('title')}</option>,
+            )}
+          </select>
+        }
       </div>
     );
   }

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

@@ -31,7 +31,6 @@ class PrivacyDropdownMenu extends React.PureComponent {
     style: PropTypes.object,
     items: PropTypes.array.isRequired,
     value: PropTypes.string.isRequired,
-    enableValues: PropTypes.array.isRequired,
     placement: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
@@ -122,7 +121,7 @@ class PrivacyDropdownMenu extends React.PureComponent {
 
   render () {
     const { mounted } = this.state;
-    const { style, items, placement, value, enableValues } = this.props;
+    const { style, items, placement, value } = this.props;
 
     return (
       <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
@@ -132,7 +131,6 @@ class PrivacyDropdownMenu extends React.PureComponent {
           // react-overlays
           <div className={`privacy-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null, zIndex: 2 }} role='listbox' ref={this.setRef}>
             {items.map(item => (
-              enableValues.includes(item.value) &&
               <div role='option' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}>
                 <div className='privacy-dropdown__option__icon'>
                   <Icon id={item.icon} fixedWidth />
@@ -161,7 +159,6 @@ class PrivacyDropdown extends React.PureComponent {
     onModalOpen: PropTypes.func,
     onModalClose: PropTypes.func,
     value: PropTypes.string.isRequired,
-    limitedReply: PropTypes.bool.isRequired,
     onChange: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   };
@@ -247,11 +244,10 @@ class PrivacyDropdown extends React.PureComponent {
   }
 
   render () {
-    const { value, limitedReply, intl } = this.props;
+    const { value, intl } = this.props;
     const { open, placement } = this.state;
 
     const valueOption = this.options.find(item => item.value === value);
-    const enableValues = limitedReply ? ['limited', 'direct'] : ['public', 'unlisted', 'private', 'limited', 'direct'];
 
     return (
       <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={this.handleKeyDown}>
@@ -275,7 +271,6 @@ class PrivacyDropdown extends React.PureComponent {
           <PrivacyDropdownMenu
             items={this.options}
             value={value}
-            enableValues={enableValues}
             onClose={this.handleClose}
             onChange={this.handleChange}
             placement={placement}

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

@@ -8,7 +8,8 @@ const mapStateToProps = state => {
 
   return {
     value: value,
-    visible: state.getIn(['compose', 'privacy']) === 'limited' && state.getIn(['compose', 'reply_status', 'visibility']) !== 'limited',
+    visible: state.getIn(['compose', 'privacy']) === 'limited',
+    limitedReply: state.getIn(['compose', 'privacy']) === 'limited' && state.getIn(['compose', 'reply_status', 'visibility']) === 'limited',
   };
 };
 

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

@@ -7,7 +7,6 @@ import { isUserTouching } from '../../../is_mobile';
 const mapStateToProps = state => ({
   isModalOpen: state.get('modal').modalType === 'ACTIONS',
   value: state.getIn(['compose', 'privacy']),
-  limitedReply: state.getIn(['compose', 'reply_status', 'visibility']) === 'limited',
 });
 
 const mapDispatchToProps = dispatch => ({

app/javascript/mastodon/locales/en.json

@@ -57,7 +57,9 @@
   "bundle_modal_error.close": "Close",
   "bundle_modal_error.message": "Something went wrong while loading this component.",
   "bundle_modal_error.retry": "Try again",
+  "circle.add_new_circle": "(Add new circle)",
   "circle.open_circle_column": "Open circle column",
+  "circle.reply": "(Reply to circle context)",
   "circle.select": "Select circle",
   "circle.unselect": "(Select circle)",
   "column.blocks": "Blocked users",

app/javascript/styles/mastodon/components.scss

@@ -7056,6 +7056,7 @@ noscript {
     box-sizing: border-box;
     font-size: 14px;
     line-height: 14px;
+    text-align: left;
     color: $inverted-text-color;
     display: inline-block;
     width: 100%;

app/javascript/styles/mastodon/rtl.scss

@@ -422,6 +422,7 @@ body.rtl {
   }
 
   .circle-dropdown__menu {
+    text-align: right;
     padding: 9px 4px 9px 30px;
   }