IETM_FIXE\ietm6
8efdf5d0e0
Améliorations ux : - Bandeau en haut qui reste accessible lors de la création d'un élément (chapitre, page, scène etc...) - Mise en place d'un surlignage pour voir su quel élément on est positionné
73 lines
2.5 KiB
HTML
73 lines
2.5 KiB
HTML
<div class="view-page" *ngIf="page">
|
|
|
|
<app-breadcrumb [items]="breadcrumbItems"></app-breadcrumb>
|
|
|
|
<header class="view-header">
|
|
<div>
|
|
<h1>{{ page.title }}</h1>
|
|
<p class="view-subtitle">{{ template?.name || 'Page' }}</p>
|
|
</div>
|
|
<div class="view-actions">
|
|
<button type="button" class="btn-primary" (click)="editMode()">
|
|
<lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
|
|
Modifier
|
|
</button>
|
|
<button type="button" class="btn-danger" (click)="deletePage()" title="Supprimer la page">
|
|
<lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Champs dynamiques du template (seuls les champs TEXT sont rendus ici ;
|
|
le support complet des champs IMAGE arrive a l'etape 5). -->
|
|
<ng-container *ngIf="template?.fields?.length">
|
|
<ng-container *ngFor="let field of template!.fields">
|
|
<section class="view-section" *ngIf="field.type === 'TEXT'">
|
|
<h2 class="view-section-title">{{ field.name }}</h2>
|
|
<p class="view-section-body" *ngIf="valueOf(field.name); else emptyField">{{ valueOf(field.name) }}</p>
|
|
<ng-template #emptyField>
|
|
<p class="view-section-empty">Non renseigné</p>
|
|
</ng-template>
|
|
</section>
|
|
<section class="view-section" *ngIf="field.type === 'IMAGE'">
|
|
<h2 class="view-section-title">{{ field.name }}</h2>
|
|
<app-image-gallery
|
|
[imageIds]="imageIdsOf(field.name)"
|
|
[layout]="field.layout ?? 'GALLERY'">
|
|
</app-image-gallery>
|
|
</section>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<!-- Tags -->
|
|
<section class="view-section" *ngIf="(page.tags?.length ?? 0) > 0">
|
|
<h2 class="view-section-title">Tags</h2>
|
|
<div class="view-chips">
|
|
<span class="view-chip view-chip--tag" *ngFor="let tag of page.tags">{{ tag }}</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pages liées -->
|
|
<section class="view-section" *ngIf="(page.relatedPageIds?.length ?? 0) > 0">
|
|
<h2 class="view-section-title">Pages liées</h2>
|
|
<div class="view-chips">
|
|
<a class="view-chip"
|
|
*ngFor="let relId of page.relatedPageIds"
|
|
[routerLink]="['/lore', loreId, 'pages', relId]">
|
|
{{ titleOfRelated(relId) }}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Notes privées MJ -->
|
|
<section class="view-section view-section--private" *ngIf="page.notes?.trim()">
|
|
<h2 class="view-section-title">
|
|
<span class="view-section-icon">🔒</span>
|
|
Notes privées
|
|
</h2>
|
|
<p class="view-section-body">{{ page.notes }}</p>
|
|
</section>
|
|
|
|
</div>
|