From 15db82087a4fee62a1915be6a07ec15c80d0560c Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Date: Thu, 28 Feb 2019 10:44:32 +0100 Subject: [PATCH] feature(header): issue #95 Add notifications component Add it in dependencies Add styles --- src/dependencies.pug | 1 + src/header.pug | 10 +++--- src/page-notifications.pug | 7 ---- src/page-project-profile.pug.orig | 58 ------------------------------- src/styles/header.scss | 50 +++++++++----------------- src/styles/main.scss | 1 + src/styles/menu-left.scss | 4 ++- src/styles/variables.scss | 22 ++++++------ 8 files changed, 36 insertions(+), 117 deletions(-) delete mode 100644 src/page-notifications.pug delete mode 100644 src/page-project-profile.pug.orig diff --git a/src/dependencies.pug b/src/dependencies.pug index 8c18bf6..5ec0e2b 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -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") diff --git a/src/header.pug b/src/header.pug index 842cd18..572d134 100644 --- a/src/header.pug +++ b/src/header.pug @@ -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', diff --git a/src/page-notifications.pug b/src/page-notifications.pug deleted file mode 100644 index 68b15af..0000000 --- a/src/page-notifications.pug +++ /dev/null @@ -1,7 +0,0 @@ -div.frame - h1 Notifications - - sib-display( - bind-user - data-fields='summary' -) \ No newline at end of file diff --git a/src/page-project-profile.pug.orig b/src/page-project-profile.pug.orig deleted file mode 100644 index 6b55161..0000000 --- a/src/page-project-profile.pug.orig +++ /dev/null @@ -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 diff --git a/src/styles/header.scss b/src/styles/header.scss index 26d477c..607ce0f 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -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; } } diff --git a/src/styles/main.scss b/src/styles/main.scss index f432d5e..942a91b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -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; diff --git a/src/styles/menu-left.scss b/src/styles/menu-left.scss index 16587bf..670fe52 100644 --- a/src/styles/menu-left.scss +++ b/src/styles/menu-left.scss @@ -93,7 +93,9 @@ > sib-display { - @extend %notification; + > div:first-of-type { + @extend %notification; + } } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index bf16604..420b3a3 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -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 {