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

feature: left-menu: messages

Browse Source
This commit is contained in:
gaelle morin 2020-11-20 11:43:45 +01:00
parent a6224df002
commit 6e16261008
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
3 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/menu-left.pug
View File

@ -14,7 +14,7 @@ solid-widget(name='hubl-menu-publicprivate')
solid-widget(name='hubl-create')
template
p.create
p.create.segment.margin-left-small
span(data-trans="menuLeft.emptyCircleProject.notPartOf")
span  ${value}.
br
@ -58,26 +58,32 @@ solid-router#navbar-router(default-route='dashboard')
solid-route.menu.segment.lg-auto.padding.text-bold(name='dashboard')
div.menu-icon.icon-home.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.dashboard")
div.divider
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
solid-route.menu.segment.lg-auto.padding.text-bold(name='members')
div.menu-icon.icon-people.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.profileDirectory")
div.divider
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
solid-route.menu.segment.lg-auto.padding.text-bold(name='job-offers', rdf-type='hd:joboffer')
div.menu-icon.icon-briefcase.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.jobBoard")
div.divider
if endpoints.resources || (endpoints.get && endpoints.get.resources)
solid-route.menu.segment.lg-auto.padding.text-bold(name='resources')
div.menu-icon.icon-docs.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.resources")
div.divider
if endpoints.polls || (endpoints.get && endpoints.get.polls)
solid-route.menu.segment.lg-auto.padding.text-bold(name='polls')
div.menu-icon.icon-bubbles.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.gov")
div.divider
if endpoints.events || (endpoints.get && endpoints.get.events)
solid-route.menu.segment.lg-auto.padding.text-bold(name='events')
div.menu-icon.icon-calendar.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events")
div.divider
if endpoints.projects || (endpoints.get && endpoints.get.projects)
div.menu-wrapper
solid-link.segment.lg-full
@ -89,7 +95,7 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-icon.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle
solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification
div.sub-menu.menu-notification.segment.margin-left-small.margin-right-small
div#loader-projects.loader.loader-menu
div
div
@ -118,7 +124,7 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-icon.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle
solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
div.sub-menu.menu-notification
div.sub-menu.menu-notification.segment.margin-left-small.margin-right-small
div#loader-circles.loader.loader-menu
div
div
@ -144,7 +150,7 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-chevron.segment.lg-auto.float-left
div.menu-icon.icon-arrow-up
solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification
div.sub-menu.menu-notification.segment.margin-left-small.margin-right-small
div#loader-messages.loader.loader-menu
div
div

3
src/styles/base/main.scss
View File

@ -66,6 +66,9 @@
&.margin-left {
margin-left: 20px;
}
&.margin-left-small {
margin-left: 15px;
}
&.margin-right-small {
margin-right: 15px;
}

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

@ -43,7 +43,6 @@
.menu {
cursor: pointer;
border-bottom: 1px solid #4F5E72;
display: flex;
align-items: center;
/*flex-direction: row-reverse;*/
@ -53,15 +52,18 @@
&[active] {
background-color: var(--color-third);
color: var(--color-heading);
border-bottom: none;
.menu-icon:before {
background-color: var(--color-heading);
color: white;
}
.menu-notification>solid-display>div:first-child {
/*.menu-notification>solid-display>div:first-child {
background-color: var(--color-menu-badge-background);
}*/
&+.divider {
display: none;
}
}
@ -164,6 +166,15 @@
}
/* Ellipsis for message tab */
.message-tab>div {
width: 100%;
&>solid-display {
display: block;
margin-top: 15px;
margin-left: 15px;
}
}
.message-tab>div>solid-display>div>solid-display-div>div {
box-sizing: border-box;
@ -179,15 +190,16 @@
margin-bottom: 10px;
width: calc(80vw - 71px);
display: block;
background-color: var(--color-secondary);
color: var(--color-white);
border: 1px solid var(--color-grey-4);
background-color: var(--color-heading);
color: white;
border: 1px solid white;
border-radius: 3px;
padding: 4px;
padding-left: 9.5px;
height: 27px;
opacity: 0.8;
@include breakpoint(lg) {
margin: auto;
margin-bottom: 10px;
width: auto;
}
}
@ -228,15 +240,15 @@
}
}
>solid-display.nosub>div>solid-display>div {
/*>solid-display.nosub>div>solid-display>div {
padding: 1rem 1rem 1rem 3rem;
}
}*/
solid-display>div {
.create {
color: var(--color-white);
margin: 1rem 1rem 2.2rem 3.2rem;
/*color: white;*/
/*margin: 1rem 1rem 2.2rem 3.2rem;*/
}
&>solid-display {
@ -262,8 +274,8 @@
&>solid-display[active]>div,
&>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display[active]>div,
&>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div {
background-color: var(--color-menu-highlight-primary);
color: var(--color-menu-text-active);
background-color: var(--color-third);
color: var(--color-heading);
font-weight: bold;
}
}
@ -283,21 +295,21 @@
}
hubl-counter {
height: 20px;
width: 20px;
/*height: 20px;
width: 20px;*/
margin-right: 1em;
div.counter:not([data-nb-unread="0"]) {
text-align: center;
display: block;
background-color: var(--sib-notifications-theme, gray);
background-color: var(--color-third, gray);
border-radius: 50%;
font-size: 12px;
line-height: 20px;
width: 20px;
height: 20px;
padding-bottom: 0;
color: var(--color-secondary);
color: var(--color-heading);
}
}
}
@ -305,7 +317,8 @@
.divider {
height: 1px;
background-color: #4F5E72;
background-color: #D7DBE0;
opacity: 0.2;
}
}
}