diff --git a/app/javascript/mastodon/features/antenna_setting/components/radio_panel.jsx b/app/javascript/mastodon/features/antenna_setting/components/radio_panel.jsx
new file mode 100644
index 0000000000..64f7db0660
--- /dev/null
+++ b/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 (
+
+ {values.map((val) => (
+
+ {val.get('label')}
+
+ ))}
+
+ );
+ }
+
+}
+
+export default connect()(injectIntl(RadioPanel));
diff --git a/app/javascript/mastodon/features/antenna_setting/index.jsx b/app/javascript/mastodon/features/antenna_setting/index.jsx
index f98abb6409..2d137457e8 100644
--- a/app/javascript/mastodon/features/antenna_setting/index.jsx
+++ b/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'
- classNamePrefix='column-select'
+ className='column-content-select__container'
+ classNamePrefix='column-content-select'
name='lists'
placeholder={this.props.intl.formatMessage(messages.placeholder)}
defaultOptions
@@ -329,20 +342,24 @@ class AntennaSetting extends PureComponent {
{!isStl && (
<>
-
-
+
-
-
+ {rangeRadioValue.get('value') === 'accounts' && }
+
+ {rangeRadioValue.get('value') === 'domains' && (
+
+ )}
+
+ {rangeRadioAlert &&
}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 26489f8536..e33c1a388c 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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 {