Merge branch 'master' into release/projects

src/dependencies.pug

@@ -19,15 +19,15 @@ if endpoints.events || (endpoints.get && endpoints.get.events)
     //- script(type="module" src="/lib/sib-event/sib-event.js" defer)
 
 if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-    script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.5" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.6" defer)
     //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
 
 if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
-    script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.5" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.7" defer)
     //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
 
 if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
-    script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.2" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.3" defer)
     //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
 
 if endpoints.users || (endpoints.get && endpoints.get.users)

src/menu-left.pug

@@ -79,10 +79,16 @@ solid-router#navbar-router(default-route='dashboard')
           div.menu-icon.icon-folder-alt
       solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
       div.sub-menu.menu-notification
+        div#loader-projects.loader.loader-menu
+          div
+          div
+          div
+          div
         solid-display.project-tab(
           bind-user
           nested-field='projects'
           fields='project'
+          loader-id='loader-projects'
           empty-widget='hubl-create'
           empty-value='projet'
           widget-project='hubl-menu-fix-url-project'
@@ -100,10 +106,16 @@ solid-router#navbar-router(default-route='dashboard')
           div.menu-icon.icon-folder-alt
       solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
       div.sub-menu.menu-notification
+        div#loader-circles.loader.loader-menu
+          div
+          div
+          div
+          div
         solid-display.circle-tab(
           bind-user
           nested-field='circles'
           fields='circle'
+          loader-id='loader-circles'
           empty-widget='hubl-create'
           empty-value='cercle'
           widget-circle='hubl-menu-fix-url-circle'
@@ -120,9 +132,15 @@ solid-router#navbar-router(default-route='dashboard')
         div.menu-icon.icon-envelope-letter
       solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
       div.sub-menu.menu-notification
+        div#loader-messages.loader.loader-menu
+          div
+          div
+          div
+          div
         solid-display.nosub.message-tab(
           data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
           fields='name, chatProfile.jabberID, badge'
+          loader-id='loader-messages'
           search-fields="name"
           search-label-name="Rechercher..."
           search-widget-name="hubl-search-users"

src/styles/components/loader.scss

@@ -0,0 +1,75 @@
+.loader {
+  margin: 0 auto;
+  position: relative;
+  width: 80px;
+  height: 20px;
+
+  &.loader-top {
+    top: 30px;
+  }
+
+  div {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: var(--color-menu-background);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+
+  &.loader-menu div {
+    width: 8px;
+    height: 8px;
+    background: var(--color-menu-text);
+  }
+
+  div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+
+  div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+
+  div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+
+  div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(24px, 0);
+  }
+}

src/styles/index.scss

@@ -6,6 +6,7 @@
 @import 'abstracts/fonts';
 @import 'abstracts/variables';
 @import 'abstracts/mixins';
+@import 'components/loader';
 @import 'components/icons/index';
 @import 'base/main';
 @import 'base/about';

src/views/admin/page-admin-circles-create.pug

@@ -3,10 +3,17 @@ div.content-box__info.flex
 
   h1.centered Créer un cercle
 
+  div#loader-circles-create.loader.loader-top
+    div
+    div
+    div
+    div
+
   solid-form.form.button-register(
     data-src=`${endpoints.circles || endpoints.post.circles}`
 
     fields='status, name, description'
+    loader-id='loader-circles-create'
 
     class-status='form-label is-light is-full-width color'
     class-name='form-label is-light is-full-width input-text-like'

src/views/admin/page-admin-circles.pug

@@ -66,6 +66,7 @@
             bind-user
             nested-field='circles'
             fields='circle.name, circle.owner, leaveButton'
+            loader-id='loader-admin-circles'
 
             class-circle.name='w280 border cell-with-name'
             class-circle.owner='w280 border cell-with-id-card'
@@ -101,6 +102,7 @@
 
             data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
             fields='name, owner, members'
+            loader-id='loader-admin-circles'
 
             class-name='w280 border cell-with-name'
             class-owner='w280 border cell-with-id-card'
@@ -112,6 +114,11 @@
             order-by="name"
           )
 
+      div#loader-admin-circles.loader.loader-top
+        div
+        div
+        div
+        div
 
   #admin-circle-create.content-box__height(hidden)
     include page-admin-circles-create.pug

src/views/admin/page-admin-projects-create.pug

@@ -14,10 +14,17 @@ div.content-box__info.flex
 
   h1.centered Créer un nouveau projet
 
+  div#loader-projects-create.loader.loader-top
+    div
+    div
+    div
+    div
+
   solid-form.form.button-register(
     data-src=`${endpoints.projects || endpoints.post.projects}`
     
     fields='status, line-1(customer.name, name), description, line-2(captain)'
+    loader-id='loader-projects-create'
 
     label-status='Statut du cercle*'
     widget-status='solid-form-hidden'

src/views/admin/page-admin-projects.pug

@@ -82,6 +82,7 @@
             bind-user
             nested-field="projects"
             fields='project.name, project.members, project.captain, leaveButton'
+            loader-id='loader-admin-projects'
 
             class-project.name='w280 cell border cell-with-name'
             class-project.members='w280 cell border cell-with-id-card'
@@ -121,6 +122,7 @@
 
             data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
             fields='name, members, captain, joinButton'
+            loader-id='loader-admin-projects'
 
             class-name='w280 cell border cell-with-name'
             class-members='w280 cell border cell-with-id-card'
@@ -136,5 +138,11 @@
             order-by="name"
           )
 
+      div#loader-admin-projects.loader.loader-top
+        div
+        div
+        div
+        div
+
   #admin-project-create(hidden)
     include page-admin-projects-create.pug

src/views/admin/page-admin-users-create.pug

@@ -3,10 +3,17 @@ div.content-box__info.flex
 
   h1.centered Ajouter un utilisateur à la plateforme
 
+  div#loader-users-create.loader.loader-top
+    div
+    div
+    div
+    div
+
   solid-form.form.button-register(
     data-src=`${endpoints.users || endpoints.post.users}`
 
     fields='line-1(first_name, last_name), line-2(username, email), line-3(password)'
+    loader-id='loader-users-create'
 
     class-first_name='form-label is-light is-half-width input-text-like'
     class-last_name='form-label is-light is-half-width input-text-like'

src/views/admin/page-admin-users-edit.pug

@@ -3,15 +3,24 @@ div.content-box__info.flex
 
   h1.centered 
     span Modifier un utilisateur
+
+    div#loader-users-edit.loader.loader-top
+      div
+      div
+      div
+      div
+
     solid-display(
       bind-resources=''
       fields='name'
+      loader-id='loader-users-edit'
     )  
 
   solid-form.form.button-register(
     bind-resources=''
 
     fields='line-1(first_name, last_name), line-2(email)'
+    loader-id='loader-users-edit'
 
     class-first_name='form-label is-light is-half-width input-text-like'
     class-last_name='form-label is-light is-half-width input-text-like'

src/views/admin/page-admin-users.pug

@@ -38,6 +38,7 @@
             class='table-body'
             data-src=`${endpoints.users || endpoints.get.users}`
             fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
+            loader-id='loader-admin-users'
 
             class-account.picture='avatar user-thumb__picture'
             class-name='user-thumb__name'
@@ -53,6 +54,11 @@
             order-by='username'
           )
 
+      div#loader-admin-users.loader.loader-top
+        div
+        div
+        div
+        div
 
   #admin-users-create.content-box__height(hidden)
     include page-admin-users-create.pug

src/views/circle/page-circle-edit.pug

@@ -46,6 +46,12 @@ div.content-box__info
   solid-ac-checker(permission='acl:Write', bind-resources)
     h1 Modifie ton cercle
 
+    div#loader-circle-edit.loader.loader-top
+      div
+      div
+      div
+      div
+    
     solid-form.form.button-register(
       bind-resources
 
@@ -99,6 +105,7 @@ div.content-box__info
         class='table-body'
         bind-resources
         fields='members'
+        loader-id='loader-circle-edit'
 
         multiple-members=''
         widget-members='hubl-team-template-edit'

src/views/circle/page-circle-profile.pug

@@ -7,10 +7,17 @@ solid-router(default-route='circle-profile', hidden)
   
   .content-box__info.flex
 
+    div#loader-circle-profile.loader
+      div
+      div
+      div
+      div
+
     .flex.space-between.with-padding.mobile-vertical-align
       solid-display.mobile-margin__bottom(
         bind-resources
         fields='creationDateSet(title, creationDate)'
+        loader-id='loader-circle-profile'
 
         class-title='word-spacing-right'
 
@@ -74,6 +81,7 @@ solid-router(default-route='circle-profile', hidden)
     solid-display.block(
       bind-resources
       fields='members'
+      loader-id='loader-circle-profile'
 
       multiple-members=''
       widget-members='hubl-circle-team-template'