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

feature: left-menu - main tabs and project sub-tab

Browse Source
This commit is contained in:
gaelle morin 2020-12-18 17:23:46 +01:00
parent 008e2e75a9
commit d34a0dceba
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
3 changed files with 140 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.pug
View File

@ -47,8 +47,8 @@ html(lang="en")
header#header.segment.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection header#header.segment.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection
include views/partials/header.pug include views/partials/header.pug
//- nav#main__menu.segment.bg-color-heading.lg-quarter.float-left nav#main__menu.segment.bg-color-heading.lg-quarter
//- include views/partials/menu-left.pug include views/partials/menu-left.pug
//- main#content.segment.lg-three-quarter.float-left.notLoggedIn //- main#content.segment.lg-three-quarter.float-left.notLoggedIn

80
src/styles/left-nav/_index.scss
View File

@ -1,3 +1,83 @@
nav { nav {
height: calc(100vh - 72px); height: calc(100vh - 72px);
.unread {
font-weight: bolder;
} }
solid-route.menu,
solid-link.menu,
div.menu {
.icon {
padding: 8px;
border-radius: 50%;
}
&:hover .icon,
&[active] .icon {
color: white;
background: var(--color-heading);
}
&[active]+.divider {
display: none;
}
}
/* Styles for the small icon */
.sub-menu-icon {
margin-left: 3px;
margin-right: 3px;
opacity: 0.8;
vertical-align: top;
div {
font-family: simple-line-icons;
font-size: 12px;
}
}
.sub-menu-name {
margin-right: 14px;
}
/* Ellipsis for project tab */
.project-tab {
hubl-menu-fix-url-project {
display: block;
}
.project-customer,
.project-name {
display: block;
width: calc(80vw - 96px);
@media(min-width: 1024px) {
width: calc(100% - 10px);
}
}
.project-customer,
.project-name>div {
@media(min-width: 1024px) {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.divider {
height: 1px;
background-color: #D7DBE0;
opacity: 0.2;
}
}

97
src/views/partials/menu-left.pug
View File

@ -66,12 +66,18 @@ solid-widget(name='hubl-menu-fix-url-project')
solid-link.segment.lg-full(data-src="${value}" next="project") solid-link.segment.lg-full(data-src="${value}" next="project")
solid-display( solid-display(
data-src='${value}' data-src='${value}'
fields='status, project(customer.name, name, jabberID), badge' fields='segment(status, project(customer.name, name, jabberID), badge)'
class-project='sub-menu-name' class-segment="segment lg-full padding-top-xxsmall padding-right-small padding-left-medium"
class-status='sub-menu-icon'
class-name='project-name' class-status='segment sub-menu-icon'
class-customer.name='project-customer'
class-badge='badge' class-project='segment lg-three-quarter sub-menu-name'
class-customer.name='segment project-customer'
class-name='segment project-name'
class-badge='segment badge text-top'
value-badge='${value}' value-badge='${value}'
widget-status='hubl-menu-publicprivate' widget-status='hubl-menu-publicprivate'
widget-jabberID='hubl-menu-jabberid' widget-jabberID='hubl-menu-jabberid'
@ -83,44 +89,50 @@ solid-widget(name='hubl-menu-fix-url-project')
solid-router#navbar-router(default-route='dashboard') solid-router#navbar-router(default-route='dashboard')
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
solid-route.menu.segment.lg-auto.padding.text-bold(name='dashboard') solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='dashboard')
div.menu-icon.icon-home.segment.lg-auto.margin-right-xsmall.float-left div.segment.margin-right-xxsmall
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.dashboard") div.icon.icon-small.icon-home
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard")
div.divider div.divider
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
solid-route.menu.segment.lg-auto.padding.text-bold(name='members') solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members')
div.menu-icon.icon-people.segment.lg-auto.margin-right-xsmall.float-left div.segment.margin-right-xxsmall
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.profileDirectory") div.segment.icon.icon-small.icon-people
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory")
div.divider div.divider
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
solid-route.menu.segment.lg-auto.padding.text-bold(name='job-offers', rdf-type='hd:joboffer') solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='job-offers', rdf-type='hd:joboffer')
div.menu-icon.icon-briefcase.segment.lg-auto.margin-right-xsmall.float-left div.segment.margin-right-xxsmall
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.jobBoard") div.segment.icon.icon-small.icon-briefcase
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard")
div.divider div.divider
if endpoints.resources || (endpoints.get && endpoints.get.resources) if endpoints.resources || (endpoints.get && endpoints.get.resources)
solid-route.menu.segment.lg-auto.padding.text-bold(name='resources') solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='resources')
div.menu-icon.icon-docs.segment.lg-auto.margin-right-xsmall.float-left div.segment.margin-right-xxsmall
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.resources") div.segment.icon.icon-small.icon-docs
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources")
div.divider div.divider
if endpoints.polls || (endpoints.get && endpoints.get.polls) if endpoints.polls || (endpoints.get && endpoints.get.polls)
solid-route.menu.segment.lg-auto.padding.text-bold(name='polls') solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='polls')
div.menu-icon.icon-bubbles.segment.lg-auto.margin-right-xsmall.float-left div.segment.margin-right-xxsmall
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.gov") div.segment.icon.icon-small.icon-bubbles
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov")
div.divider div.divider
if endpoints.events || (endpoints.get && endpoints.get.events) if endpoints.events || (endpoints.get && endpoints.get.events)
solid-route.menu.segment.lg-auto.padding.text-bold(name='events') solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='events')
div.menu-icon.icon-calendar.segment.lg-auto.margin-right-xsmall.float-left div.segment.margin-right-xxsmall
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events") div.segment.icon.icon-small.icon-calendar
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events")
div.divider div.divider
if endpoints.projects || (endpoints.get && endpoints.get.projects) if endpoints.projects || (endpoints.get && endpoints.get.projects)
div.menu-wrapper div.menu-wrapper
solid-link.segment.lg-full solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
//- (next='admin-project-list') //- (next='admin-project-list')
div.menu.segment.lg-auto.padding.text-bold div.segment.margin-right-xxsmall
div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-xsmall.float-left div.segment.icon.icon-small.icon-folder-alt
div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.projects") div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
div.menu-chevron.segment.lg-auto.float-left div.menu-chevron.segment
div.menu-icon.icon-arrow-up div.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle //- div.menu-icon.icon-arrow-right-circle
solid-route(name='project', rdf-type='hd:project', use-id='', hidden) solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification div.sub-menu.menu-notification
@ -129,7 +141,7 @@ solid-router#navbar-router(default-route='dashboard')
div div
div div
div div
solid-display.project-tab.segment.lg-full( solid-display.project-tab.text-color-white(
bind-user bind-user
nested-field='projects' nested-field='projects'
fields='project' fields='project'
@ -143,13 +155,13 @@ solid-router#navbar-router(default-route='dashboard')
div.divider div.divider
if endpoints.circles || (endpoints.get && endpoints.get.circles) if endpoints.circles || (endpoints.get && endpoints.get.circles)
div.menu-wrapper div.menu-wrapper
solid-link.segment.lg-full solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
//- (next='admin-circle-list') //- (next='admin-circle-list')
div.menu.segment.lg-auto.padding.text-bold div.segment.margin-right-xxsmall
div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-xsmall.float-left div.segment.icon.icon-small.icon-folder-alt
div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.circles") div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles")
div.menu-chevron.segment.lg-auto.float-left div.menu-chevron.segment
div.menu-icon.icon-arrow-up div.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle //- div.menu-icon.icon-arrow-right-circle
solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden) solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
div.sub-menu.menu-notification div.sub-menu.menu-notification
@ -171,11 +183,12 @@ solid-router#navbar-router(default-route='dashboard')
) )
div.divider div.divider
div.menu-wrapper div.menu-wrapper
div.menu.segment.lg-auto.padding.text-bold div.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
div.menu-icon.icon-envelope-letter.segment.lg-auto.margin-right-xsmall.float-left div.segment.margin-right-xxsmall
div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.messages") div.segment.icon.icon-small.icon-envelope-letter
div.menu-chevron.segment.lg-auto.float-left div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages")
div.menu-icon.icon-arrow-up div.menu-chevron.segment
div.icon-arrow-up
solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden) solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification div.sub-menu.menu-notification
div#loader-messages.loader.loader-menu div#loader-messages.loader.loader-menu