diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html
index c81a07c8297b1f8c26762f1ea963f42957f0487f..001c3fc5210e0ac066ce38af3731e01f0d0fc745 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html
+++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html
@@ -19,7 +19,6 @@
{{'topic-cloud-dialog.sort-Count' | translate}} </button>
<!-- <button mat-menu-item (click)="sortScore(true)" aria-labelledby="sort-lbl-rating">{{'question-wall.sort-score' | translate}}</button> -->
</mat-menu>
-
<mat-accordion>
<mat-expansion-panel *ngFor="let keyword of keywords">
<mat-expansion-panel-header class="color">
@@ -33,13 +32,16 @@
</mat-expansion-panel-header>
<div *ngFor="let question of keyword.questions">
<mat-divider></mat-divider>
- <p [ngClass]="{'hideText': question.length > 80 || isReadMore}">
- <!--{{question}} -->
- {{(question.length < 80 || isReadMore) ? question : question | slice:0:50}}
- <button mat-icon-button *ngIf="question.length > 80" style="background: none; font-weight: bold;" (click)="showText()">
- {{ !isReadMore ? '...more': 'less' }}
- </button>
- </p>
+ <app-topic-dialog-comment
+ [question]="question"
+ [maxShowedCharachters] = "70"
+ ></app-topic-dialog-comment>
+ <!--<p [ngClass]="{'hideText': question.length > maxShowedCharachters || isReadMore}">
+ {{(question.length < maxShowedCharachters || isReadMore) ? question : question | slice:0:70}}
+ <button mat-icon-button *ngIf="question.length > maxShowedCharachters" style="background: none; font-weight: bold;" (click)="showText()">
+ {{ !isReadMore ? '...more': '...less' }}
+ </button>
+ </p>-->
</div>
<!-- Only visible when not editing -->
diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
index f4d1e58458161a702ea0ac8d6e24db9baee51d0e..4d90dcdd91a07cf7e36e27db2d0920b35af4db11 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
+++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
@@ -56,8 +56,4 @@ mat-panel-title, mat-panel-description {
opacity: 1.0 !important;
}
-.hideText {
- height: 30px;
- overflow: hidden;
-}
diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts
index a53ef60c985286e47c4c58a4a986242f049b1f32..af8a88b013a65bb9197eeb75d51703b280e32a49 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts
+++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts
@@ -23,7 +23,6 @@ export class TopicCloudAdministrationComponent implements OnInit {
sortMode: SortMode = SortMode.ALPHABETIC;
sortModeEnum: typeof SortMode = SortMode; // needed for use in template
editedKeyword:boolean = false;
- isReadMore: boolean = false;
keywords: Keyword[] = [
{
@@ -31,7 +30,7 @@ export class TopicCloudAdministrationComponent implements OnInit {
keyword: "Cloud",
questions: [
"Wie genau ist die Cloud aufgebaut? Wieviel speicherplatz steht mir in der Cloud zur verfuegung",
- "Wieviel speicherplatz steht mir in der Cloud zur verfuegung?",
+ "Wieviel speicherplatz steht mir in der Cloud zur verfuegung? Ich habe eine Frage, sind Fragen zum thema 'Frage' auch erlaubt?",
"Sollen wir die Tag Cloud implementieren?"
]
},
@@ -195,10 +194,6 @@ export class TopicCloudAdministrationComponent implements OnInit {
}
})
}
-
- showText() {
- this.isReadMore = !this.isReadMore;
- }
}
export enum SortMode {
diff --git a/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.html b/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..d28702d98c9ecf685b47d7d0036f70f66b9a6db7
--- /dev/null
+++ b/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.html
@@ -0,0 +1,7 @@
+<p>
+ {{(isCollapsed) ? question : question | slice:0:maxShowedCharachters}}
+ <button mat-icon-button *ngIf = "question.length > maxShowedCharachters"
+ style="background: none; font-weight: bold;" (click)="isCollapsed = !isCollapsed">
+ {{ !isCollapsed ? '...more': '...less' }}
+ </button>
+</p>
\ No newline at end of file
diff --git a/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.scss b/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7361dbdd34b29f8e5475c07570023fbe2b247397
--- /dev/null
+++ b/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.scss
@@ -0,0 +1,14 @@
+mat-panel-description, mat-panel-title, p, input {
+ color: var(--on-background);
+}
+
+mat-icon {
+ fill: currentColor;
+}
+
+
+label {
+color: var(--on-surface)
+}
+
+
diff --git a/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.ts b/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e8f0c1495bfce4c38f52bdae5f2fd3dd64730bae
--- /dev/null
+++ b/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-topic-dialog-comment',
+ templateUrl: './topic-dialog-comment.component.html',
+ styleUrls: ['./topic-dialog-comment.component.scss']
+})
+export class TopicDialogCommentComponent implements OnInit {
+
+ @Input() question: string;
+ @Input() maxShowedCharachters: number;
+ isCollapsed: boolean = false;
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts
index cf192c451e902ff5d920b107f5b1ebce1b913cd7..2efb6e61c1c6862dcdd8085803166bd5bd8bb20f 100644
--- a/src/app/components/shared/shared.module.ts
+++ b/src/app/components/shared/shared.module.ts
@@ -32,6 +32,7 @@ import { MotdMessageComponent } from './_dialogs/motd-dialog/motd-message/motd-m
import { TagCloudModule } from 'angular-tag-cloud-module';
import { TopicCloudConfirmDialogComponent } from './_dialogs/topic-cloud-confirm-dialog/topic-cloud-confirm-dialog.component';
import { TopicCloudAdministrationComponent } from './_dialogs/topic-cloud-administration/topic-cloud-administration.component';
+import { TopicDialogCommentComponent } from './dialog/topic-dialog-comment/topic-dialog-comment.component';
@NgModule({
imports: [
@@ -68,7 +69,8 @@ import { TopicCloudAdministrationComponent } from './_dialogs/topic-cloud-admini
MotdDialogComponent,
MotdMessageComponent,
TopicCloudConfirmDialogComponent,
- TopicCloudAdministrationComponent
+ TopicCloudAdministrationComponent,
+ TopicDialogCommentComponent
],
exports: [
RoomJoinComponent,