<type>(pages): Header

docs/properties.rst

@@ -9,6 +9,18 @@ Géométrique
 
 .. _igomap:
 
+*****************************
+Entête (header)
+*****************************
+    .. line-block::
+
+        Entête comprenant un logo, un titre et un petit menu pour changer la langue et afficher le lien Nous joindre.
+        L'entête est optionnelle.
+        Les options de configuration sont dans src/config.json sous "header" :
+            "hasHeader": boolean (activer ou désactiver l'entête)
+            "logo": string (lien vers l'image du logo)
+            "logoPrint": string (lien vers l'image du logo pour impression, si nécessaire)
+
 *****************************
 Carte (map)
 *****************************

src/app/app.component.html

@@ -2,4 +2,6 @@
 
 <igo-auth-form *ngIf="authConfig && authConfig.url"></igo-auth-form>
 
-<app-portal igoStopDropPropagation></app-portal>
+<app-header *ngIf="hasHeader" #header></app-header>
+
+<app-portal [ngClass]="hasHeader? 'portal-with-header' : 'portal' " igoStopDropPropagation></app-portal>

src/app/app.component.scss

@@ -17,3 +17,4 @@ igo-spinner {
 igo-message-center ::ng-deep simple-notifications ::ng-deep div.simple-notification-wrapper {
   right: 10px;
 }
+

src/app/app.component.ts

@@ -2,7 +2,6 @@ import { Component, Renderer2 } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
 import { zip } from 'rxjs';
 import { map } from 'rxjs/operators';
-
 import { userAgent } from '@igo2/utils';
 import {
   LanguageService,
@@ -12,6 +11,7 @@ import {
 } from '@igo2/core';
 import { AuthOptions } from '@igo2/auth';
 import { AnalyticsListenerService } from '@igo2/integration';
+import { HeaderComponent } from './pages/header/header.component';
 
 @Component({
   selector: 'app-root',
@@ -21,6 +21,8 @@ import { AnalyticsListenerService } from '@igo2/integration';
 export class AppComponent {
   public authConfig: AuthOptions;
   private themeClass = 'blue-theme';
+  public hasHeader = true;
+  public HeaderComponent = HeaderComponent;
 
   constructor(
     protected languageService: LanguageService,
@@ -43,6 +45,9 @@ export class AppComponent {
     this.analyticsListenerService.listen();
 
     this.detectOldBrowser();
+
+    this.hasHeader = this.configService.getConfig('header.hasHeader') === undefined ? false :
+    this.configService.getConfig('header.hasHeader');
   }
 
   private readTitleConfig() {

src/app/app.module.ts

@@ -27,6 +27,7 @@ import {
 import { environment } from '../environments/environment';
 import { PortalModule } from './pages';
 import { AppComponent } from './app.component';
+import { HeaderModule } from './pages/header/header.module';
 
 @NgModule({
   declarations: [AppComponent],
@@ -40,7 +41,8 @@ import { AppComponent } from './app.component';
     IgoSpinnerModule,
     IgoStopPropagationModule,
     PortalModule,
-    HammerModule
+    HammerModule,
+    HeaderModule
   ],
   providers: [
     provideConfigOptions({

src/app/pages/header/header.component.html

@@ -0,0 +1,22 @@
+<mat-toolbar class = banner role = banner color="primary">
+	<div class="container">
+		<div class="row">
+			<div class="col-6 col-md-10 d-flex flex-wrap align-items-center zone-logo-title">
+				<a class="logo" tabindex="5" routerLink="">
+                    <img id="header-logo" alt="Logo" src="{{headerLogo}}">
+
+                </a>
+				<img id="header-logo-print" alt="Logo" src="{{headerLogoPrint}}" width="199" height="60" />
+				<p lang="fr" id="title-desktop" class="zone-title  d-none d-md-block">{{'header.title' | translate}}</p>
+			</div>
+			<div class="col-6 col-md-2 d-flex justify-content-end zone-links">
+				<ul class="nav flex-column">
+					<!--<li><button class="buttonLanguage" disabled (click)="changeLanguage()">{{'header.language'}}</button></li>-->
+					<li><a rel="noopener noreferrer" alt="('header.contactUsUrl' | translate)" href="{{'header.contactUsUrl' | translate}}" target="_blank">{{'header.contactUs' | translate}}</a></li>
+				</ul>
+			</div>
+			<p lang="fr" id="title-mobile" class="zone-title d-md-none col-12"><a>{{'header.title' | translate}}</a></p>
+		</div>
+	</div>
+</mat-toolbar>
+

src/app/pages/header/header.component.scss

@@ -0,0 +1,280 @@
+//@import '../src/style/qcca-theme/qcca-theme.scss';
+
+// Adjust portal height
+
+$header-height: 72px;
+
+::ng-deep .portal-with-header {
+height: calc(100% - #{$header-height})!important;
+}
+
+@media screen and (min-width: 824px) {
+    ::ng-deep .portal-with-header {
+        height: calc(100% - #{$header-height})!important;
+        }
+}
+
+// Grids
+:root {
+--breakpoint-pgu-sm: 403px;
+--breakpoint-sm: 576px;
+--breakpoint-md: 768px;
+--breakpoint-lg: 992px;
+--breakpoint-xl: 1200px;
+}
+
+html,body {
+padding: 0;
+margin: 0!important;
+width: 100%;
+font-size: 16px;
+font-family: 'Open sans', sans-serif;
+}
+
+@media (min-width: 1280px) and (orientation: landscape){
+  body {
+    margin: 0!important;
+  }
+}
+
+html, body, div, span, a, header, nav {
+margin: 0;
+padding: 0;
+border: 0;
+vertical-align: baseline;
+}
+
+html, body {
+  font-family: 'Open sans', sans-serif;
+}
+
+.col-6, .col-md-2, .col-md-10 {
+position: relative;
+width: 100%;
+}
+
+.col-12 {
+flex: 0 0 100%;
+max-width: 100%;
+}
+
+.container {
+width: 100%;
+margin-right: auto;
+margin-left: auto;
+}
+
+.row {
+-ms-display: flex;
+display: flex;
+-ms-flex-wrap: wrap;
+flex-wrap: wrap;
+height: 100%;
+width: 98%;
+align-content: center;
+margin: auto;
+}
+
+.col-6 {
+flex: 0 0 50%;
+max-width: 50%;
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Roboto', sans-serif;
+  font-weight: bold;
+  color: #095797 !important;
+}
+
+// header
+
+a {
+word-break: break-word;
+overflow-wrap: break-word;
+}
+
+img {
+vertical-align: middle;
+border-style: none;
+}
+
+*, *::before, *::after {
+box-sizing: border-box;
+}
+
+.d-none {
+display: none;
+}
+
+.flex-column {
+display: flex;
+flex-direction: column !important;
+}
+
+.flex-wrap {
+flex-wrap: wrap !important;
+}
+
+.d-flex {
+display: -ms-flexbox !important;
+display: flex !important;
+}
+
+.align-items-center {
+-ms-flex-align: center !important;
+align-items: center !important;
+}
+
+.justify-content-end {
+-ms-flex-pack: end !important;
+justify-content: flex-end !important
+}
+
+d-md-none {
+display: none;
+}
+
+.align-self-end {
+align-self: flex-end !important;
+}
+
+.banner {
+    display: flex;
+    width: 100%;
+    height: 72px;
+    box-sizing: border-box;
+    background-color: #095797;
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+
+a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.zone-logo-title {
+    padding: 0.5rem 1.1rem 0.5rem 0;
+}
+
+.zone-title {
+    font-size: 1rem;
+}
+
+.zone-links {
+    padding-left: 1.1rem;
+    max-width: 100%;
+    margin: auto;
+    list-style: none;
+    display: block;
+    color: white;
+}
+
+#header-logo {
+    width:100%;
+    min-width: 7rem;
+    max-height: 28px;
+}
+
+#header-logo-print {
+    display: none;
+}
+
+.zone-links ul {
+    font: normal 0.8rem/1.2rem "roboto", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    text-align: left;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+ul li:last-child {
+    padding: 0;
+}
+
+.zone-links ul a:hover, .zone-links ul a:focus {
+    text-decoration: underline;
+    cursor:pointer;
+}
+
+.buttonLanguage {
+    background: none;
+    border-style: none;
+    padding: 0;
+    font: normal 0.8rem/1rem "roboto", sans-serif;
+    color: unset;
+}
+
+#title-mobile {
+    margin: auto 0;
+    display: block;
+}
+
+#title-desktop {
+    display:none;
+    color: #fff;
+    margin: auto 0;
+    padding: 0;
+}
+
+igo-map-browser {
+    height: calc(100% - $app-header-height);
+}
+
+@media screen and (min-width: 576px) {
+
+    .zone-logo-title, .zone-links {
+        -ms-flex: 0 0 50%;
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+
+}
+
+@media screen and (min-width: 768px) {
+
+    .col-md-10 {
+        flex: 0 0 83.33333%;
+        max-width: 83.33333%;
+    }
+
+    .zone-links {
+        -ms-flex: 0 0 16.66667%;
+        flex: 0 0 16.66667%;
+        max-width: 16.66667%;
+    }
+
+}
+
+@media screen and (min-width: 824px) {
+
+    #header-logo {
+        max-height: 39px;
+        padding-right: 3.75rem;
+    }
+
+    .banner {
+        height:72px;
+    }
+
+    .d-md-block {
+        display: block !important;
+    }
+
+    .d-md-none {
+        display: none !important;
+    }
+
+    .zone-logo-title {
+        -ms-flex: 0 0 83.33333%;
+        flex: 0 0 83.33333%;
+        max-width: 83.33333%;
+    }
+}