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

@@ -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(

src/page-circle-profile.pug

@@ -1,29 +1,49 @@
-.content-box.with-padding.full-width
+.content-box.full-width.with-form
-  h2 Channel's name:
+
+  include templates/hd-circle-team.pug
+  
+  div.content-box__header.with-edit
     sib-display(
-    fields='name',
       bind-resources
+      fields='name'
+
+      class-name='name'
     )
 
-  h2 Description:
+    sib-link(class="editlink", next="circle-edit" bind-resources)
-  sib-display(
+
-    fields='description',
+  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:'
     )
 
-  h2 In group:
+    sib-ac-checker(permission='acl:Write' bind-resources)
-  sib-display.block-group(
+      sib-form.block.team-form(
-    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',
-    
-    next='member',
         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'
+    )
+

src/page-circle.pug

@@ -1,26 +1,26 @@
 .views-container
   #circle-chat
     include page-circle-chat.pug
-  //- #circle-profile
+  #circle-profile
-  //-   include page-circle-profile.pug
+    include page-circle-profile.pug
-  //- #circle-edit
+  //-#circle-edit
-  //-   include page-circle-edit.pug
+    include page-circle-edit.pug
-  //- #circle-create
+  //-#circle-create
-  //-   include page-circle-create.pug
+    include page-circle-create.pug
-//- nav.jsRightMenu(role='navigation')
+nav.jsRightMenu(role='navigation')
-//-   sib-router(default-route='circle-chat')
+  sib-router(default-route='circle-chat')
-//-     ul
+    ul
-//-       li.jsOffsiteToggle
+      li.jsOffsiteToggle
-//-         a Fold menu
+        a Fold menu
-//-       sib-route(name='circle-chat')
+      sib-route(name='circle-chat')
-//-         li
+        li
-//-           a Chat
+          a Chat
-//-       sib-route(name='circle-profile')
+      sib-route(name='circle-profile')
-//-         li
+        li
-//-           a Information
+          a Information
-//-       sib-route(name='circle-edit')
+      //-sib-route(name='circle-edit')
-//-       //-   li
+        li
-//-       //-     a Edit
+          a Edit
-//-       sib-route(name='circle-create')
+      //-sib-route(name='circle-create')
-//-       //-   li
+        li
-//-       //-     a Add new
+          a Add new

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(

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';

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;
 		}

src/styles/base/header.scss

@@ -145,6 +145,7 @@
         }
 
         img {
+          background-color: white;
           height: 100%;
           object-fit: cover;
           object-position: center;

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;

src/styles/components/_index.scss

@@ -1,4 +1,5 @@
 @import 'chat';
+@import 'comment.scss';
 @import 'filters';
 @import 'howto';
 @import 'sidebar';

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);

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;
   }

src/styles/layout/circle-profile/circle-profile.scss

@@ -1,78 +1,133 @@
 #circle-profile {
 
-  .block-group > div {
+  .content-box__info {
-    display: flex;
+    @extend %padding-block;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-
-    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;
-
-      &:hover {
-        cursor: pointer;
-	      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
-	      top: -2px;
   }
 
-      > sib-set-default[name='teammate-img'] {
+  .block {
-        background-color: $color-215-9-73;
+
+    >form { /* peut-être à mettre dans main.scss */
+      margin-bottom: 2.6rem;
+
+      .form-label.is-dark>label {
+        margin-top: 0;
+
+        >div:first-child {
+          @extend h3;
+          font-weight: bold;
+          margin: 0 0 1.4rem;
+          text-transform: uppercase;
+        }
+      }
+    }
+
+    >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 {
+
+        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%;
-        grid-column: 1 / span 2;
+            display: flex;
+            grid-column: 1 / span 1;
             grid-row: 1 / span 2;
-        height: 6vh;
+            height: 7vh;
+            justify-content: center;
             overflow: hidden;
-        width: 6vh;
+            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%;
+            }
           }
 
-      sib-set-default[name='teammate-name'] {
+          >[name='sup'] {
-        grid-column: 3 / span 2;
+            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-set-default[name='teammate-pseudonym'] {
+            sib-multiple {
+              display: flex;
+              margin-left: 1rem;
+
+              [name='groups'] {
+                @extend %user-role;
+              }
+            }
+          }
+
+          >[name='sub'] {
             align-self: start;
-        font-size: 1.2rem;
+            grid-column: 2 / span 1;
-        grid-column: 3 / span 2;
             grid-row: 2 / span 1;
-      }
+            margin-top: 0.50rem;
 
-      > sib-display-value[name='teammate-profile'] {
+            >[name$='profile.city']:not(:empty) {
-        color: $color-216-4-22;
+              @include mdi('atom');
-        display: block;
+              align-items: center;
-        font-size: 1.2rem;
+              display: flex;
-        grid-column: 1 / span 2;
-        grid-row: 3 / span 1;
-      }
 
-      > sib-display-value[name='teammate-contact'] {
+              &::before {
-        color: $color-244-73-62;
+                color: $color-43-100-50;
-        font-size: 1.2rem;
+                margin-right: 0.50rem;
-        justify-self: stretch;
+              }
-        grid-column: 3 / span 2;
+            }
-        grid-row: 3 / span 1;
+          }
+        }
       }
     }
   }

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;
     }

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}

src/templates/template-team.pug

@@ -21,3 +21,4 @@ sib-widget(name='team-template')
       data-src="${value.user ? value.user['@id'] : ''}"
       fields='username'
     )
+