From 408ad757a62a861244b259346a37477189aa6ec1 Mon Sep 17 00:00:00 2001
From: brecht <brecht@tests-MacBook-Pro.local>
Date: Fri, 19 Feb 2021 13:34:09 +0100
Subject: [PATCH 1/4] KAS-2232 replaced Attach-tooltip with EmberTooltip

---
 .../components/access-level-pill/template.hbs | 18 +++---------
 .../agenda-detail/sidebar-item/template.hbs   | 18 +++---------
 .../agenda-overview-item/template.hbs         | 18 +++---------
 .../news-item/edit-item/template.hbs          |  9 ++----
 .../button-toolbar/template.hbs               | 18 +++---------
 .../web-components/vl-document/template.hbs   |  9 ++----
 .../vl-table-actions/template.hbs             | 29 +++++--------------
 app/pods/settings/ministers/template.hbs      |  9 ++----
 app/styles/app.scss                           |  1 +
 .../custom-utilities/_ember-tooltip.scss      |  4 +++
 app/styles/custom-utilities/_text.scss        |  1 +
 11 files changed, 35 insertions(+), 99 deletions(-)
 create mode 100644 app/styles/custom-utilities/_ember-tooltip.scss

diff --git a/app/pods/components/access-level-pill/template.hbs b/app/pods/components/access-level-pill/template.hbs
index 89a052054d..d1824e4c0f 100644
--- 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
index e5416bacbe..7f3edcb965 100644
--- 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
index d9981e953c..f28996155e 100644
--- 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
index c51cde7fd4..c9b4b982ff 100644
--- 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
index d355621073..0fbf3f1985 100644
--- 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/web-components/vl-document/template.hbs b/app/pods/components/web-components/vl-document/template.hbs
index 1f4ceaba70..498c0a9ee0 100644
--- 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
index 4776b4b30b..5132c02cc1 100644
--- 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"
-        }}
-          {{t "open-note"}}
-        {{/attach-tooltip}}
+        <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
+          {{t "open-nota"}}
+        </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
index cb9eb11c46..81c0c58627 100644
--- 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
index 82642e30fb..859f86874d 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -160,6 +160,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/_spacing';
diff --git a/app/styles/custom-utilities/_ember-tooltip.scss b/app/styles/custom-utilities/_ember-tooltip.scss
new file mode 100644
index 0000000000..310f8e60f7
--- /dev/null
+++ 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
index 30e50adf7f..1e17901e64 100644
--- a/app/styles/custom-utilities/_text.scss
+++ b/app/styles/custom-utilities/_text.scss
@@ -14,3 +14,4 @@
 }
 
 
+

From 345b2e673655d9efe49c2cd20dea4b26a105c86b Mon Sep 17 00:00:00 2001
From: brecht <brecht@tests-MacBook-Pro.local>
Date: Mon, 22 Feb 2021 10:14:35 +0100
Subject: [PATCH 2/4] rework dropdown agendaoverview

---
 .../utils/formally-ok-selector/template.hbs    | 18 ++++++++++--------
 .../au-power-select/template.hbs               |  2 +-
 .../_vlc-input-field-block.scss                |  3 +++
 app/utils/config.js                            | 12 ++++++++++++
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/pods/components/utils/formally-ok-selector/template.hbs b/app/pods/components/utils/formally-ok-selector/template.hbs
index cc2ad2c20a..9aeec4be4d 100644
--- 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>
\ No newline at end of file
diff --git a/app/pods/components/web-components/au-power-select/template.hbs b/app/pods/components/web-components/au-power-select/template.hbs
index 41ef111944..735afcbdaf 100644
--- 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/styles/custom-components/_vlc-input-field-block.scss b/app/styles/custom-components/_vlc-input-field-block.scss
index 8c53f58227..f8d65501ab 100644
--- 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/utils/config.js b/app/utils/config.js
index b081978562..9f1b95722d 100644
--- 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:

From dd82c03047474b1c27126061024162a9f54724d1 Mon Sep 17 00:00:00 2001
From: brecht <brecht@tests-MacBook-Pro.local>
Date: Mon, 22 Feb 2021 10:16:15 +0100
Subject: [PATCH 3/4] fixed type error

---
 .../components/web-components/vl-table-actions/template.hbs     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pods/components/web-components/vl-table-actions/template.hbs b/app/pods/components/web-components/vl-table-actions/template.hbs
index 5132c02cc1..6acde23b28 100644
--- a/app/pods/components/web-components/vl-table-actions/template.hbs
+++ b/app/pods/components/web-components/vl-table-actions/template.hbs
@@ -19,7 +19,7 @@
       >
         <i class="vl-button__icon ki-document"></i>
         <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
-          {{t "open-nota"}}
+          {{t "open-note"}}
         </EmberTooltip>
       </button>
     {{/if}}

From 8173883993f06570c9a3bda08f1db676f3bae18e Mon Sep 17 00:00:00 2001
From: brecht <brecht@tests-MacBook-Pro.local>
Date: Mon, 22 Feb 2021 10:24:08 +0100
Subject: [PATCH 4/4] added align-items: center to the status holder

---
 app/styles/custom-components/_vlc-agenda-meta.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/styles/custom-components/_vlc-agenda-meta.scss b/app/styles/custom-components/_vlc-agenda-meta.scss
index e491cc0c51..1244668e26 100644
--- 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 {