created cloud-configuration-component

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html

+<div mat-dialog-content>
+  <!--questions-->
+  <h2 class="oldtypo-h2">{{'room-page.comments' | translate }}</h2>
+  <mat-divider></mat-divider>
+
+  <div fxLayout="column">
+
+
+    <div fxLayout="row">
+      <!--direct send-->
+      <p class="oldtypo-p">{{ 'room-page.settings-direct-send' | translate}}&nbsp;
+        <mat-slide-toggle
+                          aria-labelledby="settings-direct-send"
+                          matTooltip="{{ 'room-page.settings-direct-send-description' | translate }}">
+        </mat-slide-toggle>
+      </p>
+    </div>
+  </div>
+
+  <div fxLayout="column">
+    <div fxLayout="row">
+      <!--comment threshold-->
+      <p class="oldtypo-p">{{ 'room-page.threshold' | translate}}&nbsp;
+        <mat-slide-toggle>
+                          aria-labelledby="threshold"
+                          matTooltip="{{ 'room-page.threshold-description' | translate }}">
+        </mat-slide-toggle>
+      </p>
+    </div>
+    <div fxLayout="row">
+      <mat-slider id="commentSlider"
+                  min="-100"
+                  max="0"
+                  step="5">
+
+      </mat-slider>
+      <h2 class="oldtypo-h2">&nbsp</h2>
+    </div>
+  </div>
+
+  <mat-divider></mat-divider>
+
+  <div fxLayoutAlign="center center">
+    <button mat-raised-button
+            class="export"
+            aria-labelledby="export-comments">
+      <mat-icon>save</mat-icon>
+      {{ 'room-page.export-comments' | translate }}</button>
+  </div>
+  <div fxLayoutAlign="center center">
+    <button mat-raised-button
+            class="delete"
+            aria-labelledby="delete-all-comments">
+      <mat-icon>delete</mat-icon>
+      {{ 'room-page.delete-all-comments' | translate }}</button>
+  </div>
+</div>
+
+<app-dialog-action-buttons
+  buttonsLabelSection="room-page"
+  confirmButtonLabel="update"
+></app-dialog-action-buttons>
+
+<div class="visually-hidden">
+  <div id="threshold">{{'room-page.a11y-threshold' | translate}} </div>
+  <div id="settings-comment-moderation">{{'room-page.a11y-settings-comment-moderation' | translate}} </div>
+  <div id="settings-direct-send">{{'room-page.a11y-settings-direct-send' | translate}} </div>
+  <div id="export-comments">{{'room-page.a11y-export-comments' | translate}} </div>
+  <div id="delete-all-comments">{{'room-page.a11y-delete-all-comments' | translate}} </div>
+</div>

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss

+#commentSlider {
+  width: 100%;
+}
+
+.delete {
+  margin-bottom: 20px;
+  min-width: 220px;
+  background-color: var(--red);
+  color: var(--white);
+}
+
+.export {
+  margin-bottom: 20px;
+  min-width: 220px;
+  background-color: var(--secondary);
+  color: var(--on-secondary);
+}
+
+button {
+  min-width: 105px;
+}
+
+mat-icon {
+  margin-right: 10px;
+}
+
+
+mat-divider {
+  margin-bottom: 10px;
+  color: var(--on-surface) !important;
+}
+
+.abort {
+  background-color: var(--cancel);
+  color: var(--on-cancel);
+}
+
+.update {
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+
+.submit {
+  margin-top: 20px;
+}

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CloudConfigurationComponent } from './cloud-configuration.component';
+
+describe('CloudConfigurationComponent', () => {
+  let component: CloudConfigurationComponent;
+  let fixture: ComponentFixture<CloudConfigurationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CloudConfigurationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CloudConfigurationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts

+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from "@angular/material/dialog";
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-cloud-configuration',
+  templateUrl: './cloud-configuration.component.html',
+  styleUrls: ['./cloud-configuration.component.scss']
+})
+export class CloudConfigurationComponent implements OnInit {
+
+  constructor(public dialogRef: MatDialogRef<CloudConfigurationComponent>) { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/shared/header/header.component.html

@@ -16,6 +16,10 @@
       {{cTime}}
     </h2>
 
+    <button (click)="openCloudConfiguration()">
+      Test-Button
+    </button>
+
     <!--
     <span *ngIf="router.url.includes('comments')  && !router.url.includes('moderator/comments') && deviceType === 'desktop'"
           class="fill-remaining-space"></span>

src/app/components/shared/header/header.component.ts

@@ -6,7 +6,7 @@ import { User } from '../../../models/user';
 import { UserRole } from '../../../models/user-roles.enum';
 import { Location } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
-import { MatDialog } from '@angular/material/dialog';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import { LoginComponent } from '../login/login.component';
 import { DeleteAccountComponent } from '../_dialogs/delete-account/delete-account.component';
 import { UserService } from '../../../services/http/user.service';
@@ -21,6 +21,7 @@ import { QrCodeDialogComponent } from '../_dialogs/qr-code-dialog/qr-code-dialog
 import { BonusTokenService } from '../../../services/http/bonus-token.service';
 import { MotdService } from '../../../services/http/motd.service';
 import { RoomService } from '../../../services/http/room.service';
+import {CloudConfigurationComponent} from "../_dialogs/cloud-configuration/cloud-configuration.component";
 
 @Component({
   selector: 'app-header',
@@ -179,6 +180,12 @@ export class HeaderComponent implements OnInit {
     this.location.back();
   }
 
+  openCloudConfiguration() {
+    const dialogRef = this.dialog.open(CloudConfigurationComponent);
+
+    dialogRef.afterClosed().subscribe(result => {});
+  }
+
   login(isLecturer: boolean) {
     const dialogRef = this.dialog.open(LoginComponent, {
       width: '350px'

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

@@ -28,6 +28,7 @@ import { MatRippleModule } from '@angular/material/core';
 import { QRCodeModule } from 'angularx-qrcode';
 import { MotdDialogComponent } from './_dialogs/motd-dialog/motd-dialog.component';
 import { MotdMessageComponent } from './_dialogs/motd-dialog/motd-message/motd-message.component';
+import {CloudConfigurationComponent} from "./_dialogs/cloud-configuration/cloud-configuration.component";
 
 @NgModule({
   imports: [
@@ -54,6 +55,7 @@ import { MotdMessageComponent } from './_dialogs/motd-dialog/motd-message/motd-m
     LoginComponent,
     CommentComponent,
     CreateCommentComponent,
+    CloudConfigurationComponent,
     PresentCommentComponent,
     DeleteAccountComponent,
     DialogActionButtonsComponent,