add slider to questionwall

src/app/components/shared/questionwall/question-wall/question-wall.component.html

@@ -70,7 +70,7 @@
             </ars-row>
             <ars-row>
               <ars-row class="bound" style="padding:16px 32px 16px 32px;box-sizing:border-box;max-width:100%;">
-                <markdown style="max-width:100%" class="questionwall-present-markdown" [data]="commentFocus.comment.body"></markdown>
+                <markdown [ngStyle]="{'font-size':fontSize+'%'}" class="questionwall-present-markdown" [data]="commentFocus.comment.body"></markdown>
               </ars-row>
             </ars-row>
             <ars-row [height]="50">
@@ -98,6 +98,11 @@
       <ars-fill>
       </ars-fill>
     </ars-fill>
+    <div class="questionwall-present-options-outer">
+      <div class="questionwall-present-options-inner">
+        <mat-slider class="questionwall-present-options-slider" min="100" max="300" value="200" (input)="sliderChange($event)"></mat-slider>
+      </div>
+    </div>
     <ars-col ars-flex-box [width]="450" class="questionwall-list" #colComponent>
 
       <ars-row>

src/app/components/shared/questionwall/question-wall/question-wall.component.scss

@@ -123,6 +123,23 @@
       padding:16px 32px 16px 32px;
       color:var(--ars-header-color);
       word-break:break-word;
+      &-options{
+        &-outer{
+          width:0;
+          height:0;
+          position:relative;
+        }
+        &-inner{
+          width:150px;
+          height:50px;
+          position:relative;
+          top:16px;
+          left:-182px;
+        }
+        &-slider{
+          width:100%;
+        }
+      }
       &-box{
         &-outer{
           display:flex;
@@ -191,8 +208,20 @@
 
 :host ::ng-deep{
   .questionwall-present-markdown{
+    max-width:100%;
     img{
       width:100%!important;
     }
   }
+  .questionwall-present-options-slider{
+    .mat-slider-wrapper{
+      background-color:var(--ars-border-color);
+    }
+    .mat-slider-thumb{
+      background-color:var(--ars-button-color);
+    }
+    .mat-slider-track-fill{
+      background-color:var(--ars-button-color);
+    }
+  }
 }

src/app/components/shared/questionwall/question-wall/question-wall.component.ts

@@ -13,6 +13,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { Rescale } from '../../../../models/rescale';
 import { QuestionWallKeyEventSupport } from '../QuestionWallKeyEventSupport';
 import { CorrectWrong } from '../../../../models/correct-wrong.enum';
+import { MatSliderChange } from '@angular/material/slider';
 
 @Component({
   selector: 'app-question-wall',
@@ -41,6 +42,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
   userList = [];
   userSelection = false;
   tags;
+  fontSize = 100;
 
   public wrap<E>(e: E, action: (e: E) => void) {
     action(e);
@@ -71,7 +73,6 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    // StyleDebug.border('c');
     QuestionWallComment.updateTimeFormat(localStorage.getItem('currentLang'));
     this.translateService.use(localStorage.getItem('currentLang'));
     this.commentService.getAckComments(this.roomId).subscribe(e => {
@@ -312,4 +313,8 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
     this.hasFilter = !this.hasFilter;
   }
 
+  sliderChange(evt: MatSliderChange) {
+    this.fontSize = evt.value;
+  }
+
 }