Merge branch 'gm-ui-alpha' into 'master'

Gm ui alpha

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

src/dependencies.pug

@@ -28,5 +28,6 @@ script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
 script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
+script(type="module" src="https://unpkg.com/@startinblox/component-conversation")
 script(type="module" src="https://unpkg.com/@startinblox/component-directory")
 

src/index.pug

@@ -9,10 +9,11 @@ html(lang="en")
     include dependencies.pug
   body
     div.layer
-      header#header(role='banner')
+      header#header.row(role='banner')
         include header.pug
-      #content
+      .content.row
         include menu-left.pug
+        
         main#mainContainer
           //- #dashboard(hidden)
             include page-dashboard.pug

src/page-group-create.pug

@@ -4,27 +4,23 @@
   .form-view
     sib-form(
       data-src=`${sdn}/circles/`,
-      range-owner=`${sdn}/members/`, 
+      range-owner=`${sdn}/users/`, 
       range-team=`${sdn}/members/`
       
       data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
 
-      label-description='Description',
-      label-foaf:jabberID='Chatroom id',
       label-name="Channel's name",
+      label-description='Description',
       label-owner='Owner of this channel',
+      label-foaf:jabberID='Chatroom id',
       label-team='Member(s) of this channel',
 
       value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
-      widget-description-text='hdapp-form-text',
-
-      value-team-text='Add any members as you want.',
-      widget-team-text='hdapp-form-text',
-
       value-owner-text='The one who will admin this channel',
-      widget-owner-text='hdapp-form-text',
+      value-team-text='Add any members as you want.',
+
 
       widget-description='sib-form-textarea',
       widget-jabberRoom='sib-form-checkbox',
-      widget-team='sib-form-multiple-dropdown',
+      widget-team='sib-form-multiple-dropdown'
     )

src/page-job-offers.pug

@@ -2,14 +2,17 @@ div.grid-layer
 
   include templates/template-groups.pug
   include templates/template-skills.pug
+  include templates/template-joboffers-filter.pug
+  include templates/template-joboffers-conversation.pug
 
   div.grid-layer-main.containerV
     h2 New offers
       span Here you can find and post offers
     sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
-      data-fields='user-thumb, creationDate, title, description, skills, send',
+      data-fields='user-thumb, creationDate, title, description, skills, send, conversation',
       
+      set-conversation="@id"
       set-user-thumb='author.account.picture, author.first_name, author.groups',
       widget-author.account.picture='sib-display-img',
       widget-author.groups='groups-name',
@@ -20,19 +23,20 @@ div.grid-layer
       
       action-send='member-chat',
       label-send='Send a private message',
+
+      widget-conversation='joboffers-conversation'
       
       search-range-skills=`${sdn}/skills/`,
-      search-fields='content, skills, open',
+      search-fields='content, open, skills',
       
       set-content='title, description',
       
       search-label-content='Search by keyword',
       search-label-skills='Search by skills',
-      search-label-open='Filter opened or closed offers',
 
       search-widget-content='sib-form-placeholder-text',
       search-widget-skills='sib-form-placeholder-dropdown',
-      search-widget-open='sib-form-placeholder-text'
+      search-widget-open='joboffers-filter'
     )
   div.grid-layer-links.containerV
     template#groups-list-template

src/page-project-create.pug

@@ -2,37 +2,32 @@
   h1 New project
   p.form-goal Here you can create your project, add members and assign them a job.
   .form-view
-    sib-form(
+    sib-form.block(
       data-src=`${sdn}/projects/`,
-      range-customer=`${sdn}/customers/`,
       range-members=`${sdn}/members/`,
       range-team=`${sdn}/users/`,
 
-      data-fields=`customer.name, name, customer.logo, description, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
+      data-fields='block-project__info, block-project__fee, block-project__customer',
-      set-block-team=`team, members`,
-      set-block-fee=`businessProvider, businessProviderFee`,
-      
-      label-customer.name='Business name',
-      label-name='Project name',
-      label-description='Project description',
-      label-customer.logo='Customer logo',
-      label-customer.companyRegister='Company register',
-      label-customer.address='Customer address',
-      label-customer.firstName='Contact firstname',
-      label-customer.lastName='Contact lastname',
-      label-customer.role='Contact role',
-      label-customer.email='Contact email',
-      label-customer.phone='Contact phone',
-      label-businessProvider='Business provider',
-      label-businessProviderFee='Fee (%)',
-      label-foaf:jabberID='Chatroom id',
-      label-team='Teammates',
-      label-members='Member role'
 
-      widget-jabberRoom='sib-form-checkbox',
+      set-block-project__info='customer.name, name, customer.logo, description',
-      widget-description='sib-form-textarea',
+      label-customer.name='Customer\'s name',
-      widget-team='sib-form-multiple-dropdown',
+      label-name='Project\'s name',
-      widget-members='sib-form-multiple-dropdown',
+      label-customer.logo='Customer\'s logo',
-      bind-resources
+      label-description='Project description',
+      
+      set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
+      widget-fieldset-fee='template-legend-fee',
+      label-businessProvider='Business provider',
+      label-businessProviderFee='Amount of the contribution',
+      
+      set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
+      widget-fieldset-customer='template-legend-customer',
+      label-customer.companyRegister='Company register',
+      label-customer.address='Address',
+      label-customer.firstName='Name of the contact at the customer\'s premises',
+      label-customer.lastName='Firstname of the contact at the customer\'s premises',
+      label-customer.role='Role within the company',
+      label-customer.email='Email',
+      label-customer.phone='Phone'
     )
     

src/page-project-edit.pug

@@ -1,10 +1,52 @@
+sib-widget(name='template-legend-fee')
+  template
+    span Fee
+
+sib-widget(name='template-legend-customer')
+  template
+    span Customer information
+
+sib-widget(name='template-legend-team')
+  template
+    span The team
+
 .frame-form
   h1 Edit your project
   p.form-goal Here you can edit your projet's details
   .form-view
     sib-form.block(
+      data-src=`${sdn}/projects/`,
+      range-members=`${sdn}/members/`,
       range-team=`${sdn}/users/`,
 
+      data-fields='block-project__info, block-project__fee, block-project__customer',
+
+      set-block-project__info='customer.name, name, customer.logo, description',
+      label-customer.name='Customer\'s name',
+      label-name='Project\'s name',
+      label-customer.logo='Customer\'s logo',
+      label-description='Project description',
+      
+      set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
+      widget-fieldset-fee='template-legend-fee',
+      label-businessProvider='Business provider',
+      label-businessProviderFee='Amount of the contribution',
+      
+      set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
+      widget-fieldset-customer='template-legend-customer',
+      label-customer.companyRegister='Company register',
+      label-customer.address='Address',
+      label-customer.firstName='Name of the contact at the customer\'s premises',
+      label-customer.lastName='Firstname of the contact at the customer\'s premises',
+      label-customer.role='Role within the company',
+      label-customer.email='Email',
+      label-customer.phone='Phone',
+
       bind-resources
     )
 
+    //-
+      set-block-project__team='fieldset-team, team',
+      widget-fieldset-team='template-legend-team',
+      widget-team='sib-form-multiple-dropdown',
+      (sib-form-multiple-dropdown ne fonctionne pas).

src/page-project-profile.pug

@@ -1,11 +1,11 @@
 .frame
 
+  include templates/template-business-provider.pug
   include templates/template-customer.pug
   include templates/template-team.pug
 
   sib-display(
     data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
-    extra-context='{"project-profile":"${sdn}/projects/"}'
     
     set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
     value-const-title1='N°',
@@ -18,14 +18,9 @@
     value-label-description='DESCRIPTION:',
     widget-customer.logo='sib-display-img',
 
-    set-block-fee='label-fee, details-cell, details-business',
+    set-block-fee='label-fee, businessProvider',
-    set-details-cell='cell-name, cell-fee, percentage',
-    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
     value-label-fee='FEE:',
-    value-cell-name='Happy Dev Paris:',
+    widget-businessProvider='template-business-provider'
-    value-cell-fee='5',
-    value-percentage='%',
-    value-comma=', ',
 
     set-block-customer='label-customer, customer',
     value-label-customer='CUSTOMER INFORMATIONS:'

src/styles/filters.scss

@@ -12,6 +12,7 @@
     appearance: none;
     border-style: none;
     box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
+    color: $color-taupe-gray;
     font-size: 1.36rem;
     line-height: 1.80;
     margin-top: 1.36rem;
@@ -32,9 +33,7 @@
     background-repeat: no-repeat;
     background-size: 14px 9px;
     box-sizing: border-box;
-    color: $color-taupe-gray;
     display: inline-block;
-    padding: 0.68rem;
     width: 100%;
 
     > option:not(:first-child) {

src/styles/form.scss

@@ -18,7 +18,7 @@
 #project-create,
 #project-edit {
   flex: 1;
-  font-size: 1.7rem;
+  font-size: 1.5rem;
 
   h1 {
     color: $color-purple-dark;
@@ -39,11 +39,12 @@
 
   div[name^='block-'] {
     display: flex;
-    
+    flex-direction: column;
-    > * {
-      margin-right: 4rem;
-    }
   }
+
+  @include styleTemplateFieldset('fee');
+  @include styleTemplateFieldset('customer');
+  @include styleTemplateFieldset('team');
   
   sib-form-auto-completion,
   sib-form-checkbox,
@@ -64,7 +65,7 @@
       border: none;
       color: $color-purple-dark;
       line-height: 1.5;
-      width: 95%;
+      width: 100%;
     }
 
     input,
@@ -86,6 +87,7 @@
     label {
       color: $color-dark-lava;
       font-weight: 600;
+      text-transform: initial;
     }
   }
 

src/styles/header.scss

@@ -9,10 +9,6 @@
   padding: 1.6rem 0.64rem;
   position: relative;
   z-index: 1;
-  //position: relative;
-  //@include border-shadow(bottom);
-  //flex-grow: 0;
-  //flex-basis : 150px;
 
   > * {
     padding: 0 2.5rem;

src/styles/index.scss

@@ -20,6 +20,7 @@
 @import 'member-profile';
 @import 'members';
 @import 'project-profile';
+@import 'member-chat';
 
 // @import 'members';
 @import 'header';

src/styles/main.scss

@@ -10,14 +10,23 @@
   --sib-notifications-theme: #{$color-46-100-50};
   
   body {
+    /*Will help to make .content fit your height screen size. Part.1*/
     background-color: $color-anti-flash-white;
     color: $color-text-base;
+    display: flex;
+    flex-direction: column;
     font-size: 1.6rem;
-    margin: 0 auto;
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
     overflow-wrap: break-word;
   }
 }
 
+img {
+  max-width: 100%;
+}
+
 h1,
 h2,
 h3,
@@ -100,10 +109,12 @@ li {
   overflow-x: hidden;
 }
 
+/*
 #content {
   display: flex;
   overflow: hidden;
 }
+*/
 
 #mainContainer {
   flex-grow: 1;
@@ -222,3 +233,99 @@ member-info-groups {
   @extend %group;
 }
 
+
+/* NEW RESPONSIVE */
+
+.right-sidebar {
+  overflow: hidden;
+  transition: width 0.3s;
+}
+
+.right-sidebar.js-right-sidebar-expanded {
+  width: 130px;
+}
+
+.right-sidebar.js-right-sidebar-collapsed {
+  width: 62px;
+}
+
+/*Define the basic row-column properties that construct the foundation*/
+.row {
+  display: flex;
+  max-width: 100%;
+}
+
+.content {
+  /*Will help to make .content fit your height screen size. Part 2*/
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden;
+}
+
+.col {
+  min-width: 0;
+}
+
+.block-grid {
+  display: flex;
+  flex-wrap: nowrap;
+  height: 100%;
+}
+
+/* Dividing into columns */
+@mixin respond-to($breakpoint) {
+  
+  @if map-has-key($breakpoints, $breakpoint) {
+
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+
+  @else {
+    @warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
+      + "Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}
+
+.small-2 {
+
+  @include respond-to('phone'){
+    display: block;
+    flex: 0 1 calc(100% / 12 * 2);
+  }
+}
+
+.small-shrink {
+
+  @include respond-to('phone') {
+    display: block;
+    flex: 0 1 auto;
+  }
+}
+
+.medium-auto {
+
+  @include respond-to('tablet') {
+    display: block;
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+.small-12 {
+
+  @include respond-to('phone') {
+    display: block;
+    flex: 0 1 calc(100% / 12 * 12);
+  }
+}
+
+.small-auto {
+
+  @include respond-to ('phone') {
+    display: block;
+    flex: 1;
+    overflow: auto;
+  }
+}

src/styles/member-chat.scss

@@ -0,0 +1,3 @@
+#member-chat {
+  width: 100%;
+}

src/styles/menu-right.scss

@@ -3,7 +3,6 @@
   > div {
 
     nav {
-
       transition: all 0.5s;
 
       > sib-router {

src/styles/mixins.scss

@@ -147,3 +147,14 @@
     }
   }
 }
+
+@mixin styleTemplateFieldset($name) {
+  template-legend-#{$name} {
+    border-bottom: 1px solid $color-link-water;
+    color: $color-purple-dark;
+    font-size: 1.8rem;
+    font-weight: 600;
+    padding-bottom: 1rem;
+  }
+}
+

src/styles/project-profile.scss

@@ -58,6 +58,7 @@
 
   [name='infos'] {
     display: flex;
+    justify-content: space-between;
 
     [name='description'] {
       width: 90%;
@@ -68,25 +69,27 @@
       display: block;
       height: 8.5vh;
       position: relative;
-      text-align: center;
+      text-align: end;
       width: 15vw;
     }
   }
 
+  [name='businessProvider'] {
+    
+    ul {
+      list-style: none;
+      padding-left: 0;
 
-  [name^='details-'] {
+      li {
-    display: flex;
+        
-    font-size: 1.5rem;
+        &:first-child {
-    margin-bottom: 0.85rem;
+          margin-bottom: 0.5em;
-
+        }
-    [name='cell-name'],
+        
-    [name='business-contribution'] {
+        span {
-      font-weight: bold;
+          font-weight: bold;
-      margin-right: 0.5rem;
+        }
-    }
+      }
-
-    [name='comma'] {
-      margin-right: 0.2em;
     }
   }
 }
@@ -153,30 +156,10 @@
 
         &::before {
           color: $color-selective-yellow;
-          font-size: 2rem;
+          font-size: 2.2rem;
           padding: 0 1rem 0 0;
         }
       }
-
-      [name$='name'] {
-        @include mdi('account-outline');
-
-        &::before {
-          padding-left: 0.2em;
-        }
-      }
-
-      [name$='email'] {
-        @include icon('envelope');
-      }
-
-      [name$='phone'] {
-        @include mdi('cellphone-iphone');
-
-        &::before{
-          padding-left: 0.2em;
-        }
-      }
     }
   }
 }
@@ -227,13 +210,13 @@
         }
 
         span ~ sib-display {
-
+          
-          div {
+          > div {
             display: flex;
+            margin-left: 1rem;
             
             div[name='name'] {
               @extend %group;
-              margin-left: 1rem;
             }
           }
         }

src/styles/variables.scss

@@ -85,10 +85,6 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
     @include mdi('atom');
   }
 
-  sib-multiple[name='user.groups'] {
-    @include mdi('account-outline');
-  }
-
   [name$='email'] * {
     @include mdi('email-outline');
   }
@@ -106,6 +102,11 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   color: $color-spun-pearl;
   font-weight: 600;
   margin: 2em 0 0.5em;
+  text-transform: uppercase;
+
+  > div {
+    padding-bottom: 1rem;
+  }
 }
 
 %notification {
@@ -145,5 +146,5 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 $breakpoints: (
   phone: 480px,
   tablet: 768px,
-  desktop: 1024px,
+  desktop: 1024px
-);
+) !default;

src/templates/template-business-provider.pug

@@ -0,0 +1,6 @@
+sib-widget(name='template-business-provider')
+  template
+    ul
+      li #[span Happy Dev Paris:] 5%
+      li #[span Business provider:] ${value.name}, ${value.fee ? value.fee:0}%
+      

src/templates/template-customer.pug

@@ -13,7 +13,7 @@ sib-widget(name='customer-template')
       div
         h5 Contact:
         ul
-          li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role}
+          li(class='mdi-account-outline') #[span ${value.firstName} ${value.lastName}], ${value.role}
-          li(name='email')
+          li(class='mdi-email-outline')
             a(href='mailto:${value.email}') ${value.email}
-          li(name='phone') ${value.phone}
+          li(class='mdi-cellphone-iphone') ${value.phone}

src/templates/template-joboffers-conversation.pug

@@ -0,0 +1,3 @@
+sib-widget
+  template
+    sib-conversation(data-src="${value}", id-suffix="threads")

src/templates/template-joboffers-filter.pug

@@ -0,0 +1,8 @@
+sib-widget(name='joboffers-filter')
+  template
+    select
+      option(name='Offers',disabled) Offers
+      option(selected,name='Current offers') Current offers
+      option(name='Expired offers') Expired offers
+      option(name='All offers') All offers
+      option(name='My offers') Only my offers

src/templates/template-team.pug

@@ -1,11 +1,12 @@
+
 sib-widget(name='team-template')
   template
     sib-display(
-      data-src="${value.user.account['@id']}",
+      data-src="${value.user['@id']}"
-      data-fields='picture',
+      data-fields='account.picture',
-      widget-picture='sib-display-img'
+      widget-account.picture='sib-display-img'
     )
-    div
+    div(name='user.thumb')
       span ${value.user.name}
       sib-display(
         data-src="${value.user.groups['@id']}",
@@ -14,3 +15,17 @@ sib-widget(name='team-template')
       )
     span ${value.name}
 
+//-
+  include templates/template-groups.pug
+
+  sib-widget(name='team-template')
+    template
+      sib-display(
+        data-src="${value.user['@id']}",
+        data-fields='account.picture, name, groups',
+        widget-account.picture='sib-display-img',
+        widget-groups='groups-name',
+        multiple-groups
+      )
+    span ${value.name}
+