604654ccb4
This PR adds a new notification cleaning mode, super perfectly tuned for accessibility, and removes the previous notification cleaning functionality as it's now redundant. * w.i.p. notif clearing mode * Better CSS for selected notification and shorter text if Stretch is off * wip for rebase ~ * all working in notif clearing mode, except the actual removal * bulk delete route for piggo * cleaning + refactor. endpoint gives 422 for some reason * formatting * use the right route * fix broken destroy_multiple * load more notifs after succ cleaning * satisfy eslint * Removed CSS for the old notif delete button * Tabindex=0 is mandatory In order to make it possible to tab to this element you must have tab index = 0. Removing this violates WCAG and makes it impossible to use the interface without good eyesight and a mouse. So nobody with certain mobility impairments, vision impairments, or brain injuries would be able to use this feature if you don't have tabindex=0 * Corrected aria-label Previous label implied a different behavior from what actually happens * aria role localization & made the overlay behave like a checkbox * checkboxes css and better contrast * color tuning for the notif overlay * fanceh checkboxes etc and nice backgrounds * SHUT UP TRAVIS
252 lines
6.1 KiB
JavaScript
252 lines
6.1 KiB
JavaScript
/*
|
|
|
|
`<StatusContainer>`
|
|
===================
|
|
|
|
Original file by @gargron@mastodon.social et al as part of
|
|
tootsuite/mastodon. Documentation by @kibi@glitch.social. The code
|
|
detecting reblogs has been moved here from <Status>.
|
|
|
|
*/
|
|
|
|
/* * * * */
|
|
|
|
/*
|
|
|
|
Imports:
|
|
--------
|
|
|
|
*/
|
|
|
|
// Package imports //
|
|
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import {
|
|
defineMessages,
|
|
injectIntl,
|
|
FormattedMessage,
|
|
} from 'react-intl';
|
|
|
|
// Mastodon imports //
|
|
import { makeGetStatus } from '../../../mastodon/selectors';
|
|
import {
|
|
replyCompose,
|
|
mentionCompose,
|
|
} from '../../../mastodon/actions/compose';
|
|
import {
|
|
reblog,
|
|
favourite,
|
|
unreblog,
|
|
unfavourite,
|
|
} from '../../../mastodon/actions/interactions';
|
|
import {
|
|
blockAccount,
|
|
muteAccount,
|
|
} from '../../../mastodon/actions/accounts';
|
|
import {
|
|
muteStatus,
|
|
unmuteStatus,
|
|
deleteStatus,
|
|
} from '../../../mastodon/actions/statuses';
|
|
import { initReport } from '../../../mastodon/actions/reports';
|
|
import { openModal } from '../../../mastodon/actions/modal';
|
|
|
|
// Our imports //
|
|
import Status from '.';
|
|
|
|
/* * * * */
|
|
|
|
/*
|
|
|
|
Inital setup:
|
|
-------------
|
|
|
|
The `messages` constant is used to define any messages that we will
|
|
need in our component. In our case, these are the various confirmation
|
|
messages used with statuses.
|
|
|
|
*/
|
|
|
|
const messages = defineMessages({
|
|
deleteConfirm : {
|
|
id : 'confirmations.delete.confirm',
|
|
defaultMessage : 'Delete',
|
|
},
|
|
deleteMessage : {
|
|
id : 'confirmations.delete.message',
|
|
defaultMessage : 'Are you sure you want to delete this status?',
|
|
},
|
|
blockConfirm : {
|
|
id : 'confirmations.block.confirm',
|
|
defaultMessage : 'Block',
|
|
},
|
|
muteConfirm : {
|
|
id : 'confirmations.mute.confirm',
|
|
defaultMessage : 'Mute',
|
|
},
|
|
});
|
|
|
|
/* * * * */
|
|
|
|
/*
|
|
|
|
State mapping:
|
|
--------------
|
|
|
|
The `mapStateToProps()` function maps various state properties to the
|
|
props of our component. We wrap this in a `makeMapStateToProps()`
|
|
function to give us closure and preserve `getStatus()` across function
|
|
calls.
|
|
|
|
*/
|
|
|
|
const makeMapStateToProps = () => {
|
|
const getStatus = makeGetStatus();
|
|
|
|
const mapStateToProps = (state, ownProps) => {
|
|
|
|
let status = getStatus(state, ownProps.id);
|
|
let reblogStatus = status.get('reblog', null);
|
|
let account = undefined;
|
|
let prepend = undefined;
|
|
|
|
/*
|
|
|
|
Here we process reblogs. If our status is a reblog, then we create a
|
|
`prependMessage` to pass along to our `<Status>` along with the
|
|
reblogger's `account`, and set `coreStatus` (the one we will actually
|
|
render) to the status which has been reblogged.
|
|
|
|
*/
|
|
|
|
if (reblogStatus !== null && typeof reblogStatus === 'object') {
|
|
account = status.get('account');
|
|
status = reblogStatus;
|
|
prepend = 'reblogged_by';
|
|
}
|
|
|
|
/*
|
|
|
|
Here are the props we pass to `<Status>`.
|
|
|
|
*/
|
|
|
|
return {
|
|
status : status,
|
|
account : account || ownProps.account,
|
|
me : state.getIn(['meta', 'me']),
|
|
settings : state.get('local_settings'),
|
|
prepend : prepend || ownProps.prepend,
|
|
reblogModal : state.getIn(['meta', 'boost_modal']),
|
|
deleteModal : state.getIn(['meta', 'delete_modal']),
|
|
autoPlayGif : state.getIn(['meta', 'auto_play_gif']),
|
|
};
|
|
};
|
|
|
|
return mapStateToProps;
|
|
};
|
|
|
|
/* * * * */
|
|
|
|
/*
|
|
|
|
Dispatch mapping:
|
|
-----------------
|
|
|
|
The `mapDispatchToProps()` function maps dispatches to our store to the
|
|
various props of our component. We need to provide dispatches for all
|
|
of the things you can do with a status: reply, reblog, favourite, et
|
|
cetera.
|
|
|
|
For a few of these dispatches, we open up confirmation modals; the rest
|
|
just immediately execute their corresponding actions.
|
|
|
|
*/
|
|
|
|
const mapDispatchToProps = (dispatch, { intl }) => ({
|
|
|
|
onReply (status, router) {
|
|
dispatch(replyCompose(status, router));
|
|
},
|
|
|
|
onModalReblog (status) {
|
|
dispatch(reblog(status));
|
|
},
|
|
|
|
onReblog (status, e) {
|
|
if (status.get('reblogged')) {
|
|
dispatch(unreblog(status));
|
|
} else {
|
|
if (e.shiftKey || !this.reblogModal) {
|
|
this.onModalReblog(status);
|
|
} else {
|
|
dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
|
|
}
|
|
}
|
|
},
|
|
|
|
onFavourite (status) {
|
|
if (status.get('favourited')) {
|
|
dispatch(unfavourite(status));
|
|
} else {
|
|
dispatch(favourite(status));
|
|
}
|
|
},
|
|
|
|
onDelete (status) {
|
|
if (!this.deleteModal) {
|
|
dispatch(deleteStatus(status.get('id')));
|
|
} else {
|
|
dispatch(openModal('CONFIRM', {
|
|
message: intl.formatMessage(messages.deleteMessage),
|
|
confirm: intl.formatMessage(messages.deleteConfirm),
|
|
onConfirm: () => dispatch(deleteStatus(status.get('id'))),
|
|
}));
|
|
}
|
|
},
|
|
|
|
onMention (account, router) {
|
|
dispatch(mentionCompose(account, router));
|
|
},
|
|
|
|
onOpenMedia (media, index) {
|
|
dispatch(openModal('MEDIA', { media, index }));
|
|
},
|
|
|
|
onOpenVideo (media, time) {
|
|
dispatch(openModal('VIDEO', { media, time }));
|
|
},
|
|
|
|
onBlock (account) {
|
|
dispatch(openModal('CONFIRM', {
|
|
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
|
|
confirm: intl.formatMessage(messages.blockConfirm),
|
|
onConfirm: () => dispatch(blockAccount(account.get('id'))),
|
|
}));
|
|
},
|
|
|
|
onReport (status) {
|
|
dispatch(initReport(status.get('account'), status));
|
|
},
|
|
|
|
onMute (account) {
|
|
dispatch(openModal('CONFIRM', {
|
|
message: <FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
|
|
confirm: intl.formatMessage(messages.muteConfirm),
|
|
onConfirm: () => dispatch(muteAccount(account.get('id'))),
|
|
}));
|
|
},
|
|
|
|
onMuteConversation (status) {
|
|
if (status.get('muted')) {
|
|
dispatch(unmuteStatus(status.get('id')));
|
|
} else {
|
|
dispatch(muteStatus(status.get('id')));
|
|
}
|
|
},
|
|
});
|
|
|
|
export default injectIntl(
|
|
connect(makeMapStateToProps, mapDispatchToProps)(Status)
|
|
);
|