From ed15a89716f0422d24931eaa8a5fdda87e57eb65 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Wed, 23 Dec 2020 17:47:07 +0100 Subject: [PATCH] feature: project - sidebar --- src/index.pug | 159 ++++++++------ src/styles/content/_index.scss | 4 +- src/views/page-project.pug | 14 +- src/views/partials/menu-left.pug | 196 +++++++++--------- .../partials/project/page-project-profile.pug | 2 +- 5 files changed, 200 insertions(+), 175 deletions(-) diff --git a/src/index.pug b/src/index.pug index d966ae9..a657a40 100644 --- a/src/index.pug +++ b/src/index.pug @@ -52,82 +52,105 @@ html(lang="en") main#content.segment.lg-three-quarter.text-top.notLoggedIn - if endpoints.get.dashboards - #dashboard(hidden, data-view="dashboard") - include views/page-dashboard.pug + //- if endpoints.get.dashboards + //- #dashboard(hidden, data-view="dashboard") + //- include views/page-dashboard.pug + + //- if publicDirectory && endpoints.get.users + //- #members(hidden, data-view="members", no-render) + //- include views/page-directory.pug - //- if endpoints.get.dashboards - //- #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding - //- include views/page-dashboard.pug - - //- if publicDirectory && endpoints.get.users - //- #members(hidden, data-view="members", no-render).no-sidebar.with-padding - //- include views/page-directory.pug - - //- if endpoints.get.joboffers - //- #job-offers(hidden, data-view="job-offers", no-render).no-sidebar.with-padding - //- hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`) - //- hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`) - //- hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`) - //- hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) - //- hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) - //- hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) - //- hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) - //- hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) - //- hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`) - //- include views/page-job-offers.pug - - //- if endpoints.get.projects - //- #project(hidden, data-view="project", no-render).segment.lg-full.with-sidebar - //- hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.projects") - //- hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`) - //- hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`) - //- hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`) - //- hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`) - //- hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`) - //- hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`) - //- hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`) - //- include views/page-project.pug - - //- if endpoints.get.circles - //- #circle(hidden, data-view="circle").segment.lg-full.with-sidebar - //- hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.circles") - //- hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`) - //- hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`) - //- hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`) - //- hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`) - //- hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`) - //- hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`) - //- hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`) - //- include views/page-circle.pug - - //- if endpoints.get.users - //- #messages(hidden, data-view="messages", no-render).with-sidebar - //- hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts") - //- include views/page-messages.pug + //- if endpoints.get.users + //- #messages(hidden, data-view="messages", no-render).with-sidebar + //- hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts") + //- include views/page-messages.pug - //- if endpoints.get.polls - //- #polls(hidden, data-view="polls", no-render).with-sidebar - //- include views/page-polls.pug + //- if endpoints.get.polls + //- #polls(hidden, data-view="polls", no-render).with-sidebar + //- include views/page-polls.pug - //- if endpoints.get.events - //- #events(hidden, data-view="events", no-render) - //- include views/page-events.pug + //- if endpoints.get.events + //- #events(hidden, data-view="events", no-render) + //- include views/page-events.pug - //- if endpoints.get.resources - //- #resources(hidden, data-view="resources", no-render) - //- include views/page-resources.pug + //- if endpoints.get.resources + //- #resources(hidden, data-view="resources", no-render) + //- include views/page-resources.pug - //- #admin(hidden, data-view="admin").segment.lg-full.with-sidebar - //- include views/page-admin.pug + //- #admin(hidden, data-view="admin").segment.lg-full.with-sidebar + //- include views/page-admin.pug - //- #about(data-view="about").no-sidebar.with-padding - //- include views/page-about.pug + //- #about(data-view="about") + //- include views/page-about.pug - //- if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users - //- #profile(hidden, data-view="profile", no-render).no-sidebar - //- include views/page-profile.pug + //- if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users + //- #profile(hidden, data-view="profile", no-render).no-sidebar + //- include views/page-profile.pug + + //- if endpoints.get.joboffers + //- #job-offers(hidden, data-view="job-offers", no-render).no-sidebar.with-padding + //- hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`) + //- hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`) + //- hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`) + //- hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + //- hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) + //- hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + //- hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) + //- hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + //- hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`) + //- include views/page-job-offers.pug + + if endpoints.get.projects + #project(hidden, data-view="project", no-render).segment.lg-full.with-sidebar + hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.projects") + hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`) + hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`) + hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`) + include views/page-project.pug + + //- if endpoints.get.circles + //- #circle(hidden, data-view="circle").segment.lg-full.with-sidebar + //- hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.circles") + //- hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`) + //- hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`) + //- hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`) + //- hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`) + //- hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`) + //- hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`) + //- hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`) + //- include views/page-circle.pug + + //- if endpoints.get.users + //- #messages(hidden, data-view="messages", no-render).with-sidebar + //- hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts") + //- include views/page-messages.pug + + //- if endpoints.get.polls + //- #polls(hidden, data-view="polls", no-render).with-sidebar + //- include views/page-polls.pug + + //- if endpoints.get.events + //- #events(hidden, data-view="events", no-render) + //- include views/page-events.pug + + //- if endpoints.get.resources + //- #resources(hidden, data-view="resources", no-render) + //- include views/page-resources.pug + + //- #admin(hidden, data-view="admin").segment.lg-full.with-sidebar + //- include views/page-admin.pug + + //- #about(data-view="about") + //- include views/page-about.pug + + //- if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users + //- #profile(hidden, data-view="profile", no-render).no-sidebar + //- include views/page-profile.pug if analytics each provider in analytics diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss index 8b42be3..ca918cb 100644 --- a/src/styles/content/_index.scss +++ b/src/styles/content/_index.scss @@ -32,8 +32,9 @@ main { transition: all 0.5s; } - nav { + .sidebar { background: #F1F1F1; + height: calc(100vh - 72px); transition: all 0.5s; width: 217px; @@ -62,6 +63,7 @@ main { } } + /* Styles use with JS to open/close the sidebar */ &.jsRightMenu { display: none; diff --git a/src/views/page-project.pug b/src/views/page-project.pug index be8e8b8..c43b75d 100644 --- a/src/views/page-project.pug +++ b/src/views/page-project.pug @@ -7,18 +7,18 @@ #project-picture(hidden, data-view="project-picture") include partials/project/page-project-picture.pug -nav.jsRightMenu(role='navigation') - solid-router.text-color-heading.text-bold(default-route='project-chat') +nav.jsRightMenu.sidebar.whitespace-normal(role='navigation') + solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='project-chat') ul - li.segment.padding-small.text-right.text-normal.jsOffsiteToggle + li.segment.lg-full.padding-small.text-right.text-normal.jsOffsiteToggle span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall a(data-trans='project.menuRight.fold') - solid-route(name='project-chat') - li.segment.padding-medium + solid-route.segment.lg-full(name='project-chat') + li.segment.lg-full.padding-medium span.icon.ci-chat.icon-xlarge.margin-right-small a(data-trans='project.menuRight.chat') - solid-route(name='project-information') - li.segment.padding-medium + solid-route.segment.lg-full(name='project-information') + li.segment.lg-full.padding-medium span.icon.ci-information.icon-xlarge.margin-right-small a(data-trans='project.menuRight.information') solid-route(name='project-picture' use-id) diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index c864562..61daf4f 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -95,42 +95,42 @@ solid-widget(name='hubl-menu-fix-url-project') solid-router#navbar-router(default-route='dashboard') - if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) - solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='dashboard') - div.segment.margin-right-xxsmall - div.icon.icon-small.icon-home - div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard") - div.divider - if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) - solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members') - div.segment.margin-right-xxsmall - div.segment.icon.icon-small.icon-people - div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory") - div.divider - if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) - 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.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 endpoints.resources || (endpoints.get && endpoints.get.resources) - solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='resources') - 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 endpoints.polls || (endpoints.get && endpoints.get.polls) - solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='polls') - 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 endpoints.events || (endpoints.get && endpoints.get.events) - solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='events') - div.segment.margin-right-xxsmall - div.segment.icon.icon-small.icon-calendar - div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events") - div.divider + //- if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) + //- solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='dashboard') + //- div.segment.margin-right-xxsmall + //- div.icon.icon-small.icon-home + //- div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard") + //- div.divider + //- if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + //- solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members') + //- div.segment.margin-right-xxsmall + //- div.segment.icon.icon-small.icon-people + //- div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory") + //- div.divider + //- if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) + //- 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.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 endpoints.resources || (endpoints.get && endpoints.get.resources) + //- solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='resources') + //- 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 endpoints.polls || (endpoints.get && endpoints.get.polls) + //- solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='polls') + //- 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 endpoints.events || (endpoints.get && endpoints.get.events) + //- solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='events') + //- div.segment.margin-right-xxsmall + //- div.segment.icon.icon-small.icon-calendar + //- div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events") + //- div.divider if endpoints.projects || (endpoints.get && endpoints.get.projects) div.menu-wrapper solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active @@ -160,65 +160,65 @@ solid-router#navbar-router(default-route='dashboard') order-asc="project.customer.name" ) div.divider - if endpoints.circles || (endpoints.get && endpoints.get.circles) - div.menu-wrapper - solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active - //- (next='admin-circle-list') - div.segment.margin-right-xxsmall - div.segment.icon.icon-small.icon-folder-alt - div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles") - div.menu-chevron.segment - div.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#loader-circles.loader.loader-menu - div - div - div - div - solid-display.ellipsis( - bind-user - nested-field='circles' - fields='circle' - loader-id='loader-circles' - empty-widget='hubl-create' - empty-value='' - data-trans="empty-value=menuLeft.emptyCircleProject.circle" - widget-circle='hubl-menu-fix-url-circle' - order-asc="circle.name" - ) - div.divider - div.menu-wrapper - div.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active - div.segment.margin-right-xxsmall - div.segment.icon.icon-small.icon-envelope-letter - div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages") - div.menu-chevron.segment - div.icon-arrow-up - solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden) - div.sub-menu.menu-notification - div#loader-messages.loader.loader-menu - 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.message-tab.segment.lg-full( - bind-user - nested-field='contacts' - fields='contact' - loader-id='loader-messages' - empty-widget='hubl-create-contact' - empty-value='' - widget-contact='hubl-menu-fix-url-contact' - order-asc="contact.username" - ) - div.divider - - solid-route(name='admin', hidden) - solid-route.menu(name='profile', hidden) - solid-route(name='about', hidden) + //-if endpoints.circles || (endpoints.get && endpoints.get.circles) + //- div.menu-wrapper + //- solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active + //- //- (next='admin-circle-list') + //- div.segment.margin-right-xxsmall + //- div.segment.icon.icon-small.icon-folder-alt + //- div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles") + //- div.menu-chevron.segment + //- div.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#loader-circles.loader.loader-menu + //- div + //- div + //- div + //- div + //- solid-display.ellipsis( + //- bind-user + //- nested-field='circles' + //- fields='circle' + //- loader-id='loader-circles' + //- empty-widget='hubl-create' + //- empty-value='' + //- data-trans="empty-value=menuLeft.emptyCircleProject.circle" + //- widget-circle='hubl-menu-fix-url-circle' + //- order-asc="circle.name" + //- ) + //- div.divider + //- div.menu-wrapper + //- div.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active + //- div.segment.margin-right-xxsmall + //- div.segment.icon.icon-small.icon-envelope-letter + //- div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages") + //- div.menu-chevron.segment + //- div.icon-arrow-up + //- solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden) + //- div.sub-menu.menu-notification + //- div#loader-messages.loader.loader-menu + //- 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.message-tab.segment.lg-full( + //- bind-user + //- nested-field='contacts' + //- fields='contact' + //- loader-id='loader-messages' + //- empty-widget='hubl-create-contact' + //- empty-value='' + //- widget-contact='hubl-menu-fix-url-contact' + //- order-asc="contact.username" + //- ) + //-div.divider +//- + //-solid-route(name='admin', hidden) + //-solid-route.menu(name='profile', hidden) + //-solid-route(name='about', hidden) diff --git a/src/views/partials/project/page-project-profile.pug b/src/views/partials/project/page-project-profile.pug index f32510f..a330499 100644 --- a/src/views/partials/project/page-project-profile.pug +++ b/src/views/partials/project/page-project-profile.pug @@ -3,7 +3,7 @@ solid-router(default-route='project-profile', hidden) solid-route(name='project-edit') #project-profile(hidden, data-view="project-profile") - +//- solid-ac-checker(permission='acl:Read', bind-resources) div.segment.padding-large.border-bottom.border-color-grey.clearfix solid-display.text-xxlarge.text-letter-spacing-large(