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;
  }