Merge pull request #861 from kanselarij-vlaanderen/DES/enhancement/#732…

…-vlc-refactor VLC-refactor (CSS) Part 2
kanselarij-vlaanderen · Apr 29, 2021 · f6f0f8a · f6f0f8a
2 parents c4be4f2 + f9f0ee0
commit f6f0f8a
Show file tree

Hide file tree

Showing 91 changed files with 787 additions and 1,224 deletions.
diff --git a/app/components/agenda/agenda-header.hbs b/app/components/agenda/agenda-header.hbs
@@ -1,31 +1,18 @@
 <div class="auk-toolbar-complex">
   <div class="auk-toolbar-complex__left">
     <div class="auk-toolbar-complex__item">
-      <h1 class="vlc-page-header__title auk-u-pb vlc-page-header__title--bordered"
-          data-test-agenda-header-title>
-        {{t "agenda-of"}}
-        {{moment-format currentSession.plannedStart "DD MMMM YYYY"}}
-        {{t "at"}}
-        {{moment-format currentSession.plannedStart "HH:mm"}}
-        <span class="vlc-page-header__subtitle auk-u-muted" style="font-size:1.6rem;">
-          - {{await currentSession.kindToShow.label}}
-        </span>
-      </h1>
-      <div class="vlc-page-header__sub">
-        <div class="auk-toolbar-complex auk-toolbar-complex--auto">
-          <div class="auk-toolbar-complex__left">
-            <div class="auk-toolbar-complex__item">
-              {{!-- TODO: Fix this symbol into a custom icon based of the figma file --}}
-              {{!-- template-lint-disable no-bare-strings  --}}
-              <LinkTo @route="agendas.overview" class="vlc-backlink auk-button-link">
-                &#8629;
-              </LinkTo>
-              {{!-- template-lint-enable no-bare-strings  --}}
-            </div>
-            <Sessions::SessionAgendaNav
-              @currentAgenda={{currentAgenda}} />
-          </div>
+      <div class="auk-u-flex auk-u-flex--vertical auk-u-mt-2">
+        <div class="auk-u-flex auk-u-flex--vertical-center">
+          <h4 class="auk-toolbar-complex__title" data-test-agenda-header-title>
+            {{t "agenda-of"}}
+            {{moment-format currentSession.plannedStart "DD MMMM YYYY"}}
+            {{t "at"}}
+            {{moment-format currentSession.plannedStart "HH:mm"}}
+          </h4>
+          <span class="auk-u-muted auk-body-1 ">- {{await currentSession.kindToShow.label}}</span>
         </div>
+        <Sessions::SessionAgendaNav
+          @currentAgenda={{currentAgenda}} />
       </div>
     </div>
   </div>

diff --git a/app/components/agenda/agenda-header.js b/app/components/agenda/agenda-header.js
@@ -21,7 +21,7 @@ import moment from 'moment';
 import { A } from '@ember/array';
 
 export default Component.extend(FileSaverMixin, {
-  classNames: ['vlc-page-header'],
+  classNames: ['auk-navbar', 'auk-navbar--bordered-bottom', 'auk-navbar--gray-100', 'auk-navbar--auto'],
 
   store: service(),
   // These 2 can be very confusing, session-service is for meetings, current-session is for checking admin etc.

diff --git a/app/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals.hbs b/app/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals.hbs
@@ -58,7 +58,7 @@
                   </span>
                 {{/if}}
               {{else}}
-                <div class="vlc-input-field-block">
+                <div class="auk-form-group">
                   {{web-components/vl-checkbox
                     value=(not (is-empty mandateeApproval.approval))
                     label=(t "approval-mandatee")

diff --git a/app/components/agenda/agendaitem/agendaitem-case/agendaitem-titles-edit.hbs b/app/components/agenda/agendaitem/agendaitem-case/agendaitem-titles-edit.hbs
@@ -1,15 +1,15 @@
 <div class="auk-box">
   <div class="auk-u-mb-4">
     {{#if @subcase}}
-      <div class="vlc-input-field-block">
+      <div class="auk-form-group">
         <WebComponents::AuLabel>{{t "confidential"}}</WebComponents::AuLabel>
         {{web-components/vl-toggle
           data-test-agendaitem-titles-edit-confidential=true
           value=@subcase.confidential
         }}
       </div>
     {{/if}}
-    <div class="vlc-input-field-block">
+    <div class="auk-form-group">
       <WebComponents::AuLabel>{{t "name-subcase"}}</WebComponents::AuLabel>
       {{textarea
         data-test-agendaitem-titles-edit-shorttitle=true
@@ -20,7 +20,7 @@
     </div>
   </div>
   <div class="auk-u-mb-4">
-    <div class="vlc-input-field-block">
+    <div class="auk-form-group">
       <WebComponents::AuLabel>{{t "title-subcase"}}</WebComponents::AuLabel>
       {{textarea
         data-test-agendaitem-titles-edit-title=true
@@ -31,7 +31,7 @@
     </div>
   </div>
   <div class="auk-u-mb-4">
-    <div class="vlc-input-field-block">
+    <div class="auk-form-group">
       <WebComponents::AuLabel>{{t "remark-title"}}</WebComponents::AuLabel>
       {{textarea
         data-test-agendaitem-titles-edit-explanation=true
@@ -43,7 +43,7 @@
   </div>
   {{#if @agendaitem.showAsRemark}}
     <div class="auk-u-mb-4">
-      <div class="vlc-input-field-block">
+      <div class="auk-form-group">
         {{#if this.newsletterInfo}}
           <WebComponents::AuLabel>{{t "show-in-newsletter"}}</WebComponents::AuLabel>
           {{web-components/vl-toggle

diff --git a/app/components/agenda/agendaitem/agendaitem-decision-edit.hbs b/app/components/agenda/agendaitem/agendaitem-decision-edit.hbs
@@ -1,6 +1,6 @@
 <div class="auk-box">
   {{!-- Editor with annotated decision  text will come somwhere around here in the future --}}
-  <div class="vlc-input-field vlc-input-field-block auk-u-mb-4"
+  <div class="auk-form-group auk-u-mb-4"
       data-test-decision-edit-power-select-container
   >
     <WebComponents::AuLabel>{{t "result-decision"}}</WebComponents::AuLabel>

diff --git a/app/components/agenda/agendaitem/create-agendaitem.hbs b/app/components/agenda/agendaitem/create-agendaitem.hbs
@@ -45,7 +45,7 @@
           </div>
         </div>
         <div class="auk-o-grid-col-4">
-          <div class="vlc-input-field-block">
+          <div class="auk-form-group">
             <WebComponents::AuLabel>{{t "title-postponed-subcases"}}</WebComponents::AuLabel>
             {{web-components/vl-checkbox
               data-test-postponed-checkbox=true

diff --git a/app/components/agendaitem-press-edit.hbs b/app/components/agendaitem-press-edit.hbs
@@ -1,17 +1,17 @@
 <div class="auk-u-mb-4">
-  <div class="vlc-input-field-block">
+  <div class="auk-form-group">
     <WebComponents::AuLabel>{{t "title"}}</WebComponents::AuLabel>
     {{web-components/vl-form-input value=agendaitem.titlePress}}
   </div>
-  <div class="vlc-input-field-block">
+  <div class="auk-form-group">
     <WebComponents::AuLabel>{{t "content"}}</WebComponents::AuLabel>
     {{textarea
       class="auk-textarea"
       rows="10"
       value=agendaitem.textPress
     }}
   </div>
-  <div class="vlc-input-field vlc-input-field-block">
+  <div class="auk-form-group">
     <WebComponents::AuLabel>{{t "for-press"}}</WebComponents::AuLabel>
     {{web-components/vl-toggle value=agendaitem.forPress}}
   </div>

diff --git a/app/components/block-link.hbs b/app/components/block-link.hbs
diff --git a/app/components/cases/cases-header.hbs b/app/components/cases/cases-header.hbs
@@ -2,7 +2,7 @@
   <div class="auk-toolbar-complex auk-toolbar-complex--auto">
     <div class="auk-toolbar-complex__left">
       <div class="auk-toolbar-complex__item">
-        <h1 class="vlc-page-header__title auk-u-pb" data-test-cases-header-title>
+        <h1 class="auk-toolbar__title" data-test-cases-header-title>
           {{t "cases"}}
         </h1>
       </div>

diff --git a/app/components/cases/cases-header.js b/app/components/cases/cases-header.js
@@ -5,7 +5,7 @@ import { action } from '@ember/object';
 export default class CasesHeader extends Component {
   @service currentSession;
 
-  classNames = ['vlc-page-header', 'auk-u-bg-alt'];
+  classNames = ['auk-navbar', 'auk-navbar--bordered-bottom', 'auk-navbar--gray-100'];
 
   isAddingCase = false;
 

diff --git a/app/components/cases/edit-case.hbs b/app/components/cases/edit-case.hbs
@@ -1,7 +1,7 @@
 {{#if caseToEdit}}
   <div class="auk-modal__content">
     <div class="auk-u-mb-4">
-      <div class="vlc-input-field-block">
+      <div class="auk-form-group">
         <WebComponents::AuLabel>{{t "name-subcase"}}</WebComponents::AuLabel>
         {{textarea
           rows="2"

diff --git a/app/components/cases/new-case.hbs b/app/components/cases/new-case.hbs
@@ -7,12 +7,12 @@
     {{/if}}
 
     <div class="auk-u-mb-4">
-      <div class="vlc-input-field-block">
+      <div class="auk-form-group">
         <WebComponents::AuLabel>{{t "confidential"}}</WebComponents::AuLabel>
         {{web-components/vl-toggle value=confidential}}
       </div>
     </div>
-    <div class="vlc-input-field-block {{getClassForShortTitle}}" data-test-metadata-form>
+    <div class="auk-form-group {{getClassForShortTitle}}" data-test-metadata-form>
       <WebComponents::AuLabel>{{t "short-title-case"}}</WebComponents::AuLabel>
       {{textarea class="auk-textarea" rows="2" value=shortTitle}}
     </div>

diff --git a/app/components/cases/new-subcase.hbs b/app/components/cases/new-subcase.hbs
@@ -27,19 +27,19 @@
         </WebComponents::AuToolbar>
       </div>
     </div>
-    <div class="vlc-input-field-block">
+    <div class="auk-form-group">
       <WebComponents::AuLabel>{{t "name-subcase"}}</WebComponents::AuLabel>
       {{textarea
         rows="2"
         class="auk-textarea"
         value=shortTitle
       }}
     </div>
-    <div class="vlc-input-field-block">
+    <div class="auk-form-group">
       <WebComponents::AuLabel>{{t "title-subcase"}}</WebComponents::AuLabel>
       {{textarea rows="4" class="auk-textarea" value=title}}
     </div>
-    <div class="vlc-input-field-block">
+    <div class="auk-form-group">
       <WebComponents::AuLabel>{{t "subcase-type-dropdown"}}</WebComponents::AuLabel>
       {{utils/model-selector
         modelName="subcase-type"
@@ -50,7 +50,7 @@
         selectModel=(action "selectType")
       }}
     </div>
-    <div class="vlc-input-field-block">
+    <div class="auk-form-group">
       <WebComponents::AuLabel>{{t "subcase-name"}}</WebComponents::AuLabel>
       <div class="auk-u-flex auk-u-flex--vertical-center">
         {{#if (not isEditing)}}

diff --git a/app/components/documents/uploaded-document.hbs b/app/components/documents/uploaded-document.hbs
@@ -7,13 +7,13 @@
   @delete={{@onDelete}}>
   {{#if @allowDocumentContainerEdit}}
     <div class="metadata-container">
-      <div class="vlc-input-field-block">
+      <div class="auk-form-group">
         <WebComponents::AuLabel>{{t "document-name"}}</WebComponents::AuLabel>
         <WebComponents::VlFormInput
           @value={{mut @piece.name}} />
       </div>
       {{#unless this.loadData.isRunning}}
-        <div class="vlc-input-field-block">
+        <div class="auk-form-group">
           <WebComponents::AuLabel>{{t "document-type"}}</WebComponents::AuLabel>
           <Utils::RadioDropdownComboSelect
             @options={{this.sortedDocumentTypes}}

diff --git a/app/components/mandatees/mandatees-domains-panel/mandatees-domains-panel-edit.hbs b/app/components/mandatees/mandatees-domains-panel/mandatees-domains-panel-edit.hbs
@@ -1,5 +1,5 @@
 <div class="auk-box">
-  <div class="vlc-input-field-block">
+  <div class="auk-form-group">
     <div class="auk-u-mb-8">
       <table class="auk-table">
         <thead>

diff --git a/app/components/news-item/edit-item.hbs b/app/components/news-item/edit-item.hbs
@@ -30,17 +30,17 @@
       </div>
     {{/if}}
   </div>
-  <div class="vlc-input-field-block">
+  <div class="auk-form-group">
     <WebComponents::AuLabel>{{t "title"}}</WebComponents::AuLabel>
     <p>
       {{agendaitem.title}}
     </p>
   </div>
-  <div class="vlc-input-field-block">
+  <div class="auk-form-group">
     <WebComponents::AuLabel>{{t "short-title"}}</WebComponents::AuLabel>
     {{web-components/vl-form-input value=newsletterInfo.title}}
   </div>
-  <div class="vlc-input-field-block">
+  <div class="auk-form-group">
     <WebComponents::AuLabel>{{t "mandatee-proposal"}}</WebComponents::AuLabel>
     <p>
       {{#if (await newsletterInfo.newsletterProposal)}}
@@ -50,7 +50,7 @@
       {{/if}}
     </p>
   </div>
-  <div class="vlc-input-field-block">
+  <div class="auk-form-group">
     <WebComponents::AuLabel>{{t "decision-in-newsletter"}}</WebComponents::AuLabel>
     {{web-components/vl-rdfa-editor
       data-test-rdfa-editor=true
@@ -60,16 +60,16 @@
     }}
   </div>
 
-  <div class="vlc-input-field-block auk-u-text-capitalize">
+  <div class="auk-form-group auk-u-text-capitalize">
     <WebComponents::AuLabel>{{t "remark"}}</WebComponents::AuLabel>
     {{web-components/vl-form-input value=newsletterInfo.remark}}
   </div>
 
-  <div class="vlc-input-field-block">
+  <div class="auk-form-group">
     <WebComponents::AuLabel>{{t "finished"}}</WebComponents::AuLabel>
     {{web-components/vl-toggle value=newsletterInfo.finished}}
   </div>
-  <div class="vlc-input-field-block" data-test-themes-selector>
+  <div class="auk-form-group" data-test-themes-selector>
     <WebComponents::AuLabel>{{t "themes"}}</WebComponents::AuLabel>
     {{utils/themes-selector selectedThemes=(await newsletterInfo.themes)}}
   </div>

diff --git a/app/components/newsletter/edit-newsletter.hbs b/app/components/newsletter/edit-newsletter.hbs
@@ -1,6 +1,6 @@
 <div class="auk-modal__content">
   <div class="auk-u-flex--align-end auk-u-mb-2">
-    <div class="vlc-input-field-block">
+    <div class="auk-form-group">
       <WebComponents::AuLabel>{{t "date-publication"}}</WebComponents::AuLabel>
       {{web-components/vl-datepicker
         enableTime=true
@@ -10,7 +10,7 @@
         dateChanged=(action "selectDate")
       }}
     </div>
-    <div class="vlc-input-field-block">
+    <div class="auk-form-group">
       <WebComponents::AuLabel>{{t "newsletter-doc-date"}}</WebComponents::AuLabel>
       {{web-components/vl-datepicker
         enableTime=true