Add regex filters on the community timeline and the public timeline. (#3564)

* Add regex filter on the community timeline and the public timeline

* correcting

* Adjust the height of header buttons

* Remove trailing spaces

* Remove trailing spaces

* Solve some code duplication

* reset the state of the locale files in app/javascript/mastodon/locales

* adjust to upstream

* adjust to upstream

* change keys of locale settings

app/javascript/mastodon/features/community_timeline/components/column_settings.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import ColumnCollapsable from '../../../components/column_collapsable';
+import SettingToggle from '../../notifications/components/setting_toggle';
+import SettingText from '../../../components/setting_text';
+
+const messages = defineMessages({
+  filter_regex: { id: 'home.column_settings.filter_regex', defaultMessage: 'Filter out by regular expressions' },
+  settings: { id: 'home.settings', defaultMessage: 'Column settings' },
+});
+
+class ColumnSettings extends React.PureComponent {
+
+  static propTypes = {
+    settings: ImmutablePropTypes.map.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  render () {
+    const { settings, onChange, onSave, intl } = this.props;
+
+    return (
+      <div>
+        <span className='column-settings__section'><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
+
+        <div className='column-settings__row'>
+          <SettingText settings={settings} settingKey={['regex', 'body']} onChange={onChange} label={intl.formatMessage(messages.filter_regex)} />
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default injectIntl(ColumnSettings);

app/javascript/mastodon/features/community_timeline/containers/column_settings_container.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import ColumnSettings from '../components/column_settings';
+import { changeSetting, saveSettings } from '../../../actions/settings';
+
+const mapStateToProps = state => ({
+  settings: state.getIn(['settings', 'community']),
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (key, checked) {
+    dispatch(changeSetting(['community', ...key], checked));
+  },
+
+  onSave () {
+    dispatch(saveSettings());
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);

app/javascript/mastodon/features/community_timeline/index.js

@@ -14,6 +14,7 @@ import {
 import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnBackButtonSlim from '../../components/column_back_button_slim';
+import ColumnSettingsContainer from './containers/column_settings_container';
 import createStream from '../../stream';
 
 const messages = defineMessages({
@@ -120,7 +121,9 @@ class CommunityTimeline extends React.PureComponent {
           onClick={this.handleHeaderClick}
           pinned={pinned}
           multiColumn={multiColumn}
-        />
+        >
+          <ColumnSettingsContainer />
+        </ColumnHeader>
 
         <StatusListContainer
           {...this.props}

app/javascript/mastodon/features/home_timeline/components/column_settings.js

@@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnCollapsable from '../../../components/column_collapsable';
 import SettingToggle from '../../notifications/components/setting_toggle';
-import SettingText from './setting_text';
+import SettingText from '../../../components/setting_text';
 
 const messages = defineMessages({
   filter_regex: { id: 'home.column_settings.filter_regex', defaultMessage: 'Filter out by regular expressions' },

app/javascript/mastodon/features/public_timeline/containers/column_settings_container.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import ColumnSettings from '../../community_timeline/components/column_settings';
+import { changeSetting, saveSettings } from '../../../actions/settings';
+
+const mapStateToProps = state => ({
+  settings: state.getIn(['settings', 'public']),
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (key, checked) {
+    dispatch(changeSetting(['public', ...key], checked));
+  },
+
+  onSave () {
+    dispatch(saveSettings());
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);

app/javascript/mastodon/features/public_timeline/index.js

@@ -14,6 +14,7 @@ import {
 import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnBackButtonSlim from '../../components/column_back_button_slim';
+import ColumnSettingsContainer from './containers/column_settings_container';
 import createStream from '../../stream';
 
 const messages = defineMessages({
@@ -120,7 +121,9 @@ class PublicTimeline extends React.PureComponent {
           onClick={this.handleHeaderClick}
           pinned={pinned}
           multiColumn={multiColumn}
-        />
+        >
+          <ColumnSettingsContainer />
+        </ColumnHeader>
 
         <StatusListContainer
           {...this.props}

app/javascript/mastodon/locales/pt-BR.json

@@ -79,7 +79,7 @@
   "home.column_settings.filter_regex": "Filtrar com uma expressão regular",
   "home.column_settings.show_reblogs": "Mostrar as partilhas",
   "home.column_settings.show_replies": "Mostrar as respostas",
-  "home.settings": "Parâmetros da listagem Home",
+  "home.settings": "Parâmetros da listagem",
   "lightbox.close": "Fechar",
   "loading_indicator.label": "Carregando...",
   "media_gallery.toggle_visible": "Esconder/Mostrar",

app/javascript/mastodon/locales/pt.json

@@ -79,7 +79,7 @@
   "home.column_settings.filter_regex": "Filtrar com uma expressão regular",
   "home.column_settings.show_reblogs": "Mostrar as partilhas",
   "home.column_settings.show_replies": "Mostrar as respostas",
-  "home.settings": "Parâmetros da listagem Home",
+  "home.settings": "Parâmetros da listagem",
   "lightbox.close": "Fechar",
   "loading_indicator.label": "Carregando...",
   "media_gallery.toggle_visible": "Esconder/Mostrar",

app/javascript/mastodon/reducers/settings.js

@@ -46,6 +46,18 @@ const initialState = Immutable.Map({
       mention: true,
     }),
   }),
+
+  community: Immutable.Map({
+    regex: Immutable.Map({
+      body: '',
+    }),
+  }),
+
+  public: Immutable.Map({
+    regex: Immutable.Map({
+      body: '',
+    }),
+  }),
 });
 
 const moveColumn = (state, uuid, direction) => {

app/javascript/styles/components.scss

@@ -2052,6 +2052,7 @@ button.icon-button.active i.fa-retweet {
   top: 0;
   height: 100%;
   display: flex;
+  height: 48px;
 }
 
 .column-header__button {