From 431fd8210a0e3c5f310387b1f51ce616c45579d2 Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Fri, 10 Sep 2021 12:39:57 +0200
Subject: [PATCH] Show user as link in a notification row and increase some
 spacings

---
 config/locales/js-en.yml                        |  3 +++
 .../in-app-notification-entry.component.html    | 17 +++++++++++++----
 .../in-app-notification-entry.component.sass    |  3 ++-
 .../in-app-notification-entry.component.ts      | 13 +++++++++++++
 .../in-app-notification-status.component.sass   |  5 ++++-
 5 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml
index f3f426fedc..c90cb53172 100644
--- a/config/locales/js-en.yml
+++ b/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"
diff --git a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html b/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html
index 214f2a8beb..c01c766be3 100644
--- a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html
+++ b/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>
 
diff --git a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass b/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass
index 57fb314fb2..dd8329f51f 100644
--- a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass
+++ b/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
diff --git a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.ts b/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.ts
index b129a81e23..42018ae357 100644
--- a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.ts
+++ b/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
diff --git a/frontend/src/app/features/in-app-notifications/entry/status/in-app-notification-status.component.sass b/frontend/src/app/features/in-app-notifications/entry/status/in-app-notification-status.component.sass
index 6f63ca8c74..8bce855074 100644
--- a/frontend/src/app/features/in-app-notifications/entry/status/in-app-notification-status.component.sass
+++ b/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