Template rework and fullscreen mode
This commit is contained in:
Emanuel Schütze
parent
469084a1b6
commit
2cfff9e1b9
|
|
@ -10,8 +10,6 @@
|
|||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep #slide {
|
||||
z-index: 5;
|
||||
#slide {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ export interface MediafileTitleInformation {
|
|||
|
||||
export class ViewMediafile extends BaseViewModelWithListOfSpeakers<Mediafile>
|
||||
implements MediafileTitleInformation, Searchable {
|
||||
|
||||
public static COLLECTIONSTRING = Mediafile.COLLECTIONSTRING;
|
||||
|
||||
private _uploader: ViewUser;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,19 @@
|
|||
<mat-expansion-panel *ngIf="elements.length">
|
||||
<mat-expansion-panel-header>
|
||||
<span translate>Media controls</span>
|
||||
<span translate>Media file</span>
|
||||
</mat-expansion-panel-header>
|
||||
<h5 translate>Presentation control</h5>
|
||||
<div *ngFor="let element of elements">
|
||||
{{ getMediafile(element).getTitle() }}
|
||||
<span *ngIf="getMediafile(element).isImage()">
|
||||
<i>{{ getMediafile(element).getTitle() }}</i>
|
||||
<div *ngIf="getMediafile(element).isImage()">
|
||||
<button type="button" *ngIf="!element.fullscreen" mat-icon-button (click)="fullscreen(element)">
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
<mat-icon>check_box_outline_blank</mat-icon>
|
||||
</button>
|
||||
<button type="button" *ngIf="!!element.fullscreen" mat-icon-button (click)="fullscreen(element)">
|
||||
<mat-icon>fullscreen_exit</mat-icon>
|
||||
<mat-icon>check_box</mat-icon>
|
||||
</button>
|
||||
<button type="button" mat-icon-button (click)="rotate(element)">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
</span>
|
||||
<span *ngIf="getMediafile(element).isPdf()">
|
||||
<span translate>fullscreen</span>
|
||||
</div>
|
||||
<div *ngIf="getMediafile(element).isPdf()">
|
||||
<button type="button" mat-icon-button (click)="pdfBackward(element)" [disabled]="getPage(element) <= 1">
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
</button>
|
||||
|
|
@ -24,10 +21,8 @@
|
|||
<mat-icon>arrow_forward</mat-icon>
|
||||
</button>
|
||||
<!-- TODO: Use form for page number; use pdfSetPage then. -->
|
||||
Page {{ getPage(element) }}/{{ getMediafile(element).pages }}
|
||||
<button type="button" mat-icon-button (click)="rotate(element)">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
<span translate>Page</span> {{ getPage(element) }}/{{ getMediafile(element).pages }}
|
||||
<br>
|
||||
<button type="button" mat-icon-button (click)="zoom(element, 'in')">
|
||||
<mat-icon>zoom_in</mat-icon>
|
||||
</button>
|
||||
|
|
@ -37,6 +32,6 @@
|
|||
<button type="button" mat-icon-button (click)="zoom(element, 'out')">
|
||||
<mat-icon>zoom_out</mat-icon>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
|
|
|
|||
|
|
@ -137,22 +137,6 @@ export class PresentationControlComponent extends BaseViewComponent {
|
|||
this.updateElement(element);
|
||||
}
|
||||
|
||||
public rotate(element: MediafileProjectorElement): void {
|
||||
let rotation: 0 | 90 | 180 | 270 = element.rotation || 0;
|
||||
if (rotation === 0) {
|
||||
rotation = 90;
|
||||
} else if (rotation === 90) {
|
||||
rotation = 180;
|
||||
} else if (rotation === 180) {
|
||||
rotation = 270;
|
||||
} else {
|
||||
// 270
|
||||
rotation = 0;
|
||||
}
|
||||
element.rotation = rotation;
|
||||
this.updateElement(element);
|
||||
}
|
||||
|
||||
private updateElement(element: MediafileProjectorElement): void {
|
||||
const idElement = this.slideManager.getIdentifialbeProjectorElement(element);
|
||||
this.projectorService.updateElement(this.projector.projector, idElement).then(null, this.raiseError);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="chyron" *ngIf="data"[ngStyle]="{
|
||||
<div id="chyron" *ngIf="data" [ngStyle]="{
|
||||
'background-color': data.data.background_color,
|
||||
color: data.data.font_color}">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
<div *ngIf="data">
|
||||
<div *ngIf="isImage">
|
||||
<img [src]="url" alt="" [ngClass]="'rotate' + (data.element.rotation || 0)"/>
|
||||
{{ data.element.fullscreen || false }}
|
||||
<div *ngIf="isImage" [ngClass]="data.element.fullscreen ? 'fullscreen' : 'nofullscreen'" >
|
||||
<img [src]="url" alt="" />
|
||||
</div>
|
||||
<div *ngIf="isPdf">
|
||||
{{ data.element.rotation || 0 }}
|
||||
<div *ngIf="isPdf" class="fullscreen">
|
||||
<pdf-viewer
|
||||
[show-all]="false"
|
||||
[original-size]="false"
|
||||
|
|
@ -12,7 +10,6 @@
|
|||
[autoresize]="true"
|
||||
[page]="data.element.page || 1"
|
||||
[zoom]="zoom"
|
||||
[rotation]="data.element.rotation || 0"
|
||||
[src]="url"
|
||||
style="display: block;"></pdf-viewer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,30 @@
|
|||
.rotate0 {
|
||||
transform: rotate(0deg);
|
||||
.fullscreen img,
|
||||
.nofullscreen img {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.rotate90 {
|
||||
transform: rotate(90deg);
|
||||
.fullscreen {
|
||||
z-index: 100; /* TODO: find solution to overlap header/footer */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto; /* TODO: use dynamic auto width/height for landscape/portrait format */
|
||||
}
|
||||
}
|
||||
.rotate180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.rotate270 {
|
||||
transform: rotate(270deg);
|
||||
|
||||
.nofullscreen {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue