From 4e2fccdb604e87020f7f02e8c499aa241b2bc508 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 27 May 2020 06:44:54 +0000 Subject: [PATCH] feature: my profile --- README.md | 6 ++- styling.md => STYLING.md | 0 client.sample.happy-dev.css | 35 ++++++++++++++ docker/config.json | 14 ++++-- src/dependencies.pug | 16 +++---- src/header.pug | 6 +-- src/index.pug | 10 ++-- src/menu-left.pug | 32 ++++++------- src/page-profile.pug | 5 ++ src/scripts/reactive-store.js | 53 +++++++--------------- src/styles/base/main.scss | 3 +- src/styles/base/menu-left.scss | 25 +++++----- src/styles/components/sidebar.scss | 5 +- src/styles/layout/dashboard/dashboard.scss | 4 ++ 14 files changed, 126 insertions(+), 88 deletions(-) rename styling.md => STYLING.md (100%) create mode 100644 src/page-profile.pug diff --git a/README.md b/README.md index 6cbf8f0..b002528 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,9 @@ On `config.json`: "xmpp": "https://jabber.happy-dev.fr/http-bind/", "authority": "http://localhost:8000/", "endpoints": { - "users": "http://server.url/users/" + "skills": "http://server.url/skills/", + "users": "http://server.url/users/", + "uploads": "http://server.url/upload/" } } ``` @@ -155,6 +157,8 @@ On `config.json`: } ``` +A [sample fixture](https://git.startinblox.com/djangoldp-packages/djangoldp-dashboard/blob/master/djangoldp_dashboard/fixtures/sample.json) can be loaded with `./manage.py loaddata path/to/djangoldp_dashboard/fixtures/sample.json`. + ### Events Events allow to create and manage instance-level evenement. To activate them, you need: diff --git a/styling.md b/STYLING.md similarity index 100% rename from styling.md rename to STYLING.md diff --git a/client.sample.happy-dev.css b/client.sample.happy-dev.css index 11cf69a..dcf85e8 100644 --- a/client.sample.happy-dev.css +++ b/client.sample.happy-dev.css @@ -108,6 +108,23 @@ --color-chat-grey-1: var(--color-grey-4); --color-chat-grey-2: var(--color-grey-6); --color-chat-grey-3: var(--color-grey-10); + + /* Directory */ + --color-directory-grey-4: #7A7F85; + --color-directory-grey-5: #F0F3F6; + + --color-directory-avatar-background: #E4E8ED; + --color-directory-back-link: #36383B; + --color-directory-border: #DAE2F3; + --color-directory-content-header-border: #DAE2F3; + --color-directory-h1: var(--color-complementary-darken); + --color-directory-list-icon: var(--color-primary); + --color-directory-text: var(--color-directory-grey-4); + + --color-directory-form-input: #EDF1FA; + --color-directory-form-input-text: var(--color-directory-grey-4); + --color-directory-form-input-active: var(--color-complementary); + --color-directory-form-select-icon: var(--color-complementary); } /* Button to edit a channel or a project (in project-profile) */ @@ -174,3 +191,21 @@ #admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover input { color: var(--color-complementary); } + + +/* Directory - my profile*/ + +/* Button to update the avatar */ +#sib-picture-browse, +#sib-picture-remove { + background-color: var(--color-white); + border: 1px solid var(--color-complementary); + color: var(--color-complementary); +} + +#sib-picture-browse:hover, +#sib-picture-remove:hover { + background-color: var(--color-complementary); + border: 1px solid var(--color-complementary); + color: var(--color-white); +} diff --git a/docker/config.json b/docker/config.json index 4000c0e..0830a23 100644 --- a/docker/config.json +++ b/docker/config.json @@ -2,17 +2,23 @@ "xmpp": "https://jabber.happy-dev.fr/http-bind/", "authority": "$SERVER", "authorityName": "djangoldp-server-name", + "publicDirectory": true, "endpoints": { "get": { "circles": "$SERVER/circles/", + "dashboards": "$SERVER/dashboards/", "groups": "$SERVER/groups/", - "users": "$SERVER/users/" + "users": "$SERVER/users/", + "skills": "$SERVER/skills/", + "uploads": "$SERVER/upload/" }, "post": { "circles": "$SERVER/circles/", + "dashboards": "$SERVER/dashboards/", "groups": "$SERVER/groups/", - "users": "$SERVER/users/" + "users": "$SERVER/users/", + "skills": "$SERVER/skills/", + "uploads": "$SERVER/upload/" } - }, - "analytics": [] + } } diff --git a/src/dependencies.pug b/src/dependencies.pug index 46c0ab6..5de986a 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -8,28 +8,28 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8" defer) //- script(type="module" src="/lib/sib-oidc/index.js" defer) script(type="module" src="https://unpkg.com/@startinblox/router@0.7" defer) -//- script(type="module" src="/lib/sib-router/src/index.js" defer) + //- script(type="module" src="/lib/sib-router/src/index.js" defer) script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.3" defer) -//- script(type="module" src="/lib/sib-notifications/index.js" defer) + //- script(type="module" src="/lib/sib-notifications/index.js" defer) if endpoints.events || (endpoints.get && endpoints.get.events) script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1" defer) -//- script(type="module" src="/lib/sib-event/sib-event.js" defer) + //- script(type="module" src="/lib/sib-event/sib-event.js" defer) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3" defer) script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3" defer) -//- script(type="module" src="/lib/sib-job-board/sib-job-board.js" defer) -//- script(type="module" src="/lib/sib-conversation/sib-conversation.js" defer) + //- script(type="module" src="/lib/sib-job-board/sib-job-board.js" defer) + //- script(type="module" src="/lib/sib-conversation/sib-conversation.js" defer) -if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) +if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3" defer) -//- script(type="module" src="/lib/sib-directory/sib-directory.js" defer) + //- script(type="module" src="/lib/sib-directory/index.js" defer) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.1" defer) -//- script(type="module" src="/lib/sib-dashboard/sib-dashboard.js" defer) + //- script(type="module" src="/lib/sib-dashboard/sib-dashboard.js" defer) if endpoints.users || (endpoints.get && endpoints.get.users) script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.6" defer) diff --git a/src/header.pug b/src/header.pug index 55d35a8..7184052 100644 --- a/src/header.pug +++ b/src/header.pug @@ -24,11 +24,9 @@ details#user-controls.notLoggedIn #user-controls__panel nav(role="user's functionalities menu") ul - if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) li - sib-link(next='my-profile') Mon profil - //-li - sib-link(next='user-settings') Settings + sib-link(next='profile') Mon profil li sib-link(next='admin') Administration button(role='log out' onclick="document.querySelector('sib-auth').logout();") Se déconnecter diff --git a/src/index.pug b/src/index.pug index 5ae77e6..dd21d1d 100644 --- a/src/index.pug +++ b/src/index.pug @@ -22,15 +22,15 @@ html(lang="en") div#viewport if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) - #dashboard(hidden).no-sidebar + #dashboard(hidden).no-sidebar.with-padding include page-dashboard.pug if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) - #members(hidden).no-sidebar + #members(hidden).no-sidebar.with-padding include page-directory.pug if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) - #job-offers(hidden).no-sidebar + #job-offers(hidden).no-sidebar.with-padding include page-job-offers.pug if endpoints.projects || (endpoints.get && endpoints.get.projects) @@ -51,6 +51,10 @@ html(lang="en") #admin(hidden).with-sidebar include page-admin.pug + + if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users)) + #profile(hidden).no-sidebar + include page-profile.pug if analytics each provider in analytics diff --git a/src/menu-left.pug b/src/menu-left.pug index 3c82383..272ec08 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -71,12 +71,12 @@ nav#main__menu.jsLeftMenu div.divider if endpoints.projects || (endpoints.get && endpoints.get.projects) div - div.menu - div.menu-chevron - sib-link(next='admin-project-list') - div.menu-icon.icon-arrow-right - div.menu-label Projets - div.menu-icon.icon-folder-alt + sib-link(next='admin-project-list') + div.menu + div.menu-chevron + div.menu-icon.icon-arrow-right-circle + div.menu-label Projets + 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( @@ -84,7 +84,7 @@ nav#main__menu.jsLeftMenu nested-field='projects' fields='project' empty-widget='hubl-create' - empty-value='project' + empty-value='projet' widget-project='hubl-menu-fix-url-project' order-by='project.customer.name' next='project' @@ -92,12 +92,12 @@ nav#main__menu.jsLeftMenu div.divider if endpoints.circles || (endpoints.get && endpoints.get.circles) div - div.menu - div.menu-chevron - sib-link(next='admin-circle-list') - div.menu-icon.icon-arrow-right - div.menu-label Canaux - div.menu-icon.icon-folder-alt + sib-link(next='admin-circle-list') + div.menu + div.menu-chevron + div.menu-icon.icon-arrow-right-circle + div.menu-label Canaux + div.menu-icon.icon-folder-alt sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden) div.sub-menu.menu-notification sib-display( @@ -105,7 +105,7 @@ nav#main__menu.jsLeftMenu nested-field='circles' fields='circle' empty-widget='hubl-create' - empty-value='circle' + empty-value='cercle' widget-circle='hubl-menu-fix-url-circle' order-by='circle.name' next='circle' @@ -137,6 +137,4 @@ nav#main__menu.jsLeftMenu div.divider sib-route(name='admin', hidden) - //- div.divider - //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') - + sib-route.menu(name='profile', hidden) diff --git a/src/page-profile.pug b/src/page-profile.pug new file mode 100644 index 0000000..79702ef --- /dev/null +++ b/src/page-profile.pug @@ -0,0 +1,5 @@ +sib-profile( + bind-user + upload-src=`${endpoints.uploads || endpoints.post.uploads}` + range-skills=`${endpoints.skills || endpoints.get.skills}` +) diff --git a/src/scripts/reactive-store.js b/src/scripts/reactive-store.js index 3dc54f7..a8bd608 100644 --- a/src/scripts/reactive-store.js +++ b/src/scripts/reactive-store.js @@ -3,7 +3,7 @@ function refreshSibDisplays(resourceId, clearCache = true) { let cacheCleared = false; Array.from(document.querySelectorAll("sib-display")) - .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource + .filter(sibDisplay => sibDisplay.component?sibDisplay.component.resourceId == resourceId:false) // keep only elements with resource == edited resource .forEach(async (e) => { //clear cache if we were unable to before if ((clearCache && !cacheCleared) && e.component.resource != null) { @@ -25,6 +25,13 @@ async function updateSources(resource) { refreshSibDisplays(res.join('/'),cacheCleared); } +async function resToChildrens(resource) { + resource = resource.getResourceData(); + refreshSibDisplays(resource["http://happy-dev.fr/owl/#user"]["@id"]); + refreshSibDisplays(resource["http://happy-dev.fr/owl/#project"]["@id"] + "members/"); + refreshSibDisplays(resource["http://happy-dev.fr/owl/#circle"]["@id"] + "members/"); +} + //auxiliary function updates displays using a given resource //NOTE: this is a temporary workaround and should be replaced by a reactive storage //https://git.startinblox.com/framework/sib-core/issues/524 @@ -33,42 +40,9 @@ async function refreshResource(event) { // if of the edited resource || id of the container of the created resource const resourceId = event.detail.resource["@id"] || event.target.dataset.src; updateSources(resourceId, event); - let resource; - try { - resource = document - .querySelector('[data-src="' + resourceId + '"]') - .component.resource.getResourceData(); - } catch (e) { - try { - resource = document - .querySelector('[data-src="' + resourceId.replace('circle-members','circles').split('/').slice(0, 4).join('/') + '/"]') - .component.resource.getResourceData(); - } catch (e) { - try { - resource = document - .querySelector('[nested-field="' + resourceId.split('/').slice(3, 4).join('').replace('circle-members','circles') + '"]') - .component.resource.getResourceData(); - } catch (e) { - resource = undefined; - } - } - } - - if(resource) { - //special case: refresh circles/X/ from circle-members/Y/ - let partnerId = null; - if (resourceId.includes("circle-members")) { - partnerId = resource["http://happy-dev.fr/owl/#circle"]["@id"]; - } else if (resourceId.includes("project-members")) { - partnerId = resource["http://happy-dev.fr/owl/#project"]["@id"]; - } - //refresh all resources using the partner ID - if (partnerId != null) { - refreshSibDisplays(partnerId); - refreshSibDisplays(partnerId + "members/"); - } - } - + [...new Set(Array.from(document.querySelectorAll('[data-src="' + resourceId + '"]')).map(e=>e.component?e.component.resource:null).filter(e=>e!=null))].forEach(resToChildrens); + [...new Set(Array.from(document.querySelectorAll('[data-src="' + resourceId.replace('circle-members','circles').split('/').slice(0, 4).join('/') + '/"]')).map(e=>e.component?e.component.resource:null).filter(e=>e!=null))].forEach(resToChildrens); + [...new Set(Array.from(document.querySelectorAll('[nested-field="' + resourceId.split('/').slice(3, 4).join('').replace('circle-members','circles') + '"]')).map(e=>e.component?e.component.resource:null).filter(e=>e!=null))].forEach(resToChildrens); //special cases updating users/X/circles for the left-side-menu (leaving or joining circle) let user = await document.querySelector('sib-auth').getUser(); @@ -82,6 +56,11 @@ async function refreshResource(event) { if(resourceId.includes('users')) { refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/users/'); refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/sources/users/'); + refreshSibDisplays(resourceId + 'profile/'); + refreshSibDisplays(resourceId + 'account/'); + refreshSibDisplays(resourceId + 'chatProfile/'); + refreshSibDisplays(resourceId + 'skills/'); + refreshSibDisplays(resourceId + 'account/'); } //clear cache on this resource diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 403483d..29f3946 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -18,6 +18,7 @@ main { display: flex; + z-index: 0; overflow: hidden; height: calc(100vh - 83px); /* 83px = height of the header */ position: relative; @@ -153,7 +154,7 @@ h5 { } %padding-main { - padding: 5rem; + padding: 1.3rem; } %padding-block { diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 3470d71..a4b5459 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -137,6 +137,7 @@ sib-display.nosub>nav { text-align: center; + overflow: hidden; display: grid; grid-template-columns: auto 50% auto; grid-template-areas: "left middle right"; @@ -247,23 +248,23 @@ &.jsLeftMenu { - @include breakpoint(sm) { - display: none; + display: none; + + @include breakpoint(lg) { + display: block; } } &.jsLeftMenu[open] { - @include breakpoint(sm) { - display: block; - bottom: 0; - box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); - min-width: 80%; - position: fixed; - right: 0; - top: 0; - z-index: 1; - } + display: block; + bottom: 0; + box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); + min-width: 80%; + position: fixed; + right: 0; + top: 0; + z-index: 1; } } diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 940a574..682f3c7 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -1,6 +1,9 @@ .no-sidebar { flex: 1; - @extend %padding-main; + + &.with-padding { + @extend %padding-main; + } } .with-sidebar { diff --git a/src/styles/layout/dashboard/dashboard.scss b/src/styles/layout/dashboard/dashboard.scss index f3ffc7a..0718af8 100644 --- a/src/styles/layout/dashboard/dashboard.scss +++ b/src/styles/layout/dashboard/dashboard.scss @@ -1,3 +1,7 @@ .dashboard>div { margin: 0 2px; } + +sib-dashboard .icon::before { + width: 41px; +} \ No newline at end of file