Skip to content

Commit 3132258

Browse files
afreen23afreen23
authored
Merge pull request ceph#64587 from SundownRises/NotificationArea-component
mgr/dashboard: Carbonised Notification area component Reviewed-by: Afreen Misbah <[email protected]>
2 parents aea1dd8 + 088e746 commit 3132258

File tree

14 files changed

+616
-32
lines changed

14 files changed

+616
-32
lines changed

‎src/pybind/mgr/dashboard/frontend/src/app/core/core.module.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ import { RouterModule } from '@angular/router';
44

55
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
66
import { BlockUIModule } from 'ng-block-ui';
7+
import {
8+
PlaceholderModule,
9+
IconModule,
10+
ThemeModule,
11+
ButtonModule
12+
} from 'carbon-components-angular';
713

814
import { ContextComponent } from '~/app/core/context/context.component';
915
import { SharedModule } from '~/app/shared/shared.module';
@@ -12,7 +18,6 @@ import { BlankLayoutComponent } from './layouts/blank-layout/blank-layout.compon
1218
import { LoginLayoutComponent } from './layouts/login-layout/login-layout.component';
1319
import { WorkbenchLayoutComponent } from './layouts/workbench-layout/workbench-layout.component';
1420
import { NavigationModule } from './navigation/navigation.module';
15-
import { PlaceholderModule } from 'carbon-components-angular';
1621

1722
@NgModule({
1823
imports: [
@@ -22,7 +27,10 @@ import { PlaceholderModule } from 'carbon-components-angular';
2227
NgbDropdownModule,
2328
RouterModule,
2429
SharedModule,
25-
PlaceholderModule
30+
PlaceholderModule,
31+
IconModule,
32+
ThemeModule,
33+
ButtonModule
2634
],
2735
exports: [NavigationModule],
2836
declarations: [

‎src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import {
1414
BreadcrumbModule,
1515
ModalModule,
1616
ToggleModule,
17-
ButtonModule
17+
ButtonModule,
18+
PlaceholderModule
1819
} from 'carbon-components-angular';
1920

2021
import { AppRoutingModule } from '~/app/app-routing.module';
@@ -30,6 +31,7 @@ import { NavigationComponent } from './navigation/navigation.component';
3031
import { NotificationsComponent } from './notifications/notifications.component';
3132
import { NotificationPanelComponent } from './notification-panel/notification-panel.component';
3233
import { NotificationHeaderComponent } from './notification-panel/header/notification-header.component';
34+
import { NotificationAreaComponent } from './notification-panel/notification-area/notification-area.component';
3335

3436
// Icons
3537
import UserFilledIcon from '@carbon/icons/es/user--filled/20';
@@ -67,7 +69,8 @@ import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
6769
BreadcrumbModule,
6870
ModalModule,
6971
ToggleModule,
70-
ButtonModule
72+
ButtonModule,
73+
PlaceholderModule
7174
],
7275
declarations: [
7376
AboutComponent,
@@ -77,13 +80,14 @@ import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
7780
NotificationsComponent,
7881
NotificationPanelComponent,
7982
NotificationHeaderComponent,
83+
NotificationAreaComponent,
8084
DashboardHelpComponent,
8185
AdministrationComponent,
8286
IdentityComponent
8387
],
88+
providers: [ModalCdsService],
8489
exports: [NavigationComponent, BreadcrumbsComponent],
85-
schemas: [CUSTOM_ELEMENTS_SCHEMA],
86-
providers: [ModalCdsService]
90+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
8791
})
8892
export class NavigationModule {
8993
constructor(private iconService: IconService) {

‎src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/header/notification-header.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
padding: spacing.$spacing-04;
99
border-bottom: 1px solid theme.$border-subtle-01;
1010
background-color: theme.$layer-01;
11+
flex-shrink: 0;
1112

1213
&__top {
1314
display: flex;

‎src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<ng-template #notificationItemTemplate
2+
let-notification="notification"
3+
let-last="last">
4+
<div class="notification-wrapper">
5+
<div class="notification-item">
6+
<cd-icon id="notification-icon"
7+
[type]="notificationIconMap[notification.type] || notificationIconMap['default']">
8+
</cd-icon>
9+
<div class="notification-content">
10+
<div class="notification-timestamp">{{ notification.timestamp | relativeDate }}</div>
11+
<div class="notification-title">{{ notification.title }}</div>
12+
<div class="notification-message"
13+
[innerHTML]="notification.message | sanitizeHtml"></div>
14+
</div>
15+
<button cdsButton="ghost"
16+
size="sm"
17+
class="notification-close"
18+
(click)="removeNotification(notification, $event)">
19+
<cd-icon type="destroy"></cd-icon>
20+
</button>
21+
</div>
22+
@if (!last) {
23+
<div class="notification-divider"></div>
24+
}
25+
</div>
26+
</ng-template>
27+
28+
@if (todayNotifications.length > 0) {
29+
<div class="notification-section-heading"
30+
i18n>Today</div>
31+
@for (notification of todayNotifications; track notification.timestamp; let last = $last) {
32+
<ng-container *ngTemplateOutlet="notificationItemTemplate; context: { notification: notification, last: last }"></ng-container>
33+
}
34+
}
35+
36+
@if (previousNotifications.length > 0) {
37+
<div class="notification-section-heading"
38+
i18n>Previous</div>
39+
@for (notification of previousNotifications; track notification.timestamp; let last = $last) {
40+
<ng-container *ngTemplateOutlet="notificationItemTemplate; context: { notification: notification, last: last }"></ng-container>
41+
}
42+
}
43+
44+
@if (todayNotifications.length === 0 && previousNotifications.length === 0) {
45+
<div class="notification-empty">
46+
<div i18n>No notifications</div>
47+
</div>
48+
}

‎src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
@use '@carbon/styles/scss/theme' as *;
2+
@use '@carbon/styles/scss/spacing' as *;
3+
@use '@carbon/type';
4+
5+
.notification-section-heading {
6+
@include type.type-style('heading-compact-01');
7+
8+
margin: 0;
9+
color: $text-primary;
10+
padding: $spacing-05 $spacing-05 $spacing-03;
11+
background-color: $layer-01;
12+
position: sticky;
13+
top: 0;
14+
z-index: 2;
15+
display: block;
16+
}
17+
18+
.notification-timestamp {
19+
@include type.type-style('label-01');
20+
21+
color: $text-secondary;
22+
line-height: 1;
23+
margin-top: 0;
24+
display: block;
25+
}
26+
27+
.notification-title {
28+
@include type.type-style('body-short-01');
29+
30+
margin: 0;
31+
color: $text-primary;
32+
line-height: 1.25;
33+
display: block;
34+
}
35+
36+
.notification-message {
37+
@include type.type-style('body-short-01');
38+
39+
color: $text-helper;
40+
margin: 0;
41+
line-height: 1.4;
42+
margin-top: -$spacing-01;
43+
display: block;
44+
}
45+
46+
.notification-empty {
47+
margin: 0;
48+
padding: $spacing-05;
49+
color: $text-secondary;
50+
text-align: center;
51+
52+
@include type.type-style('body-short-01');
53+
}
54+
55+
.notification-wrapper {
56+
padding: 0 $spacing-05;
57+
position: relative;
58+
z-index: 1;
59+
background-color: $layer-01;
60+
61+
&:last-child {
62+
padding-bottom: $spacing-05;
63+
}
64+
}
65+
66+
.notification-item {
67+
display: flex;
68+
gap: $spacing-05;
69+
padding: $spacing-03 0;
70+
align-items: flex-start;
71+
position: relative;
72+
73+
.notification-close {
74+
position: absolute;
75+
right: 0;
76+
top: $spacing-03;
77+
padding: $spacing-02;
78+
min-height: 0;
79+
color: $text-helper;
80+
opacity: 0;
81+
transition: opacity 0.2s ease-in-out;
82+
83+
&:hover {
84+
background-color: $layer-hover;
85+
}
86+
}
87+
88+
&:hover {
89+
.notification-close {
90+
opacity: 1;
91+
}
92+
}
93+
}
94+
95+
.notification-content {
96+
flex: 1;
97+
min-width: 0;
98+
display: flex;
99+
flex-direction: column;
100+
gap: $spacing-02;
101+
padding-right: $spacing-06;
102+
}
103+
104+
.notification-divider {
105+
border-bottom: 1px solid $border-subtle-01;
106+
}
107+
108+
:host {
109+
display: block;
110+
height: 100%;
111+
overflow-y: auto;
112+
background-color: $layer-01;
113+
}

0 commit comments

Comments
 (0)