diff --git a/angular.json b/angular.json
index f001ead9b02cc8bcf76e3fa8c63e5c15bf4ef6b5..b9720f0dcf76a0a35f88100f2e70cc0eb0e3367e 100644
--- a/angular.json
+++ b/angular.json
@@ -23,7 +23,9 @@
],
"styles": [
"src/styles.scss",
- "./node_modules/material-design-icons/iconfont/material-icons.css"
+ "./node_modules/material-design-icons/iconfont/material-icons.css",
+ "node_modules/prismjs/themes/prism-okaidia.css",
+ "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
],
"scripts": [
"node_modules/marked/lib/marked.js"
@@ -138,4 +140,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..07d21ea6f9da1fb5a1a6cff1d58374d7dfb3a110 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';
@@ -59,6 +59,9 @@ import { OverlayComponent } from './components/home/_dialogs/overlay/overlay.com
import { DemoDeComponent } from '../assets/i18n/demo/demo-de';
import { DemoEnComponent } from '../assets/i18n/demo/demo-en';
+import 'prismjs/prism';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
+
export function dialogClose(dialogResult: any) {
}
@@ -113,6 +116,7 @@ export function initializeApp(appConfig: AppConfig) {
ThemeModule,
CreatorModule,
ModeratorModule,
+ MarkdownModule.forRoot(),
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..a10c0c16c7d2853a0934e782c5d1ab8d0a5094c8 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,17 @@ 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;
+}
+
+markdown {
+ color: var(--on-surface);
+}
+
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/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",