diff --git a/angular.json b/angular.json
index f001ead9b02cc8bcf76e3fa8c63e5c15bf4ef6b5..504ecd51a1a000f02c2dbe14c6ff876a5f8dac7b 100644
--- a/angular.json
+++ b/angular.json
@@ -138,4 +138,4 @@
"prefix": "app"
}
}
-}
\ No newline at end of file
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7720c73aca2fd1f54c9c2cc65c12b655f9825028..f8d6cfd9444ac63f3a6e28e473051fbbf019ff69 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -25,7 +25,7 @@ import { CreatorModule } from './components/creator/creator.module';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LanguageService } from './services/util/language.service';
-import { MarkdownService, MarkedOptions } from 'ngx-markdown';
+import { MarkdownModule, MarkdownService, MarkedOptions } from 'ngx-markdown';
import { NewLandingComponent } from './components/home/new-landing/new-landing.component';
import { HomePageComponent } from './components/home/home-page/home-page.component';
import { UserHomeComponent } from './components/home/user-home/user-home.component';
@@ -113,6 +113,12 @@ export function initializeApp(appConfig: AppConfig) {
ThemeModule,
CreatorModule,
ModeratorModule,
+ MarkdownModule.forRoot({
+ provide: MarkedOptions,
+ useValue: {
+ sanitize: true
+ }
+ }),
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
TranslateModule.forChild({
loader: {
diff --git a/src/app/components/creator/_dialogs/room-edit/room-edit.component.html b/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
index 64c4acb3821e5315c90bd8aad5aa979bf8c2fe5d..f5277601d10817cc409ef63ea35da52b71652a73 100644
--- a/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
+++ b/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
@@ -9,7 +9,9 @@
<mat-placeholder class="placeholder">{{ 'session.session-name' | translate }}</mat-placeholder>
<mat-hint align="end"><span aria-hidden="true">{{ editRoom.name.length }} / 20</span></mat-hint>
</mat-form-field>
- <mat-form-field class="input-block">
+ <mat-tab-group>
+ <mat-tab label="{{'room-page.description' | translate}}">
+ <mat-form-field class="input-block">
<textarea
(focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
[(ngModel)]="editRoom.description"
@@ -21,9 +23,17 @@
name="description"
aria-labelledby="description"
></textarea>
- <mat-placeholder class="placeholder">{{ 'session.description' | translate }}</mat-placeholder>
- <mat-hint align="end"><span aria-hidden="true">{{ editRoom.description ? editRoom.description.length : 0 }} / 255</span></mat-hint>
- </mat-form-field>
+ <mat-hint align="end">
+ <span aria-hidden="true">
+ {{ editRoom.description ? editRoom.description.length : 0 }} / 255
+ </span>
+ </mat-hint>
+ </mat-form-field>
+ </mat-tab>
+ <mat-tab label="{{'session.preview' | translate}}" [disabled]="!editRoom.description">
+ <markdown [data]="editRoom.description"></markdown>
+ </mat-tab>
+ </mat-tab-group>
<div fxLayoutAlign="center center">
<button mat-raised-button class="delete" (click)="openDeleteRoomDialog()" aria-labelledby="delete-room">
<mat-icon>delete</mat-icon>
diff --git a/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss b/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
index c1c3e607353d9969fbb786dbf07d7d6956210648..b38626eb9a222b1d6249aa2dcdd409d070e97443 100644
--- a/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
+++ b/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
@@ -4,7 +4,7 @@
.delete {
margin: 20px 0 20px 0;
- min-width: 220px;
+ min-width: 160px;
background-color: var(--red);
color: var(--on-secondary);
}
@@ -51,3 +51,12 @@ mat-hint {
color: var(--on-surface)!important;
}
+::ng-deep .mat-tab-label-active,
+::ng-deep .mat-tab-label {
+ color: var(--on-surface);
+ opacity: 1!important;
+}
+
+::ng-deep .mat-ink-bar {
+ background-color: var(--primary) !important;
+}
diff --git a/src/app/components/creator/creator.module.ts b/src/app/components/creator/creator.module.ts
index 1fe4402d87b550bdcc06fbfb55e203eb12e7b1e5..091aeef5c4ac4a0ba7d98195755a2f724193b202 100644
--- a/src/app/components/creator/creator.module.ts
+++ b/src/app/components/creator/creator.module.ts
@@ -29,6 +29,7 @@ import { ModeratorDeleteComponent } from './_dialogs/moderator-delete/moderator-
import { DeleteCommentComponent } from './_dialogs/delete-comment/delete-comment.component';
import { DeleteCommentsComponent } from './_dialogs/delete-comments/delete-comments.component';
import { BonusDeleteComponent } from './_dialogs/bonus-delete/bonus-delete.component';
+import { MarkdownModule } from 'ngx-markdown';
@NgModule({
imports: [
@@ -44,7 +45,8 @@ import { BonusDeleteComponent } from './_dialogs/bonus-delete/bonus-delete.compo
deps: [HttpClient]
},
isolate: true
- })
+ }),
+ MarkdownModule
],
declarations: [
ContentChoiceCreatorComponent,
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index a6dbd96824b59f63939a1065a1528b644a872054..235ec8b30543aab1ecfb0919bb12e26e11e2a12b 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -43,9 +43,7 @@
</button>
</div>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
- <p>
- {{ room.description.trim() }}
- </p>
+ <markdown [data]="room.description.trim()"></markdown>
</mat-card-content>
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1" *ngIf="viewModuleCount > 1">
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index 812a7a8208cfcf1d2494691c755003fe2ff66544..7b4ca770cce12144b3783a5847879cc90af5f926 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
@@ -4,9 +4,8 @@ mat-card {
width: 100%;
max-width: 800px;
min-height: 300px;
- max-height: 600px;
+ max-height: 700px;
background-color: var(--surface)!important;
- margin-top: 7%;
}
mat-card-content > :first-child {
@@ -61,7 +60,7 @@ mat-card-content > :first-child {
mat-grid-list {
margin-top: 0;
- max-height: 45%!important;
+ max-height: 250px!important;
}
.second {
@@ -120,3 +119,7 @@ mat-expansion-panel {
.question-button-div {
margin: 10% 0 10% 0;
}
+
+markdown {
+ margin: 0 3% 0 3% !important;
+}
diff --git a/src/app/components/moderator/moderator.module.ts b/src/app/components/moderator/moderator.module.ts
index 2e4159997fbe3336994e44d42d8c3a830a656038..3d17c18bf5b4d765ce070f607cbddbe37660551d 100644
--- a/src/app/components/moderator/moderator.module.ts
+++ b/src/app/components/moderator/moderator.module.ts
@@ -9,6 +9,7 @@ import { SharedModule } from '../shared/shared.module';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { MarkdownModule } from 'ngx-markdown';
@NgModule({
imports: [
@@ -23,7 +24,8 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
deps: [HttpClient]
},
isolate: true
- })
+ }),
+ MarkdownModule
],
declarations: [
RoomModeratorPageComponent,
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
index 9ae3fa645268379100e05e6e2fc35ee164367cd3..dc3fc5db845aa473bf921066538b95203d0cbfc6 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
@@ -24,7 +24,7 @@
</div>
<mat-divider></mat-divider>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
- <p>{{room.description.trim()}}</p>
+ <markdown [data]="room.description.trim()"></markdown>
</mat-card-content>
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1" *ngIf="viewModuleCount > 1 && this.moderationEnabled">
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
index 9cace7ad4794cd2d9ff8be23003bab696313e5f7..207ae9db6a70f5e0dd599d2b905a7c0cfea39718 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
@@ -4,9 +4,8 @@ mat-card {
width: 100%;
max-width: 800px;
min-height: 350px;
- max-height: 600px;
+ max-height: 700px;
background-color: var(--surface)!important;
- margin-top: 5%;
}
mat-card-content > :first-child {
@@ -139,3 +138,7 @@ mat-expansion-panel {
.question-button-div {
margin: 10% 0 10% 0;
}
+
+markdown {
+ margin: 0 3% 0 3% !important;
+}
diff --git a/src/app/components/participant/participant.module.ts b/src/app/components/participant/participant.module.ts
index 3467598d63c86134cd50cd715af9549375edc01e..daeac29741d4316f5ac5698b842b06d7d361a053 100644
--- a/src/app/components/participant/participant.module.ts
+++ b/src/app/components/participant/participant.module.ts
@@ -10,6 +10,7 @@ import { ParticipantContentCarouselPageComponent } from './participant-content-c
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { MarkdownModule } from 'ngx-markdown';
@NgModule({
imports: [
@@ -24,7 +25,8 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
deps: [HttpClient]
},
isolate: true
- })
+ }),
+ MarkdownModule
],
declarations: [
ContentChoiceParticipantComponent,
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.html b/src/app/components/participant/room-participant-page/room-participant-page.component.html
index 668a0c42cd0a7b71689154cd5e8368d2ae8d253a..b38d994a9dfbe92130c32662f0f5721727918254 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.html
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.html
@@ -24,7 +24,7 @@
</div>
<mat-divider></mat-divider>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
- <p>{{room.description.trim()}}</p>
+ <markdown [data]="room.description.trim()"></markdown>
</mat-card-content>
<mat-grid-list cols="1" rowHeight="2:1">
<mat-grid-tile>
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index d088600bee2e69dc6d4d8853de41f05378b2153d..414f1699890ac7dcc3da1fdf87c1247599880ffa 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -175,10 +175,10 @@
"create-content": "Frage erstellen",
"default-content-group": "Standard",
"delete-all-comments": "Alle Fragen löschen",
- "delete-room": "Löschen",
+ "delete-room": "Sitzung Löschen",
"delete-room-description": "Sitzung löschen",
"deleted": " gelöscht.",
- "description": "Beschreibung der Sitzung",
+ "description": "Beschreibung",
"email-error": "E-Mail Adresse ist ungültig.",
"export-comments": "Fragen exportieren",
"general": "Sitzung",
@@ -226,9 +226,10 @@
"session": {
"a11y-description": "Gib eine Beschreibung für die Sitzung ein.",
"create-session": "Speichern",
- "description": "Beschreibung der Sitzung",
+ "description": "Beschreibung",
"max-ls": "Maximale Anzahl Zeichen:",
- "session-name": "Name der Sitzung"
+ "session-name": "Name der Sitzung",
+ "preview": "Vorschau"
},
"statistic": {
"abstentions": "Enthaltungen",
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index 6d3d37dbbc74f255947d37ab27a8ef3bc6d017fc..cfb98a72024d5d011d2944335c9ba89239e8c4b8 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -179,7 +179,7 @@
"delete-room": "Delete session",
"delete-room-description": "Delete session",
"deleted": " deleted.",
- "description": "Description of session",
+ "description": "Description",
"email-error": "E-Mail is invalid.",
"export-comments": "Export questions",
"general": "Session",
@@ -227,9 +227,10 @@
"session": {
"a11y-description": "Enter a description for the session",
"create-session": "Create session",
- "description": "Session description",
+ "description": "Description",
"max-ls": "Max. characters:",
- "session-name": "Session name"
+ "session-name": "Session name",
+ "preview": "Preview"
},
"statistic": {
"abstentions": "Abstentions",
diff --git a/src/styles.scss b/src/styles.scss
index dbaf1614e62e695a5c0e48fdbf52b1397c1c246b..df559bcc44689258e952a1ca1f02a6bbc5e334c0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -65,6 +65,10 @@ body{
color: var(--on-surface);
}
+markdown {
+ color: var(--on-surface);
+}
+
h2 {
color: var(--on-surface)!important;