From d4279b0c7a36b2ac58bbdee990731ad86f1ef753 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 25 Oct 2019 15:35:14 +0200 Subject: [PATCH 1/8] update: Cleanup circle information --- src/page-circle-edit.pug | 10 +- src/page-circle-profile.pug | 101 ++++++-- src/page-project-profile.pug | 2 +- src/scripts/index.js | 17 ++ src/styles/base/form.scss | 27 +- .../layout/circle-profile/circle-edit.scss | 237 +++++++++--------- .../layout/circle-profile/circle-profile.scss | 8 +- .../project-profile/project-profile.scss | 2 +- src/templates/hd-circle-team.pug | 2 +- src/templates/template-team.pug | 2 +- 10 files changed, 250 insertions(+), 158 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 1121969..d7d44de 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 ${await value.name} + template ${value.name} sib-widget(name='team-template-edit') template @@ -16,20 +16,20 @@ div.content-box__info multiple-groups='' widget-groups='hd-user-groups' ) - + sib-ac-checker( permission="acl:Delete" - data-src="${await value['@id']}" + data-src="${value['@id']}" ) sib-delete( - data-src="${await value['@id']}" + data-src="${value['@id']}" data-label='Leave the circle' ) //- Only to show the table grid sib-ac-checker( no-permission="acl:Delete" - data-src="${await value['@id']}" + data-src="${value['@id']}" ) sib-link(class="backlink", bind-resources, next='circle-profile') Back diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index ae12929..33665ee 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -7,49 +7,96 @@ include templates/hd-circle-team.pug div.content-box__header.with-edit - sib-display( - bind-resources - fields='name' + sib-ac-checker(permission='acl:Read', bind-resources) + sib-display( + bind-resources + fields='name' - class-name='name' - ) - - sib-link(class="editlink", next="circle-edit" bind-resources) + class-name='name' + ) div.content-box__info - sib-display.block( - bind-resources - fields='label-description, description, entitled(title, creationDate)' + sib-ac-checker(permission='acl:Read', bind-resources) + sib-ac-checker(permission='acl:Write', bind-resources) + sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members - value-label-description='Description: ' + sib-display.block( + bind-resources + fields='creationDateSet(title, creationDate), label-description, description' - default-description='No description available.' + value-label-description='Description: ' - value-title='Creation date:' - ) + default-description='No description available.' - sib-ac-checker(permission='acl:Write' bind-resources, nested-field='team') + value-title='Creation date:' + ) + + + h2(name="label-team") Members: + + //- TODO: sib-ac-checker unworking - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/517 + //- sib-ac-checker(permission='acl:Write', bind-resources, nested-field='team') sib-form.block.team-form( bind-resources - fields='team' - range-team=`${endpoints.users}` - partial='' + nested-field='members' + fields='user' + range-user=`${endpoints.users}` - class-team='team form-label is-dark' - label-team='Members:' - widget-team='sib-form-auto-completion' + class-user='team form-label is-dark' + label-user='' + widget-user='sib-form-auto-completion' submit-button='Add a member' ) - sib-display.block( - bind-resources - fields='team' + sib-display.block( + bind-resources + fields='team' - multiple-team='' - widget-team='team-template' - ) + multiple-team='' + widget-team='circle-team-template' + ) + + sib-ac-checker(permission='acl:Delete', bind-resources) + sib-delete( + bind-resources + data-label='Delete Circle' + class='right-btn reversed-btn' + ) + + sib-widget(name='join-leave-circle-button') + template + sib-ac-checker( + permission="acl:Delete" + data-src="${value['@id']}" + ) + sib-delete( + data-src="${value['@id']}" + data-label='Leave circle' + ) + + sib-display( + bind-resources + fields='members' + + multiple-members='' + widget-members='join-leave-circle-button' + ) + + sib-form.block.team-form( + bind-resources + nested-field='members' + fields='user' + label-user='' + range-user=`${endpoints.users}` + widget-user='sib-form-dropdown' + + set-user-id-select="user" + + submit-button='Join Circle' + ) + #circle-edit(hidden) include page-circle-edit.pug \ No newline at end of file diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index 9cbbb5f..5f75c70 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -25,7 +25,7 @@ widget-captain='captain-template', value-label-team='TEAM:', - widget-members='team-template', + widget-members='project-team-template', multiple-members, bind-resources diff --git a/src/scripts/index.js b/src/scripts/index.js index 68240af..f587c65 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -43,7 +43,24 @@ document.addEventListener('DOMContentLoaded', function (event) { for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) { sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']); } + + for(sibForm of document.querySelectorAll('[set-user-id-select]')) { + sibForm.addEventListener('populate', () => { + document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'none'; + if(document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label="Leave circle"]').length == 0) { + document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'inline-block'; + } + // BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521 + for(select of sibForm.querySelectorAll('select[name="'+sibForm.getAttribute('set-user-id-select')+'"]')) { + for(option of select.options) { + option.selected = (option.getAttribute('value') == '{"@id": "'+user['@id']+'"}'); + } + } + }); + } } }).catch(error => console.log(error)); + + }); \ No newline at end of file diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 650e85f..96a97b0 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -86,7 +86,7 @@ } } - input[type='submit'] { + input[type='submit'], .right-btn, sib-delete.right-btn button { background-color: $color-233-18-29; border: none; border-radius: 100em; @@ -100,6 +100,31 @@ text-transform: uppercase; } + .reversed-btn, sib-delete.reversed-btn button { + background-color: transparent; + border: 1px solid #6157e5; + color: #6157e5; + } + + sib-delete.right-btn { + border: none; + border-radius: 0; + margin: 0; + padding: 0; + } + + sib-form[set-user-id-select] { + + input[type="submit"] { + margin-left: 0; + margin-top: 0; + } + + select { + display: none; + } + } + /* CLASSES Peut-être à sortir de .content-box */ .block.team-form>form { /* circle-profile */ diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss index 1c3fe92..f1b252c 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -1,138 +1,135 @@ -h2 { - font-size: 1.7rem; - font-weight: bold; - text-transform: uppercase; -} +#circle-edit { -.table-header { - background: $color-228-25-79; - color: white; - display: flex; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - text-align: center; - - >*{ - border-right: 1px solid $color-228-25-79; - flex: 1; - padding: 1rem; - width: 50%; - } - - >*:first-of-type { - border-right: 1px solid white; - } -} - -.table-body div team-template-edit { - display: flex; - justify-content: space-between; - - >* { - border-bottom: 1px solid $color-228-25-79; - flex: 1; - width: 50%; - } - - >*:nth-child(odd) { - border-left: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - padding: 0 2.2rem; - } - - >*:nth-child(even) { + .table-header { + background: $color-228-25-79; + color: white; display: flex; - border-right: 1px solid $color-228-25-79; - justify-content: flex-end; - padding: 2.7rem 2.2rem; - } -} + font-size: 1.6rem; + font-weight: 600; + justify-content: space-around; + text-align: center; -.member-select.color { - - .ss-main { - color: $color-233-18-29; - } -} - -sib-multiple[widget='team-template-edit'] { - - label { - display: none; - } - - >div>team-template-edit>sib-display>div { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - - >[name='account.picture'] { - align-items: center; - align-self: center; - background-color: $color-213-20-91; - border-radius: 50%; - display: flex; - grid-column: 1 / span 1; - grid-row: 1 / span 2; - height: 7vh; - justify-content: center; - overflow: hidden; - position: relative; - width: 7vh; - - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } + >*{ + border-right: 1px solid $color-228-25-79; + flex: 1; + padding: 1rem; + width: 50%; } - >[name='sup'] { - align-self: end; + >*:first-of-type { + border-right: 1px solid white; + } + } + + .table-body div team-template-edit { + display: flex; + justify-content: space-between; + + >* { + border-bottom: 1px solid $color-228-25-79; + flex: 1; + width: 50%; + } + + >*:nth-child(odd) { + border-left: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + padding: 0 2.2rem; + } + + >*:nth-child(even) { display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + border-right: 1px solid $color-228-25-79; + justify-content: flex-end; + padding: 2.7rem 2.2rem; + } + } - [name='name'] { - font-weight: 600; - } + .member-select.color { - sib-multiple { + .ss-main { + color: $color-233-18-29; + } + } + + sib-multiple[widget='team-template-edit'] { + + label { + display: none; + } + + >div>team-template-edit>sib-display>div { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + + >[name='account.picture'] { + align-items: center; + align-self: center; + background-color: $color-213-20-91; + border-radius: 50%; display: flex; - margin-left: 1rem; + grid-column: 1 / span 1; + grid-row: 1 / span 2; + height: 7vh; + justify-content: center; + overflow: hidden; + position: relative; + width: 7vh; - [name='groups'] { - @extend %user-role; + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + + object { + height: 45%; + width: 45%; } } - } - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; - - >[name$='profile.city']:not(:empty) { - @include mdi('atom'); - align-items: center; + >[name='sup'] { + align-self: end; display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; + [name='name'] { + font-weight: 600; + } + + sib-multiple { + display: flex; + margin-left: 1rem; + + [name='groups'] { + @extend %user-role; + } + } + } + + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; + + >[name$='profile.city']:not(:empty) { + @include mdi('atom'); + align-items: center; + display: flex; + + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; + } } } } diff --git a/src/styles/layout/circle-profile/circle-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss index 834985a..b77392c 100644 --- a/src/styles/layout/circle-profile/circle-profile.scss +++ b/src/styles/layout/circle-profile/circle-profile.scss @@ -1,5 +1,11 @@ #circle-information, #circle-edit { + h2 { + font-size: 1.7rem; + font-weight: bold; + text-transform: uppercase; + } + .content-box__info { @extend %padding-block; @@ -58,7 +64,7 @@ display: none; } - >div>team-template[name='team']>sib-display>div { + >div>circle-team-template[name='team']>sib-display>div { display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index 1a8b0f2..dab9962 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -193,7 +193,7 @@ } } - team-template[name='members'], captain-template[name='captain'] { + project-team-template[name='members'], captain-template[name='captain'] { display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index 62f7b37..7db73b7 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -1,6 +1,6 @@ include hd-user-avatar.pug -sib-widget(name='team-template') +sib-widget(name='circle-team-template') template sib-display( data-src="${await value}" diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug index 9a89ada..eeecc90 100644 --- a/src/templates/template-team.pug +++ b/src/templates/template-team.pug @@ -1,6 +1,6 @@ include hd-user-avatar.pug -sib-widget(name='team-template') +sib-widget(name='project-team-template') template sib-display.project-profile-user-avatar( data-src="${value.user ? value.user['@id'] : ''}" From 09f35bd3c0a66cbe939eb1b98633853a3034a9c1 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 25 Oct 2019 19:15:45 +0200 Subject: [PATCH 2/8] update: add administration & circle creation --- src/index.pug | 3 + src/menu-left.pug | 11 +- src/page-admin-circles-create.pug | 19 ++ src/page-admin-circles.pug | 56 +++++ src/page-admin-projects.pug | 10 + src/page-admin-users.pug | 18 ++ src/page-admin.pug | 21 ++ src/page-circle-create.pug | 26 -- src/page-user-panel.pug | 4 +- src/scripts/index.js | 9 +- src/styles/layout/circle/circle-edit.scss | 293 +++++++++++----------- 11 files changed, 285 insertions(+), 185 deletions(-) create mode 100644 src/page-admin-circles-create.pug create mode 100644 src/page-admin-circles.pug create mode 100644 src/page-admin-projects.pug create mode 100644 src/page-admin-users.pug create mode 100644 src/page-admin.pug delete mode 100644 src/page-circle-create.pug diff --git a/src/index.pug b/src/index.pug index cf0f8d0..ab13cbd 100644 --- a/src/index.pug +++ b/src/index.pug @@ -37,6 +37,9 @@ html(lang="en") #messages(hidden).with-sidebar include page-messages.pug + + #admin(hidden).with-sidebar + include page-admin.pug //- #my-profile(hidden).no-sidebar //- include page-user-profile.pug diff --git a/src/menu-left.pug b/src/menu-left.pug index 1213473..bff3dd5 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -15,8 +15,8 @@ nav#main__menu //- sib-route.menu(name='job-offers', rdf-type='hd:joboffer') //- div.menu-label Job offers //- div.menu-icon.icon-briefcase - //- sib-route(hidden, name='job-offer-create') - //- sib-route(hidden, name='job-offer-edit', use-id) + //- sib-route(name='job-offer-create') + //- sib-route(name='job-offer-edit', use-id) //- div.divider //- div.menu-wrapper //- div.menu @@ -24,7 +24,7 @@ nav#main__menu //- div.menu-icon.icon-arrow-up //- div.menu-label Projects //- div.menu-icon.icon-folder-alt - //- sib-route(hidden,name='project', id-prefix=`${endpoints.projects}`, rdf-type='hd:project', use-id='') + //- sib-route(name='project', rdf-type='hd:project', use-id='') //- div.sub-menu.menu-notification //- sib-display( //- data-src=`${endpoints.projects}` @@ -46,7 +46,7 @@ nav#main__menu div.menu-icon.icon-arrow-up div.menu-label Circles div.menu-icon.icon-folder-alt - sib-route(hidden,name='circle', id-prefix=`${endpoints.circles}`, rdf-type='hd:circle', use-id='') + sib-route(name='circle', rdf-type='hd:circle', use-id='') div.sub-menu.menu-notification sib-display( data-src=`${endpoints.circles}` @@ -70,7 +70,7 @@ nav#main__menu div.menu-icon.icon-arrow-up div.menu-label Chat div.menu-icon.icon-envelope-letter - sib-route(hidden, name='messages', id-prefix=`${endpoints.users}`, rdf-type='foaf:user', use-id='') + sib-route(name='messages', rdf-type='foaf:user', use-id='') div.sub-menu.menu-notification sib-display( data-src=`${endpoints.users}` @@ -82,6 +82,7 @@ nav#main__menu next='messages' ) + sib-route(name='admin') //- div.divider //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') diff --git a/src/page-admin-circles-create.pug b/src/page-admin-circles-create.pug new file mode 100644 index 0000000..6cba7b2 --- /dev/null +++ b/src/page-admin-circles-create.pug @@ -0,0 +1,19 @@ +div.content-box__info + sib-link(class="backlink", next='admin-circle-list') Back + + h1 New circle + + p.center Here you can create a new circle according to your interests, what you want to share, etc. + + sib-form.block( + data-src=`${endpoints.circles}` + + fields='name, description' + + class-name='form-label is-light is-full-width' + class-description='form-label is-light is-full-width' + + widget-description='sib-form-textarea' + + submit-button='Save' + ) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug new file mode 100644 index 0000000..635a760 --- /dev/null +++ b/src/page-admin-circles.pug @@ -0,0 +1,56 @@ +.content-box.full-width.with-form + sib-router(default-route='admin-circle-list') + sib-route(name='admin-circle-list') + sib-route(name='admin-circle-create') + + div.content-box__header + h2 Administration + + + #admin-circle-list(hidden) + sib-widget(name="admin-circle-leave") + template + sib-ac-checker( + permission="acl:Delete" + data-src="${value['@id']}" + ) + sib-delete( + data-src="${value['@id']}" + data-label='Leave' + ) + + sib-widget(name="admin-circle-join") + template + sib-form( + data-src="${src}" + nested-field='members' + fields='user' + label-user='' + range-user=`${endpoints.users}` + widget-user='sib-form-dropdown' + + set-user-id-select="user" + + submit-button='Join' + ) + + + div.content-box__info + sib-link(class="right-btn", next="admin-circle-create") Create a new circle + h3 Circles + sib-display.block( + data-src=`${endpoints.circles}` + fields="name, owner.name, buttons(members, button)" + search-fields="name" + search-label-name="Search a Circle" + + multiple-groups="" + widget-members="admin-circle-leave" + multiple-members="" + widget-button="admin-circle-join" + action-button="button" + ) + + + #admin-circle-create(hidden) + include page-admin-circles-create.pug \ No newline at end of file diff --git a/src/page-admin-projects.pug b/src/page-admin-projects.pug new file mode 100644 index 0000000..3ce1145 --- /dev/null +++ b/src/page-admin-projects.pug @@ -0,0 +1,10 @@ +.content-box.full-width.with-form + sib-router(default-route='admin-project-list') + sib-route(name='admin-project-list') + sib-route(name='admin-project-create') + + + #admin-project-list(hidden) + + + #admin-project-create(hidden) \ No newline at end of file diff --git a/src/page-admin-users.pug b/src/page-admin-users.pug new file mode 100644 index 0000000..0a7a1fe --- /dev/null +++ b/src/page-admin-users.pug @@ -0,0 +1,18 @@ +.content-box.full-width.with-form + sib-router(default-route='admin-users-list') + sib-route(name='admin-users-list') + sib-route(name='admin-users-create') + + div.content-box__header + h2 Administration + + #admin-users-list(hidden) + div.content-box__info + sib-display.block( + data-src=`${endpoints.users}` + fields="account.picture, name, username, email, groups" + multiple-groups="" + ) + + + #admin-users-create(hidden) diff --git a/src/page-admin.pug b/src/page-admin.pug new file mode 100644 index 0000000..15fdfd1 --- /dev/null +++ b/src/page-admin.pug @@ -0,0 +1,21 @@ +.views-container + #admin-circles(hidden) + include page-admin-circles.pug +//- #admin-users(hidden) +//- include page-admin-users.pug +//- #admin-projects(hidden) +//- include page-admin-projects.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 + sib-route(name='admin-circles') + li + a Circles + //- sib-route(name='admin-projects') + li + a Projects diff --git a/src/page-circle-create.pug b/src/page-circle-create.pug deleted file mode 100644 index 6ad81a1..0000000 --- a/src/page-circle-create.pug +++ /dev/null @@ -1,26 +0,0 @@ -.content-box.with-padding.with-form.full-width - h1 New group - p Here you can create a new group according to your interests, what you want to share, etc. - - sib-form( - data-src=`${endpoints.circles}`, - range-owner=`${endpoints.users}`, - range-team=`${endpoints.users}` - - fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID', - - label-name="Channel's name", - label-description='Description', - label-owner='Owner of this channel', - label-foaf:jabberID='Chatroom id', - label-team='Member(s) of this channel', - - value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".', - value-owner-text='The one who will admin this channel', - value-team-text='Add any members as you want.', - - - widget-description='sib-form-textarea', - widget-jabberRoom='sib-form-checkbox', - ) - //- widget-team='sib-form-multiple-dropdown' diff --git a/src/page-user-panel.pug b/src/page-user-panel.pug index d3491ac..6e6c310 100644 --- a/src/page-user-panel.pug +++ b/src/page-user-panel.pug @@ -4,6 +4,6 @@ nav(role="user's functionalities menu") //- sib-link(next='my-profile') My profile //-li sib-link(next='user-settings') Settings - //-li - sib-link(name='user-admin') Admin + 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 f587c65..edb1ecc 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -46,9 +46,9 @@ document.addEventListener('DOMContentLoaded', function (event) { for(sibForm of document.querySelectorAll('[set-user-id-select]')) { sibForm.addEventListener('populate', () => { - document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'none'; - if(document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label="Leave circle"]').length == 0) { - document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'inline-block'; + document.querySelectorAll('sib-form[submit-button^="Join"]').forEach(el=>el.style.display = 'none'); + if(document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label="^Leave"]').length == 0) { + document.querySelectorAll('sib-form[submit-button^="Join"]').forEach(el=>el.style.display = 'inline-block'); } // BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521 for(select of sibForm.querySelectorAll('select[name="'+sibForm.getAttribute('set-user-id-select')+'"]')) { @@ -58,6 +58,9 @@ document.addEventListener('DOMContentLoaded', function (event) { } }); } + for(leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) { + leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none"; // Hide Join button + } } }).catch(error => console.log(error)); diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 8db982e..972700b 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -1,178 +1,173 @@ #circle-edit { - -.table-header { - background: $color-228-25-79; - color: white; - display: flex; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - text-align: center; - - >*{ - border-right: 1px solid $color-228-25-79; - flex: 1; - padding: 1rem; - width: 50%; - } - - >*:last-of-type { - border-left: 1px solid white; - - @media (max-width: 1220px) { - display: none; - } - } -} - -.table-body div team-template-edit { - display: flex; - justify-content: space-between; - - >* { - border-bottom: 1px solid $color-228-25-79; - flex: 1; - width: 50%; - } - - sib-display { - border-left: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - padding: 0 2.2rem; - } - - sib-ac-checker { - align-items: center; - border-right: 1px solid $color-228-25-79; + .table-header { + background: $color-228-25-79; + color: white; display: flex; - justify-content: flex-end; - padding: 2.7rem 2.2rem; + font-size: 1.6rem; + font-weight: 600; + justify-content: space-around; + text-align: center; - @media (max-width: 1220px) { - display: none; - } + >*{ + border-right: 1px solid $color-228-25-79; + flex: 1; + padding: 1rem; + width: 50%; + } + + >*:last-of-type { + border-left: 1px solid white; + + @media (max-width: 1220px) { + display: none; + } + } } .table-body div team-template-edit { - display: flex; - justify-content: space-between; - - >* { - border-bottom: 1px solid $color-228-25-79; - flex: 1; - width: 50%; - } - - >*:nth-child(odd) { - border-left: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - padding: 0 2.2rem; - } - - >*:nth-child(even) { display: flex; - border-right: 1px solid $color-228-25-79; - justify-content: flex-end; - padding: 2.7rem 2.2rem; - } - } + justify-content: space-between; - .member-select.color { + >* { + border-bottom: 1px solid $color-228-25-79; + flex: 1; + width: 50%; + } - .ss-main { - color: $color-233-18-29; - } - } + sib-display { + border-left: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + padding: 0 2.2rem; + } - sib-multiple[widget='team-template-edit'] { - - label { - display: none; - } - - >div>team-template-edit>sib-display>div { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - - >[name='account.picture'] { + sib-ac-checker { align-items: center; - align-self: center; - background-color: $color-213-20-91; - border-radius: 50%; + border-right: 1px solid $color-228-25-79; display: flex; - grid-column: 1 / span 1; - grid-row: 1 / span 2; - height: 7vh; - justify-content: center; - overflow: hidden; - position: relative; - width: 7vh; + justify-content: flex-end; + padding: 2.7rem 2.2rem; - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } - -<<<<<<< HEAD:src/styles/layout/circle-profile/circle-edit.scss - object { - height: 45%; - width: 45%; - } -======= - [name='name'] { - font-weight: 600; - margin-right: 1rem; ->>>>>>> 81d885730dd7673ee424a72b6f0c663c7c1cc5b7:src/styles/layout/circle/circle-edit.scss + @media (max-width: 1220px) { + display: none; + } } - >[name='sup'] { - align-self: end; + .table-body div team-template-edit { display: flex; -<<<<<<< HEAD:src/styles/layout/circle-profile/circle-edit.scss - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; -======= ->>>>>>> 81d885730dd7673ee424a72b6f0c663c7c1cc5b7:src/styles/layout/circle/circle-edit.scss + justify-content: space-between; - [name='name'] { - font-weight: 600; + >* { + border-bottom: 1px solid $color-228-25-79; + flex: 1; + width: 50%; + } + + >*:nth-child(odd) { + border-left: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + padding: 0 2.2rem; + } + + >*:nth-child(even) { + display: flex; + border-right: 1px solid $color-228-25-79; + justify-content: flex-end; + padding: 2.7rem 2.2rem; + } + } + + .member-select.color { + + .ss-main { + color: $color-233-18-29; + } + } + + sib-multiple[widget='team-template-edit'] { + + label { + display: none; } - sib-multiple { - display: flex; - margin-left: 1rem; + >div>team-template-edit>sib-display>div { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); - [name='groups'] { - @extend %user-role; + >[name='account.picture'] { + align-items: center; + align-self: center; + background-color: $color-213-20-91; + border-radius: 50%; + display: flex; + grid-column: 1 / span 1; + grid-row: 1 / span 2; + height: 7vh; + justify-content: center; + overflow: hidden; + position: relative; + width: 7vh; + + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + + object { + height: 45%; + width: 45%; + } + [name='name'] { + font-weight: 600; + margin-right: 1rem; } - } - } - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; + >[name='sup'] { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; - >[name$='profile.city']:not(:empty) { - @include mdi('atom'); - align-items: center; - display: flex; + [name='name'] { + font-weight: 600; + } - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; + sib-multiple { + display: flex; + margin-left: 1rem; + + [name='groups'] { + @extend %user-role; + } + } + } + + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; + + >[name$='profile.city']:not(:empty) { + @include mdi('atom'); + align-items: center; + display: flex; + + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; + } + } } } } } } -} \ No newline at end of file +} From e56a65a0cd17867105cf2eae3228ef848ef66b31 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 25 Oct 2019 19:17:48 +0200 Subject: [PATCH 3/8] fix: add bug info with issue link --- src/page-admin-circles.pug | 1 + 1 file changed, 1 insertion(+) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 635a760..448bee2 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -21,6 +21,7 @@ sib-widget(name="admin-circle-join") template + //- BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521 sib-form( data-src="${src}" nested-field='members' From 4de5229960ef445f70885b3940e5a08b9f4b054a Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 25 Oct 2019 19:25:06 +0200 Subject: [PATCH 4/8] fix: css merge --- src/styles/layout/circle/circle-edit.scss | 244 ++++++++++------------ 1 file changed, 108 insertions(+), 136 deletions(-) diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 972700b..f57816d 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -7,167 +7,139 @@ font-weight: 600; justify-content: space-around; text-align: center; - + >*{ border-right: 1px solid $color-228-25-79; flex: 1; padding: 1rem; width: 50%; } - + >*:last-of-type { border-left: 1px solid white; - + @media (max-width: 1220px) { display: none; } } } - + .table-body div team-template-edit { + display: flex; + justify-content: space-between; + + >* { + border-bottom: 1px solid $color-228-25-79; + flex: 1; + width: 50%; + } + + sib-display { + border-left: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + padding: 0 2.2rem; + } + + sib-ac-checker { + align-items: center; + border-right: 1px solid $color-228-25-79; display: flex; - justify-content: space-between; - - >* { - border-bottom: 1px solid $color-228-25-79; - flex: 1; - width: 50%; - } - - sib-display { - border-left: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - padding: 0 2.2rem; - } - - sib-ac-checker { + justify-content: flex-end; + padding: 2.7rem 2.2rem; + + @media (max-width: 1220px) { + display: none; + } + } + } + + .member-select.color { + + .ss-main { + color: $color-233-18-29; + } + } + + sib-multiple[widget='team-template-edit'] { + + label { + display: none; + } + + >div>team-template-edit>sib-display>div { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + + >[name='account.picture'] { align-items: center; - border-right: 1px solid $color-228-25-79; + align-self: center; + background-color: $color-213-20-91; + border-radius: 50%; display: flex; - justify-content: flex-end; - padding: 2.7rem 2.2rem; - - @media (max-width: 1220px) { - display: none; - } + grid-column: 1 / span 1; + grid-row: 1 / span 2; + height: 7vh; + justify-content: center; + overflow: hidden; + position: relative; + width: 7vh; + + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + + object { + height: 45%; + width: 45%; + } } - - .table-body div team-template-edit { + + >[name='sup'] { + align-self: end; display: flex; - justify-content: space-between; - - >* { - border-bottom: 1px solid $color-228-25-79; - flex: 1; - width: 50%; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; + + [name='name'] { + font-weight: 600; + margin-right: 1rem; } - - >*:nth-child(odd) { - border-left: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - padding: 0 2.2rem; - } - - >*:nth-child(even) { + + sib-multiple { display: flex; - border-right: 1px solid $color-228-25-79; - justify-content: flex-end; - padding: 2.7rem 2.2rem; + + [name='groups'] { + @extend %user-role; + } } } - - .member-select.color { - - .ss-main { - color: $color-233-18-29; - } - } - - sib-multiple[widget='team-template-edit'] { - - label { - display: none; - } - - >div>team-template-edit>sib-display>div { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - - >[name='account.picture'] { - align-items: center; - align-self: center; - background-color: $color-213-20-91; - border-radius: 50%; - display: flex; - grid-column: 1 / span 1; - grid-row: 1 / span 2; - height: 7vh; - justify-content: center; - overflow: hidden; - position: relative; - width: 7vh; - - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } - [name='name'] { - font-weight: 600; - margin-right: 1rem; - } - - >[name='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; - - [name='name'] { - font-weight: 600; - } - - sib-multiple { - display: flex; - margin-left: 1rem; - - [name='groups'] { - @extend %user-role; - } - } - } - - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; - - >[name$='profile.city']:not(:empty) { - @include mdi('atom'); - align-items: center; - display: flex; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } - } + + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; + + >[name$='profile.city']:not(:empty) { + @include mdi('atom'); + align-items: center; + display: flex; + + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; } } } } - } + } } From d08153c79720a1dd3c33b754d6376c75862216b7 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 28 Oct 2019 13:55:43 +0100 Subject: [PATCH 5/8] fix: creation date issue --- src/page-circle-profile.pug | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 33665ee..435dbc3 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -30,6 +30,8 @@ default-description='No description available.' value-title='Creation date:' + + widget-creationDate='sib-display-date' ) From 30ce7d3bfda4dd5d76e55d35c7bdadf4be2ff9b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 28 Oct 2019 18:38:14 +0100 Subject: [PATCH 6/8] header modified: dash and description added --- src/page-circle-profile.pug | 3 ++- src/styles/base/main.scss | 17 +++++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 435dbc3..350446e 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -10,9 +10,10 @@ sib-ac-checker(permission='acl:Read', bind-resources) sib-display( bind-resources - fields='name' + fields='name, description' class-name='name' + class-description='description' ) div.content-box__info diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 4a12793..d399909 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -170,7 +170,7 @@ sib-delete { } } -.content-box__header.with-edit { +/* .content-box__header.with-edit { border-bottom: 1px solid $color-221-51-90; display: flex; justify-content: space-between; @@ -187,7 +187,7 @@ sib-delete { display: flex; } } -} +} */ .drive { width: 100%; @@ -203,6 +203,19 @@ sib-delete { text-transform: uppercase; } + .description { + color: $color-215-6-63; + font-size: 1.8rem; + + &:not(:empty)::before { + color: $color-216-4-22; + content: '- '; + font-size: 2rem; + font-weight: bold; + margin-left: 0.60rem; + } + } + .edit { color: $color-213-4-50; font-size: 1.6rem; From 2334098e3190a1f3347e284fab2be16c29731189 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 28 Oct 2019 18:40:50 +0100 Subject: [PATCH 7/8] description field removed from page --- src/page-circle-profile.pug | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 350446e..04bb600 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -24,11 +24,7 @@ sib-display.block( bind-resources - fields='creationDateSet(title, creationDate), label-description, description' - - value-label-description='Description: ' - - default-description='No description available.' + fields='creationDateSet(title, creationDate)' value-title='Creation date:' From 40eeef9d449dfde81eae0999c2bd7033009fc984 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 29 Oct 2019 14:38:59 +0100 Subject: [PATCH 8/8] fix: account context --- src/context.jsonld | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/context.jsonld b/src/context.jsonld index be7f99d..0159815 100644 --- a/src/context.jsonld +++ b/src/context.jsonld @@ -2,5 +2,6 @@ { "inbox": "http://happy-dev.fr/owl/#inbox", "object": "http://happy-dev.fr/owl/#object", - "author": "http://happy-dev.fr/owl/#author" + "author": "http://happy-dev.fr/owl/#author", + "account": "http://happy-dev.fr/owl/#account" }