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

View File

@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
import { DateFormatPipe } from './pipes/date-format.pipe'; import { DateFormatPipe } from './pipes/date-format.pipe';
import { DateTimeFormatPipe } from './pipes/date-time-format.pipe'; import { DateTimeFormatPipe } from './pipes/date-time-format.pipe';
import { NgForLimitPipe } from './pipes/ng-for-limit.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 { TimezoneInfoDisplayPipe } from './pipes/timezone-info-display.pipe';
import { EnumUtils } from './services/utilities/enum-utils.service'; import { EnumUtils } from './services/utilities/enum-utils.service';
import { JsonParserPipe } from './pipes/json-parser.pipe'; import { JsonParserPipe } from './pipes/json-parser.pipe';
@ -20,6 +21,7 @@ import { PipeService } from '@common/formatting/pipe.service';
@NgModule({ @NgModule({
declarations: [ declarations: [
NgForLimitPipe, NgForLimitPipe,
SumarizeTextPipe,
TimezoneInfoDisplayPipe, TimezoneInfoDisplayPipe,
DateFormatPipe, DateFormatPipe,
DateTimeFormatPipe, DateTimeFormatPipe,
@ -30,6 +32,7 @@ import { PipeService } from '@common/formatting/pipe.service';
], ],
exports: [ exports: [
NgForLimitPipe, NgForLimitPipe,
SumarizeTextPipe,
TimezoneInfoDisplayPipe, TimezoneInfoDisplayPipe,
DateFormatPipe, DateFormatPipe,
DateTimeFormatPipe, DateTimeFormatPipe,
@ -43,6 +46,7 @@ import { PipeService } from '@common/formatting/pipe.service';
DatePipe, DatePipe,
PipeService, PipeService,
NgForLimitPipe, NgForLimitPipe,
SumarizeTextPipe,
TimezoneInfoDisplayPipe, TimezoneInfoDisplayPipe,
DateFormatPipe, DateFormatPipe,
DateTimeFormatPipe, DateTimeFormatPipe,

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

View File

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

View File

@ -5,7 +5,11 @@
border-left: 0.625rem solid transparent; border-left: 0.625rem solid transparent;
border-right: 0.625rem solid transparent; border-right: 0.625rem solid transparent;
position: fixed; 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 { .inapp-notification-listing-dialog {
@ -19,7 +23,10 @@
color: rgba(0, 0, 0, 0.54); 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;
} }
} }

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 { MineInAppNotificationListingFiltersComponent } from './listing/filters/mine-inapp-notification-listing-filters.component';
import { MineInAppNotificationListingDialogComponent } from './listing-dialog/mine-inapp-notification-listing-dialog.component'; import { MineInAppNotificationListingDialogComponent } from './listing-dialog/mine-inapp-notification-listing-dialog.component';
import { CommonFormattingModule } from '@common/formatting/common-formatting.module'; import { CommonFormattingModule } from '@common/formatting/common-formatting.module';
import { FormattingModule } from '@app/core/formatting.module';
@NgModule({ @NgModule({
imports: [ imports: [
@ -21,7 +22,8 @@ import { CommonFormattingModule } from '@common/formatting/common-formatting.mod
TextFilterModule, TextFilterModule,
MineInAppNotificationRoutingModule, MineInAppNotificationRoutingModule,
UserSettingsModule, UserSettingsModule,
CommonFormattingModule CommonFormattingModule,
FormattingModule
], ],
declarations: [ declarations: [
MineInAppNotificationListingComponent, MineInAppNotificationListingComponent,

View File

@ -309,6 +309,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
closeOnNavigation: true, closeOnNavigation: true,
disableClose: false, disableClose: false,
position: { top: '71px', right: '4.8em' }, position: { top: '71px', right: '4.8em' },
width: "27.0rem"
}); });
this.inAppNotificationDialog.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { this.inAppNotificationDialog.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
this.countUnreadInappNotifications(); this.countUnreadInappNotifications();