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

fix a lot of problems and add js for menus

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2020-01-20 13:57:03 +01:00
parent 36a045cacb
commit 83e6957934
No known key found for this signature in database
GPG Key ID: F2702E6D22ED4D62
15 changed files with 169 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/header.pug
View File

@ -14,7 +14,7 @@ sib-notifications(
include templates/hd-user-avatar.pug
details#user-controls
details#user-controls.notLoggedIn
summary(tabindex='0' role='button')
sib-display#user-controls__profile(
fields='firstName, account.picture'
@ -24,11 +24,10 @@ details#user-controls
#user-controls__panel
include page-user-panel.pug
.jsToggleLeftMenu.mobile-menu-icon
button.icon-menu
button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
sib-auth
sib-auth-provider(
data-authority=`${authority}`

55
src/menu-left.pug
View File

@ -7,7 +7,7 @@ sib-widget(name='hd-create')
p.create You are not part of any ${value} yet. To create a new one, you can go to the
sib-link(next='admin') administration panel
nav#main__menu.jsLeftMenu.mobile-closed
nav#main__menu.jsLeftMenu
sib-router#navbar-router(default-route='members')
//- sib-route.menu(name='members')
//- div.menu-label Members
@ -19,32 +19,33 @@ nav#main__menu.jsLeftMenu.mobile-closed
//- sib-route(name='job-offer-create', hidden)
//- sib-route(name='job-offer-edit', use-id, hidden)
//- div.divider
div.menu-wrapper
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-up
div.menu-label Projects
div.menu-icon.icon-folder-alt
sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification
sib-display.project-tab(
data-src=`${endpoints.projects}`
fields='project(customer.name, name), badge'
class-customer.name='project-customer'
class-name='project-name'
empty-widget='hd-create'
empty-value='project'
search-fields='team'
search-widget-team='sib-form-hidden'
search-value-team='-'
hd-inherit-user-id='search-value-team'
hd-inherit-widgets
widget-badge='hd-counter'
action-badge='badge'
order-by='customer.name'
next='project'
)
div.divider
//- div
//- div.menu
//- div.menu-chevron
//- sib-link(next='admin-project-list')
//- div.menu-icon.icon-arrow-right
//- div.menu-label Projects
//- div.menu-icon.icon-folder-alt
//- sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
//- div.sub-menu.menu-notification
//- sib-display.project-tab(
//- data-src=`${endpoints.projects}`
//- fields='project(customer.name, name), badge'
//- class-customer.name='project-customer'
//- class-name='project-name'
//- empty-widget='hd-create'
//- empty-value='project'
//- search-fields='team'
//- search-widget-team='sib-form-hidden'
//- search-value-team='-'
//- hd-inherit-user-id='search-value-team'
//- hd-inherit-widgets
//- widget-badge='hd-counter'
//- action-badge='badge'
//- order-by='customer.name'
//- next='project'
//- )
//- div.divider
div
div.menu
div.menu-chevron

8
src/page-admin.pug
View File

@ -1,4 +1,4 @@
.views-container
.views-container.sidebar-is-closed
#admin-circles(hidden)
include page-admin-circles.pug
#admin-projects(hidden)
@ -16,6 +16,6 @@ nav.jsRightMenu(role='navigation')
sib-route(name='admin-circles')
li
a Circles
sib-route(name='admin-projects')
li
a Projects
//- sib-route(name='admin-projects')
//- li
//- a Projects

2
src/page-circle-edit.pug
View File

@ -3,7 +3,7 @@ div.content-box__info
include templates/hd-user-avatar.pug
sib-widget(name='hd-user-groups')
template ${value.name}
template ${await value.name}
sib-widget(name='team-template-edit')
template

6
src/page-circle-profile.pug
View File

@ -25,10 +25,10 @@ sib-router(default-route='circle-profile', hidden)
sib-display.block(
bind-resources
fields='members.user'
fields='members'
multiple-members.user=''
widget-members.user='circle-team-template'
multiple-members=''
widget-members='circle-team-template'
)
div.box-button

8
src/page-circle.pug
View File

@ -1,4 +1,4 @@
.views-container
.views-container.sidebar-is-closed
.content-box.full-width.with-form
div.content-box__header
sib-ac-checker(permission='acl:Read', bind-resources)
@ -9,9 +9,7 @@
class-name='h1-like'
class-description='h1-aside description'
)
.mobile-sidebar-button.jsMobileSidebarOpenButton
button.icon-arrow-left-circle
span MENU
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
div.content-box__info
sib-ac-checker(permission='acl:Read', bind-resources)
#circle-chat(hidden)
@ -19,7 +17,7 @@
#circle-information(hidden)
include page-circle-profile.pug
nav.jsRightMenu.mobile-closed(role='navigation')
nav.jsRightMenu(role='navigation')
sib-router(default-route='circle-chat')
ul
li.jsOffsiteToggle

4
src/page-project.pug
View File

@ -1,4 +1,4 @@
.views-container
.views-container.sidebar-is-closed
.content-box.full-width.with-form
div.content-box__header
sib-ac-checker(permission='acl:Read', bind-resources)
@ -28,7 +28,7 @@ dialog(id='project-contributions-help').modal
button.icon-close
img(src='/images/contributions-help.png')
nav.jsRightMenu.mobile-closed(role='navigation')
nav.jsRightMenu(role='navigation')
sib-router(default-route='project-chat')
ul
li.jsOffsiteToggle

91
src/scripts/index.js
View File

@ -48,14 +48,33 @@ function closeUserControls() {
if (userControls) userControls.removeAttribute("open");
}
function closeLeftMenu() {
let leftMenu = document.querySelector('#main__menu');
if (leftMenu) leftMenu.removeAttribute("open");
}
function closeRightMenu() {
let rightMenu = document.querySelectorAll('.jsRightMenu');
if(Array.from(rightMenu).filter(el=>el.hasAttribute('open')).length > 0) {
Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
Array.from(rightMenu).forEach(el => el.removeAttribute('open'));
}
}
function openRightMenu() {
let rightMenu = document.querySelectorAll('.jsRightMenu');
Array.from(rightMenu).forEach(el => el.setAttribute('open', ''));
Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
}
document.addEventListener('DOMContentLoaded', function (event) {
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
//- View change event
// window.addEventListener('navigate', (event) => {
// });
window.addEventListener('navigate', (event) => {
closeLeftMenu();
closeUserControls();
});
//- Toggle sub-menus
menuWrappers.forEach(menuWrapper => {
@ -65,35 +84,26 @@ document.addEventListener('DOMContentLoaded', function (event) {
});
});
//- Open/close menu on the right
rightMenus.forEach(rightMenu => {
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
btnRightMenu.addEventListener('click', e => {
rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
})
});
//- Watch every sib-forms & update data-src of linked sib-display
document.querySelectorAll('sib-form').forEach(function(el) {
el.addEventListener("save", function(event) {
document.querySelectorAll('sib-form').forEach(function (el) {
el.addEventListener("save", function (event) {
//clear cache on this resource
//NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
if(el.component.resource != null) el.component.resource.clearCache();
if (el.component.resource != null) el.component.resource.clearCache();
// if of the edited resource || id of the container of the created resource
const resourceId = event.detail.resource['@id'] || el.dataset.src;
//update all displays which use this resource
Array.from(document.querySelectorAll('sib-display'))
.filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
.forEach(e => e.dataset.src = e.dataset.src); // and update them
.filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
.forEach(e => e.dataset.src = e.dataset.src); // and update them
});
});
document.querySelector('sib-auth').getUser().then(user => {
if (user !== null) {
document.querySelectorAll('.notLoggedIn').forEach(el => el.style.visibility = 'visible');
// Hide login button if already logged
document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
// Set current user id on set-user-id of sib-display
@ -106,13 +116,52 @@ document.addEventListener('DOMContentLoaded', function (event) {
// Document -> close menu
document.addEventListener("click", event => {
if (!event.target.closest('#user-controls')) closeUserControls();
if (!event.target.closest('#user-controls')) {
closeUserControls();
}
if (!event.target.closest('#main__menu') && event.target.id != "toggleMainMenu") {
closeLeftMenu();
}
if (!event.target.className.includes('jsMobileSidebarOpenButton') && !event.target.className.includes('jsOffsiteToggle')) {
closeRightMenu();
}
});
document.querySelector('#toggleMainMenu').addEventListener('click', event => {
let leftMenu = document.querySelector('#main__menu');
if (leftMenu.hasAttribute('open')) {
closeLeftMenu();
} else {
leftMenu.setAttribute('open', '');
}
});
Array.from(document.querySelectorAll('.jsMobileSidebarOpenButton')).forEach(el => {
el.addEventListener('click', event => {
openRightMenu();
});
});
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
rightMenus.forEach(rightMenu => {
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
btnRightMenu.addEventListener('click', e => {
if (rightMenu.hasAttribute('open')) {
closeRightMenu();
} else {
openRightMenu();
}
})
});
// listen for keypress
document.onkeydown = (e) => {
e = e || window.event;
if (e.key === "Escape" || e.key === "Esc") closeUserControls();
if (e.key === "Escape" || e.key === "Esc") {
closeUserControls();
closeLeftMenu();
closeRightMenu();
}
};
});

5
src/styles/base/header.scss
View File

@ -56,6 +56,10 @@
}
}
.notLoggedIn {
visibility: hidden;
}
sib-notifications {
@include breakpoint(sm) {
@ -259,6 +263,7 @@
@include breakpoint(sm) {
display: block;
padding-left: 0;
font-size: 26px;
}
}
}

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

@ -212,19 +212,14 @@ h5 {
.mobile-sidebar-button {
@include breakpoint(sm) {
float: right;
color: $color-233-18-29;
font-size: 1.8rem;
font-weight: bold!important;
button {
color: $color-233-18-29;
&::before {
font-size: 2.2rem;
margin-right: 1.2rem;
}
}
span {
font-size: 1.8rem;
font-weight: bold;
&::before {
font-size: 2.2rem;
font-weight: normal;
margin-right: 1.2rem;
}
}

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

@ -189,9 +189,17 @@
}
}
&.jsLeftMenu.mobile-opened {
&.jsLeftMenu {
@include breakpoint(sm) {
display: none;
}
}
&.jsLeftMenu[open] {
@include breakpoint(sm) {
display: block;
bottom: 0;
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
min-width: 80%;
@ -201,11 +209,4 @@
z-index: 1;
}
}
&.jsLeftMenu.mobile-closed {
@include breakpoint(sm) {
display: none;
}
}
}

25
src/styles/components/sidebar.scss
View File

@ -15,8 +15,10 @@
/*-webkit-backface-visibility: hidden;*/
&.sidebar-is-closed {
margin-left: -15.5rem;
transform: translate(15.5rem);
@include breakpoint(769px, 0) {
margin-left: -15.5rem;
transform: translate(15.5rem);
}
}
}
@ -111,7 +113,14 @@
}
}
&.jsRightMenu.offsite-is-closed {
&.jsRightMenu {
@include breakpoint(sm) {
display: none;
}
}
&.jsRightMenu:not([open]) {
transform: translate(15.5rem);
& .jsOffsiteToggle::before {
@ -119,9 +128,10 @@
}
}
&.jsRightMenu.mobile-opened {
&.jsRightMenu[open] {
@include breakpoint(sm) {
display: block;
background: $color-221-51-90;
bottom: 0;
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
@ -132,12 +142,5 @@
z-index: 1;
}
}
&.jsRightMenu.mobile-closed {
@include breakpoint(sm) {
display: none;
}
}
}
}

4
src/styles/layout/circle/circle-profile.scss
View File

@ -14,7 +14,7 @@
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
>[name='user.account.picture'] {
>[name='account.picture'] {
align-items: center;
align-self: center;
background-color: $color-213-20-91;
@ -61,7 +61,7 @@
margin-bottom: 1px;
margin-left: 0.6rem;
[name='user.groups'] {
[name='groups'] {
@extend %tag-role;
}
}

27
src/templates/hd-circle-team.pug
View File

@ -3,23 +3,24 @@ include hd-user-avatar.pug
sib-widget(name='circle-team-template')
template
sib-display(
data-src='${await value}'
fields='user.account.picture, sup(user.name, is_admin, user.groups), sub(user.profile.city)'
data-src='${await value.user}'
fields='account.picture, sup(name, isadmin, groups), sub(profile.city)'
value-isadmin='${await value.is_admin}'
class-user.name='user-name'
class-is_admin='tag-admin'
class-user.groups='tag-group'
class-user.profile.city='city'
class-name='user-name'
class-isadmin='tag-admin'
class-groups='tag-group'
class-profile.city='city'
widget-user.account.picture='hd-user-avatar'
widget-is_admin='hd-user-admin'
widget-user.groups='hd-user-groups'
widget-account.picture='hd-user-avatar'
widget-isadmin='hd-circle-user-admin'
widget-groups='hd-circle-user-groups'
multiple-user.groups=''
multiple-groups=''
)
sib-widget(name='hd-user-admin')
template ${await value ? "Administrator" : ""}
sib-widget(name='hd-circle-user-admin')
template ${(await value) != "false" ? "Administrator" : ""}
sib-widget(name='hd-user-groups')
sib-widget(name='hd-circle-user-groups')
template ${await value.name}

8
src/templates/hd-project-team.pug
View File

@ -12,14 +12,14 @@ sib-widget(name='hd-project-team')
class-user.profile.city='city'
widget-user.account.picture='hd-user-avatar'
widget-is_admin='hd-user-admin'
widget-user.groups='hd-user-groups'
widget-is_admin='hd-project-user-admin'
widget-user.groups='hd-project-user-groups'
multiple-user.groups=''
)
sib-widget(name='hd-user-admin')
sib-widget(name='hd-project-user-admin')
template ${await value ? "Administrator" : ""}
sib-widget(name='hd-user-groups')
sib-widget(name='hd-project-user-groups')
template ${await value.name}