diff --git a/src/header.pug b/src/header.pug index c95b909..ff59b10 100644 --- a/src/header.pug +++ b/src/header.pug @@ -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}` diff --git a/src/menu-left.pug b/src/menu-left.pug index 46b0d93..e5fec82 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -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 diff --git a/src/page-admin.pug b/src/page-admin.pug index 2dd6834..049e6ca 100644 --- a/src/page-admin.pug +++ b/src/page-admin.pug @@ -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 diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 930302e..f4f0c6a 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -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 diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index eb36bfc..cd4e302 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -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 diff --git a/src/page-circle.pug b/src/page-circle.pug index 6ef5127..e938ee3 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -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 diff --git a/src/page-project.pug b/src/page-project.pug index 9cf8f7d..ae2e06c 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -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 diff --git a/src/scripts/index.js b/src/scripts/index.js index b50faf0..ea62622 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -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(); + } }; }); \ No newline at end of file diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 95daac6..850e1da 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -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; } } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 599f4c0..4aae4ef 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -212,19 +212,14 @@ h5 { .mobile-sidebar-button { @include breakpoint(sm) { float: right; - - button { - color: $color-233-18-29; + color: $color-233-18-29; + font-size: 1.8rem; + font-weight: bold!important; - &::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; } } diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index e228084..1256a05 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -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; - } - } } diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 652b17d..8b90344 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -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; - } - } } } \ No newline at end of file diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 63bf22a..64dbf51 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -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; } } diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index ff90ce0..846f6e9 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -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} diff --git a/src/templates/hd-project-team.pug b/src/templates/hd-project-team.pug index c08740a..8fd2458 100644 --- a/src/templates/hd-project-team.pug +++ b/src/templates/hd-project-team.pug @@ -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}