fix focus bug, add qr code to questionwall

src/app/components/creator/creator.module.ts

@@ -26,26 +26,28 @@ import { MatRippleModule } from '@angular/material/core';
 import { ProfanitySettingsComponent } from './_dialogs/profanity-settings/profanity-settings.component';
 import { RoomDescriptionSettingsComponent } from './_dialogs/room-description-settings/room-description-settings.component';
 import { RoomNameSettingsComponent } from './_dialogs/room-name-settings/room-name-settings.component';
+import { QRCodeModule } from 'angularx-qrcode';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    CreatorRoutingModule,
-    EssentialsModule,
-    SharedModule,
-    ModeratorModule,
-    TranslateModule.forChild({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: (HttpLoaderFactory),
-        deps: [HttpClient]
-      },
-      isolate: true
-    }),
-    MarkdownModule,
-    ArsModule,
-    MatRippleModule
-  ],
+    imports:[
+        CommonModule,
+        CreatorRoutingModule,
+        EssentialsModule,
+        SharedModule,
+        ModeratorModule,
+        TranslateModule.forChild({
+            loader:{
+                provide:TranslateLoader,
+                useFactory:(HttpLoaderFactory),
+                deps:[HttpClient]
+            },
+            isolate:true
+        }),
+        MarkdownModule,
+        ArsModule,
+        MatRippleModule,
+        QRCodeModule
+    ],
   declarations: [
     RoomCreatorPageComponent,
     RoomDeleteComponent,

src/app/components/shared/questionwall/QuestionWallKeyEventSupport.ts

@@ -8,7 +8,7 @@ export class QuestionWallKeyEventSupport {
     window.addEventListener('keyup', this.windowEvent = e => {
       if (this.keyMap.has(e.key)) {
         this.keyMap.get(e.key)();
-        e.cancelBubble = true;
+        e.preventDefault();
       }
     });
   }

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

@@ -78,7 +78,7 @@
                       class="period selection"
                       [ngClass]="{'selected': periodItem === period}"
                       aria-labelledby="{{periodItem}}">
-                <span>{{ ('comment-list.select-' + periodItem) | translate }}</span>
+                <span>{{ ('comment-list.select-'+periodItem) | translate }}</span>
               </button>
             </div>
           </mat-menu>
@@ -244,7 +244,7 @@
     </div>
     <ars-col [width]="50" ars-flex-box>
       <ars-row>
-        <button mat-icon-button style="margin-top:18px" (click)="toggleSideList($event)">
+        <button mat-icon-button style="margin-top:18px" (click)="toggleSideList()">
           <mat-icon class="icon-color-yellow" *ngIf="sidelistExpanded" aria-describedby="side-list-off"
                     matTooltip="{{'question-wall.side-list-off' | translate}}">
             keyboard_double_arrow_right
@@ -336,7 +336,7 @@
                         <p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
                       </ars-col>
                       <ars-col>
-                        <p class="questionwall-comment-notification">{{comment.old ? '' : 'NEW'}}</p>
+                        <p class="questionwall-comment-notification">{{comment.old?'':'NEW'}}</p>
                       </ars-col>
                     </ars-row>
                     <ars-row
@@ -460,6 +460,18 @@
             <p>{{'question-wall.auto-renew-on' | translate}}</p>
           </ng-container>
         </button>
+        <button ars-btn
+                matRipple
+                (click)="toggleQRCode()">
+          <ng-container *ngIf="qrCodeExpanded">
+            <i>qr_code</i>
+            <p>{{'question-wall.qrCodeExpanded-off' | translate}}</p>
+          </ng-container>
+          <ng-container *ngIf="!qrCodeExpanded">
+            <i>qr_code</i>
+            <p>{{'question-wall.qrCodeExpanded-on' | translate}}</p>
+          </ng-container>
+        </button>
       </ars-col>
       <ars-fill></ars-fill>
       <ars-col style="display:flex;flex-direction:column;justify-content:center">
@@ -492,6 +504,9 @@
                    [iconColor]="'#FFFFFF'"
                    [backgroundColor]="'#FFFFFF'"
                    [foregroundColor]="'#000000'"></app-active-user>
+  <div class="qr-overlay" *ngIf="qrCodeExpanded">
+    <qrcode [qrdata]="getURL()" [width]="200" [errorCorrectionLevel]="'M'"></qrcode>
+  </div>
 </ars-screen>
 
 

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

@@ -321,6 +321,25 @@
     transition:width ease-in-out 0.1s;
   }
 
+  .qr-overlay {
+    position: fixed;
+    left: 32px;
+    bottom: 64px;
+    width: 200px;
+    height: 200px;
+    animation:popin-qr-overlay 0.2s cubic-bezier(0,.04,0,1) both;
+  }
+
+  @keyframes popin-qr-overlay {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+
 }
 
 .selected {

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

@@ -28,6 +28,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('sidelist') sidelist: ColComponent;
 
   sidelistExpanded: boolean = true;
+  qrCodeExpanded: boolean = false;
   roomId: string;
   room: Room;
   comments: QuestionWallComment[] = [];
@@ -89,14 +90,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-  stopBubble(keyEvent:KeyboardEvent){
-    keyEvent.cancelBubble=true;
-  }
-
-  toggleSideList(event:MouseEvent){
-    if(event.detail===0){
-      return;
-    }
+  toggleSideList(){
     this.sidelistExpanded=!this.sidelistExpanded;
     if(this.sidelistExpanded){
       this.sidelist.setPx(450);
@@ -106,6 +100,15 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  getURL(){
+    if(!this.room)return '';
+    return `${window.location.protocol}//${window.location.hostname}/participant/room/${this.room.shortId}`;
+  }
+
+  toggleQRCode(){
+    this.qrCodeExpanded=!this.qrCodeExpanded;
+  }
+
   ngOnInit(): void {
     QuestionWallComment.updateTimeFormat(localStorage.getItem('currentLang'));
     this.translateService.use(localStorage.getItem('currentLang'));
@@ -166,9 +169,19 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
 
   initKeySupport() {
     this.wrap(this.keySupport, key => {
-      key.addKeyEvent('ArrowRight', () => this.nextComment());
-      key.addKeyEvent('ArrowLeft', () => this.prevComment());
-      key.addKeyEvent(' ', () => this.nextComment());
+      const checkSideList=()=>{
+        if(!this.sidelistExpanded){
+          this.toggleSideList();
+        }
+      }
+      const zip=(a,b)=>{
+        a();
+        b();
+      }
+      const zipSideList=a=>()=>zip(()=>checkSideList(),()=>a());
+      key.addKeyEvent('ArrowRight', zipSideList(() => this.nextComment()));
+      key.addKeyEvent('ArrowLeft', zipSideList(() => this.prevComment()));
+      key.addKeyEvent(' ', zipSideList(() => this.nextComment()));
     });
   }
 

src/app/components/shared/shared.module.ts

@@ -119,32 +119,32 @@ import { AccessibilityEscapedInputDirective } from '../../directives/accessibili
     WorkerConfigDialogComponent,
     AccessibilityEscapedInputDirective
   ],
-  exports: [
-    RoomJoinComponent,
-    PageNotFoundComponent,
-    RoomPageComponent,
-    RoomListComponent,
-    HeaderComponent,
-    FooterComponent,
-    CommentPageComponent,
-    CommentListComponent,
-    CreateCommentComponent,
-    PresentCommentComponent,
-    CommentComponent,
-    DialogActionButtonsComponent,
-    UserBonusTokenComponent,
-    CloudConfigurationComponent,
-    TagCloudPopUpComponent,
-    ActiveUserComponent,
-    MatSpinnerOverlayComponent,
-    JoyrideTemplateDirective,
-    AutofocusDirective,
-    CustomMarkdownComponent,
-    ScrollIntoViewDirective,
-    ViewCommentDataComponent,
-    WriteCommentComponent,
-    AccessibilityEscapedInputDirective
-  ]
+    exports:[
+        RoomJoinComponent,
+        PageNotFoundComponent,
+        RoomPageComponent,
+        RoomListComponent,
+        HeaderComponent,
+        FooterComponent,
+        CommentPageComponent,
+        CommentListComponent,
+        CreateCommentComponent,
+        PresentCommentComponent,
+        CommentComponent,
+        DialogActionButtonsComponent,
+        UserBonusTokenComponent,
+        CloudConfigurationComponent,
+        TagCloudPopUpComponent,
+        ActiveUserComponent,
+        MatSpinnerOverlayComponent,
+        JoyrideTemplateDirective,
+        AutofocusDirective,
+        CustomMarkdownComponent,
+        ScrollIntoViewDirective,
+        ViewCommentDataComponent,
+        WriteCommentComponent,
+        AccessibilityEscapedInputDirective
+    ]
 })
 export class SharedModule {
 }

src/assets/i18n/participant/de.json

@@ -302,7 +302,9 @@
     "overview-questioners-tooltip": "Anzahl Fragensteller",
     "questions-blocked": "Weitere Fragen deaktiviert ",
     "side-list-on": "Fragenliste anzeigen",
-    "side-list-off": "Fragenliste ausblenden"
+    "side-list-off": "Fragenliste ausblenden",
+    "qrCodeExpanded-on": "QR-Code anzeigen",
+    "qrCodeExpanded-off": "QR-Code ausblenden"
   },
   "quill": {
     "cancel": "Abbrechen",

src/assets/i18n/participant/en.json

@@ -308,7 +308,9 @@
     "overview-questioners-tooltip": "Number of questioners",
     "questions-blocked": "New questions blocked",
     "side-list-on": "Show question list",
-    "side-list-off": "Hide question list"
+    "side-list-off": "Hide question list",
+    "qrCodeExpanded-on": "Show QR-Code",
+    "qrCodeExpanded-off": "Hide QR-Code"
   },
   "quill": {
     "cancel": "Cancel",