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

app/javascript/mastodon/components/column_header.js

@@ -1,8 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 
+// Glitch imports
+import NotificationPurgeButtonsContainer from '../../glitch/components/column/notif_cleaning_widget/container';
+
+const messages = defineMessages({
+  titleNotifClearing: { id: 'column.notifications_clearing', defaultMessage: 'Dismiss selected notifications:' },
+  titleNotifClearingShort: { id: 'column.notifications_clearing_short', defaultMessage: 'Dismiss selected:' },
+});
+
+@injectIntl
 export default class ColumnHeader extends React.PureComponent {
 
   static contextTypes = {
@@ -13,13 +23,17 @@ export default class ColumnHeader extends React.PureComponent {
     title: PropTypes.node.isRequired,
     icon: PropTypes.string.isRequired,
     active: PropTypes.bool,
+    localSettings : ImmutablePropTypes.map,
     multiColumn: PropTypes.bool,
     showBackButton: PropTypes.bool,
+    notifCleaning: PropTypes.bool, // true only for the notification column
+    notifCleaningActive: PropTypes.bool,
     children: PropTypes.node,
     pinned: PropTypes.bool,
     onPin: PropTypes.func,
     onMove: PropTypes.func,
     onClick: PropTypes.func,
+    intl: PropTypes.object.isRequired,
   };
 
   state = {
@@ -58,9 +72,16 @@ export default class ColumnHeader extends React.PureComponent {
   }
 
   render () {
-    const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton } = this.props;
+    const { intl, icon, active, children, pinned, onPin, multiColumn, showBackButton, notifCleaning, localSettings } = this.props;
     const { collapsed, animating } = this.state;
 
+    let title = this.props.title;
+    if (notifCleaning && this.props.notifCleaningActive) {
+      title = intl.formatMessage(localSettings.getIn(['stretch']) ?
+        messages.titleNotifClearing :
+        messages.titleNotifClearingShort);
+    }
+
     const wrapperClassName = classNames('column-header__wrapper', {
       'active': active,
     });
@@ -130,6 +151,7 @@ export default class ColumnHeader extends React.PureComponent {
           {title}
 
           <div className='column-header__buttons'>
+            {notifCleaning ? (<NotificationPurgeButtonsContainer />) : null}
             {backButton}
             {collapseButton}
           </div>