Merge branch 'DES/enhancement/css-refactor' into DES/enhancement/#726-…

…searchpage-popover
kanselarij-vlaanderen · Feb 22, 2021 · 1d4cfaa · 1d4cfaa
2 parents a7a5ac9 + d34ee0d
commit 1d4cfaa
Show file tree

Hide file tree

Showing 16 changed files with 61 additions and 107 deletions.
diff --git a/app/pods/components/access-level-pill/template.hbs b/app/pods/components/access-level-pill/template.hbs
@@ -45,16 +45,11 @@
       {{action "toggleConfidential"}}
     >
       {{#if lastPiece.confidential}}
-        {{#attach-tooltip
-          arrow="true"
-          animation="shift"
-          placement="top"
-          class="ember-attacher-tooltip"
-        }}
+        <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
           <p>
             {{t "document-is-confidential"}}
           </p>
-        {{/attach-tooltip}}
+        </EmberTooltip>
         <i class="vl-icon ki-lock-closed vl-u-text--error"
         ></i>
       {{else}}
@@ -66,16 +61,11 @@
       {{action "toggleConfidential"}}
     >
       {{#if lastPiece.confidential}}
-        {{#attach-tooltip
-          arrow="true"
-          animation="shift"
-          placement="top"
-          class="ember-attacher-tooltip"
-        }}
+        <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
           <p>
             {{t "document-is-confidential"}}
           </p>
-        {{/attach-tooltip}}
+        </EmberTooltip>
         <i class="vl-icon ki-lock-closed vl-u-text--error"
         ></i>
       {{else}}

diff --git a/app/pods/components/agenda/agenda-detail/sidebar-item/template.hbs b/app/pods/components/agenda/agenda-detail/sidebar-item/template.hbs
@@ -42,32 +42,22 @@
                 {{#if (await @agendaitem.checkAdded)}}
                   <span class="added-tag vlc-agenda-meta__recently-added">
                     <i class="ki-calendar-plus"></i>
-                    {{#attach-tooltip
-                      arrow="true"
-                      animation="shift"
-                      placement="top"
-                      class="ember-attacher-tooltip"
-                    }}
+                    <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
                       <p>
                         {{t "added-agendaitem-text"}}
                       </p>
-                    {{/attach-tooltip}}
+                    </EmberTooltip>
                   </span>
                 {{/if}}
 
                 {{#if (not newsletterInfo.inNewsletter)}}
                   <span class="added-tag vlc-agenda-meta__recently-added">
                     <i class="ki-hide vlc-agenda-detail-sidebar-item__icon--margin-right vlc-u-opacity-50"></i>
-                    {{#attach-tooltip
-                      arrow="true"
-                      animation="shift"
-                      placement="top"
-                      class="ember-attacher-tooltip"
-                    }}
+                    <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
                       <p>
                         {{t "not-visible-in-newsletter"}}
                       </p>
-                    {{/attach-tooltip}}
+                    </EmberTooltip>
                   </span>
                 {{/if}}
 

diff --git a/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs b/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs
@@ -185,30 +185,20 @@
                   <div class="auk-u-flex vlc-agenda-items__icons">
                     {{#if (not newsletterInfo.inNewsletter)}}
                       <i class="vl-button__icon ki-hide vlc-u-opacity-50 auk-u-ml-2 opacity-lighter">
-                        {{#attach-tooltip
-                          arrow="true"
-                          animation="shift"
-                          placement="top"
-                          class="ember-attacher-tooltip"
-                        }}
+                        <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
                           <p>
                             {{t "not-visible-in-newsletter"}}
                           </p>
-                        {{/attach-tooltip}}
+                        </EmberTooltip>
                       </i>
                     {{/if}}
                     {{#if (await @agendaitem.checkAdded)}}
                       <i class="vl-link__icon ki-calendar-plus vlc-agenda-item__icons--margin">
-                        {{#attach-tooltip
-                          arrow="true"
-                          animation="shift"
-                          placement="top"
-                          class="ember-attacher-tooltip"
-                        }}
+                        <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
                           <p>
                             {{t "added-agendaitem-text"}}
                           </p>
-                        {{/attach-tooltip}}
+                        </EmberTooltip>
                       </i>
                     {{/if}}
                   </div>

diff --git a/app/pods/components/news-item/edit-item/template.hbs b/app/pods/components/news-item/edit-item/template.hbs
@@ -20,14 +20,9 @@
     {{else}}
       <div class="vl-loader" role="alert" aria-busy="true">
         <div class="vl-loader" role="alert" aria-busy="true">
-          {{#attach-tooltip
-            arrow="true"
-            animation="shift"
-            placement="bottom"
-            class="ember-attacher-tooltip"
-          }}
+          <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
             {{t "nota-loading-text"}}
-          {{/attach-tooltip}}
+          </EmberTooltip>
         </div>
       </div>
     {{/if}}

diff --git a/app/pods/components/newsletter-table/button-toolbar/template.hbs b/app/pods/components/newsletter-table/button-toolbar/template.hbs
@@ -8,14 +8,9 @@
   </button>
   {{#if (is-pending (await @agendaitem.nota))}}
     <div class="vl-loader" role="alert" aria-busy="true">
-      {{#attach-tooltip
-        arrow="true"
-        animation="shift"
-        placement="bottom"
-        class="ember-attacher-tooltip"
-      }}
+      <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
         {{t "nota-loading-text"}}
-      {{/attach-tooltip}}
+      </EmberTooltip>
     </div>
   {{else}}
     <button
@@ -26,14 +21,9 @@
       {{on "click" this.openNota}}
     >
       <i class="vl-button__icon ki-document"></i>
-      {{#attach-tooltip
-        arrow="true"
-        animation="shift"
-        placement="bottom"
-        class="ember-attacher-tooltip"
-      }}
+      <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
         {{if (await @agendaitem.nota) (t "open-note") (t "no-nota")}}
-      {{/attach-tooltip}}
+      </EmberTooltip>
     </button>
   {{/if}}
   <LinkTo

diff --git a/app/pods/components/utils/formally-ok-selector/template.hbs b/app/pods/components/utils/formally-ok-selector/template.hbs
@@ -1,4 +1,4 @@
-<div class="vlc-input-field-block">
+<div class="vlc-input-field-block vlc-input-field-power-select">
   {{#if (not hideLabel)}}
     {{web-components/vl-form-label value=(t "status")}}
   {{/if}}
@@ -8,13 +8,15 @@
       <div class="vl-loader" role="alert" aria-busy="true"></div>
     </div>
   {{else}}
-    {{#power-select
-      options=options
-      selected=selectedFormallyOk
-      onchange=(action "setAction")
-    as |option|
-    }}
+    <PowerSelect
+      @options={{options}}
+      @searchEnabled={{false}}
+      @selected={{selectedFormallyOk}}
+      @onchange={{action "setAction"}} as |option|>
+      {{#if option.svg }}
+        <WebComponents::AuIcon @name={{option.svg.icon}} @iconSkinColor={{option.svg.color}}/>
+      {{/if}}
       {{option.label}}
-    {{/power-select}}
+    </PowerSelect>
   {{/if}}
 </div>
diff --git a/app/pods/components/web-components/au-power-select/template.hbs b/app/pods/components/web-components/au-power-select/template.hbs
@@ -4,7 +4,7 @@
   @selected={{@selected}}
   @placeholder={{this.placeholder}}
   @onchange={{@onchange}} as |item|>
-  {{#if item.icon}}
+  {{#if item.icon }}
     <WebComponents::AuIcon @name={{item.icon.svg}} @iconSkinColor={{item.icon.color}}/>
   {{/if}}
   {{item.label}}

diff --git a/app/pods/components/web-components/vl-document/template.hbs b/app/pods/components/web-components/vl-document/template.hbs
@@ -2,14 +2,9 @@
   <div class="vlc-document-card-item__title">
     <h6 class="vl-title vl-title--h6">
       {{#if (not (await piece.file.downloadLink))}}
-        {{#attach-tooltip
-          arrow="true"
-          animation="shift"
-          placement="top"
-          class="ember-attacher-tooltip"
-        }}
+        <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
           {{t "document-not-consultable"}}
-        {{/attach-tooltip}}
+        </EmberTooltip>
       {{/if}}
       {{await piece.name}}
     </h6>

diff --git a/app/pods/components/web-components/vl-table-actions/template.hbs b/app/pods/components/web-components/vl-table-actions/template.hbs
@@ -9,40 +9,25 @@
         {{action "openDocument" row bubbles=false}}
       >
         <i class="vl-button__icon ki-document"></i>
-        {{#attach-tooltip
-          arrow="true"
-          animation="shift"
-          placement="bottom"
-          class="ember-attacher-tooltip"
-        }}
+        <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
           {{t "no-nota"}}
-        {{/attach-tooltip}}
+        </EmberTooltip>
       </button>
     {{else}}
       <button type="button" class="vl-button vl-button--link vl-button--icon"
         {{action "openDocument" row bubbles=false}}
       >
         <i class="vl-button__icon ki-document"></i>
-        {{#attach-tooltip
-          arrow="true"
-          animation="shift"
-          placement="bottom"
-          class="ember-attacher-tooltip"
-        }}
+        <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
           {{t "open-note"}}
-        {{/attach-tooltip}}
+        </EmberTooltip>
       </button>
     {{/if}}
   {{else}}
     <div class="vl-loader" role="alert" aria-busy="true">
-      {{#attach-tooltip
-        arrow="true"
-        animation="shift"
-        placement="bottom"
-        class="ember-attacher-tooltip"
-      }}
+      <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
         {{t "nota-loading-text"}}
-      {{/attach-tooltip}}
+      </EmberTooltip>
     </div>
   {{/if}}
   {{#link-to

diff --git a/app/pods/settings/ministers/template.hbs b/app/pods/settings/ministers/template.hbs
@@ -105,14 +105,9 @@
                   {{action "toggleProperty" "isResigningMandatee" mandatee}}
                 >
                   <i class="vl-button__icon ki-settings"></i>
-                  {{#attach-tooltip
-                    arrow="true"
-                    animation="shift"
-                    placement="bottom"
-                    class="ember-attacher-tooltip"
-                  }}
+                  <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
                     {{t "resign"}}
-                  {{/attach-tooltip}}
+                  </EmberTooltip>
                 </button>
                 <button type="button"
                         data-test-mandatee-delete={{index}}

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -159,6 +159,7 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'fixes/fix-ember-data-table';
 
 // Custom utilities
+@import 'custom-utilities/_ember-tooltip';
 @import 'custom-utilities/_autocomplete';
 @import 'custom-utilities/_box-model';
 @import 'custom-utilities/_text';

diff --git a/app/styles/custom-components/_vlc-agenda-meta.scss b/app/styles/custom-components/_vlc-agenda-meta.scss
@@ -23,6 +23,7 @@
 .vlc-agenda-items__status {
   font-size: 1.4rem;
   white-space: nowrap;
+  align-items: center;
 
   .formally-ok-icon {
     &::before {

diff --git a/app/styles/custom-components/_vlc-input-field-block.scss b/app/styles/custom-components/_vlc-input-field-block.scss
@@ -18,6 +18,9 @@
     margin-top: .5rem;
   }
 }
+.vlc-input-field-power-select {
+  width: 23rem;
+}
 
 /* ==========================================================================
   Input field inline

diff --git a/app/styles/custom-utilities/_ember-tooltip.scss b/app/styles/custom-utilities/_ember-tooltip.scss
@@ -0,0 +1,4 @@
+.tooltip-custom {
+  z-index: 999999999999999 !important;
+}
+
diff --git a/app/styles/custom-utilities/_text.scss b/app/styles/custom-utilities/_text.scss
@@ -14,3 +14,4 @@
 }
 
 
+
diff --git a/app/utils/config.js b/app/utils/config.js
@@ -97,6 +97,10 @@ export default EmberObject.create({
       approved: true,
       pillClassNames: 'vlc-pill vlc-pill--success',
       iconClassNames: 'ki-check formally-ok-icon',
+      svg: {
+        icon: 'check',
+        color: 'success',
+      },
     },
     {
       label: 'Formeel niet OK',
@@ -105,6 +109,10 @@ export default EmberObject.create({
       classNames: 'vlc-agenda-items__status vl-u-text--error auk-u-text-bold auk-u-flex',
       pillClassNames: 'vlc-pill vlc-pill--error',
       iconClassNames: 'ki-cross formally-ok-icon',
+      svg: {
+        icon: 'cross',
+        color: 'danger',
+      },
     },
     {
       label: 'Nog niet formeel OK',
@@ -113,6 +121,10 @@ export default EmberObject.create({
       classNames: 'vlc-agenda-items__status auk-u-text-bold auk-u-flex',
       pillClassNames: 'vlc-pill',
       iconClassNames: 'ki-question-mark formally-ok-icon',
+      svg: {
+        icon: 'question-mark',
+        color: '',
+      },
     }
   ],
   defaultKindUri: