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

feature: new header and left-menu

Browse Source
This commit is contained in:
gaelle morin
2021-04-01 07:10:59 +02:00
parent 1438c73c2f
commit bc0b8c3e04
23 changed files with 270 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/partials/header.pug
View File

@ -1,10 +1,10 @@
div
solid-link.segment.sm-hidden(next=getRoute('dashboard', true))
img.logo(src=`${client.logo || '/images/logo.webp'}`)
h1.text-color-heading.text-medium.text-semibold.text-letter-spacing-large=client.name || 'Hubl'
button.segment.lg-hidden.icon-menu#toggleMainMenu
span.tag.reversed.text-semibold(data-trans='header.beta')
span.tag.reversed.text-bold.margin-left-xsmall(data-trans='header.beta')
div
if componentSet.has("themeChecker")
@ -17,7 +17,7 @@ div
)
if componentSet.has("notification")
solid-notifications.segment.sm-margin-right-xlarge(
solid-notifications.segment.margin-right-small(
nested-field="inbox"
bind-user
)
@ -25,15 +25,13 @@ div
if componentSet.has("autoLogin") || componentSet.has("registering")
//- User menu visible on large screens
details.segment.sm-hidden.user-controls
summary.text-right
solid-display.labelled-avatar.padding-top-xsmall(
fields='segment1(account.picture), segment2(first_name), segment3(button)'
summary.text-right.padding-right-xsmall.padding-left-xsmall
solid-display.labelled-avatar(
fields='segment1(account.picture), segment2(button)'
class-segment1='segment'
class-segment2='segment margin-left-small'
class-segment3='segment margin-left-xxsmall'
class-account.picture="avatar"
class-first_name="text-semibold text-color-heading"
class-button='icon icon-arrow-down'
class-segment2='segment margin-left-xxsmall'
class-account.picture="avatar xxsmall"
class-button='icon icon-small icon-arrow-down'
widget-account.picture='hubl-user-avatar'
bind-user
)

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

@ -1,32 +1,47 @@
solid-form-search(
id='general-search'
class='segment block form menu-search'
fields='name'
search-name='circle.name, project.customer.name, project.name, contact.username'
order-asc-names='name'
label-name='Rechercher'
widget-name="solid-form-placeholder-text"
submit-button=""
submit-widget="button"
)
div.divider
solid-router#navbar-router(default-route='dashboard')
for component of components
if component.route
if component.type == "about"
solid-route(name=component.route, hidden)
if component.type == "dashboard"
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
div.segment.margin-right-xxsmall
div.icon.icon-small.icon-home
div.segment.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.dashboard"}`)
div.divider
if component.type == "circles"
div.menu-wrapper
if componentSet.has("admin")
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-folder-alt
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`)
div.menu-chevron.segment
div.menu-icon.icon-arrow-right-circle
solid-route(name=`admin-${component.route}-create`)
else
div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-folder-alt
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`)
div.jsMenuTab
div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active.jsMenuHeader
div.segment.margin-right-xxsmall.jsMenuArrow
div.segment.icon.icon-small.icon-arrow-down
div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`)
if componentSet.has("admin")
div.menu-options.segment.jsMenuOption
div.menu-icon.icon.icon-small.icon-options-vertical
div.menu-admin.segment.three-quarter.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin
solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.circlesBrowse")
solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.circleCreate")
solid-badge.badge(data-type="Mention" data-rdf-type="hd:circle")
solid-route(name=`admin-${component.route}`, hidden)
solid-route(name=`admin-${component.route}-create`, hidden)
solid-route(name=`admin-${component.route}-leave`, hidden)
solid-route(name=component.route, rdf-type='hd:circle', use-id='', hidden)
solid-route(name=`${component.route}-left`)
div.sub-menu.menu-notification
div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
div.loader.loader-menu(id=`loader-${component.route}`)
div
div
@ -37,67 +52,59 @@ solid-router#navbar-router(default-route='dashboard')
nested-field='circles'
fields='circle'
loader-id=`loader-${component.route}`
empty-widget='hubl-menu-create'
empty-widget='hubl-menu-empty'
empty-value=''
data-trans="empty-value=menuLeft.emptyCircleProject.circle"
widget-circle='hubl-menu-fix-url-circle'
order-asc="circle.name"
filtered-by="general-search"
)
div.divider
if component.type == "chat"
div.menu-wrapper
if componentSet.has("admin")
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-folder-alt
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`)
div.menu-chevron.segment
div.menu-icon.icon-arrow-right-circle
solid-route(name=`admin-${component.route}-create`, use-id='', hidden)
else
div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-folder-alt
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`)
solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification
div.loader.loader-menu(id=`loader-${component.route}`)
div
div
div
div
//- search-fields="contact.name"
//- search-label-contact.name=""
//- data-trans="search-label-contact.name=menuLeft.search"
//- search-widget-contact.name="hubl-search-users"
solid-display.segment.full.whitespace-normal(
bind-user
nested-field='contacts'
fields='contact'
loader-id=`loader-${component.route}`
empty-widget='hubl-create-contact'
empty-value=''
widget-contact='hubl-menu-fix-url-contact'
order-asc="contact.username"
)
div.jsMenuTab
div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active.jsMenuHeader
div.segment.margin-right-xxsmall.jsMenuArrow
div.segment.icon.icon-small.icon-arrow-down
div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`)
if componentSet.has("profileDirectory")
div.menu-options.segment.jsMenuOption
solid-link.segment.block.menu-icon.icon.icon-small.icon-user-follow(next=getRoute('profileDirectory', true))
solid-badge.badge(data-type="Message")
solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
div.loader.loader-menu(id=`loader-${component.route}`)
div
div
div
div
solid-display.segment.full.whitespace-normal(
bind-user
nested-field='contacts'
fields='contact'
loader-id=`loader-${component.route}`
empty-widget='hubl-menu-empty'
widget-contact='hubl-menu-fix-url-contact'
filtered-by="general-search"
order-asc="contact.username"
)
if component.type == "projects"
div.menu-wrapper
if componentSet.has("admin")
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-folder-alt
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
div.menu-chevron.segment
div.icon-arrow-right-circle
solid-route(name=`admin-${component.route}-create`, hidden)
else
div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-folder-alt
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
div.jsMenuTab
div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active.jsMenuHeader
div.segment.margin-right-xxsmall.jsMenuArrow
div.segment.icon.icon-small.icon-arrow-down
div.segment.half.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
if componentSet.has("admin")
div.menu-options.segment.jsMenuOption
div.menu-icon.icon.icon-small.icon-options-vertical
div.menu-admin.segment.three-quarter.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin
solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.projectsBrowse")
solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.projectCreate")
solid-badge.badge(data-type="Mention" data-rdf-type="hd:project")
solid-route(name=`admin-${component.route}`, hidden)
solid-route(name=`admin-${component.route}-create`, hidden)
solid-route(name=component.route, rdf-type='hd:project', use-id='', hidden)
solid-route(name=`${component.route}-left`, hidden)
div.sub-menu.menu-notification
div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
div.loader.loader-menu(id=`loader-${component.route}`)
div
div
@ -108,40 +115,41 @@ solid-router#navbar-router(default-route='dashboard')
nested-field='projects'
fields='project'
loader-id=`loader-${component.route}`
empty-widget='hubl-menu-create'
empty-value=''
empty-widget='hubl-menu-empty'
data-trans="empty-value=menuLeft.emptyCircleProject.project"
widget-project='hubl-menu-fix-url-project'
filtered-by="general-search"
order-asc="project.customer.name"
)
div.divider
if component.type == "profileDirectory"
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
div.segment.margin-right-xxsmall
div.icon.icon-small.icon-people
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory")
solid-route.menu(name=`${component.route}-profile`, hidden)
div.divider
if component.type == "jobBoard"
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route, rdf-type='hd:joboffer')
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route, rdf-type='hd:joboffer')
div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-briefcase
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard")
div.divider
if component.type == "resources"
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-docs
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources")
div.divider
if component.type == "polls"
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-bubbles
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov")
div.divider
if component.type == "events"
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-calendar
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events")

3
src/views/partials/widgets.pug
View File

@ -18,9 +18,8 @@ include widgets/hubl-circle-owner.pug
include widgets/hubl-circle-team-contact.pug
include widgets/hubl-circle-user-admin.pug
include widgets/hubl-counter.pug
include widgets/hubl-create-contact.pug
include widgets/hubl-email-field.pug
include widgets/hubl-menu-create.pug
include widgets/hubl-menu-empty.pug
include widgets/hubl-menu-fix-url-circle.pug
include widgets/hubl-menu-fix-url-contact.pug
include widgets/hubl-menu-fix-url-project.pug

9
src/views/partials/widgets/hubl-create-contact.pug
View File

@ -1,9 +0,0 @@
if componentSet.has('chat')
solid-widget(name='hubl-create-contact')
template
p.segment.full.create.text-color-white.whitespace-normal(style='display:block!important')
span(data-trans="menuLeft.contact.create")
span  
solid-link(next=getRoute('profileDirectory', true) data-trans="menuLeft.contact.profileDir")
span  
span(data-trans="menuLeft.contact.create2")

10
src/views/partials/widgets/hubl-menu-create.pug
View File

@ -1,10 +0,0 @@
if componentSet.has('circles') || componentSet.has('projects')
solid-widget(name='hubl-menu-create')
template
p.segment.full.create.text-color-white.whitespace-normal(style='display:block!important')
span(data-trans="menuLeft.emptyCircleProject.notPartOf")
span  ${value}.
if componentSet.has('admin')
span(data-trans="menuLeft.emptyCircleProject.createNew")
span  
solid-link(next=`\${value.startsWith('proj') ? 'admin-${getRoute('projects', true)}' : 'admin-${getRoute('circles', true)}'}`, data-trans="menuLeft.emptyCircleProject.adminPanel")

5
src/views/partials/widgets/hubl-menu-empty.pug Normal file
View File

@ -0,0 +1,5 @@
if componentSet.has('circles') || componentSet.has('projects') || componentSet.has('profileDirectory')
solid-widget(name='hubl-menu-empty')
template
p.segment.full.empty.whitespace-normal(style='display:block!important; color:#D0D4DA')
span(data-trans="menuLeft.emptyCircleProjectContact.empty")

2
src/views/partials/widgets/hubl-menu-fix-url-circle.pug
View File

@ -2,5 +2,5 @@ if componentSet.has('circles')
solid-widget(name='hubl-menu-fix-url-circle')
template ${value != "" ? `
<solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('circles', true)}">
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(status, circle(name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium" class-status='segment text-top sub-menu-icon' class-circle='segment three-quarter sub-menu-name' class-name='ellipsis-content' class-badge='segment badge' value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-badge='hubl-counter' widget-jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc="name"></solid-display>
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(status, circle(name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-status='segment text-top sub-menu-icon' class-circle='segment three-quarter sub-menu-name' class-name='ellipsis-content' class-badge='segment badge' value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-badge='hubl-counter' widget-jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc="name"></solid-display>
</solid-link>` : ""}

2
src/views/partials/widgets/hubl-menu-fix-url-contact.pug
View File

@ -2,5 +2,5 @@ if componentSet.has('chat')
solid-widget(name='hubl-menu-fix-url-contact')
template ${value != "" ? `
<solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('chat', true)}">
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(message(name, chatProfile.jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium" class-message='segment three-quarter sub-menu-name' class-badge='segment badge' value-badge='${value}' widget-badge='hubl-counter' widget-chatProfile.jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc='username'></solid-display>
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(message(name, chatProfile.jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-message='segment three-quarter sub-menu-name' class-badge='segment badge' value-badge='${value}' widget-badge='hubl-counter' widget-chatProfile.jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc='username'></solid-display>
</solid-link>` : ""}

2
src/views/partials/widgets/hubl-menu-fix-url-project.pug
View File

@ -2,5 +2,5 @@ if componentSet.has('projects')
solid-widget(name='hubl-menu-fix-url-project')
template ${value != "" ? `
<solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('projects', true)}">
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(status, project(customer.name, name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium" class-status='segment text-top sub-menu-icon' class-project='segment three-quarter sub-menu-name' class-customer.name='ellipsis-content' class-name='ellipsis-content' class-badge='segment badge text-top' value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-jabberID='hubl-menu-jabberid' widget-badge='hubl-counter' widget-name='solid-display-div' order-asc="customer.name"></solid-display>
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(project(customer.name, name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-project='segment three-quarter sub-menu-name' class-customer.name='ellipsis-content' class-name='ellipsis-content' class-badge='segment badge text-top' value-badge='${value}' widget-jabberID='hubl-menu-jabberid' widget-badge='hubl-counter' widget-name='solid-display-div' order-asc="customer.name"></solid-display>
</solid-link>` : ""}