diff --git a/app/javascript/flavours/glitch/actions/streaming.js b/app/javascript/flavours/glitch/actions/streaming.js
index 94ae3fb5ae7..8c1bd1f086f 100644
--- a/app/javascript/flavours/glitch/actions/streaming.js
+++ b/app/javascript/flavours/glitch/actions/streaming.js
@@ -11,7 +11,7 @@ import { getLocale } from 'mastodon/locales';
const { messages } = getLocale();
-export function connectTimelineStream (timelineId, path, pollingRefresh = null) {
+export function connectTimelineStream (timelineId, path, pollingRefresh = null, accept = null) {
return connectStream (path, pollingRefresh, (dispatch, getState) => {
const locale = getState().getIn(['meta', 'locale']);
@@ -23,7 +23,7 @@ export function connectTimelineStream (timelineId, path, pollingRefresh = null)
onReceive (data) {
switch(data.event) {
case 'update':
- dispatch(updateTimeline(timelineId, JSON.parse(data.payload)));
+ dispatch(updateTimeline(timelineId, JSON.parse(data.payload), accept));
break;
case 'delete':
dispatch(deleteFromTimelines(data.payload));
@@ -47,6 +47,6 @@ const refreshHomeTimelineAndNotification = (dispatch, done) => {
export const connectUserStream = () => connectTimelineStream('home', 'user', refreshHomeTimelineAndNotification);
export const connectCommunityStream = ({ onlyMedia } = {}) => connectTimelineStream(`community${onlyMedia ? ':media' : ''}`, `public:local${onlyMedia ? ':media' : ''}`);
export const connectPublicStream = ({ onlyMedia } = {}) => connectTimelineStream(`public${onlyMedia ? ':media' : ''}`, `public${onlyMedia ? ':media' : ''}`);
-export const connectHashtagStream = tag => connectTimelineStream(`hashtag:${tag}`, `hashtag&tag=${tag}`);
+export const connectHashtagStream = (id, tag, accept) => connectTimelineStream(`hashtag:${id}`, `hashtag&tag=${tag}`, null, accept);
export const connectDirectStream = () => connectTimelineStream('direct', 'direct');
export const connectListStream = id => connectTimelineStream(`list:${id}`, `list&list=${id}`);
diff --git a/app/javascript/flavours/glitch/actions/timelines.js b/app/javascript/flavours/glitch/actions/timelines.js
index 2d66230e40e..bc21b4d5e68 100644
--- a/app/javascript/flavours/glitch/actions/timelines.js
+++ b/app/javascript/flavours/glitch/actions/timelines.js
@@ -3,6 +3,7 @@ import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
export const TIMELINE_UPDATE = 'TIMELINE_UPDATE';
export const TIMELINE_DELETE = 'TIMELINE_DELETE';
+export const TIMELINE_CLEAR = 'TIMELINE_CLEAR';
export const TIMELINE_EXPAND_REQUEST = 'TIMELINE_EXPAND_REQUEST';
export const TIMELINE_EXPAND_SUCCESS = 'TIMELINE_EXPAND_SUCCESS';
@@ -12,8 +13,12 @@ export const TIMELINE_SCROLL_TOP = 'TIMELINE_SCROLL_TOP';
export const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT';
-export function updateTimeline(timeline, status) {
+export function updateTimeline(timeline, status, accept) {
return (dispatch, getState) => {
+ if (typeof accept === 'function' && !accept(status)) {
+ return;
+ }
+
dispatch({
type: TIMELINE_UPDATE,
timeline,
@@ -38,8 +43,20 @@ export function deleteFromTimelines(id) {
};
};
+export function clearTimeline(timeline) {
+ return (dispatch) => {
+ dispatch({ type: TIMELINE_CLEAR, timeline });
+ };
+};
+
const noOp = () => {};
+const parseTags = (tags = {}, mode) => {
+ return (tags[mode] || []).map((tag) => {
+ return tag.value;
+ });
+};
+
export function expandTimeline(timelineId, path, params = {}, done = noOp) {
return (dispatch, getState) => {
const timeline = getState().getIn(['timelines', timelineId], ImmutableMap());
@@ -76,9 +93,17 @@ export const expandDirectTimeline = ({ maxId } = {}, done = noOp) => ex
export const expandAccountTimeline = (accountId, { maxId, withReplies } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, max_id: maxId });
export const expandAccountFeaturedTimeline = accountId => expandTimeline(`account:${accountId}:pinned`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true });
export const expandAccountMediaTimeline = (accountId, { maxId } = {}) => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { max_id: maxId, only_media: true });
-export const expandHashtagTimeline = (hashtag, { maxId } = {}, done = noOp) => expandTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`, { max_id: maxId }, done);
export const expandListTimeline = (id, { maxId } = {}, done = noOp) => expandTimeline(`list:${id}`, `/api/v1/timelines/list/${id}`, { max_id: maxId }, done);
+export const expandHashtagTimeline = (hashtag, { maxId, tags } = {}, done = noOp) => {
+ return expandTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`, {
+ max_id: maxId,
+ any: parseTags(tags, 'any'),
+ all: parseTags(tags, 'all'),
+ none: parseTags(tags, 'none'),
+ }, done);
+};
+
export function expandTimelineRequest(timeline, isLoadingMore) {
return {
type: TIMELINE_EXPAND_REQUEST,
diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js
new file mode 100644
index 00000000000..82936c8380a
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import Toggle from 'react-toggle';
+import AsyncSelect from 'react-select/lib/Async';
+
+@injectIntl
+export default class ColumnSettings extends React.PureComponent {
+
+ static propTypes = {
+ settings: ImmutablePropTypes.map.isRequired,
+ onChange: PropTypes.func.isRequired,
+ onLoad: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ };
+
+ state = {
+ open: this.hasTags(),
+ };
+
+ hasTags () {
+ return ['all', 'any', 'none'].map(mode => this.tags(mode).length > 0).includes(true);
+ }
+
+ tags (mode) {
+ let tags = this.props.settings.getIn(['tags', mode]) || [];
+ if (tags.toJSON) {
+ return tags.toJSON();
+ } else {
+ return tags;
+ }
+ };
+
+ onSelect = (mode) => {
+ return (value) => {
+ this.props.onChange(['tags', mode], value);
+ };
+ };
+
+ onToggle = () => {
+ if (this.state.open && this.hasTags()) {
+ this.props.onChange('tags', {});
+ }
+ this.setState({ open: !this.state.open });
+ };
+
+ modeSelect (mode) {
+ return (
+
+ {this.modeLabel(mode)}
+
+
+ );
+ }
+
+ modeLabel (mode) {
+ switch(mode) {
+ case 'any': return ;
+ case 'all': return ;
+ case 'none': return ;
+ }
+ return '';
+ };
+
+ render () {
+ return (
+
+
+ {this.state.open &&
+
+ {this.modeSelect('any')}
+ {this.modeSelect('all')}
+ {this.modeSelect('none')}
+
+ }
+
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/containers/column_settings_container.js b/app/javascript/flavours/glitch/features/hashtag_timeline/containers/column_settings_container.js
new file mode 100644
index 00000000000..757cd48fbc2
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/containers/column_settings_container.js
@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+import ColumnSettings from '../components/column_settings';
+import { changeColumnParams } from 'flavours/glitch/actions/columns';
+import api from 'flavours/glitch/util/api';
+
+const mapStateToProps = (state, { columnId }) => {
+ const columns = state.getIn(['settings', 'columns']);
+ const index = columns.findIndex(c => c.get('uuid') === columnId);
+
+ if (!(columnId && index >= 0)) {
+ return {};
+ }
+
+ return { settings: columns.get(index).get('params') };
+};
+
+const mapDispatchToProps = (dispatch, { columnId }) => ({
+ onChange (key, value) {
+ dispatch(changeColumnParams(columnId, key, value));
+ },
+
+ onLoad (value) {
+ return api().get('/api/v2/search', { params: { q: value } }).then(response => {
+ return (response.data.hashtags || []).map((tag) => {
+ return { value: tag.name, label: `#${tag.name}` };
+ });
+ });
+ },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);
diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
index 311fabb63d9..4455f89577b 100644
--- a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
import Column from 'flavours/glitch/components/column';
import ColumnHeader from 'flavours/glitch/components/column_header';
-import { expandHashtagTimeline } from 'flavours/glitch/actions/timelines';
+import ColumnSettingsContainer from './containers/column_settings_container';
+import { expandHashtagTimeline, clearTimeline } from 'flavours/glitch/actions/timelines';
import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
import { FormattedMessage } from 'react-intl';
import { connectHashtagStream } from 'flavours/glitch/actions/streaming';
@@ -16,6 +17,8 @@ const mapStateToProps = (state, props) => ({
@connect(mapStateToProps)
export default class HashtagTimeline extends React.PureComponent {
+ disconnects = [];
+
static propTypes = {
params: PropTypes.object.isRequired,
columnId: PropTypes.string,
@@ -34,6 +37,30 @@ export default class HashtagTimeline extends React.PureComponent {
}
}
+ title = () => {
+ let title = [this.props.params.id];
+ if (this.additionalFor('any')) {
+ title.push();
+ }
+ if (this.additionalFor('all')) {
+ title.push();
+ }
+ if (this.additionalFor('none')) {
+ title.push();
+ }
+ return title;
+ }
+
+ additionalFor = (mode) => {
+ const { tags } = this.props.params;
+
+ if (tags && (tags[mode] || []).length > 0) {
+ return tags[mode].map(tag => tag.value).join('/');
+ } else {
+ return '';
+ }
+ }
+
handleMove = (dir) => {
const { columnId, dispatch } = this.props;
dispatch(moveColumn(columnId, dir));
@@ -43,30 +70,40 @@ export default class HashtagTimeline extends React.PureComponent {
this.column.scrollTop();
}
- _subscribe (dispatch, id) {
- this.disconnect = dispatch(connectHashtagStream(id));
+ _subscribe (dispatch, id, tags = {}) {
+ let any = (tags.any || []).map(tag => tag.value);
+ let all = (tags.all || []).map(tag => tag.value);
+ let none = (tags.none || []).map(tag => tag.value);
+
+ [id, ...any].map((tag) => {
+ this.disconnects.push(dispatch(connectHashtagStream(id, tag, (status) => {
+ let tags = status.tags.map(tag => tag.name);
+ return all.filter(tag => tags.includes(tag)).length === all.length &&
+ none.filter(tag => tags.includes(tag)).length === 0;
+ })));
+ });
}
_unsubscribe () {
- if (this.disconnect) {
- this.disconnect();
- this.disconnect = null;
- }
+ this.disconnects.map(disconnect => disconnect());
+ this.disconnects = [];
}
componentDidMount () {
const { dispatch } = this.props;
- const { id } = this.props.params;
+ const { id, tags } = this.props.params;
- dispatch(expandHashtagTimeline(id));
- this._subscribe(dispatch, id);
+ dispatch(expandHashtagTimeline(id, { tags }));
}
componentWillReceiveProps (nextProps) {
- if (nextProps.params.id !== this.props.params.id) {
- this.props.dispatch(expandHashtagTimeline(nextProps.params.id));
+ const { dispatch, params } = this.props;
+ const { id, tags } = nextProps.params;
+ if (id !== params.id || tags !== params.tags) {
this._unsubscribe();
- this._subscribe(this.props.dispatch, nextProps.params.id);
+ this._subscribe(dispatch, id, tags);
+ this.props.dispatch(clearTimeline(`hashtag:${id}`));
+ this.props.dispatch(expandHashtagTimeline(id, { tags }));
}
}
@@ -79,7 +116,8 @@ export default class HashtagTimeline extends React.PureComponent {
}
handleLoadMore = maxId => {
- this.props.dispatch(expandHashtagTimeline(this.props.params.id, { maxId }));
+ const { id, tags } = this.props.params;
+ this.props.dispatch(expandHashtagTimeline(id, { maxId, tags }));
}
render () {
@@ -92,14 +130,16 @@ export default class HashtagTimeline extends React.PureComponent {
+ >
+ {columnId && }
+
{
return state;
};
+const clearTimeline = (state, timeline) => {
+ return state.updateIn([timeline, 'items'], list => list.clear());
+};
+
const filterTimelines = (state, relationship, statuses) => {
let references;
@@ -121,6 +126,8 @@ export default function timelines(state = initialState, action) {
return updateTimeline(state, action.timeline, fromJS(action.status));
case TIMELINE_DELETE:
return deleteStatus(state, action.id, action.accountId, action.references, action.reblogOf);
+ case TIMELINE_CLEAR:
+ return clearTimeline(state, action.timeline);
case ACCOUNT_BLOCK_SUCCESS:
case ACCOUNT_MUTE_SUCCESS:
return filterTimelines(state, action.relationship, action.statuses);
diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss
index 2e317c382d9..c46d7260ded 100644
--- a/app/javascript/flavours/glitch/styles/_mixins.scss
+++ b/app/javascript/flavours/glitch/styles/_mixins.scss
@@ -51,3 +51,34 @@
border-radius: 0px;
}
}
+
+@mixin search-input() {
+ outline: 0;
+ box-sizing: border-box;
+ width: 100%;
+ border: none;
+ box-shadow: none;
+ font-family: inherit;
+ background: $ui-base-color;
+ color: $darker-text-color;
+ font-size: 14px;
+ margin: 0;
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &::-moz-focus-inner,
+ &:focus,
+ &:active {
+ outline: 0 !important;
+ }
+
+ &:focus {
+ background: lighten($ui-base-color, 4%);
+ }
+
+ @media screen and (max-width: 600px) {
+ font-size: 16px;
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 2b4ba85925a..ce6cc8b2933 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -339,6 +339,26 @@
display: block;
font-weight: 500;
margin-bottom: 10px;
+
+ .column-settings__hashtag-select {
+ &__control {
+ @include search-input();
+ }
+
+ &__multi-value {
+ background: lighten($ui-base-color, 8%);
+ }
+
+ &__multi-value__label,
+ &__input {
+ color: $darker-text-color;
+ }
+
+ &__indicator-separator,
+ &__dropdown-indicator {
+ display: none;
+ }
+ }
}
.column-settings__row {
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index f9e4b588391..3746fbad20f 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -3,36 +3,10 @@
}
.search__input {
- outline: 0;
- box-sizing: border-box;
display: block;
- width: 100%;
- border: none;
padding: 10px;
padding-right: 30px;
- font-family: inherit;
- background: $ui-base-color;
- color: $darker-text-color;
- font-size: 14px;
- margin: 0;
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
- &:focus {
- background: lighten($ui-base-color, 4%);
- }
-
- @media screen and (max-width: 600px) {
- font-size: 16px;
- }
+ @include search-input();
}
.search__icon {