feature(header): issue #95 Add notifications component

Add it in dependencies
Add styles
This commit is contained in:
Jean-Baptiste 2019-02-28 10:44:32 +01:00 committed by Gaëlle Morin
parent 82113d9546
commit 15db82087a
8 changed files with 36 additions and 117 deletions

View File

@ -31,4 +31,5 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
script(type="module" src="https://unpkg.com/@startinblox/core@0.6") script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
script(type="module" src="https://unpkg.com/@startinblox/router@0.6") script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1") script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
script(type="module" src="https://unpkg.com/@startinblox/component-notifications")

View File

@ -7,12 +7,10 @@
i#search-icon.icon-magnifier(aria-hidden='true') i#search-icon.icon-magnifier(aria-hidden='true')
i#close-search-icon.icon-close(aria-hidden='true') i#close-search-icon.icon-close(aria-hidden='true')
details sib-notifications(
summary#notifications-button id-suffix="inbox",
div.menu-notification bind-user
div 7 )
#notifications
include page-notifications.pug
sib-display#profile( sib-display#profile(
data-fields='first_name, account.picture', data-fields='first_name, account.picture',

View File

@ -1,7 +0,0 @@
div.frame
h1 Notifications
sib-display(
bind-user
data-fields='summary'
)

View File

@ -1,58 +0,0 @@
.frame
include templates/template-customer.pug
include templates/template-team.pug
sib-display(
data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
extra-context='{"project-profile":"${sdn}/projects/"}'
set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
value-const-title1='N°',
value-const-title2='-',
value-entitled='Creation date:'
set-infos='block-description, block-logo',
set-block-description='label-description, description',
set-block-logo='customer.logo',
value-label-description='DESCRIPTION:',
widget-customer.logo='sib-display-img',
set-block-fee='label-fee, details-cell, details-business',
set-details-cell='cell-name, cell-fee, percentage',
set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
value-label-fee='FEE:',
value-cell-name='Happy Dev Paris:',
value-cell-fee='5',
value-percentage='%',
value-business-contribution='Business contribution:',
value-comma=', ',
set-block-customer='label-customer, customer',
value-label-customer='CUSTOMER INFORMATIONS:'
widget-customer='customer-template',
set-block-team='label-team, members',
value-label-team='TEAM:'
widget-members='team-template',
multiple-members,
bind-resources
)
<<<<<<< HEAD
div(name='block-team')
h2(name='label-team') Team:
sib-display(
id-suffix='members',
data-fields='teammate-img, teammate-profile, teammate-job',
set-teammate-img='user.account.picture',
set-teammate-profile='user.first_name, user.last_name, user.groups',
set-teammate-job='name',
widget-user.account.picture='sib-display-img',
widget-user.groups='sib-display-lookuplist',
next='profile',
bind-resources,
)
=======
>>>>>>> b8190bc... ui(all pages): MR!13 - upgrade to sib-core v0.6

View File

@ -73,47 +73,31 @@
} }
details { details {
summary::-webkit-details-marker { position: relative;
display: none;
}
#notifications-button { .sib-notifications__button {
cursor: pointer; @include icon('bell');
font-size: 3rem; font-size: 3rem;
list-style-type: none;
position: relative;
@include icon(bell);
.menu-notification {
//flex-basis: 3em;
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
left: 0.3rem;
position: absolute;
top: -0.3rem;
width: 2em;
@extend %notification; &::before {
margin-left: 0;
}
img {
display: none;
}
.sib-notifications__counter {
left: 2.1rem;
position: absolute;
top: -3px;
} }
} }
#notifications { .sib-notifications__list {
bottom: 0;
height: 0;
left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
z-index: 1; top: 5.6rem;
> div {
position: absolute;
right: 0;
top: 0;
}
} }
} }

View File

@ -13,6 +13,7 @@
:root { :root {
font-size: 62.5%; font-size: 62.5%;
font-family: Open Sans, sans-serif; font-family: Open Sans, sans-serif;
--sib-notifications-theme: #{$color-46-100-50};
body { body {
//box-sizing: border-box; //box-sizing: border-box;

View File

@ -93,7 +93,9 @@
> sib-display { > sib-display {
@extend %notification; > div:first-of-type {
@extend %notification;
}
} }
} }

View File

@ -6,6 +6,7 @@ $color-white: hsl(0, 0%,100%);
$color-selective-yellow: hsl(43, 100%, 50%); $color-selective-yellow: hsl(43, 100%, 50%);
$color-mikado-yellow: hsl(45, 95%, 54%); $color-mikado-yellow: hsl(45, 95%, 54%);
$color-mustard: hsl(46, 100%, 67%); $color-mustard: hsl(46, 100%, 67%);
$color-46-100-50: hsl(46, 100%, 50%);
$color-rolling-stone: hsl(210, 4%, 50%); $color-rolling-stone: hsl(210, 4%, 50%);
$color-taupe-gray: hsl(210, 5%, 56%); $color-taupe-gray: hsl(210, 5%, 56%);
@ -101,18 +102,15 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
} }
%notification { %notification {
align-items: center;
> div:first-of-type { background-color: $color-mustard;
align-items: center; border-radius: 100%;
background-color: $color-mustard; color: $color-dark-lava;
border-radius: 100%; display: flex !important;
color: $color-dark-lava; font-size: 1.3rem;
display: flex; height: 1.7em;
font-size: 1.3rem; justify-content: center;
height: 1.7em; width: 1.7em;
justify-content: center;
width: 1.7em;
}
} }
%shadow { %shadow {