You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2022/07/05 19:04:22 UTC
[incubator-streampipes] 02/02: [STREAMPIPES-557] Move notifications from iconbar to toolbar
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 5b3d970f940470a4c53ceba5ef6e0b6b9b887417
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Jul 5 21:04:11 2022 +0200
[STREAMPIPES-557] Move notifications from iconbar to toolbar
---
.../core/components/iconbar/iconbar.component.html | 12 ----------
.../core/components/iconbar/iconbar.component.ts | 16 +------------
.../core/components/toolbar/toolbar.component.html | 16 +++++++++++++
.../core/components/toolbar/toolbar.component.ts | 26 +++++++++++++++++++---
4 files changed, 40 insertions(+), 30 deletions(-)
diff --git a/ui/src/app/core/components/iconbar/iconbar.component.html b/ui/src/app/core/components/iconbar/iconbar.component.html
index a04b7845e..8e9b6a2fe 100644
--- a/ui/src/app/core/components/iconbar/iconbar.component.html
+++ b/ui/src/app/core/components/iconbar/iconbar.component.html
@@ -28,19 +28,7 @@
</button>
</div>
</div>
- <div [ngClass]="'notifications' === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'"
- style="padding-top:5px;padding-bottom:5px;" *ngIf="notificationsVisible">
- <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar iconbar-size"
- (click)="go('notifications')"
- matTooltip="Notifications" matTooltipPosition="right">
- <mat-icon [matBadge]="unreadNotificationCount"
- [matBadgeHidden]="unreadNotificationCount == 0"
- [ngClass]="'notifications' === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'"
- data-cy="navigation-icon">chat
- </mat-icon>
- </button>
- </div>
<mat-divider style="border-top-color:var(--color-navigation-text);"></mat-divider>
<div *ngFor="let item of admin" >
<div [ngClass]="item.link === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'"
diff --git a/ui/src/app/core/components/iconbar/iconbar.component.ts b/ui/src/app/core/components/iconbar/iconbar.component.ts
index a670fda90..9d7aeeaf9 100644
--- a/ui/src/app/core/components/iconbar/iconbar.component.ts
+++ b/ui/src/app/core/components/iconbar/iconbar.component.ts
@@ -31,10 +31,8 @@ import { AppConstants } from '../../../services/app.constants';
templateUrl: './iconbar.component.html',
styleUrls: ['./iconbar.component.scss']
})
-export class IconbarComponent extends BaseNavigationComponent implements OnInit, OnDestroy {
+export class IconbarComponent extends BaseNavigationComponent implements OnInit {
- unreadNotificationCount = 0;
- unreadNotificationsSubscription: Subscription;
constructor(router: Router,
authService: AuthService,
@@ -46,18 +44,6 @@ export class IconbarComponent extends BaseNavigationComponent implements OnInit,
ngOnInit(): void {
super.onInit();
- this.unreadNotificationsSubscription = timer(0, 10000).pipe(
- exhaustMap(() => this.restApi.getUnreadNotificationsCount()))
- .subscribe(response => {
- this.notificationCountService.unreadNotificationCount$.next(response.count);
- });
- this.notificationCountService.unreadNotificationCount$.subscribe(count => {
- this.unreadNotificationCount = count;
- });
- }
-
- ngOnDestroy() {
- this.unreadNotificationsSubscription.unsubscribe();
}
}
diff --git a/ui/src/app/core/components/toolbar/toolbar.component.html b/ui/src/app/core/components/toolbar/toolbar.component.html
index 0d1034707..871dcf29b 100644
--- a/ui/src/app/core/components/toolbar/toolbar.component.html
+++ b/ui/src/app/core/components/toolbar/toolbar.component.html
@@ -34,6 +34,22 @@
<!-- <div>-->
<!-- <mat-slide-toggle color="accent" [formControl]="appearanceControl">Dark Mode</mat-slide-toggle>-->
<!-- </div>-->
+ <div [ngClass]="'notifications' === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'"
+ *ngIf="notificationsVisible" class="h-100">
+ <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar iconbar-size"
+ (click)="go('notifications')"
+ fxLayout fxLayoutAlign="center center"
+ matTooltip="Notifications" matTooltipPosition="bottom">
+ <mat-icon [matBadge]="unreadNotificationCount"
+ matBadgeColor="accent"
+ matBadgePosition="below after"
+ [matBadgeHidden]="unreadNotificationCount == 0"
+ [ngClass]="'notifications' === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'"
+ data-cy="navigation-icon">chat
+
+ </mat-icon>
+ </button>
+ </div>
<div style="height:100%;">
<div [ngClass]="accountMenuOpen.menuOpen ? 'sp-navbar-item-selected' : 'sp-navbar-item'" fxLayout fxLayoutAlign="center center" style="height: 100%;">
<button mat-button mat-icon-button
diff --git a/ui/src/app/core/components/toolbar/toolbar.component.ts b/ui/src/app/core/components/toolbar/toolbar.component.ts
index ff14471b8..d476b91df 100644
--- a/ui/src/app/core/components/toolbar/toolbar.component.ts
+++ b/ui/src/app/core/components/toolbar/toolbar.component.ts
@@ -16,7 +16,7 @@
*
*/
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { BaseNavigationComponent } from '../base-navigation.component';
import { Router } from '@angular/router';
import { RestApi } from '../../../services/rest-api.service';
@@ -26,13 +26,16 @@ import { OverlayContainer } from '@angular/cdk/overlay';
import { ProfileService } from '../../../profile/profile.service';
import { AuthService } from '../../../services/auth.service';
import { AppConstants } from '../../../services/app.constants';
+import { Subscription, timer } from 'rxjs';
+import { exhaustMap } from 'rxjs/operators';
+import { NotificationCountService } from '../../../services/notification-count-service';
@Component({
selector: 'toolbar',
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.scss']
})
-export class ToolbarComponent extends BaseNavigationComponent implements OnInit {
+export class ToolbarComponent extends BaseNavigationComponent implements OnInit, OnDestroy {
@ViewChild('feedbackOpen') feedbackOpen: MatMenuTrigger;
@ViewChild('accountMenuOpen') accountMenuOpen: MatMenuTrigger;
@@ -42,16 +45,29 @@ export class ToolbarComponent extends BaseNavigationComponent implements OnInit
appearanceControl: FormControl;
+ unreadNotificationCount = 0;
+ unreadNotificationsSubscription: Subscription;
+
constructor(router: Router,
private profileService: ProfileService,
private restApi: RestApi,
private overlay: OverlayContainer,
authService: AuthService,
- appConstants: AppConstants) {
+ appConstants: AppConstants,
+ public notificationCountService: NotificationCountService) {
super(authService, router, appConstants);
}
ngOnInit(): void {
+ this.unreadNotificationsSubscription = timer(0, 10000).pipe(
+ exhaustMap(() => this.restApi.getUnreadNotificationsCount()))
+ .subscribe(response => {
+ this.notificationCountService.unreadNotificationCount$.next(response.count);
+ });
+
+ this.notificationCountService.unreadNotificationCount$.subscribe(count => {
+ this.unreadNotificationCount = count;
+ });
this.authService.user$.subscribe(user => {
this.userEmail = user.displayName;
this.profileService.getUserProfile(user.username).subscribe(userInfo => {
@@ -97,4 +113,8 @@ export class ToolbarComponent extends BaseNavigationComponent implements OnInit
this.router.navigate(['login']);
}
+ ngOnDestroy() {
+ this.unreadNotificationsSubscription.unsubscribe();
+ }
+
}