diff --git a/dmp-frontend/src/app/core/formatting.module.ts b/dmp-frontend/src/app/core/formatting.module.ts index b5ca3f3c0..4160b1f39 100644 --- a/dmp-frontend/src/app/core/formatting.module.ts +++ b/dmp-frontend/src/app/core/formatting.module.ts @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'; import { DateFormatPipe } from './pipes/date-format.pipe'; import { DateTimeFormatPipe } from './pipes/date-time-format.pipe'; import { NgForLimitPipe } from './pipes/ng-for-limit.pipe'; +import { SumarizeTextPipe } from './pipes/sumarize-text.pipe'; import { TimezoneInfoDisplayPipe } from './pipes/timezone-info-display.pipe'; import { EnumUtils } from './services/utilities/enum-utils.service'; import { JsonParserPipe } from './pipes/json-parser.pipe'; @@ -20,6 +21,7 @@ import { PipeService } from '@common/formatting/pipe.service'; @NgModule({ declarations: [ NgForLimitPipe, + SumarizeTextPipe, TimezoneInfoDisplayPipe, DateFormatPipe, DateTimeFormatPipe, @@ -30,6 +32,7 @@ import { PipeService } from '@common/formatting/pipe.service'; ], exports: [ NgForLimitPipe, + SumarizeTextPipe, TimezoneInfoDisplayPipe, DateFormatPipe, DateTimeFormatPipe, @@ -43,6 +46,7 @@ import { PipeService } from '@common/formatting/pipe.service'; DatePipe, PipeService, NgForLimitPipe, + SumarizeTextPipe, TimezoneInfoDisplayPipe, DateFormatPipe, DateTimeFormatPipe, diff --git a/dmp-frontend/src/app/core/pipes/sumarize-text.pipe.ts b/dmp-frontend/src/app/core/pipes/sumarize-text.pipe.ts new file mode 100644 index 000000000..94ed2346d --- /dev/null +++ b/dmp-frontend/src/app/core/pipes/sumarize-text.pipe.ts @@ -0,0 +1,10 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ name: 'sumarizeText' }) +export class SumarizeTextPipe implements PipeTransform { + transform(items: any[], limit: number) { + if (items.length > limit) { + return `${items.slice(0, limit-3)}...`; + } else { return items; } + } +} diff --git a/dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.html b/dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.html index 0f4c5b7a7..b8ce889af 100644 --- a/dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.html +++ b/dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.html @@ -1,19 +1,29 @@
- - - - drafts - mail - {{ inappNotification.subject }} - {{ inappNotification.createdAt | date : 'short'}} - - - - {{'NAV-BAR.INAPP-NOTIFICATIONS' - | translate}} - - - {{'NAV-BAR.READ-ALL-INAPP-NOTIFICATIONS' - | translate}} - - +
+
+
+ + +
+
+ drafts + mail + {{ inappNotification.subject | sumarizeText:21 }} +
+ + {{ inappNotification.createdAt | date : 'short'}} + +
+ + + {{'NAV-BAR.INAPP-NOTIFICATIONS' + | translate}} + + + {{'NAV-BAR.READ-ALL-INAPP-NOTIFICATIONS' + | translate}} + + +
+
+
\ No newline at end of file diff --git a/dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.scss b/dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.scss index 6a455971f..fcbb16119 100644 --- a/dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.scss +++ b/dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.scss @@ -5,7 +5,11 @@ border-left: 0.625rem solid transparent; border-right: 0.625rem solid transparent; position: fixed; - transform: translate(27.65rem, -0.6rem); + transform: translate(25.4rem, -0.6rem); +} + +.notification-popup-wrapper { + margin: 0.5rem 1.0rem; } .inapp-notification-listing-dialog { @@ -19,7 +23,10 @@ color: rgba(0, 0, 0, 0.54); } - .mat-list-item-content { - text-align: center - } + // .mat-list-item-content { + // //text-align: center + // } + .notification-menu-item { + margin-left: 2.0rem; + } } diff --git a/dmp-frontend/src/app/ui/inapp-notification/mine-inapp-notification.module.ts b/dmp-frontend/src/app/ui/inapp-notification/mine-inapp-notification.module.ts index 30e48d718..8dc20bc03 100644 --- a/dmp-frontend/src/app/ui/inapp-notification/mine-inapp-notification.module.ts +++ b/dmp-frontend/src/app/ui/inapp-notification/mine-inapp-notification.module.ts @@ -11,6 +11,7 @@ import { InAppNotificationEditorComponent } from './editor/inapp-notification-ed import { MineInAppNotificationListingFiltersComponent } from './listing/filters/mine-inapp-notification-listing-filters.component'; import { MineInAppNotificationListingDialogComponent } from './listing-dialog/mine-inapp-notification-listing-dialog.component'; import { CommonFormattingModule } from '@common/formatting/common-formatting.module'; +import { FormattingModule } from '@app/core/formatting.module'; @NgModule({ imports: [ @@ -21,7 +22,8 @@ import { CommonFormattingModule } from '@common/formatting/common-formatting.mod TextFilterModule, MineInAppNotificationRoutingModule, UserSettingsModule, - CommonFormattingModule + CommonFormattingModule, + FormattingModule ], declarations: [ MineInAppNotificationListingComponent, diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts index e4ca508e0..061bf1b4c 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts @@ -309,6 +309,7 @@ export class NavbarComponent extends BaseComponent implements OnInit { closeOnNavigation: true, disableClose: false, position: { top: '71px', right: '4.8em' }, + width: "27.0rem" }); this.inAppNotificationDialog.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { this.countUnreadInappNotifications();