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

feature: project - sidebar

This commit is contained in:
gaelle morin 2020-12-23 17:47:07 +01:00
parent 500758eebb
commit ed15a89716
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
5 changed files with 200 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
src/index.pug
View File

@ -52,82 +52,105 @@ html(lang="en")
main#content.segment.lg-three-quarter.text-top.notLoggedIn main#content.segment.lg-three-quarter.text-top.notLoggedIn
if endpoints.get.dashboards //- if endpoints.get.dashboards
#dashboard(hidden, data-view="dashboard") //- #dashboard(hidden, data-view="dashboard")
include views/page-dashboard.pug //- 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 //- if endpoints.get.users
//- #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding //- #messages(hidden, data-view="messages", no-render).with-sidebar
//- include views/page-dashboard.pug //- hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts")
//- include views/page-messages.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.polls //- if endpoints.get.polls
//- #polls(hidden, data-view="polls", no-render).with-sidebar //- #polls(hidden, data-view="polls", no-render).with-sidebar
//- include views/page-polls.pug //- include views/page-polls.pug
//- if endpoints.get.events //- if endpoints.get.events
//- #events(hidden, data-view="events", no-render) //- #events(hidden, data-view="events", no-render)
//- include views/page-events.pug //- include views/page-events.pug
//- if endpoints.get.resources //- if endpoints.get.resources
//- #resources(hidden, data-view="resources", no-render) //- #resources(hidden, data-view="resources", no-render)
//- include views/page-resources.pug //- include views/page-resources.pug
//- #admin(hidden, data-view="admin").segment.lg-full.with-sidebar //- #admin(hidden, data-view="admin").segment.lg-full.with-sidebar
//- include views/page-admin.pug //- include views/page-admin.pug
//- #about(data-view="about").no-sidebar.with-padding //- #about(data-view="about")
//- include views/page-about.pug //- include views/page-about.pug
//- if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users //- if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users
//- #profile(hidden, data-view="profile", no-render).no-sidebar //- #profile(hidden, data-view="profile", no-render).no-sidebar
//- include views/page-profile.pug //- 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 if analytics
each provider in analytics each provider in analytics

4
src/styles/content/_index.scss
View File

@ -32,8 +32,9 @@ main {
transition: all 0.5s; transition: all 0.5s;
} }
nav { .sidebar {
background: #F1F1F1; background: #F1F1F1;
height: calc(100vh - 72px);
transition: all 0.5s; transition: all 0.5s;
width: 217px; width: 217px;
@ -62,6 +63,7 @@ main {
} }
} }
/* Styles use with JS to open/close the sidebar */
&.jsRightMenu { &.jsRightMenu {
display: none; display: none;

14
src/views/page-project.pug
View File

@ -7,18 +7,18 @@
#project-picture(hidden, data-view="project-picture") #project-picture(hidden, data-view="project-picture")
include partials/project/page-project-picture.pug include partials/project/page-project-picture.pug
nav.jsRightMenu(role='navigation') nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
solid-router.text-color-heading.text-bold(default-route='project-chat') solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='project-chat')
ul 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 span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
a(data-trans='project.menuRight.fold') a(data-trans='project.menuRight.fold')
solid-route(name='project-chat') solid-route.segment.lg-full(name='project-chat')
li.segment.padding-medium li.segment.lg-full.padding-medium
span.icon.ci-chat.icon-xlarge.margin-right-small span.icon.ci-chat.icon-xlarge.margin-right-small
a(data-trans='project.menuRight.chat') a(data-trans='project.menuRight.chat')
solid-route(name='project-information') solid-route.segment.lg-full(name='project-information')
li.segment.padding-medium li.segment.lg-full.padding-medium
span.icon.ci-information.icon-xlarge.margin-right-small span.icon.ci-information.icon-xlarge.margin-right-small
a(data-trans='project.menuRight.information') a(data-trans='project.menuRight.information')
solid-route(name='project-picture' use-id) solid-route(name='project-picture' use-id)

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

@ -95,42 +95,42 @@ 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-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(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.segment.margin-right-xxsmall //- div.segment.margin-right-xxsmall
div.icon.icon-small.icon-home //- div.icon.icon-small.icon-home
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard") //- 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-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(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.segment.margin-right-xxsmall //- div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-people //- div.segment.icon.icon-small.icon-people
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory") //- 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-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(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.segment.margin-right-xxsmall //- div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-briefcase //- div.segment.icon.icon-small.icon-briefcase
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard") //- 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-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(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.segment.margin-right-xxsmall //- div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-docs //- div.segment.icon.icon-small.icon-docs
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources") //- 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-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(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.segment.margin-right-xxsmall //- div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-bubbles //- div.segment.icon.icon-small.icon-bubbles
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov") //- 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-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(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.segment.margin-right-xxsmall //- div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-calendar //- div.segment.icon.icon-small.icon-calendar
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events") //- 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.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active 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" order-asc="project.customer.name"
) )
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.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active //- 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.segment.margin-right-xxsmall //- div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-folder-alt //- div.segment.icon.icon-small.icon-folder-alt
div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles") //- div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles")
div.menu-chevron.segment //- div.menu-chevron.segment
div.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
div#loader-circles.loader.loader-menu //- div#loader-circles.loader.loader-menu
div //- div
div //- div
div //- div
div //- div
solid-display.ellipsis( //- solid-display.ellipsis(
bind-user //- bind-user
nested-field='circles' //- nested-field='circles'
fields='circle' //- fields='circle'
loader-id='loader-circles' //- loader-id='loader-circles'
empty-widget='hubl-create' //- empty-widget='hubl-create'
empty-value='' //- empty-value=''
data-trans="empty-value=menuLeft.emptyCircleProject.circle" //- data-trans="empty-value=menuLeft.emptyCircleProject.circle"
widget-circle='hubl-menu-fix-url-circle' //- widget-circle='hubl-menu-fix-url-circle'
order-asc="circle.name" //- order-asc="circle.name"
) //- )
div.divider //- div.divider
div.menu-wrapper //- div.menu-wrapper
div.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active //- 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.margin-right-xxsmall
div.segment.icon.icon-small.icon-envelope-letter //- div.segment.icon.icon-small.icon-envelope-letter
div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages") //- div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages")
div.menu-chevron.segment //- div.menu-chevron.segment
div.icon-arrow-up //- 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
div //- div
div //- div
div //- div
div //- div
//- search-fields="contact.name" //- //- search-fields="contact.name"
//- search-label-contact.name="" //- //- search-label-contact.name=""
//- data-trans="search-label-contact.name=menuLeft.search" //- //- data-trans="search-label-contact.name=menuLeft.search"
//- search-widget-contact.name="hubl-search-users" //- //- search-widget-contact.name="hubl-search-users"
solid-display.message-tab.segment.lg-full( //- solid-display.message-tab.segment.lg-full(
bind-user //- bind-user
nested-field='contacts' //- nested-field='contacts'
fields='contact' //- fields='contact'
loader-id='loader-messages' //- loader-id='loader-messages'
empty-widget='hubl-create-contact' //- empty-widget='hubl-create-contact'
empty-value='' //- empty-value=''
widget-contact='hubl-menu-fix-url-contact' //- widget-contact='hubl-menu-fix-url-contact'
order-asc="contact.username" //- order-asc="contact.username"
) //- )
div.divider //-div.divider
//-
solid-route(name='admin', hidden) //-solid-route(name='admin', hidden)
solid-route.menu(name='profile', hidden) //-solid-route.menu(name='profile', hidden)
solid-route(name='about', hidden) //-solid-route(name='about', hidden)

2
src/views/partials/project/page-project-profile.pug
View File

@ -3,7 +3,7 @@ solid-router(default-route='project-profile', hidden)
solid-route(name='project-edit') solid-route(name='project-edit')
#project-profile(hidden, data-view="project-profile") #project-profile(hidden, data-view="project-profile")
//-
solid-ac-checker(permission='acl:Read', bind-resources) solid-ac-checker(permission='acl:Read', bind-resources)
div.segment.padding-large.border-bottom.border-color-grey.clearfix div.segment.padding-large.border-bottom.border-color-grey.clearfix
solid-display.text-xxlarge.text-letter-spacing-large( solid-display.text-xxlarge.text-letter-spacing-large(