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

Merge branch 'jbpasquier/badge-notifications' into 'staging'

Browse Source 
feature: sib-badge for users messages

See merge request startinblox/applications/sib-app!43
This commit is contained in:
Gaëlle Morin 2019-06-05 11:51:24 +00:00
commit 6ba87b0d27
2 changed files with 41 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/menu-left.pug
View File

@ -1,3 +1,6 @@
sib-widget(name='hd-counter')
template
sib-badge(data-src="${id}")
nav#main__menu
sib-router#navbar-router(default-route='members')
sib-route.menu(name='members')
@ -16,12 +19,12 @@ nav#main__menu
div.menu-label Projects
div.menu-icon.icon-folder-alt
sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`, rdf-type='hd:project', use-id='')
div.sub-menu
div.sub-menu.menu-notification
sib-display(
data-src=`${sdn}/sources/projects/`,
data-fields='project',
set-project='customer.name, dash, name',
value-dash=' - ',
data-src=`${sdn}/sources/projects/`
data-fields='project'
set-project='customer.name, dash, name'
value-dash=' - '
next='project'
)
//- div.divider
@ -47,12 +50,14 @@ nav#main__menu
div.menu-label Chat
div.menu-icon.icon-envelope-letter
sib-route(hidden, name='messages', id-prefix=`${sdn}/users/`, rdf-type='foaf:user', use-id='')
div.sub-menu
div.sub-menu.menu-notification
sib-display(
data-src=`${sdn}/users/`,
data-fields='username',
widget-user.username='sib-display-div',
data-src=`${sdn}/users/`
data-fields='username, account.user'
widget-username='sib-display-div'
widget-account.user='hd-counter'
next='messages'
)
div.divider

26
src/styles/base/menu-left.scss
View File

@ -109,6 +109,32 @@
}
}
}
&.menu-notification {
> sib-display > div > sib-display > div {
display: flex;
sib-display-div {
flex: 3;
}
hd-counter {
height: 20px;
width: 20px;
margin-right: 1em;
div:not(:empty) {
text-align: center;
display: block;
background-color: var(--sib-notifications-theme, gray);
border-radius: 50%;
font-size: 12px;
line-height: 20px;
width: 20px;
height: 20px;
padding-bottom: 0;
color: $color-216-4-22;
}
}
}
}
}
.divider {