Homec4science
Diffusion svg-test-app (master) Browse

svg-test-app/src/app/page-view-component/page-view-component.component.html
6243b1a4dc01master

Last Change
Raw File

page-view-component.component.html
View Options

<!--<img *ngIf="activePage && activePage.image" [src]="activePage.image"/>
<object *ngIf="selectedSvg" type="image/svg+xml" [data]="selectedSvg"></object> -->
<mat-card>
<mat-card-header>
<button mat-raised-button
(click)="setViewMode('synopsis')">
<mat-icon style="transform: rotate(180deg)">vertical_split</mat-icon> Synopse
</button>
<button mat-raised-button
(click)="setViewMode('faksimile')">
<mat-icon>gesture</mat-icon> Faksimile
</button>
<button mat-raised-button
(click)="setViewMode('transcription')">
<mat-icon>view_headline</mat-icon> Transkription
</button>
<mat-button-toggle-group class="right-outer-element" #pageMode="matButtonToggleGroup" [(ngModel)]="paging">
<mat-button-toggle value="single" aria-label="single page" matTooltip="Einzelseite" style="font-weight: bold">
#
</mat-button-toggle>
<mat-button-toggle value="double" aria-label="double page" matTooltip="Doppelseite" style="font-weight: bold">
##
</mat-button-toggle>
</mat-button-toggle-group>
<mat-button-toggle-group class="right-outer-element" [(ngModel)]="alignment">
<mat-button-toggle value="horizontal" aria-label="align horizontal" matTooltip="Horizontale Anordnung">
<mat-icon [color]="alignment === 'horizontal' ? 'accent' : 'primary'" style="transform: rotate(180deg)">vertical_split</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="vertical" aria-label="align vertical" matTooltip="Vertikale Anordnung">
<mat-icon [color]="alignment === 'vertical' ? 'accent' : 'primary'" style="transform: rotate(180deg)">horizontal_split</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
<button mat-stroked-button [color]="fixSidebar ? 'accent' : 'primary'" matTooltip="Infobox fixieren"
(click)="toggleSidebarFixation()">
<mat-icon [color]="fixSidebar ? 'accent' : 'primary'">view_sidebar</mat-icon>
</button>
<button mat-stroked-button class="right-inner-element" matTooltip="Highlight" (click)="toggleHighlight()">
<mat-icon [color]="highlight ? 'accent' : 'primary'">{{ highlight ? 'highlight' : 'highlight_outlined' }}</mat-icon>
</button>
</mat-card-header>
<!-- -->
<mat-drawer-container [hasBackdrop]= false >
<mat-drawer class="drawer" mode="over" position ="end" [disableClose]="true" [opened]="openState">
<div class="in-drawer-content-area">
<div class="in-drawer-toggle-button-container">
<button mat-raised-button class="toggle-button" (click)="toggleDetailsDrawer()">
<mat-icon class="mat-accent">{{ openState ? 'chevron_right' : 'chevron_left' }}</mat-icon>
</button>
</div>
<div class="in-drawer-content-container">
<app-info-box [manuscript]="manuscript"></app-info-box>
</div>
</div>
</mat-drawer>
<mat-drawer-content class="main-content-container">
<div class="outer-content-area">
<div class = "page-turn-button-container" style="align-items: right">
<button mat-raised-button matTooltip="nach links blättern" class="page-turn-button" (click)="turnPage(-1)">
<mat-icon class="mat-accent">arrow_left</mat-icon>
</button>
</div>
<!-- HERE THE COMPONENTS (faksimile, transcription, synopsis) are routed into ...-->
<!-- Faksimile -->
<div *ngIf="queryParams.viewMode === 'faksimile' || queryParams.viewMode === 'synopsis'">
<!-- <img *ngIf="activePage && activePage.image" [src]="activePage.image"/> -->
<div id= "faksimile-container" class="text-container" *ngIf="activePage && activePage.image" >
<text-field [image]="activePage.image" [text_field]="text_field"></text-field>
</div>
</div>
<div *ngIf="queryParams.viewMode === 'transcription' || queryParams.viewMode === 'synopsis'">
<div id= "transcription-container" class="text-container" *ngIf="activePage && activePage.svg" >
<text-field [svg]="activePage.svg" [text_field]="text_field"></text-field>
</div>
</div>
<div class = "page-turn-button-container" style="align-items: left">
<button mat-raised-button matTooltip="nach rechts blättern" class="page-turn-button" (click)="turnPage(1)">
<mat-icon class="mat-accent">arrow_right</mat-icon>
</button>
</div>
<div style="display: table-cell; width: 100%"></div>
<div class = "toggle-button-container">
<button mat-raised-button class="toggle-button" (click)="toggleDetailsDrawer()">
<mat-icon class="mat-accent">{{ openState ? 'chevron_right' : 'chevron_left' }}</mat-icon>
</button>
</div>
</div>
</mat-drawer-content>
</mat-drawer-container>
</mat-card>
<!--
<div class="info-container">
<app-info-box [manuscript]="manuscript"></app-info-box>
</div>
-->
c4science · Help