Less complicated markdown textarea CSS

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-forms / markdown-textarea.component.html

<div class="root" [ngClass]="{ 'maximized': isMaximized }" [ngStyle]="{ 'max-width': textareaMaxWidth }">

  <textarea #textarea
    [(ngModel)]="content" (ngModelChange)="onModelChange()"
    class="form-control" [ngClass]="{ 'input-error': formError }"
    [attr.disabled]="disabled || null"
    [ngStyle]="{ height: textareaHeight }"
    [id]="name" [name]="name">
  </textarea>

  <div ngbNav #nav="ngbNav" class="nav-pills nav-preview">
    <ng-container ngbNavItem *ngIf="truncate !== undefined">
      <a ngbNavLink i18n>Truncated preview</a>

      <ng-template ngbNavContent>
        <div [innerHTML]="truncatedPreviewHTML"></div>
      </ng-template>
    </ng-container>

    <ng-container ngbNavItem>
      <a ngbNavLink i18n>Complete preview</a>

      <ng-template ngbNavContent>
        <div #previewElement></div>
        <div [innerHTML]="previewHTML"></div>
      </ng-template>
    </ng-container>

    <my-global-icon
      *ngIf="!isMaximized" role="button" [ngbTooltip]="maximizeInText"
      class="maximize-button" iconName="fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }"
    ></my-global-icon>

    <my-global-icon
      *ngIf="isMaximized" role="button" [ngbTooltip]="maximizeOutText"
      class="maximize-button" iconName="exit-fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }"
    ></my-global-icon>
  </div>

  <div [ngbNavOutlet]="nav"></div>

  <div *ngIf="!isMaximized && formError" class="form-error">{{ formError }}</div>
</div>