diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml
index 14526b0ff1..1c62709e04 100644
--- a/config/locales/js-en.yml
+++ b/config/locales/js-en.yml
@@ -576,6 +576,7 @@ en:
all: 'All'
center:
mark_all_read: 'Mark all as read'
+ text_update_date: "%{date} by"
total_count_warning: "Showing the %{newest_count} most recent notifications. %{more_count} more are not displayed."
settings:
default_all_projects: 'Default for all projects'
diff --git a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.html b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.html
index 512b125757..a2d0f115b0 100644
--- a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.html
+++ b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.html
@@ -2,7 +2,7 @@
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 ea1662308d..b228f9af65 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
@@ -7,19 +7,13 @@ $subject-font-size: 14px
.op-ian-item
background: $ian-bg-color
margin: 0 0 10px 0
- padding: 5px 10px
+ padding: 10px 20px 10px 10px
font-size: 0.9rem
border: 1px solid var(--content-default-border-color)
border-radius: 2px
// This needs to be set in the itemSize of
// the virtual scroller
- height: 80px
-
- &_expanded
- height: auto
- display: grid
- grid-template-rows: auto 1fr
- grid-gap: 0.5rem
+ height: 90px
&:hover
background: $ian-bg-hover-color
@@ -27,106 +21,76 @@ $subject-font-size: 14px
&--row
@include unset-button-styles
width: 100%
+ height: 100%
display: grid
- grid-template-columns: 50px 1fr 200px 15% 15%
- grid-template-rows: auto $subject-font-size 1fr
- grid-template-areas: "project project project project project" "title title status status date" "actors reason reason reason reason"
- grid-gap: 0.5rem
+ grid-template-rows: auto $subject-font-size auto
+ grid-template-areas: "header" "body" "footer"
+ grid-gap: 10px
align-items: center
- @media screen and (max-width: 679px)
- grid-template-columns: 50px 1fr 15% 15%
- grid-template-areas: "project project date date" "title title title title" "actors reason reason reason"
-
- &_unexpandable
- cursor: default
-
+ &--top-line
+ grid-area: header
+ display: grid
+ grid-template-columns: max-content max-content minmax(0, max-content) max-content auto minmax(20px, max-content)
+ grid-template-areas: "status wpIdLink project reason count buttons"
+ grid-column-gap: 5px
+ font-size: 14px
+ align-items: center
- &--indicator
- width: 10px
- height: 10px
- margin-right: 0.5rem
- display: block
- background: var(--primary-color)
- border-radius: 50%
+ &--middle-line
+ grid-area: body
+ display: grid
+ grid-template-columns: auto 1fr
+ grid-column-gap: 5px
- &_read
- background: #AFAFAF
+ &--bottom-line
+ grid-area: footer
+ display: grid
+ grid-template-columns: auto 1fr
+ grid-column-gap: 5px
+ align-items: center
&--work-package-subject
+ @include text-shortener
font-weight: bold
&.-read
font-weight: normal
+ &--work-package-id-link
+ grid-area: wpIdLink
+
&--project
grid-area: project
- font-size: 0.8rem
+ color: var(--gray-dark)
@include text-shortener
- &--project-link
+ &--project-link,
+ &--work-package-id-link
color: var(--gray-dark)
- // Set line-height to show underline
- // which is otherwise swallowed by overflow
- line-height: 1.1
-
- &--reason,
- &--date
- color: #7f7f7f
+ font-weight: bold
&--reason-count
- color: white
+ grid-area: count
@include indicator-bubble
- background: #7f7f7f
-
- &--title
- grid-area: title
- font-size: $subject-font-size
- @include text-shortener
+ justify-self: flex-end
&--reason
grid-area: reason
@include text-shortener
+ color: var(--gray-dark)
max-width: 100%
&--date
- grid-area: date
- @include text-shortener(false)
- white-space: nowrap
- max-width: 100%
- text-align: right
-
- @media screen and (max-width: 679px)
- justify-self: end
-
- &:not(#{&}_read):hover &--date,
- &--buttons:focus-within + &--date
- opacity: 0
-
- @media screen and (max-width: 679px)
- opacity: 1
-
- &--actors
- grid-area: actors
@include text-shortener
+ color: var(--gray-dark)
+ max-width: 100%
&--status
grid-area: status
&--buttons
- grid-area: date
- text-align: right
- align-items: end
-
- @media screen and (max-width: 679px)
- grid-area: buttons
+ grid-area: buttons
&--button
- margin: 0
- opacity: 0
-
- @media screen and (max-width: 679px)
- display: none
-
- &:not(#{&}_read):hover &--button,
- &--button:focus
- opacity: 1
+ &:hover
+ color: var(--content-link-hover-active-color)
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 189d88cc50..39b23caf48 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
@@ -75,6 +75,8 @@ export class InAppNotificationEntryComponent implements OnInit {
text = {
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',
+ { date: age }),
};
constructor(
@@ -121,7 +123,9 @@ export class InAppNotificationEntryComponent implements OnInit {
this.fixedTime = this.timezoneService.formattedDatetime(this.notification.createdAt);
this.relativeTime$ = timer(0, 10000)
.pipe(
- map(() => this.timezoneService.formattedRelativeDateTime(this.notification.createdAt)),
+ map(() => this.text.updated_by_at(
+ this.timezoneService.formattedRelativeDateTime(this.notification.createdAt),
+ )),
distinctUntilChanged(),
);
}
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 f7b965a128..a14ccf03f8 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
@@ -2,12 +2,12 @@
.op-ian-wp-status
@include text-shortener(false)
- padding: 5px
margin-bottom: 0
border: none
border-radius: 2px
color: white
max-width: 100%
+ font-size: 12px
&--text
margin: 0 5px