diff --git a/src/dependencies.pug b/src/dependencies.pug index 526a65f..a688ab5 100644 --- a/src/dependencies.pug +++ b/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) diff --git a/src/menu-left.pug b/src/menu-left.pug index 771db32..6538c09 100644 --- a/src/menu-left.pug +++ b/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" diff --git a/src/styles/components/loader.scss b/src/styles/components/loader.scss new file mode 100644 index 0000000..eef86ae --- /dev/null +++ b/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); + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 1458359..e92bc08 100644 --- a/src/styles/index.scss +++ b/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'; diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index ee876f5..0572b8f 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/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' diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index 3e6c2ef..b545c7b 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/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 diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug index 4007644..0198aa4 100644 --- a/src/views/admin/page-admin-projects-create.pug +++ b/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' diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index 56da86e..c0268b6 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/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 \ No newline at end of file diff --git a/src/views/admin/page-admin-users-create.pug b/src/views/admin/page-admin-users-create.pug index f52dc81..03b4661 100644 --- a/src/views/admin/page-admin-users-create.pug +++ b/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' diff --git a/src/views/admin/page-admin-users-edit.pug b/src/views/admin/page-admin-users-edit.pug index 7873cc4..13a9e9a 100644 --- a/src/views/admin/page-admin-users-edit.pug +++ b/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' diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug index 84cd0e7..5494220 100644 --- a/src/views/admin/page-admin-users.pug +++ b/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 diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index 0b30466..41e4903 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/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' diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug index 5d37887..f92cbb5 100644 --- a/src/views/circle/page-circle-profile.pug +++ b/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'