From 2bbe3134db8dda711b23144faf0ab899fcdb2024 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 15 Oct 2019 11:37:57 +0200 Subject: [PATCH 001/100] sib-core 0.9 --- src/dependencies.pug | 8 ++++---- src/page-circle.pug | 46 ++++++++++++++++++++++---------------------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index 491c23d..fbb8abe 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -1,4 +1,4 @@ -script(type="module" src="https://unpkg.com/@startinblox/oidc@0.7") +script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8") script(src="/scripts/index.js") //- Stylesheets @@ -15,10 +15,10 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3 //- script(type="module" src="/lib/sib-job-board/sib-job-board.js") //- CDN -script(type="module" src="https://unpkg.com/@startinblox/core@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-chat@0.3") -script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.2") +script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.4") +//- script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.2") //- 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") diff --git a/src/page-circle.pug b/src/page-circle.pug index b66986c..43c0769 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,26 +1,26 @@ .views-container #circle-chat include page-circle-chat.pug - //- #circle-profile - //- include page-circle-profile.pug - //- #circle-edit - //- include page-circle-edit.pug - //- #circle-create - //- include page-circle-create.pug -//- nav.jsRightMenu(role='navigation') -//- sib-router(default-route='circle-chat') -//- ul -//- li.jsOffsiteToggle -//- a Fold menu -//- sib-route(name='circle-chat') -//- li -//- a Chat -//- sib-route(name='circle-profile') -//- li -//- a Information -//- sib-route(name='circle-edit') -//- //- li -//- //- a Edit -//- sib-route(name='circle-create') -//- //- li -//- //- a Add new \ No newline at end of file + #circle-profile + include page-circle-profile.pug + #circle-edit + include page-circle-edit.pug + //-#circle-create + include page-circle-create.pug +nav.jsRightMenu(role='navigation') + sib-router(default-route='circle-chat') + ul + li.jsOffsiteToggle + a Fold menu + sib-route(name='circle-chat') + li + a Chat + sib-route(name='circle-profile') + li + a Information + sib-route(name='circle-edit') + li + a Edit + //-sib-route(name='circle-create') + li + a Add new From e32b8aa4b75f7bb0451c42eaa21aa95a5ad61206 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 15 Oct 2019 12:14:54 +0200 Subject: [PATCH 002/100] wip --- src/page-circle-edit.pug | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 7e23b00..e2f2bb0 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -1,9 +1,12 @@ #circle-edit.content-box.with-padding.with-form.full-width - h1 Edit group - sib-form.block( - range-owner=`${endpoints.users}`, - fields="name, description, owner, team, jabberID, jabberRoom" - range-team=`${endpoints.users}`, - bind-resources - ) - //- widget-team='sib-form-multiple-dropdown', + .content-box.with-padding.with-form.full-width + h1 Edit your circle + + sib-form.block( + bind-resources + + fields='block-circle__info(name, status), description' + + + ) + //- widget-team='sib-form-multiple-dropdown', From feadf0e2756451b23cecf37137310122737e47e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 15 Oct 2019 13:54:06 +0200 Subject: [PATCH 003/100] wip --- src/page-circle-edit.pug | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index e2f2bb0..5b6fa63 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -7,6 +7,8 @@ fields='block-circle__info(name, status), description' - + class-name='form-label is-light is-half-width' + class-status='form-label is-light is-half-width' + class-description='form-label is-light is-full-width' ) //- widget-team='sib-form-multiple-dropdown', From 456580aa3c14df6aefdafbe52cf15866ab6595cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 15 Oct 2019 17:10:16 +0200 Subject: [PATCH 004/100] sib-form ok. Need work on the team edition --- src/page-circle-edit.pug | 51 ++++++++++++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 12 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 5b6fa63..16d5fdf 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -1,14 +1,41 @@ #circle-edit.content-box.with-padding.with-form.full-width - .content-box.with-padding.with-form.full-width - h1 Edit your circle - - sib-form.block( - bind-resources - - fields='block-circle__info(name, status), description' - class-name='form-label is-light is-half-width' - class-status='form-label is-light is-half-width' - class-description='form-label is-light is-full-width' - ) - //- widget-team='sib-form-multiple-dropdown', + sib-widget(name='circle-team-template') + template + sib-display( + data-src="${await value['@id']}" + fields='name' + widget-account.picture='hd-user-avatar' + ) + + sib-delete( + data-src="${await value['@id']}" + ) + + h1 Edit your circle + + sib-form.block( + bind-resources + + fields='block-circle__info(name, status), description' + + label-status='status (coming soon)' + + class-name='form-label is-light is-half-width' + class-status='form-label is-light is-half-width' + class-description='form-label is-light is-full-width' + + widget-description='sib-form-textarea' + ) + + h3 List of members + + sib-display( + bind-resources + + fields='team' + + multiple-team='' + + widget-team='circle-team-template' + ) From 5c89cb116d44899013208dee4f86bc25c42afbbe Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 16 Oct 2019 12:40:01 +0200 Subject: [PATCH 005/100] update: versions to 0.9 (missing notification) --- src/dependencies.pug | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index 491c23d..058bc3c 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -1,4 +1,4 @@ -script(type="module" src="https://unpkg.com/@startinblox/oidc@0.7") +script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8") script(src="/scripts/index.js") //- Stylesheets @@ -15,10 +15,10 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3 //- script(type="module" src="/lib/sib-job-board/sib-job-board.js") //- CDN -script(type="module" src="https://unpkg.com/@startinblox/core@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-chat@0.3") -script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.2") +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-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") From da56c3a003472e5c6c91b09ed8b331d53063d90a Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 16 Oct 2019 12:56:33 +0200 Subject: [PATCH 006/100] update: menu filtered for projects --- src/menu-left.pug | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/menu-left.pug b/src/menu-left.pug index 0c3114e..fc15c19 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -32,6 +32,10 @@ nav#main__menu //- empty-widget='hd-create' //- empty-value='project' //- value-dash=' - ' + //- search-fields='team' + //- search-widget-team='sib-form-hidden' + //- search-value-team='' + //- set-user-id='search-value-team' //- widget-badge='hd-counter' //- action-badge='badge' //- ) From 21d485c4920e1135e9c5bc9a166acaffd07beb69 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 16 Oct 2019 13:21:23 +0200 Subject: [PATCH 007/100] fix: _ & LDFlex on header --- src/header.pug | 3 ++- src/styles/base/header.scss | 4 ++-- src/styles/layout/job-offers/job-offers.scss | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/header.pug b/src/header.pug index 9347750..b327da4 100644 --- a/src/header.pug +++ b/src/header.pug @@ -17,7 +17,8 @@ include templates/hd-user-avatar.pug details#user-controls summary(tabindex='0' role='button') sib-display#user-controls__profile( - fields='first_name, account.picture' + fields='firstName, account.picture' + extra-context='{firstName:"first_name"}' widget-account.picture='hd-user-avatar' bind-user ) diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 947f756..776381b 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -156,7 +156,7 @@ width: 45%; } - sib-display-value[name='first_name'] { + sib-display-value[name='firstName'] { @include icon('arrow-down'); align-items: center; display: flex; @@ -224,7 +224,7 @@ div { - sib-display-value[name='first_name'] { + sib-display-value[name='firstName'] { @include icon('close'); &::before { diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss index 1eac0c1..d8324ab 100644 --- a/src/styles/layout/job-offers/job-offers.scss +++ b/src/styles/layout/job-offers/job-offers.scss @@ -75,7 +75,7 @@ sib-job-board { margin: 0.25em; } - [name='author.first_name'] { + [name='author.firstName'] { color: $color-0-0-29; font-weight: 600; } From 1a3aac00c8f1054fced8174bf4c0b084c736b94d Mon Sep 17 00:00:00 2001 From: Christophe Henry Date: Thu, 3 Oct 2019 15:27:57 +0200 Subject: [PATCH 008/100] Solves #145: add project captains to project page --- src/page-project-profile.pug | 11 +- .../project-profile/project-profile.scss | 135 +++++++++--------- src/templates/template-captain.pug | 23 +++ src/templates/template-team.pug | 20 ++- 4 files changed, 112 insertions(+), 77 deletions(-) create mode 100644 src/templates/template-captain.pug diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index c3aa6d3..9cbbb5f 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -3,9 +3,10 @@ include templates/template-business-provider.pug include templates/template-customer.pug include templates/template-team.pug + include templates/template-captain.pug sib-display( - fields='block-title(const-title1, number, customer.name, const-title2, name, entitled, creationDate), infos(block-description(label-description, description), block-logo(customer.logo)), block-lead, block-fee(label-fee, businessProvider), block-customer(label-customer, customer), block-team(label-team, members)', + fields='block-title(const-title1, number, customer.name, const-title2, name, entitled, creationDate), infos(block-description(label-description, description), block-logo(customer.logo)), block-lead, block-fee(label-fee, businessProvider), block-customer(label-customer, customer), block-captain(label-captain, captain), block-team(label-team, members)', value-const-title1='N°', value-const-title2='-', @@ -19,11 +20,13 @@ value-label-customer='CUSTOMER INFORMATIONS:', widget-customer='customer-template', - + + value-label-captain='CAPTAIN:', + widget-captain='captain-template', + value-label-team='TEAM:', widget-members='team-template', - multiple-members='', + multiple-members, bind-resources ) - diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index 67adc47..e8b8cdc 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -98,9 +98,7 @@ #clientBox { display: flex; - margin-left: auto; - margin-right: auto; - margin-top: 1.7rem; + margin: 1.7rem auto; max-width: 100%; >* { @@ -166,75 +164,80 @@ } } - [name='block-team'] { + [name='block-team'], [name='block-captain'] { + label { + display: none; + } - >sib-multiple { + sib-display.project-profile-user-avatar { + align-self: center; + grid-column: 1 / span 1; + grid-row: 1 / span 2; - label { - display: none; + div { + background-color: $color-0-0-100; + border-radius: 50%; + height: 7vh; + overflow: hidden; + position: relative; + width: 7vh; + + img { + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + } + } + + team-template[name='members'], captain-template[name='captain'] { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + + + > div:nth-child(2) { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + + span { + align-self: center; + font-weight: 600; + } + + span ~ sib-display { + + > div { + display: flex; + margin-left: 1rem; + + sib-multiple [name='name'] { + @extend %user-role; + } + } + } } - >team-template[name='members'] { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - - >sib-display:first-child { - align-self: center; - grid-column: 1 / span 1; - grid-row: 1 / span 2; - - div { - background-color: $color-0-0-100; - border-radius: 50%; - height: 7vh; - overflow: hidden; - position: relative; - width: 7vh; - - img { - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } - } - } - - >div:nth-child(2) { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - - span { - align-self: center; - font-weight: 600; - } - - span~sib-display { - - >div { - display: flex; - margin-left: 1rem; - - sib-multiple [name='name'] { - @extend %user-role; - } - } - } - } - - >span:nth-child(3) { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - } + > span:nth-child(3) { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; } } } + .project-profile-user-avatar { + display: inline; + + * { + height: 100%; + width: 100%; + } + } } \ No newline at end of file diff --git a/src/templates/template-captain.pug b/src/templates/template-captain.pug new file mode 100644 index 0000000..d1bec42 --- /dev/null +++ b/src/templates/template-captain.pug @@ -0,0 +1,23 @@ +include hd-user-avatar.pug + +sib-widget(name='captain-template') + template + sib-display.project-profile-user-avatar( + data-src="${value ? value['@id'] : ''}" + fields='account.picture', + widget-account.picture='hd-user-avatar' + ) + div(name='user.thumb') + sib-display( + data-src="${value ? value['@id'] : ''}" + fields='name' + ) + sib-display( + data-src="${value ? value['@id'] : ''}", + fields='name' + nested-field="groups" + ) + sib-display( + data-src="${value ? value['@id'] : ''}" + fields='username' + ) diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug index ac3a2ff..f529ecf 100644 --- a/src/templates/template-team.pug +++ b/src/templates/template-team.pug @@ -2,16 +2,22 @@ include hd-user-avatar.pug sib-widget(name='team-template') template - sib-display( - data-src="${value.user['@id']}" + sib-display.project-profile-user-avatar( + data-src="${value.user ? value.user['@id'] : ''}" fields='account.picture', widget-account.picture='hd-user-avatar' ) div(name='user.thumb') - span ${value.user.name} sib-display( - data-src="${value.user.groups['@id']}", - fields='name', - multiple-name + data-src="${value.user ? value.user['@id'] : ''}" + fields='name' ) - span ${value.name} + sib-display( + data-src="${value.user ? value.user['@id'] : ''}", + fields='name' + nested-field="groups" + ) + sib-display( + data-src="${value.user ? value.user['@id'] : ''}" + fields='username' + ) From dda3ecfa462246becd4b7fb2dddc26fb8aca1286 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 16 Oct 2019 17:10:00 +0200 Subject: [PATCH 009/100] update: add context (LDFlex needing) --- index.prod.html | 299 ------------------------------------------- src/context.jsonld | 6 + src/dependencies.pug | 4 + 3 files changed, 10 insertions(+), 299 deletions(-) delete mode 100644 index.prod.html create mode 100644 src/context.jsonld diff --git a/index.prod.html b/index.prod.html deleted file mode 100644 index b1012ee..0000000 --- a/index.prod.html +++ /dev/null @@ -1,299 +0,0 @@ - - - - - HD App - - - - - - - - - - - - - - - - - -
- -
- - - - - - -
-
- - \ No newline at end of file diff --git a/src/context.jsonld b/src/context.jsonld new file mode 100644 index 0000000..be7f99d --- /dev/null +++ b/src/context.jsonld @@ -0,0 +1,6 @@ + + { + "inbox": "http://happy-dev.fr/owl/#inbox", + "object": "http://happy-dev.fr/owl/#object", + "author": "http://happy-dev.fr/owl/#author" + } diff --git a/src/dependencies.pug b/src/dependencies.pug index 058bc3c..8752ff2 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -22,3 +22,7 @@ script(type="module" src="https://unpkg.com/@startinblox/component-notifications //- 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") + +//- Context - Fix for LDFlex +script(data-default-context, type="application/ld+json") + include context.jsonld From 61be5d780c9f16b802d1c311aa0f9de54432961f Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 16 Oct 2019 18:28:19 +0200 Subject: [PATCH 010/100] fix: empty circles/projects for anonymous --- src/menu-left.pug | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index fc15c19..1213473 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -34,7 +34,7 @@ nav#main__menu //- value-dash=' - ' //- search-fields='team' //- search-widget-team='sib-form-hidden' - //- search-value-team='' + //- search-value-team='-' //- set-user-id='search-value-team' //- widget-badge='hd-counter' //- action-badge='badge' @@ -58,7 +58,7 @@ nav#main__menu action-badge='badge' search-fields='team' search-widget-team='sib-form-hidden' - search-value-team='' + search-value-team='-' set-user-id='search-value-team' order-by='name' next='circle' From 4d2566abe070bbf19f16a348307a684e3b8ff92c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 17 Oct 2019 16:06:22 +0200 Subject: [PATCH 011/100] wip table --- src/page-circle-edit.pug | 7 +- src/styles/abstracts/_variables.scss | 1 + src/styles/layout/circle-profile/_index.scss | 3 +- .../layout/circle-profile/circle-edit.scss | 79 +++++++++++++++++++ 4 files changed, 86 insertions(+), 4 deletions(-) create mode 100644 src/styles/layout/circle-profile/circle-edit.scss diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 16d5fdf..c9f976a 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -30,12 +30,13 @@ h3 List of members + div.table + div.cell.un Name + div.cell.deux Status + sib-display( bind-resources - fields='team' - multiple-team='' - widget-team='circle-team-template' ) diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index e63db81..53cbb47 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -10,6 +10,7 @@ $color-210-25-95: hsl(210, 25%, 95%); $color-222-57-95: hsl(222, 57%, 95%); $color-213-20-91: hsl(213, 20%, 91%); $color-221-51-90: hsl(221, 51%, 90%); +$color-228-25-79: hsl(228, 25%, 79%); $color-0-0-85: hsl(0, 0%, 85%); $color-229-25-79: hsl(229, 25%, 79%); $color-215-9-73: hsl(215, 9%, 73%); diff --git a/src/styles/layout/circle-profile/_index.scss b/src/styles/layout/circle-profile/_index.scss index 293bc89..6efac3d 100644 --- a/src/styles/layout/circle-profile/_index.scss +++ b/src/styles/layout/circle-profile/_index.scss @@ -1 +1,2 @@ -@import 'circle-profile'; \ No newline at end of file +@import 'circle-profile'; +@import 'circle-edit'; \ No newline at end of file diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss new file mode 100644 index 0000000..c6be16c --- /dev/null +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -0,0 +1,79 @@ +/*.table { + display: table; + width: 100%; + + .row.header { + display: table-row; + + .cell { + display: table-cell; + + &.un { + background: pink; + } + + &.deux { + background: paleturquoise; + } + } + } +} + +[widget='circle-team-template'] { + + >div { + display: table; + width: 100%; + + >circle-team-template { + display: table-row; + + >* { + border-bottom: 1px solid $color-228-25-79; + border-left: 1px solid $color-228-25-79; + } + + >sib-display { + display: table-cell; + + div { + display: flex; + background: bisque; + } + } + + sib-delete { + border-right: 1px solid $color-228-25-79; + display: table-cell; + } + } + } +}*/ + +.table { + display: flex; + justify-content: space-around; + background: pink; + + >*{ + flex: 1; + width: 50%; + padding: 1rem; + border-right: 1px solid $color-228-25-79; + border-bottom: 1px solid $color-228-25-79; + } +} + +circle-team-template { + display: flex; + justify-content: space-between; + background: paleturquoise; + + >* { + flex: 1; + width: 50%; + padding: 1rem; + border-right: 1px solid $color-228-25-79; + border-bottom: 1px solid $color-228-25-79; + } +} \ No newline at end of file From ba6e21a71c8600f96de59bcbd0b8fa0500c4a924 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 18 Oct 2019 10:26:08 +0200 Subject: [PATCH 012/100] wip --- .../layout/circle-profile/circle-edit.scss | 67 ++++--------------- src/templates/hd-circle-team.pug | 0 2 files changed, 12 insertions(+), 55 deletions(-) create mode 100644 src/templates/hd-circle-team.pug diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss index c6be16c..d7c7f80 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -1,73 +1,26 @@ -/*.table { - display: table; - width: 100%; - - .row.header { - display: table-row; - - .cell { - display: table-cell; - - &.un { - background: pink; - } - - &.deux { - background: paleturquoise; - } - } - } -} - -[widget='circle-team-template'] { - - >div { - display: table; - width: 100%; - - >circle-team-template { - display: table-row; - - >* { - border-bottom: 1px solid $color-228-25-79; - border-left: 1px solid $color-228-25-79; - } - - >sib-display { - display: table-cell; - - div { - display: flex; - background: bisque; - } - } - - sib-delete { - border-right: 1px solid $color-228-25-79; - display: table-cell; - } - } - } -}*/ - .table { + background: $color-228-25-79; + color: white; display: flex; justify-content: space-around; - background: pink; + font-weight: 600; + font-size: 1.6rem; >*{ flex: 1; width: 50%; padding: 1rem; border-right: 1px solid $color-228-25-79; - border-bottom: 1px solid $color-228-25-79; + } + + >*:first-of-type { + border-right: 1px solid white; } } circle-team-template { display: flex; justify-content: space-between; - background: paleturquoise; >* { flex: 1; @@ -76,4 +29,8 @@ circle-team-template { border-right: 1px solid $color-228-25-79; border-bottom: 1px solid $color-228-25-79; } + + >*:nth-child(odd) { + border-left: 1px solid $color-228-25-79; + } } \ No newline at end of file diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug new file mode 100644 index 0000000..e69de29 From 57885c6655261f14153b504c3a8aad0057a8bb39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 18 Oct 2019 15:39:56 +0200 Subject: [PATCH 013/100] wip --- src/page-circle-edit.pug | 13 ++-- .../layout/circle-profile/circle-edit.scss | 69 +++++++++++++++++++ src/templates/hd-circle-team.pug | 43 ++++++++++++ 3 files changed, 120 insertions(+), 5 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index c9f976a..2e5e696 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -2,11 +2,14 @@ sib-widget(name='circle-team-template') template - sib-display( - data-src="${await value['@id']}" - fields='name' - widget-account.picture='hd-user-avatar' - ) + div(name='team') + div(name='user.thumb') + span ${await value.name} + sib-display( + data-src="${await value.groups}", + fields='name' + ) + span ${await value.profile.city} sib-delete( data-src="${await value['@id']}" diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss index d7c7f80..e014c4e 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -33,4 +33,73 @@ circle-team-template { >*:nth-child(odd) { border-left: 1px solid $color-228-25-79; } +} + + +sib-multiple { + + label { + display: none; + } + + >team-template[name='members'] { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + + >sib-display:first-child { + align-self: center; + grid-column: 1 / span 1; + grid-row: 1 / span 2; + + div { + background-color: $color-0-0-100; + border-radius: 50%; + height: 7vh; + overflow: hidden; + position: relative; + width: 7vh; + + img { + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + } + } + + >div:nth-child(2) { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + + span { + align-self: center; + font-weight: 600; + } + + span~sib-display { + + >div { + display: flex; + margin-left: 1rem; + + sib-multiple [name='name'] { + @extend %user-role; + } + } + } + } + + >span:nth-child(3) { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + } + } } \ No newline at end of file diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index e69de29..c747f1a 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -0,0 +1,43 @@ +include hd-user-avatar.pug + +sib-widget(name='team-template') + template + sib-display( + data-src="${value.user ? value.user['@id'] : ''}" + fields='account.picture', + widget-account.picture='hd-user-avatar' + ) + div(name='user.thumb') + span ${value.user.name} + sib-display( + data-src="${value.user ? value.user.groups['@id'] : ''}", + fields='name', + multiple-name + ) + span ${value.name} + + + +include hd-user-avatar.pug + +sib-widget(name='team-template') + template + sib-display.project-profile-user-avatar( + data-src="${value.user ? value.user['@id'] : ''}" + fields='account.picture', + widget-account.picture='hd-user-avatar' + ) + div(name='user.thumb') + sib-display( + data-src="${value.user ? value.user['@id'] : ''}" + fields='name' + ) + sib-display( + data-src="${value.user ? value.user['@id'] : ''}", + fields='name' + nested-field="groups" + ) + sib-display( + data-src="${value.user ? value.user['@id'] : ''}" + fields='username' + ) \ No newline at end of file From 795bdb11e8ce2fa70e53fd7315b079a6a2198d2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 21 Oct 2019 11:37:07 +0200 Subject: [PATCH 014/100] wip on owner dropdown --- src/page-circle-edit.pug | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 2e5e696..40c538d 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -20,14 +20,16 @@ sib-form.block( bind-resources - fields='block-circle__info(name, status), description' + fields='block-circle__info(name, owner), description' + range-owner=`${endpoints.users}` - label-status='status (coming soon)' + label-owner='owner' class-name='form-label is-light is-half-width' - class-status='form-label is-light is-half-width' + class-owner='form-label is-light is-half-width member-select' class-description='form-label is-light is-full-width' + widget-owner='sib-form-auto-completion' widget-description='sib-form-textarea' ) From 6d4b863e3bd4d58b296371f66d9ac24288b1e2c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 21 Oct 2019 13:12:04 +0200 Subject: [PATCH 015/100] delete button ok --- src/page-circle-edit.pug | 2 ++ src/styles/base/main.scss | 20 +++++++++++++++++++ .../layout/circle-profile/circle-edit.scss | 7 ++++++- 3 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 40c538d..f2d8470 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -13,6 +13,8 @@ sib-delete( data-src="${await value['@id']}" + data-label='Delete from circle' + resourceDeleted='' ) h1 Edit your circle diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 8fa3b61..722a63b 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -105,6 +105,26 @@ a { } } +sib-delete { + + button { + @include icon('close'); + background-color: $color-233-18-29; + border: none; + border-radius: 100em; + color: $color-0-0-100; + cursor: pointer; + font-size: 1.4rem; + font-weight: bold; + padding: 0.55rem 2.5rem; + text-transform: uppercase; + + &::before { + margin-right: 1rem; + } + } +} + %padding-main { padding: 5rem; } diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss index e014c4e..42f6548 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -3,8 +3,9 @@ color: white; display: flex; justify-content: space-around; - font-weight: 600; font-size: 1.6rem; + font-weight: 600; + text-align: center; >*{ flex: 1; @@ -30,6 +31,10 @@ circle-team-template { border-bottom: 1px solid $color-228-25-79; } + >*:nth-child(even) { + display: flex; + } + >*:nth-child(odd) { border-left: 1px solid $color-228-25-79; } From afa5fa0451b75b0cfaf9264e08b56f49671e59ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 21 Oct 2019 15:02:12 +0200 Subject: [PATCH 016/100] new architecture for member list yeah --- src/page-circle-edit.pug | 12 +++++++--- .../layout/circle-profile/circle-edit.scss | 24 +++++++++++++------ 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index f2d8470..adfa132 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -11,6 +11,8 @@ ) span ${await value.profile.city} + sib-widget(name='circle-delete-template') + template sib-delete( data-src="${await value['@id']}" data-label='Delete from circle' @@ -37,13 +39,17 @@ h3 List of members - div.table + div.table-header div.cell.un Name div.cell.deux Status - sib-display( + sib-display.table-body( bind-resources - fields='team' + fields='team, members' + multiple-team='' + multiple-members='' + widget-team='circle-team-template' + widget-members='circle-delete-template' ) diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss index 42f6548..599639d 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -1,4 +1,4 @@ -.table { +.table-header { background: $color-228-25-79; color: white; display: flex; @@ -19,24 +19,34 @@ } } -circle-team-template { +.table-body>div { display: flex; justify-content: space-between; >* { flex: 1; width: 50%; - padding: 1rem; - border-right: 1px solid $color-228-25-79; - border-bottom: 1px solid $color-228-25-79; } - >*:nth-child(even) { + /*>*:nth-child(even) { display: flex; + }*/ + + /*>*:nth-child(odd) { + border-left: 1px solid $color-228-25-79; + }*/ + + circle-team-template { + display: block; + border-bottom: 1px solid $color-228-25-79; + border-left: 1px solid $color-228-25-79; } - >*:nth-child(odd) { + circle-delete-template { + display: block; + border-bottom: 1px solid $color-228-25-79; border-left: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; } } From 3940bafda3037cdec1041c6fd809723b187f1569 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 21 Oct 2019 15:38:49 +0200 Subject: [PATCH 017/100] wip --- src/page-circle-edit.pug | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index adfa132..eb29ab6 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -1,8 +1,23 @@ #circle-edit.content-box.with-padding.with-form.full-width + include templates/hd-user-avatar.pug + sib-widget(name='circle-team-template') template - div(name='team') + sib-widget(name='hd-user-groups') + template ${await value.name} + + sib-display( + data-src='${await value}' + fields='account.picture, sup(name, groups), sub(profile.city)' + + widget-account.picture='hd-user-avatar' + widget-groups='hd-user-groups' + + multiple-groups='' + ) + + //-div(name='team') div(name='user.thumb') span ${await value.name} sib-display( From a7faff9b882482362b6d7486d0c6227df088c197 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 22 Oct 2019 15:50:15 +0200 Subject: [PATCH 018/100] members block OK + delete-circle button added --- src/page-circle-edit.pug | 44 +++---- src/styles/base/form.scss | 9 +- .../layout/circle-profile/circle-edit.scss | 110 ++++++++++-------- 3 files changed, 88 insertions(+), 75 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index eb29ab6..37cd03f 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -2,32 +2,21 @@ include templates/hd-user-avatar.pug - sib-widget(name='circle-team-template') - template - sib-widget(name='hd-user-groups') - template ${await value.name} + sib-widget(name='hd-user-groups') + template ${await value.name} + sib-widget(name='team-template') + template sib-display( - data-src='${await value}' + data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' widget-account.picture='hd-user-avatar' - widget-groups='hd-user-groups' multiple-groups='' + widget-groups='hd-user-groups' ) - //-div(name='team') - div(name='user.thumb') - span ${await value.name} - sib-display( - data-src="${await value.groups}", - fields='name' - ) - span ${await value.profile.city} - - sib-widget(name='circle-delete-template') - template sib-delete( data-src="${await value['@id']}" data-label='Delete from circle' @@ -50,21 +39,26 @@ widget-owner='sib-form-auto-completion' widget-description='sib-form-textarea' + + submit-button='Register' + ) + + sib-delete( + bind-resources + data-label='Delete circle' + resourceDeleted='' ) - h3 List of members + h2 List of members div.table-header - div.cell.un Name - div.cell.deux Status + div.cell Name + div.cell Access sib-display.table-body( bind-resources - fields='team, members' + fields='members' - multiple-team='' multiple-members='' - - widget-team='circle-team-template' - widget-members='circle-delete-template' + widget-members='team-template' ) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index c1ae4a7..89177aa 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -151,15 +151,19 @@ sib-form-auto-completion.member-select { align-self: flex-end; - font-weight: normal; + + >label:first-of-type>div { + font-weight: 600; + } .ss-single-selected { background-color: $color-222-57-95; border: none; border-radius: 0px; display: flex; + font-weight: normal; margin-top: 0.8rem; - min-height: 3.9rem; + min-height: 4.4rem; padding-left: 1rem; text-transform: none; @@ -170,6 +174,7 @@ } .ss-content .ss-list .ss-option { + font-weight: normal; text-transform: none; } } diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss index 599639d..fb84e2c 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -1,3 +1,9 @@ +h2 { + font-size: 1.7rem; + font-weight: bold; + text-transform: uppercase; +} + .table-header { background: $color-228-25-79; color: white; @@ -19,102 +25,110 @@ } } -.table-body>div { +.table-body div team-template { display: flex; justify-content: space-between; >* { flex: 1; width: 50%; - } - - /*>*:nth-child(even) { - display: flex; - }*/ - - /*>*:nth-child(odd) { - border-left: 1px solid $color-228-25-79; - }*/ - - circle-team-template { - display: block; border-bottom: 1px solid $color-228-25-79; - border-left: 1px solid $color-228-25-79; } - - circle-delete-template { - display: block; - border-bottom: 1px solid $color-228-25-79; + + >*: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.5rem 2.2rem; } } -sib-multiple { +sib-multiple[widget='team-template'] { label { display: none; } - >team-template[name='members'] { + >div>team-template>sib-display>div { display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; grid-template-rows: repeat(2, 5.2vh); - >sib-display:first-child { + >[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; - div { - background-color: $color-0-0-100; - border-radius: 50%; - height: 7vh; - overflow: hidden; - position: relative; - width: 7vh; + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } - img { - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } + object { + height: 45%; + width: 45%; } } - >div:nth-child(2) { + >[name='sup'] { align-self: end; display: flex; grid-column: 2 / span 1; grid-row: 1 / span 1; + margin-bottom: 0.50rem; - span { - align-self: center; + [name='name'] { font-weight: 600; } - span~sib-display { + sib-multiple { + display: flex; + margin-left: 1rem; - >div { - display: flex; - margin-left: 1rem; - - sib-multiple [name='name'] { - @extend %user-role; - } + [name='groups'] { + @extend %user-role; } } } - >span:nth-child(3) { + >[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 397e0a4dc38a509bb24cc1ef6660b4d40dcfec9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 23 Oct 2019 09:57:34 +0200 Subject: [PATCH 019/100] wip --- src/page-circle-edit.pug | 8 +------- src/styles/base/main.scss | 1 + .../layout/circle-profile/circle-edit.scss | 18 ++++++++++++------ 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 37cd03f..73a9f43 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -34,7 +34,7 @@ label-owner='owner' class-name='form-label is-light is-half-width' - class-owner='form-label is-light is-half-width member-select' + class-owner='form-label is-light is-half-width member-select color' class-description='form-label is-light is-full-width' widget-owner='sib-form-auto-completion' @@ -42,12 +42,6 @@ submit-button='Register' ) - - sib-delete( - bind-resources - data-label='Delete circle' - resourceDeleted='' - ) h2 List of members diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 722a63b..d5f835a 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -120,6 +120,7 @@ sib-delete { text-transform: uppercase; &::before { + font-size: 1.6rem; margin-right: 1rem; } } diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss index fb84e2c..1b182fb 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -8,16 +8,16 @@ h2 { background: $color-228-25-79; color: white; display: flex; - justify-content: space-around; font-size: 1.6rem; font-weight: 600; + justify-content: space-around; text-align: center; >*{ - flex: 1; - width: 50%; - padding: 1rem; border-right: 1px solid $color-228-25-79; + flex: 1; + padding: 1rem; + width: 50%; } >*:first-of-type { @@ -30,9 +30,9 @@ h2 { justify-content: space-between; >* { + border-bottom: 1px solid $color-228-25-79; flex: 1; width: 50%; - border-bottom: 1px solid $color-228-25-79; } >*:nth-child(odd) { @@ -45,10 +45,16 @@ h2 { display: flex; border-right: 1px solid $color-228-25-79; justify-content: flex-end; - padding: 2.5rem 2.2rem; + padding: 2.7rem 2.2rem; } } +.member-select.color { + + .ss-main { + color: $color-233-18-29; + } +} sib-multiple[widget='team-template'] { From 45064062fd665912d56f3f5c792d6b8ff2e462ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 23 Oct 2019 13:55:42 +0200 Subject: [PATCH 020/100] wip --- src/index.pug | 3 +++ src/menu-left.pug | 1 + src/page-circle-profile.pug | 12 ++++++++++++ src/page-circle.pug | 4 ++-- src/styles/base/main.scss | 31 +++++++++++++++++++++++++++++++ 5 files changed, 49 insertions(+), 2 deletions(-) diff --git a/src/index.pug b/src/index.pug index cf0f8d0..2752f66 100644 --- a/src/index.pug +++ b/src/index.pug @@ -35,6 +35,9 @@ html(lang="en") #circle(hidden).with-sidebar include page-circle.pug + #circle-edit(hidden).no-sidebar + include page-circle-edit.pug + #messages(hidden).with-sidebar include page-messages.pug diff --git a/src/menu-left.pug b/src/menu-left.pug index 0c3114e..327780b 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -77,6 +77,7 @@ nav#main__menu order-by='username' next='messages' ) + sib-route(hidden, name='circle-edit') //- div.divider //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 9deac43..6f5fbc1 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -1,4 +1,16 @@ .content-box.with-padding.full-width + + + + sib-display.content-box__header.with-edit( + bind-resources + fields='name' + class-name='name' + value-status='Public' + ) + + sib-link(class="editlink", next="circle-edit" bind-resources) + h2 Channel's name: sib-display( fields='name', diff --git a/src/page-circle.pug b/src/page-circle.pug index 43c0769..d60080a 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -3,7 +3,7 @@ include page-circle-chat.pug #circle-profile include page-circle-profile.pug - #circle-edit + //-#circle-edit include page-circle-edit.pug //-#circle-create include page-circle-create.pug @@ -18,7 +18,7 @@ nav.jsRightMenu(role='navigation') sib-route(name='circle-profile') li a Information - sib-route(name='circle-edit') + //-sib-route(name='circle-edit') li a Edit //-sib-route(name='circle-create') diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index d5f835a..59c74c5 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -155,6 +155,23 @@ sib-delete { border: 0; } +.content-box__header.with-edit { + border-bottom: 1px solid $color-221-51-90; + + div { + + .name { + text-transform: uppercase; + } + + .edit { + color: $color-213-4-50; + font-size: 1.6rem; + margin-left: auto; + } + } +} + .backlink { font-size: 1.5rem; margin: 2rem 0 0 2rem; @@ -172,6 +189,20 @@ sib-delete { } } +.editlink { + font-size: 1.6rem; + @include icon('pencil'); + color: white; + + &::before { + background: $color-244-73-62; + border-radius: 50%; + text-decoration: none; + height: 34px; + width: 34px; + } +} + .name { color: $color-216-4-22; font-size: 2rem; From 5a865693a13a864893962ccfebc17137b9773ffe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 25 Sep 2019 16:16:17 +0200 Subject: [PATCH 021/100] feature: new page to display info about a circle and add members - New styles for "add users" drodown - New custom widget to display members - Use of the permission system --- src/page-circle-chat.pug | 4 +- src/page-circle-profile.pug | 68 ++++--- src/page-circle.pug | 46 ++--- src/page-messages.pug | 4 +- src/styles/_index.scss | 1 - src/styles/base/form.scss | 45 +++++ src/styles/base/header.scss | 1 + src/styles/base/main.scss | 60 +++++- src/styles/components/_index.scss | 1 + src/styles/components/chat.scss | 17 -- src/styles/components/user-role.scss | 2 +- .../layout/circle-profile/circle-profile.scss | 179 ++++++++++++------ .../project-profile/project-profile.scss | 2 +- src/templates/hd-circle-team.pug | 16 ++ src/templates/template-team.pug | 1 + 15 files changed, 312 insertions(+), 135 deletions(-) create mode 100644 src/templates/hd-circle-team.pug diff --git a/src/page-circle-chat.pug b/src/page-circle-chat.pug index 6d1df86..34b02a8 100644 --- a/src/page-circle-chat.pug +++ b/src/page-circle-chat.pug @@ -1,7 +1,9 @@ .content-box.full-width - sib-display.chat-header( + sib-display.content-box__header( bind-resources fields='name' + + class-name='name' ) .chat-view sib-chat( diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 9deac43..507818a 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -1,29 +1,49 @@ -.content-box.with-padding.full-width - h2 Channel's name: - sib-display( - fields='name', - bind-resources - ) +.content-box.full-width.with-form - h2 Description: - sib-display( - fields='description', - bind-resources - ) + include templates/hd-circle-team.pug + + div.content-box__header.with-edit + sib-display( + bind-resources + fields='name' - h2 In group: - sib-display.block-group( - nested-field='team', - fields='teammate-img(account.picture), teammate-name(name), teammate-pseudonym(before-pseudo, username), teammate-profile, teammate-contact', + class-name='name' + ) - template-teammate-contact='chat-link', + sib-link(class="editlink", next="circle-edit" bind-resources) - value-before-pseudo='@', - value-teammate-contact='Send a message', - value-teammate-profile='View profile', + div.content-box__info + + sib-display.block( + bind-resources + fields='label-description, description, entitled(title, creationDate)' + + value-label-description='Description: ' + + default-description='No description available.' + + value-title='Creation date:' + ) + + sib-ac-checker(permission='acl:Write' bind-resources) + sib-form.block.team-form( + bind-resources + fields='team' + range-team=`${endpoints.users}` + partial='' + + class-team='team form-label is-dark' + label-team='Members:' + widget-team='sib-form-auto-completion' + + submit-button='Add a member' + ) + + sib-display.block( + bind-resources + fields='team' + + multiple-team='' + widget-team='team-template' + ) - widget-account.picture='sib-display-img', - - next='member', - bind-resources - ) diff --git a/src/page-circle.pug b/src/page-circle.pug index b66986c..d60080a 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,26 +1,26 @@ .views-container #circle-chat include page-circle-chat.pug - //- #circle-profile - //- include page-circle-profile.pug - //- #circle-edit - //- include page-circle-edit.pug - //- #circle-create - //- include page-circle-create.pug -//- nav.jsRightMenu(role='navigation') -//- sib-router(default-route='circle-chat') -//- ul -//- li.jsOffsiteToggle -//- a Fold menu -//- sib-route(name='circle-chat') -//- li -//- a Chat -//- sib-route(name='circle-profile') -//- li -//- a Information -//- sib-route(name='circle-edit') -//- //- li -//- //- a Edit -//- sib-route(name='circle-create') -//- //- li -//- //- a Add new \ No newline at end of file + #circle-profile + include page-circle-profile.pug + //-#circle-edit + include page-circle-edit.pug + //-#circle-create + include page-circle-create.pug +nav.jsRightMenu(role='navigation') + sib-router(default-route='circle-chat') + ul + li.jsOffsiteToggle + a Fold menu + sib-route(name='circle-chat') + li + a Chat + sib-route(name='circle-profile') + li + a Information + //-sib-route(name='circle-edit') + li + a Edit + //-sib-route(name='circle-create') + li + a Add new diff --git a/src/page-messages.pug b/src/page-messages.pug index dec706a..f12cb83 100644 --- a/src/page-messages.pug +++ b/src/page-messages.pug @@ -1,7 +1,9 @@ .content-box.full-width - sib-display.chat-header( + sib-display.content-box__header( bind-resources fields='username' + + class-username='name' ) .chat-view sib-chat( diff --git a/src/styles/_index.scss b/src/styles/_index.scss index e18fd59..3abbbe1 100644 --- a/src/styles/_index.scss +++ b/src/styles/_index.scss @@ -16,7 +16,6 @@ div#viewport { @import 'components/index'; @import 'layout/members/index'; @import 'layout/job-offers/index'; - @import 'components/comment.scss'; @import 'layout/project-profile/index'; @import 'layout/circle-profile/index'; @import 'layout/user/index'; diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index c1ae4a7..2b0e644 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -102,6 +102,51 @@ /* CLASSES Peut-être à sortir de .content-box */ + .block.team-form>form { /* circle-profile */ + display: flex; + flex-direction: row; + + label { + + >.ss-main { + font-weight: normal; + min-width: 35vw; + text-transform: none; + + >.ss-single-selected { + align-items: center; + background-color: #ebeffa; + border: none; + border-radius: 0px; + display: flex; + justify-content: flex-end; + min-height: 4.2rem; + padding-left: 1.2rem; + + .ss-arrow { + font-size: 1.8rem; + margin: 0 18px 0 0; + + span { + border: solid $color-244-73-62; + border-width: 0 2px 2px 0; + } + } + } + } + } + + >input[type='submit'] { + background-color: transparent; + border: 1px solid #6157e5; + color: #6157e5; + font-size: 1.4rem; + align-self: flex-end; + margin-bottom: 0.6rem; + margin-left: 4.2rem; + } + } + .form-container>form { margin-top: 2.7rem; } diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 776381b..51cc2af 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -145,6 +145,7 @@ } img { + background-color: white; height: 100%; object-fit: cover; object-position: center; diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 8fa3b61..c57f4a6 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -56,14 +56,14 @@ h6 { font-weight: 600; padding: 0; - span { + /*span { font-weight: 400; padding-left: 0.85rem; &:before { content: '// '; } - } + }*/ } h1 { @@ -75,7 +75,7 @@ h2 { } h3 { - font-size: 1.6rem; + font-size: 1.7rem; } h4 { @@ -109,6 +109,10 @@ a { padding: 5rem; } +%padding-block { + padding: 3.2rem; +} + .content-box { @include window-style-modal(); display: flex; @@ -119,7 +123,7 @@ a { &.full-width { background: $color-0-0-100; flex: 1; - font-size: 1.5rem; + font-size: 1.6rem; margin: 0 auto; min-height: calc(100vh - 84px); } @@ -129,6 +133,45 @@ a { } } +.content-box__header { + padding: 2.3rem 3rem; + + div { + color: $color-233-18-29; + display: flex; + font-size: 2rem; + + &>* { + align-self: center; + } + + .name { + font-size: 2rem; + font-weight: bold; + margin: 1.1rem 0; + } + } +} + +.content-box__header.with-edit { + border-bottom: 1px solid $color-221-51-90; + display: flex; + justify-content: space-between; + + sib-display { + display: flex; + text-transform: uppercase; + } + + sib-link { + display: flex; + &::before { + align-self: center; + display: flex; + } + } +} + .drive { width: 100%; border: 0; @@ -151,6 +194,15 @@ a { } } +.editlink { + + @include icon('pencil'); + background: $color-244-73-62; + border-radius: 50%; + color: white; + padding: 12px; +} + .name { color: $color-216-4-22; font-size: 2rem; diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index ee78562..ce38dc6 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -1,4 +1,5 @@ @import 'chat'; +@import 'comment.scss'; @import 'filters'; @import 'howto'; @import 'sidebar'; diff --git a/src/styles/components/chat.scss b/src/styles/components/chat.scss index 3683b44..1004736 100644 --- a/src/styles/components/chat.scss +++ b/src/styles/components/chat.scss @@ -1,20 +1,3 @@ - -// chat -.chat-header { - - div { - color: $color-233-18-29; - display: flex; - flex-direction: column; - margin: 3rem; - - &>:first-child { - font-size: 2rem; - font-weight: bold; - } - } -} - .chat-view { padding: 0; height: calc(100vh - 84px - 83px); diff --git a/src/styles/components/user-role.scss b/src/styles/components/user-role.scss index fed7680..4e2c47e 100644 --- a/src/styles/components/user-role.scss +++ b/src/styles/components/user-role.scss @@ -5,5 +5,5 @@ font-size: 1.4rem; font-weight: 400; margin-right: 0.4rem; - padding: calc(1.6rem - 0.8em) 0.7em; + padding: 0.2rem 0.98rem; } \ No newline at end of file diff --git a/src/styles/layout/circle-profile/circle-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss index 1df3fff..c4d75e4 100644 --- a/src/styles/layout/circle-profile/circle-profile.scss +++ b/src/styles/layout/circle-profile/circle-profile.scss @@ -1,79 +1,134 @@ #circle-profile { - .block-group > div { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - margin: 0; - padding: 0; + .content-box__info { + @extend %padding-block; + } - sib-display > div { - align-items: center; - box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14); - display: grid; - font-size: 1.6rem; - grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(3, 1fr); - height: auto; - justify-items: center; - margin: 1rem 0.5rem 1rem 0; - position: relative; - padding-right: 1rem; - padding-top: 1rem; - text-align: center; - width: 14em; + .block { - &:hover { - cursor: pointer; - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24); - top: -2px; - } + >form { /* peut-être à mettre dans main.scss */ + margin-bottom: 2.6rem; - > sib-set-default[name='teammate-img'] { - background-color: $color-215-9-73; - border-radius: 50%; - grid-column: 1 / span 2; - grid-row: 1 / span 2; - height: 6vh; - overflow: hidden; - width: 6vh; + .form-label.is-dark>label { + margin-top: 0; - img { - height: 100%; - left: 0; - object-fit: cover; - top: 0; - width: 100%; + >div:first-child { + @extend h3; + font-weight: bold; + margin: 0 0 1.4rem; + text-transform: uppercase; } } + } - sib-set-default[name='teammate-name'] { - grid-column: 3 / span 2; - grid-row: 1 / span 1; + >div { /* peut-être à mettre dans main.scss */ + display: flex; + flex-direction: column; + margin-bottom: 2.6rem; + position: relative; + + >[name^='label'] { + @extend h3; + font-weight: bold; + margin: 0 0 1.4rem; + text-transform: uppercase; } - > sib-set-default[name='teammate-pseudonym'] { - align-self: start; - font-size: 1.2rem; - grid-column: 3 / span 2; - grid-row: 2 / span 1; + >[name='description'] { + max-width: 80%; } - > sib-display-value[name='teammate-profile'] { - color: $color-216-4-22; - display: block; - font-size: 1.2rem; - grid-column: 1 / span 2; - grid-row: 3 / span 1; - } + >[name='entitled'] { + align-self: flex-end; + position: absolute; - > sib-display-value[name='teammate-contact'] { - color: $color-244-73-62; - font-size: 1.2rem; - justify-self: stretch; - grid-column: 3 / span 2; - grid-row: 3 / span 1; + >*:first-child { + margin-right: 0.8rem; + } + } + + >sib-multiple { + + label { + display: none; + } + + >div>team-template[name='team']>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='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; + } + } + } + } } } } -} \ No newline at end of file +} diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index e8b8cdc..1a8b0f2 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -6,7 +6,7 @@ [name^='label-'] { display: block; font-weight: bold; - margin-bottom: 1.4rem; + margin: 1.4rem 0; text-transform: uppercase; @extend h2; } diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug new file mode 100644 index 0000000..62f7b37 --- /dev/null +++ b/src/templates/hd-circle-team.pug @@ -0,0 +1,16 @@ +include hd-user-avatar.pug + +sib-widget(name='team-template') + template + sib-display( + data-src="${await value}" + fields='account.picture, sup(name, groups), sub(profile.city)' + + widget-account.picture='hd-user-avatar' + widget-groups='hd-user-groups' + + multiple-groups='' + ) + +sib-widget(name='hd-user-groups') + template ${await value.name} diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug index f529ecf..9a89ada 100644 --- a/src/templates/template-team.pug +++ b/src/templates/template-team.pug @@ -21,3 +21,4 @@ sib-widget(name='team-template') data-src="${value.user ? value.user['@id'] : ''}" fields='username' ) + From 67697ab03dd1aa92662a1611ea3caa2f91bf6644 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 24 Oct 2019 11:21:35 +0200 Subject: [PATCH 022/100] route for edit ok --- src/index.pug | 1 + src/menu-left.pug | 2 +- src/page-circle-edit.pug | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.pug b/src/index.pug index 2752f66..d903a37 100644 --- a/src/index.pug +++ b/src/index.pug @@ -36,6 +36,7 @@ html(lang="en") include page-circle.pug #circle-edit(hidden).no-sidebar + sib-link(class="backlink", bind-resources) Back include page-circle-edit.pug #messages(hidden).with-sidebar diff --git a/src/menu-left.pug b/src/menu-left.pug index 327780b..71a8de7 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -77,7 +77,7 @@ nav#main__menu order-by='username' next='messages' ) - sib-route(hidden, name='circle-edit') + sib-route(hidden, name='circle-edit', use-id) //- div.divider //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 73a9f43..bedbed6 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -1,4 +1,4 @@ -#circle-edit.content-box.with-padding.with-form.full-width +#circle-edit.content-box.with-padding.with-form include templates/hd-user-avatar.pug From b18fb237f2038469919ab091ebf4dad5c07f8a9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 24 Oct 2019 11:22:38 +0200 Subject: [PATCH 023/100] delete former route --- src/page-circle.pug | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/page-circle.pug b/src/page-circle.pug index d60080a..25f48b3 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -3,8 +3,6 @@ include page-circle-chat.pug #circle-profile include page-circle-profile.pug - //-#circle-edit - include page-circle-edit.pug //-#circle-create include page-circle-create.pug nav.jsRightMenu(role='navigation') @@ -18,9 +16,6 @@ nav.jsRightMenu(role='navigation') sib-route(name='circle-profile') li a Information - //-sib-route(name='circle-edit') - li - a Edit //-sib-route(name='circle-create') li a Add new From bf2b89d6d4702df6a9617657ca91746964daf75f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 24 Oct 2019 14:53:29 +0200 Subject: [PATCH 024/100] sib link --- src/index.pug | 7 ++++++- src/menu-left.pug | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/index.pug b/src/index.pug index d903a37..e05f554 100644 --- a/src/index.pug +++ b/src/index.pug @@ -36,7 +36,12 @@ html(lang="en") include page-circle.pug #circle-edit(hidden).no-sidebar - sib-link(class="backlink", bind-resources) Back + sib-action.backlink( + bind-resources + label='Back' + data-src='${src}' + ) + sib-link(class='backlink', bind-resources, next='') Back include page-circle-edit.pug #messages(hidden).with-sidebar diff --git a/src/menu-left.pug b/src/menu-left.pug index 71a8de7..900d002 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -77,7 +77,7 @@ nav#main__menu order-by='username' next='messages' ) - sib-route(hidden, name='circle-edit', use-id) + sib-route(hidden, name='circle-edit', use-id='') //- div.divider //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') From a4314210b4fb5a5abd54c822363a65b5888656cb Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Thu, 24 Oct 2019 21:23:11 +0200 Subject: [PATCH 025/100] update: working form + back link --- src/index.pug | 2 +- src/page-circle-edit.pug | 21 ++++++++++++++++----- src/styles/base/main.scss | 4 ---- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/index.pug b/src/index.pug index d903a37..76d9580 100644 --- a/src/index.pug +++ b/src/index.pug @@ -36,7 +36,7 @@ html(lang="en") include page-circle.pug #circle-edit(hidden).no-sidebar - sib-link(class="backlink", bind-resources) Back + sib-link(class="backlink", bind-resources, next='circle') Back include page-circle-edit.pug #messages(hidden).with-sidebar diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index bedbed6..3661352 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -17,10 +17,19 @@ widget-groups='hd-user-groups' ) - sib-delete( + sib-ac-checker( + permission="acl:Delete" + data-src="${await value['@id']}" + ) + sib-delete( + data-src="${await 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-label='Delete from circle' - resourceDeleted='' ) h1 Edit your circle @@ -40,10 +49,12 @@ widget-owner='sib-form-auto-completion' widget-description='sib-form-textarea' - submit-button='Register' + partial='' + + submit-button='Save' ) - h2 List of members + h2 Members list div.table-header div.cell Name diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 59c74c5..5e8464c 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -7,10 +7,6 @@ $breakpoints: (phone: 480px, display: none !important; } -sib-ac-checker[hidden] { - display: block !important; -} - * { outline: none; } From 9e3dc8fe8c1064f61c4c081da0274f13e31fd21d Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Thu, 24 Oct 2019 21:44:35 +0200 Subject: [PATCH 026/100] fix: edit template dup name --- src/page-circle-edit.pug | 4 ++-- src/styles/layout/circle-profile/circle-edit.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 3661352..f03f232 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -5,7 +5,7 @@ sib-widget(name='hd-user-groups') template ${await value.name} - sib-widget(name='team-template') + sib-widget(name='team-template-edit') template sib-display( data-src='${await value.user}' @@ -65,5 +65,5 @@ fields='members' multiple-members='' - widget-members='team-template' + widget-members='team-template-edit' ) diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss index 1b182fb..1c3fe92 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -25,7 +25,7 @@ h2 { } } -.table-body div team-template { +.table-body div team-template-edit { display: flex; justify-content: space-between; @@ -56,13 +56,13 @@ h2 { } } -sib-multiple[widget='team-template'] { +sib-multiple[widget='team-template-edit'] { label { display: none; } - >div>team-template>sib-display>div { + >div>team-template-edit>sib-display>div { display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; From 48075b241937f372560c7cf6f169cd6112871d8f Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Thu, 24 Oct 2019 22:03:15 +0200 Subject: [PATCH 027/100] update: imbricate edit in profile & fix css --- src/index.pug | 4 - src/menu-left.pug | 1 - src/page-circle-edit.pug | 8 +- src/page-circle-profile.pug | 90 ++++++++++--------- src/page-circle.pug | 9 +- src/styles/components/sidebar.scss | 2 +- .../layout/circle-profile/circle-profile.scss | 7 +- 7 files changed, 63 insertions(+), 58 deletions(-) diff --git a/src/index.pug b/src/index.pug index 76d9580..cf0f8d0 100644 --- a/src/index.pug +++ b/src/index.pug @@ -35,10 +35,6 @@ html(lang="en") #circle(hidden).with-sidebar include page-circle.pug - #circle-edit(hidden).no-sidebar - sib-link(class="backlink", bind-resources, next='circle') Back - include page-circle-edit.pug - #messages(hidden).with-sidebar include page-messages.pug diff --git a/src/menu-left.pug b/src/menu-left.pug index 89f082a..1213473 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -81,7 +81,6 @@ nav#main__menu order-by='username' next='messages' ) - sib-route(hidden, name='circle-edit', use-id='') //- div.divider //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index f03f232..1121969 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -1,4 +1,4 @@ -#circle-edit.content-box.with-padding.with-form +div.content-box__info include templates/hd-user-avatar.pug @@ -32,8 +32,10 @@ data-src="${await value['@id']}" ) + sib-link(class="backlink", bind-resources, next='circle-profile') Back + h1 Edit your circle - + sib-form.block( bind-resources @@ -53,7 +55,7 @@ submit-button='Save' ) - + h2 Members list div.table-header diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 507818a..72d0f52 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -1,49 +1,55 @@ .content-box.full-width.with-form + sib-router(default-route='circle-profile') + sib-route(name='circle-profile') + sib-route(name='circle-edit') - include templates/hd-circle-team.pug - - div.content-box__header.with-edit - sib-display( - bind-resources - fields='name' + #circle-profile(hidden) + include templates/hd-circle-team.pug + + div.content-box__header.with-edit + sib-display( + bind-resources + fields='name' - class-name='name' - ) - - sib-link(class="editlink", next="circle-edit" bind-resources) - - div.content-box__info - - sib-display.block( - bind-resources - fields='label-description, description, entitled(title, creationDate)' - - value-label-description='Description: ' - - default-description='No description available.' - - value-title='Creation date:' - ) - - sib-ac-checker(permission='acl:Write' bind-resources) - sib-form.block.team-form( - bind-resources - fields='team' - range-team=`${endpoints.users}` - partial='' - - class-team='team form-label is-dark' - label-team='Members:' - widget-team='sib-form-auto-completion' - - submit-button='Add a member' + class-name='name' ) - sib-display.block( - bind-resources - fields='team' + sib-link(class="editlink", next="circle-edit" bind-resources) - multiple-team='' - widget-team='team-template' - ) + div.content-box__info + sib-display.block( + bind-resources + fields='label-description, description, entitled(title, creationDate)' + + value-label-description='Description: ' + + default-description='No description available.' + + value-title='Creation date:' + ) + + sib-ac-checker(permission='acl:Write' bind-resources) + sib-form.block.team-form( + bind-resources + fields='team' + range-team=`${endpoints.users}` + partial='' + + class-team='team form-label is-dark' + label-team='Members:' + widget-team='sib-form-auto-completion' + + submit-button='Add a member' + ) + + sib-display.block( + bind-resources + fields='team' + + multiple-team='' + widget-team='team-template' + ) + + #circle-edit(hidden) + include page-circle-edit.pug \ No newline at end of file diff --git a/src/page-circle.pug b/src/page-circle.pug index 25f48b3..f132b75 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,7 +1,7 @@ .views-container - #circle-chat + #circle-chat(hidden) include page-circle-chat.pug - #circle-profile + #circle-information(hidden) include page-circle-profile.pug //-#circle-create include page-circle-create.pug @@ -13,9 +13,6 @@ nav.jsRightMenu(role='navigation') sib-route(name='circle-chat') li a Chat - sib-route(name='circle-profile') + sib-route(name='circle-information') li a Information - //-sib-route(name='circle-create') - li - a Add new diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 2377358..cea2695 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -89,7 +89,7 @@ @include ci('list'); } - &[name$='profile']>li { + &[name$='profile']>li, &[name$='information']>li { @include ci('information'); } diff --git a/src/styles/layout/circle-profile/circle-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss index c4d75e4..834985a 100644 --- a/src/styles/layout/circle-profile/circle-profile.scss +++ b/src/styles/layout/circle-profile/circle-profile.scss @@ -1,7 +1,12 @@ -#circle-profile { +#circle-information, #circle-edit { .content-box__info { @extend %padding-block; + + .backlink { + text-align: right; + display: block; + } } .block { From 8e7547d06b8230a53d222b5e87d9eb43ac602805 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Thu, 24 Oct 2019 22:26:47 +0200 Subject: [PATCH 028/100] fix: fixing sib-ac-checker --- src/page-circle-profile.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 72d0f52..ae12929 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -29,7 +29,7 @@ value-title='Creation date:' ) - sib-ac-checker(permission='acl:Write' bind-resources) + sib-ac-checker(permission='acl:Write' bind-resources, nested-field='team') sib-form.block.team-form( bind-resources fields='team' From d4279b0c7a36b2ac58bbdee990731ad86f1ef753 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 25 Oct 2019 15:35:14 +0200 Subject: [PATCH 029/100] 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 1170e8b6191a30ca863419814d42db57477d8ab6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 25 Oct 2019 15:06:39 +0200 Subject: [PATCH 030/100] fix: CSS fix on circle-edit page --- src/styles/_index.scss | 2 +- .../{circle-profile => circle}/_index.scss | 0 .../circle-edit.scss | 25 +++++++++++++------ .../circle-profile.scss | 0 4 files changed, 18 insertions(+), 9 deletions(-) rename src/styles/layout/{circle-profile => circle}/_index.scss (100%) rename src/styles/layout/{circle-profile => circle}/circle-edit.scss (90%) rename src/styles/layout/{circle-profile => circle}/circle-profile.scss (100%) diff --git a/src/styles/_index.scss b/src/styles/_index.scss index 3abbbe1..2a48801 100644 --- a/src/styles/_index.scss +++ b/src/styles/_index.scss @@ -17,6 +17,6 @@ div#viewport { @import 'layout/members/index'; @import 'layout/job-offers/index'; @import 'layout/project-profile/index'; - @import 'layout/circle-profile/index'; + @import 'layout/circle/index'; @import 'layout/user/index'; } diff --git a/src/styles/layout/circle-profile/_index.scss b/src/styles/layout/circle/_index.scss similarity index 100% rename from src/styles/layout/circle-profile/_index.scss rename to src/styles/layout/circle/_index.scss diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss similarity index 90% rename from src/styles/layout/circle-profile/circle-edit.scss rename to src/styles/layout/circle/circle-edit.scss index 1c3fe92..547e399 100644 --- a/src/styles/layout/circle-profile/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -20,8 +20,12 @@ h2 { width: 50%; } - >*:first-of-type { - border-right: 1px solid white; + >*:last-of-type { + border-left: 1px solid white; + + @media (max-width: 1220px) { + display: none; + } } } @@ -34,18 +38,23 @@ h2 { flex: 1; width: 50%; } - - >*:nth-child(odd) { + + sib-display { 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; + + sib-ac-checker { + align-items: center; border-right: 1px solid $color-228-25-79; + display: flex; justify-content: flex-end; padding: 2.7rem 2.2rem; + + @media (max-width: 1220px) { + display: none; + } } } @@ -107,11 +116,11 @@ sib-multiple[widget='team-template-edit'] { [name='name'] { font-weight: 600; + margin-right: 1rem; } sib-multiple { display: flex; - margin-left: 1rem; [name='groups'] { @extend %user-role; diff --git a/src/styles/layout/circle-profile/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss similarity index 100% rename from src/styles/layout/circle-profile/circle-profile.scss rename to src/styles/layout/circle/circle-profile.scss From 09f35bd3c0a66cbe939eb1b98633853a3034a9c1 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 25 Oct 2019 19:15:45 +0200 Subject: [PATCH 031/100] 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 032/100] 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 033/100] 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 034/100] 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 9489fece131039707c774b2b46615e8a9fa1c671 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 24 Oct 2019 18:23:46 +0200 Subject: [PATCH 035/100] route for circle admin ok --- src/index.pug | 3 +++ src/menu-left.pug | 1 + src/page-circle-admin.pug | 1 + src/page-user-panel.pug | 4 ++-- 4 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 src/page-circle-admin.pug diff --git a/src/index.pug b/src/index.pug index cf0f8d0..302da84 100644 --- a/src/index.pug +++ b/src/index.pug @@ -35,6 +35,9 @@ html(lang="en") #circle(hidden).with-sidebar include page-circle.pug + #circle-admin(hidden).no-sidebar + include page-circle-admin.pug + #messages(hidden).with-sidebar include page-messages.pug diff --git a/src/menu-left.pug b/src/menu-left.pug index 1213473..b40adb4 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -82,6 +82,7 @@ nav#main__menu next='messages' ) + sib-route(hidden, name='circle-admin', use-id='') //- div.divider //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') diff --git a/src/page-circle-admin.pug b/src/page-circle-admin.pug new file mode 100644 index 0000000..507ce0b --- /dev/null +++ b/src/page-circle-admin.pug @@ -0,0 +1 @@ +h1 Hello! \ No newline at end of file diff --git a/src/page-user-panel.pug b/src/page-user-panel.pug index d3491ac..76e1a32 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='circle-admin') Admin button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out From af0db1462e65d6077d8e2db58445fb5dace750e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 24 Oct 2019 19:07:56 +0200 Subject: [PATCH 036/100] name + owner displayed --- src/page-circle-admin.pug | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/page-circle-admin.pug b/src/page-circle-admin.pug index 507ce0b..f13b5b2 100644 --- a/src/page-circle-admin.pug +++ b/src/page-circle-admin.pug @@ -1 +1,9 @@ -h1 Hello! \ No newline at end of file +h1 Circles + +div + //- Search a circle + +sib-display( + data-src=`${endpoints.circles}` + fields='name, owner.username' +) \ No newline at end of file From fc7732b1b98711c06f9f45f0cc46eb5acfa62a63 Mon Sep 17 00:00:00 2001 From: Christophe Henry Date: Fri, 25 Oct 2019 15:38:35 +0200 Subject: [PATCH 037/100] feat: add circles display --- src/page-circle-admin.pug | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/page-circle-admin.pug b/src/page-circle-admin.pug index f13b5b2..43ae78d 100644 --- a/src/page-circle-admin.pug +++ b/src/page-circle-admin.pug @@ -1,9 +1,32 @@ h1 Circles +sib-widget(name='template-admin-circle') + template + sib-display( + fields='name' + bind-resources + ) + sib-display( + data-src='${await value.owner}' + fields='account.picture, sup(name)' + widget-account.picture='hd-user-avatar' + ) + sib-display( + fields='team' + bind-resources + ) + div //- Search a circle -sib-display( +div.table-header + div.cell Name + div.cell Admins + div.cell Join + +sib-display.table-body( data-src=`${endpoints.circles}` - fields='name, owner.username' + fields='circles(name, team, owner)' + multiple-circles + widget-circles='template-admin-circle' ) \ No newline at end of file From 6139c5df1935c236824a0d183b9db6daaa4d5632 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Sun, 27 Oct 2019 18:21:17 +0100 Subject: [PATCH 038/100] fix: double vertical scrollbar on chat fixed --- src/styles/base/main.scss | 2 +- src/styles/components/sidebar.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 4a12793..e534537 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -151,7 +151,7 @@ sib-delete { } .content-box__header { - padding: 2.3rem 3rem; + padding: 1.9rem 3rem; div { color: $color-233-18-29; diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index cea2695..f9d2499 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -45,7 +45,7 @@ border-bottom: 1px solid $color-229-25-79; display: flex; margin: 0; - padding: 2.55rem 2.55rem; + padding: 2.15rem 2.55rem; position: relative; width: 12em; 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 039/100] 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 040/100] 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 9db2e1b99b254dc8a35276cb00f3549dc0558619 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 25 Oct 2019 15:35:14 +0200 Subject: [PATCH 041/100] 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 +- src/styles/layout/circle/circle-edit.scss | 243 +++++++++--------- src/styles/layout/circle/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, 253 insertions(+), 161 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/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 547e399..cd5bfc5 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -1,149 +1,146 @@ -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%; - } - - >*: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%; + } -.member-select.color { + >*:last-of-type { + border-left: 1px solid white; - .ss-main { - color: $color-233-18-29; - } -} - -sib-multiple[widget='team-template-edit'] { - - label { - display: none; + @media (max-width: 1220px) { + 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); + .table-body div team-template-edit { + display: flex; + justify-content: space-between; - >[name='account.picture'] { + >* { + 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; - 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%; - } + @media (max-width: 1220px) { + display: none; + } + } + } - object { - height: 45%; - width: 45%; - } + .member-select.color { + + .ss-main { + color: $color-233-18-29; + } + } + + sib-multiple[widget='team-template-edit'] { + + label { + display: none; } - >[name='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + >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='name'] { - font-weight: 600; - margin-right: 1rem; - } - - sib-multiple { + >[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; - [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; + margin-right: 1rem; + } + + sib-multiple { + display: flex; + + [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 +} diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 834985a..b77392c 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/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 cb22295aa697c660eca3e4624b16da902eabc971 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 25 Oct 2019 19:15:45 +0200 Subject: [PATCH 042/100] 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 +++-- 10 files changed, 141 insertions(+), 36 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)); From 6803b965fbd90f645254e654589f08bb78d43066 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 25 Oct 2019 19:17:48 +0200 Subject: [PATCH 043/100] 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 7a24d37d8fcab9224ce21a0a08098d9aa92f10ce Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 28 Oct 2019 13:55:43 +0100 Subject: [PATCH 044/100] 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 71dc40a7f4cf4a9ce9521d8093e1f663e725d9c7 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 045/100] 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 e534537..6362be0 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 27bea38d881bd3e1eeec1f5ca07bf965e04a87e5 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 046/100] 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 1489f1b1cbf33d12fe8e63408cc023701101aed6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 29 Oct 2019 13:34:29 +0100 Subject: [PATCH 047/100] edit button ok --- src/page-circle-profile.pug | 130 +++++++++---------- src/styles/layout/circle/circle-profile.scss | 11 ++ 2 files changed, 75 insertions(+), 66 deletions(-) diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 04bb600..577415d 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -16,85 +16,83 @@ class-description='description' ) - div.content-box__info + sib-ac-checker.content-box__info(permission='acl:Read', bind-resources) + sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources) + sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members - 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 + sib-display.block( + bind-resources + fields='creationDateSet(title, creationDate)' - sib-display.block( + value-title='Creation date:' + + widget-creationDate='sib-display-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 + nested-field='members' + fields='user' + range-user=`${endpoints.users}` + + 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' + + multiple-team='' + widget-team='circle-team-template' + ) + + sib-ac-checker(permission='acl:Delete', bind-resources) + sib-delete( bind-resources - fields='creationDateSet(title, creationDate)' - - value-title='Creation date:' - - widget-creationDate='sib-display-date' + data-label='Delete Circle' + class='right-btn reversed-btn' ) - - 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 - nested-field='members' - fields='user' - range-user=`${endpoints.users}` - - 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' - - 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-widget(name='join-leave-circle-button') - template - sib-ac-checker( - permission="acl:Delete" + sib-delete( data-src="${value['@id']}" + data-label='Leave circle' ) - sib-delete( - data-src="${value['@id']}" - data-label='Leave circle' - ) - sib-display( - bind-resources - fields='members' + sib-display( + bind-resources + fields='members' - multiple-members='' - widget-members='join-leave-circle-button' - ) + 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' + 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" + set-user-id-select="user" - submit-button='Join Circle' - ) + submit-button='Join Circle' + ) #circle-edit(hidden) diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index b77392c..7d86fe9 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -8,11 +8,22 @@ .content-box__info { @extend %padding-block; + display: flex; + flex-direction: column; .backlink { text-align: right; display: block; } + + .circle-edit-button { + align-self: flex-end; + position: absolute; + + >sib-link { + background: $color-244-73-62; + } + } } .block { From 5eb9b6aad8a24a0a98eea7edbdd3dbd4117cc342 Mon Sep 17 00:00:00 2001 From: Christophe Henry Date: Mon, 28 Oct 2019 12:08:22 +0100 Subject: [PATCH 048/100] feat: add template for circle admin page --- src/page-circle-admin.pug | 50 ++++++++++++------- src/styles/base/main.scss | 3 +- src/styles/base/user-avatar.scss | 29 +++++++++++ src/styles/layout/circle/_index.scss | 3 +- src/styles/layout/circle/circle-admin.scss | 3 ++ src/styles/layout/circle/circle-edit.scss | 15 +++++- .../project-profile/project-profile.scss | 33 ------------ 7 files changed, 80 insertions(+), 56 deletions(-) create mode 100644 src/styles/base/user-avatar.scss create mode 100644 src/styles/layout/circle/circle-admin.scss diff --git a/src/page-circle-admin.pug b/src/page-circle-admin.pug index 43ae78d..2731be5 100644 --- a/src/page-circle-admin.pug +++ b/src/page-circle-admin.pug @@ -1,20 +1,28 @@ -h1 Circles +sib-widget(name='circle-admin-leave-button-template') + template + sib-ac-checker( + permission="acl:Delete" + data-src="${await value['@id']}" + ) + sib-delete( + data-src="${await value['@id']}" + data-label='Leave the circle' + ) -sib-widget(name='template-admin-circle') - template - sib-display( - fields='name' - bind-resources - ) - sib-display( - data-src='${await value.owner}' - fields='account.picture, sup(name)' - widget-account.picture='hd-user-avatar' - ) - sib-display( - fields='team' - bind-resources - ) +sib-widget(name='circle-admin-join-button-template') + template + sib-form.circle-admin-join-button( + data-src='${src}' + nested-field='members' + fields='user' + widget-user='sib-form-dropdown' + label-user='' + range-user=`${endpoints.users}` + submit-button='Join' + set-user-id-select="user" + ) + +h1 Circles div //- Search a circle @@ -26,7 +34,11 @@ div.table-header sib-display.table-body( data-src=`${endpoints.circles}` - fields='circles(name, team, owner)' - multiple-circles - widget-circles='template-admin-circle' + fields="name,own(owner.name,owner.account['@id']),members,button" + + widget-members='circle-admin-leave-button-template' + multiple-members + + widget-button='circle-admin-join-button-template' + action-button='button' ) \ No newline at end of file diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 4a12793..b4e3ce1 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -260,4 +260,5 @@ sib-delete { // Other base components @import 'form'; @import 'header'; -@import 'menu-left'; \ No newline at end of file +@import 'menu-left'; +@import 'user-avatar'; \ No newline at end of file diff --git a/src/styles/base/user-avatar.scss b/src/styles/base/user-avatar.scss new file mode 100644 index 0000000..0c93093 --- /dev/null +++ b/src/styles/base/user-avatar.scss @@ -0,0 +1,29 @@ +.project-profile-user-avatar { + align-self: center; + grid-column: 1 / span 1; + grid-row: 1 / span 2; + display: inline; + + * { + height: 100%; + width: 100%; + } + + div { + background-color: $color-0-0-100; + border-radius: 50%; + height: 7vh; + overflow: hidden; + position: relative; + width: 7vh; + + img { + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + } + } +} \ No newline at end of file diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss index 6efac3d..350cfc1 100644 --- a/src/styles/layout/circle/_index.scss +++ b/src/styles/layout/circle/_index.scss @@ -1,2 +1,3 @@ @import 'circle-profile'; -@import 'circle-edit'; \ No newline at end of file +@import 'circle-edit'; +@import 'circle-admin'; \ No newline at end of file diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss new file mode 100644 index 0000000..04813c0 --- /dev/null +++ b/src/styles/layout/circle/circle-admin.scss @@ -0,0 +1,3 @@ +.circle-admin-join-button select[name='user'] { + display: none; +} \ No newline at end of file diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 547e399..f5812cf 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -13,11 +13,22 @@ h2 { justify-content: space-around; text-align: center; - >*{ - border-right: 1px solid $color-228-25-79; + .cell { + border-bottom: none; + border-top: none; flex: 1; padding: 1rem; width: 50%; + + &:not(:last-child) { + border-left: none; + border-right: 1px solid white; + } + + &:not(:last-child) { + border-left: 1px solid white; + border-right: none; + } } >*:last-of-type { diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index 1a8b0f2..ae54b38 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -169,30 +169,6 @@ display: none; } - sib-display.project-profile-user-avatar { - align-self: center; - grid-column: 1 / span 1; - grid-row: 1 / span 2; - - div { - background-color: $color-0-0-100; - border-radius: 50%; - height: 7vh; - overflow: hidden; - position: relative; - width: 7vh; - - img { - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } - } - } - team-template[name='members'], captain-template[name='captain'] { display: grid; grid-column-gap: 1.6rem; @@ -231,13 +207,4 @@ } } } - - .project-profile-user-avatar { - display: inline; - - * { - height: 100%; - width: 100%; - } - } } \ No newline at end of file From 40eeef9d449dfde81eae0999c2bd7033009fc984 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 29 Oct 2019 14:38:59 +0100 Subject: [PATCH 049/100] 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" } From 250ad6c395a842d5435c382f96aa479e92c98021 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 29 Oct 2019 14:48:53 +0100 Subject: [PATCH 050/100] fix add member button (need refactoring) --- src/styles/base/form.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 96a97b0..1163209 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -169,6 +169,7 @@ align-self: flex-end; margin-bottom: 0.6rem; margin-left: 4.2rem; + margin-top: 0; } } From 3c72a4fee053fb0bbfd1848e5509e7968985115e Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 29 Oct 2019 14:59:57 +0100 Subject: [PATCH 051/100] update: user avatar on admin --- src/index.pug | 3 --- src/page-admin-circles.pug | 31 ++++++++++++++-------- src/page-circle-admin.pug | 44 -------------------------------- src/templates/hd-user-avatar.pug | 2 +- 4 files changed, 21 insertions(+), 59 deletions(-) delete mode 100644 src/page-circle-admin.pug diff --git a/src/index.pug b/src/index.pug index b453254..ab13cbd 100644 --- a/src/index.pug +++ b/src/index.pug @@ -35,9 +35,6 @@ html(lang="en") #circle(hidden).with-sidebar include page-circle.pug - #circle-admin(hidden).no-sidebar - include page-circle-admin.pug - #messages(hidden).with-sidebar include page-messages.pug diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 448bee2..2b302d4 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -8,7 +8,7 @@ #admin-circle-list(hidden) - sib-widget(name="admin-circle-leave") + sib-widget(name="circle-admin-leave-button-template") template sib-ac-checker( permission="acl:Delete" @@ -19,37 +19,46 @@ data-label='Leave' ) - sib-widget(name="admin-circle-join") + sib-widget(name="circle-admin-join-button-template") template //- BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521 - sib-form( + sib-form.circle-admin-join-button( data-src="${src}" nested-field='members' fields='user' + widget-user='sib-form-dropdown' label-user='' range-user=`${endpoints.users}` - widget-user='sib-form-dropdown' - - set-user-id-select="user" - submit-button='Join' + set-user-id-select="user" ) + include hd-user-avatar.pug div.content-box__info sib-link(class="right-btn", next="admin-circle-create") Create a new circle + h3 Circles - sib-display.block( + + div.table-header + div.cell Name + div.cell Admins + div.cell Join + + sib-display.table-body( data-src=`${endpoints.circles}` - fields="name, owner.name, buttons(members, button)" + fields="name, own(owner.account.picture, owner.name), buttons(members, button)" search-fields="name" search-label-name="Search a Circle" multiple-groups="" - widget-members="admin-circle-leave" + widget-members="circle-admin-leave-button-template" multiple-members="" - widget-button="admin-circle-join" + + widget-button="circle-admin-join-button-template" action-button="button" + + widget-owner.account.picture='hd-user-avatar' ) diff --git a/src/page-circle-admin.pug b/src/page-circle-admin.pug deleted file mode 100644 index 2731be5..0000000 --- a/src/page-circle-admin.pug +++ /dev/null @@ -1,44 +0,0 @@ -sib-widget(name='circle-admin-leave-button-template') - template - sib-ac-checker( - permission="acl:Delete" - data-src="${await value['@id']}" - ) - sib-delete( - data-src="${await value['@id']}" - data-label='Leave the circle' - ) - -sib-widget(name='circle-admin-join-button-template') - template - sib-form.circle-admin-join-button( - data-src='${src}' - nested-field='members' - fields='user' - widget-user='sib-form-dropdown' - label-user='' - range-user=`${endpoints.users}` - submit-button='Join' - set-user-id-select="user" - ) - -h1 Circles - -div - //- Search a circle - -div.table-header - div.cell Name - div.cell Admins - div.cell Join - -sib-display.table-body( - data-src=`${endpoints.circles}` - fields="name,own(owner.name,owner.account['@id']),members,button" - - widget-members='circle-admin-leave-button-template' - multiple-members - - widget-button='circle-admin-join-button-template' - action-button='button' -) \ No newline at end of file diff --git a/src/templates/hd-user-avatar.pug b/src/templates/hd-user-avatar.pug index ec37182..8ee2dba 100644 --- a/src/templates/hd-user-avatar.pug +++ b/src/templates/hd-user-avatar.pug @@ -1,2 +1,2 @@ sib-widget(name='hd-user-avatar') - template ${value ? `` : ``} + template ${await value ? `` : ``} From 5adbd98f516c58c0ea8db883e8ef461452fd1788 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 29 Oct 2019 15:15:02 +0100 Subject: [PATCH 052/100] fix: path template & js leave button --- src/page-admin-circles.pug | 2 +- src/scripts/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 2b302d4..5d2bf04 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -33,7 +33,7 @@ set-user-id-select="user" ) - include hd-user-avatar.pug + include templates/hd-user-avatar.pug div.content-box__info sib-link(class="right-btn", next="admin-circle-create") Create a new circle diff --git a/src/scripts/index.js b/src/scripts/index.js index edb1ecc..0e786f7 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -47,7 +47,7 @@ document.addEventListener('DOMContentLoaded', function (event) { for(sibForm of document.querySelectorAll('[set-user-id-select]')) { sibForm.addEventListener('populate', () => { 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) { + 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 From c50e05530ee0ca34f4429318055b6dc8da662a79 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 29 Oct 2019 15:38:33 +0100 Subject: [PATCH 053/100] fix: js recursive parent selector for admin --- src/scripts/index.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/scripts/index.js b/src/scripts/index.js index 0e786f7..2648789 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -1,3 +1,13 @@ +function querySelectorParentChild(el, selector) { + while(el !== document.body) { + if(el.querySelector(selector)) { + break; + } + el = el.parentNode; + } + return el.querySelector(selector); +} + document.addEventListener('DOMContentLoaded', function (event) { const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper')); const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu')); @@ -46,11 +56,10 @@ document.addEventListener('DOMContentLoaded', function (event) { for(sibForm of document.querySelectorAll('[set-user-id-select]')) { sibForm.addEventListener('populate', () => { - 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 + document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label^="Leave"]').forEach((el)=>{ + querySelectorParentChild(el, 'sib-form[submit-button^="Join"]').style.display = "none"; + }); 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']+'"}'); From 4aa69a16056209403319368db40bb34d2fa36d9f Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 29 Oct 2019 15:48:37 +0100 Subject: [PATCH 054/100] update: simplify dom for circles --- src/page-circle-chat.pug | 23 ++--- src/page-circle-profile.pug | 176 +++++++++++++++++------------------- src/page-circle.pug | 23 +++-- 3 files changed, 107 insertions(+), 115 deletions(-) diff --git a/src/page-circle-chat.pug b/src/page-circle-chat.pug index 34b02a8..37a3cbc 100644 --- a/src/page-circle-chat.pug +++ b/src/page-circle-chat.pug @@ -1,16 +1,9 @@ -.content-box.full-width - sib-display.content-box__header( +.chat-view + sib-chat( + data-authentication='login', + data-auto-login='true', + data-bosh-service-url=`${xmpp}`, + data-debug='false', + data-locales-url='en', bind-resources - fields='name' - - class-name='name' - ) - .chat-view - sib-chat( - data-authentication='login', - data-auto-login='true', - data-bosh-service-url=`${xmpp}`, - data-debug='false', - data-locales-url='en', - bind-resources - ) \ No newline at end of file + ) \ No newline at end of file diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index f00c576..cacfcde 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -1,99 +1,87 @@ -.content-box.full-width.with-form - sib-router(default-route='circle-profile') - sib-route(name='circle-profile') - sib-route(name='circle-edit') +sib-router(default-route='circle-profile') + sib-route(name='circle-profile') + sib-route(name='circle-edit') - #circle-profile(hidden) - include templates/hd-circle-team.pug - - div.content-box__header.with-edit - sib-ac-checker(permission='acl:Read', bind-resources) - sib-display( - bind-resources - fields='name, description' +#circle-profile(hidden) + include templates/hd-circle-team.pug + .content-box__info + sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources) + sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members - class-name='name' - class-description='description' - ) + sib-display.block( + bind-resources + fields='creationDateSet(title, creationDate)' - sib-ac-checker.content-box__info(permission='acl:Read', bind-resources) - sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources) - sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members - - sib-display.block( - bind-resources - fields='creationDateSet(title, creationDate)' - - value-title='Creation date:' - - widget-creationDate='sib-display-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 - nested-field='members' - fields='user' - range-user=`${endpoints.users}` - - 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' - - 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' - ) + value-title='Creation date:' + widget-creationDate='sib-display-date' + ) - #circle-edit(hidden) - include page-circle-edit.pug + + 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 + nested-field='members' + fields='user' + range-user=`${endpoints.users}` + + 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' + + 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 diff --git a/src/page-circle.pug b/src/page-circle.pug index f132b75..d5989c6 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,10 +1,21 @@ .views-container - #circle-chat(hidden) - include page-circle-chat.pug - #circle-information(hidden) - include page-circle-profile.pug - //-#circle-create - include page-circle-create.pug + .content-box.full-width.with-form + div.content-box__header.with-edit + sib-ac-checker(permission='acl:Read', bind-resources) + sib-display( + bind-resources + fields='name, description' + + class-name='name' + class-description='description' + ) + div.content-box__info + sib-ac-checker(permission='acl:Read', bind-resources) + #circle-chat(hidden) + include page-circle-chat.pug + #circle-information(hidden) + include page-circle-profile.pug + nav.jsRightMenu(role='navigation') sib-router(default-route='circle-chat') ul From fda9e3dd22eb5f0b04b6c7a49ca30e61037b3be4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 30 Oct 2019 11:47:39 +0100 Subject: [PATCH 055/100] circle-info buttons styled + form buttons refactored --- src/page-circle-profile.pug | 70 ++++++++++---------- src/styles/base/form.scss | 35 ++++++---- src/styles/base/main.scss | 12 ++-- src/styles/layout/circle/circle-profile.scss | 9 +-- 4 files changed, 69 insertions(+), 57 deletions(-) diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index cacfcde..ffc0691 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -6,7 +6,7 @@ sib-router(default-route='circle-profile') include templates/hd-circle-team.pug .content-box__info sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources) - sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members + sib-link(class="button blue-button", next="circle-edit", bind-resources) Edit and add Members sib-display.block( bind-resources @@ -43,44 +43,46 @@ sib-router(default-route='circle-profile') widget-team='circle-team-template' ) - sib-ac-checker(permission='acl:Delete', bind-resources) - sib-delete( + div.box-button + sib-ac-checker(permission='acl:Delete', bind-resources) + sib-delete( + bind-resources + data-label='Delete Circle' + class='button reversed-btn right-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' + class='btn-margin-left' + ) + + sib-display( bind-resources - data-label='Delete Circle' - class='right-btn reversed-btn' + fields='members' + + multiple-members='' + widget-members='join-leave-circle-button' ) - 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-form.btn-margin-left( + bind-resources + nested-field='members' + fields='user' + label-user='' + range-user=`${endpoints.users}` + widget-user='sib-form-dropdown' - sib-display( - bind-resources - fields='members' + set-user-id-select="user" - 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' - ) + submit-button='Join Circle' + ) #circle-edit(hidden) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 1163209..68e758b 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -2,10 +2,6 @@ &.with-form { - sib-form { - padding-bottom: 2.55rem; - } - h1 { color: $color-233-18-29; font-weight: bold; @@ -86,20 +82,30 @@ } } - input[type='submit'], .right-btn, sib-delete.right-btn button { - background-color: $color-233-18-29; - border: none; + .button, + input[type='submit'], + sib-delete button { border-radius: 100em; - color: $color-0-0-100; cursor: pointer; font-size: 1.4rem; font-weight: bold; - margin-left: auto; - margin-top: 3.2rem; padding: 0.55rem 2.5rem; text-transform: uppercase; } + input[type='submit'] { + background-color: $color-233-18-29; + border: none; + color: $color-0-0-100; + margin-left: auto; + margin-top: 3.2rem; + } + + .blue-button { + background: $color-244-73-62; + color: white; + } + .reversed-btn, sib-delete.reversed-btn button { background-color: transparent; border: 1px solid #6157e5; @@ -113,6 +119,10 @@ padding: 0; } + .btn-margin-left { + margin-left: 2.2rem; + } + sib-form[set-user-id-select] { input[type="submit"] { @@ -163,9 +173,8 @@ >input[type='submit'] { background-color: transparent; - border: 1px solid #6157e5; - color: #6157e5; - font-size: 1.4rem; + border: 1px solid $color-244-73-62; + color: $color-244-73-62; align-self: flex-end; margin-bottom: 0.6rem; margin-left: 4.2rem; diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 25b26f2..1c21ee2 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -107,13 +107,13 @@ sib-delete { @include icon('close'); background-color: $color-233-18-29; border: none; - border-radius: 100em; + /*border-radius: 100em;*/ color: $color-0-0-100; - cursor: pointer; - font-size: 1.4rem; - font-weight: bold; - padding: 0.55rem 2.5rem; - text-transform: uppercase; + /*cursor: pointer;*/ + /*font-size: 1.4rem;*/ + /*font-weight: bold;*/ + /*padding: 0.55rem 2.5rem;*/ + /*text-transform: uppercase;*/ &::before { font-size: 1.6rem; diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 7d86fe9..fbc30f4 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -19,13 +19,14 @@ .circle-edit-button { align-self: flex-end; position: absolute; - - >sib-link { - background: $color-244-73-62; - } } } + .box-button { + display: flex; + justify-content: flex-end; + } + .block { >form { /* peut-être à mettre dans main.scss */ From db7b1116c34292e328c54284e508cf375ab486c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 30 Oct 2019 14:34:34 +0100 Subject: [PATCH 056/100] circle-admin: header ok --- src/page-admin-circles.pug | 5 +++-- src/styles/base/main.scss | 19 ------------------- 2 files changed, 3 insertions(+), 21 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 5d2bf04..f24c0a3 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -3,8 +3,9 @@ sib-route(name='admin-circle-list') sib-route(name='admin-circle-create') - div.content-box__header - h2 Administration + div.content-box__header.with-edit + div + p.name Administration #admin-circle-list(hidden) diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 1c21ee2..2713c06 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -170,25 +170,6 @@ sib-delete { } } -/* .content-box__header.with-edit { - border-bottom: 1px solid $color-221-51-90; - display: flex; - justify-content: space-between; - - sib-display { - display: flex; - text-transform: uppercase; - } - - sib-link { - display: flex; - &::before { - align-self: center; - display: flex; - } - } -} */ - .drive { width: 100%; border: 0; From 2c4ce4127b949570cf12c8f87445877765efd6f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 30 Oct 2019 15:29:23 +0100 Subject: [PATCH 057/100] create-button ok --- src/page-admin-circles.pug | 2 +- src/styles/base/form.scss | 5 +++++ src/styles/layout/circle/circle-profile.scss | 6 ++++-- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index f24c0a3..ac5d30e 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -37,7 +37,7 @@ include templates/hd-user-avatar.pug div.content-box__info - sib-link(class="right-btn", next="admin-circle-create") Create a new circle + sib-link(class='circle-add-button button yellow-button', next='admin-circle-create') Create a new circle h3 Circles diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 68e758b..a3e0971 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -106,6 +106,11 @@ color: white; } + .yellow-button { + background: $color-43-100-50; + color: white; + } + .reversed-btn, sib-delete.reversed-btn button { background-color: transparent; border: 1px solid #6157e5; diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index fbc30f4..88c96f8 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -1,4 +1,6 @@ -#circle-information, #circle-edit { +#circle-information, +#circle-edit, +#admin-circle-list { h2 { font-size: 1.7rem; @@ -16,7 +18,7 @@ display: block; } - .circle-edit-button { + .circle-edit-button, .circle-add-button { align-self: flex-end; position: absolute; } From 57045b44e325cf141b9f6c643ea23139bb3aeee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 30 Oct 2019 16:42:51 +0100 Subject: [PATCH 058/100] create-circle: table-headers ok --- src/page-admin-circles.pug | 2 -- src/styles/layout/circle/circle-edit.scss | 9 +++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index ac5d30e..3f89324 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -49,8 +49,6 @@ sib-display.table-body( data-src=`${endpoints.circles}` fields="name, own(owner.account.picture, owner.name), buttons(members, button)" - search-fields="name" - search-label-name="Search a Circle" multiple-groups="" widget-members="circle-admin-leave-button-template" diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index cd5bfc5..32387f5 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -1,4 +1,5 @@ -#circle-edit { +#circle-edit, +#admin-circle-list { .table-header { background: $color-228-25-79; @@ -10,14 +11,14 @@ text-align: center; >*{ - border-right: 1px solid $color-228-25-79; + border-right: 1px solid white; flex: 1; padding: 1rem; width: 50%; } >*:last-of-type { - border-left: 1px solid white; + border-right: 1px solid $color-228-25-79; @media (max-width: 1220px) { display: none; @@ -37,12 +38,12 @@ 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-left: 1px solid $color-228-25-79; border-right: 1px solid $color-228-25-79; display: flex; justify-content: flex-end; From 2661be13b6dc8d0b816a00c3ceb0743dab7dc204 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 4 Nov 2019 14:14:19 +0100 Subject: [PATCH 059/100] styles for admins ok. Need padding ? + refactoring --- src/page-admin-circles.pug | 25 +++++- src/styles/base/form.scss | 4 +- src/styles/layout/circle/circle-edit.scss | 92 ++++++++++++++++++++++- 3 files changed, 114 insertions(+), 7 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 3f89324..b28cd5f 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -34,7 +34,25 @@ set-user-id-select="user" ) - include templates/hd-user-avatar.pug + + + + sib-widget(name='team-template-edit') + template + sib-display( + data-src='${await value.user}' + fields='account.picture, sup(name, groups), sub(profile.city)' + + widget-account.picture='hd-user-avatar' + + multiple-groups='' + widget-groups='hd-user-groups' + ) + + + + + div.content-box__info sib-link(class='circle-add-button button yellow-button', next='admin-circle-create') Create a new circle @@ -46,9 +64,10 @@ div.cell Admins div.cell Join - sib-display.table-body( + //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" + sib-display.table-body.test( data-src=`${endpoints.circles}` - fields="name, own(owner.account.picture, owner.name), buttons(members, button)" + fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)' multiple-groups="" widget-members="circle-admin-leave-button-template" diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index a3e0971..b3c3889 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -38,7 +38,7 @@ flex-direction: column; } - sib-set-default { + /*sib-set-default { clear: both; display: flex; flex-wrap: wrap; @@ -48,7 +48,7 @@ float: left; width: 50%; } - } + }*/ label { display: flex; diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 32387f5..ab7425d 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -26,6 +26,94 @@ } } + .table-body.test>div>sib-display>div { + border-bottom: 1px solid $color-228-25-79; + display: flex; + justify-content: space-around; + + >* { + flex: 1; + border-left: 1px solid $color-228-25-79; + text-align: center; + } + + >*:last-child { + border-right: 1px solid $color-228-25-79; + } + + >sib-display-value[name='name'] { + color: #3C3F57; + font-weight: 600; + } + + >sib-set-default[name='own'] { + 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='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; + margin-right: 1rem; + } + } + + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; + + >[name$='username']:not(:empty) { + align-items: center; + display: flex; + + &::before { + content: '@'; + + } + } + } + } + } + .table-body div team-template-edit { display: flex; justify-content: space-between; @@ -74,7 +162,7 @@ grid-template-columns: 7vh auto; grid-template-rows: repeat(2, 5.2vh); - >[name='account.picture'] { + >[name$='account.picture'] { align-items: center; align-self: center; background-color: $color-213-20-91; @@ -111,7 +199,7 @@ grid-row: 1 / span 1; margin-bottom: 0.50rem; - [name='name'] { + [name$='name'] { font-weight: 600; margin-right: 1rem; } From ff2b07afb4e57f524f3fa208227da1a1e245c00f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 4 Nov 2019 14:34:03 +0100 Subject: [PATCH 060/100] buttons centered --- src/styles/layout/circle/circle-edit.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index ab7425d..1c44101 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -112,6 +112,16 @@ } } } + + >sib-set-default[name='buttons'] { + display: flex; + justify-content: center; + + >sib-multiple { + align-items: center; + display: flex; + } + } } .table-body div team-template-edit { From 12ffa2467a357c2d99a27d287af5a31469ced6ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 4 Nov 2019 15:12:11 +0100 Subject: [PATCH 061/100] create circle button ok --- src/styles/base/main.scss | 9 +++++++++ src/styles/layout/circle/circle-edit.scss | 1 + 2 files changed, 10 insertions(+) diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 2713c06..d43fd44 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -101,6 +101,15 @@ a { } } +sib-link.yellow-button { + @include icon('plus'); + + &::before { + font-size: 1.6rem; + margin-right: 1rem; + } +} + sib-delete { button { diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 1c44101..1ff4aef 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -44,6 +44,7 @@ >sib-display-value[name='name'] { color: #3C3F57; font-weight: 600; + padding-top: 2.5rem; } >sib-set-default[name='own'] { From 3b49ddadeefef7e48957f5b27e55f040f8f013eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 5 Nov 2019 15:00:10 +0100 Subject: [PATCH 062/100] ok title + button. --- src/page-admin-circles.pug | 7 +++++-- src/styles/layout/circle/circle-edit.scss | 11 +++++++++++ src/styles/layout/circle/circle-profile.scss | 2 +- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index b28cd5f..1045981 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -55,9 +55,12 @@ div.content-box__info - sib-link(class='circle-add-button button yellow-button', next='admin-circle-create') Create a new circle + + div.admin-header - h3 Circles + div.admin-header__title Circles + + sib-link(class='circle-add-button button yellow-button', next='admin-circle-create') Create a new circle div.table-header div.cell Name diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 1ff4aef..70822f7 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -244,3 +244,14 @@ } } } + +.admin-header{ + display: flex; + justify-content: space-between; + margin-bottom: 5rem; + + .admin-header__title { + @extend h3; + } +} + diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 88c96f8..aa97566 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -18,7 +18,7 @@ display: block; } - .circle-edit-button, .circle-add-button { + .circle-edit-button { align-self: flex-end; position: absolute; } From 3c7700e96686c445a754b87424d6702d2e60fec3 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 5 Nov 2019 16:52:34 +0000 Subject: [PATCH 063/100] update: semantic css for buttons --- src/styles/base/main.scss | 221 ++++++++++++++++++++++++++++---------- 1 file changed, 162 insertions(+), 59 deletions(-) diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index d43fd44..ea2ea9b 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -82,55 +82,6 @@ h5 { font-size: 2rem; } -button { - background: none; - border: none; - padding: 0; -} - -sib-route, -sib-link, -button, -input, -a { - cursor: pointer; - &:hover, - &:link, - &:active { - cursor: pointer; - } -} - -sib-link.yellow-button { - @include icon('plus'); - - &::before { - font-size: 1.6rem; - margin-right: 1rem; - } -} - -sib-delete { - - button { - @include icon('close'); - background-color: $color-233-18-29; - border: none; - /*border-radius: 100em;*/ - color: $color-0-0-100; - /*cursor: pointer;*/ - /*font-size: 1.4rem;*/ - /*font-weight: bold;*/ - /*padding: 0.55rem 2.5rem;*/ - /*text-transform: uppercase;*/ - - &::before { - font-size: 1.6rem; - margin-right: 1rem; - } - } -} - %padding-main { padding: 5rem; } @@ -231,15 +182,6 @@ sib-delete { } } -.editlink { - - @include icon('pencil'); - background: $color-244-73-62; - border-radius: 50%; - color: white; - padding: 12px; -} - .name { color: $color-216-4-22; font-size: 2rem; @@ -264,4 +206,165 @@ sib-delete { @import 'form'; @import 'header'; @import 'menu-left'; -@import 'user-avatar'; \ No newline at end of file +@import 'user-avatar'; + +// Button global CSS +sib-delete, +sib-route, +sib-link, +button, +input[type='submit'], +a, +.button { + display: inline-block; + cursor: pointer; + background: none; + border: none; + padding: 0; + + &.button { + padding: 0.55rem 2.5rem; + border-radius: 100em; + *, & { + font-size: 1.4rem; + } + + &.small { + *, & { + font-size: 1rem; + } + } + + &.text-bold { + *, & { + font-weight: bold; + } + } + + &.text-uppercase { + *, & { + text-transform: uppercase; + } + } + + &.rounded { + border-radius: 50%; + padding: 0.5rem 1rem; + } + + &.button-link { + border-radius: 100em; + *, & { + text-decoration: underline; + } + &:hover { + text-decoration: none; + } + } + + &.with-icon::before { + font-size: 1.6rem; + margin-right: 1rem; + &.icon-plus { + /* ... */ + } + &.icon-close { + /* ... */ + } + &.icon-edit { + /* ... */ + } + } + + &.button-yellow { + background-color: white; + *, & { + color: hsl(43, 100%, 50%); + } + &.bordered { + border: 1px solid hsl(43, 100%, 50%); + } + &:hover { + background-color: #FFCE51; + *, & { + color: white; + } + } + } + + &.button-blue { + background-color: white; + *, & { + color: hsl(244, 73%, 62%); + } + &.bordered { + border: 1px solid hsl(244, 73%, 62%); + } + &:hover { + background-color: hsl(244, 73%, 62%); + *, & { + color: white; + } + } + } + + &.button-dark { + color: hsl(233, 18%, 29%); + background-color: white; + &.bordered { + border: 1px solid hsl(233, 18%, 29%); + } + &:hover { + background-color: hsl(233, 18%, 29%); + color: white; + } + } + + &.reversed { + &.button-yellow { + background-color: hsl(43, 100%, 50%); + *, & { + color: white; + } + &:hover { + background-color: #FFCE51; + &.bordered { + border: 1px solid hsl(43, 100%, 50%); + } + } + } + + &.button-blue { + background-color: hsl(244, 73%, 62%); + *, & { + color: white; + } + &:hover { + background-color: white; + *, & { + color: hsl(244, 73%, 62%); + } + &.bordered { + border: 1px solid hsl(244, 73%, 62%); + } + } + } + + &.button-dark { + background-color: hsl(233, 18%, 29%); + *, & { + color: white; + } + &:hover { + background-color: white; + *, & { + color: hsl(233, 18%, 29%); + } + &.bordered { + border: 1px solid hsl(233, 18%, 29%); + } + } + } + } + } +} \ No newline at end of file From 372ee5c6e8fcdc1a44a327120d5c68ebe6875a05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 5 Nov 2019 19:58:40 +0100 Subject: [PATCH 064/100] sidebar corrected --- src/styles/base/main.scss | 94 ++++++++++++++++++++++-------- src/styles/components/sidebar.scss | 2 + 2 files changed, 71 insertions(+), 25 deletions(-) diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index ea2ea9b..4655bb7 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -225,38 +225,49 @@ a, &.button { padding: 0.55rem 2.5rem; border-radius: 100em; - *, & { + + *, + & { font-size: 1.4rem; } - + &.small { - *, & { + + *, + & { font-size: 1rem; } } &.text-bold { - *, & { + + *, + & { font-weight: bold; } } &.text-uppercase { - *, & { + + *, + & { text-transform: uppercase; } } - + &.rounded { border-radius: 50%; padding: 0.5rem 1rem; - } + } &.button-link { border-radius: 100em; - *, & { + + *, + & { text-decoration: underline; } + &:hover { text-decoration: none; } @@ -265,69 +276,90 @@ a, &.with-icon::before { font-size: 1.6rem; margin-right: 1rem; + &.icon-plus { - /* ... */ + @include icon('plus'); } + &.icon-close { - /* ... */ + @include icon('close'); } + &.icon-edit { - /* ... */ + @include icon('pencil'); } } - + &.button-yellow { background-color: white; - *, & { + + *, + & { color: hsl(43, 100%, 50%); } + &.bordered { border: 1px solid hsl(43, 100%, 50%); } + &:hover { background-color: #FFCE51; - *, & { + + *, + & { color: white; } } } - + &.button-blue { background-color: white; - *, & { + + *, + & { color: hsl(244, 73%, 62%); } + &.bordered { border: 1px solid hsl(244, 73%, 62%); } + &:hover { background-color: hsl(244, 73%, 62%); - *, & { + + *, + & { color: white; } } } - + &.button-dark { color: hsl(233, 18%, 29%); background-color: white; + &.bordered { border: 1px solid hsl(233, 18%, 29%); } + &:hover { background-color: hsl(233, 18%, 29%); color: white; } } - + &.reversed { &.button-yellow { background-color: hsl(43, 100%, 50%); - *, & { + + *, + & { color: white; } + &:hover { background-color: #FFCE51; + &.bordered { border: 1px solid hsl(43, 100%, 50%); } @@ -336,30 +368,42 @@ a, &.button-blue { background-color: hsl(244, 73%, 62%); - *, & { + + *, + & { color: white; } + &:hover { background-color: white; - *, & { + + *, + & { color: hsl(244, 73%, 62%); } + &.bordered { border: 1px solid hsl(244, 73%, 62%); } } } - + &.button-dark { background-color: hsl(233, 18%, 29%); - *, & { + + *, + & { color: white; } + &:hover { background-color: white; - *, & { + + *, + & { color: hsl(233, 18%, 29%); } + &.bordered { border: 1px solid hsl(233, 18%, 29%); } diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index f9d2499..683403e 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -36,6 +36,8 @@ >ul { cursor: pointer; + display: flex; + flex-direction: column; list-style: none; margin: 0; padding-left: 0; From b4911cfbb98974b88989e9fd4ad74e38b7972c83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 6 Nov 2019 10:46:09 +0100 Subject: [PATCH 065/100] buttons 'join, leave, delete circle' ok + button to add member ok --- src/page-circle-profile.pug | 25 ++++---- src/styles/base/form.scss | 61 +++++--------------- src/styles/base/main.scss | 20 ++++++- src/styles/layout/circle/circle-profile.scss | 4 +- 4 files changed, 46 insertions(+), 64 deletions(-) diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index ffc0691..81916a7 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -46,9 +46,9 @@ sib-router(default-route='circle-profile') div.box-button sib-ac-checker(permission='acl:Delete', bind-resources) sib-delete( + class='button text-bold text-uppercase button-blue bordered with-icon icon-trash' bind-resources data-label='Delete Circle' - class='button reversed-btn right-btn' ) sib-widget(name='join-leave-circle-button') @@ -58,9 +58,9 @@ sib-router(default-route='circle-profile') data-src="${value['@id']}" ) sib-delete( + class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close' data-src="${value['@id']}" data-label='Leave circle' - class='btn-margin-left' ) sib-display( @@ -71,18 +71,19 @@ sib-router(default-route='circle-profile') widget-members='join-leave-circle-button' ) - sib-form.btn-margin-left( - bind-resources - nested-field='members' - fields='user' - label-user='' - range-user=`${endpoints.users}` - widget-user='sib-form-dropdown' + button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-close.test + sib-form( + bind-resources + nested-field='members' + fields='user' + label-user='' + range-user=`${endpoints.users}` + widget-user='sib-form-dropdown' - set-user-id-select="user" + set-user-id-select="user" - submit-button='Join Circle' - ) + submit-button='Join Circle' + ) #circle-edit(hidden) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index b3c3889..d9a3834 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -82,52 +82,6 @@ } } - .button, - input[type='submit'], - sib-delete button { - border-radius: 100em; - cursor: pointer; - font-size: 1.4rem; - font-weight: bold; - padding: 0.55rem 2.5rem; - text-transform: uppercase; - } - - input[type='submit'] { - background-color: $color-233-18-29; - border: none; - color: $color-0-0-100; - margin-left: auto; - margin-top: 3.2rem; - } - - .blue-button { - background: $color-244-73-62; - color: white; - } - - .yellow-button { - background: $color-43-100-50; - color: white; - } - - .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; - } - - .btn-margin-left { - margin-left: 2.2rem; - } - sib-form[set-user-id-select] { input[type="submit"] { @@ -177,13 +131,24 @@ } >input[type='submit'] { - background-color: transparent; + @extend + .button, + .btn-margin-left, + .text-bold, + .text-uppercase, + .button-blue, + .bordered; + margin-top: auto; + margin-bottom: auto; + + + /*background-color: transparent; border: 1px solid $color-244-73-62; color: $color-244-73-62; align-self: flex-end; margin-bottom: 0.6rem; margin-left: 4.2rem; - margin-top: 0; + margin-top: 0;*/ } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 4655bb7..56d0d11 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -231,6 +231,10 @@ a, font-size: 1.4rem; } + &.btn-margin-left { + margin-left: 2.2rem; + } + &.small { *, @@ -277,8 +281,8 @@ a, font-size: 1.6rem; margin-right: 1rem; - &.icon-plus { - @include icon('plus'); + &.icon-arrow-right { + @include icon('trash'); } &.icon-close { @@ -288,6 +292,14 @@ a, &.icon-edit { @include icon('pencil'); } + + &.icon-plus { + @include icon('plus'); + } + + &.icon-trash { + @include icon('trash'); + } } &.button-yellow { @@ -348,6 +360,10 @@ a, } } + &.test { + display: flex; + } + &.reversed { &.button-yellow { background-color: hsl(43, 100%, 50%); diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index aa97566..d75cd84 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -37,12 +37,12 @@ .form-label.is-dark>label { margin-top: 0; - >div:first-child { + /*>div:first-child { @extend h3; font-weight: bold; margin: 0 0 1.4rem; text-transform: uppercase; - } + }*/ } } From db352b31fcd4cd6ecd594718e59106c12d53e25a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 6 Nov 2019 11:18:59 +0100 Subject: [PATCH 066/100] button 'edit and add member' ok --- src/page-circle-profile.pug | 4 ++-- src/styles/base/main.scss | 16 ---------------- src/styles/layout/circle/circle-profile.scss | 2 +- 3 files changed, 3 insertions(+), 19 deletions(-) diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 81916a7..89b3356 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -6,7 +6,7 @@ sib-router(default-route='circle-profile') include templates/hd-circle-team.pug .content-box__info sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources) - sib-link(class="button blue-button", next="circle-edit", bind-resources) Edit and add Members + sib-link.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-pencil(next='circle-edit', bind-resources) Edit and add Members sib-display.block( bind-resources @@ -71,7 +71,7 @@ sib-router(default-route='circle-profile') widget-members='join-leave-circle-button' ) - button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-close.test + button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test sib-form( bind-resources nested-field='members' diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 56d0d11..6373db7 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -281,25 +281,9 @@ a, font-size: 1.6rem; margin-right: 1rem; - &.icon-arrow-right { - @include icon('trash'); - } - - &.icon-close { - @include icon('close'); - } - - &.icon-edit { - @include icon('pencil'); - } - &.icon-plus { @include icon('plus'); } - - &.icon-trash { - @include icon('trash'); - } } &.button-yellow { diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index d75cd84..dff7131 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -42,7 +42,7 @@ font-weight: bold; margin: 0 0 1.4rem; text-transform: uppercase; - }*/ + }*/ /* Casse l'alignement de "add a member" au niveau du bouton. Utile ailleurs ?*/ } } From b5dbbf7384eb257fc351710ec81236469bb04423 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 6 Nov 2019 15:44:53 +0100 Subject: [PATCH 067/100] creation date and edit button wip --- src/page-circle-profile.pug | 21 ++++++++++++--------- src/styles/base/main.scss | 5 +++++ 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 89b3356..e249311 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -5,17 +5,20 @@ sib-router(default-route='circle-profile') #circle-profile(hidden) include templates/hd-circle-team.pug .content-box__info - sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources) - sib-link.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-pencil(next='circle-edit', bind-resources) Edit and add Members - sib-display.block( - bind-resources - fields='creationDateSet(title, creationDate)' + .space-between + div + sib-display.testblock( + bind-resources + fields='creationDateSet(title, creationDate)' - value-title='Creation date:' - - widget-creationDate='sib-display-date' - ) + value-title='Creation date:' + + widget-creationDate='sib-display-date' + ) + div + sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources) + sib-link.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-pencil(next='circle-edit', bind-resources) Edit and add Members h2(name="label-team") Members: diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 6373db7..31dbb20 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -195,6 +195,11 @@ h5 { } } +.space-between { + display: flex; + justify-content: space-between; +} + .section { border-bottom: 1px solid $color-221-51-90; padding: 4.5rem; From d9db053ed22a0c7cb241c5b4501b6521e60c28bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 6 Nov 2019 15:48:33 +0100 Subject: [PATCH 068/100] edit: leave button => ok --- src/page-circle-edit.pug | 1 + 1 file changed, 1 insertion(+) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index d7d44de..21d2554 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -22,6 +22,7 @@ div.content-box__info data-src="${value['@id']}" ) sib-delete( + class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close' data-src="${value['@id']}" data-label='Leave the circle' ) From d4b4a176cdaecb049a358dc5541c74bec0880666 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 6 Nov 2019 18:44:02 +0100 Subject: [PATCH 069/100] creation date and edit button: OK + form's save button ok --- src/page-circle-edit.pug | 2 +- src/page-circle-profile.pug | 20 +++++++++----------- src/styles/base/main.scss | 15 +++++++++++++++ src/styles/layout/circle/circle-profile.scss | 5 ----- 4 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 21d2554..e262f7e 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -37,7 +37,7 @@ div.content-box__info h1 Edit your circle - sib-form.block( + sib-form.block.circle-edit-form( bind-resources fields='block-circle__info(name, owner), description' diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index e249311..64b13da 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -7,18 +7,16 @@ sib-router(default-route='circle-profile') .content-box__info .space-between - div - sib-display.testblock( - bind-resources - fields='creationDateSet(title, creationDate)' + sib-display( + bind-resources + fields='creationDateSet(title, creationDate)' - value-title='Creation date:' - - widget-creationDate='sib-display-date' - ) - div - sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources) - sib-link.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-pencil(next='circle-edit', bind-resources) Edit and add Members + value-title='Creation date:' + + widget-creationDate='sib-display-date' + ) + sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources) + sib-link.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-pencil(next='circle-edit', bind-resources) Edit and add Members h2(name="label-team") Members: diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 31dbb20..58304c3 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -416,4 +416,19 @@ a, } } } +} + +.circle-edit-form>form { + + input[type='submit'] { + @extend + .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; + } } \ 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 dff7131..51dc878 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -17,11 +17,6 @@ text-align: right; display: block; } - - .circle-edit-button { - align-self: flex-end; - position: absolute; - } } .box-button { From 6ba3ef525dbdd22d750aa9124e51947848d9c138 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 6 Nov 2019 21:28:25 +0100 Subject: [PATCH 070/100] fix bug on field alignment + buttons in admin ok --- src/page-admin-circles.pug | 13 +++++-------- src/page-circle-profile.pug | 2 +- src/styles/base/form.scss | 4 ++-- src/styles/base/main.scss | 3 ++- 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 1045981..9bee55c 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -16,6 +16,7 @@ data-src="${value['@id']}" ) sib-delete( + class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close' data-src="${value['@id']}" data-label='Leave' ) @@ -34,9 +35,6 @@ set-user-id-select="user" ) - - - sib-widget(name='team-template-edit') template sib-display( @@ -50,17 +48,16 @@ ) - - - - div.content-box__info div.admin-header div.admin-header__title Circles - sib-link(class='circle-add-button button yellow-button', next='admin-circle-create') Create a new circle + sib-link( + class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus' + next='admin-circle-create' + ) Create a new circle div.table-header div.cell Name diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 64b13da..e7cf7af 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -16,7 +16,7 @@ sib-router(default-route='circle-profile') widget-creationDate='sib-display-date' ) sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources) - sib-link.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-pencil(next='circle-edit', bind-resources) Edit and add Members + sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='circle-edit' bind-resources) Edit and add Members h2(name="label-team") Members: diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index d9a3834..4b32496 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -38,7 +38,7 @@ flex-direction: column; } - /*sib-set-default { + sib-set-default { clear: both; display: flex; flex-wrap: wrap; @@ -48,7 +48,7 @@ float: left; width: 50%; } - }*/ + } label { display: flex; diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 58304c3..31960ba 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -363,7 +363,8 @@ a, } &:hover { - background-color: #FFCE51; + background-color: white; + color: #FFCE51; &.bordered { border: 1px solid hsl(43, 100%, 50%); From c1c46722da4730fcd64f30f721859702da0ec461 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 6 Nov 2019 20:44:22 +0000 Subject: [PATCH 071/100] fix: sib-router hidden on circle-profile --- src/page-circle-profile.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index e7cf7af..9eef58b 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -1,4 +1,4 @@ -sib-router(default-route='circle-profile') +sib-router(default-route='circle-profile', hidden) sib-route(name='circle-profile') sib-route(name='circle-edit') From 4a8f76c646fa8012302f2ae831ebadab1b5dd9af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 7 Nov 2019 12:05:17 +0100 Subject: [PATCH 072/100] new icon for circle-admin added --- src/styles/components/icons/custom-icons.scss | 3 +- src/styles/components/sidebar.scss | 8 +- www/fonts/custom-icons.eot | Bin 35452 -> 36180 bytes www/fonts/custom-icons.svg | 85 +++++++++--------- www/fonts/custom-icons.ttf | Bin 35268 -> 35996 bytes www/fonts/custom-icons.woff | Bin 35344 -> 36072 bytes 6 files changed, 50 insertions(+), 46 deletions(-) diff --git a/src/styles/components/icons/custom-icons.scss b/src/styles/components/icons/custom-icons.scss index 543a627..2848ce4 100644 --- a/src/styles/components/icons/custom-icons.scss +++ b/src/styles/components/icons/custom-icons.scss @@ -53,7 +53,8 @@ $ci-icons: ( alien: '\e91e', drawing: '\e91f', feedback: '\e920', - globe: '\e921' + globe: '\e921', + bubble-add: '\e922' ); %ci, diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 683403e..d2e694a 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -71,7 +71,7 @@ display: inline-block; } - &[name^='circle'], + &[name*='circle'], &[name^='project'] { >li::before { @@ -92,12 +92,16 @@ } &[name$='profile']>li, &[name$='information']>li { - @include ci('information'); + @include ci('bubble-add'); } &[name$='drive']>li { @include ci('file'); } + + &[name='admin-circles']>li { + @include ci('bubble-add'); + } } } } diff --git a/www/fonts/custom-icons.eot b/www/fonts/custom-icons.eot index 25e855dd611356cab615d9b9b95c04b11463ff4b..4d91e63160da8f1339dc4d4d452f69059b61fd21 100644 GIT binary patch delta 972 zcmZuvPe>GD6#w4L&Wsj~t?nP!X4l=B-TC$pj{9e3mU7zC3dJO{L_z{vOcBX4ijc^* zOa3WCZKI-u4qYm{NzfrW)S*kK=uiMM@2ziEntZ%qD;_rU*aPFg2y7}Y7cS2y4kcoGL{l(+H z?-@5Y$kr9kVeu(TFGH@mwW*i>Xe&X{3R}H8oH{;yw~H)XMJ7|ugI#Qo5DJo%bHX- zbL%O{8975S6tCjV-1ev#0@UycPWOUO=>(l~6)oEH)bTy+vMs+SUbVnhVb@cGn0`_Akk7DwF zE1WE3WKEMJnila$lBY(JN^m05*ch?hX3&qWp-AH;2O!&Ci6)I_wkY0imSLC*4u33F`!d-;uqnt@y4bC5GZsyy63O;ZsHVonxxK!~>LkMX1F&bHQ}dbFX|w$8Ms9f~Sao#yFg zH*p*fAc~2)KpoGeC@uKB6_o-X3x?t}ne2?lqz4RRKitLQ0Kw+kaIGafquArw=A3~@ zq$8DTXm4&QN@&HF=Jw>FXiNx&_MP4f9QSL(NDW#%fuq_x4r^XmvKD%)te<2v?k?K< julHZCpXDPHd7$OliQ6t`vE!2mD)xMHI_cuY$=~o7r1!Y} delta 269 zcmcaIi|Nl4CbpU`28JV@6WPpI_TKr$JJF$A(1wA5VGj@|B3On^0xr_DjB&Y6@3h>`au2-Ab&L3-4fS1_o6R4_12cI*}2T-^PT5deHJO(OsR diff --git a/www/fonts/custom-icons.svg b/www/fonts/custom-icons.svg index 05662ce..e24b0c4 100644 --- a/www/fonts/custom-icons.svg +++ b/www/fonts/custom-icons.svg @@ -1,46 +1,45 @@ - Generated by IcoMoon - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/fonts/custom-icons.ttf b/www/fonts/custom-icons.ttf index 55352f0e4664d609b931b62bbbb327136a40946f..ee7fef254e8d794e3257061eca00ca3ce803a343 100644 GIT binary patch delta 970 zcmZXTOK1~e5XZmS%_eEZZIdROCT`MXce7s}bo1VzjghF((iUxP>7fcW)Yc-cMp~qb zl3q-$6siV%prGKTJ}y!O47VTTkHcD|VfIfm^wVOk$*sw39w^o2-GUda~dtb4fjuR%OZTbO_m`;B=T}NzJ5n z%chu0>NKsVHcODoq%v|wcFN9FHV>IJ)qvu>g$E0s;qrk?aPiOpJYbH)DIMFgdKO_9 zq=bzIVMEiiNnNEXGL%;l}((@DFoJ6 z0UIr>iDLl3J(q70BRpnkC?r%>=XoV~p|5{vsK5V$qPUxP&hE~2aV>ctoYTUgoXu{x zwO*^E>qDONK zu=N~g2H^Ry$L%q5QA+cI(^_XS2fe-!jYN8tpt#5|#>Gu6F5oRR`hBm%QgOQ==o2%M?(#{Uu2uf wP|5qR_up>D>b*)9XmzD>(}YE+mSzvw_kF8PQg)FjwE?F3WUguH^Xw}81E3VPssI20 delta 279 zcmbO;lj+E0rg{cO1_lOhh6V;^1_S?KeItG$HXESG9w1Ig&P^;354*I2fq_v5$PYT zWaO4q^f9pN1Nk?A{24j<$&QIqzkkLtFtmdV^vg}GC}8krUIpYI0P+>`5_40_e2(7- z@*e;#IaH8eTmp0`5Ogj95(*5=%pWHnuxC`9#OTeaxY>u%uvHo4A0X!ab!Trpzs*+$ pZWfSwh8rCXeK2}*NvAoZ+T=BzGbVd<`EdY+L7LPy&+Gcf2mo?iNfH16 diff --git a/www/fonts/custom-icons.woff b/www/fonts/custom-icons.woff index d640fa6ac49b4bd9c710f6045ff0511031652595..ae227e7b567d2c219ace88f3b7b269fd7913dc06 100644 GIT binary patch delta 1031 zcmZuwOK1~O6n%FllWD6?O`1;=lQfx`%*%&P^O>2Tjgi(*r53febWsW=)P5+f9~6I3 z;>Omh&}zh1EVyvvXDMz(T&SQ6SK>lN5J90r-Bg4wta@i^U05$UdH0@o?tSmTyy>gV z{B_24a^J391PI2Zd9u!0=PtXFr9$6m@dzO>gjA;qZ`Z3kgT-Se_Xz8XKiD`pa(V!{ zXM{|=F>&qNyRSq2#e;-Q&Y{LI;aR-o9YPYh*I3IY_$TcA(CG0~$Sq-QYUi#HE;Vwv z4|RJlTt#BP3IC6+t)s9pna?2V41JlfT4e3|&(s z(e8G6av6`?WtT)n*9?A@%w`O#8QIk>$m&^L(j~X#&gKfBYg7e_{k#A?&hUo7>+uRu z4FX_}%~=CwIU|R~7RY*51fCVn$dwF*DwM++D)6G+oPs}dHxFse&{G=CgRW>arAV5R zRw1oe2kM$NA)B%0;jMY>$4)yA6aTBQb|EdQsu)q#h$|3q)dT`17>P7AL`;|rqGzRw zG@P|cq#zZZnhH-(KiCwcbiBKJV4%BuoYHE+pt1A@$=$^=3{%13A4`?KbjBBK404q= zcB8|H%E@Fr(HaWX)Yv$O+Y?#-2&m&(8^-{EZ?aUV3nT zlWO1HGF*o-+_JkprK$&HDd1OKU2GM{*#QJ0?)UlaT$0j)$6Zm$+oQoyj3yH8ax`$8 zVa$u$STqo9stwoXMazn5&kSqzMIvpb1{HXY;I~z9FU`YD75qF4&b<@HJ0kt zSRAe5cWpgee7c1X`Fp+9`R`;Mz6Ff8Uv9lzUCRsOIiO{EV%BCpl=7pAy%pORtWJ90 IdHyH-2Fx?RtpET3 delta 324 zcmaDclWD>fCb4pVH#Y`G1|aAXVBiMPoktiLCtvIlo2VmPZnlfgVC^6 z8RT&w=KXbNZ#=)vR|amN Date: Thu, 7 Nov 2019 12:07:43 +0100 Subject: [PATCH 073/100] mistake on icon fixed --- src/styles/components/sidebar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index d2e694a..bc5d339 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -92,7 +92,7 @@ } &[name$='profile']>li, &[name$='information']>li { - @include ci('bubble-add'); + @include ci('information'); } &[name$='drive']>li { From 70e238d230dda453b870f091fb9d73d1490d2189 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 7 Nov 2019 18:04:01 +0100 Subject: [PATCH 074/100] admin-circle table: wip => problem with multiple-members --- src/page-admin-circles.pug | 51 +-- src/styles/layout/circle/circle-admin.scss | 351 +++++++++++++++++++++ src/styles/layout/circle/circle-edit.scss | 102 +----- 3 files changed, 384 insertions(+), 120 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 9bee55c..58891d0 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -9,6 +9,7 @@ #admin-circle-list(hidden) + sib-widget(name="circle-admin-leave-button-template") template sib-ac-checker( @@ -35,16 +36,15 @@ set-user-id-select="user" ) - sib-widget(name='team-template-edit') + include templates/hd-user-avatar.pug + + sib-widget(name='circle-owner') template sib-display( - data-src='${await value.user}' - fields='account.picture, sup(name, groups), sub(profile.city)' + data-src='${await value}' + fields='account.picture, sup(name), sub(username)' widget-account.picture='hd-user-avatar' - - multiple-groups='' - widget-groups='hd-user-groups' ) @@ -59,24 +59,37 @@ next='admin-circle-create' ) Create a new circle - div.table-header - div.cell Name - div.cell Admins - div.cell Join + div.table.cols-3.table-no-border-bottom + div.table-header Name + div.table-header Admins + div.table-header Join //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" - sib-display.table-body.test( + //-sib-display.table-body.test( + data-src=`${endpoints.circles}` + fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)' + + multiple-groups="" + widget-members="circle-admin-leave-button-template" + multiple-members="" + + widget-button="circle-admin-join-button-template" + action-button="button" + + widget-owner.account.picture='hd-user-avatar' + ) + + sib-display( + class='table cols-3' + data-src=`${endpoints.circles}` - fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)' + fields='name, owner, action' - multiple-groups="" - widget-members="circle-admin-leave-button-template" - multiple-members="" + class-name='cell' + class-owner='cell' + class-action='cell action' - widget-button="circle-admin-join-button-template" - action-button="button" - - widget-owner.account.picture='hd-user-avatar' + widget-owner='circle-owner' ) diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss index 04813c0..dc0e25c 100644 --- a/src/styles/layout/circle/circle-admin.scss +++ b/src/styles/layout/circle/circle-admin.scss @@ -1,3 +1,354 @@ .circle-admin-join-button select[name='user'] { display: none; +} + +#admin-circle-list{ + + /* Table grid display */ + .table { + display: grid; + + &.cols-3 { + grid-template-columns: repeat(3, 33.3333%); + } + + .cell, .table-header { + text-align: center; + word-wrap: break-word; + } + + *:not(.cell) { + display: contents; + } + } + + /* Table borders */ + .table { + border-left: 1px solid $color-228-25-79; + border-top: 1px solid $color-228-25-79; + + &.table-no-border-bottom .table-header { + border-bottom: 0; + } + + .cell { + border-right: 1px solid $color-228-25-79; + border-bottom: 1px solid $color-228-25-79; + } + } + + /* Table styles inside */ + + .table { + + .table-header { + background: $color-228-25-79; + border-right: 1px solid white; + color: white; + display: flex; + flex: 1; + font-size: 1.6rem; + font-weight: 600; + justify-content: space-around; + padding: 1rem; + text-align: center; + + &:last-of-type { + border-right: 1px solid $color-228-25-79; + } + } + + sib-display-value[name='name'] { + color: #3C3F57; + font-weight: 600; + padding-top: 2.5rem; + } + + [name='owner']>sib-display>div { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + padding: 0 2.2rem; + + >[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='sup'] { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; + + [name$='name'] { + color: #7A7F85; + 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$='username']:not(:empty) { + align-items: center; + display: flex; + + &::before { + content: '@'; + + } + } + } + } + } + + /*.table-body.test>div>sib-display>div { + border-bottom: 1px solid $color-228-25-79; + display: flex; + justify-content: space-around; + + >* { + flex: 1; + border-left: 1px solid $color-228-25-79; + text-align: center; + } + + >*:last-child { + border-right: 1px solid $color-228-25-79; + } + + >sib-display-value[name='name'] { + color: #3C3F57; + font-weight: 600; + padding-top: 2.5rem; + } + + >sib-set-default[name='own'] { + 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='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; + margin-right: 1rem; + } + } + + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; + + >[name$='username']:not(:empty) { + align-items: center; + display: flex; + + &::before { + content: '@'; + + } + } + } + } + + >sib-set-default[name='buttons'] { + display: flex; + justify-content: center; + + >sib-multiple { + align-items: center; + display: flex; + } + } + }*/ + + .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; + padding: 0 2.2rem; + } + + sib-ac-checker { + align-items: center; + border-left: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + display: flex; + 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; + 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='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; + margin-right: 1rem; + } + + sib-multiple { + display: flex; + + [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 diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 70822f7..92dd726 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -1,5 +1,4 @@ -#circle-edit, -#admin-circle-list { +#circle-edit { .table-header { background: $color-228-25-79; @@ -26,105 +25,6 @@ } } - .table-body.test>div>sib-display>div { - border-bottom: 1px solid $color-228-25-79; - display: flex; - justify-content: space-around; - - >* { - flex: 1; - border-left: 1px solid $color-228-25-79; - text-align: center; - } - - >*:last-child { - border-right: 1px solid $color-228-25-79; - } - - >sib-display-value[name='name'] { - color: #3C3F57; - font-weight: 600; - padding-top: 2.5rem; - } - - >sib-set-default[name='own'] { - 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='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; - margin-right: 1rem; - } - } - - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; - - >[name$='username']:not(:empty) { - align-items: center; - display: flex; - - &::before { - content: '@'; - - } - } - } - } - - >sib-set-default[name='buttons'] { - display: flex; - justify-content: center; - - >sib-multiple { - align-items: center; - display: flex; - } - } - } - .table-body div team-template-edit { display: flex; justify-content: space-between; From 52377dc92a114508ab10d629774fc285ec1cc6cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 8 Nov 2019 11:34:30 +0100 Subject: [PATCH 075/100] Clean-up main.scss --- src/page-admin-circles.pug | 2 +- src/page-circle.pug | 2 +- src/styles/base/form.scss | 9 --- src/styles/base/main.scss | 76 +++++++---------------- src/styles/layout/circle/circle-edit.scss | 14 +++++ 5 files changed, 40 insertions(+), 63 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 58891d0..20a5396 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -3,7 +3,7 @@ sib-route(name='admin-circle-list') sib-route(name='admin-circle-create') - div.content-box__header.with-edit + div.content-box__header.with-description div p.name Administration diff --git a/src/page-circle.pug b/src/page-circle.pug index d5989c6..0c23098 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,6 +1,6 @@ .views-container .content-box.full-width.with-form - div.content-box__header.with-edit + div.content-box__header.with-description sib-ac-checker(permission='acl:Read', bind-resources) sib-display( bind-resources diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 4b32496..2cc38ac 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -140,15 +140,6 @@ .bordered; margin-top: auto; margin-bottom: auto; - - - /*background-color: transparent; - border: 1px solid $color-244-73-62; - color: $color-244-73-62; - align-self: flex-end; - margin-bottom: 0.6rem; - margin-left: 4.2rem; - margin-top: 0;*/ } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 31960ba..605d1c4 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -135,7 +135,7 @@ h5 { border: 0; } -.content-box__header.with-edit { +.content-box__header.with-description { border-bottom: 1px solid $color-221-51-90; div { @@ -156,29 +156,20 @@ h5 { margin-left: 0.60rem; } } - - .edit { - color: $color-213-4-50; - font-size: 1.6rem; - margin-left: auto; - } } } .backlink { + @include icon('arrow-left-circle'); + color: $color-233-18-29; font-size: 1.5rem; margin: 2rem 0 0 2rem; - @include icon('arrow-left-circle'); - color: #3d4057; text-decoration: underline; - &::before { - text-decoration: none; - } - &::before { font-size: 2rem; margin-right: 1rem; + text-decoration: none; } } @@ -221,10 +212,10 @@ button, input[type='submit'], a, .button { - display: inline-block; - cursor: pointer; background: none; border: none; + cursor: pointer; + display: inline-block; padding: 0; &.button { @@ -285,10 +276,6 @@ a, &.with-icon::before { font-size: 1.6rem; margin-right: 1rem; - - &.icon-plus { - @include icon('plus'); - } } &.button-yellow { @@ -296,15 +283,15 @@ a, *, & { - color: hsl(43, 100%, 50%); + color: $color-43-100-50; } &.bordered { - border: 1px solid hsl(43, 100%, 50%); + border: 1px solid $color-43-100-50; } &:hover { - background-color: #FFCE51; + background-color: $color-43-100-50; *, & { @@ -318,15 +305,15 @@ a, *, & { - color: hsl(244, 73%, 62%); + color: $color-244-73-62; } &.bordered { - border: 1px solid hsl(244, 73%, 62%); + border: 1px solid $color-244-73-62; } &:hover { - background-color: hsl(244, 73%, 62%); + background-color: $color-244-73-62; *, & { @@ -336,15 +323,15 @@ a, } &.button-dark { - color: hsl(233, 18%, 29%); + color: $color-233-18-29; background-color: white; &.bordered { - border: 1px solid hsl(233, 18%, 29%); + border: 1px solid $color-233-18-29; } &:hover { - background-color: hsl(233, 18%, 29%); + background-color: $color-233-18-29; color: white; } } @@ -355,7 +342,7 @@ a, &.reversed { &.button-yellow { - background-color: hsl(43, 100%, 50%); + background-color: $color-43-100-50; *, & { @@ -364,16 +351,16 @@ a, &:hover { background-color: white; - color: #FFCE51; + color: $color-43-100-50; &.bordered { - border: 1px solid hsl(43, 100%, 50%); + border: 1px solid $color-43-100-50; } } } &.button-blue { - background-color: hsl(244, 73%, 62%); + background-color: $color-244-73-62; *, & { @@ -385,17 +372,17 @@ a, *, & { - color: hsl(244, 73%, 62%); + color: $color-244-73-62; } &.bordered { - border: 1px solid hsl(244, 73%, 62%); + border: 1px solid $color-244-73-62; } } } &.button-dark { - background-color: hsl(233, 18%, 29%); + background-color: $color-233-18-29; *, & { @@ -407,29 +394,14 @@ a, *, & { - color: hsl(233, 18%, 29%); + color: $color-233-18-29; } &.bordered { - border: 1px solid hsl(233, 18%, 29%); + border: 1px solid $color-233-18-29; } } } } } } - -.circle-edit-form>form { - - input[type='submit'] { - @extend - .button, - .text-bold, - .text-uppercase, - .reversed, - .button-dark, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } -} \ No newline at end of file diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 92dd726..e91fccb 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -1,5 +1,19 @@ #circle-edit { + .circle-edit-form>form { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; + } + } + .table-header { background: $color-228-25-79; color: white; From f3409274ee8f900376ebccbe36eed3a73b1e4902 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 8 Nov 2019 12:36:56 +0100 Subject: [PATCH 076/100] Clean-up circle-admin.scss --- src/styles/layout/circle/circle-admin.scss | 212 +-------------------- 1 file changed, 3 insertions(+), 209 deletions(-) diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss index dc0e25c..54f0cf9 100644 --- a/src/styles/layout/circle/circle-admin.scss +++ b/src/styles/layout/circle/circle-admin.scss @@ -59,7 +59,7 @@ } sib-display-value[name='name'] { - color: #3C3F57; + color: $color-233-18-29; font-weight: 600; padding-top: 2.5rem; } @@ -134,94 +134,7 @@ } } - /*.table-body.test>div>sib-display>div { - border-bottom: 1px solid $color-228-25-79; - display: flex; - justify-content: space-around; - - >* { - flex: 1; - border-left: 1px solid $color-228-25-79; - text-align: center; - } - - >*:last-child { - border-right: 1px solid $color-228-25-79; - } - - >sib-display-value[name='name'] { - color: #3C3F57; - font-weight: 600; - padding-top: 2.5rem; - } - - >sib-set-default[name='own'] { - 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='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; - margin-right: 1rem; - } - } - - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; - - >[name$='username']:not(:empty) { - align-items: center; - display: flex; - - &::before { - content: '@'; - - } - } - } - } - + /* >sib-set-default[name='buttons'] { display: flex; justify-content: center; @@ -232,123 +145,4 @@ } } }*/ - - .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; - padding: 0 2.2rem; - } - - sib-ac-checker { - align-items: center; - border-left: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - display: flex; - 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; - 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='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; - margin-right: 1rem; - } - - sib-multiple { - display: flex; - - [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 e274ad20d19375b29fdbed5e04eb81e3b18d03a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 8 Nov 2019 12:52:41 +0100 Subject: [PATCH 077/100] Clean-up circle-edit.scss --- src/styles/layout/circle/circle-admin.scss | 10 ++++++++++ src/styles/layout/circle/circle-edit.scss | 10 ---------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss index 54f0cf9..b8e2967 100644 --- a/src/styles/layout/circle/circle-admin.scss +++ b/src/styles/layout/circle/circle-admin.scss @@ -1,3 +1,13 @@ +.admin-header { + display: flex; + justify-content: space-between; + margin-bottom: 5rem; + + .admin-header__title { + @extend h3; + } +} + .circle-admin-join-button select[name='user'] { display: none; } diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index e91fccb..0b05545 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -159,13 +159,3 @@ } } -.admin-header{ - display: flex; - justify-content: space-between; - margin-bottom: 5rem; - - .admin-header__title { - @extend h3; - } -} - From 62bb5a7fff78b607997a6cfd71be1bfb9269ae69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 8 Nov 2019 13:26:00 +0100 Subject: [PATCH 078/100] Clean-up circle-profile.scss --- src/styles/layout/circle/_index.scss | 1 + src/styles/layout/circle/circle-profile.scss | 52 +------------------- src/styles/layout/circle/circle.scss | 21 ++++++++ 3 files changed, 23 insertions(+), 51 deletions(-) create mode 100644 src/styles/layout/circle/circle.scss diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss index 350cfc1..2c602e9 100644 --- a/src/styles/layout/circle/_index.scss +++ b/src/styles/layout/circle/_index.scss @@ -1,3 +1,4 @@ +@import 'circle'; @import 'circle-profile'; @import 'circle-edit'; @import 'circle-admin'; \ 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 51dc878..7810d26 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -1,23 +1,4 @@ -#circle-information, -#circle-edit, -#admin-circle-list { - - h2 { - font-size: 1.7rem; - font-weight: bold; - text-transform: uppercase; - } - - .content-box__info { - @extend %padding-block; - display: flex; - flex-direction: column; - - .backlink { - text-align: right; - display: block; - } - } +#circle-information { .box-button { display: flex; @@ -31,41 +12,10 @@ .form-label.is-dark>label { margin-top: 0; - - /*>div:first-child { - @extend h3; - font-weight: bold; - margin: 0 0 1.4rem; - text-transform: uppercase; - }*/ /* Casse l'alignement de "add a member" au niveau du bouton. Utile ailleurs ?*/ } } >div { /* peut-être à mettre dans main.scss */ - display: flex; - flex-direction: column; - margin-bottom: 2.6rem; - position: relative; - - >[name^='label'] { - @extend h3; - font-weight: bold; - margin: 0 0 1.4rem; - text-transform: uppercase; - } - - >[name='description'] { - max-width: 80%; - } - - >[name='entitled'] { - align-self: flex-end; - position: absolute; - - >*:first-child { - margin-right: 0.8rem; - } - } >sib-multiple { diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss new file mode 100644 index 0000000..2ed233f --- /dev/null +++ b/src/styles/layout/circle/circle.scss @@ -0,0 +1,21 @@ +#circle-information, +#circle-edit, +#admin-circle-list { + + h2 { + font-size: 1.7rem; + font-weight: bold; + text-transform: uppercase; + } + + .content-box__info { + @extend %padding-block; + display: flex; + flex-direction: column; + + .backlink { + text-align: right; + display: block; + } + } +} \ No newline at end of file From 493a1a852533437c0d4fd5c74ca9dddba6afa10a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Sat, 9 Nov 2019 14:33:02 +0100 Subject: [PATCH 079/100] rework on table with 2 columns: flex to grid + wip on the column for buttons in the 3-col table --- src/page-admin-circles.pug | 12 +- src/page-circle-edit.pug | 13 +- src/styles/layout/circle/circle-admin.scss | 130 +----------------- src/styles/layout/circle/circle-edit.scss | 12 +- src/styles/layout/circle/circle.scss | 146 +++++++++++++++++++++ 5 files changed, 171 insertions(+), 142 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 20a5396..031069d 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -67,7 +67,7 @@ //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" //-sib-display.table-body.test( data-src=`${endpoints.circles}` - fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)' + fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members, button)' multiple-groups="" widget-members="circle-admin-leave-button-template" @@ -83,11 +83,17 @@ class='table cols-3' data-src=`${endpoints.circles}` - fields='name, owner, action' + fields='name, owner, buttons(members, button)' class-name='cell' class-owner='cell' - class-action='cell action' + + multiple-groups="" + widget-members="circle-admin-leave-button-template" + multiple-members="" + + widget-button="circle-admin-join-button-template" + action-button="button" widget-owner='circle-owner' ) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index e262f7e..83d3b89 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -8,6 +8,7 @@ div.content-box__info sib-widget(name='team-template-edit') template sib-display( + class='cell' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' @@ -18,6 +19,7 @@ div.content-box__info ) sib-ac-checker( + class='cell' permission="acl:Delete" data-src="${value['@id']}" ) @@ -29,6 +31,7 @@ div.content-box__info //- Only to show the table grid sib-ac-checker( + class='cell' no-permission="acl:Delete" data-src="${value['@id']}" ) @@ -59,11 +62,13 @@ div.content-box__info h2 Members list - div.table-header - div.cell Name - div.cell Access + div.table.cols-2.table-no-border-bottom + div.table-header Name + div.table-header Access - sib-display.table-body( + //-class='table-body' + sib-display( + class='table cols-2' bind-resources fields='members' diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss index b8e2967..c959349 100644 --- a/src/styles/layout/circle/circle-admin.scss +++ b/src/styles/layout/circle/circle-admin.scss @@ -14,135 +14,7 @@ #admin-circle-list{ - /* Table grid display */ - .table { - display: grid; - - &.cols-3 { - grid-template-columns: repeat(3, 33.3333%); - } - - .cell, .table-header { - text-align: center; - word-wrap: break-word; - } - - *:not(.cell) { - display: contents; - } - } - - /* Table borders */ - .table { - border-left: 1px solid $color-228-25-79; - border-top: 1px solid $color-228-25-79; - - &.table-no-border-bottom .table-header { - border-bottom: 0; - } - - .cell { - border-right: 1px solid $color-228-25-79; - border-bottom: 1px solid $color-228-25-79; - } - } - - /* Table styles inside */ - - .table { - - .table-header { - background: $color-228-25-79; - border-right: 1px solid white; - color: white; - display: flex; - flex: 1; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - padding: 1rem; - text-align: center; - - &:last-of-type { - border-right: 1px solid $color-228-25-79; - } - } - - sib-display-value[name='name'] { - color: $color-233-18-29; - font-weight: 600; - padding-top: 2.5rem; - } - - [name='owner']>sib-display>div { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - padding: 0 2.2rem; - - >[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='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; - - [name$='name'] { - color: #7A7F85; - 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$='username']:not(:empty) { - align-items: center; - display: flex; - - &::before { - content: '@'; - - } - } - } - } - } + /* >sib-set-default[name='buttons'] { diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index 0b05545..a491e70 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -14,7 +14,7 @@ } } - .table-header { + /*.table-header { background: $color-228-25-79; color: white; display: flex; @@ -37,9 +37,9 @@ display: none; } } - } + }*/ - .table-body div team-template-edit { + /*.table-body div team-template-edit { display: flex; justify-content: space-between; @@ -66,7 +66,7 @@ display: none; } } - } + }*/ .member-select.color { @@ -75,7 +75,7 @@ } } - sib-multiple[widget='team-template-edit'] { + /*sib-multiple[widget='team-template-edit'] { label { display: none; @@ -156,6 +156,6 @@ } } } - } + }*/ } diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index 2ed233f..1e1c422 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -18,4 +18,150 @@ display: block; } } + + /* Table grid display */ + .table { + display: grid; + + &.cols-2 { + grid-template-columns: repeat(2, 50%); + } + + &.cols-3 { + grid-template-columns: repeat(3, 33.3333%); + } + + *:not(.cell) { + display: contents; + } + + sib-set-default[name='buttons'], + .cell, + .table-header { + text-align: center; + word-wrap: break-word; + } + } + + /* Table borders */ + .table { + border-left: 1px solid $color-228-25-79; + border-top: 1px solid $color-228-25-79; + + &.table-no-border-bottom .table-header { + border-bottom: 0; + } + + sib-set-default[name='buttons'], + .cell { + border-right: 1px solid $color-228-25-79; + border-bottom: 1px solid $color-228-25-79; + } + } + + /* Table styles inside */ + + .table { + + .table-header { + background: $color-228-25-79; + border-right: 1px solid white; + color: white; + display: flex; + flex: 1; + font-size: 1.6rem; + font-weight: 600; + justify-content: space-around; + padding: 1rem; + text-align: center; + + &:last-of-type { + border-right: 1px solid $color-228-25-79; + } + } + + sib-display-value[name='name'] { + color: $color-233-18-29; + font-weight: 600; + padding-top: 2.5rem; + } + + [name='members']>sib-display>div, + [name='owner']>sib-display>div { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + padding: 0 2.2rem; + + >[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='sup'] { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; + + [name$='name'] { + color: #7A7F85; + font-weight: 600; + margin-right: 1rem; + } + + sib-multiple>div { + display: flex; + + [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$='username']:not(:empty) { + align-items: center; + display: flex; + + &::before { + content: '@'; + + } + } + } + } + } } \ No newline at end of file From 5da381ce9362e4313df49896379890989b589be4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 11 Nov 2019 11:22:37 +0100 Subject: [PATCH 080/100] circle-create form ok --- src/page-admin-circles.pug | 2 +- src/page-circle-edit.pug | 1 + src/styles/layout/circle/_index.scss | 3 ++- src/styles/layout/circle/admin-circle-create.scss | 13 +++++++++++++ src/styles/layout/circle/circle.scss | 3 ++- 5 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 src/styles/layout/circle/admin-circle-create.scss diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 031069d..5e43bac 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -100,4 +100,4 @@ #admin-circle-create(hidden) - include page-admin-circles-create.pug \ No newline at end of file + include page-admin-circles-create.pug diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 83d3b89..cd3f78e 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -75,3 +75,4 @@ div.content-box__info multiple-members='' widget-members='team-template-edit' ) + diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss index 2c602e9..17b4580 100644 --- a/src/styles/layout/circle/_index.scss +++ b/src/styles/layout/circle/_index.scss @@ -1,4 +1,5 @@ @import 'circle'; @import 'circle-profile'; @import 'circle-edit'; -@import 'circle-admin'; \ No newline at end of file +@import 'circle-admin'; +@import 'admin-circle-create'; \ No newline at end of file diff --git a/src/styles/layout/circle/admin-circle-create.scss b/src/styles/layout/circle/admin-circle-create.scss new file mode 100644 index 0000000..ac5bee0 --- /dev/null +++ b/src/styles/layout/circle/admin-circle-create.scss @@ -0,0 +1,13 @@ +#admin-circle-create { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; + } +} diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index 1e1c422..c45f9c2 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -1,6 +1,7 @@ #circle-information, #circle-edit, -#admin-circle-list { +#admin-circle-list, +#admin-circle-create { h2 { font-size: 1.7rem; From 1eb83f2a80443414be1f5cd48beee1d0a8107480 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 11 Nov 2019 11:50:10 +0100 Subject: [PATCH 081/100] match the mock-ups ok --- src/page-circle-edit.pug | 16 ++++++++++++++++ src/page-circle-profile.pug | 15 --------------- src/styles/base/main.scss | 1 + 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index cd3f78e..7a53339 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -47,6 +47,7 @@ div.content-box__info range-owner=`${endpoints.users}` label-owner='owner' + label-description='circle subtitle' class-name='form-label is-light is-half-width' class-owner='form-label is-light is-half-width member-select color' @@ -62,6 +63,21 @@ div.content-box__info h2 Members list + //- 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 + nested-field='members' + fields='user' + range-user=`${endpoints.users}` + + class-user='team form-label is-dark' + label-user='' + widget-user='sib-form-auto-completion' + + submit-button='Add a member' + ) + div.table.cols-2.table-no-border-bottom div.table-header Name div.table-header Access diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 9eef58b..6df4ebc 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -21,21 +21,6 @@ sib-router(default-route='circle-profile', hidden) 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 - nested-field='members' - fields='user' - range-user=`${endpoints.users}` - - 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' diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 605d1c4..283f1be 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -189,6 +189,7 @@ h5 { .space-between { display: flex; justify-content: space-between; + padding-bottom: 1.4rem; } .section { From 9795498944e153c49e2c9e1f842e663c746f4492 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 12 Nov 2019 12:26:34 +0100 Subject: [PATCH 082/100] fix: selector @gaelle --- src/styles/layout/circle/circle.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index c45f9c2..594f529 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -32,7 +32,7 @@ grid-template-columns: repeat(3, 33.3333%); } - *:not(.cell) { + *:not(.cell):not([name="buttons"]):not([class="table-header"]) { display: contents; } From e60c6d6d1f1ffc870cc259b359feaa75e12310af Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 12 Nov 2019 12:31:06 +0100 Subject: [PATCH 083/100] fix: @gaelle --- src/styles/layout/circle/circle.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index 594f529..52ada83 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -89,7 +89,7 @@ [name='members']>sib-display>div, [name='owner']>sib-display>div { - display: grid; + display: grid!important; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; grid-template-rows: repeat(2, 5.2vh); From 0566f34ec49dc04c712495bcac41c5abc01945e7 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 12 Nov 2019 12:34:33 +0100 Subject: [PATCH 084/100] fix: @gaelle --- src/styles/base/form.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 2cc38ac..dbaeeff 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -40,7 +40,7 @@ sib-set-default { clear: both; - display: flex; + display: flex!important; flex-wrap: wrap; max-width: 100%; From aa46aeed78b55a61691c3e155c2cfd5ace8b288b Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 12 Nov 2019 12:49:12 +0100 Subject: [PATCH 085/100] fix: clear cache --- src/scripts/index.js | 2 +- src/styles/layout/circle/circle.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/scripts/index.js b/src/scripts/index.js index 2648789..b48dd53 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -40,7 +40,7 @@ document.addEventListener('DOMContentLoaded', function (event) { el.addEventListener("save", function() { let dataSrc = el.getAttribute('data-src'); document.querySelectorAll('sib-display[data-src="'+dataSrc+'"]').forEach(function(e) { - e.setAttribute('data-src', dataSrc); + e.resource.clearCache(); }); }); }); diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index 52ada83..b54a0ad 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -36,6 +36,10 @@ display: contents; } + hd-user-avatar, hd-user-avatar > * { + display: flex!important; + } + sib-set-default[name='buttons'], .cell, .table-header { From 8784ae7641aceacdadfa683914b37094e1a6f9d0 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 12 Nov 2019 13:13:52 +0100 Subject: [PATCH 086/100] fix: selector for admin css --- src/scripts/index.js | 6 +++--- src/styles/layout/circle/circle-admin.scss | 2 +- src/styles/layout/circle/circle.scss | 10 +++++++++- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/scripts/index.js b/src/scripts/index.js index b48dd53..6b7e65b 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -48,7 +48,7 @@ document.addEventListener('DOMContentLoaded', function (event) { document.querySelector('sib-auth').getUser().then(user => { if(user !== null) { // Hide login button if already logged - document.querySelector('button[role="log in"]').style.display = 'none'; + document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important'); // Set current user id on set-user-id of sib-display for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) { sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']); @@ -58,7 +58,7 @@ document.addEventListener('DOMContentLoaded', function (event) { sibForm.addEventListener('populate', () => { // BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521 document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label^="Leave"]').forEach((el)=>{ - querySelectorParentChild(el, 'sib-form[submit-button^="Join"]').style.display = "none"; + querySelectorParentChild(el, 'sib-form[submit-button^="Join"]').setAttribute('style', 'display:none !important'); }); for(select of sibForm.querySelectorAll('select[name="'+sibForm.getAttribute('set-user-id-select')+'"]')) { for(option of select.options) { @@ -68,7 +68,7 @@ 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 + leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute('style', 'display:none !important'); // Hide Join button } } }).catch(error => console.log(error)); diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss index c959349..ba4b600 100644 --- a/src/styles/layout/circle/circle-admin.scss +++ b/src/styles/layout/circle/circle-admin.scss @@ -9,7 +9,7 @@ } .circle-admin-join-button select[name='user'] { - display: none; + display: none!important; } #admin-circle-list{ diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index b54a0ad..caf0bbf 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -36,10 +36,18 @@ display: contents; } - hd-user-avatar, hd-user-avatar > * { + hd-user-avatar, hd-user-avatar > *, hd-user-groups { display: flex!important; } + sib-set-default[name="buttons"] * { + display: inline-block!important; + } + + sib-set-default[name="buttons"] select[name='user'] { + display: none!important; + } + sib-set-default[name='buttons'], .cell, .table-header { From 809978ecc83aa84dc710d5f48d61fa196be6289c Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 12 Nov 2019 13:22:23 +0100 Subject: [PATCH 087/100] fix: last one @gaelle --- src/styles/layout/circle/circle.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index caf0bbf..15caa71 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -40,7 +40,7 @@ display: flex!important; } - sib-set-default[name="buttons"] * { + sib-set-default[name="buttons"] *, .cell > *, [name="buttons"] > *, [class="table-header"] > * { display: inline-block!important; } From 30de8eed82be0a0693b96590e2af36a44ce81910 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 12 Nov 2019 13:25:39 +0100 Subject: [PATCH 088/100] fix: @gaelle target wrong class --- src/styles/layout/circle/circle-admin.scss | 2 +- src/styles/layout/circle/circle.scss | 16 ++-------------- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss index ba4b600..c959349 100644 --- a/src/styles/layout/circle/circle-admin.scss +++ b/src/styles/layout/circle/circle-admin.scss @@ -9,7 +9,7 @@ } .circle-admin-join-button select[name='user'] { - display: none!important; + display: none; } #admin-circle-list{ diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index 15caa71..dcfc034 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -32,22 +32,10 @@ grid-template-columns: repeat(3, 33.3333%); } - *:not(.cell):not([name="buttons"]):not([class="table-header"]) { + *:not(.cell):not([name="buttons"]):not([class="table-header"]) { // <- Here, must be inversed display: contents; } - hd-user-avatar, hd-user-avatar > *, hd-user-groups { - display: flex!important; - } - - sib-set-default[name="buttons"] *, .cell > *, [name="buttons"] > *, [class="table-header"] > * { - display: inline-block!important; - } - - sib-set-default[name="buttons"] select[name='user'] { - display: none!important; - } - sib-set-default[name='buttons'], .cell, .table-header { @@ -101,7 +89,7 @@ [name='members']>sib-display>div, [name='owner']>sib-display>div { - display: grid!important; + display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; grid-template-rows: repeat(2, 5.2vh); From 03df657caf213bdd9f35b688ff8d93f29d887e55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 12 Nov 2019 23:16:56 +0100 Subject: [PATCH 089/100] full css rework on tables. Need refactor --- src/page-admin-circles.pug | 14 +-- src/page-circle-edit.pug | 14 +-- src/styles/layout/circle/circle.scss | 182 ++++++++++++++++++++++++++- 3 files changed, 190 insertions(+), 20 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 5e43bac..c2fe79f 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -59,10 +59,10 @@ next='admin-circle-create' ) Create a new circle - div.table.cols-3.table-no-border-bottom - div.table-header Name - div.table-header Admins - div.table-header Join + div.table-header + div Name + div Admins + div Join //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" //-sib-display.table-body.test( @@ -80,13 +80,13 @@ ) sib-display( - class='table cols-3' + class='table-body' data-src=`${endpoints.circles}` fields='name, owner, buttons(members, button)' - class-name='cell' - class-owner='cell' + class-name='w33 cell border' + class-owner='w33 cell border' multiple-groups="" widget-members="circle-admin-leave-button-template" diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 7a53339..b95349f 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -8,7 +8,7 @@ div.content-box__info sib-widget(name='team-template-edit') template sib-display( - class='cell' + class='w50 cell border' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' @@ -19,7 +19,7 @@ div.content-box__info ) sib-ac-checker( - class='cell' + class='w50 cell border' permission="acl:Delete" data-src="${value['@id']}" ) @@ -31,7 +31,7 @@ div.content-box__info //- Only to show the table grid sib-ac-checker( - class='cell' + class='w50 cell border' no-permission="acl:Delete" data-src="${value['@id']}" ) @@ -78,13 +78,13 @@ div.content-box__info submit-button='Add a member' ) - div.table.cols-2.table-no-border-bottom - div.table-header Name - div.table-header Access + div.table-header + div Name + div Access //-class='table-body' sib-display( - class='table cols-2' + class='table-body' bind-resources fields='members' diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index dcfc034..afab566 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -20,8 +20,178 @@ } } + + + + .table-header { + background: $color-228-25-79; + color: white; + display: flex; + flex: 1; + font-size: 1.6rem; + font-weight: 600; + justify-content: space-around; + text-align: center; + + >* { + border-right: 1px solid white; + flex: 1; + padding: 2.1rem 0; + text-align: center; + } + + >*:last-of-type { + border-right: 1px solid $color-228-25-79; + } + } + + .table-body { + + >div:first-of-type>sib-display>div, + team-template-edit[name='members'] { + display: flex; + border-left: 1px solid $color-228-25-79; + } + + .border { + border-bottom: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + } + + .cell { + text-align: center; + word-wrap: break-word; + } + + .w33 { + width: 33.3333%; + } + + .w50 { + width: 50%; + } + + [name="buttons"] { + @extend .border; + @extend .cell; + @extend .w33; + } + } + + .table-body>div>sib-display>div>sib-display-value[name='name'] { + color: $color-233-18-29; + font-weight: 600; + padding-top: 2.5rem; + } + + [name='members']>sib-display>div, + [name='owner']>sib-display>div { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + padding: 0 2.2rem; + + >[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='sup'] { + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; + + [name$='name'] { + color: #7A7F85; + font-weight: 600; + margin-right: 1rem; + } + + sib-multiple>div { + display: flex; + + [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$='username']:not(:empty) { + align-items: center; + display: flex; + + &::before { + content: '@'; + + } + } + } + } + + sib-set-default[name='buttons'] { + align-items: center; + justify-content: center; + + [name='button'] { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-blue, + .bordered, + .btn-margin-left; + } + } + } + + sib-ac-checker { + align-items: center; + display: flex; + justify-content: center; + } + + + + + /* Table grid display */ - .table { + /*.table { display: grid; &.cols-2 { @@ -42,10 +212,10 @@ text-align: center; word-wrap: break-word; } - } + }*/ /* Table borders */ - .table { + /*.table { border-left: 1px solid $color-228-25-79; border-top: 1px solid $color-228-25-79; @@ -58,11 +228,11 @@ border-right: 1px solid $color-228-25-79; border-bottom: 1px solid $color-228-25-79; } - } + }*/ /* Table styles inside */ - .table { + /*.table { .table-header { background: $color-228-25-79; @@ -164,5 +334,5 @@ } } } - } + }*/ } \ No newline at end of file From 772e1e456b94c7fbe06eb591fff3f1d0e12087ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 13 Nov 2019 12:00:38 +0100 Subject: [PATCH 090/100] Tables ok --- src/page-admin-circles.pug | 56 ++--- src/page-circle-edit.pug | 26 +-- src/styles/layout/circle/circle.scss | 295 +++++++-------------------- 3 files changed, 117 insertions(+), 260 deletions(-) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index c2fe79f..81b07ee 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -59,16 +59,37 @@ next='admin-circle-create' ) Create a new circle - div.table-header - div Name - div Admins - div Join + .table + + div.table-header.grey-color + div Name + div Admins + div Join + + //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" + //-sib-display.table-body.test( + data-src=`${endpoints.circles}` + fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members, button)' + + multiple-groups="" + widget-members="circle-admin-leave-button-template" + multiple-members="" + + widget-button="circle-admin-join-button-template" + action-button="button" + + widget-owner.account.picture='hd-user-avatar' + ) + + sib-display( + class='table-body' - //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" - //-sib-display.table-body.test( data-src=`${endpoints.circles}` - fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members, button)' + fields='name, owner, buttons(members, button)' + class-name='w33 cell border' + class-owner='w33 cell border' + multiple-groups="" widget-members="circle-admin-leave-button-template" multiple-members="" @@ -76,28 +97,9 @@ widget-button="circle-admin-join-button-template" action-button="button" - widget-owner.account.picture='hd-user-avatar' + widget-owner='circle-owner' ) - sib-display( - class='table-body' - - data-src=`${endpoints.circles}` - fields='name, owner, buttons(members, button)' - - class-name='w33 cell border' - class-owner='w33 cell border' - - multiple-groups="" - widget-members="circle-admin-leave-button-template" - multiple-members="" - - widget-button="circle-admin-join-button-template" - action-button="button" - - widget-owner='circle-owner' - ) - #admin-circle-create(hidden) include page-admin-circles-create.pug diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index b95349f..8fa2ac7 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -78,17 +78,19 @@ div.content-box__info submit-button='Add a member' ) - div.table-header - div Name - div Access - - //-class='table-body' - sib-display( - class='table-body' - bind-resources - fields='members' + .table + + div.table-header.grey-color + div Name + div Access + + //-class='table-body' + sib-display( + class='table-body' + bind-resources + fields='members' - multiple-members='' - widget-members='team-template-edit' - ) + multiple-members='' + widget-members='team-template-edit' + ) diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index afab566..61e3e67 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -20,244 +20,73 @@ } } - - - - .table-header { - background: $color-228-25-79; - color: white; - display: flex; - flex: 1; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - text-align: center; - - >* { - border-right: 1px solid white; - flex: 1; - padding: 2.1rem 0; - text-align: center; - } - - >*:last-of-type { - border-right: 1px solid $color-228-25-79; - } - } - - .table-body { - - >div:first-of-type>sib-display>div, - team-template-edit[name='members'] { - display: flex; - border-left: 1px solid $color-228-25-79; - } - - .border { - border-bottom: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - } - - .cell { - text-align: center; - word-wrap: break-word; - } - - .w33 { - width: 33.3333%; - } - - .w50 { - width: 50%; - } - - [name="buttons"] { - @extend .border; - @extend .cell; - @extend .w33; - } - } - - .table-body>div>sib-display>div>sib-display-value[name='name'] { - color: $color-233-18-29; - font-weight: 600; - padding-top: 2.5rem; - } - - [name='members']>sib-display>div, - [name='owner']>sib-display>div { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - padding: 0 2.2rem; - - >[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='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; - - [name$='name'] { - color: #7A7F85; - font-weight: 600; - margin-right: 1rem; - } - - sib-multiple>div { - display: flex; - - [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$='username']:not(:empty) { - align-items: center; - display: flex; - - &::before { - content: '@'; - - } - } - } - } - - sib-set-default[name='buttons'] { - align-items: center; - justify-content: center; - - [name='button'] { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-blue, - .bordered, - .btn-margin-left; - } - } - } - - sib-ac-checker { - align-items: center; - display: flex; - justify-content: center; - } - - - - - - /* Table grid display */ - /*.table { - display: grid; - - &.cols-2 { - grid-template-columns: repeat(2, 50%); - } - - &.cols-3 { - grid-template-columns: repeat(3, 33.3333%); - } - - *:not(.cell):not([name="buttons"]):not([class="table-header"]) { // <- Here, must be inversed - display: contents; - } - - sib-set-default[name='buttons'], - .cell, - .table-header { - text-align: center; - word-wrap: break-word; - } - }*/ - - /* Table borders */ - /*.table { - border-left: 1px solid $color-228-25-79; - border-top: 1px solid $color-228-25-79; - - &.table-no-border-bottom .table-header { - border-bottom: 0; - } - - sib-set-default[name='buttons'], - .cell { - border-right: 1px solid $color-228-25-79; - border-bottom: 1px solid $color-228-25-79; - } - }*/ - - /* Table styles inside */ - - /*.table { + .table { .table-header { - background: $color-228-25-79; - border-right: 1px solid white; - color: white; display: flex; flex: 1; font-size: 1.6rem; font-weight: 600; justify-content: space-around; - padding: 1rem; text-align: center; - &:last-of-type { + &.grey-color { + background: $color-228-25-79; + color: white; + } + + >* { + border-right: 1px solid white; + flex: 1; + padding: 2.1rem 0; + text-align: center; + } + + >*:last-of-type { border-right: 1px solid $color-228-25-79; } } - sib-display-value[name='name'] { + .table-body { + + >div:first-of-type>sib-display>div, + team-template-edit[name='members'] { + display: flex; + border-left: 1px solid $color-228-25-79; + } + + .border { + border-bottom: 1px solid $color-228-25-79; + border-right: 1px solid $color-228-25-79; + } + + .cell { + text-align: center; + word-wrap: break-word; + } + + .w33 { + width: 33.3333%; + } + + .w50 { + width: 50%; + } + + [name="buttons"] { + @extend .border; + @extend .cell; + @extend .w33; + } + } + + .table-body>div>sib-display>div>sib-display-value[name='name'] { color: $color-233-18-29; font-weight: 600; padding-top: 2.5rem; } - [name='members']>sib-display>div, + [name='members']>sib-display>div, [name='owner']>sib-display>div { display: grid; grid-column-gap: 1.6rem; @@ -334,5 +163,29 @@ } } } - }*/ + + sib-set-default[name='buttons'] { + align-items: center; + justify-content: center; + + [name='button'] { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-blue, + .bordered, + .btn-margin-left; + } + } + } + + sib-ac-checker { + align-items: center; + display: flex; + justify-content: center; + } + } } \ No newline at end of file From a342e5d4313363bc2dfb7538b3f54c2ec9e76c58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Wed, 13 Nov 2019 15:23:54 +0100 Subject: [PATCH 091/100] hidden class added on sib-router --- src/page-admin-circles-create.pug | 2 -- src/page-admin-circles.pug | 2 +- src/page-circle-edit.pug | 3 +-- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/page-admin-circles-create.pug b/src/page-admin-circles-create.pug index 6cba7b2..66cdfb9 100644 --- a/src/page-admin-circles-create.pug +++ b/src/page-admin-circles-create.pug @@ -13,7 +13,5 @@ div.content-box__info 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 index 81b07ee..57e15c8 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -1,5 +1,5 @@ .content-box.full-width.with-form - sib-router(default-route='admin-circle-list') + sib-router(class='hidden' default-route='admin-circle-list') sib-route(name='admin-circle-list') sib-route(name='admin-circle-create') diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 8fa2ac7..b9d1f67 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -54,7 +54,6 @@ div.content-box__info class-description='form-label is-light is-full-width' widget-owner='sib-form-auto-completion' - widget-description='sib-form-textarea' partial='' @@ -79,7 +78,7 @@ div.content-box__info ) .table - + div.table-header.grey-color div Name div Access From 0c3b74bcafcc31fc78b5ad7dadeff162dd21fd0e Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Thu, 14 Nov 2019 13:27:04 +0100 Subject: [PATCH 092/100] update: making join leave works --- src/menu-left.pug | 18 +++-- src/page-admin-circles-create.pug | 4 +- src/page-admin-circles.pug | 92 +++++++++++----------- src/page-admin-projects.pug | 2 +- src/page-admin-users.pug | 2 +- src/page-circle-edit.pug | 6 +- src/page-circle-profile.pug | 62 ++++++++------- src/page-project-profile.pug | 2 +- src/scripts/index.js | 80 ++++++++++--------- src/styles/layout/circle/circle-admin.scss | 23 +----- 10 files changed, 145 insertions(+), 146 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index bff3dd5..11546f3 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(name='job-offer-create') - //- sib-route(name='job-offer-edit', use-id) + //- sib-route(name='job-offer-create', hidden) + //- sib-route(name='job-offer-edit', use-id, hidden) //- 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(name='project', rdf-type='hd:project', use-id='') + //- sib-route(name='project', rdf-type='hd:project', use-id='', hidden) //- div.sub-menu.menu-notification //- sib-display( //- data-src=`${endpoints.projects}` @@ -35,7 +35,8 @@ nav#main__menu //- search-fields='team' //- search-widget-team='sib-form-hidden' //- search-value-team='-' - //- set-user-id='search-value-team' + //- hd-inherit-user-id='search-value-team' + //- hd-inherit-widgets //- widget-badge='hd-counter' //- action-badge='badge' //- ) @@ -46,7 +47,7 @@ nav#main__menu div.menu-icon.icon-arrow-up div.menu-label Circles div.menu-icon.icon-folder-alt - sib-route(name='circle', rdf-type='hd:circle', use-id='') + sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden) div.sub-menu.menu-notification sib-display( data-src=`${endpoints.circles}` @@ -59,7 +60,8 @@ nav#main__menu search-fields='team' search-widget-team='sib-form-hidden' search-value-team='-' - set-user-id='search-value-team' + hd-inherit-user-id='search-value-team' + hd-inherit-widgets order-by='name' next='circle' ) @@ -70,7 +72,7 @@ nav#main__menu div.menu-icon.icon-arrow-up div.menu-label Chat div.menu-icon.icon-envelope-letter - sib-route(name='messages', rdf-type='foaf:user', use-id='') + sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden) div.sub-menu.menu-notification sib-display( data-src=`${endpoints.users}` @@ -82,7 +84,7 @@ nav#main__menu next='messages' ) - sib-route(name='admin') + sib-route(name='admin', hidden) //- 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 index 66cdfb9..4be5618 100644 --- a/src/page-admin-circles-create.pug +++ b/src/page-admin-circles-create.pug @@ -7,11 +7,13 @@ div.content-box__info 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' + next='admin-circle-list' + submit-button='Save' ) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 57e15c8..e478630 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -1,5 +1,5 @@ .content-box.full-width.with-form - sib-router(class='hidden' default-route='admin-circle-list') + sib-router(default-route='admin-circle-list', hidden) sib-route(name='admin-circle-list') sib-route(name='admin-circle-create') @@ -10,32 +10,6 @@ #admin-circle-list(hidden) - sib-widget(name="circle-admin-leave-button-template") - template - sib-ac-checker( - permission="acl:Delete" - data-src="${value['@id']}" - ) - sib-delete( - class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close' - data-src="${value['@id']}" - data-label='Leave' - ) - - sib-widget(name="circle-admin-join-button-template") - template - //- BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521 - sib-form.circle-admin-join-button( - data-src="${src}" - nested-field='members' - fields='user' - widget-user='sib-form-dropdown' - label-user='' - range-user=`${endpoints.users}` - submit-button='Join' - set-user-id-select="user" - ) - include templates/hd-user-avatar.pug sib-widget(name='circle-owner') @@ -49,7 +23,7 @@ div.content-box__info - + div.admin-header div.admin-header__title Circles @@ -66,36 +40,62 @@ div Admins div Join - //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)" - //-sib-display.table-body.test( - data-src=`${endpoints.circles}` - fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members, button)' + sib-widget(name='admin-circle-leave-button') + template + sib-delete( + class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close' + data-src="${src}" + data-label='Leave circle' + ) - multiple-groups="" - widget-members="circle-admin-leave-button-template" - multiple-members="" + sib-widget(name='admin-circle-join-button') + template + button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test + sib-form( + data-src='' + nested-field='members' - widget-button="circle-admin-join-button-template" - action-button="button" + fields='user.@id' + label-user.@id='' + value-user.@id='' + widget-user.@id='sib-form-hidden' - widget-owner.account.picture='hd-user-avatar' - ) + hd-inherit-bind-user2input="input[name='user.@id']" + hd-inherit-widgets + + submit-button='Join Circle' + ) + + sib-widget(name="admin-circle-buttons") + template + sib-display( + data-src='${src}' + nested-field='members' + fields='relation' + action-relation='relation' + widget-relation='admin-circle-leave-button' + search-fields='user' + search-widget-user='sib-form-hidden' + search-value-user="-" + empty-widget='admin-circle-join-button' + hd-inherit-bind-resources='admin-circle-join-button' + hd-inherit-user-id="search-value-user" + hd-inherit-widgets + ) sib-display( class='table-body' data-src=`${endpoints.circles}` - fields='name, owner, buttons(members, button)' + fields='name, owner, buttons' class-name='w33 cell border' class-owner='w33 cell border' - - multiple-groups="" - widget-members="circle-admin-leave-button-template" - multiple-members="" - widget-button="circle-admin-join-button-template" - action-button="button" + widget-buttons="admin-circle-buttons" + action-buttons="buttons" + hd-inherit-widgets + hd-inherit-widgets-multiple widget-owner='circle-owner' ) diff --git a/src/page-admin-projects.pug b/src/page-admin-projects.pug index 3ce1145..80f8d3f 100644 --- a/src/page-admin-projects.pug +++ b/src/page-admin-projects.pug @@ -1,5 +1,5 @@ .content-box.full-width.with-form - sib-router(default-route='admin-project-list') + sib-router(default-route='admin-project-list', hidden) sib-route(name='admin-project-list') sib-route(name='admin-project-create') diff --git a/src/page-admin-users.pug b/src/page-admin-users.pug index 0a7a1fe..7085fe7 100644 --- a/src/page-admin-users.pug +++ b/src/page-admin-users.pug @@ -1,5 +1,5 @@ .content-box.full-width.with-form - sib-router(default-route='admin-users-list') + sib-router(default-route='admin-users-list', hidden) sib-route(name='admin-users-list') sib-route(name='admin-users-create') diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index b9d1f67..3cc10e3 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -17,7 +17,7 @@ div.content-box__info multiple-groups='' widget-groups='hd-user-groups' ) - + sib-ac-checker( class='w50 cell border' permission="acl:Delete" @@ -42,7 +42,7 @@ div.content-box__info sib-form.block.circle-edit-form( bind-resources - + fields='block-circle__info(name, owner), description' range-owner=`${endpoints.users}` @@ -82,7 +82,7 @@ div.content-box__info div.table-header.grey-color div Name div Access - + //-class='table-body' sib-display( class='table-body' diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 6df4ebc..8846ae8 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -11,8 +11,8 @@ sib-router(default-route='circle-profile', hidden) bind-resources fields='creationDateSet(title, creationDate)' - value-title='Creation date:' - + value-title='Creation date: ' + widget-creationDate='sib-display-date' ) sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources) @@ -37,40 +37,48 @@ sib-router(default-route='circle-profile', hidden) data-label='Delete Circle' ) - sib-widget(name='join-leave-circle-button') + sib-widget(name='circle-leave-button') template - sib-ac-checker( - permission="acl:Delete" - data-src="${value['@id']}" + sib-delete( + class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close' + data-src="${src}" + data-label='Leave Circle' ) - sib-delete( - class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close' - data-src="${value['@id']}" - data-label='Leave circle' + + sib-widget(name='circle-join-button') + template + button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test + sib-form( + data-src='' + nested-field='members' + + fields='user.@id' + label-user.@id='' + value-user.@id='' + widget-user.@id='sib-form-hidden' + + hd-inherit-bind-user2input="input[name='user.@id']" + hd-inherit-widgets + + submit-button='Join Circle' ) sib-display( bind-resources - fields='members' - - multiple-members='' - widget-members='join-leave-circle-button' + nested-field='members' + fields='relation' + action-relation='relation' + widget-relation='circle-leave-button' + search-fields='user' + search-widget-user='sib-form-hidden' + search-value-user="" + empty-widget='circle-join-button' + hd-inherit-bind-resources='circle-join-button' + hd-inherit-user-id="search-value-user" + hd-inherit-widgets ) - button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test - sib-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 diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index 5f75c70..0510d97 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -10,7 +10,7 @@ value-const-title1='N°', value-const-title2='-', - value-entitled='Creation date:' + value-entitled='Creation date: ' value-label-description='DESCRIPTION:', widget-customer.logo='sib-display-img', diff --git a/src/scripts/index.js b/src/scripts/index.js index 6b7e65b..9091310 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -1,11 +1,45 @@ -function querySelectorParentChild(el, selector) { - while(el !== document.body) { - if(el.querySelector(selector)) { - break; +function recursiveAdaptWidgets(prefix, element, user) { + //- 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']); + }); + + 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 (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', ""); + }); } - el = el.parentNode; } - return el.querySelector(selector); + + //- 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); + }); + }); } document.addEventListener('DOMContentLoaded', function (event) { @@ -35,44 +69,18 @@ document.addEventListener('DOMContentLoaded', function (event) { }) }); - //- Watch every sib-forms & update data-src of linked sib-display - document.querySelectorAll('sib-form[data-src], sib-form[bind-resource]').forEach(function(el) { - el.addEventListener("save", function() { - let dataSrc = el.getAttribute('data-src'); - document.querySelectorAll('sib-display[data-src="'+dataSrc+'"]').forEach(function(e) { - e.resource.clearCache(); - }); - }); - }); - document.querySelector('sib-auth').getUser().then(user => { - if(user !== null) { + if (user !== null) { // 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 - 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', () => { - // BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521 - document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label^="Leave"]').forEach((el)=>{ - querySelectorParentChild(el, 'sib-form[submit-button^="Join"]').setAttribute('style', 'display:none !important'); - }); - 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']+'"}'); - } - } - }); - } - for(leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) { + recursiveAdaptWidgets("hd-inherit", document, user); + for (leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) { leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute('style', 'display:none !important'); // Hide Join button } } }).catch(error => console.log(error)); - + }); \ No newline at end of file diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss index c959349..d3241dc 100644 --- a/src/styles/layout/circle/circle-admin.scss +++ b/src/styles/layout/circle/circle-admin.scss @@ -6,25 +6,4 @@ .admin-header__title { @extend h3; } -} - -.circle-admin-join-button select[name='user'] { - display: none; -} - -#admin-circle-list{ - - - - /* - >sib-set-default[name='buttons'] { - display: flex; - justify-content: center; - - >sib-multiple { - align-items: center; - display: flex; - } - } - }*/ -} +} \ No newline at end of file From 89f62025b4aa0bae8536148fc958d6365fc3f34d Mon Sep 17 00:00:00 2001 From: Calum Mackervoy Date: Fri, 15 Nov 2019 12:29:41 +0000 Subject: [PATCH 093/100] circles not collapsable in line with mockup --- src/menu-left.pug | 3 ++- src/styles/base/menu-left.scss | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index 11546f3..a7cab85 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -44,7 +44,8 @@ nav#main__menu div.menu-wrapper div.menu div.menu-chevron - div.menu-icon.icon-arrow-up + sib-link(next='admin-circle-list') + div.menu-icon.icon-arrow-right div.menu-label Circles div.menu-icon.icon-folder-alt sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden) diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index f96318e..6dbea23 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -44,7 +44,7 @@ color: $color-46-100-67; } } - + .menu-icon { align-items: center; display: flex; From bbc4a9356c59d9788a9133adb1e65fc4bd5bc32e Mon Sep 17 00:00:00 2001 From: Calum Mackervoy Date: Fri, 15 Nov 2019 13:02:08 +0000 Subject: [PATCH 094/100] added listener to close user control --- src/scripts/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/scripts/index.js b/src/scripts/index.js index 9091310..a3412a6 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -81,6 +81,12 @@ document.addEventListener('DOMContentLoaded', function (event) { } }).catch(error => console.log(error)); - + // Document -> close menu + document.addEventListener("click", event => { + if (!event.target.closest('#user-controls')) { + let userControls = this.querySelector('#user-controls'); + if (userControls) userControls.removeAttribute("open"); + } + }); }); \ No newline at end of file From 150464dfc1bbe74d85e0a502957ad56125f0db99 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 15 Nov 2019 16:50:20 +0100 Subject: [PATCH 095/100] fix: context for jabberID --- src/context.jsonld | 1 + src/context.jsonld~ | 7 +++++++ 2 files changed, 8 insertions(+) create mode 100644 src/context.jsonld~ diff --git a/src/context.jsonld b/src/context.jsonld index 0159815..4d5d925 100644 --- a/src/context.jsonld +++ b/src/context.jsonld @@ -4,4 +4,5 @@ "object": "http://happy-dev.fr/owl/#object", "author": "http://happy-dev.fr/owl/#author", "account": "http://happy-dev.fr/owl/#account" + "foaf:jabberID": "foaf:jabberID" } diff --git a/src/context.jsonld~ b/src/context.jsonld~ new file mode 100644 index 0000000..0159815 --- /dev/null +++ b/src/context.jsonld~ @@ -0,0 +1,7 @@ + + { + "inbox": "http://happy-dev.fr/owl/#inbox", + "object": "http://happy-dev.fr/owl/#object", + "author": "http://happy-dev.fr/owl/#author", + "account": "http://happy-dev.fr/owl/#account" + } From 27098f59c5f20b56228c020b5b5c66dd10e4055b Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 15 Nov 2019 16:51:22 +0100 Subject: [PATCH 096/100] fix: context for jabberID --- src/context.jsonld | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/context.jsonld b/src/context.jsonld index 4d5d925..9bbf7ab 100644 --- a/src/context.jsonld +++ b/src/context.jsonld @@ -3,6 +3,6 @@ "inbox": "http://happy-dev.fr/owl/#inbox", "object": "http://happy-dev.fr/owl/#object", "author": "http://happy-dev.fr/owl/#author", - "account": "http://happy-dev.fr/owl/#account" + "account": "http://happy-dev.fr/owl/#account", "foaf:jabberID": "foaf:jabberID" } From 34247826b2e00550b70d4bf3eb666dbd2dce59d3 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 15 Nov 2019 17:13:17 +0100 Subject: [PATCH 097/100] fix: context for jabberID --- src/context.jsonld | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/context.jsonld b/src/context.jsonld index 9bbf7ab..6ffc880 100644 --- a/src/context.jsonld +++ b/src/context.jsonld @@ -4,5 +4,5 @@ "object": "http://happy-dev.fr/owl/#object", "author": "http://happy-dev.fr/owl/#author", "account": "http://happy-dev.fr/owl/#account", - "foaf:jabberID": "foaf:jabberID" + "jabberID": "foaf:jabberID" } From ba942945f2f9a244033d65123d06ccb249990bec Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 18 Nov 2019 14:14:46 +0100 Subject: [PATCH 098/100] fix: admin panel is not coming soon! --- src/context.jsonld~ | 7 ------- src/menu-left.pug | 3 ++- 2 files changed, 2 insertions(+), 8 deletions(-) delete mode 100644 src/context.jsonld~ diff --git a/src/context.jsonld~ b/src/context.jsonld~ deleted file mode 100644 index 0159815..0000000 --- a/src/context.jsonld~ +++ /dev/null @@ -1,7 +0,0 @@ - - { - "inbox": "http://happy-dev.fr/owl/#inbox", - "object": "http://happy-dev.fr/owl/#object", - "author": "http://happy-dev.fr/owl/#author", - "account": "http://happy-dev.fr/owl/#account" - } diff --git a/src/menu-left.pug b/src/menu-left.pug index a7cab85..c2d902d 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -4,7 +4,8 @@ sib-widget(name='hd-counter') sib-widget(name='hd-create') template - p.create You are not part of any ${value} yet. To create a new one, you can go to the administration panel (coming soon). + 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 sib-router#navbar-router(default-route='members') From d63ee9b6fb4defd31e4b9285a22a57c999dce047 Mon Sep 17 00:00:00 2001 From: Calum Mackervoy Date: Mon, 25 Nov 2019 18:54:54 +0000 Subject: [PATCH 099/100] Esc key close rightmenu --- src/scripts/index.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/scripts/index.js b/src/scripts/index.js index a3412a6..a49eb8b 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -42,6 +42,12 @@ function recursiveAdaptWidgets(prefix, element, user) { }); } +// auxiliary function closes the user profile menu +function closeUserControls() { + let userControls = document.querySelector('#user-controls'); + if (userControls) userControls.removeAttribute("open"); +} + document.addEventListener('DOMContentLoaded', function (event) { const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper')); const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu')); @@ -83,10 +89,13 @@ document.addEventListener('DOMContentLoaded', function (event) { // Document -> close menu document.addEventListener("click", event => { - if (!event.target.closest('#user-controls')) { - let userControls = this.querySelector('#user-controls'); - if (userControls) userControls.removeAttribute("open"); - } + if (!event.target.closest('#user-controls')) closeUserControls(); }); + // listen for keypress + document.onkeydown = (e) => { + e = e || window.event; + if (e.key === "Escape" || e.key === "Esc") closeUserControls(); + }; + }); \ No newline at end of file From d03e58932bfce59bd6b666ed14098a965bb46cc4 Mon Sep 17 00:00:00 2001 From: Calum Mackervoy Date: Fri, 29 Nov 2019 15:16:53 +0000 Subject: [PATCH 100/100] Circle edit redirect --- src/page-circle-edit.pug | 1 + src/scripts/index.js | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 3cc10e3..6c07ebb 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -58,6 +58,7 @@ div.content-box__info partial='' submit-button='Save' + next='circle-information' ) h2 Members list diff --git a/src/scripts/index.js b/src/scripts/index.js index a49eb8b..b50faf0 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -75,6 +75,23 @@ document.addEventListener('DOMContentLoaded', function (event) { }) }); + //- Watch every sib-forms & update data-src of linked sib-display + 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 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 + }); + }); + document.querySelector('sib-auth').getUser().then(user => { if (user !== null) { // Hide login button if already logged