Skip to content
Snippets Groups Projects
Commit 23a4d86d authored by CANÉVET Cindy's avatar CANÉVET Cindy
Browse files

refactor: :lipstick: Fixes DSFR on notifications

parent 5441b853
Branches main
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/views/protected/notification/notification.component.ts
+ 27
− 40
View file @ 23a4d86d
...@@ -21,45 +21,36 @@ import {Notification} from "./notification"; ...@@ -21,45 +21,36 @@ import {Notification} from "./notification";
<h2 class="fr-mb-2w"> <h2 class="fr-mb-2w">
Mes événements Mes événements
</h2> </h2>
<div class="fr-grid-row fr-mb-1w"> <a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" routerLink="/accueil">
<div class="fr-mb-1w fr-col-10 fr-col-offset-1"> Revenir à l'accueil
<button type="button" class="fr-btn float-right" (click)="markAllAsRead(notif)"> </a>
<div class="fr-container--fluid fr-mb-12v">
<div class="fr-grid-row fr-grid-row--right fr-mb-12v">
<button type="button" class="fr-btn" (click)="markAllAsRead(notif)">
Tout ignorer Tout ignorer
</button> </button>
</div> </div>
@for (value of notif; track value.id) { @for (value of notif; track value.id) {
<div class="fr-col-10 fr-col-offset-1"> <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--right fr-mt-3v">
<div class="fr-card fr-card--no-arrow fr-enlarge-link fr-card--sm" (click)="markAsRead(value)"> <div class="fr-col-12 fr-col-md-2">
<div class="fr-card__body"> <p class="fr-badge"
<div class="fr-card__content"> [class.fr-badge--green-emeraude]="value.visible"
<div class="fr-card__desc"> [class.fr-badge--new]="value.visible"
<p> [class.fr-badge--beige-gris-galet]="!value.visible"
{{ value.message }} >
</p> {{ value.createdAt | timeAgo }}
</div> </p>
<div class="fr-card__end">
<button>
Marqué comme lu
</button>
</div>
</div>
</div>
<div class="fr-card__header fr-card--sm">
<ul class="fr-badges-group">
<li>
<p class="fr-badge"
[class.fr-badge--green-emeraude]="value.visible"
[class.fr-badge--new]="value.visible"
[class.fr-badge--beige-gris-galet]="!value.visible"
>
{{ value.createdAt | timeAgo }}
</p>
</li>
</ul>
</div>
</div>
</div> </div>
<div class="fr-col-8 fr-col-md-7">
{{ value.message }}
</div>
<div class="fr-col-4 fr-col-md-3">
<button type="button" class="fr-btn fr-btn--tertiary misis-btn--end" (click)="markAsRead(value)">
Marquer comme lu
</button>
</div>
</div>
} }
</div> </div>
} @else { } @else {
...@@ -77,11 +68,7 @@ import {Notification} from "./notification"; ...@@ -77,11 +68,7 @@ import {Notification} from "./notification";
} }
</div> </div>
`, `,
styles: ` styles: ``
.float-right {
float: right;
}
`
}) })
export default class NotificationComponent { export default class NotificationComponent {
...@@ -89,8 +76,8 @@ export default class NotificationComponent { ...@@ -89,8 +76,8 @@ export default class NotificationComponent {
notifications = this.notificationService.notifications$; notifications = this.notificationService.notifications$;
markAsRead = (notification: Notification) => this.notificationService.markAsRead(notification).subscribe() markAsRead = (notification: Notification) => this.notificationService.markAsRead(notification).subscribe();
markAllAsRead = (notifications: Array<Notification>) => this.notificationService.markAllAsRead(notifications).subscribe() markAllAsRead = (notifications: Array<Notification>) => this.notificationService.markAllAsRead(notifications).subscribe();
} }
src/styles.scss
+ 6
− 0
View file @ 23a4d86d
...@@ -48,4 +48,10 @@ label:has(+ input[required="true"], + select[required="true"])::after { ...@@ -48,4 +48,10 @@ label:has(+ input[required="true"], + select[required="true"])::after {
.misis-breadcrumb { .misis-breadcrumb {
background-color: var(--background-alt-blue-france); background-color: var(--background-alt-blue-france);
}
.misis-btn {
&--end {
float: right;
}
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment