Merge branch 'release/notification-template' of git.startinblox.com:applications/hubl into release/notification-template

client.sample.happy-dev.css

@@ -27,6 +27,12 @@
   /* Header's elements */
   --color-header-background: var(--color-white);
   --color-bell: var(--color-complementary-darken);
+  --color-notification-counter-number: black;
+  --color-notification-summary: #7A7F85;
+  --solid-notifications-theme: var(--color-primary);
+  --color-notification-item-border: #E4E8ED;
+  --color-notification-scrollbar-background: #EDF1FA;
+  --color-notification-scrollbar-track: #BDC2D7;
   --color-user-panel-header-text: var(--color-complementary-darken);
   --color-user-panel-header-background: var(--color-white);
   --color-user-panel-header-text-open: var(--color-white);

src/dependencies.pug

@@ -11,7 +11,7 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.9" defer)
 script(type="module" src="https://unpkg.com/@startinblox/router@0.8" defer)
     //- script(type="module" src="/lib/solid-router/src/index.js" defer)
 
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.4" defer)
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.5" defer)
     //- script(type="module" src="/lib/sib-notifications/index.js" defer)
 
 if endpoints.events || (endpoints.get && endpoints.get.events)

src/header.pug

@@ -2,11 +2,15 @@
   solid-link(next='dashboard')
     img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)
 
-sib-notifications.notLoggedIn(
+solid-notifications.notLoggedIn(
   nested-field="inbox"
   bind-user
 )
 
+//- Templates for notifications from circles and from other users
+include views/circle/page-circle-notifications.pug
+include views/user/page-user-notifications.pug
+
 include templates/hubl-user-avatar.pug
 
 details#user-controls.notLoggedIn

src/styles/abstracts/_variables.scss

@@ -33,7 +33,6 @@
   --color-main-text: var(--color-grey-4);
   --color-highlight-primary: var(--color-primary);
   --color-user-panel: var(--color-black);
-  --color-bell: var(--color-secondary);
   --color-avatar-background: var(--color-grey-10);
   --color-title: var(--color-secondary);
   --color-h1: var(--color-secondary);
@@ -42,6 +41,12 @@
   /* Header's elements */
   --color-header-background: var(--color-white);
   --color-bell: var(--color-secondary);
+  --color-notification-counter-number: var(--color-white);
+  --color-notification-summary: var(--color-grey-4);
+  --solid-notifications-theme: var(--color-primary);
+  --color-notification-item-border: var(--color-grey-12);
+  --color-notification-scrollbar-background: #EDF1FA;
+  --color-notification-scrollbar-track: var(--color-grey-8);
   --color-user-panel-header-text: var(--color-secondary);
   --color-user-panel-header-background: var(--color-white);
   --color-user-panel-header-text-open: var(--color-white);

src/styles/base/header.scss

@@ -67,17 +67,17 @@ details {
 }
 /* End */
 
-sib-notifications {
+solid-notifications {
   color: var(--color-bell);
 
   @include breakpoint(sm) {
     padding: 0;
   }
 
-  .sib-notifications__container {
+  .solid-notifications__container {
     position: relative;
   
-    .sib-notifications__button {
+    .solid-notifications__button {
       @include icon('bell');
         font-size: 2.5rem;
 
@@ -93,7 +93,7 @@ sib-notifications {
         display: none;
       }
   
-      .sib-notifications__counter {
+      .solid-notifications__counter {
         left: 2rem;
         position: absolute;
         top: 1px;
@@ -102,27 +102,157 @@ sib-notifications {
           left: 2.1rem;
           top: -3px;
         }
+
+        span {
+          color: var(--color-notification-counter-number);
+        }
       }
     }
 
-    .sib-notifications__list {
+    .solid-notifications__triangle-back {
-      overflow-x: hidden;
+      display: none;
+    }
+
+    .solid-notifications__triangle-shadow {
+      display: none;
+
+      @include breakpoint(lg) {
+        background: white;
+        display: block;
+        position: absolute;
+        left: auto;
+        right: -2.1em;
+        top: 5em;
+        transform: initial;
+        width: 0;
+        z-index: 4;
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin-left: -5em;
+          top: 0px;
+          left: 50%;
+          border: 1em solid black;
+          border-color: #fff #fff transparent transparent;
+          transform-origin: 0 0;
+          transform: rotate(-45deg);
+          box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14);
+        }
+      }
+    }
+  
+    .solid-notifications__list {
+      border: none;
+      border-radius: 0;
+      box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
+      max-height: calc(100vh - 50px);
       position: fixed;
       left: 0;
-      top: 4.5rem;
+      top: 2.5em;
       width: 100vw;
       
-      @include breakpoint(md) {
+      @include breakpoint(lg) {
-        border: 0;
+        max-height: calc(100vh - 93px);
-        border-radius: 0;
+        position: absolute;
+        left: auto;
+        right: -2.3em;
+        top: 3.99em;
+        width: 347px;
+      }
+
+      /* Custom scrollbar */
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: none;
+      scrollbar-width: thin;
+      scrollbar-color: var(--color-notification-scrollbar-track) var(--color-notification-scrollbar-background);
+
+      &::-webkit-scrollbar-track {
+        background: var(--color-notification-scrollbar-background);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-notification-scrollbar-track);
+        border-radius: 6px;
+      }
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      /* End of custom scrollbar */
+
+      .solid-notifications__item {
+        border-bottom: 1px solid var(--color-notification-item-border);
+
+        .solid-notification {
+          padding: 1.2rem 0 1.5rem;
+
+          .solid-notification__avatar {
+            align-items: center;
+            background: var(--color-avatar-background);
+            display: flex;
+            height: 35px;
+            justify-content: center;
+            margin-left: 1.6rem;
+            margin-right: 1.4rem;
+            overflow: hidden;
+            position: relative;
+            vertical-align: middle;
+            width: 35px;
+
+            img {
+              background-color: var(--color-grey-10);
+              height: 100%;
+              object-fit: cover;
+              object-position: center center;
+              width: 100%;
+            }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
+          }
+
+          .solid-notification__content {
+            font-family: Open Sans, sans-serif;
+
+            .solid-notification__title {
+              font-size: 1.3rem;
+              font-weight: 600;
+
+              .solid-notification__title__side {
+                font-weight: normal;
+              }
+
+              .solid-notification__title__icon {
+                font-family: simple-line-icons;
+              }
+            }
+
+            .solid-notification__summary {
+              color: var(--color-notification-summary);
+              font-size: 1.2rem;
+              line-height: 1.7rem;
+              margin: 1.1rem 0 0;
+
+              @include breakpoint(320px, 388px) {
+                max-width: 226px;
               }
 
               @include breakpoint(lg) {
-        position: absolute;
+                max-width: 256px;
-        left: auto;
+              }
-        right: 0;
+            }
-        top: 5.6rem;
+          }
-        width: 300px;
+
+          .solid-notification__read {
+            display: none;
+          }
+        }
       }
     }
   }

src/views/circle/page-circle-notifications.pug

@@ -0,0 +1,10 @@
+solid-notifications-template(data-rdf-type='hd:circle')
+  template
+    .solid-notification__avatar
+      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
+    .solid-notification__content
+      .solid-notification__title ${await author.name} 
+        span.solid-notification__title__side dans 
+          span.solid-notification__title__icon ${(await object.status) == 'Public' ? '#' : ''} 
+          | ${await object.name}
+      p.solid-notification__summary ${summary}

src/views/user/page-user-notifications.pug

@@ -0,0 +1,8 @@
+solid-notifications-template(data-rdf-type='foaf:user')
+  template
+    .solid-notification__avatar
+      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
+    .solid-notification__content
+      .solid-notification__title ${await author.name} 
+        span.solid-notification__title__side en privé
+      p.solid-notification__summary ${summary}