autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2020-07-16 18:49:21 +02:00
commit 3818f8bf9d
No known key found for this signature in database
GPG Key ID: F2702E6D22ED4D62
7 changed files with 182 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client.sample.happy-dev.css
View File

@ -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);

2
src/dependencies.pug
View File

@ -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)

6
src/header.pug
View File

@ -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

7
src/styles/abstracts/_variables.scss
View File

@ -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);

160
src/styles/base/header.scss
View File

@ -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 {
overflow-x: hidden;
.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);
}
}
}
.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: -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;
left: auto;
right: 0;
top: 5.6rem;
width: 300px;
max-width: 256px;
}
}
}
.solid-notification__read {
display: none;
}
}
}
}
}

10
src/views/circle/page-circle-notifications.pug Normal file
View File

@ -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}

8
src/views/user/page-user-notifications.pug Normal file
View File

@ -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}