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

…-vlc-refactor VLC-refactor (CSS) Part 3
kanselarij-vlaanderen · May 4, 2021 · 7c313d8 · 7c313d8
2 parents 4c71ff0 + a692e69
commit 7c313d8
Show file tree

Hide file tree

Showing 72 changed files with 739 additions and 1,086 deletions.
diff --git a/app/components/agenda/agendaitem-search.hbs b/app/components/agenda/agendaitem-search.hbs
@@ -1,25 +1,23 @@
-<div class="vlc-scroll-wrapper__header">
-  <div class="auk-navbar auk-navbar--bordered-bottom vlc-hide-on-print">
-    <div class="auk-toolbar-complex auk-toolbar-complex--auto">
-      <div class="auk-toolbar-complex__left">
-        <div class="auk-toolbar-complex__item vlc-u-box-model-maximize-width">
-          <div class="auk-form-group">
-            <WebComponents::AuInput
-              @icon="search"
-              type="text"
-              @block="true"
-              data-test-trigger-search-input
-              @placeholder={{t "search-placeholder"}}
-              value={{this.searchText}}
-              @enter={{this.search}}
-              {{on "input" this.debouncedSearch}}
-            />
-          </div>
+<div class="auk-navbar auk-navbar--bordered-bottom vlc-hide-on-print">
+  <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item vlc-u-box-model-maximize-width">
+        <div class="auk-form-group">
+          <WebComponents::AuInput
+            @icon="search"
+            type="text"
+            @block="true"
+            data-test-trigger-search-input
+            @placeholder={{t "search-placeholder"}}
+            value={{this.searchText}}
+            @enter={{this.search}}
+            {{on "input" this.debouncedSearch}}
+          />
         </div>
-        {{#if this.debouncedSearchTask.isRunning}}
-          <div class="auk-loader" role="alert" aria-busy="true"></div>
-        {{/if}}
       </div>
+      {{#if this.debouncedSearchTask.isRunning}}
+        <div class="auk-loader" role="alert" aria-busy="true"></div>
+      {{/if}}
     </div>
   </div>
-</div>
+</div>
diff --git a/app/components/agenda/printable-agenda.hbs b/app/components/agenda/printable-agenda.hbs
@@ -1,33 +1,37 @@
-<div data-test-agenda-printContainer class="auk-container auk-container--center auk-content vlc-printable-agenda-list">
-  {{utils/logo-header}}
+<div class="auk-u-m-8 auk-u-m-0@print">
+  <div class="auk-container auk-container--center auk-printable-agenda-list" data-test-agenda-printContainer>
+    {{utils/logo-header}}
 
-  <h4 class="vlc-printable-agenda-list__session-title" data-test-agenda-print-header-title>
-    {{t "agenda-of"}} {{moment-format this.meeting.plannedStart "dddd DD MMMM YYYY \o\m HH:mm"}} - {{this.meeting.kindToShow.altLabel}}
-  </h4>
+    <h2 class="auk-h2 auk-u-text-family-serif auk-u-text-align--center" data-test-agenda-print-header-title>
+      {{t "agenda-of"}} {{moment-format this.meeting.plannedStart "dddd DD MMMM YYYY \o\m HH:mm"}} - {{this.meeting.kindToShow.altLabel}}
+    </h2>
 
-  {{#if (gt this.notas.length 0)}}
-    {{#agenda/printable-agenda/list-section
-      letter="A"
-      title=(t "agendaitems")
-    }}
-      {{#each this.notas as |notaGroup|}}
-        {{agenda/printable-agenda/list-section/item-group
-          items=notaGroup
+    <div class="auk-content">
+      {{#if (gt this.notas.length 0)}}
+        {{#agenda/printable-agenda/list-section
+          letter="A"
+          title=(t "agendaitems")
         }}
-      {{/each}}
-    {{/agenda/printable-agenda/list-section}}
-  {{/if}}
+          {{#each this.notas as |notaGroup|}}
+            {{agenda/printable-agenda/list-section/item-group
+              items=notaGroup
+            }}
+          {{/each}}
+        {{/agenda/printable-agenda/list-section}}
+      {{/if}}
 
-  {{#if (gt announcements.length 0)}}
-    {{#agenda/printable-agenda/list-section
-      letter="B"
-      title=(t "announcements-subtitle")
-    }}
-      {{#each announcements as |announcement|}}
-        {{agenda/printable-agenda/list-section/item-group/item
-          item=announcement
+      {{#if (gt announcements.length 0)}}
+        {{#agenda/printable-agenda/list-section
+          letter="B"
+          title=(t "announcements-subtitle")
         }}
-      {{/each}}
-    {{/agenda/printable-agenda/list-section}}
-  {{/if}}
+          {{#each announcements as |announcement|}}
+            {{agenda/printable-agenda/list-section/item-group/item
+              item=announcement
+            }}
+          {{/each}}
+        {{/agenda/printable-agenda/list-section}}
+      {{/if}}
+    </div>
+  </div>
 </div>
diff --git a/app/components/agenda/printable-agenda/list-section.hbs b/app/components/agenda/printable-agenda/list-section.hbs
@@ -1,5 +1,7 @@
-<div class="auk-u-flex auk-u-mb-4">
-  <div class="vlc-printable-agenda-list__item-letter">{{letter}}.</div>
-  <h4 class="auk-u-text-uppercase auk-u-m-0 auk-u-text-decoration-underline">{{title}}</h4>
+<div class="auk-u-mb-8">
+  <div class="auk-u-flex auk-u-mb-4">
+    <div class="auk-printable-agenda-list__item-letter">{{letter}}.</div>
+    <h3 class="auk-u-text-uppercase auk-u-m-0 auk-u-text-decoration-underline">{{title}}</h3>
+  </div>
+  {{yield}}
 </div>
-{{yield}}
diff --git a/app/components/agenda/printable-agenda/list-section/item-group.hbs b/app/components/agenda/printable-agenda/list-section/item-group.hbs
@@ -1,7 +1,7 @@
-{{agenda/printable-agenda/list-section/item-group/item-group-header
-  mandatees=items.firstObject.sortedMandatees
-}}
-<div class="vlc-printable-agenda-list__item-list">
+<div class="auk-u-mt-4">
+  {{agenda/printable-agenda/list-section/item-group/item-group-header
+    mandatees=items.firstObject.sortedMandatees
+  }}
   {{#each items as |agendaitem|}}
     <div value={{agendaitem.priority}}>
       {{agenda/printable-agenda/list-section/item-group/item

diff --git a/app/components/agenda/printable-agenda/list-section/item-group/item-group-header.hbs b/app/components/agenda/printable-agenda/list-section/item-group/item-group-header.hbs
@@ -1,8 +1,10 @@
-<h4 class="auk-u-text-uppercase auk-u-text-decoration-underline indented">
-  {{#each this.mandatees as |mandatee|}}
-    {{mandatee.title}}
-    {{#if (not-eq mandatee this.mandatees.lastObject)}}
-      <br/>&
-    {{/if}}
-  {{/each}}
-</h4>
+{{#if this.mandatees}}
+  <h3 class="auk-u-text-uppercase auk-u-text-decoration-underline auk-printable-agenda-list__item-indented">
+    {{#each this.mandatees as |mandatee|}}
+      {{mandatee.title}}
+      {{#if (not-eq mandatee this.mandatees.lastObject)}}
+        <br/>&
+      {{/if}}
+    {{/each}}
+  </h3>
+{{/if}}
diff --git a/app/components/agenda/printable-agenda/list-section/item-group/item.hbs b/app/components/agenda/printable-agenda/list-section/item-group/item.hbs
@@ -1,24 +1,28 @@
 <div class="auk-u-mb-2">
-  <div class="auk-u-flex">
-    <div class="vlc-printable-agenda-list__item-number">
+  <div class="auk-u-flex auk-u-mb-2 auk-u-mt-4">
+    <div class="auk-printable-agenda-list__item-number">
       {{item.number}}.
     </div>
-    <h4 class="vlc-printable-agenda-list__title auk-u-m-0">
+    <h3 class="auk-u-m-0">
       {{sanitize-html
         raw=true
         value=(if this.item.shortTitle this.item.shortTitle this.item.title)
       }}
-    </h4>{{!-- Fallback for legacy data that doesn't have a short title --}}
+    </h3>{{!-- Fallback for legacy data that doesn't have a short title --}}
   </div>
-  <p class="vlc-printable-agenda-list__description indented">
+  <p class="auk-printable-agenda-list__description auk-printable-agenda-list__item-indented">
     {{sanitize-html
       raw=true
       value=this.item.title
     }}
   </p>
 </div>
-<ul class="vlc-printable-agenda-list__document-list indented">
-  {{#each this.item.sortedPieces as |piece|}}
-    <li>({{piece.name}})</li>
-  {{/each}}
-</ul>
+{{#if this.item.sortedPieces}}
+  <div class="auk-u-mb-2">
+    <ul class="auk-printable-agenda-list__document-list auk-printable-agenda-list__item-indented">
+      {{#each this.item.sortedPieces as |piece|}}
+        <li>({{piece.name}})</li>
+      {{/each}}
+    </ul>
+  </div>
+{{/if}}
diff --git a/app/components/agenda/side-nav.hbs b/app/components/agenda/side-nav.hbs
@@ -1,81 +1,56 @@
-<nav class="vlc-side-nav">
-  <div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper">
-    <div class="vlc-scroll-wrapper__header">
-      <div class="auk-navbar auk-navbar--bordered-bottom">
-        <div class="auk-toolbar-complex">
-          <div class="auk-toolbar-complex__left">
-            <h2 class="auk-h4">
-              <span>
-                {{t "nav-title"}}
-              </span>
-            </h2>
-          </div>
-          <div class="auk-toolbar-complex__right">
-            {{#if agendaMenuOpened}}
-              <button type="button" class="auk-button auk-button--borderless auk-button--icon default"
-                {{action "collapseSideMenu"}}>
-                <div class="auk-icon auk-icon--default">
-                  <i class="ki ki-chevron-right"></i>
-                </div>
-                <div class="auk-u-sr-only">
-                  {{t "toggle"}}
-                </div>
-              </button>
-            {{else}}
-              <button type="button" class="auk-button auk-button--borderless auk-button--icon collapsed"
-                {{action "collapseSideMenu"}}>
-                <div class="auk-icon auk-icon--default">
-                  <i class="ki ki-chevron-left"></i>
-                </div>
-                <div class="auk-u-sr-only">
-                  {{t "toggle"}}
-                </div>
-              </button>
-            {{/if}}
+<div class="auk-navbar auk-navbar--bordered-bottom auk-navbar--gray-200">
+  <div class="auk-toolbar-complex">
+    <div class="auk-toolbar-complex__left" data-sidebar-expanded-only="">
+      <h2 class="auk-toolbar-complex__title--small">{{t "nav-title"}}</h2>
+    </div>
+    <div class="auk-toolbar-complex__{{if agendaMenuCollapsed "center" "right"}}">
+      <div class="auk-toolbar-complex__item {{if agendaMenuCollapsed "auk-u-flex auk-u-flex--horizontal-center"}}">
+        <button
+          class="auk-button auk-button--borderless auk-button--icon"
+          type="button"
+          {{action "collapseSideMenu"}}
+        >
+          <div class="auk-icon auk-icon--chevron-{{if agendaMenuCollapsed "right" "left"}} auk-icon--default">
+            <i class="ki ki-chevron-{{if agendaMenuCollapsed "right" "left"}}"></i>
           </div>
-        </div>
+          <span class="auk-u-sr-only">
+            {{t "toggle"}}
+          </span>
+        </button>
       </div>
     </div>
-    <div class="vlc-scroll-wrapper__body">
-      <ul>
-        {{#each (await agendas) as |agenda index|}}
-          <li data-test-agenda-sidenav-element={{index}} class="vlc-side-nav-item
-              {{active-class
-                agenda
-                currentAgenda
-                class="vlc-side-nav-item--active"
-              }}"
-          >
-            <a href="javascript://" {{action "setCurrentAgenda" agenda}}>
-              <div class="vlc-side-nav-item__label">
-                <span>
-                  {{await agenda.agendaName}}
-                </span>
-              </div>
-              <div class="vlc-side-nav-item__meta">
-                {{#if (not agenda.isDesignAgenda)}}
-                  {{t "approved-on"}}
-                  <br/>
-                  {{moment-format agenda.modified "dd DD/MM/YYYY HH:mm"}}
-                {{else}}
-                  {{t "latest-modified-on"}}
-                  <br/>
-                  {{moment-format agenda.modified "dd DD/MM/YYYY HH:mm"}}
-                {{/if}}
-              </div>
-              <div class="vlc-side-nav-item__meta--small">
-                <h3 class="auk-h4">
-                  {{#if (not agenda.isDesignAgenda)}}
-                    {{agenda.name}}
-                  {{else}}
-                    *
-                  {{/if}}
-                </h3>
-              </div>
-            </a>
-          </li>
-        {{/each}}
-      </ul>
-    </div>
   </div>
-</nav>
+</div>
+<ul class="auk-scroll-wrapper__body auk-scroll-wrapper__body--vertical">
+  {{#each (await agendas) as |agenda index|}}
+    <li
+      data-test-agenda-sidenav-element={{index}}
+      class="auk-sidebar__item auk-sidebar__item--styled {{active-class agenda currentAgenda class="auk-sidebar__item--active"}}"
+    >
+      <a
+        href="#"
+        {{action "setCurrentAgenda" agenda}}
+      >
+        <div class="auk-sidebar__label">
+          <span data-sidebar-expanded-only="">{{await agenda.agendaName}}</span>
+          <span data-sidebar-collapsed-only="">
+            {{#if (not agenda.isDesignAgenda)}}
+              {{agenda.name}}
+            {{else}}
+              *
+            {{/if}}
+          </span>
+        </div>
+        <div class="auk-sidebar__sublabel" data-sidebar-expanded-only="">
+          {{#if (not agenda.isDesignAgenda)}}
+            {{t "approved-on"}}
+          {{else}}
+            {{t "latest-modified-on"}}
+          {{/if}}
+          <br/>
+          {{moment-format agenda.modified "dd DD/MM/YYYY HH:mm"}}
+        </div>
+      </a>
+    </li>
+  {{/each}}
+</ul>
diff --git a/app/components/agenda/side-nav.js b/app/components/agenda/side-nav.js
@@ -5,25 +5,22 @@ import { computed } from '@ember/object';
 
 export default Component.extend({
   sessionService: inject(),
-  classNames: ['vlc-panel-layout__agenda-history'],
+  classNames: ['auk-sidebar', 'auk-sidebar--gray-200', 'auk-sidebar--left', 'auk-sidebar--small', 'auk-sidebar--collapsible', 'auk-scroll-wrapper'],
 
-  classNameBindings: ['getClassNames'],
+  attributeBindings: ['getCollapsedAttribute:data-collapsed'],
 
-  getClassNames: computed('agendaMenuOpened', function() {
-    if (this.get('agendaMenuOpened')) {
-      return 'vlc-panel-layout__agenda-history--collapsed';
-    }
-    return null;
+  getCollapsedAttribute: computed('agendaMenuCollapsed', function() {
+    return this.get('agendaMenuCollapsed').toString();
   }),
 
-  agendaMenuOpened: false,
+  agendaMenuCollapsed: false,
 
   currentAgenda: alias('sessionService.currentAgenda'),
   currentSession: alias('sessionService.currentSession'),
 
   actions: {
     collapseSideMenu() {
-      this.toggleProperty('agendaMenuOpened');
+      this.toggleProperty('agendaMenuCollapsed');
     },
 
     compareAgendas() {

diff --git a/app/components/m-header.hbs b/app/components/m-header.hbs
@@ -65,25 +65,22 @@
         {{/if}}
       </div>
       <div class="auk-toolbar-complex__item">
-        {{#if currentSession.userContent}}
-          <div class="vlc-user">
-            <div class="vlc-user__username">
+        <div class="auk-u-flex auk-u-flex--vertical-center auk-u-text-small auk-u-mx-2">
+          {{#if currentSession.userContent}}
+            <div class="auk-u-mr">
               {{currentSession.userContent.firstName}}
               {{currentSession.userContent.lastName}}
               ({{currentSession.userRole}})
             </div>
-            <a href="" class="vlc-user__action" {{action "logout"}}>
+            <a href="" {{action "logout"}}>
               {{t "sign-out"}}
             </a>
-          </div>
-        {{else}}
-          <div class="vlc-user">
-            <div class="vlc-user__username"></div>
-            {{#link-to "login" class="vlc-user__action"}}
+          {{else}}
+            {{#link-to "login"}}
               {{t "login"}}
             {{/link-to}}
-          </div>
-        {{/if}}
+          {{/if}}
+        </div>
       </div>
     </div>
   </div>