styling changes

*mine-notification-listing dialog

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,

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; }
+	}
+}

dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.html

@@ -1,19 +1,29 @@
 <div class="dropdown-top"></div>
-
+<div class="notification-popup-wrapper">
-<mat-nav-list class="inapp-notification-listing-dialog">
+	<div class="row">
-	<a *ngFor="let inappNotification of inappNotifications; last as last;" mat-list-item (click)="goToNotification(inappNotification)">
+		<div class="col-12">
-		<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Delivered" mat-list-icon>drafts</mat-icon>
+		<mat-nav-list class="inapp-notification-listing-dialog">
-		<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Stored" mat-list-icon>mail</mat-icon>
+			<a *ngFor="let inappNotification of inappNotifications; last as last;" mat-list-item (click)="goToNotification(inappNotification)">
-		<span mat-line>{{ inappNotification.subject }}</span>
+				<div class="d-flex justify-content-between">
-		<span mat-line class="secondary-text">{{ inappNotification.createdAt | date : 'short'}}</span>
+					<div class="d-flex">
-		<mat-divider inset *ngIf="!last"></mat-divider>
+						<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Delivered" mat-list-icon class="mr-3">drafts</mat-icon>
-	</a>
+						<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Stored" mat-list-icon class="mr-3">mail</mat-icon>
-	<mat-list-item class = "mat-list-item-content" *ngIf="authService.hasPermission(authService.permissionEnum.ViewMineInAppNotificationPage)">
+						<span mat-line>{{ inappNotification.subject | sumarizeText:21 }}</span>
-		<a (click)="goToNotifications()">{{'NAV-BAR.INAPP-NOTIFICATIONS'
+					</div>
-			| translate}}</a>
+					
-	</mat-list-item>
+					<span mat-line class="secondary-text">{{ inappNotification.createdAt | date : 'short'}}</span>
-	<mat-list-item class = "mat-list-item-content" *ngIf="authService.hasPermission(authService.permissionEnum.ViewMineInAppNotificationPage)">
+					<mat-divider inset *ngIf="!last"></mat-divider>
-		<a (click)="readAllNotifications()">{{'NAV-BAR.READ-ALL-INAPP-NOTIFICATIONS'
+				</div>
-			| translate}}</a>
+			</a>
-	</mat-list-item>
+			<mat-list-item *ngIf="authService.hasPermission(authService.permissionEnum.ViewMineInAppNotificationPage)">
-</mat-nav-list>
+				<a (click)="goToNotifications()">{{'NAV-BAR.INAPP-NOTIFICATIONS'
+					| translate}}</a>
+			</mat-list-item>
+			<mat-list-item *ngIf="authService.hasPermission(authService.permissionEnum.ViewMineInAppNotificationPage)">
+				<a (click)="readAllNotifications()">{{'NAV-BAR.READ-ALL-INAPP-NOTIFICATIONS'
+					| translate}}</a>
+			</mat-list-item>
+		</mat-nav-list>
+		</div>
+	</div>
+</div>

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 {
+	// .mat-list-item-content {
-		text-align: center
+	// 	//text-align: center
-	  }
+	//   }
+	.notification-menu-item {
+		margin-left: 2.0rem;
+	}
 }

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,

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();