Merge branch '80-edit-my-profile' into 'staging'

Resolve "Edit my profile"

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

src/header.pug

@@ -8,7 +8,7 @@
 //-   i#close-search-icon.icon-close(aria-hidden='true')
 
 sib-notifications(
-  id-suffix="inbox",
+  id-suffix="inbox"
   bind-user
 )
 
@@ -17,10 +17,12 @@ include templates/hd-user-avatar.pug
 details#user-controls
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
-      data-fields='first_name, account.picture',
-      widget-account.picture='hd-user-avatar',
+      data-fields='first_name, account.picture'
+      widget-account.picture='hd-user-avatar'
       bind-user
     )
+  #user-controls__panel
+    include page-user-panel.pug
 
 button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
 

src/index.pug

@@ -37,3 +37,6 @@ html(lang="en")
 
         #messages(hidden).with-sidebar
           include page-messages.pug
+        
+        #my-profile(hidden).no-sidebar
+          include page-user-profile.pug

src/menu-left.pug

@@ -64,4 +64,5 @@ nav#main__menu
         )
 
     div.divider
+    sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')
 

src/page-circle-chat.pug

@@ -1,4 +1,4 @@
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
   sib-chat(
     data-authentication='login',
     data-auto-login='true',

src/page-circle-create.pug

@@ -1,4 +1,4 @@
-.content-box.with-form.full-width
+.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.
 

src/page-circle-edit.pug

@@ -1,4 +1,4 @@
-#circle-edit.content-box.with-form.full-width
+#circle-edit.content-box.with-padding.with-form.full-width
   h1 Edit group
   sib-form.block(
     range-owner=`${endpoints.users}`,

src/page-circle-profile.pug

@@ -1,4 +1,4 @@
-.content-box.full-width
+.content-box.with-padding.full-width
   h2 Channel's name:
   sib-display(
     data-fields='name',

src/page-job-offer-create.pug

@@ -1,4 +1,4 @@
-.content-box.with-form
+.content-box.with-padding.with-form
   h1 Post a new job offer
   p.center This form allows you to share an offer to all members of the network.
     

src/page-job-offer-edit.pug

@@ -1,4 +1,4 @@
-.content-box.with-form
+.content-box.with-padding.with-form
   h1 Edit your job offer
   
   sib-form.block(

src/page-messages.pug

@@ -1,4 +1,4 @@
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
   sib-chat(
     data-authentication='login',
     data-auto-login='true',

src/page-project-chat.pug

@@ -1,4 +1,4 @@
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
   sib-chat(
     data-authentication='login',
     data-auto-login='true',

src/page-project-create.pug

@@ -1,4 +1,4 @@
-.content-box.with-form.full-width
+.content-box.with-padding.with-form.full-width
   h1 New project
   p Here you can create your project, add members and assign them a job.
   

src/page-project-drive.pug

@@ -3,7 +3,7 @@ sib-widget(name='hd-drive')
         iframe.drive.chat-view(
             src='https://drive.google.com/embeddedfolderview?id=${value}'
         )
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
     sib-display(
         bind-resources=""
         data-fields="driveID"

src/page-project-edit.pug

@@ -1,6 +1,6 @@
 
 
-.content-box.with-form.full-width
+.content-box.with-padding.with-form.full-width
   h1 Edit your project
   p Here you can edit your projet's details
 

src/page-project-profile.pug

@@ -1,4 +1,4 @@
-.content-box.full-width
+.content-box.with-padding.full-width
 
   include templates/template-business-provider.pug
   include templates/template-customer.pug

src/page-user-panel.pug

@@ -1,13 +1,9 @@
-//- nav(role="user's functionalities menu")
-//-   sib-router
-//-     ul
-//-       sib-route(name='user-profile')
-//-         li
-//-           a(href='#') My profile
-//-       sib-route(name='user-settings')
-//-         li
-//-           a(href='#') Settings
-//-       sib-route(name='user-admin')
-//-         li
-//-           a Admin
-//-     button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out
+nav(role="user's functionalities menu")
+  ul
+    li
+      sib-link(next='my-profile') My profile
+    //-li
+      sib-link(next='user-settings') Settings
+    //-li
+      sib-link(name='user-admin') Admin
+  //-button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out

src/page-user-profile.pug

@@ -0,0 +1,78 @@
+include templates/template-groups.pug
+
+.content-box.with-form.user-profile__container
+
+  .section.user-bio
+
+    sib-display.avatar-display(
+      bind-user=''
+      data-fields='account.picture'
+      label-account.picture=''
+      widget-account.picture='sib-display-img'
+    )
+    
+    sib-display.name-diplay(
+      bind-user=''
+      data-fields='user-name-groups, username'
+      set-user-name-groups='name, groups'
+
+      class-name='name'
+
+      label-groups=''
+      multiple-groups=''
+      widget-groups='groups-name'
+      
+      class-username='username'
+    )
+
+    sib-form.info-form(
+      bind-user=''
+      data-fields='profile.bio, inline-1, inline-2, inline-3, account.picture, instruction'
+
+      set-inline-1='profile.city, email'
+
+      set-inline-2='profile.phone, profile.website'
+
+      set-inline-3='profile.available'
+
+      class-profile.bio='form-label is-light'
+      label-profile.bio='short description'
+
+      class-profile.city='form-label is-light'
+      label-profile.city='your cell'
+
+      class-email='form-label is-light'
+
+      class-profile.phone='form-label is-light'
+      label-profile.phone='phone'
+
+      class-profile.website='form-label is-light'
+      label-profile.website='your website'
+
+      class-profile.available='form-label is-light'
+      label-profile.available='your availability'
+
+      class-account.picture='form-label is-light'
+      label-account.picture='your picture'
+
+      widget-instruction='hd-instruction'
+    )
+
+  .section.user-skills
+
+    sib-form(
+      bind-user=''
+      range-skills=`${endpoints.skills}`
+      data-fields='skills'
+
+      class-skills='form-label is-dark'
+      label-skills='Your main skills (4 max.):'
+      multiple-skills='sib-multiple-select'
+      widget-skills='sib-form-auto-completion'
+    )
+
+
+  sib-widget(name='hd-instruction')
+    template
+      span Show us your most beautiful smile
+      p Pictures help us to know ourselves and also to recognize ourselves, so don't be afraid to show your pretty face and avoid strange avatars.

src/styles/_index.scss

@@ -18,4 +18,5 @@ div#viewport {
     @import 'layout/job-offers/index';
     @import 'layout/project-profile/index';
     @import 'layout/circle-profile/index';
+    @import 'layout/user/index';
 }

src/styles/base/form.scss

@@ -1,7 +1,7 @@
 .content-box {
 
   &.with-form {
-    
+
     hd-template-project-title {
       border-bottom: 1px solid $color-221-51-90;
       color: $color-233-18-29;
@@ -11,7 +11,6 @@
     }
 
     sib-form {
-      border-bottom: 1px solid $color-210-17-91;
       padding-bottom: 2.55rem;
     }
 
@@ -66,7 +65,7 @@
       }
     }
 
-    input[type="submit"] {
+    input[type='submit'] {
       background-color: $color-233-18-29;
       border: none;
       border-radius: 100em;
@@ -82,6 +81,7 @@
     /* CLASSES Peut-être à sortir de .content-box */
 
     .form-label {
+      flex: 1 1 auto;
       font-weight: 600;
 
       &.is-dark label {
@@ -133,6 +133,7 @@
     }
 
     sib-multiple-select {
+
       sib-form-auto-completion > label {
         display: flex;
         flex-direction: column;
@@ -199,7 +200,7 @@
       }
     }
 
-    /*
+  /*
     input {
       -webkit-appearance: none;
       align-items: center;
@@ -352,7 +353,7 @@
     }
   */
     /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
-    /*
+  /*
     sib-form-multiple-dropdown {
 
       button {

src/styles/base/header.scss

@@ -1,207 +1,222 @@
 #header {
-  max-height: 51px;
-  height: 51px;
+  max-height: 83px;
+  height: 83px;
   align-items: center;
   background-color: $color-0-0-100;
   color: $color-216-4-22;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
   display: flex;
   flex-shrink: 0;
-  padding: 1.6rem 0.64rem;
+  // padding: 1.6rem 0.64rem;
   position: relative;
   z-index: 1;
 
   > *:not(sib-widget) {
     padding: 0 2.5rem;
   }
-}
 
-#logo {
-  flex: 1 1 0;
-}
-
-#search-bar {
-  position: relative;
-  
-  #search-input {
-    border-radius: 10em;
-    padding: 0.64rem 1.28rem;
-    border: 1px solid $color-215-9-73;
-    height: 3.8rem;
-    width: 28rem;
-    -webkit-appearance: textfield;
-  
-    & ~ #close-search-icon,
-    & ~ #search-icon {
-      color: $color-215-9-73;
-      display: block;
-      font-size: 1.7rem;
-      margin: auto;
-      position: absolute;
-      right: 3.7rem;
-      top: 50%;
-      transform: translateY(-50%);
-      -webkit-text-stroke: 1px $color-215-9-73;
-    }
-  
-    & ~ #close-search-icon {
-      opacity: 0;
-    }
-  
-    &:focus {
-      & ~ #close-search-icon {
-        opacity: 1;
-      }
+  #logo {
+    flex: 1 1 0;
+  }
   
+  #search-bar {
+    position: relative;
+    
+    #search-input {
+      border-radius: 10em;
+      padding: 0.64rem 1.28rem;
+      border: 1px solid $color-215-9-73;
+      height: 3.8rem;
+      width: 28rem;
+      -webkit-appearance: textfield;
+    
+      & ~ #close-search-icon,
       & ~ #search-icon {
-        visibility: hidden;
-      }
-    }
-  }
-}
-
-details {
-  // cursor: pointer;
-
-  summary {
-
-    &::-moz-list-bullet {
-      list-style-type: none;
-    }
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-  }
-}
-
-details {
-  position: relative;
-
-  .sib-notifications__button {
-    @include icon('bell');
-    font-size: 3rem;
-
-    &::before {
-      margin-left: 0;
-    }
-
-    img {
-      display: none;
-    }
-
-    .sib-notifications__counter {
-      left: 2.1rem;
-      position: absolute;
-      top: -3px;
-    }
-  }
-
-  .sib-notifications__list {
-    position: absolute;
-    right: 0;
-    top: 5.6rem;
-  }
-}
-
-details#user-controls {
-
-  // summary:focus {
-  //   background-color: $color-233-18-29;
-  //   color: $color-0-0-100;
-  //   outline: none;
-  // }
-
-  #user-controls__profile {
-    div {
-      display: flex;
-      flex-direction: row-reverse;
-      
-      > * {
-        vertical-align: middle;
+        color: $color-215-9-73;
+        display: block;
+        font-size: 1.7rem;
+        margin: auto;
+        position: absolute;
+        right: 3.7rem;
+        top: 50%;
+        transform: translateY(-50%);
+        -webkit-text-stroke: 1px $color-215-9-73;
       }
     
-      img {
-        border-radius: 100%;
-        height: 4.8rem;
-        margin-right: 2rem;
-        object-fit: cover;
-        object-position: center;
-        width: 4.8rem;
+      & ~ #close-search-icon {
+        opacity: 0;
       }
-
-      sib-display-value[name='first_name'] {
-        // @include icon('arrow-down');
-        align-items: center;
-        display: flex;
-        flex-direction: row-reverse;
-        font-size: 1.8rem;
-        font-weight: 600;
-
-        &::before {
-          margin-left: 1.5rem;
+    
+      &:focus {
+        & ~ #close-search-icon {
+          opacity: 1;
+        }
+    
+        & ~ #search-icon {
+          visibility: hidden;
         }
       }
     }
   }
-
-  #user-controls__panel {
-    height: 0;
-    position: absolute;
-    right: 0;
-    z-index: 1;
-    
-    > nav {
-      background-color: $color-0-0-100;
-      box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+  
+  details {
+    margin-right: 2.5rem;
+  
+    summary {
+  
+      &::-moz-list-bullet {
+        list-style-type: none;
+      }
+  
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  
+  details {
+    position: relative;
+  
+    .sib-notifications__button {
+      @include icon('bell');
+      font-size: 3rem;
+  
+      &::before {
+        margin-left: 0;
+      }
+  
+      img {
+        display: none;
+      }
+  
+      .sib-notifications__counter {
+        left: 2.1rem;
+        position: absolute;
+        top: -3px;
+      }
+    }
+  
+    .sib-notifications__list {
       position: absolute;
       right: 0;
-      top: 0;
-      width: 208px;
-      
-      ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        
-        li {
-          border-bottom: 1px solid $color-213-20-91;
-          margin-right: 0;
-          padding: 1.6rem 1.3rem;
+      top: 5.6rem;
+    }
+  }
+  
+  details#user-controls {
+    padding: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
-          a {
-            color: $color-213-4-50;
-            text-decoration: none;
+    summary {
+      padding: 16px;
+      cursor: pointer;
+      &:focus {
+        background-color: $color-233-18-29;
+        color: $color-0-0-100;
+        outline: none;
+      }
+    }
+  
+    #user-controls__profile {
+      div {
+        display: flex;
+        flex-direction: row-reverse;
+        
+        > * {
+          vertical-align: middle;
+        }
+      
+        img {
+          border-radius: 100%;
+          height: 4.8rem;
+          margin-right: 2rem;
+          object-fit: cover;
+          object-position: center;
+          width: 4.8rem;
+        }
+  
+        sib-display-value[name='first_name'] {
+          @include icon('arrow-down');
+          align-items: center;
+          display: flex;
+          flex-direction: row-reverse;
+          font-size: 1.8rem;
+          font-weight: 600;
+  
+          &::before {
+            margin-left: 1.5rem;
           }
         }
       }
-
-      button {
-        color: $color-213-4-50;
-        padding: 1.6rem 1.3rem;
-        text-align: left;
+    }
+  
+    #user-controls__panel {
+      height: 0;
+      position: absolute;
+      right: 0;
+      z-index: 1;
+      width: 100%;
+      top: 83px;
+      
+      > nav {
+        background-color: $color-0-0-100;
+        box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+        position: absolute;
+        right: 0;
+        top: 0;
         width: 100%;
+        
+        ul {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          
+          li {
+  
+            sib-link {
+              color: $color-213-4-50;
+              display: block;
+              border-bottom: 1px solid $color-213-20-91;
+              margin-right: 0;
+              padding: 1.6rem 1.3rem;
+              &:hover {
+                color: $color-244-73-62;
+              }
+            }
+          }
+        }
+  
+        button {
+          color: $color-213-4-50;
+          padding: 1.6rem 1.3rem;
+          text-align: left;
+          width: 100%;
+        }
+      }
+    }
+  
+    &[open] {
+      background-color: $color-233-18-29;
+      color: $color-0-0-100;
+  
+      #user-controls__profile {
+  
+        div {
+  
+          sib-display-value[name='first_name'] {
+            @include icon('close');
+  
+            &::before {
+              margin-left: 1.5rem;
+            }
+          }
+        }
       }
     }
   }
-
-  // &[open] {
-  //   background-color: $color-233-18-29;
-  //   color: $color-0-0-100;
-
-  //   #user-controls__profile {
-
-  //     div {
-
-  //       sib-display-value[name='first_name'] {
-  //         @include icon('close');
-
-  //         &::before {
-  //           margin-left: 1.5rem;
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-}
-
+  
+}

src/styles/base/main.scss

@@ -63,7 +63,7 @@ h6 {
 }
 
 h1 {
-  font-size: 2.1rem;
+  font-size: 2rem;
 }
 
 h2 {
@@ -107,7 +107,6 @@ a {
 
 .content-box {
   @include window-style-modal();
-  @extend %padding-main;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -120,6 +119,10 @@ a {
     margin: 0 auto;
     min-height: calc(100vh - 84px);
   }
+
+  &.with-padding {
+    @extend %padding-main;
+  }
 }
 
 .drive {
@@ -144,6 +147,24 @@ a {
   }
 }
 
+.name {
+  color: $color-216-4-22;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.username {
+
+  &::before {
+    content: '@';
+  }
+}
+
+.section {
+  border-bottom: 1px solid $color-221-51-90;
+  padding: 4.5rem;
+}
+
 // Compatibility layer for non-updated components
 @import 'compat';
 // Other base components

src/styles/layout/members/member-profile.scss

@@ -12,14 +12,12 @@
     .member-bio {
 
       div[name='member-profile__bio'] {
-        border-bottom: 1px solid $color-221-51-90;
         display: grid;
         grid-template-areas: "avatar name status"
           "avatar pseudo status"
           "avatar bio status"
           "avatar list button";
         grid-template-columns: 1fr 2fr 1fr;
-        padding: 4.5rem;
 
         div[name='member-img'] {
           grid-area: avatar;

src/styles/layout/user/_index.scss

@@ -0,0 +1 @@
+@import 'user-profile';

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

@@ -0,0 +1,77 @@
+.user-profile__container {
+
+  .user-bio {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-areas: "avatar name"
+      "avatar information";
+    grid-template-columns: minmax(300px, 400px) 2fr;
+
+    .avatar-display {
+      grid-area: avatar;
+      overflow: hidden;
+      position: relative;
+
+      img {
+        width: 300px;
+        height: 300px;
+        object-fit: cover;
+        border-radius: 50%;
+        overflow: hidden;
+        object-position: center;
+        
+      }
+    }
+
+    .name-diplay {
+      grid-area: name;
+
+      [name='user-name-groups'] {
+        align-items: baseline;
+        align-self: end;
+        display: flex;
+
+        sib-multiple {
+          display: flex;
+          padding-left: 1.4rem;
+
+          groups-name {
+            @extend %user-role;
+          }
+        }
+      }
+    }
+
+    .info-form {
+      grid-area: information;
+
+      /* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
+      [name="account.picture"] {
+        margin-bottom: 1rem;
+      }
+
+      hd-instruction {
+        margin-left: 1rem;
+
+        span {
+          color: $color-233-18-29;
+          font-weight: bold;
+        }
+
+        p {
+          margin-left: 1rem;
+        }
+      }
+      /* Fin commentaire sur upload photos */
+    }
+
+    [name^="inline-"] {
+      display: flex;
+      justify-content: flex-start;
+
+      >*:not(:last-child) {
+        margin-right: 3rem;
+      }
+    }
+  }
+}