Merge branch 'DES/enhancement/705-vl-refactor/loader' into DES/enhanc…

…ement/#705-vl-refactor # Conflicts: # app/styles/app.scss # app/styles/au-kaleidos-css/_auk-content.scss # app/styles/au-kaleidos-css/_auk-modal.scss # app/styles/au-kaleidos-css/_auk-textarea.scss # app/styles/au-kaleidos-css/_s-colors.scss
kanselarij-vlaanderen · Mar 8, 2021 · a8fb1ba · a8fb1ba
2 parents e7e99a8 + 791cd52
commit a8fb1ba
Show file tree

Hide file tree

Showing 28 changed files with 45 additions and 92 deletions.
diff --git a/app/pods/cases/case/subcases/loading/template.hbs b/app/pods/cases/case/subcases/loading/template.hbs
@@ -1,6 +1,2 @@
-<div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper auk-u-scroll-no-overflow vl-loader-container--not-supported">
-  <p>
-    {{web-components/vl-loader}}
-  </p>
-</div>
+{{web-components/vl-loader}}
 {{outlet}}
diff --git a/app/pods/components/access-level-pill/template.hbs b/app/pods/components/access-level-pill/template.hbs
@@ -1,6 +1,6 @@
 <div class="auk-u-flex auk-u-flex--vertical-center">
   {{#if this.isLoading}}
-    <div class="vl-loader" role="alert" aria-busy="true"></div>
+    <div class="auk-loader" role="alert" aria-busy="true"></div>
   {{else}}
     {{#if (not @confidential)}}
       {{#if (not this.isEditing)}}

diff --git a/app/pods/components/agenda/agendaitem-search/template.hbs b/app/pods/components/agenda/agendaitem-search/template.hbs
@@ -25,7 +25,7 @@
           </div>
         </div>
         {{#if this.debouncedSearchTask.isRunning}}
-          <div class="vl-loader" role="alert" aria-busy="true"></div>
+          <div class="auk-loader" role="alert" aria-busy="true"></div>
         {{/if}}
       </div>
     </div>

diff --git a/app/pods/components/agenda/agendaitem/agendaitem-controls/template.hbs b/app/pods/components/agenda/agendaitem/agendaitem-controls/template.hbs
@@ -42,7 +42,7 @@
       </AttachPopover>
     </WebComponents::AuButtonToolbar>
   {{else}}
-    <div class="vl-loader"></div>
+    <div class="auk-loader" role="alert" aria-busy="true"></div>
   {{/if}}
   {{#if this.isVerifying}}
     <WebComponents::VlModalVerify

diff --git a/app/pods/components/cases/subcase-mandatees/template.hbs b/app/pods/components/cases/subcase-mandatees/template.hbs
@@ -41,7 +41,7 @@
                 <button type="button"
                         class="vl-button vl-button--link vl-button--icon"
                         disabled>
-                  <div class="vl-loader" role="alert" aria-busy="true"></div>
+                  <div class="auk-loader" role="alert" aria-busy="true"></div>
                 </button>
               {{else}}
                 <button type="button"

diff --git a/app/pods/components/news-item/edit-item/template.hbs b/app/pods/components/news-item/edit-item/template.hbs
@@ -18,12 +18,10 @@
         </button>
       {{/if}}
     {{else}}
-      <div class="vl-loader" role="alert" aria-busy="true">
-        <div class="vl-loader" role="alert" aria-busy="true">
-          <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
-            {{t "nota-loading-text"}}
-          </EmberTooltip>
-        </div>
+      <div class="auk-loader" role="alert" aria-busy="true">
+        <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
+          {{t "nota-loading-text"}}
+        </EmberTooltip>
       </div>
     {{/if}}
   </div>

diff --git a/app/pods/components/newsletter-table/button-toolbar/template.hbs b/app/pods/components/newsletter-table/button-toolbar/template.hbs
@@ -7,7 +7,7 @@
     <i class="vl-button__icon ki-pencil"></i>
   </button>
   {{#if (is-pending (await @agendaitem.nota))}}
-    <div class="vl-loader" role="alert" aria-busy="true">
+    <div class="auk-loader" role="alert" aria-busy="true">
       <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
         {{t "nota-loading-text"}}
       </EmberTooltip>

diff --git a/app/pods/components/newsletter/newsletter-header-overview/template.hbs b/app/pods/components/newsletter/newsletter-header-overview/template.hbs
@@ -109,9 +109,9 @@
                     (or (is-pending agenda.createdFor.mailCampaign) isLoading)
                   }}
                     <li class="vlc-dropdown-menu__item">
-                      <div class="vl-loader-link">
+                      <div class="auk-loader-wrapper auk-loader-wrapper--small auk-u-p-2">
                         <div
-                          class="vl-loader"
+                          class="auk-loader"
                           role="alert"
                           aria-busy="true"
                         ></div>

diff --git a/app/pods/components/subcases/subcase-description/template.hbs b/app/pods/components/subcases/subcase-description/template.hbs
@@ -77,7 +77,7 @@
                (is-pending subcase.onAgendaInfo)
             )
           }}
-            <div class="vl-loader"></div>
+            <div class="auk-loader" role="alert" aria-busy="true"></div>
           {{else}}
             {{#if (await subcase.onAgendaInfo)}}
               {{#if

diff --git a/app/pods/components/subcases/subcase-header/template.hbs b/app/pods/components/subcases/subcase-header/template.hbs
@@ -11,7 +11,7 @@
     {{#if currentSession.isEditor}}
       <div class="vlc-toolbar__item">
         {{#if (or (is-pending canPropose) isLoading)}}
-          <div class="vl-loader"></div>
+          <div class="auk-loader" role="alert" aria-busy="true"></div>
         {{else if (await canPropose)}}
           <button type="button" class="vl-button">
             {{t "propose-for-agenda"}}

diff --git a/app/pods/components/utils/formally-ok-selector/template.hbs b/app/pods/components/utils/formally-ok-selector/template.hbs
@@ -5,7 +5,7 @@
   {{#if isLoading}}
     <div class="auk-u-muted">
       {{t "please-be-patient"}}
-      <div class="vl-loader" role="alert" aria-busy="true"></div>
+      <div class="auk-loader" role="alert" aria-busy="true"></div>
     </div>
   {{else}}
     <PowerSelect

diff --git a/app/pods/components/utils/kind-selector/template.hbs b/app/pods/components/utils/kind-selector/template.hbs
@@ -5,7 +5,7 @@
   {{#if isLoading}}
     <div class="auk-u-muted">
       {{t "please-be-patient"}}
-      <div class="vl-loader" role="alert" aria-busy="true"></div>
+      <div class="auk-loader" role="alert" aria-busy="true"></div>
     </div>
   {{else}}
     {{#power-select

diff --git a/app/pods/components/utils/simple-spinner/template.hbs b/app/pods/components/utils/simple-spinner/template.hbs
@@ -1,5 +1,5 @@
 <div data-test-vl-loader>
   <div class="auk-u-text-align--center">
-    <div class="vl-loader" role="alert" aria-busy="true"></div>
+    <div class="auk-loader" role="alert" aria-busy="true"></div>
   </div>
 </div>
diff --git a/app/pods/components/web-components/au-loader/template.hbs b/app/pods/components/web-components/au-loader/template.hbs
@@ -1,5 +1,5 @@
 {{#if @message}}
-  <div class="auk-loader-wrapper auk-loader-wrapper--small">
+  <div class="auk-loader-wrapper auk-loader-wrapper--small auk-u-maximize-width auk-u-maximize-height">
     <div class="auk-loader" role="alert" aria-busy="true"></div>
     <p>{{@message}}</p>
   </div>

diff --git a/app/pods/components/web-components/au-loading-page/component.js b/app/pods/components/web-components/au-loading-page/component.js
@@ -1,4 +1,3 @@
-import Component from '@ember/component';
-export default Component.extend({
-  classNames: ['vlc-u-box-model-maximize-height', 'vlc-u-box-model-maximize-width', 'vlc-scroll-wrapper', 'auk-u-scroll-no-overflow', 'vl-loader-container--not-supported'],
-});
+import Component from '@glimmer/component';
+
+export default class LoadingPage extends Component {}
diff --git a/app/pods/components/web-components/light-table/vl-content-toggle/template.hbs b/app/pods/components/web-components/light-table/vl-content-toggle/template.hbs
@@ -1,5 +1,5 @@
 {{#if isLoading}}
-  <div class="vl-loader" role="alert" aria-busy="true"></div>
+  <div class="auk-loader" role="alert" aria-busy="true"></div>
 {{else}}
   <input class="vl-checkbox--switch"
          type="checkbox"

diff --git a/app/pods/components/web-components/vl-alert/template.hbs b/app/pods/components/web-components/vl-alert/template.hbs
@@ -6,7 +6,7 @@
 >
   {{#if (eq @type "loading")}}
     <div class="vl-alert__loader">
-      <div class="vl-loader" role="alert" aria-busy="true"></div>
+      <div class="auk-loader" role="alert" aria-busy="true"></div>
     </div>
   {{else}}
     <div class="vl-alert__icon">

diff --git a/app/pods/components/web-components/vl-loader/component.js b/app/pods/components/web-components/vl-loader/component.js
@@ -1,3 +1,3 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
-export default Component.extend({});
+export default class Loader extends Component {}
diff --git a/app/pods/components/web-components/vl-loader/template.hbs b/app/pods/components/web-components/vl-loader/template.hbs
@@ -1,14 +1,12 @@
-<div data-test-vl-loader class="vl-region">
-  <div class="auk-u-text-align--center">
-    <div class="vl-loader" role="alert" aria-busy="true"></div>
-    {{#if (not text)}}
-      <p>
-        {{t "loading-text"}}
-      </p>
-    {{else}}
-      <p>
-        {{text}}
-      </p>
-    {{/if}}
-  </div>
+<div data-test-vl-loader class="auk-loader-wrapper auk-loader-wrapper--small auk-u-maximize-width auk-u-maximize-height">
+  <div class="auk-loader" role="alert" aria-busy="true"></div>
+  {{#if (not text)}}
+    <p>
+      {{t "loading-text"}}
+    </p>
+  {{else}}
+    <p>
+      {{text}}
+    </p>
+  {{/if}}
 </div>
diff --git a/app/pods/components/web-components/vl-table-actions/template.hbs b/app/pods/components/web-components/vl-table-actions/template.hbs
@@ -24,7 +24,7 @@
       </button>
     {{/if}}
   {{else}}
-    <div class="vl-loader" role="alert" aria-busy="true">
+    <div class="auk-loader" role="alert" aria-busy="true">
       <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
         {{t "nota-loading-text"}}
       </EmberTooltip>

diff --git a/app/pods/help/template.hbs b/app/pods/help/template.hbs
@@ -1,6 +1,2 @@
-<div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper auk-u-scroll-no-overflow vl-loader-container--not-supported">
-  <p>
-    {{web-components/vl-loader text=(t "redirect-loading-text")}}
-  </p>
-</div>
+{{web-components/vl-loader text=(t "redirect-loading-text")}}
 {{outlet}}
diff --git a/app/pods/not-supported/template.hbs b/app/pods/not-supported/template.hbs
@@ -1,5 +1,5 @@
 {{!-- template-lint-disable no-bare-strings  --}}
-<div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper auk-u-scroll-no-overflow vl-loader-container--not-supported">
+<div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper auk-u-scroll-no-overflow vl-not-supported">
   <p class="width-50">
     U bent aangemeld in Kaleidos. Kaleidos is een web toepassing waarvoor de goede werking enkel gegarandeerd is in de
     recente PC, Mac en Linux versies van:

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -37,7 +37,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'govflanders/components/_input-field';
 @import 'govflanders/components/_input-group';
 @import 'govflanders/components/_link';
-@import 'govflanders/components/_loader';
 @import 'govflanders/components/_typography';
 @import 'govflanders/components/_upload';
 
@@ -53,7 +52,7 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'govflanders/additions/_button';
 @import 'govflanders/additions/_checkbox';
 @import 'govflanders/additions/_data-table';
-@import 'govflanders/additions/_loader';
+@import 'govflanders/additions/_not-supported';
 
 // Additions to existing utilities
 @import 'govflanders/additions/_background';

diff --git a/app/styles/govflanders/additions/_loader-link.scss b/app/styles/govflanders/additions/_loader-link.scss
diff --git a/...styles/govflanders/additions/_loader.scss → ...govflanders/additions/_not-supported.scss b/...styles/govflanders/additions/_loader.scss → ...govflanders/additions/_not-supported.scss
@@ -1,4 +1,4 @@
-.vl-loader-container--not-supported {
+.vl-not-supported {
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/app/styles/govflanders/components/_loader.scss b/app/styles/govflanders/components/_loader.scss
diff --git a/cypress/integration/unit/agenda.spec.js b/cypress/integration/unit/agenda.spec.js
@@ -329,7 +329,7 @@ context('Agenda tests', () => {
     // TODO is deze not exists wel goed ?
     cy.get(agendaOverview.agendaEditFormallyOkButton).should('not.exist');
     // TODO hoe weten we dat assert goed werkt tenzij we wachten tot de actie afgerond is
-    // cy.get('.vl-loader', {
+    // cy.get('.auk-loader', {
     //   timeout: 60000,
     // }).should('not.exist');
     cy.contains(newSubcase2TitleShort).should('not.exist');

diff --git a/cypress/support/commands/agenda-commands.js b/cypress/support/commands/agenda-commands.js
@@ -469,7 +469,7 @@ function addAgendaitemToAgenda(caseTitle, postponed) {
             cy.get('.vl-checkbox--switch__label').click();
           });
       }
-      cy.get('.vl-loader', {
+      cy.get('.auk-loader', {
         timeout: 12000,
       }).should('not.exist');
       if (caseTitle) {
@@ -481,15 +481,15 @@ function addAgendaitemToAgenda(caseTitle, postponed) {
         cy.wait('@getSubcasesFiltered', {
           timeout: 12000,
         });
-        cy.get('.vl-loader').should('not.exist');
+        cy.get('.auk-loader').should('not.exist');
         cy.get('table > tbody > tr').as('rows');
       } else {
         cy.get('table > tbody > tr').as('rows');
         cy.get('@rows', {
           timeout: 12000,
         }).should('not.have.length', 1);
       }
-      cy.get('.vl-loader').should('not.exist');
+      cy.get('.auk-loader').should('not.exist');
       cy.get('@rows', {
         timeout: 12000,
       }).eq(0)