From a4b2e71472b32a8244da846af20128504f4cbc65 Mon Sep 17 00:00:00 2001 From: jh245g Date: Tue, 22 Oct 2019 14:05:53 -0400 Subject: [PATCH] improve the dark theme Change-Id: I2bd9d18fbd5941619660edf9425da9056965901a Signed-off-by: Jun (Nicolas) Hu --- docs/release-notes.rst | 3 +- .../src/app/anr-xapp/anr-xapp.component.html | 2 +- .../src/app/anr-xapp/anr-xapp.component.ts | 17 ++++++++-- .../src/app/anr-xapp/anr-xapp.datasource.ts | 2 +- .../app-configuration.component.scss | 2 -- .../src/app/app-control/app-control.datasource.ts | 2 +- .../app/caas-ingress/caas-ingress.datasource.ts | 2 +- .../src/app/catalog/catalog.component.ts | 18 +++++++++-- .../src/app/catalog/catalog.datasource.ts | 2 +- .../src/app/footer/footer.component.html | 2 +- .../src/app/footer/footer.component.scss | 4 +++ webapp-frontend/src/app/footer/footer.component.ts | 11 +++++-- .../sidenav-list/sidenav-list.component.html | 2 +- .../sidenav-list/sidenav-list.component.scss | 6 +++- .../sidenav-list/sidenav-list.component.ts | 10 ++++-- .../src/app/ran-control/ran-control.component.ts | 19 ++++++++++-- webapp-frontend/src/app/rd.component.html | 20 ++++++------ webapp-frontend/src/app/rd.component.scss | 9 ++++-- webapp-frontend/src/app/rd.module.ts | 29 ++++++++++++----- .../src/app/services/ui/confirm-dialog.service.ts | 20 ++++++++++-- .../src/app/services/ui/error-dialog.service.ts | 31 ++++++++++++++----- .../src/app/services/ui/loading-dialog.service.ts | 16 +++++++++- .../ui/catalog-card/catalog-card.component.html | 26 +++++++++------- .../ui/catalog-card/catalog-card.component.scss | 8 +++++ .../confirm-dialog/confirm-dialog.component.html | 3 +- .../ui/confirm-dialog/confirm-dialog.component.ts | 2 +- .../ui/control-card/control-card.component.html | 23 +++++++------- .../ui/control-card/control-card.component.scss | 8 +++++ .../app/ui/error-dialog/error-dialog.component.ts | 2 +- .../ui/loading-dialog/loading-dialog.component.ts | 2 +- .../src/app/ui/stat-card/stat-card.component.html | 23 ++++++++------ .../src/app/ui/stat-card/stat-card.component.scss | 8 +++++ webapp-frontend/src/app/user/user.component.ts | 21 ++++++++++++- webapp-frontend/src/app/user/user.datasource.ts | 2 +- webapp-frontend/src/styles.scss | 23 ++++++++++++-- webapp-frontend/src/styles/dark-theme.scss | 36 ++++++++++++++++++++++ 36 files changed, 320 insertions(+), 96 deletions(-) create mode 100644 webapp-frontend/src/styles/dark-theme.scss diff --git a/docs/release-notes.rst b/docs/release-notes.rst index 3eaf7ddd..e4898f84 100644 --- a/docs/release-notes.rst +++ b/docs/release-notes.rst @@ -19,7 +19,7 @@ RIC Dashboard Release Notes =========================== -Version 1.2.4, 21 Oct 2019 +Version 1.2.4, 23 Oct 2019 -------------------------- * Revise a1-med-client to use API spec in new submodule ric-plt/a1; removed cached copy @@ -33,6 +33,7 @@ Version 1.2.4, 21 Oct 2019 * Update EPSDK-FW to version 2.6 * Make constructor robust to missing caasingress.insecure property * Repair bug that omitted slashes in CAAS-Ingress URL builder +* Improve the dark mode Version 1.2.3, 4 Oct 2019 ------------------------- diff --git a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html index def032e4..9bf24a0d 100644 --- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html +++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html @@ -17,7 +17,7 @@ limitations under the License. ========================LICENSE_END=================================== --> -
+

ANR xApp Neighbor Cell Relation Table

diff --git a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.ts b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.ts index e88720c8..98728b21 100644 --- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.ts +++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.ts @@ -20,7 +20,7 @@ import { HttpErrorResponse, HttpResponse } from '@angular/common/http'; import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; -import { MatSort } from '@angular/material'; +import { MatSort } from '@angular/material/sort'; import { MatDialog } from '@angular/material/dialog'; import { fromEvent } from 'rxjs/observable/fromEvent'; import { debounceTime, distinctUntilChanged, finalize, tap } from 'rxjs/operators'; @@ -32,6 +32,7 @@ import { ConfirmDialogService } from './../services/ui/confirm-dialog.service'; import { NotificationService } from './../services/ui/notification.service'; import { AnrEditNcrDialogComponent } from './anr-edit-ncr-dialog.component'; import { ANRXappDataSource } from './anr-xapp.datasource'; +import { UiService } from '../services/ui/ui.service'; @Component({ selector: 'rd-anr', @@ -40,6 +41,8 @@ import { ANRXappDataSource } from './anr-xapp.datasource'; }) export class AnrXappComponent implements AfterViewInit, OnInit { + darkMode: boolean; + panelClass: string = ""; dataSource: ANRXappDataSource; gNodeBIds: string[]; @ViewChild('ggNodeB', { static: true }) ggNodeB: ElementRef; @@ -56,13 +59,17 @@ export class AnrXappComponent implements AfterViewInit, OnInit { private confirmDialogService: ConfirmDialogService, private errorDialogService: ErrorDialogService, private loadingDialogService: LoadingDialogService, - private notificationService: NotificationService) { } + private notificationService: NotificationService, + public ui: UiService) { } ngOnInit() { this.dataSource = new ANRXappDataSource(this.anrXappService, this.sort, this.notificationService); this.dataSource.loadTable(); // Empty string occurs first in the array of gNodeBIds this.anrXappService.getgNodeBs().subscribe((res: string[]) => this.gNodeBIds = res); + this.ui.darkModeState.subscribe((isDark) => { + this.darkMode = isDark; + }); } ngAfterViewInit() { @@ -95,7 +102,13 @@ export class AnrXappComponent implements AfterViewInit, OnInit { } modifyNcr(ncr: ANRNeighborCellRelation): void { + if (this.darkMode) { + this.panelClass = "dark-theme"; + } else { + this.panelClass = ""; + } const dialogRef = this.dialog.open(AnrEditNcrDialogComponent, { + panelClass: this.panelClass, width: '300px', data: ncr }); diff --git a/webapp-frontend/src/app/anr-xapp/anr-xapp.datasource.ts b/webapp-frontend/src/app/anr-xapp/anr-xapp.datasource.ts index d57f9e19..b31ad03e 100644 --- a/webapp-frontend/src/app/anr-xapp/anr-xapp.datasource.ts +++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.datasource.ts @@ -20,7 +20,7 @@ import { CollectionViewer, DataSource } from '@angular/cdk/collections'; import { HttpErrorResponse } from '@angular/common/http'; -import { MatSort } from '@angular/material'; +import { MatSort } from '@angular/material/sort'; import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { of } from 'rxjs/observable/of'; diff --git a/webapp-frontend/src/app/app-configuration/app-configuration.component.scss b/webapp-frontend/src/app/app-configuration/app-configuration.component.scss index dd782632..5186c3fe 100644 --- a/webapp-frontend/src/app/app-configuration/app-configuration.component.scss +++ b/webapp-frontend/src/app/app-configuration/app-configuration.component.scss @@ -27,9 +27,7 @@ mat-spinner { } .config-title { - height:50px; text-align: center; - color: #432c85; font-size: 30px; font-weight: 300; transform: translate(149 56); diff --git a/webapp-frontend/src/app/app-control/app-control.datasource.ts b/webapp-frontend/src/app/app-control/app-control.datasource.ts index b3aa6b99..e97dc637 100644 --- a/webapp-frontend/src/app/app-control/app-control.datasource.ts +++ b/webapp-frontend/src/app/app-control/app-control.datasource.ts @@ -20,7 +20,7 @@ import { CollectionViewer, DataSource } from '@angular/cdk/collections'; import { HttpErrorResponse } from '@angular/common/http'; -import { MatSort } from '@angular/material'; +import { MatSort } from '@angular/material/sort'; import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { merge } from 'rxjs'; diff --git a/webapp-frontend/src/app/caas-ingress/caas-ingress.datasource.ts b/webapp-frontend/src/app/caas-ingress/caas-ingress.datasource.ts index 2505ca23..d823c0db 100644 --- a/webapp-frontend/src/app/caas-ingress/caas-ingress.datasource.ts +++ b/webapp-frontend/src/app/caas-ingress/caas-ingress.datasource.ts @@ -20,7 +20,7 @@ import { CollectionViewer, DataSource } from '@angular/cdk/collections'; import { HttpErrorResponse } from '@angular/common/http'; -import { MatSort } from '@angular/material'; +import { MatSort } from '@angular/material/sort'; import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { of } from 'rxjs/observable/of'; diff --git a/webapp-frontend/src/app/catalog/catalog.component.ts b/webapp-frontend/src/app/catalog/catalog.component.ts index 51890ee6..07e0e020 100644 --- a/webapp-frontend/src/app/catalog/catalog.component.ts +++ b/webapp-frontend/src/app/catalog/catalog.component.ts @@ -30,6 +30,7 @@ import { AppConfigurationComponent } from './../app-configuration/app-configurat import { ConfirmDialogService } from './../services/ui/confirm-dialog.service'; import { NotificationService } from './../services/ui/notification.service'; import { CatalogDataSource } from './catalog.datasource'; +import { UiService } from '../services/ui/ui.service'; @Component({ selector: 'rd-app-catalog', @@ -38,6 +39,8 @@ import { CatalogDataSource } from './catalog.datasource'; }) export class CatalogComponent implements OnInit { + darkMode: boolean; + panelClass: string = ""; displayedColumns: string[] = ['name', 'version', 'action']; dataSource: CatalogDataSource; @ViewChild(MatSort, { static: true }) sort: MatSort; @@ -48,23 +51,32 @@ export class CatalogComponent implements OnInit { private dialog: MatDialog, private errorDiaglogService: ErrorDialogService, private loadingDialogService: LoadingDialogService, - private notificationService: NotificationService) { } + private notificationService: NotificationService, + public ui: UiService) { } ngOnInit() { this.dataSource = new CatalogDataSource(this.appMgrService, this.sort, this.notificationService); this.dataSource.loadTable(); + this.ui.darkModeState.subscribe((isDark) => { + this.darkMode = isDark; + }); } onConfigureApp(xapp: XMDeployableApp): void { + if (this.darkMode) { + this.panelClass = "dark-theme"; + } else { + this.panelClass = ""; + } const dialogRef = this.dialog.open(AppConfigurationComponent, { + panelClass: this.panelClass, width: '40%', maxHeight: '500px', position: { top: '10%' }, data: xapp - }); - + }) } onDeployApp(app: XMDeployableApp): void { diff --git a/webapp-frontend/src/app/catalog/catalog.datasource.ts b/webapp-frontend/src/app/catalog/catalog.datasource.ts index 8c2acfe8..f5f6e986 100644 --- a/webapp-frontend/src/app/catalog/catalog.datasource.ts +++ b/webapp-frontend/src/app/catalog/catalog.datasource.ts @@ -20,7 +20,7 @@ import { CollectionViewer, DataSource } from '@angular/cdk/collections'; import { HttpErrorResponse } from '@angular/common/http'; -import { MatSort } from '@angular/material'; +import { MatSort } from '@angular/material/sort'; import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { merge } from 'rxjs'; diff --git a/webapp-frontend/src/app/footer/footer.component.html b/webapp-frontend/src/app/footer/footer.component.html index 4eae0cd0..5dd1c364 100644 --- a/webapp-frontend/src/app/footer/footer.component.html +++ b/webapp-frontend/src/app/footer/footer.component.html @@ -17,7 +17,7 @@ limitations under the License. ========================LICENSE_END=================================== --> -
+
Copyright (C) 2019 AT&T Intellectual Property. Licensed under the Apache License, Version 2.0.
Version {{dashboardVersion}} diff --git a/webapp-frontend/src/app/footer/footer.component.scss b/webapp-frontend/src/app/footer/footer.component.scss index f9eb87ad..e2456d72 100644 --- a/webapp-frontend/src/app/footer/footer.component.scss +++ b/webapp-frontend/src/app/footer/footer.component.scss @@ -22,3 +22,7 @@ letter-spacing: 0.1rem; font-size: 12px; } + +.footer-dark { + color: white; +} \ No newline at end of file diff --git a/webapp-frontend/src/app/footer/footer.component.ts b/webapp-frontend/src/app/footer/footer.component.ts index d45ee3fa..e119d70d 100644 --- a/webapp-frontend/src/app/footer/footer.component.ts +++ b/webapp-frontend/src/app/footer/footer.component.ts @@ -18,8 +18,9 @@ * ========================LICENSE_END=================================== */ import { Component, OnInit } from '@angular/core'; -import { DashboardService } from '../services/dashboard/dashboard.service'; import { DashboardSuccessTransport } from '../interfaces/dashboard.types'; +import { DashboardService } from '../services/dashboard/dashboard.service'; +import { UiService } from '../services/ui/ui.service'; @Component({ selector: 'rd-footer', @@ -31,14 +32,18 @@ import { DashboardSuccessTransport } from '../interfaces/dashboard.types'; * Fetches the version on load for display in the footer */ export class FooterComponent implements OnInit { - + darkMode: boolean; dashboardVersion: string; // Inject the service - constructor(private dashboardService: DashboardService) { } + constructor(private dashboardService: DashboardService, + public ui: UiService ) { } ngOnInit() { this.dashboardService.getVersion().subscribe((res: DashboardSuccessTransport) => this.dashboardVersion = res.data); + this.ui.darkModeState.subscribe((isDark) => { + this.darkMode = isDark; + }); } } diff --git a/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.html b/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.html index 18756a39..2fb3b59c 100644 --- a/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.html +++ b/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.html @@ -19,7 +19,7 @@ --> - + home Home diff --git a/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.scss b/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.scss index 3344eb19..72c724e9 100644 --- a/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.scss +++ b/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.scss @@ -21,7 +21,11 @@ a { text-decoration: none; color: black; } - + +.dark a { + color: white; +} + a:hover, a:active{ color: lightgray; } diff --git a/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.ts b/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.ts index 584ad07e..c0f05afc 100644 --- a/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.ts +++ b/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.ts @@ -18,6 +18,7 @@ * ========================LICENSE_END=================================== */ import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import { UiService } from '../../services/ui/ui.service'; @Component({ selector: 'rd-sidenav-list', @@ -25,11 +26,16 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core'; styleUrls: ['./sidenav-list.component.scss'] }) export class SidenavListComponent implements OnInit { + darkMode: boolean; @Output() sidenavClose = new EventEmitter(); - constructor() { } + constructor(public ui: UiService) { } - ngOnInit() { } + ngOnInit() { + this.ui.darkModeState.subscribe((isDark) => { + this.darkMode = isDark; + }); + } public onSidenavClose = () => { this.sidenavClose.emit(); diff --git a/webapp-frontend/src/app/ran-control/ran-control.component.ts b/webapp-frontend/src/app/ran-control/ran-control.component.ts index 8baa556b..b5aba669 100644 --- a/webapp-frontend/src/app/ran-control/ran-control.component.ts +++ b/webapp-frontend/src/app/ran-control/ran-control.component.ts @@ -28,6 +28,7 @@ import { LoadingDialogService } from '../services/ui/loading-dialog.service'; import { NotificationService } from '../services/ui/notification.service'; import { RanControlConnectDialogComponent } from './ran-connection-dialog.component'; import { RANControlDataSource } from './ran-control.datasource'; +import { UiService } from '../services/ui/ui.service'; @Component({ selector: 'rd-ran-control', @@ -35,6 +36,9 @@ import { RANControlDataSource } from './ran-control.datasource'; styleUrls: ['./ran-control.component.scss'] }) export class RanControlComponent implements OnInit { + + darkMode: boolean; + panelClass: string = ""; displayedColumns: string[] = ['nbId', 'nodeType', 'ranName', 'ranIp', 'ranPort', 'connectionStatus']; dataSource: RANControlDataSource; @@ -43,18 +47,29 @@ export class RanControlComponent implements OnInit { private confirmDialogService: ConfirmDialogService, private notificationService: NotificationService, private loadingDialogService: LoadingDialogService, - public dialog: MatDialog) { } + public dialog: MatDialog, + public ui: UiService) { } ngOnInit() { this.dataSource = new RANControlDataSource(this.e2MgrSvc, this.notificationService); this.dataSource.loadTable(); + this.ui.darkModeState.subscribe((isDark) => { + this.darkMode = isDark; + }); } setupRANConnection() { + if (this.darkMode) { + this.panelClass = "dark-theme"; + } else { + this.panelClass = ""; + } const dialogRef = this.dialog.open(RanControlConnectDialogComponent, { + panelClass: this.panelClass, width: '450px' }); - dialogRef.afterClosed().subscribe( (result: boolean) => { + dialogRef.afterClosed() + .subscribe((result: boolean) => { if (result) { this.dataSource.loadTable(); } diff --git a/webapp-frontend/src/app/rd.component.html b/webapp-frontend/src/app/rd.component.html index be30f562..7146b37f 100644 --- a/webapp-frontend/src/app/rd.component.html +++ b/webapp-frontend/src/app/rd.component.html @@ -18,9 +18,9 @@ ========================LICENSE_END=================================== --> - - -
+ + +
demo@o-ran-sc.org
-
- +
+
@@ -107,16 +107,16 @@ -
-
-
+
+
+
-