New notification cleaning mode (#89)

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

1 files changed, 7 insertions, 54 deletions

diff --git a/app/javascript/glitch/components/notification/follow.js b/app/javascript/glitch/components/notification/follow.js
index 26396478b..0e0065eb1 100644
--- a/app/javascript/glitch/components/notification/follow.js
+++ b/app/javascript/glitch/components/notification/follow.js
@@ -36,7 +36,7 @@ Imports:
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import escapeTextContentForBrowser from 'escape-html';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
@@ -45,22 +45,10 @@ import emojify from '../../../mastodon/emoji';
 import Permalink from '../../../mastodon/components/permalink';
 import AccountContainer from '../../../mastodon/containers/account_container';
 
-//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-
-/*
-
-Inital setup:
--------------
-
-The `messages` constant is used to define any messages that we need
-from inside props.
-
-*/
+// Our imports //
+import NotificationOverlayContainer from '../notification/overlay/container';
 
-const messages = defineMessages({
-  deleteNotification :
-    { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
-});
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
 /*
 
@@ -69,31 +57,16 @@ Implementation:
 
 */
 
-@injectIntl
 export default class NotificationFollow extends ImmutablePureComponent {
 
   static propTypes = {
     id                   : PropTypes.number.isRequired,
-    onDeleteNotification : PropTypes.func.isRequired,
     account              : ImmutablePropTypes.map.isRequired,
-    intl                 : PropTypes.object.isRequired,
+    notification         : ImmutablePropTypes.map.isRequired,
   };
 
 /*
 
-###  `handleNotificationDeleteClick()`
-
-This function just calls our `onDeleteNotification()` prop with the
-notification's `id`.
-
-*/
-
-  handleNotificationDeleteClick = () => {
-    this.props.onDeleteNotification(this.props.id);
-  }
-
-/*
-
 ###  `render()`
 
 This actually renders the component.
@@ -101,26 +74,7 @@ This actually renders the component.
 */
 
   render () {
-    const { account, intl } = this.props;
-
-/*
-
-`dismiss` creates the notification dismissal button. Its title is given
-by `dismissTitle`.
-
-*/
-
-    const dismissTitle = intl.formatMessage(messages.deleteNotification);
-    const dismiss = (
-      <button
-        aria-label={dismissTitle}
-        title={dismissTitle}
-        onClick={this.handleNotificationDeleteClick}
-        className='status__prepend-dismiss-button'
-      >
-        <i className='fa fa-eraser' />
-      </button>
-    );
+    const { account, notification } = this.props;
 
 /*
 
@@ -149,6 +103,7 @@ We can now render our component.
 
     return (
       <div className='notification notification-follow'>
+        <NotificationOverlayContainer notification={notification} />
         <div className='notification__message'>
           <div className='notification__favourite-icon-wrapper'>
             <i className='fa fa-fw fa-user-plus' />
@@ -159,8 +114,6 @@ We can now render our component.
             defaultMessage='{name} followed you'
             values={{ name: link }}
           />
-
-          {dismiss}
         </div>
 
         <AccountContainer id={account.get('id')} withNote={false} />