Improved notifications cleaning UI with set operations (#109)

* added notification cleaning drawer

* bugfix

* fully implemented set operations for notif cleaning

* i18n for notif cleaning drawer & improved logic slightly. Also added a confirm dialog

* - notif dismiss "overlay" now shoves the notif aside to avoid overlap
- added focus ring to header buttons
- removed notif overlay entirely from DOM if mode is disabled

* removed comment

* CSS tuning - inconsistent division lines fix

2 files changed, 53 insertions, 67 deletions

diff --git a/app/javascript/glitch/components/column/notif_cleaning_widget/container.js b/app/javascript/glitch/components/column/notif_cleaning_widget/container.js
index bf079e3c4..d3507d752 100644
--- a/app/javascript/glitch/components/column/notif_cleaning_widget/container.js
+++ b/app/javascript/glitch/components/column/notif_cleaning_widget/container.js
@@ -24,7 +24,10 @@ import NotificationPurgeButtons from './notification_purge_buttons';
 import {
   deleteMarkedNotifications,
   enterNotificationClearingMode,
+  markAllNotifications,
 } from '../../../../mastodon/actions/notifications';
+import { defineMessages, injectIntl } from 'react-intl';
+import { openModal } from '../../../../mastodon/actions/modal';
 
 //  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
@@ -39,18 +42,39 @@ deleting notifications.
 
 */
 
-const mapDispatchToProps = dispatch => ({
+const messages = defineMessages({
+  clearMessage: { id: 'notifications.marked_clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all selected notifications?' },
+  clearConfirm: { id: 'notifications.marked_clear', defaultMessage: 'Clear selected notifications' },
+});
+
+const mapDispatchToProps = (dispatch, { intl }) => ({
   onEnterCleaningMode(yes) {
     dispatch(enterNotificationClearingMode(yes));
   },
 
-  onDeleteMarkedNotifications() {
-    dispatch(deleteMarkedNotifications());
+  onDeleteMarked() {
+    dispatch(openModal('CONFIRM', {
+      message: intl.formatMessage(messages.clearMessage),
+      confirm: intl.formatMessage(messages.clearConfirm),
+      onConfirm: () => dispatch(deleteMarkedNotifications()),
+    }));
+  },
+
+  onMarkAll() {
+    dispatch(markAllNotifications(true));
+  },
+
+  onMarkNone() {
+    dispatch(markAllNotifications(false));
+  },
+
+  onInvert() {
+    dispatch(markAllNotifications(null));
   },
 });
 
 const mapStateToProps = state => ({
-  active: state.getIn(['notifications', 'cleaningMode']),
+  markNewForDelete: state.getIn(['notifications', 'markNewForDelete']),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(NotificationPurgeButtons);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NotificationPurgeButtons));
diff --git a/app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js b/app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js
index e41572256..62c887fb7 100644
--- a/app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js
+++ b/app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js
@@ -16,83 +16,45 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 //  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
 const messages = defineMessages({
-  enter : { id: 'notification_purge.start', defaultMessage: 'Enter notification cleaning mode' },
-  accept : { id: 'notification_purge.confirm', defaultMessage: 'Dismiss selected notifications' },
-  abort : { id: 'notification_purge.abort', defaultMessage: 'Leave cleaning mode' },
+  btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
+  btnNone : { id: 'notification_purge.btn_none', defaultMessage: 'Select\nnone' },
+  btnInvert : { id: 'notification_purge.btn_invert', defaultMessage: 'Invert\nselection' },
+  btnApply : { id: 'notification_purge.btn_apply', defaultMessage: 'Clear\nselected' },
 });
 
 @injectIntl
 export default class NotificationPurgeButtons extends ImmutablePureComponent {
 
   static propTypes = {
-    // Nukes all marked notifications
-    onDeleteMarkedNotifications : PropTypes.func.isRequired,
-    // Enables or disables the mode
-    // and also clears the marked status of all notifications
-    onEnterCleaningMode : PropTypes.func.isRequired,
-    // Active state, changed via onStateChange()
-    active: PropTypes.bool.isRequired,
-    // i18n
+    onDeleteMarked : PropTypes.func.isRequired,
+    onMarkAll : PropTypes.func.isRequired,
+    onMarkNone : PropTypes.func.isRequired,
+    onInvert : PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    markNewForDelete: PropTypes.bool,
   };
 
-  onEnterBtnClick = () => {
-    this.props.onEnterCleaningMode(true);
-  }
-
-  onAcceptBtnClick = () => {
-    this.props.onDeleteMarkedNotifications();
-  }
-
-  onAbortBtnClick = () => {
-    this.props.onEnterCleaningMode(false);
-  }
-
   render () {
-    const { intl, active } = this.props;
-
-    const msgEnter = intl.formatMessage(messages.enter);
-    const msgAccept = intl.formatMessage(messages.accept);
-    const msgAbort = intl.formatMessage(messages.abort);
-
-    let enterButton, acceptButton, abortButton;
+    const { intl, markNewForDelete } = this.props;
 
-    if (active) {
-      acceptButton = (
-        <button
-          className='active'
-          aria-label={msgAccept}
-          title={msgAccept}
-          onClick={this.onAcceptBtnClick}
-        >
-          <i className='fa fa-check' />
+    //className='active'
+    return (
+      <div className='column-header__notif-cleaning-buttons'>
+        <button onClick={this.props.onMarkAll} className={markNewForDelete ? 'active' : ''}>
+          <b>∀</b><br />{intl.formatMessage(messages.btnAll)}
         </button>
-      );
-      abortButton = (
-        <button
-          className='active'
-          aria-label={msgAbort}
-          title={msgAbort}
-          onClick={this.onAbortBtnClick}
-        >
-          <i className='fa fa-times' />
+
+        <button onClick={this.props.onMarkNone} className={!markNewForDelete ? 'active' : ''}>
+          <b>∅</b><br />{intl.formatMessage(messages.btnNone)}
         </button>
-      );
-    } else {
-      enterButton = (
-        <button
-          aria-label={msgEnter}
-          title={msgEnter}
-          onClick={this.onEnterBtnClick}
-        >
-          <i className='fa fa-eraser' />
+
+        <button onClick={this.props.onInvert}>
+          <b>¬</b><br />{intl.formatMessage(messages.btnInvert)}
         </button>
-      );
-    }
 
-    return (
-      <div className='column-header__notif-cleaning-buttons'>
-        {acceptButton}{abortButton}{enterButton}
+        <button onClick={this.props.onDeleteMarked}>
+          <i className='fa fa-trash' /><br />{intl.formatMessage(messages.btnApply)}
+        </button>
       </div>
     );
   }