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, 10 insertions, 8 deletions

diff --git a/app/javascript/glitch/components/notification/overlay/container.js b/app/javascript/glitch/components/notification/overlay/container.js
index 019b78d0b..089f615f0 100644
--- a/app/javascript/glitch/components/notification/overlay/container.js
+++ b/app/javascript/glitch/components/notification/overlay/container.js
@@ -43,7 +43,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 const mapStateToProps = state => ({
-  revealed: state.getIn(['notifications', 'cleaningMode']),
+  show: state.getIn(['notifications', 'cleaningMode']),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay);
diff --git a/app/javascript/glitch/components/notification/overlay/notification_overlay.js b/app/javascript/glitch/components/notification/overlay/notification_overlay.js
index 73eda718f..aaca95cac 100644
--- a/app/javascript/glitch/components/notification/overlay/notification_overlay.js
+++ b/app/javascript/glitch/components/notification/overlay/notification_overlay.js
@@ -24,7 +24,7 @@ export default class NotificationOverlay extends ImmutablePureComponent {
   static propTypes = {
     notification    : ImmutablePropTypes.map.isRequired,
     onMarkForDelete : PropTypes.func.isRequired,
-    revealed        : PropTypes.bool.isRequired,
+    show            : PropTypes.bool.isRequired,
     intl            : PropTypes.object.isRequired,
   };
 
@@ -35,25 +35,27 @@ export default class NotificationOverlay extends ImmutablePureComponent {
   }
 
   render () {
-    const { notification, revealed, intl } = this.props;
+    const { notification, show, intl } = this.props;
 
     const active = notification.get('markedForDelete');
     const label = intl.formatMessage(messages.markForDeletion);
 
-    return (
+    return show ? (
       <div
         aria-label={label}
         role='checkbox'
         aria-checked={active}
         tabIndex={0}
-        className={`notification__dismiss-overlay ${active ? 'active' : ''} ${revealed ? 'show' : ''}`}
+        className={`notification__dismiss-overlay ${active ? 'active' : ''}`}
         onClick={this.onToggleMark}
       >
-        <div className='notification__dismiss-overlay__ckbox' aria-hidden='true' title={label}>
-          {active ? (<i className='fa fa-check' />) : ''}
+        <div className='wrappy'>
+          <div className='ckbox' aria-hidden='true' title={label}>
+            {active ? (<i className='fa fa-check' />) : ''}
+          </div>
         </div>
       </div>
-    );
+    ) : null;
   }
 
 }