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

1 files changed, 29 insertions, 5 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));