diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html index 826f46505b0f959ebc058aca5f5c5c535a535fe9..40cf691a6e586eb00db83a42958354eb39c297b2 100644 --- a/src/app/components/shared/comment/comment.component.html +++ b/src/app/components/shared/comment/comment.component.html @@ -317,6 +317,28 @@ {{comment.userNumber}} </strong> </div> + <div fxLayoutAlign="center center" + matTooltip="{{ 'comment-page.keywords-per-question' | translate }}" + [mat-menu-trigger-for]="keywordsMenu" + class="comment-keywords"> + <mat-icon svgIcon="comment_tag"></mat-icon> + <span> + {{ 'comment-page.keywords' | translate }} + </span> + <mat-menu #keywordsMenu> + <span class="keyword-span">{{ 'comment-page.keywords' | translate }}:</span> + <mat-divider></mat-divider> + <mat-list dense class="keywords-list"> + <mat-list-item *ngFor="let keyword of comment.keywords; let odd = odd; let even = even" + [class.keywords-alternate]="odd" + [class.keywords-even]="even" + [ngClass]="{'keyword-selected': keyword.selected}"> + <span class="keyword-span">{{keyword}}</span> + </mat-list-item> + </mat-list> + </mat-menu> + </div> + <span class="fill-remaining-space"></span> <button mat-icon-button class="moderate-button" diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss index 41cbf510532a3b7b4bef04193e07cba958f68c50..333e6ae8cfd78f94fbcbd3c965a5927368be1b40 100644 --- a/src/app/components/shared/comment/comment.component.scss +++ b/src/app/components/shared/comment/comment.component.scss @@ -178,6 +178,27 @@ mat-card-content > :first-child { color: var(--primary); margin-right: 10px; } +.comment-keywords { + cursor: pointer; + color: var(--on-surface); + margin-left: 10px; +} + + +.keywords-list { + margin-top: 10px; + flex-grow: 1; + flex-shrink: 1; + overflow: auto; + padding-top: 0 !important; +} +.keywords-even { +background-color: var(--alt-dialog); +} +.keyword-span { + color: var(--on-surface) !important; + opacity: 1 !important; +} .user-number { cursor: pointer;