diff --git a/client.sample.happy-dev.css b/client.sample.happy-dev.css
index f75cb0ace5416f6025cf04ba5e656bc4ecf5597b..2ce6bdca2245bbc34235307deb170fbf9f08cfc0 100644
--- a/client.sample.happy-dev.css
+++ b/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);
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 55b275b11bc2cc9f5a1dcfb4c555c1e2f5032cde..0d9e144715250f251d33bb515a9e09a79668e0c2 100644
--- a/src/dependencies.pug
+++ b/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)
diff --git a/src/header.pug b/src/header.pug
index 75a28068498413f2dcc4570c90d26403a0807432..1320e54c0261275a267234f23afd2bfe1cb15a8c 100644
--- a/src/header.pug
+++ b/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
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index ae485e09d94375881d99871e21f553cdd5e5e7af..03b17c9739579a0b877c92b41947a3ef9c84eb91 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/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);
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 1288dfff883025b3f83ed137801646fd89243331..7966a19abe08bb7f5c77a3c36da3f8da8160493b 100644
--- a/src/styles/base/header.scss
+++ b/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);
+ }
+ }
+ }
+
+ .solid-notifications__triangle-back {
+ 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);
+ }
}
}
- .sib-notifications__list {
- overflow-x: hidden;
+ .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) {
- border: 0;
- border-radius: 0;
- }
-
+
@include breakpoint(lg) {
+ max-height: calc(100vh - 93px);
position: absolute;
left: auto;
- right: 0;
- top: 5.6rem;
- width: 300px;
+ 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) {
+ max-width: 256px;
+ }
+ }
+ }
+
+ .solid-notification__read {
+ display: none;
+ }
+ }
}
}
}
diff --git a/src/views/circle/page-circle-notifications.pug b/src/views/circle/page-circle-notifications.pug
new file mode 100644
index 0000000000000000000000000000000000000000..239c6745fc71e804417b03430e3529472111f9de
--- /dev/null
+++ b/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}
diff --git a/src/views/user/page-user-notifications.pug b/src/views/user/page-user-notifications.pug
new file mode 100644
index 0000000000000000000000000000000000000000..ee785d959006dc65fce4441057e60991da39d41c
--- /dev/null
+++ b/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}
\ No newline at end of file