Change antenna accounts and domains to radio selection

app/javascript/mastodon/features/antenna_setting/components/radio_panel.jsx

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import { injectIntl } from 'react-intl';
+
+import classNames from 'classnames';
+
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
+
+class RadioPanel extends PureComponent {
+
+  static propTypes = {
+    values: ImmutablePropTypes.list.isRequired,
+    value: PropTypes.string.isRequired,
+    intl: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  };
+
+  handleChange = e => {
+    const value = e.currentTarget.getAttribute('data-value');
+    console.dir(value);
+
+    if (value !== this.props.value.get('value')) {
+      this.props.onChange(value);
+    }
+  };
+
+  render () {
+    const { values, value } = this.props;
+
+    return (
+      <div className='setting-radio-panel'>
+        {values.map((val) => (
+          <div className={classNames('setting-radio-panel__item', {'setting-radio-panel__item__active': value.get('value') === val.get('value')})}
+               key={val.get('value')} onClick={this.handleChange} data-value={val.get('value')}>
+            {val.get('label')}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+}
+
+export default connect()(injectIntl(RadioPanel));

app/javascript/mastodon/features/antenna_setting/index.jsx

@@ -5,7 +5,7 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import { Helmet } from 'react-helmet';
 
-import { List as ImmutableList } from 'immutable';
+import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
@@ -23,6 +23,7 @@ import { Icon }  from 'mastodon/components/icon';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
 
+import RadioPanel from './components/radio_panel';
 import TextList from './components/text_list';
 
 const messages = defineMessages({
@@ -35,6 +36,8 @@ const messages = defineMessages({
   addKeywordLabel: { id: 'antennas.add_keyword_placeholder', defaultMessage: 'New keyword' },
   addDomainTitle: { id: 'antennas.add_domain', defaultMessage: 'Add domain' },
   addKeywordTitle: { id: 'antennas.add_keyword', defaultMessage: 'Add keyword' },
+  accounts: { id: 'antennas.accounts', defaultMessage: '{count} accounts' },
+  domains: { id: 'antennas.domains', defaultMessage: '{count} domains' },
 });
 
 const mapStateToProps = (state, props) => ({
@@ -65,6 +68,7 @@ class AntennaSetting extends PureComponent {
   state = {
     domainName: '',
     keywordName: '',
+    rangeRadioValue: null,
   };
 
   handlePin = () => {
@@ -183,6 +187,8 @@ class AntennaSetting extends PureComponent {
 
   noOptionsMessage = () => this.props.intl.formatMessage(messages.noOptions);
 
+  onRangeRadioChanged = (value) => this.setState({ rangeRadioValue: value });
+
   onDomainNameChanged = (value) => this.setState({ domainName: value });
 
   onDomainAdd = () => {
@@ -255,6 +261,13 @@ class AntennaSetting extends PureComponent {
       );
     }
 
+    const rangeRadioValues = ImmutableList([
+      ImmutableMap({ value: 'accounts', label: intl.formatMessage(messages.accounts, { count: antenna.get('accounts_count') }) }),
+      ImmutableMap({ value: 'domains', label: intl.formatMessage(messages.domains, { count: antenna.get('domains_count') }) }),
+    ]);
+    const rangeRadioValue = ImmutableMap({ value: this.state.rangeRadioValue || (antenna.get('accounts_count') > 0 ? 'accounts' : 'domains') });
+    const rangeRadioAlert = antenna.get(rangeRadioValue.get('value') === 'accounts' ? 'domains_count' : 'accounts_count') > 0;
+
     const listOptions = lists.toArray().map((list) => {
       return { value: list[1].get('id'), label: list[1].get('title') }
     });
@@ -317,8 +330,8 @@ class AntennaSetting extends PureComponent {
                   options={listOptions}
                   noOptionsMessage={this.noOptionsMessage}
                   onChange={this.onSelect}
-                  className='column-select__container'
+                  className='column-content-select__container'
-                  classNamePrefix='column-select'
+                  classNamePrefix='column-content-select'
                   name='lists'
                   placeholder={this.props.intl.formatMessage(messages.placeholder)}
                   defaultOptions
@@ -329,20 +342,24 @@ class AntennaSetting extends PureComponent {
 
           {!isStl && (
             <>
-              <h3><FormattedMessage id='antennas.accounts' defaultMessage='{count} accounts' values={{ count: antenna.get('accounts_count') }} /></h3>
+              <RadioPanel values={rangeRadioValues} value={rangeRadioValue} onChange={this.onRangeRadioChanged} />
-              <Button text={intl.formatMessage(messages.editAccounts)} onClick={this.handleEditClick} />
 
-              <h3><FormattedMessage id='antennas.domains' defaultMessage='{count} domains' values={{ count: antenna.get('domains_count') }} /></h3>
+              {rangeRadioValue.get('value') === 'accounts' && <Button text={intl.formatMessage(messages.editAccounts)} onClick={this.handleEditClick} />}
-              <TextList
+
-                onChange={this.onDomainNameChanged}
+              {rangeRadioValue.get('value') === 'domains' && (
-                onAdd={this.onDomainAdd}
+                <TextList
-                onRemove={this.onDomainRemove}
+                  onChange={this.onDomainNameChanged}
-                value={this.state.domainName}
+                  onAdd={this.onDomainAdd}
-                values={domains.get('domains') || ImmutableList()}
+                  onRemove={this.onDomainRemove}
-                icon='sitemap'
+                  value={this.state.domainName}
-                label={intl.formatMessage(messages.addDomainLabel)}
+                  values={domains.get('domains') || ImmutableList()}
-                title={intl.formatMessage(messages.addDomainTitle)}
+                  icon='sitemap'
-                />
+                  label={intl.formatMessage(messages.addDomainLabel)}
+                  title={intl.formatMessage(messages.addDomainTitle)}
+                  />
+              )}
+
+              {rangeRadioAlert && <div className='alert'><FormattedMessage id='antennas.alert.range_radio' defaultMessage='Simultaneous account and domain designation is not recommended.' /></div>}
 
               <h3><FormattedMessage id='antennas.tags' defaultMessage='{count} tags' values={{ count: antenna.get('tags_count') }} /></h3>
 

app/javascript/styles/mastodon/components.scss

@@ -4500,6 +4500,104 @@ a.status-card {
   }
 }
 
+.column-content-select {
+  &__control {
+    @include search-input;
+
+    &::placeholder {
+      color: lighten($darker-text-color, 4%);
+    }
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &::-moz-focus-inner,
+    &:focus,
+    &:active {
+      outline: 0 !important;
+    }
+
+    &:focus {
+      background: lighten($ui-base-color, 4%);
+    }
+
+    @media screen and (width <= 600px) {
+      font-size: 16px;
+    }
+  }
+
+  &__placeholder {
+    color: $dark-text-color;
+    padding-inline-start: 2px;
+    font-size: 12px;
+  }
+
+  &__value-container {
+    padding-inline-start: 6px;
+  }
+
+  &__multi-value {
+    background: lighten($ui-base-color, 8%);
+
+    &__remove {
+      cursor: pointer;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background: lighten($ui-base-color, 12%);
+        color: lighten($darker-text-color, 4%);
+      }
+    }
+  }
+
+  &__multi-value__label,
+  &__input,
+  &__input-container {
+    color: $darker-text-color;
+  }
+
+  &__clear-indicator,
+  &__dropdown-indicator {
+    cursor: pointer;
+    transition: none;
+    color: $dark-text-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: lighten($dark-text-color, 4%);
+    }
+  }
+
+  &__indicator-separator {
+    background-color: lighten($ui-base-color, 8%);
+  }
+
+  &__menu {
+    @include search-popout;
+
+    padding: 0;
+    background: $ui-secondary-color;
+  }
+
+  &__menu-list {
+    padding: 6px;
+  }
+
+  &__option {
+    color: $inverted-text-color;
+    border-radius: 4px;
+    font-size: 14px;
+
+    &--is-focused,
+    &--is-selected {
+      background: darken($ui-secondary-color, 10%);
+    }
+  }
+}
+
 .relationship-tag {
   color: $white;
   margin-bottom: 4px;
@@ -7387,6 +7485,32 @@ noscript {
     margin: 40px 0 16px;
     font-weight: bold;
   }
+
+  .alert {
+    color: $warning-red;
+    margin: 16px 0;
+    font-size: 14px;
+  }
+}
+
+.setting-radio-panel {
+  display: flex;
+
+  .setting-radio-panel__item {
+    font-size: 16px;
+    text-align: center;
+    flex: 1;
+    height: 40px;
+    line-height: 40px;
+    margin: 16px 0;
+    background: lighten($ui-base-color, 4%);
+    color: $secondary-text-color;
+
+    &__active {
+      color: $primary-text-color;
+      background: $ui-primary-color;
+    }
+  }
 }
 
 .setting-text-list {