N°2039 - Rework view all notifications page (#617)

* N°2039 - Rework view all notifications page

* N°2039 - Replace modals with toasts

* N°2039 - Add bulk mode to view all notifications page

* Apply suggestions from code review

Co-authored-by: Molkobain <lajarige.guillaume@free.fr>

* Apply suggestions from code review

Co-authored-by: Molkobain <lajarige.guillaume@free.fr>

* Apply suggestions from code review

Co-authored-by: Molkobain <lajarige.guillaume@free.fr>

* Apply suggestions from code review

Co-authored-by: Molkobain <lajarige.guillaume@free.fr>

* Apply suggestions from code review

Co-authored-by: Molkobain <lajarige.guillaume@free.fr>

* Update css/backoffice/pages/_notifications.scss

* Update dictionaries/ui/application/newsroom/fr.dictionary.itop.newsroom.php

* Apply suggestions from code review

Co-authored-by: Molkobain <lajarige.guillaume@free.fr>

* Add since in phpdoc

* Change newsroom empty notification illustration

* N°2039 - Refactor code to factorize logic

---------

Co-authored-by: Molkobain <lajarige.guillaume@free.fr>

css/backoffice/_shame.scss

@@ -49,3 +49,63 @@
 .ibo-navigation-menu.ibo-is-active .ibo-navigation-menu--drawer{
     transform: translate3d(0,0,0);
 }
+
+// Toggler legacy CSS that has somehow been added to iTop 3.0 and that is now used by some extensions
+// Round Toggle
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  vertical-align: baseline;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  display: none;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $ibo-color-secondary-600;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 3px;
+  bottom: 3px;
+  background-color: $ibo-color-secondary-300;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: $ibo-color-primary-600;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px $ibo-color-primary-600;
+}
+
+input:checked + .slider:before {
+  transform: translateX(14.5px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 20px;
+}
+
+.slider.round:before {
+  border-radius: 7px;
+}

css/backoffice/components/_panel.scss

@@ -85,6 +85,9 @@ $ibo-panel--collapsible-toggler--margin-right: $ibo-spacing-300 !default;
 $ibo-panel--collapsible-toggler--font-size: $ibo-font-size-250 !default;
 $ibo-panel--collapsible-toggler--color: $ibo-color-grey-700 !default;
 
+$ibo-panel--is-selectable--body--after--z-index: $ibo-panel--header--z-index + 1 !default;
+$ibo-panel--is-selectable--body--after--font-size: $ibo-font-size-700 !default;
+
 /* Rules */
 .ibo-panel {
   --ibo-main-color: #{map-get($ibo-panel-colors, 'neutral')}; /* --ibo-main-color is to allow overload from custom dynamic value from the DM. The overload will be done through an additional CSS class of a particular DM class or DM attribute */
@@ -128,6 +131,30 @@ $ibo-panel--collapsible-toggler--color: $ibo-color-grey-700 !default;
       }
     }
   }
+  &.ibo-is-selectable .ibo-panel--body::after {
+    @include ibo-selectable;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    height: 100%;
+    width: 100%;
+    z-index: $ibo-panel--is-selectable--body--after--z-index;
+    font-size: $ibo-panel--is-selectable--body--after--font-size;
+  }
+  &.ibo-is-selectable:hover .ibo-panel--body::after {
+    @include ibo-selectable-hover;
+    display: flex;
+  }
+  &.ibo-is-selected .ibo-panel--body::after {
+    @include ibo-selected;
+    display: flex;
+  }
+  &.ibo-is-selected:hover .ibo-panel--body::after {
+    @include ibo-selected-hover;
+    display: flex;
+  }
 }
 
 .ibo-panel--header {

css/backoffice/components/input/_all.scss

@@ -16,3 +16,4 @@
 @import "input-one-way-password";
 @import "input-set";
 @import "input-text";
+@import "input-toggler";

css/backoffice/components/input/_input-toggler.scss

@@ -0,0 +1,72 @@
+/*
+ * @copyright   Copyright (C) 2010-2024 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-toggler--wrapper--width: 36px !default;
+$ibo-toggler--wrapper--height: 20px !default;
+
+$ibo-toggler--slider--border-radius: $ibo-border-radius-900 !default;
+$ibo-toggler--slider--background-color: $ibo-color-secondary-600 !default;
+
+$ibo-toggler--slider--before--height: 15px !default;
+$ibo-toggler--slider--before--width: 15px !default;
+$ibo-toggler--slider--before--border-radius: $ibo-border-radius-full !default;
+$ibo-toggler--slider--before--background-color: $ibo-color-grey-100 !default;
+
+$ibo-toggler--slider--checked--background-color: $ibo-color-primary-600 !default;
+$ibo-toggler--slider--focus--box-shadow: 0 0 1px $ibo-color-primary-600 !default;
+
+$ibo-toggler--label--margin-left: 4px !default;
+
+
+.ibo-toggler--wrapper {
+  position: relative;
+  display: inline-block;
+  width: $ibo-toggler--wrapper--width;
+  height: $ibo-toggler--wrapper--height;
+  vertical-align: baseline;
+  .ibo-toggler {
+    display: none;
+  }
+}
+
+.ibo-toggler--slider{
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: $ibo-toggler--slider--border-radius;
+  background-color: $ibo-toggler--slider--background-color;
+  transition: .4s;
+}
+
+.ibo-toggler--slider:before {
+  content: "";
+  position: absolute;
+  left: 3px;
+  bottom: 3px;
+  height: $ibo-toggler--slider--before--height;
+  width: $ibo-toggler--slider--before--width;
+  border-radius: $ibo-toggler--slider--before--border-radius;
+  background-color: $ibo-toggler--slider--before--background-color;
+  transition: .4s;
+}
+
+.ibo-toggler--wrapper input:checked + .ibo-toggler--slider {
+  background-color: $ibo-toggler--slider--checked--background-color;
+}
+
+input:focus + .ibo-toggler--slider {
+  box-shadow: $ibo-toggler--slider--focus--box-shadow;
+}
+
+input:checked + .ibo-toggler--slider:before {
+  transform: translateX(14.5px);
+}
+
+label ~ .ibo-toggler--wrapper {
+  margin-left: $ibo-toggler--label--margin-left;
+}

css/backoffice/layout/_top-bar.scss

@@ -62,63 +62,4 @@ $ibo-top-bar--toolbar-dashboard-title--max-width: 350px !default;
 	@extend %ibo-full-height-content;
 	display: flex;
 	align-items: center;
-}
-
-// Round Toggle
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 20px;
-  vertical-align: baseline;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  display: none;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: $ibo-color-secondary-600;
-  transition: .4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 15px;
-  width: 15px;
-  left: 3px;
-  bottom: 3px;
-  background-color: $ibo-color-secondary-300;
-  transition: .4s;
-}
-
-input:checked + .slider {
-  background-color: $ibo-color-primary-600;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px $ibo-color-primary-600;
-}
-
-input:checked + .slider:before {
-  transform: translateX(14.5px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 20px;
-}
-
-.slider.round:before {
-  border-radius: 7px;
-}
+}

css/backoffice/layout/object/_object-summary.scss

@@ -3,7 +3,8 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-object-summary--header--margin-y: $ibo-panel--highlight--height!default;
+$ibo-object-summary--header--margin-top: $ibo-panel--highlight--height!default;
+$ibo-object-summary--header--margin-bottom: $ibo-spacing-0!default;
 $ibo-object-summary--header--margin-x: $ibo-spacing-0 !default;
 
 $ibo-object-summary--header--padding-y: $ibo-spacing-300 !default;
@@ -51,7 +52,7 @@ $ibo-object-summary--content--attributes--code--padding-right: $ibo-spacing-500
 }
 
 .ibo-object-summary--header{
-  margin: $ibo-object-summary--header--margin-y $ibo-object-summary--header--margin-x;
+  margin: $ibo-object-summary--header--margin-top $ibo-object-summary--header--margin-x $ibo-object-summary--header--margin-bottom $ibo-object-summary--header--margin-x;
   padding: $ibo-object-summary--header--padding-y $ibo-object-summary--header--padding-x;
   background-color: $ibo-object-summary--header--background-color;
   border-bottom:  $ibo-object-summary--header--border;

css/backoffice/pages/_all.scss

@@ -16,4 +16,5 @@
 @import "run-query";
 @import "welcome-popup";
 @import "oauth.wizard";
+@import "notifications";
 @import "notifications-center";

css/backoffice/pages/_notifications.scss

@@ -0,0 +1,66 @@
+/*
+ * @copyright   Copyright (C) 2010-2024 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-notifications--view-all--container--grid-gap: $ibo-spacing-600 !default;
+$ibo-notifications--view-all--container--object-summary--panel--body--max-height: unset !default;
+
+$ibo-notifications--view-all--item--unread--highlight--background-color: $ibo-color-red-600 !default;
+$ibo-notifications--view-all--item--read--highlight--background-color: $ibo-color-grey-200 !default;
+
+$ibo-notifications--view-all--container--large--grid-template-columns: repeat(3, 1fr) !default;
+$ibo-notifications--view-all--container--medium--grid-template-columns: repeat(2, 1fr) !default;
+$ibo-notifications--view-all--container--small--grid-template-columns: repeat(1, 1fr) !default;
+
+$ibo-notifications--view-all--empty--margin-top: $ibo-spacing-950 !default;
+$ibo-notifications--view-all--empty--svg--max-width: 30% !default;
+
+.ibo-notifications--view-all--container{
+  display: grid;
+  grid-gap: $ibo-notifications--view-all--container--grid-gap;
+  .ibo-object-summary  .ibo-panel--title{
+    font-size: $ibo-font-size-250;
+  }
+  .ibo-object-summary > .ibo-panel--body{
+    box-shadow: none;
+    max-height: $ibo-notifications--view-all--container--object-summary--panel--body--max-height;
+  }
+  .ibo-object-summary + .ibo-object-summary{
+    margin-top: 0;
+  }
+
+  @include mobile {
+    grid-template-columns: $ibo-notifications--view-all--container--small--grid-template-columns;
+  }
+  @include desktop {
+    grid-template-columns: $ibo-notifications--view-all--container--medium--grid-template-columns;
+  }
+  @include fullhd {
+    grid-template-columns: $ibo-notifications--view-all--container--large--grid-template-columns;  }
+}
+.ibo-notifications--view-all--toolbar {
+  justify-content: space-between;
+}
+.ibo-notifications--view-all--toggler {
+  display: flex;
+  align-content: center;
+}
+
+.ibo-notifications--view-all--item--read .ibo-panel--body::before{
+  background-color: $ibo-notifications--view-all--item--read--highlight--background-color;
+}
+.ibo-notifications--view-all--item--unread .ibo-panel--body::before{
+  background-color: $ibo-notifications--view-all--item--unread--highlight--background-color;
+}
+
+.ibo-notifications--view-all--empty {
+  @extend %ibo-fully-centered-content;
+  flex-direction: column;
+  margin-top: $ibo-notifications--view-all--empty--margin-top;
+  
+  svg {
+    max-width: $ibo-notifications--view-all--empty--svg--max-width;
+    height: auto;
+  }
+}

css/backoffice/utils/mixins/_all.scss

@@ -3,4 +3,5 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-@import "highlight";
+@import "highlight";
+@import "selectable";

css/backoffice/utils/mixins/_selectable.scss

@@ -0,0 +1,40 @@
+/*
+ * @copyright   Copyright (C) 2010-2024 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-selectable--background-color: transparent !default;
+
+$ibo-selectable--hover--color: $ibo-color-grey-100 !default;
+$ibo-selectable--hover--background-color: $ibo-color-grey-600 !default;
+$ibo-selectable--hover--background-opacity: 0.6 !default;
+
+$ibo-selected--color: $ibo-color-grey-100 !default;
+$ibo-selected--background-color: $ibo-color-grey-900 !default;
+$ibo-selected--background-opacity: 0.5 !default;
+
+$ibo-selected--hover--background-color: $ibo-color-grey-700 !default;
+$ibo-selected--hover--background-opacity: 0.5 !default;
+@mixin ibo-selectable {
+  content: ' ';
+  @extend %fa-solid-base;
+  background-color: $ibo-selectable--background-color;
+  cursor: pointer;
+}
+@mixin ibo-selectable-hover {
+  @extend %fa-regular-base;
+  content: '\f058';
+  color: $ibo-selectable--hover--color;
+  background-color: transparentize($ibo-selectable--hover--background-color, $ibo-selectable--hover--background-opacity);
+}
+
+@mixin ibo-selected {
+  @extend %fa-solid-base;
+  content: '\f058';
+  color: $ibo-selected--color;
+  background-color: transparentize($ibo-selected--background-color, $ibo-selected--background-opacity);
+}
+
+@mixin ibo-selected-hover {
+  background-color: transparentize($ibo-selected--hover--background-color, $ibo-selected--hover--background-opacity);
+}

css/backoffice/utils/variables/_spacing.scss

@@ -13,6 +13,7 @@ $ibo-spacing-600: $ibo-size-300 !default;
 $ibo-spacing-700: $ibo-size-350 !default;
 $ibo-spacing-800: $ibo-size-400 !default;
 $ibo-spacing-900: $ibo-size-450 !default;
+$ibo-spacing-950: $ibo-size-500 !default;
 
 :root{
   --ibo-spacing-0: #{$ibo-size-0};

css/backoffice/utils/variables/_typography.scss

@@ -15,6 +15,9 @@ $ibo-font-size-400: 2rem !default; /* 24px */
 $ibo-font-size-450: 2.5rem !default; /* 30px */
 $ibo-font-size-500: 3rem !default; /* 36px */
 $ibo-font-size-550: 4rem !default; /* 48px */
+$ibo-font-size-600: 5rem !default; /* 60px */
+$ibo-font-size-650: 6rem !default; /* 72px */
+$ibo-font-size-700: 7rem !default; /* 84px */
 
 /* Value	Common weight name (https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) */
 $ibo-font-weight-100: 100 !default; /* 100 Thin (Harline) */