feature(header): issue #95 Add notifications component
Add it in dependencies Add styles
This commit is contained in:
Jean-Baptiste
Gaëlle Morin
parent
82113d9546
commit
15db82087a
|
|
@ -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/router@0.6")
|
||||
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
|
||||
script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,10 @@
|
|||
i#search-icon.icon-magnifier(aria-hidden='true')
|
||||
i#close-search-icon.icon-close(aria-hidden='true')
|
||||
|
||||
details
|
||||
summary#notifications-button
|
||||
div.menu-notification
|
||||
div 7
|
||||
#notifications
|
||||
include page-notifications.pug
|
||||
sib-notifications(
|
||||
id-suffix="inbox",
|
||||
bind-user
|
||||
)
|
||||
|
||||
sib-display#profile(
|
||||
data-fields='first_name, account.picture',
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
div.frame
|
||||
h1 Notifications
|
||||
|
||||
sib-display(
|
||||
bind-user
|
||||
data-fields='summary'
|
||||
)
|
||||
|
|
@ -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
|
||||
|
|
@ -73,47 +73,31 @@
|
|||
}
|
||||
|
||||
details {
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
position: relative;
|
||||
|
||||
#notifications-button {
|
||||
cursor: pointer;
|
||||
.sib-notifications__button {
|
||||
@include icon('bell');
|
||||
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 {
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
left: 0;
|
||||
.sib-notifications__list {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
top: 5.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
:root {
|
||||
font-size: 62.5%;
|
||||
font-family: Open Sans, sans-serif;
|
||||
--sib-notifications-theme: #{$color-46-100-50};
|
||||
|
||||
body {
|
||||
//box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -93,7 +93,9 @@
|
|||
|
||||
> sib-display {
|
||||
|
||||
@extend %notification;
|
||||
> div:first-of-type {
|
||||
@extend %notification;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ $color-white: hsl(0, 0%,100%);
|
|||
$color-selective-yellow: hsl(43, 100%, 50%);
|
||||
$color-mikado-yellow: hsl(45, 95%, 54%);
|
||||
$color-mustard: hsl(46, 100%, 67%);
|
||||
$color-46-100-50: hsl(46, 100%, 50%);
|
||||
|
||||
$color-rolling-stone: hsl(210, 4%, 50%);
|
||||
$color-taupe-gray: hsl(210, 5%, 56%);
|
||||
|
|
@ -101,18 +102,15 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
|
|||
}
|
||||
|
||||
%notification {
|
||||
|
||||
> div:first-of-type {
|
||||
align-items: center;
|
||||
background-color: $color-mustard;
|
||||
border-radius: 100%;
|
||||
color: $color-dark-lava;
|
||||
display: flex;
|
||||
font-size: 1.3rem;
|
||||
height: 1.7em;
|
||||
justify-content: center;
|
||||
width: 1.7em;
|
||||
}
|
||||
align-items: center;
|
||||
background-color: $color-mustard;
|
||||
border-radius: 100%;
|
||||
color: $color-dark-lava;
|
||||
display: flex !important;
|
||||
font-size: 1.3rem;
|
||||
height: 1.7em;
|
||||
justify-content: center;
|
||||
width: 1.7em;
|
||||
}
|
||||
|
||||
%shadow {
|
||||
|
|
|
|||
Loading…
Reference in New Issue