import HelpIcon from '@carbon/icons/es/help/20';
import NotificationIcon from '@carbon/icons/es/notification/20';
import NotificationOffIcon from '@carbon/icons/es/notification--off/20';
+import NotificationNewIcon from '@carbon/icons/es/notification--new/20';
import LaunchIcon from '@carbon/icons/es/launch/16';
import DashboardIcon from '@carbon/icons/es/template/20';
import ClusterIcon from '@carbon/icons/es/web-services--cluster/20';
import InformationFilledIcon from '@carbon/icons/es/information--filled/16';
import WarningFilledIcon from '@carbon/icons/es/warning--filled/16';
import NotificationFilledIcon from '@carbon/icons/es/notification--filled/16';
+
import CloseIcon from '@carbon/icons/es/close/16';
import { NotificationPanelComponent } from './notification-panel/notification-panel/notification-panel.component';
import { NotificationHeaderComponent } from './notification-panel/notification-header/notification-header.component';
InformationFilledIcon,
WarningFilledIcon,
NotificationFilledIcon,
+ NotificationNewIcon,
CloseIcon
]);
}
<div class="cd-navbar-main">
- <!-- ************************ -->
- <!-- NOTIFICATIONS -->
- <!-- ************************ -->
- <cd-notifications-sidebar></cd-notifications-sidebar>
+ <cd-notification-panel *ngIf="isNotifPanelOpen"></cd-notification-panel>
<!-- ************************ -->
<!-- HEADER -->
<!-- ************************ -->
</cds-header-navigation>
<cds-header-action
description=""
- (click)="toggleSidebar()">
+ [(active)]="isNotifPanelOpen">
<cd-notifications></cd-notifications>
</cds-header-action>
<div class="cds--btn cds--btn--icon-only cds--header__action">
clusterTokenStatus: object = {};
summaryData: any;
- rightSidebarOpen = false; // rightSidebar only opens when width is less than 768px
+ isNotifPanelOpen = false;
showMenuSidebar = true;
simplebar = {
this.displayedSubMenu[menu] = !this.displayedSubMenu[menu];
}
- toggleRightSidebar() {
- this.rightSidebarOpen = !this.rightSidebarOpen;
+ toggleSidebar() {
+ this.isNotifPanelOpen = !this.isNotifPanelOpen;
}
onClusterSelection(value: object) {
}
);
}
- toggleSidebar() {
- this.notificationService.toggleSidebar(true, true);
- }
+
trackByFn(item: any) {
return item;
}
-<div
+<div
cdsGrid
[useCssGrid]="true"
[fullWidth]="true"
cdsRow>
<svg
cdsIcon="notification"
- size="48"
+ size="20"
class="empty-icon"></svg>
<p *ngIf="searchText">No notifications match your search</p>
<p *ngIf="!searchText">No notifications available</p>
<!-- Right Panel - Notifications Details -->
<div cdsCol
[columnNumbers]="{sm: 12, md: 12, lg: 9}">
- <div
+ <div
cdsGrid
[fullWidth]="true"
*ngIf="selectedNotification"
-import { Component, OnInit, OnDestroy, AfterViewInit, ChangeDetectorRef, AfterViewChecked } from '@angular/core';
+import {
+ Component,
+ OnInit,
+ OnDestroy,
+ AfterViewInit,
+ ChangeDetectorRef,
+ AfterViewChecked
+} from '@angular/core';
import { Subscription } from 'rxjs';
import { NotificationService } from '~/app/shared/services/notification.service';
import { CdNotification } from '~/app/shared/models/cd-notification';
templateUrl: './notifications-page.component.html',
styleUrls: ['./notifications-page.component.scss']
})
-export class NotificationsPageComponent implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked {
+export class NotificationsPageComponent
+ implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked {
notifications: CdNotification[] = [];
selectedNotification: CdNotification | null = null;
searchText: string = '';
-<a i18n-title
- title="Tasks and Notifications"
- [ngClass]="{ 'running': hasRunningTasks }"
- (click)="togglePanel($event)">
- <div class="notification-icon-wrapper">
- <cd-icon type="notification"
- *ngIf="!isMuted"
- size="20">
- </cd-icon>
- <svg *ngIf="isMuted"
- cdsIcon="notification--off"
- size="20"
- title="Notifications muted"></svg>
- <span class="notification-count"
- *ngIf="notificationCount > 0">
- {{ notificationCount }}
- </span>
- </div>
- <span class="d-md-none"
- i18n>Tasks and Notifications</span>
-</a>
-<cd-notification-panel *ngIf="isPanelOpen && useNewPanel"></cd-notification-panel>
-<cd-notifications-sidebar *ngIf="isPanelOpen && !useNewPanel"></cd-notifications-sidebar>
+@if(isMuted) {
+ <cd-icon type="notificationOff"
+ [size]="iconSize">
+</cd-icon>
+}
+@else if(!isMuted && hasRunningTasks) {
+ <cd-icon type="notificationNew"
+ [size]="iconSize">
+ </cd-icon>
+}
+@else {
+ <cd-icon type="notification"
+ [size]="iconSize">
+ </cd-icon>
+}
-@use './src/styles/vendor/variables' as vv;
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type';
-
-.running i {
- color: vv.$primary;
-}
-
-.running:hover i {
- color: vv.$white;
-}
-
-a {
- .dot {
- background-color: vv.$primary-500;
- border: 2px solid vv.$secondary;
- border-radius: 50%;
- height: 11px;
- position: absolute;
- right: 17px;
- top: 10px;
- width: 10px;
- }
-
- &:hover .dot {
- background-color: vv.$white;
- border-color: vv.$primary-500;
- }
-}
-
-.notification-icon-wrapper {
- position: relative;
- display: inline-flex;
- padding: spacing.$spacing-04;
- cursor: pointer;
- border-radius: spacing.$spacing-01;
- transition: background-color 0.2s ease;
-}
-
-.notification-count {
- position: absolute;
- top: spacing.$spacing-02;
- right: spacing.$spacing-02;
- min-width: spacing.$spacing-04;
- height: spacing.$spacing-04;
- padding: 0 spacing.$spacing-01;
- border-radius: spacing.$spacing-02;
- background-color: $support-error;
- color: $text-on-color;
- font-size: spacing.$spacing-04;
- line-height: spacing.$spacing-04;
- text-align: center;
- font-weight: 500;
-}
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
-import { Icons } from '~/app/shared/enum/icons.enum';
+import { ICON_TYPE, IconSize } from '~/app/shared/enum/icons.enum';
import { CdNotification } from '~/app/shared/models/cd-notification';
import { NotificationService } from '~/app/shared/services/notification.service';
import { SummaryService } from '~/app/shared/services/summary.service';
standalone: false
})
export class NotificationsComponent implements OnInit, OnDestroy {
- icons = Icons;
+ @Input() isPanelOpen: boolean = false;
+ icons = ICON_TYPE;
+ iconSize = IconSize.size20;
hasRunningTasks = false;
hasNotifications = false;
- isPanelOpen = false;
- useNewPanel = true;
notificationCount = 0;
isMuted = false;
private subs = new Subscription();
})
);
- this.subs.add(
- this.notificationService.panelState$.subscribe((state) => {
- this.isPanelOpen = state.isOpen;
- this.useNewPanel = state.useNewPanel;
- })
- );
this.subs.add(
this.notificationService.muteState$.subscribe((isMuted) => {
this.isMuted = isMuted;
);
}
- togglePanel(event: Event) {
- event.preventDefault();
- event.stopPropagation();
- this.notificationService.toggleSidebar(!this.isPanelOpen, this.useNewPanel);
- }
-
ngOnDestroy(): void {
this.subs.unsubscribe();
}
.info-icon {
fill: theme.$support-info !important;
}
+
+.notificationNew-icon circle {
+ fill: theme.$support-error !important;
+}
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { ICON_TYPE, Icons, IconSize } from '../../enum/icons.enum';
@Component({
selector: 'cd-icon',
templateUrl: './icon.component.html',
styleUrl: './icon.component.scss',
- standalone: false
+ standalone: false,
+ encapsulation: ViewEncapsulation.None
})
export class IconComponent implements OnInit {
@Input() type!: keyof typeof ICON_TYPE;
spin = 'fa fa-spin', // To get any icon to rotate
inverse = 'fa fa-inverse', // To get an alternative icon color
notification = 'notification',
- error = 'error--filled'
+ error = 'error--filled',
+ notificationOff = 'notification--off',
+ notificationNew = 'notification--new'
}
export enum IconSize {
error: 'error--filled',
infoCircle: 'info-circle',
notification: 'notification',
+ notificationOff: 'notification--off',
+ notificationNew: 'notification--new',
success: 'success',
warning: 'warning'
} as const;
projects / ceph.git / commitdiff