diff --git a/src/app/components/shared/_dialogs/present-comment/present-comment.component.html b/src/app/components/shared/_dialogs/present-comment/present-comment.component.html new file mode 100644 index 0000000000000000000000000000000000000000..2e56acb91825f699a99a59066fe8c419c77527ea --- /dev/null +++ b/src/app/components/shared/_dialogs/present-comment/present-comment.component.html @@ -0,0 +1,8 @@ +<mat-slider min="2.1" max="6" step="0.2" value="1.2" thumbLabel tickInterval="auto" + [(ngModel)]="sliderValue" (change)="updateFontSize()" id="slider"></mat-slider> +<button id="exitButton" mat-raised-button color="warn" (click)="onCloseClick()"> + <mat-icon >exit_to_app</mat-icon> +</button> +<div id="comment"> + {{body}} +</div> diff --git a/src/app/components/shared/_dialogs/present-comment/present-comment.component.scss b/src/app/components/shared/_dialogs/present-comment/present-comment.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..0de9fbbf4a2929ec61b16a428b8166832f3a1cd8 --- /dev/null +++ b/src/app/components/shared/_dialogs/present-comment/present-comment.component.scss @@ -0,0 +1,38 @@ +/* +#comment { + position: absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: 100px; + height: 100px; + background-color: blue; + font-size: 1em; +} +*/ + +#comment { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + min-height: 90vh; + font-size: 2.1em; + margin: 0.5em 0.5em; +} + + +#exitButton { + position:absolute; + top:2em; + right:2em; +} + +#slider { + position:absolute; + top:2em; + left:2em; +} diff --git a/src/app/components/shared/_dialogs/present-comment/present-comment.component.spec.ts b/src/app/components/shared/_dialogs/present-comment/present-comment.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..b682f6a46ff6a5acca54207bd8be238b58f1a7a2 --- /dev/null +++ b/src/app/components/shared/_dialogs/present-comment/present-comment.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PresentCommentComponent } from './present-comment.component'; + +describe('PresentCommentComponent', () => { + let component: PresentCommentComponent; + let fixture: ComponentFixture<PresentCommentComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PresentCommentComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PresentCommentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/shared/_dialogs/present-comment/present-comment.component.ts b/src/app/components/shared/_dialogs/present-comment/present-comment.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..bb7c65488ba18de0b26fece3110d50fe31768df1 --- /dev/null +++ b/src/app/components/shared/_dialogs/present-comment/present-comment.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { MatDialog, MatDialogRef} from '@angular/material'; +import { TranslateService} from '@ngx-translate/core'; + +@Component({ + selector: 'app-present-comment', + templateUrl: './present-comment.component.html', + styleUrls: ['./present-comment.component.scss'] +}) +export class PresentCommentComponent implements OnInit { + public body: string; + sliderValue = 0; + + constructor( + public dialogRef: MatDialogRef<PresentCommentComponent>, + private translateService: TranslateService, + public dialog: MatDialog + ) { } + + ngOnInit() { + this.translateService.use(localStorage.getItem('currentLang')); + } + + onCloseClick(): void { + this.dialogRef.close('close'); + } + + private updateFontSize(): void { + console.log(this.sliderValue); + document.getElementById('comment').style.fontSize = this.sliderValue + 'em'; + } +} diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html index e5f7b77cff496a9cd6d8b4cc204f0f3e28419cff..2e95afd4774f4d2fd9eec5d25a97e93a0ee7e03d 100644 --- a/src/app/components/shared/comment/comment.component.html +++ b/src/app/components/shared/comment/comment.component.html @@ -2,7 +2,7 @@ <div fxLayout="row" fxLayoutAlign="center center"> <div *ngIf="comment.createdFromLecturer !== false" mat-card-avatar class="proffesor-icon" matTooltip="created from lecturer"><mat-icon>record_voice_over</mat-icon></div> <mat-card-content> - <p>{{comment.body}}</p> + <p (click)="openPresentDialog(comment.body)">{{comment.body}}</p> </mat-card-content> <span class="fill-remaining-space"></span> <button mat-icon-button [disabled]="isCreator" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'"> diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts index 614ba19679654b869f242600626516c66ffea54c..b6290b6d07a3346248fdf52d6909a2707079c476 100644 --- a/src/app/components/shared/comment/comment.component.ts +++ b/src/app/components/shared/comment/comment.component.ts @@ -8,6 +8,8 @@ import { NotificationService } from '../../../services/util/notification.service import { TranslateService } from '@ngx-translate/core'; import { LanguageService } from '../../../services/util/language.service'; import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service'; +import { PresentCommentComponent } from '../_dialogs/present-comment/present-comment.component'; +import { MatDialog } from '@angular/material'; @Component({ selector: 'app-comment', @@ -25,6 +27,7 @@ export class CommentComponent implements OnInit { private commentService: CommentService, private notification: NotificationService, private translateService: TranslateService, + public dialog: MatDialog, protected langService: LanguageService, private wsCommentService: WsCommentServiceService) { langService.langEmitter.subscribe(lang => translateService.use(lang)); } @@ -53,4 +56,24 @@ export class CommentComponent implements OnInit { this.notification.show(`Comment '${comment.body}' successfully deleted.`); }); } + + openPresentDialog(body: string): void { + const dialogRef = this.dialog.open(PresentCommentComponent, { + position: { + left: '10px', + right: '10px' + }, + maxWidth: '100vw', + maxHeight: '100vh', + height: '100%', + width: '100%' + }); + dialogRef.componentInstance.body = body; + dialogRef.afterClosed() + .subscribe(result => { + if (result === 'close') { + return; + } + }); + } } diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts index a392ad54b6d5208dc6b747b4ed448a411053179f..91443e5ae37c4a711d48caddcbedd5f55a76fbe3 100644 --- a/src/app/components/shared/shared.module.ts +++ b/src/app/components/shared/shared.module.ts @@ -23,6 +23,7 @@ import { LoginComponent } from './login/login.component'; import { StatisticHelpComponent } from './_dialogs/statistic-help/statistic-help.component'; import { CommentComponent } from './comment/comment.component'; import { SubmitCommentComponent } from './_dialogs/submit-comment/submit-comment.component'; +import {PresentCommentComponent} from "./_dialogs/present-comment/present-comment.component"; @NgModule({ imports: [ @@ -52,7 +53,8 @@ import { SubmitCommentComponent } from './_dialogs/submit-comment/submit-comment LoginComponent, StatisticHelpComponent, CommentComponent, - SubmitCommentComponent + SubmitCommentComponent, + PresentCommentComponent ], exports: [ RoomJoinComponent, @@ -69,13 +71,15 @@ import { SubmitCommentComponent } from './_dialogs/submit-comment/submit-comment CommentPageComponent, CommentListComponent, StatisticsPageComponent, - SubmitCommentComponent + SubmitCommentComponent, + PresentCommentComponent ], entryComponents: [ RoomCreateComponent, LoginComponent, StatisticHelpComponent, - SubmitCommentComponent + SubmitCommentComponent, + PresentCommentComponent ] }) export class SharedModule {