132 lines
5.7 KiB
HTML
132 lines
5.7 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"
|
|
(click)="insertTitle(1)"
|
|
matTooltip="Click to insert a title 1 section"
|
|
matRipple
|
|
i18n-matTooltip>
|
|
H1
|
|
</button>
|
|
<button type="button"
|
|
(click)="insertTitle(2)"
|
|
matTooltip="Click to insert a title 2 section"
|
|
matRipple
|
|
i18n-matTooltip>
|
|
H2
|
|
</button>
|
|
<button type="button"
|
|
(click)="insertTitle(3)"
|
|
matTooltip="Click to insert a title 3 section"
|
|
matRipple
|
|
i18n-matTooltip>
|
|
H3
|
|
</button>
|
|
<button type="button"
|
|
(click)="selectAPicture()"
|
|
matTooltip="Click to insert a picture"
|
|
matRipple
|
|
i18n-matTooltip>
|
|
<mat-icon>image</mat-icon>
|
|
</button>
|
|
<button type="button"
|
|
(click)="insertLink()"
|
|
matTooltip="Click to insert a link"
|
|
matRipple
|
|
i18n-matTooltip>
|
|
<mat-icon>link</mat-icon>
|
|
</button>
|
|
<button type="button"
|
|
(click)="displayCodeBlockDialog()"
|
|
matTooltip="Click to insert a code block"
|
|
matRipple
|
|
i18n-matTooltip>
|
|
<mat-icon>code</mat-icon>
|
|
</button>
|
|
<button type="button"
|
|
matTooltip="Click to display editor help"
|
|
disabled
|
|
matRipple
|
|
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 [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
|
|
<button type="button"
|
|
class="cod-btn secondary"
|
|
(click)="goPreviousLocation()"
|
|
matRipple
|
|
i18n>
|
|
Cancel
|
|
</button>
|
|
</footer>
|
|
</form> |