Show user as link in a notification row and increase some spacings

config/locales/js-en.yml

@@ -575,6 +575,9 @@ en:
         unread: 'Unread'
         all: 'All'
       center:
+        and_more_users:
+          one: 'and 1 other'
+          other: 'and %{count} others'
         mark_all_read: 'Mark all as read'
         mark_as_read: 'Mark as read'
         text_update_date: "%{date} by"

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html

@@ -91,10 +91,19 @@
           [title]="fixedTime"
           [textContent]="relativeTime$ | async"
         ></div>
-        <op-principal-list
-          class="op-ian-item--actors"
-          [principals]="actors"
-        ></op-principal-list>
+        <div>
+          <op-principal
+            class="op-ian-item--actors"
+            [principal]="actors[0]"
+            [hide-name]="false"
+            [hide-avatar]="true"
+          ></op-principal>
+          <span
+            *ngIf="actors.length > 1"
+          >
+            {{ text_for_additional_authors(actors.length - 1) }}
+          </span>
+        </div>
       </div>
     </ng-container>
 

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass

@@ -49,6 +49,7 @@ $subject-font-size: 14px
     grid-template-columns: auto 1fr
     grid-column-gap: 5px
     align-items: center
+    color: var(--gray-dark)
 
   &--work-package-subject
     @include text-shortener
@@ -83,12 +84,12 @@ $subject-font-size: 14px
 
   &--date
     @include text-shortener
-    color: var(--gray-dark)
     max-width: 100%
     line-height: 16px
 
   &--status
     grid-area: status
+    margin-right: 5px
 
   &--buttons
     grid-area: buttons

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.ts

@@ -72,6 +72,9 @@ export class InAppNotificationEntryComponent implements OnInit {
   project?:{ href:string, title:string, showUrl:string };
 
   text = {
+    and_other_singular: this.I18n.t('js.notifications.center.and_more_users.one'),
+    and_other_plural: (count:number):string => this.I18n.t('js.notifications.center.and_more_users.other',
+      { count }),
     loading: this.I18n.t('js.ajax.loading'),
     placeholder: this.I18n.t('js.placeholders.default'),
     updated_by_at: (age:string):string => this.I18n.t('js.notifications.center.text_update_date',
@@ -155,6 +158,16 @@ export class InAppNotificationEntryComponent implements OnInit {
     this.storeService.markAsRead(notifications.map((el) => el.id));
   }
 
+  text_for_additional_authors(number:number):string {
+    let hint:string;
+    if (number === 1) {
+      hint = this.text.and_other_singular;
+    } else {
+      hint = this.text.and_other_plural(number);
+    }
+    return hint;
+  }
+
   private buildActors() {
     const actors = this
       .aggregatedNotifications

frontend/src/app/features/in-app-notifications/entry/status/in-app-notification-status.component.sass

@@ -3,12 +3,15 @@
 .op-ian-wp-status
   @include text-shortener(false)
   margin-bottom: 0
-  padding: 0 5px
+  padding: 1px 8px
   border: none
   border-radius: 2px
   color: white
   max-width: 100%
   font-size: 12px
+  display: inline-block
+  min-height: 16px
+  line-height: 16px
 
   &--text
     margin: 0 5px