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
This commit is contained in:
Gaëlle Morin
parent
61be5d780c
commit
5a865693a1
@ -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(
|
||||
|
||||
@ -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
|
||||
)
|
||||
|
||||
@ -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
|
||||
#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
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -145,6 +145,7 @@
|
||||
}
|
||||
|
||||
img {
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import 'chat';
|
||||
@import 'comment.scss';
|
||||
@import 'filters';
|
||||
@import 'howto';
|
||||
@import 'sidebar';
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
[name^='label-'] {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1.4rem;
|
||||
margin: 1.4rem 0;
|
||||
text-transform: uppercase;
|
||||
@extend h2;
|
||||
}
|
||||
|
||||
16
src/templates/hd-circle-team.pug
Normal file
16
src/templates/hd-circle-team.pug
Normal file
@ -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}
|
||||
@ -21,3 +21,4 @@ sib-widget(name='team-template')
|
||||
data-src="${value.user ? value.user['@id'] : ''}"
|
||||
fields='username'
|
||||
)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user