From c0b849bdfda8a2386bc85836d2d181890746de98 Mon Sep 17 00:00:00 2001 From: ThibG Date: Sun, 3 May 2020 22:04:18 +0200 Subject: Fix use of inline CSS in public pages (#13576) Change `account_link_to` to use an image tag rather than some inline CSS. Dropped the `size` parameter in the process, but it wasn't used for anything except the default value of 36px. Dropped CSS rules that were always overriden, and defaulted to 36px width and height instead. --- app/javascript/styles/mastodon/about.scss | 12 ------------ app/javascript/styles/mastodon/components.scss | 5 +++++ app/javascript/styles/mastodon/widgets.scss | 6 ------ 3 files changed, 5 insertions(+), 18 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index 711f34965..3be0aee49 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -543,12 +543,6 @@ $small-breakpoint: 960px; flex: 0 0 auto; } - &__avatar { - width: 44px; - height: 44px; - background-size: 44px 44px; - } - .display-name { font-size: 15px; @@ -749,12 +743,6 @@ $small-breakpoint: 960px; display: flex; align-items: center; } - - .account__avatar { - width: 44px; - height: 44px; - background-size: 44px 44px; - } } &__counters__wrapper { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index e22b87711..3a67bde8f 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1318,8 +1318,13 @@ .account__avatar { @include avatar-radius; + display: block; position: relative; + width: 36px; + height: 36px; + background-size: 36px 36px; + &-inline { display: inline-block; vertical-align: middle; diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index ca050a8d9..5b97d1ec4 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -93,12 +93,6 @@ display: flex; align-items: center; } - - .account__avatar { - width: 44px; - height: 44px; - background-size: 44px 44px; - } } .trends__item { -- cgit From 0d62e097077b60c9914c2f9c425fce69c9b693eb Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 8 May 2020 21:21:57 +0200 Subject: Fix failing jest test (#13681) --- .../features/ui/components/__tests__/column-test.js | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/features/ui/components/__tests__/column-test.js b/app/javascript/mastodon/features/ui/components/__tests__/column-test.js index 89cb2458d..d2791ce08 100644 --- a/app/javascript/mastodon/features/ui/components/__tests__/column-test.js +++ b/app/javascript/mastodon/features/ui/components/__tests__/column-test.js @@ -5,30 +5,21 @@ import ColumnHeader from '../column_header'; describe('', () => { describe(' click handler', () => { - const originalRaf = global.requestAnimationFrame; - - beforeEach(() => { - global.requestAnimationFrame = jest.fn(); - }); - - afterAll(() => { - global.requestAnimationFrame = originalRaf; - }); - it('runs the scroll animation if the column contains scrollable content', () => { const wrapper = mount(
, ); + const scrollToMock = jest.fn(); + wrapper.find(Column).find('.scrollable').getDOMNode().scrollTo = scrollToMock; wrapper.find(ColumnHeader).find('button').simulate('click'); - expect(global.requestAnimationFrame.mock.calls.length).toEqual(1); + expect(scrollToMock).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 }); }); it('does not try to scroll if there is no scrollable content', () => { const wrapper = mount(); wrapper.find(ColumnHeader).find('button').simulate('click'); - expect(global.requestAnimationFrame.mock.calls.length).toEqual(0); }); }); }); -- cgit From 26b08a3c54847f2816f78c3ac67ace001d3fea1f Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Sun, 10 May 2020 17:36:18 +0900 Subject: Add remote only to public timeline (#13504) * Add remote only to public timeline * Fix code style --- .../api/v1/timelines/public_controller.rb | 4 +-- app/javascript/mastodon/actions/streaming.js | 2 +- app/javascript/mastodon/actions/timelines.js | 2 +- .../public_timeline/components/column_settings.js | 30 ++++++++++++++++++++++ .../containers/column_settings_container.js | 2 +- .../mastodon/features/public_timeline/index.js | 29 +++++++++++---------- .../features/ui/components/columns_area.js | 1 + app/models/status.rb | 14 +++++++--- spec/models/status_spec.rb | 27 +++++++++++++++++++ streaming/index.js | 16 ++++++++++++ 10 files changed, 106 insertions(+), 21 deletions(-) create mode 100644 app/javascript/mastodon/features/public_timeline/components/column_settings.js (limited to 'app/javascript') diff --git a/app/controllers/api/v1/timelines/public_controller.rb b/app/controllers/api/v1/timelines/public_controller.rb index 581befef1..c6e7854d9 100644 --- a/app/controllers/api/v1/timelines/public_controller.rb +++ b/app/controllers/api/v1/timelines/public_controller.rb @@ -39,7 +39,7 @@ class Api::V1::Timelines::PublicController < Api::BaseController end def public_timeline_statuses - Status.as_public_timeline(current_account, truthy_param?(:local)) + Status.as_public_timeline(current_account, truthy_param?(:remote) ? :remote : truthy_param?(:local)) end def insert_pagination_headers @@ -47,7 +47,7 @@ class Api::V1::Timelines::PublicController < Api::BaseController end def pagination_params(core_params) - params.slice(:local, :limit, :only_media).permit(:local, :limit, :only_media).merge(core_params) + params.slice(:local, :remote, :limit, :only_media).permit(:local, :remote, :limit, :only_media).merge(core_params) end def next_path diff --git a/app/javascript/mastodon/actions/streaming.js b/app/javascript/mastodon/actions/streaming.js index 79b08bdda..080d665f4 100644 --- a/app/javascript/mastodon/actions/streaming.js +++ b/app/javascript/mastodon/actions/streaming.js @@ -73,7 +73,7 @@ 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 connectPublicStream = ({ onlyMedia, onlyRemote } = {}) => connectTimelineStream(`public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`, `public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`); 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/mastodon/actions/timelines.js b/app/javascript/mastodon/actions/timelines.js index 861827d33..01f0fb015 100644 --- a/app/javascript/mastodon/actions/timelines.js +++ b/app/javascript/mastodon/actions/timelines.js @@ -107,7 +107,7 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) { }; export const expandHomeTimeline = ({ maxId } = {}, done = noOp) => expandTimeline('home', '/api/v1/timelines/home', { max_id: maxId }, done); -export const expandPublicTimeline = ({ maxId, onlyMedia } = {}, done = noOp) => expandTimeline(`public${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { max_id: maxId, only_media: !!onlyMedia }, done); +export const expandPublicTimeline = ({ maxId, onlyMedia, onlyRemote } = {}, done = noOp) => expandTimeline(`public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { remote: !!onlyRemote, max_id: maxId, only_media: !!onlyMedia }, done); export const expandCommunityTimeline = ({ maxId, onlyMedia } = {}, done = noOp) => expandTimeline(`community${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { local: true, max_id: maxId, only_media: !!onlyMedia }, done); 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 }); diff --git a/app/javascript/mastodon/features/public_timeline/components/column_settings.js b/app/javascript/mastodon/features/public_timeline/components/column_settings.js new file mode 100644 index 000000000..756b6fe06 --- /dev/null +++ b/app/javascript/mastodon/features/public_timeline/components/column_settings.js @@ -0,0 +1,30 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { injectIntl, FormattedMessage } from 'react-intl'; +import SettingToggle from '../../notifications/components/setting_toggle'; + +export default @injectIntl +class ColumnSettings extends React.PureComponent { + + static propTypes = { + settings: ImmutablePropTypes.map.isRequired, + onChange: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + columnId: PropTypes.string, + }; + + render () { + const { settings, onChange } = this.props; + + return ( +
+
+ } /> + } /> +
+
+ ); + } + +} diff --git a/app/javascript/mastodon/features/public_timeline/containers/column_settings_container.js b/app/javascript/mastodon/features/public_timeline/containers/column_settings_container.js index c56caa59e..8c9e8aef4 100644 --- a/app/javascript/mastodon/features/public_timeline/containers/column_settings_container.js +++ b/app/javascript/mastodon/features/public_timeline/containers/column_settings_container.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import ColumnSettings from '../../community_timeline/components/column_settings'; +import ColumnSettings from '../components/column_settings'; import { changeSetting } from '../../../actions/settings'; import { changeColumnParams } from '../../../actions/columns'; diff --git a/app/javascript/mastodon/features/public_timeline/index.js b/app/javascript/mastodon/features/public_timeline/index.js index 7aabd7f6e..988b1b070 100644 --- a/app/javascript/mastodon/features/public_timeline/index.js +++ b/app/javascript/mastodon/features/public_timeline/index.js @@ -19,11 +19,13 @@ const mapStateToProps = (state, { columnId }) => { const columns = state.getIn(['settings', 'columns']); const index = columns.findIndex(c => c.get('uuid') === uuid); const onlyMedia = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyMedia']) : state.getIn(['settings', 'public', 'other', 'onlyMedia']); + const onlyRemote = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyRemote']) : state.getIn(['settings', 'public', 'other', 'onlyRemote']); const timelineState = state.getIn(['timelines', `public${onlyMedia ? ':media' : ''}`]); return { hasUnread: !!timelineState && timelineState.get('unread') > 0, onlyMedia, + onlyRemote, }; }; @@ -47,15 +49,16 @@ class PublicTimeline extends React.PureComponent { multiColumn: PropTypes.bool, hasUnread: PropTypes.bool, onlyMedia: PropTypes.bool, + onlyRemote: PropTypes.bool, }; handlePin = () => { - const { columnId, dispatch, onlyMedia } = this.props; + const { columnId, dispatch, onlyMedia, onlyRemote } = this.props; if (columnId) { dispatch(removeColumn(columnId)); } else { - dispatch(addColumn('PUBLIC', { other: { onlyMedia } })); + dispatch(addColumn(onlyRemote ? 'REMOTE' : 'PUBLIC', { other: { onlyMedia, onlyRemote } })); } } @@ -69,19 +72,19 @@ class PublicTimeline extends React.PureComponent { } componentDidMount () { - const { dispatch, onlyMedia } = this.props; + const { dispatch, onlyMedia, onlyRemote } = this.props; - dispatch(expandPublicTimeline({ onlyMedia })); - this.disconnect = dispatch(connectPublicStream({ onlyMedia })); + dispatch(expandPublicTimeline({ onlyMedia, onlyRemote })); + this.disconnect = dispatch(connectPublicStream({ onlyMedia, onlyRemote })); } componentDidUpdate (prevProps) { - if (prevProps.onlyMedia !== this.props.onlyMedia) { - const { dispatch, onlyMedia } = this.props; + if (prevProps.onlyMedia !== this.props.onlyMedia || prevProps.onlyRemote !== this.props.onlyRemote) { + const { dispatch, onlyMedia, onlyRemote } = this.props; this.disconnect(); - dispatch(expandPublicTimeline({ onlyMedia })); - this.disconnect = dispatch(connectPublicStream({ onlyMedia })); + dispatch(expandPublicTimeline({ onlyMedia, onlyRemote })); + this.disconnect = dispatch(connectPublicStream({ onlyMedia, onlyRemote })); } } @@ -97,13 +100,13 @@ class PublicTimeline extends React.PureComponent { } handleLoadMore = maxId => { - const { dispatch, onlyMedia } = this.props; + const { dispatch, onlyMedia, onlyRemote } = this.props; - dispatch(expandPublicTimeline({ maxId, onlyMedia })); + dispatch(expandPublicTimeline({ maxId, onlyMedia, onlyRemote })); } render () { - const { intl, shouldUpdateScroll, columnId, hasUnread, multiColumn, onlyMedia } = this.props; + const { intl, shouldUpdateScroll, columnId, hasUnread, multiColumn, onlyMedia, onlyRemote } = this.props; const pinned = !!columnId; return ( @@ -122,7 +125,7 @@ class PublicTimeline extends React.PureComponent { { 'public:media', 'public:local', 'public:local:media', + 'public:remote', + 'public:remote:media', 'hashtag', 'hashtag:local', ]; @@ -297,6 +299,7 @@ const startWorker = (workerId) => { const PUBLIC_ENDPOINTS = [ '/api/v1/streaming/public', '/api/v1/streaming/public/local', + '/api/v1/streaming/public/remote', '/api/v1/streaming/hashtag', '/api/v1/streaming/hashtag/local', ]; @@ -535,6 +538,13 @@ const startWorker = (workerId) => { streamFrom(channel, req, streamToHttp(req, res), streamHttpEnd(req), true); }); + app.get('/api/v1/streaming/public/remote', (req, res) => { + const onlyMedia = req.query.only_media === '1' || req.query.only_media === 'true'; + const channel = onlyMedia ? 'timeline:public:remote:media' : 'timeline:public:remote'; + + streamFrom(channel, req, streamToHttp(req, res), streamHttpEnd(req), true); + }); + app.get('/api/v1/streaming/direct', (req, res) => { const channel = `timeline:direct:${req.accountId}`; streamFrom(channel, req, streamToHttp(req, res), streamHttpEnd(req, subscriptionHeartbeat(channel)), true); @@ -599,12 +609,18 @@ const startWorker = (workerId) => { case 'public:local': streamFrom('timeline:public:local', req, streamToWs(req, ws), streamWsEnd(req, ws), true); break; + case 'public:remote': + streamFrom('timeline:public:remote', req, streamToWs(req, ws), streamWsEnd(req, ws), true); + break; case 'public:media': streamFrom('timeline:public:media', req, streamToWs(req, ws), streamWsEnd(req, ws), true); break; case 'public:local:media': streamFrom('timeline:public:local:media', req, streamToWs(req, ws), streamWsEnd(req, ws), true); break; + case 'public:remote:media': + streamFrom('timeline:public:remote:media', req, streamToWs(req, ws), streamWsEnd(req, ws), true); + break; case 'direct': channel = `timeline:direct:${req.accountId}`; streamFrom(channel, req, streamToWs(req, ws), streamWsEnd(req, ws, subscriptionHeartbeat(channel)), true); -- cgit