added keyword overview

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>
+          &nbsp;{{ '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"

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;