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-edit.pug b/src/page-circle-edit.pug index 7e23b00..1121969 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -1,9 +1,71 @@ -#circle-edit.content-box.with-padding.with-form.full-width - h1 Edit group +div.content-box__info + + include templates/hd-user-avatar.pug + + sib-widget(name='hd-user-groups') + template ${await value.name} + + 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' + ) + + 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']}" + ) + + sib-link(class="backlink", bind-resources, next='circle-profile') Back + + h1 Edit your circle + sib-form.block( - range-owner=`${endpoints.users}`, - fields="name, description, owner, team, jabberID, jabberRoom" - range-team=`${endpoints.users}`, bind-resources + + fields='block-circle__info(name, owner), description' + range-owner=`${endpoints.users}` + + label-owner='owner' + + class-name='form-label is-light is-half-width' + 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' + widget-description='sib-form-textarea' + + partial='' + + submit-button='Save' + ) + + h2 Members list + + div.table-header + div.cell Name + div.cell Access + + sib-display.table-body( + bind-resources + fields='members' + + multiple-members='' + widget-members='team-template-edit' ) - //- widget-team='sib-form-multiple-dropdown', diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 9deac43..72d0f52 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -1,29 +1,55 @@ -.content-box.with-padding.full-width - h2 Channel's name: - sib-display( - fields='name', - bind-resources - ) +.content-box.full-width.with-form + sib-router(default-route='circle-profile') + sib-route(name='circle-profile') + sib-route(name='circle-edit') - h2 Description: - sib-display( - fields='description', - bind-resources - ) - - 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', - - template-teammate-contact='chat-link', - - value-before-pseudo='@', - value-teammate-contact='Send a message', - value-teammate-profile='View profile', - - widget-account.picture='sib-display-img', + #circle-profile(hidden) + include templates/hd-circle-team.pug - next='member', - bind-resources - ) + 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' + ) + + 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 b66986c..f132b75 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,26 +1,18 @@ .views-container - #circle-chat + #circle-chat(hidden) 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-information(hidden) + include page-circle-profile.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-information') + li + a Information 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/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/base/form.scss b/src/styles/base/form.scss index c1ae4a7..650e85f 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; } @@ -151,15 +196,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 +219,7 @@ } .ss-content .ss-list .ss-option { + font-weight: normal; text-transform: none; } } 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..4a12793 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; } @@ -56,14 +52,14 @@ h6 { font-weight: 600; padding: 0; - span { + /*span { font-weight: 400; padding-left: 0.85rem; &:before { content: '// '; } - } + }*/ } h1 { @@ -75,7 +71,7 @@ h2 { } h3 { - font-size: 1.6rem; + font-size: 1.7rem; } h4 { @@ -105,10 +101,35 @@ 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 { + font-size: 1.6rem; + margin-right: 1rem; + } + } +} + %padding-main { padding: 5rem; } +%padding-block { + padding: 3.2rem; +} + .content-box { @include window-style-modal(); display: flex; @@ -119,7 +140,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,11 +150,67 @@ 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; } +.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; @@ -151,6 +228,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/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/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/_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..1c3fe92 --- /dev/null +++ b/src/styles/layout/circle-profile/circle-edit.scss @@ -0,0 +1,140 @@ +h2 { + font-size: 1.7rem; + font-weight: bold; + text-transform: uppercase; +} + +.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) { + 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; + } + + >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; + } + + 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/circle-profile/circle-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss index 1df3fff..834985a 100644 --- a/src/styles/layout/circle-profile/circle-profile.scss +++ b/src/styles/layout/circle-profile/circle-profile.scss @@ -1,79 +1,139 @@ -#circle-profile { +#circle-information, #circle-edit { - .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; + .backlink { + text-align: right; + display: block; + } + } - &:hover { - cursor: pointer; - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24); - top: -2px; - } + .block { - > 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 { /* peut-être à mettre dans main.scss */ + margin-bottom: 2.6rem; - img { - height: 100%; - left: 0; - object-fit: cover; - top: 0; - width: 100%; + .form-label.is-dark>label { + margin-top: 0; + + >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' ) +