ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Template rework and fullscreen mode

Browse Source
This commit is contained in:
Emanuel Schütze 2019-05-17 08:56:18 +02:00
parent 469084a1b6
commit 2cfff9e1b9
7 changed files with 43 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/shared/components/slide-container/slide-container.component.scss
View File

@ -10,8 +10,6 @@
line-height: 1.5em;
}
}
::ng-deep #slide {
z-index: 5;
#slide {
height: 100%;
}

1
client/src/app/site/mediafiles/models/view-mediafile.ts
View File

@ -17,7 +17,6 @@ export interface MediafileTitleInformation {
export class ViewMediafile extends BaseViewModelWithListOfSpeakers<Mediafile>
implements MediafileTitleInformation, Searchable {
public static COLLECTIONSTRING = Mediafile.COLLECTIONSTRING;
private _uploader: ViewUser;

27
client/src/app/site/projector/components/presentation-control/presentation-control.component.html
View File

@ -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>

16
client/src/app/site/projector/components/presentation-control/presentation-control.component.ts
View File

@ -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);

2
client/src/app/slides/agenda/current-speaker-chyron/current-speaker-chyron-slide.component.html
View File

@ -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}">

9
client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html
View File

@ -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>

36
client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.scss
View File

@ -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;
}