MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

styling changes 

*mine-notification-listing dialog
This commit is contained in:
Sofia Papacharalampous 2024-03-20 13:06:39 +02:00
parent b66932b413
commit 024680c0e6
6 changed files with 57 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/core/formatting.module.ts
View File

@ -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,

10
dmp-frontend/src/app/core/pipes/sumarize-text.pipe.ts Normal file
View File

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

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

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

15
dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.scss
View File

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

4
dmp-frontend/src/app/ui/inapp-notification/mine-inapp-notification.module.ts
View File

@ -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,

1
dmp-frontend/src/app/ui/navbar/navbar.component.ts
View File

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