diff --git a/config.sample.federated.json b/config.sample.federated.json index a17abca..7c8bd6f 100644 --- a/config.sample.federated.json +++ b/config.sample.federated.json @@ -6,6 +6,7 @@ "clientLogoHeight": "32px", "clientCSS": "/path/to/custom.css", "authorityName": "djangoldp-server-name", + "publicDirectory": false, "endpoints": { "get": { "circles": "http://localhost:8000/circles/", diff --git a/config.sample.json b/config.sample.json index 0197c37..9649336 100644 --- a/config.sample.json +++ b/config.sample.json @@ -6,6 +6,7 @@ "clientLogoHeight": "32px", "clientCSS": "/path/to/custom.css", "authorityName": "djangoldp-server-name", + "publicDirectory": false, "endpoints": { "circles": "http://localhost:8000/circles/", "projects": "http://localhost:8000/projects/", diff --git a/src/dependencies.pug b/src/dependencies.pug index 95d17f8..a70d24b 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -1,24 +1,33 @@ -script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8") script(src="/scripts/index.js") -//- local -//- script(type="module" src="/lib/sib-router/src/index.js") -//- script(type="module" src="/lib/sib-chat/sib-chat.js") -//- script(type="module" src="/lib/sib-notifications/sib-notifications.js") -//- script(type="module" src="/lib/sib-event/sib-event.js") -//- script(type="module" src="/lib/sib-conversation/sib-conversation.js") -//- script(type="module" src="/lib/sib-directory/sib-directory.js") -//- script(type="module" src="/lib/sib-job-board/sib-job-board.js") - -//- CDN -script(type="module" src="https://unpkg.com/@startinblox/core@0.9") -script(type="module" src="https://unpkg.com/@startinblox/router@0.7") -script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.4") -script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.3") -script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1") -//- script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3") -//- script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3") -//- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3") +//- Scripts - use add `"libLocal" = true` on config.json to use your local `lib` folder +if libLocal + script(type="module" src="/lib/sib-oidc/index.js") + script(type="module" src="/lib/sib-router/src/index.js") + script(type="module" src="/lib/sib-notifications/index.js") + if endpoints.users || (endpoints.get && endpoints.get.users) + script(type="module" src="/lib/sib-chat/sib-chat.js") + if endpoints.events || (endpoints.get && endpoints.get.events) + script(type="module" src="/lib/sib-event/sib-event.js") + if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) + script(type="module" src="/lib/sib-job-board/sib-job-board.js") + script(type="module" src="/lib/sib-conversation/sib-conversation.js") + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + script(type="module" src="/lib/sib-directory/sib-directory.js") +else + script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8") + script(type="module" src="https://unpkg.com/@startinblox/core@0.9") + script(type="module" src="https://unpkg.com/@startinblox/router@0.7") + script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.3") + if endpoints.users || (endpoints.get && endpoints.get.users) + script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.4") + if endpoints.events || (endpoints.get && endpoints.get.events) + script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1") + if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) + script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3") + script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3") + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3") //- Stylesheets link(rel='stylesheet', href='/styles/index.css') diff --git a/src/header.pug b/src/header.pug index a198a38..ef56755 100644 --- a/src/header.pug +++ b/src/header.pug @@ -7,7 +7,7 @@ //- i#search-icon.icon-magnifier(aria-hidden='true') //- i#close-search-icon.icon-close(aria-hidden='true') -sib-notifications( +sib-notifications.notLoggedIn( nested-field="inbox" bind-user ) @@ -22,13 +22,22 @@ details#user-controls.notLoggedIn bind-user ) #user-controls__panel - include page-user-panel.pug + nav(role="user's functionalities menu") + ul + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + li + sib-link(next='my-profile') My profile + //-li + sib-link(next='user-settings') Settings + li + sib-link(next='admin') Admin + button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out -button(role='log in' onclick="document.querySelector('sib-auth').login();") Login +button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();") Login button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu -sib-auth +sib-auth(style='display:none!important') sib-auth-provider( data-authority=`${authority}` data-id=`${authorityName || "authority"}` diff --git a/src/index.pug b/src/index.pug index 26454a2..0eae9a5 100644 --- a/src/index.pug +++ b/src/index.pug @@ -13,23 +13,18 @@ html(lang="en") body header#header(role='banner') include header.pug - main + + main.notLoggedIn include menu-left.pug div#viewport - //- #members(hidden).no-sidebar - //- include page-members-directory.pug + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + #members(hidden).no-sidebar + include page-directory.pug - //- #job-offers(hidden).no-sidebar - //- include page-job-offers.pug - - //- #job-offer-create(hidden).no-sidebar - //- sib-link(class="backlink", next="job-offers") Back - //- include page-job-offer-create.pug - - //- #job-offer-edit(hidden).no-sidebar - //- sib-link(class="backlink", next="job-offers") Back - //- include page-job-offer-edit.pug + if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) + #job-offers(hidden).no-sidebar + include page-job-offers.pug if endpoints.projects || (endpoints.get && endpoints.get.projects) #project(hidden).with-sidebar @@ -48,7 +43,4 @@ html(lang="en") include page-events.pug #admin(hidden).with-sidebar - include page-admin.pug - - //- #my-profile(hidden).no-sidebar - //- include page-user-profile.pug + include page-admin.pug \ No newline at end of file diff --git a/src/menu-left.pug b/src/menu-left.pug index 4b1ac41..02e0e59 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -7,18 +7,40 @@ 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 +sib-widget(name='menu-fix-url-circle') + template + sib-display( + data-src='${value}' + fields='name, badge' + value-badge='${value}' + widget-badge='hd-counter' + widget-name='sib-display-div' + ) + +sib-widget(name='menu-fix-url-project') + template + sib-display( + data-src='${value}' + fields='project(customer.name, name), badge' + class-name='project-name' + class-customer.name='project-customer' + value-badge='${value}' + widget-badge='hd-counter' + widget-name='sib-display-div' + ) + nav#main__menu.jsLeftMenu sib-router#navbar-router(default-route='members') - //- sib-route.menu(name='members') - //- div.menu-label Members - //- div.menu-icon.icon-people - //- div.divider - //- sib-route.menu(name='job-offers', rdf-type='hd:joboffer') - //- div.menu-label Job offers - //- div.menu-icon.icon-briefcase - //- sib-route(name='job-offer-create', hidden) - //- sib-route(name='job-offer-edit', use-id, hidden) - //- div.divider + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + sib-route.menu(name='members') + div.menu-label Members + div.menu-icon.icon-people + div.divider + if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) + sib-route.menu(name='job-offers', rdf-type='hd:joboffer') + div.menu-label Job offers + div.menu-icon.icon-briefcase + div.divider if endpoints.events || (endpoints.get && endpoints.get.events) sib-route.menu(name='events') div.menu-label Events @@ -35,20 +57,13 @@ nav#main__menu.jsLeftMenu sib-route(name='project', rdf-type='hd:project', use-id='', hidden) div.sub-menu.menu-notification sib-display.project-tab( - data-src=`${endpoints.projects || (endpoints.get && endpoints.get.projects)}` - fields='project(customer.name, name), badge' - class-customer.name='project-customer' - class-name='project-name' + bind-user + nested-field='projects' + fields='project' 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' + widget-project='menu-fix-url-project' + order-by='project.customer.name' next='project' ) div.divider @@ -62,22 +77,13 @@ nav#main__menu.jsLeftMenu div.menu-icon.icon-folder-alt sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden) div.sub-menu.menu-notification - sib-widget(name='menu-circle-fix-url') - template - sib-display( - data-src='${value}' - fields='name, badge' - value-badge='${value}' - widget-badge='hd-counter' - widget-name='sib-display-div' - ) sib-display( bind-user nested-field='circles' fields='circle' empty-widget='hd-create' empty-value='circle' - widget-circle='menu-circle-fix-url' + widget-circle='menu-fix-url-circle' order-by='circle.name' next='circle' ) diff --git a/src/page-admin.pug b/src/page-admin.pug index c396fd4..4876a37 100644 --- a/src/page-admin.pug +++ b/src/page-admin.pug @@ -1,20 +1,22 @@ .views-container.sidebar-is-closed if endpoints.circles || (endpoints.get && endpoints.get.circles) #admin-circles(hidden) - include page-admin-circles.pug + include views/admin/page-admin-circles.pug if endpoints.projects || (endpoints.get && endpoints.get.projects) #admin-projects(hidden) - include page-admin-projects.pug - //- #admin-users(hidden) - include page-admin-users.pug + include views/admin/page-admin-projects.pug + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + #admin-users(hidden) + include views/admin/page-admin-users.pug nav.jsRightMenu(role='navigation') sib-router(default-route='admin-circles') ul li.jsOffsiteToggle a Fold menu - //- sib-route(name='admin-users') - li - a Users + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + sib-route(name='admin-users') + li + a Users if endpoints.circles || (endpoints.get && endpoints.get.circles) sib-route(name='admin-circles') li diff --git a/src/page-circle.pug b/src/page-circle.pug index e938ee3..9f84093 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -13,9 +13,9 @@ div.content-box__info sib-ac-checker(permission='acl:Read', bind-resources) #circle-chat(hidden) - include page-circle-chat.pug + include views/circle/page-circle-chat.pug #circle-information(hidden) - include page-circle-profile.pug + include views/circle/page-circle-profile.pug nav.jsRightMenu(role='navigation') sib-router(default-route='circle-chat') diff --git a/src/page-members-directory.pug b/src/page-directory.pug similarity index 99% rename from src/page-members-directory.pug rename to src/page-directory.pug index 7b835cf..e8f8c3c 100644 --- a/src/page-members-directory.pug +++ b/src/page-directory.pug @@ -3,4 +3,3 @@ sib-directory( range-groups=`${endpoints.groups || endpoints.get.groups}`, range-skills=`${endpoints.skills || endpoints.get.skills}` ) - diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index 1772d1f..b7cb186 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -1,10 +1,25 @@ -.job-offers__container - sib-job-board( - data-src=`${endpoints.joboffers || endpoints.get.joboffers}`, - range-skills=`${endpoints.skills || endpoints.get.skills}` - ) +.content-box.full-width + #job-offer-board + .job-offers__container + sib-job-board( + data-src=`${endpoints.joboffers || endpoints.get.joboffers}`, + range-skills=`${endpoints.skills || endpoints.get.skills}` + ) - div.job-offers__newoffer - sib-link(next="job-offer-create").plus-button - div.icon-plus - div Post a new offer + div.job-offers__newoffer + sib-link(next="job-offer-create").plus-button + div.icon-plus + div Post a new offer + + #job-offer-create(hidden) + sib-link(class="backlink", next="job-offers") Back + include views/job-offer/page-job-offer-create.pug + + #job-offer-edit(hidden) + sib-link(class="backlink", next="job-offers") Back + include views/job-offer/page-job-offer-edit.pug + +sib-router(default-route='job-offer-board') + sib-route(name='job-offer-board') + sib-route(name='job-offer-create') + sib-route(name='job-offer-edit') \ No newline at end of file diff --git a/src/page-project.pug b/src/page-project.pug index ae2e06c..ffb9269 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -19,9 +19,9 @@ div.content-box__info sib-ac-checker(permission='acl:Read', bind-resources) #project-chat(hidden) - include page-project-chat.pug + include views/project/page-project-chat.pug #project-information(hidden) - include page-project-profile.pug + include views/project/page-project-profile.pug dialog(id='project-contributions-help').modal sib-link(next='project-profile') diff --git a/src/page-user-panel.pug b/src/page-user-panel.pug deleted file mode 100644 index 6e6c310..0000000 --- a/src/page-user-panel.pug +++ /dev/null @@ -1,9 +0,0 @@ -nav(role="user's functionalities menu") - ul - //- li - //- sib-link(next='my-profile') My profile - //-li - sib-link(next='user-settings') Settings - li - sib-link(next='admin') Admin - button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out diff --git a/src/scripts/index.js b/src/scripts/index.js index 4b7e6fe..8a86883 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -1,52 +1,47 @@ -function recursiveAdaptWidgets(prefix, element, user) { - //- This function is a workaround for the currently unworking populate - //- Feel free to see examples on page-circles- +function applyAdapt(prefix, sibDisplay, user) { + + //- Allow to bind-user on selected attribute + if (sibDisplay.getAttribute(prefix + "-user-id")) { + sibDisplay.setAttribute( + sibDisplay.getAttribute(prefix + "-user-id"), + user["@id"] + ); + } - element.querySelectorAll("[" + prefix + "-user-id]").forEach(el => { - el.setAttribute(el.getAttribute(prefix + "-user-id"), user["@id"]); - }); - - if (element != document) { - //- Allow to bind-user on selected attribute - if (element.getAttribute(prefix + "-user-id")) { - element.setAttribute( - element.getAttribute(prefix + "-user-id"), - user["@id"] + //- Allow to set data-src to a children sib-form + if (sibDisplay.getAttribute(prefix + "-bind-resources")) { + let form = sibDisplay.querySelector( + sibDisplay.getAttribute(prefix + "-bind-resources") + " sib-form" + ); + if (form) { + form.setAttribute( + "data-src", + sibDisplay.component.resourceId.replace("members/", "") ); } - - //- Allow to set data-src to a children sib-form - if (element.getAttribute(prefix + "-bind-resources")) { - let form = element.querySelector( - element.getAttribute(prefix + "-bind-resources") + " sib-form" - ); - if (form) { - form.setAttribute( - "data-src", - element.component.resourceId.replace("members/", "") - ); - } - } - - //- Allow to put user on a targetted search field - if (element.getAttribute(prefix + "-bind-user2input")) { - element.querySelector( - element.getAttribute(prefix + "-bind-user2input") - ).value = user["@id"]; - } - - //- In case your sib-display use a multiple, you have to target sub-sib-display auto-generated - if (element.getAttribute(prefix + "-widgets-multiple") !== null) { - element.querySelectorAll("div > sib-display").forEach(el => { - el.setAttribute(prefix + "-widgets", ""); - }); - } } - //- This function is hooked every time a sib-something with prefix+"-widgets" is populated - element.querySelectorAll("[" + prefix + "-widgets]").forEach(elementChild => { - elementChild.addEventListener("populate", () => { - recursiveAdaptWidgets(prefix, elementChild, user); + //- Allow to put user on a targetted search field + if (sibDisplay.getAttribute(prefix + "-bind-user2input")) { + sibDisplay.querySelector( + sibDisplay.getAttribute(prefix + "-bind-user2input") + ).value = user["@id"]; + } +} + +function recursiveAdaptWidgets(prefix, element, user) { + + element.addEventListener("populate", () => { + + //- This function is a workaround for the currently unworking populate + //- Feel free to see examples on page-circles- + element.querySelectorAll("[" + prefix + "-user-id]").forEach(el => { + el.setAttribute(el.getAttribute(prefix + "-user-id"), user["@id"]); + }); + applyAdapt(prefix, element, user); + + document.querySelectorAll('sib-display, sib-form').forEach(sibDisplay => { + applyAdapt(prefix, sibDisplay, user); }); }); } @@ -125,6 +120,7 @@ async function refreshResource(event) { if(resourceId.includes('circle') && user != null) { let userId = user['@id']; refreshSibDisplays(userId + "circles/"); + refreshSibDisplays(resourceId.split('/').slice(0,4).join('/')+'/joinable/'); } //clear cache on this resource @@ -218,10 +214,12 @@ document.addEventListener("DOMContentLoaded", function(event) { .forEach(el => (el.style.visibility = "visible")); // Hide login button if already logged document - .querySelector('button[role="log in"]') + .querySelector('.loggedIn') .setAttribute("style", "display:none !important"); - // Set current user id on set-user-id of sib-display - recursiveAdaptWidgets("hd-inherit", document, user); + document.querySelectorAll('sib-display, sib-form').forEach(element => { + // Set current user id on set-user-id of sib-display + recursiveAdaptWidgets("hd-inherit", element, user); + }); for (leaveBtn of document.querySelectorAll( "admin-circle-leave > sib-ac-checker:not([hidden])" )) { @@ -230,6 +228,8 @@ document.addEventListener("DOMContentLoaded", function(event) { "display:none !important" ); // Hide Join button } + } else { + document.querySelector('sib-auth').login(); } }) .catch(error => console.log(error)); diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 850e1da..b330266 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -56,10 +56,6 @@ } } - .notLoggedIn { - visibility: hidden; - } - sib-notifications { @include breakpoint(sm) { diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 4aae4ef..32b1174 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -35,6 +35,10 @@ $breakpoints: (phone: 480px, backface-visibility: hidden; /*will-change: overflow;*/ } + + .notLoggedIn { + visibility: hidden; + } } /* Add scrollbar to the left and right menu, and to the content */ @@ -471,7 +475,7 @@ a, } } - &.test { + &.flex { display: flex; } diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 8ffd616..c1a38a8 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -29,7 +29,7 @@ display: flex; flex-direction: row-reverse; font-weight: bold; - padding: 1.6rem; + padding: 1.2rem; &[active] { background-color: $color-46-100-67; @@ -97,10 +97,9 @@ .project-tab>div>sib-display>div:nth-child(1) { sib-set-default[name='project'] { - padding: 1rem 1rem 1rem 3.2rem; .project-customer, - .project-name { + .project-name>div { display: block; overflow: hidden; text-overflow: ellipsis; @@ -113,6 +112,7 @@ } .project-name { + display: block; padding-left: 14px; width: calc(150px - 10px); /* 10px = padding of the sib-set-default = better alignment */ @@ -126,7 +126,7 @@ /* End of specific styles of "Projects" tab */ >sib-display.nosub>div>sib-display>div { - padding: 1rem 1rem 1rem 3.2rem; + padding: 1rem 1rem 1rem 3rem; } sib-display>div { @@ -145,8 +145,9 @@ >div { color: $color-244-10-70; cursor: pointer; - >menu-circle-fix-url>sib-display>div { - padding: 1rem 1rem 1rem 3.2rem; + >menu-fix-url-circle>sib-display>div, + >menu-fix-url-project>sib-display>div { + padding: 1rem 1rem 1rem 3rem; } } @@ -156,7 +157,8 @@ } &>sib-display[active]>div, - &>sib-display>div>menu-circle-fix-url>sib-display[active]>div { + &>sib-display>div>menu-fix-url-circle>sib-display[active]>div, + &>sib-display>div>menu-fix-url-project>sib-display[active]>div { background-color: $color-46-100-67; color: $color-233-18-29; font-weight: bold; @@ -164,11 +166,13 @@ } &.menu-notification { - > sib-display > div > sib-display > div > menu-circle-fix-url { + > sib-display > div > sib-display > div > menu-fix-url-circle, + > sib-display > div > sib-display > div > menu-fix-url-project { flex: 1; } > sib-display > div > sib-display > div, - > sib-display > div > sib-display > div > menu-circle-fix-url > sib-display > div { + > sib-display > div > sib-display > div > menu-fix-url-circle > sib-display > div, + > sib-display > div > sib-display > div > menu-fix-url-project > sib-display > div { display: flex; sib-display-div { flex: 3; diff --git a/src/styles/layout/events/_index.scss b/src/styles/layout/events/_index.scss index a28b32f..be4ff7d 100644 --- a/src/styles/layout/events/_index.scss +++ b/src/styles/layout/events/_index.scss @@ -1 +1 @@ -@import 'events'; \ No newline at end of file +@import 'events.scss'; \ No newline at end of file diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 73a75c3..3b38a7e 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -1,7 +1,3 @@ -$color-203-87-19: hsl(203, 87.8%, 19.2%); -$color-357-67-45: hsl(357,67.5%,45.9%); -$color-212-4-50: hsl(212.7,4.3%,50%); -$color-0-0-22: hsl(0,0%,22.7%); #events { width: 100%; font-family: "Facit"; diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index ab8f6cb..f212645 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -163,6 +163,14 @@ span { font-weight: bold; + + &.link-color { + color: $color-244-73-62; + } + + &.norm-weight { + font-weight: normal; + } } } } diff --git a/src/templates/hd-customer.pug b/src/templates/hd-customer.pug index 51563c2..813aa81 100644 --- a/src/templates/hd-customer.pug +++ b/src/templates/hd-customer.pug @@ -12,6 +12,6 @@ sib-widget(name='hd-customer') ul li #[span(class='mdi-account-outline') ${await value.firstName} ${await value.lastName ? await value.lastName : ""}]${await value.role ? `, ${await value.role}` : ""} li - span(class='mdi-email-outline') + span(class='link-color norm-weight mdi-email-outline') a(href='mailto:${await value.email}') ${await value.email} - span ${await value.phone ? `