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
		
			
				
	
	
		
			251 lines
		
	
	
	
		
			6.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			251 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)
 | |
| );
 |