Skip to content
Snippets Groups Projects
Commit 48e55032 authored by Kevin Genty's avatar Kevin Genty
Browse files

fix(header): condition affichage display

parent 0de87dce
No related branches found
No related tags found
No related merge requests found
......@@ -79,7 +79,7 @@
<!-- Header tools --------------------------------------------------------------------------------------------->
<div *ngIf="hasToolsLinks() || searchBar" class="fr-header__tools">
<div *ngIf="hasToolsLinks()" class="fr-header__tools-links">
<ul #toolLinks *ngIf="headerToolsLinks || display" class="fr-btns-group">
<ul #toolLinks *ngIf="headerToolsLinks || showDisplay" class="fr-btns-group">
<li *ngFor="let item of headerToolsLinks; let i = index">
<edu-item-link
*ngIf="i < maxToolsLinks"
......@@ -90,7 +90,7 @@
[item]="item">
</edu-item-link>
</li>
<li *ngIf="display">
<li *ngIf="showDisplay">
<button
type="button"
class="fr-btn fr-icon-theme-fill"
......@@ -191,5 +191,5 @@
</div>
</header>
<dsfr-display *ngIf="display && _useDeprecatedPictoPath" [pictoPath]="artworkDirPath"></dsfr-display>
<dsfr-display *ngIf="display && !_useDeprecatedPictoPath" [artworkDirPath]="artworkDirPath"></dsfr-display>
<dsfr-display *ngIf="showDisplay && _useDeprecatedPictoPath" [pictoPath]="artworkDirPath"></dsfr-display>
<dsfr-display *ngIf="showDisplay && !_useDeprecatedPictoPath" [artworkDirPath]="artworkDirPath"></dsfr-display>
......@@ -37,7 +37,7 @@ export class DsfrHeaderComponent implements OnInit {
/**
* Affichage du lien 'Paramètre d'affichage' pour gérer les modes clair/sombre.
*/
@Input() display: boolean;
// @Input() display: boolean;
/**
* Chemin vers le répertoire exposant les pictogrammes illustratifs DSFR.
......@@ -110,13 +110,18 @@ export class DsfrHeaderComponent implements OnInit {
*
* @internal
*/
readonly maxToolsLinks = 3;
maxToolsLinks = 3;
/**
* @internal
*/
_useDeprecatedPictoPath = false;
/**
* @internal
*/
showDisplay: boolean;
private _headerToolsLinks: DsfrLink[]; // ne pas initialiser à [] pour StoryBook
/** @internal */
......@@ -127,6 +132,10 @@ export class DsfrHeaderComponent implements OnInit {
private cdr: ChangeDetectorRef,
) {}
get display(): boolean {
return this.showDisplay;
}
get headerToolsLinks(): DsfrLink[] {
return this._headerToolsLinks;
}
......@@ -139,10 +148,23 @@ export class DsfrHeaderComponent implements OnInit {
return this.artworkDirPath;
}
/** Affichage du lien 'Paramètre d'affichage' pour gérer les modes clair/sombre. */
@Input() set display(value: boolean) {
this.showDisplay = value;
this.maxToolsLinks = this.showDisplay ? 2 : 3;
}
/** Tableau de lien d'accès rapide. */
@Input() set headerToolsLinks(links: DsfrLink[]) {
if (links && links.length > this.maxToolsLinks) {
console.warn("Le nombre d'accès rapides (tools links) est limité à " + this.maxToolsLinks);
if (this.showDisplay) {
console.warn(
"Avec l'utilisation du paramètre d'affichage, le nombre d'accès rapides (tools links) est limité à " +
this.maxToolsLinks,
);
} else {
console.warn("Le nombre d'accès rapides (tools links) est limité à " + this.maxToolsLinks);
}
}
this._headerToolsLinks = links;
this.duplicateToolsLinksMobile();
......
......@@ -84,6 +84,7 @@ const menuHeader: DsfrMenuItemHeader[] = [
## Paramètres d'affichage
Pour activer les paramètres d'affichage vous pouvez activer l'input `display`.
Vous serez limité à 2 accès rapides (headerToolsLinks) et non 3.
<Canvas of={HeaderStories.Display} />
......@@ -108,6 +109,8 @@ Vous pouvez reprendre la main :
},
```
Attention, sous cette forme, le paramètre d'affichage est considéré comme un lien rapide, dont la limite à afficher est de 3.
<Canvas of={HeaderStories.CustomDisplay} />
## Accès rapides : ouverture d'une modale avec un lien
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment