fix(notifications): reset position (#1459)

* fix(notifications): reset position

* refactor

* review fix

* fix badge

src/app/core/services/sidebar-width.service.ts

@@ -10,14 +10,18 @@ import { layoutStore, State, UserTagsSelectors } from '../../root-store';
  */
 @Injectable()
 export class SidebarWidthService {
-  public readonly width: Observable<number>;
+  public readonly width$: Observable<number>;
   private widthBehaviorSubject = new BehaviorSubject(0);
 
   constructor(private store: Store<State>) {
-    this.width = this.widthBehaviorSubject.asObservable();
+    this.width$ = this.widthBehaviorSubject.asObservable();
     this.initializeSidebarWidthFromTag();
   }
 
+  public getWidth(): number {
+    return this.widthBehaviorSubject.value;
+  }
+
   public setWidth(value: number) {
     this.widthBehaviorSubject.next(value);
   }

src/app/shared/components/fab/fab.component.ts

@@ -13,7 +13,7 @@ export class FabComponent {
   public clicked = new EventEmitter<Event>();
 
   constructor(private sidebarWidthService: SidebarWidthService) {
-    this.sidebarWidthService.width.subscribe(width => (this.rightIndent = width));
+    this.sidebarWidthService.width$.subscribe(width => (this.rightIndent = width));
   }
 
   public onClick(e: Event): void {

src/app/shared/components/notification-box/notification-box.component.html

@@ -6,8 +6,13 @@
   (popoverOpened)="onOpen()"
   (popoverClosed)="onClose()"
 >
-  <div [csBadge]="notificationCount$ | async">
-    <mat-icon class="mdi-bell"></mat-icon>
+  <div>
+    <mat-icon
+      class="mdi-bell"
+      [matBadge]="notificationCount$ | async"
+      [matBadgeHidden]="hideNotifications$ | async"
+      matBadgeColor="accent"
+    ></mat-icon>
   </div>
 </button>
 

src/app/shared/components/notification-box/notification-box.component.ts

@@ -1,42 +1,30 @@
-import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
-import { combineLatest, Observable, Subscription } from 'rxjs';
+import { Component, OnDestroy } from '@angular/core';
+import { combineLatest } from 'rxjs';
 import { delay, filter, map, tap } from 'rxjs/operators';
-import { SidebarWidthService } from '../../../core/services';
 import { JobsNotificationService } from '../../services/jobs-notification.service';
 
 @Component({
   selector: 'cs-notification-box',
   templateUrl: 'notification-box.component.html',
   styleUrls: ['notification-box.component.scss'],
 })
-export class NotificationBoxComponent implements OnInit, OnDestroy {
-  @HostBinding('style.right.px')
-  public rightIndent;
-  public notificationCount$: Observable<number>;
+export class NotificationBoxComponent implements OnDestroy {
+  readonly notificationCount$ = combineLatest(
+    this.jobsNotificationService.unseenCompletedJobsCount$,
+    this.jobsNotificationService.pendingJobsCount$,
+  ).pipe(map(([unseenCount, pendingCount]) => unseenCount + pendingCount));
+  readonly hideNotifications$ = this.notificationCount$.pipe(map(count => count === 0));
+
   private isOpen = false;
-  private autoResetCompletedNotification: Subscription;
-
-  constructor(
-    public jobsNotificationService: JobsNotificationService,
-    private sidebarWidthService: SidebarWidthService,
-  ) {}
-
-  public ngOnInit(): void {
-    this.notificationCount$ = combineLatest(
-      this.jobsNotificationService.unseenCompletedJobsCount$,
-      this.jobsNotificationService.pendingJobsCount$,
-    ).pipe(map(([unseenCount, pendingCount]) => unseenCount + pendingCount));
-
-    this.autoResetCompletedNotification = this.jobsNotificationService.unseenCompletedJobsCount$
-      .pipe(
-        filter(count => count > 0 && this.isOpen),
-        delay(1),
-        tap(() => this.resetCompletedNotificationCount()),
-      )
-      .subscribe();
-
-    this.sidebarWidthService.width.subscribe(width => (this.rightIndent = width));
-  }
+  private autoResetCompletedNotification = this.jobsNotificationService.unseenCompletedJobsCount$
+    .pipe(
+      filter(count => count > 0 && this.isOpen),
+      delay(1),
+      tap(() => this.resetCompletedNotificationCount()),
+    )
+    .subscribe();
+
+  constructor(public jobsNotificationService: JobsNotificationService) {}
 
   public ngOnDestroy() {
     this.autoResetCompletedNotification.unsubscribe();

src/app/shared/components/top-bar/top-bar.component.html

@@ -4,6 +4,7 @@
   </div>
   <cs-notification-box
     class="top-bar-notifications"
+    [style.right.px]="rightIndent"
     [class.sidebar-open]="sidebarOpen"
   ></cs-notification-box>
 </div>

src/app/shared/components/top-bar/top-bar.component.ts

@@ -2,6 +2,7 @@ import { Component, Optional } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ListService } from '../list/list.service';
+import { SidebarWidthService } from '../../../core/services';
 
 @Component({
   selector: 'cs-top-bar',
@@ -11,13 +12,23 @@ import { ListService } from '../list/list.service';
 export class TopBarComponent {
   constructor(
     private activatedRoute: ActivatedRoute,
+    private sidebarWidthService: SidebarWidthService,
     @Optional() private listService: ListService,
   ) {}
 
   public get sidebarOpen(): boolean {
     return this.listService ? this.listService.hasSelected() && this.showSidebarForSG() : false;
   }
 
+  public get rightIndent(): number {
+    if (!this.sidebarOpen) {
+      return 0;
+    }
+
+    return this.sidebarWidthService.getWidth();
+  }
+
+  // todo: refactor
   private showSidebarForSG(): boolean {
     if (this.activatedRoute.snapshot.firstChild.firstChild) {
       return this.activatedRoute.snapshot.firstChild.firstChild.routeConfig.path !== 'rules';

src/app/shared/directives/index.ts

@@ -1,4 +1,3 @@
-export * from './badge/badge.directive';
 export * from './forbidden-values.directive';
 export * from './input-type-number.directive';
 export * from './integer-value.directive';

src/app/shared/directives/sidebar-tab-nav.directive.ts

@@ -17,7 +17,7 @@ export class SidebarTabNavDirective implements OnInit {
   constructor(public sidebarContainerService: SidebarWidthService) {}
 
   public ngOnInit() {
-    this.sidebarContainerService.width
+    this.sidebarContainerService.width$
       .pipe(
         debounceTime(50),
         filter(Boolean),

src/app/shared/shared.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatBadgeModule } from '@angular/material';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
@@ -9,7 +10,6 @@ import { DragulaModule } from 'ng2-dragula';
 import { ClipboardModule } from 'ngx-clipboard';
 import {
   SidebarTabNavDirective,
-  BadgeDirective,
   ForbiddenValuesDirective,
   InputTypeNumberDirective,
   IntegerValidatorDirective,
@@ -167,6 +167,7 @@ const SHARED_COMPONENTS = [ClipboardButtonComponent];
     PopoverModule,
     AngularDraggableModule,
     TranslateModule,
+    MatBadgeModule,
     StoreModule.forFeature('zones', zoneReducers),
     StoreModule.forFeature('disk-offerings', diskOfferingReducers),
     StoreModule.forFeature('affinity-groups', affinityGroupReducers),
@@ -177,7 +178,6 @@ const SHARED_COMPONENTS = [ClipboardButtonComponent];
     ReactiveFormsModule,
     TranslateModule,
     AccountActionsComponent,
-    BadgeDirective,
     CharacterCountComponent,
     ColorPickerComponent,
     CreateUpdateDeleteDialogComponent,
@@ -255,7 +255,6 @@ const SHARED_COMPONENTS = [ClipboardButtonComponent];
   ],
   declarations: [
     AccountActionsComponent,
-    BadgeDirective,
     CalendarComponent,
     CalendarMonthComponent,
     CalendarYearComponent,

src/style/_app-theme.scss

@@ -3,14 +3,12 @@
 @import '../app/core/nav-menu/nav-menu-theme';
 @import '../app/settings/components/api-settings/api-settings-theme';
 @import '../app/shared/components/date-picker/date-picker-theme';
-@import '../app/shared/directives/badge/badge-theme';
 @import '../app/ssh-keys/ssh-key-creation/ssh-key-creation-dialog-theme';
 @import '../app/vm/vm-creation/template/vm-template-theme';
 
 @mixin cs-ui-theme($theme) {
   @include nav-menu-theme($theme);
   @include api-info-theme($theme);
-  @include badge-theme($theme);
   @include date-picker-theme($theme);
   @include ssh-key-creation-dialog-theme($theme);
   @include vm-template-theme($theme);

src/style/app.scss

@@ -7,7 +7,6 @@
 @import '../app/shared/styles/mat-input';
 @import '../app/shared/styles/entity-cards';
 @import '../app/shared/styles/entity-list-item';
-@import '../app/shared/directives/badge/badge';
 @import 'typography';
 @import 'app-theme';