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, 74 insertions, 16 deletions

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 0cd082985..dbdf286a9 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -451,6 +451,63 @@
   cursor: pointer;
 }
 
+.notification__dismiss-overlay {
+  position: absolute;
+  left: 0; top: 0; right: 0; bottom: 0;
+
+  $c1: #00000A;
+  $c2: #222228;
+  background: linear-gradient(to right,
+    rgba($c1, 0.1),
+    rgba($c1, 0.2) 60%,
+    rgba($c2, 1) 90%,
+    rgba($c2, 1));
+
+  z-index: 999;
+  align-items: center;
+  justify-content: flex-end;
+  cursor: pointer;
+
+  display: none;
+
+  &.show {
+    display: flex;
+  }
+
+  // make it brighter
+  &.active {
+    $c: #222931;
+    background: linear-gradient(to right,
+      rgba($c, 0.1),
+      rgba($c, 0.2) 60%,
+      rgba($c, 1) 90%,
+      rgba($c, 1));
+  }
+
+  &:focus {
+    outline: 0 !important;
+  }
+}
+
+.notification__dismiss-overlay__ckbox {
+  border: 2px solid #9baec8;
+  border-radius: 2px;
+  width: 30px;
+  height: 30px;
+  margin-right: 20px;
+  font-size: 20px;
+  color: #c3dcfd;
+  text-shadow: 0 0 5px black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :focus & {
+    outline: rgb(77, 144, 254) auto 10px;
+    outline: -webkit-focus-ring-color auto 10px;
+  }
+}
+
 // --- Extra clickable area in the status gutter ---
 .ui.wide {
   @mixin xtraspaces-full {
@@ -627,24 +684,14 @@
   position: absolute;
 }
 
-.status__prepend-dismiss-button {
-  border: 0;
-  background: transparent;
-  position: absolute;
-  right: -3px;
-  opacity: 0;
-  transition: opacity 0.1s ease-in-out;
-
-  i.fa {
-    color: crimson;
-  }
+.notification-follow {
+  position: relative;
 
-  .notification__message:hover & {
-    opacity: 1;
-  }
+  // same like Status
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
 
-  .notification-follow & {
-    right: 6px;
+  .account {
+    border-bottom: 0 none;
   }
 }
 
@@ -2408,6 +2455,17 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.column-header__notif-cleaning-buttons {
+  display: flex;
+  align-items: stretch;
+
+  button {
+    @extend .column-header__button;
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
 .column-header__collapsible {
   max-height: 70vh;
   overflow: hidden;