100 lines
4.8 KiB
HTML
100 lines
4.8 KiB
HTML
<form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
|
|
<header>
|
|
<h1>{{title}}</h1>
|
|
</header>
|
|
|
|
<mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
|
|
<mat-tab label="Edition" i18n-label>
|
|
<div class="form-content">
|
|
<div class="first-part">
|
|
<div>
|
|
<mat-form-field>
|
|
<mat-label i18n>Title</mat-label>
|
|
<input matInput type="text" formControlName="title" />
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label i18n>Description</mat-label>
|
|
<input matInput type="text" formControlName="description" />
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label i18n>Category</mat-label>
|
|
<mat-select formControlName="categoryId">
|
|
@for (category of categories$ | async; track category) {
|
|
<mat-option [value]="category.id">
|
|
{{ category.name }}
|
|
</mat-option>
|
|
}
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="picture-container">
|
|
<img [src]="publication.illustrationId.length ? '/api/pictures/' + publication.illustrationId : '/assets/images/default-picture.png'"
|
|
(click)="displayPictureSectionDialog()"
|
|
matTooltip="Click to change illustration"
|
|
i18n-matTooltip/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(1)" i18n-matTooltip>
|
|
H1
|
|
</button>
|
|
<button type="button" matTooltip="Click to insert a title 2 section" (click)="insertTitle(2)" i18n-matTooltip>
|
|
H2
|
|
</button>
|
|
<button type="button" matTooltip="Click to insert a title 3 section" (click)="insertTitle(3)" i18n-matTooltip>
|
|
H3
|
|
</button>
|
|
<button type="button" matTooltip="Click to insert a picture" (click)="selectAPicture()" i18n-matTooltip>
|
|
<mat-icon>image</mat-icon>
|
|
</button>
|
|
<button type="button" matTooltip="Click to insert a link" (click)="insertLink()" i18n-matTooltip>
|
|
<mat-icon>link</mat-icon>
|
|
</button>
|
|
<button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()" i18n-matTooltip>
|
|
<mat-icon>code</mat-icon>
|
|
</button>
|
|
<button type="button" disabled matTooltip="Click to display editor help" i18n-matTooltip>
|
|
<mat-icon>help</mat-icon>
|
|
</button>
|
|
</div>
|
|
<mat-form-field>
|
|
<mat-label i18n>Content</mat-label>
|
|
<textarea
|
|
#textArea
|
|
matInput
|
|
formControlName="text"
|
|
class="text-input"
|
|
(keyup)="updateCursorPosition($event)"
|
|
(click)="updateCursorPosition($event)">
|
|
</textarea>
|
|
</mat-form-field>
|
|
</div>
|
|
</mat-tab>
|
|
|
|
<mat-tab label="Previewing" i18n-label>
|
|
<div class="preview">
|
|
@if ((isPreviewing$ | async) === true) {
|
|
<div class="preview-loading">
|
|
<h2 i18n>Preview is loading...</h2>
|
|
<mat-spinner></mat-spinner>
|
|
</div>
|
|
} @else {
|
|
<img class="illustration" src="/api/pictures/{{ publication.illustrationId }}" />
|
|
<header>
|
|
<h1>{{ publication.title }}</h1>
|
|
<h2>{{ publication.description }}</h2>
|
|
</header>
|
|
<main [innerHTML]="publicationInEdition.parsedText"></main>
|
|
}
|
|
</div>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
<footer>
|
|
<app-submit-button label="Save" [requestPending]="!!(isSaving$ | async)" i18n-label></app-submit-button>
|
|
<button type="button" class="secondary" (click)="goPreviousLocation()" i18n>
|
|
Cancel
|
|
</button>
|
|
</footer>
|
|
</form> |