Merge branch 'gm-missing-edit-circle' into 'staging'

Resolve "Missing edit circle"

See merge request startinblox/applications/sib-app!71

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-edit.pug

@@ -1,9 +1,71 @@
-#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
+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(
+    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',

src/page-circle-profile.pug

@@ -1,29 +1,55 @@
-.content-box.with-padding.full-width
-  h2 Channel's name:
+.content-box.full-width.with-form
+  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-display(
-    fields='name',
         bind-resources
+        fields='name'
+
+        class-name='name'
       )
 
-  h2 Description:
-  sib-display(
-    fields='description',
+      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:'
       )
 
-  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',
-    
-    next='member',
+      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

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-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-profile')
-//-         li
-//-           a Information
-//-       sib-route(name='circle-edit')
-//-       //-   li
-//-       //-     a Edit
-//-       sib-route(name='circle-create')
-//-       //-   li
-//-       //-     a Add new
+    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

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

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

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

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

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/sidebar.scss

@@ -89,7 +89,7 @@
             @include ci('list');
           }
 
-          &[name$='profile']>li {
+          &[name$='profile']>li, &[name$='information']>li  {
             @include ci('information');
           }
 

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/_index.scss

@@ -1 +1,2 @@
 @import 'circle-profile';
+@import 'circle-edit';

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

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

@@ -1,78 +1,138 @@
-#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;
-
-      &:hover {
-        cursor: pointer;
-	      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
-	      top: -2px;
+    .backlink {
+      text-align: right;
+      display: block;
+    }
   }
 
-      > sib-set-default[name='teammate-img'] {
-        background-color: $color-215-9-73;
+  .block {
+
+    >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'] {
-        grid-column: 3 / span 2;
+          >[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-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: 3 / span 2;
+            grid-column: 2 / span 1;
             grid-row: 2 / span 1;
-      }
+            margin-top: 0.50rem;
 
-      > 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$='profile.city']:not(:empty) {
+              @include mdi('atom');
+              align-items: center;
+              display: flex;
 
-      > 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;
+              &::before {
+                color: $color-43-100-50;
+                margin-right: 0.50rem;
+              }
+            }
+          }
+        }
       }
     }
   }

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'
     )
+