limitations under the License.
========================LICENSE_END===================================
-->
-<div class="copyright__text" [ngClass]="{'footer-dark': darkMode}">
+<div class="copyright__text" [ngClass]="{'copyright__text-dark': darkMode}">
Copyright (C) 2019 AT&T Intellectual Property. Licensed under the Apache License, Version 2.0.
- <br/>
+ <br />
Modifications Copyright (C) 2019 Nordix Foundation
- <br/>
+ <br />
Version {{dashboardVersion}}
-</div>
+</div>
\ No newline at end of file
.copyright__text {
color: gray;
letter-spacing: 0.1rem;
- font-size: 12px;
+ font-size: 10px;
}
-.footer-dark {
- color: white;
+.copyright__text-dark {
+ color: gray;
}
\ No newline at end of file
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
- *
+ *
* http://www.apache.org/licenses/LICENSE-2.0
- *
+ *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// Inject the service
constructor(private dashboardService: DashboardService,
- public ui: UiService ) { }
+ private ui: UiService) { }
ngOnInit() {
this.dashboardVersion = '0.0';
- //this.dashboardService.getVersion().subscribe((res: DashboardSuccessTransport) => this.dashboardVersion = res.data);
+ // this.dashboardService.getVersion().subscribe((res: DashboardSuccessTransport) => this.dashboardVersion = res.data);
this.ui.darkModeState.subscribe((isDark) => {
this.darkMode = isDark;
});
darkMode: boolean;
@Output() sidenavClose = new EventEmitter();
- constructor(public ui: UiService) { }
+ constructor(private ui: UiService) { }
ngOnInit() {
this.ui.darkModeState.subscribe((isDark) => {
========================LICENSE_END===================================
-->
-<div>
- <h3 class="rd-global-page-title">Policy Control</h3>
+<h3 class="rd-global-page-title">Policy Control</h3>
-
<table mat-table [dataSource]="policyTypesDataSource" matSort multiTemplateDataRows
- class="policy-type-table mat-elevation-z8">
+<table mat-table [dataSource]="policyTypesDataSource" matSort multiTemplateDataRows
+ class="policy-type-table mat-elevation-z8">
- <ng-container matColumnDef="name">
- <mat-header-cell *matHeaderCellDef mat-sort-header>Policy Type</mat-header-cell>
- <mat-cell *matCellDef="let policyType">
- <mat-icon matTooltip="Properties">{{isInstancesShown(policyType) ? 'expand_less' : 'expand_more'}}</mat-icon>
- {{getPolicyTypeName(policyType)}}
- </mat-cell>
- </ng-container>
+ <ng-container matColumnDef="name">
+ <mat-header-cell *matHeaderCellDef mat-sort-header>Policy Type</mat-header-cell>
+ <mat-cell *matCellDef="let policyType">
+ <mat-icon matTooltip="Properties">{{isInstancesShown(policyType) ? 'expand_less' : 'expand_more'}}
+ </mat-icon>
+ {{getPolicyTypeName(policyType)}}
+ </mat-cell>
+ </ng-container>
- <ng-container matColumnDef="description">
- <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
- <mat-cell *matCellDef="let policyType"> {{policyType.description}} </mat-cell>
- </ng-container>
+ <ng-container matColumnDef="description">
+ <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
+ <mat-cell *matCellDef="let policyType"> {{policyType.description}} </mat-cell>
+ </ng-container>
- <ng-container matColumnDef="action">
- <mat-header-cell class="action-cell" *matHeaderCellDef>Action </mat-header-cell>
- <mat-cell class="action-cell" *matCellDef="let policyType" (click)="$event.stopPropagation()">
- <button mat-icon-button (click)="createPolicyInstance(policyType)">
- <mat-icon matTooltip="Create instance">add_box</mat-icon>
- </button>
- </mat-cell>
- </ng-container>
+ <ng-container matColumnDef="action">
+ <mat-header-cell class="action-cell" *matHeaderCellDef>Action </mat-header-cell>
+ <mat-cell class="action-cell" *matCellDef="let policyType" (click)="$event.stopPropagation()">
+ <button mat-icon-button (click)="createPolicyInstance(policyType)">
+ <mat-icon matTooltip="Create instance">add_box</mat-icon>
+ </button>
+ </mat-cell>
+ </ng-container>
- <!-- =================== Policy instances for one type ======================== -->
- <ng-container matColumnDef="instanceTableContainer">
- <mat-cell *matCellDef="let policyType">
- <rd-policy-instance
- [policyType]=policyType
- [expanded]=getObservable(policyType)>
+ <!-- =================== Policy instances for one type ======================== -->
+ <ng-container matColumnDef="instanceTableContainer">
+ <mat-cell *matCellDef="let policyType">
+ <rd-policy-instance [policyType]=policyType [expanded]=getObservable(policyType)>
</rd-policy-instance>
- </mat-cell>
- </ng-container>
- <!-- ======= -->
+ </mat-cell>
+ </ng-container>
+ <!-- ======= -->
- <ng-container matColumnDef="noRecordsFound">
- <mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
- </ng-container>
+ <ng-container matColumnDef="noRecordsFound">
+ <mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
+ </ng-container>
- <mat-header-row *matHeaderRowDef="['name', 'description', 'action']"></mat-header-row>
- <mat-row *matRowDef="let policyType; columns: ['name', 'description', 'action']"
- (click)="toggleListInstances(policyType)">
- </mat-row>
+ <mat-header-row *matHeaderRowDef="['name', 'description', 'action']"></mat-header-row>
+ <mat-row *matRowDef="let policyType; columns: ['name', 'description', 'action']"
+ (click)="toggleListInstances(policyType)">
+ </mat-row>
- <mat-row *matRowDef="let policyType; columns: ['instanceTableContainer'];"
- [@detailExpand]="isInstancesShown(policyType) ? 'expanded' : 'collapsed'" style="overflow: hidden">
- </mat-row>
+ <mat-row *matRowDef="let policyType; columns: ['instanceTableContainer'];"
+ [@detailExpand]="isInstancesShown(policyType) ? 'expanded' : 'collapsed'" style="overflow: hidden">
+ </mat-row>
- <mat-footer-row *matFooterRowDef="['noRecordsFound']"
- [ngClass]="{'display-none': policyTypesDataSource.rowCount > 0}">
- </mat-footer-row>
+ <mat-footer-row *matFooterRowDef="['noRecordsFound']"
+ [ngClass]="{'display-none': policyTypesDataSource.rowCount > 0}">
+ </mat-footer-row>
- </table>
+</table>
- <div class="spinner-container" *ngIf="policyTypesDataSource.loading$ | async">
- <mat-spinner diameter="50"></mat-spinner>
- </div>
+<div class="spinner-container" *ngIf="policyTypesDataSource.loading$ | async">
+ <mat-spinner diameter="50"></mat-spinner>
</div>
\ No newline at end of file
import { ErrorDialogService } from '../services/ui/error-dialog.service';
import { ConfirmDialogService } from './../services/ui/confirm-dialog.service';
import { Subject } from 'rxjs';
+import { UiService } from '../services/ui/ui.service';
class PolicyTypeInfo {
constructor(public type: PolicyType, public isExpanded: boolean) { }
isExpandedObservers: Subject<boolean> = new Subject<boolean>();
-};
+}
@Component({
selector: 'rd-policy-control',
@ViewChild(MatSort, { static: true }) sort: MatSort;
expandedTypes = new Map<string, PolicyTypeInfo>();
+ darkMode: boolean;
constructor(
private policySvc: PolicyService,
private dialog: MatDialog,
private errorDialogService: ErrorDialogService,
private notificationService: NotificationService,
- private confirmDialogService: ConfirmDialogService) { }
+ private confirmDialogService: ConfirmDialogService,
+ private ui: UiService) { }
ngOnInit() {
this.policyTypesDataSource = new PolicyTypeDataSource(this.policySvc, this.sort, this.notificationService);
this.policyTypesDataSource.loadTable();
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
}
createPolicyInstance(policyType: PolicyType): void {
- const dialogRef = this.dialog.open(PolicyInstanceDialogComponent, getPolicyDialogProperties(policyType, null));
+ const dialogRef = this.dialog.open(PolicyInstanceDialogComponent, getPolicyDialogProperties(policyType, null, this.darkMode));
const info: PolicyTypeInfo = this.getPolicyTypeInfo(policyType);
dialogRef.afterClosed().subscribe(
(result: any) => {
}
toggleListInstances(policyType: PolicyType): void {
- let info = this.getPolicyTypeInfo(policyType);
+ const info = this.getPolicyTypeInfo(policyType);
info.isExpanded = !info.isExpanded;
info.isExpandedObservers.next(info.isExpanded);
}
limitations under the License.
========================LICENSE_END===================================
-->
-<div class="text-muted logo" fxLayout="row" fxLayoutGap="50px">
+<div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
<div *ngIf="policyInstanceId">{{policyInstanceId}}</div>
</div>
-<div class="mat-elevation-z8 header row logo">
+<div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
<div class="logo">
<img src="../../assets/oran-logo.png" width="30px" height="30px" style="position: relative; z-index: 50" />
- <svg class="logo__icon" viewBox="150.3 22.2 400 50">
- <text [ngClass]="{'logo__text-dark': darkModeActive}" class="logo__text" fill="#432c85" font-size="30"
- font-weight="600" letter-spacing=".1em" transform="translate(149 56)">
+ <svg class="logo__icon" viewBox="150.3 22.2 1000 50">
+ <text class="logo__text" [ngClass]="{'logo__text-dark': darkMode}" font-size="30" font-weight="600"
+ letter-spacing=".1em" transform="translate(149 56)">
<tspan>Policy editor</tspan>
<tspan *ngIf="jsonSchemaObject.title"> {{this.jsonSchemaObject.title}}</tspan>
<tspan *ngIf="!jsonSchemaObject.title"> {{this.policyTypeName}}</tspan>
<!--<div class="text-muted" *ngIf="jsonSchemaObject.description">{{jsonSchemaObject.description}}</div>-->
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-sm="column" fxLayoutAlign.lt-sm="flex-start center">
- <mat-card class="card">
+ <mat-card class="card" [ngClass]="{'card-dark': darkMode}">
<h4 class="default-cursor" (click)="toggleVisible('form')">
<mat-icon matTooltip="Properties">{{isVisible.form ? 'expand_less' : 'expand_more'}}</mat-icon>
Properties
<div *ngIf="prettyValidationErrors" class="text-danger" [innerHTML]="prettyValidationErrors"></div>
</div>
<div>
- <pre [class.data-good]="!prettyValidationErrors && prettyLiveFormData !== '{}'"
- [class.data-bad]="prettyValidationErrors">{{prettyLiveFormData}}
- </pre>
+ <pre [class.text__dark]='this.darkMode'>{{prettyLiveFormData}}</pre>
</div>
</div>
</h4>
<div *ngIf="isVisible.schema" fxLayout="column" [@expandSection]="true">
<strong class="text-muted">Schema</strong>
- <pre>{{schemaAsString}}</pre>
+ <pre [class.text__dark]='this.darkMode'>{{schemaAsString}}</pre>
</div>
</mat-card>
</div>
\ No newline at end of file
* ========================LICENSE_END===================================
*/
+
+.logo__text {
+ fill: #2B244D;
+}
+
+.logo__text-dark {
+ fill: #ffffff;
+}
+
+.text__dark {
+ color: white;
+}
+
.header {
- color: black;
- background: linear-gradient(to right, white 0%, rgb(217, 216, 231) 100%);
+ background: linear-gradient(to bottom, white 0%, grayscale($color: #eeeaea) 100%);
font-size: 40px;
- font-weight: 400;
margin-top: 10px;
margin-bottom: 10px;
+ margin-left: 2px;
+ margin-right: 2px;
}
-.logo {
- margin-left: 10px;
+.header-dark {
+ background: #2B244D;
}
-.logo__text {
- fill: #2B244D;
-}
-
-.logo__text-dark {
- fill: #ffffff;
+.logo {
+ margin-left: 10px;
}
.logo__icon {
}
.submitBtn {
- background-color: #4CAF50; /* Green */
+ background-color: #4CAF50;
+ /* Green */
}
.card {
height: 100%;
- width: 100%;
- margin-left: 10px;
- margin-right: 1px;
+ width: 100%;
+ margin-left: 2px;
+ margin-right: 2px;
+ background-color: grayscale($color: #eeeaea);
+}
+
+.card-dark {
+ background-color: #1c1c24;
}
\ No newline at end of file
* limitations under the License.
* ========================LICENSE_END===================================
*/
-import { Component, OnInit, ViewChild, Inject, AfterViewInit, Self } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { AfterViewInit, Component, Inject, OnInit, ViewChild } from '@angular/core';
+import { MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatMenuTrigger } from '@angular/material/menu';
-import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { trigger, state, style, animate, transition } from '@angular/animations';
-import * as uuid from 'uuid';
-
import { JsonPointer } from 'angular6-json-schema-form';
+import * as uuid from 'uuid';
+import { PolicyInstance, PolicyType } from '../interfaces/policy.types';
import { PolicyService } from '../services/policy/policy.service';
import { ErrorDialogService } from '../services/ui/error-dialog.service';
import { NotificationService } from './../services/ui/notification.service';
+import { UiService } from '../services/ui/ui.service';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { PolicyType } from '../interfaces/policy.types';
-import { PolicyInstance } from '../interfaces/policy.types';
@Component({
selector: 'rd-policy-instance-dialog',
public policyInstanceId: string;
public policyTypeName: string;
+ darkMode: boolean;
private policyTypeId: number;
+
constructor(
private dataService: PolicyService,
private errorService: ErrorDialogService,
private notificationService: NotificationService,
@Inject(MAT_DIALOG_DATA) private data,
- private dialogRef: MatDialogRef<PolicyInstanceDialogComponent>) {
+ private dialogRef: MatDialogRef<PolicyInstanceDialogComponent>,
+ private ui: UiService) {
this.formActive = false;
this.policyInstanceId = this.data.instanceId;
this.policyTypeName = this.data.name;
ngOnInit() {
this.jsonFormStatusMessage = 'Init';
this.formActive = true;
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
}
ngAfterViewInit() {
}
}
-export function getPolicyDialogProperties(policyType: PolicyType, instance: PolicyInstance): MatDialogConfig {
+export function getPolicyDialogProperties(policyType: PolicyType, instance: PolicyInstance, darkMode: boolean): MatDialogConfig {
const policyTypeId = policyType.policy_type_id;
const createSchema = policyType.create_schema;
const instanceId = instance ? instance.instanceId : null;
const instanceJson = instance ? instance.instance : null;
const name = policyType.name;
-
return {
maxWidth: '1200px',
- height: '1200px',
+ maxHeight: '900px',
width: '900px',
role: 'dialog',
disableClose: false,
+ panelClass: darkMode ? 'dark-theme' : '',
data: {
policyTypeId,
createSchema,
limitations under the License.
========================LICENSE_END===================================
-->
-<table #table mat-table class="instances-table mat-elevation-z8" matSort multiTemplateDataRows [dataSource]="instanceDataSource">
+<table #table mat-table class="instances-table mat-elevation-z8" [ngClass]="{'table-dark': darkMode}" matSort
+ multiTemplateDataRows [dataSource]="instanceDataSource">
<ng-container matColumnDef="instanceId">
- <mat-header-cell mat-sort-header *matHeaderCellDef >Instance</mat-header-cell>
+ <mat-header-cell mat-sort-header *matHeaderCellDef>Instance</mat-header-cell>
<mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.instanceId}}
</mat-cell>
</ng-container>
<mat-footer-cell *matFooterCellDef>No records found.</mat-footer-cell>
</ng-container>
- <mat-header-row *matHeaderRowDef="['instanceId', 'action']"
- [ngClass]="{'display-none': !this.hasInstances()}">
+ <mat-header-row *matHeaderRowDef="['instanceId', 'action']" [ngClass]="{'display-none': !this.hasInstances()}">
</mat-header-row>
<mat-row *matRowDef="let instance; columns: ['instanceId', 'action'];"></mat-row>
</table>
-
<div class="spinner-container" *ngIf="instanceDataSource.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
\ No newline at end of file
*/
.instances-table {
- width: 60%; ;
+ width: 60%;
min-height: 150px;
min-width: 600px;
margin-top: 10px;
margin-bottom: 10px;
- background-color:rgb(233, 233, 240);
+ background-color: grayscale($color: #eeeaea);
+}
+
+.table-dark {
+ background-color: #1d1d27;
}
.action-cell {
- display: flex;
- justify-content: flex-end;
+ display: flex;
+ justify-content: flex-end;
}
.display-none {
import { getPolicyDialogProperties } from './policy-instance-dialog.component';
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
+import { UiService } from '../services/ui/ui.service';
@Component({
selector: 'rd-policy-instance',
@Input() policyType: PolicyType;
@Input() expanded: Observable<boolean>;
@ViewChild(MatSort, { static: true }) sort: MatSort;
+ darkMode: boolean;
constructor(
private policySvc: PolicyService,
private dialog: MatDialog,
private errorDialogService: ErrorDialogService,
private notificationService: NotificationService,
- private confirmDialogService: ConfirmDialogService) {
+ private confirmDialogService: ConfirmDialogService,
+ private ui: UiService) {
}
-
+
ngOnInit() {
this.instanceDataSource = new PolicyInstanceDataSource(this.policySvc, this.sort, this.notificationService, this.policyType);
this.expanded.subscribe((isExpanded: boolean) => this.onExpand(isExpanded));
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
}
-
+
ngAfterViewInit() {
this.instanceDataSource.sort = this.sort;
}
this.policySvc.getPolicy(this.policyType.policy_type_id, instance.instanceId).subscribe(
(refreshedJson: any) => {
instance.instance = JSON.stringify(refreshedJson);
- this.dialog.open(PolicyInstanceDialogComponent, getPolicyDialogProperties(this.policyType, instance));
+ this.dialog.open(PolicyInstanceDialogComponent, getPolicyDialogProperties(this.policyType, instance, this.darkMode));
},
(httpError: HttpErrorResponse) => {
this.notificationService.error('Could not refresh instance ' + httpError.message);
- this.dialog.open(PolicyInstanceDialogComponent, getPolicyDialogProperties(this.policyType, instance));
+ this.dialog.open(PolicyInstanceDialogComponent, getPolicyDialogProperties(this.policyType, instance, this.darkMode));
}
);
}
}
});
}
+
+
+
}
========================LICENSE_END===================================
-->
<!-- Slide Menu-->
-<mat-drawer-container autosize >
- <mat-drawer #drawer mode="push" [ngClass]="{'side-menu__dark': darkModeActive}">
- <section class="menu-header" [ngClass]="{'menu-header__dark': darkModeActive}">
+<mat-drawer-container autosize>
+ <mat-drawer #drawer mode="push" [ngClass]="{'side-menu__dark': darkMode}">
+ <section class="menu-header" [ngClass]="{'menu-header__dark': darkMode}">
- <div class="left__section3Col" *ngIf="drawer.opened" [ngClass]="{'menumargin-top': drawer.opened}">
- <svg (click)="drawer.toggle()" class="hamburger__icon" id="Menu_Burger_Icon" data-name="Menu Burger Icon"
- viewBox="31.5 30 49.9 32">
- <rect id="Rectangle_9" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkModeActive}"
- class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
- transform="translate(31.5 58)"/>
- <rect id="Rectangle_10" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkModeActive}"
- class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"
- transform="translate(31.5 44)"/>
- <rect id="Rectangle_11" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkModeActive}"
- class="hamburger__icon__fill" data-name="Rectangle 11" rx="2"
- transform="translate(31.5 30)"/>
- </svg>
- <img src="../../assets/oran-logo.png" width="180%" height="100%" style="position: relative; z-index: 50"/>
- <svg class="logo__icon" viewBox="150.3 22.2 400 50">
- <text [ngClass]="{'logo__text-dark': darkModeActive}" class="logo__text" fill="#432c85"
- font-size="30" font-weight="600"
- letter-spacing=".1em" transform="translate(149 56)">
- <tspan x="0" y="0">Non RT RIC Dashboard</tspan>
- </text>
- </svg>
+ <div class="left__section3Col" *ngIf="drawer.opened" [ngClass]="{'menumargin-top': drawer.opened}">
+ <svg (click)="drawer.toggle()" class="hamburger__icon" id="Menu_Burger_Icon" data-name="Menu Burger Icon"
+ viewBox="31.5 30 49.9 32">
+ <rect id="Rectangle_9" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+ class="hamburger__icon__fill" data-name="Rectangle 9" rx="2" transform="translate(31.5 58)" />
+ <rect id="Rectangle_10" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+ class="hamburger__icon__fill" data-name="Rectangle 10" rx="2" transform="translate(31.5 44)" />
+ <rect id="Rectangle_11" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+ class="hamburger__icon__fill" data-name="Rectangle 11" rx="2" transform="translate(31.5 30)" />
+ </svg>
+ <img src="../../assets/oran-logo.png" width="180%" height="100%" style="position: relative; z-index: 50" />
+ <svg class="logo__icon" viewBox="150.3 22.2 400 50">
+ <text [ngClass]="{'logo__text-dark': darkMode}" class="logo__text" fill="#432c85" font-size="30"
+ font-weight="600" letter-spacing=".1em" transform="translate(149 56)">
+ <tspan x="0" y="0">Non RT RIC Dashboard</tspan>
+ </text>
+ </svg>
- </div>
+ </div>
<div class="profile-image__container">
- <img src="assets/profile_default.png" alt="profile-image"
- class="profile__image">
+ <img src="assets/profile_default.png" alt="profile-image" class="profile__image">
</div>
<div class="account-details">
<span class="name__text">Demo</span>
<span class="email__text">demo@o-ran-sc.org</span>
</div>
</section>
- <section #sidenav class="menu-body" >
- <rd-sidenav-list ></rd-sidenav-list>
+ <section #sidenav class="menu-body">
+ <rd-sidenav-list></rd-sidenav-list>
</section>
<section class="menu-footer">
</section>
-</mat-drawer>
+ </mat-drawer>
-<mat-drawer-content>
-<div class="root__container">
+ <mat-drawer-content>
+
<div class="root__container">
- <header [ngClass]="{'main__header-dark': darkModeActive}" class="main__header">
+ <header [ngClass]="{'main__header-dark': darkMode}" class="main__header">
- <div class="left__section3Col" *ngIf="!drawer.opened">
- <svg (click)="drawer.toggle()" class="hamburger__icon" id="Menu_Burger_Icon" data-name="Menu Burger Icon"
- viewBox="31.5 30 49.9 32">
- <rect id="Rectangle_9" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkModeActive}"
- class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
- transform="translate(31.5 58)"/>
- <rect id="Rectangle_10" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkModeActive}"
- class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"
- transform="translate(31.5 44)"/>
- <rect id="Rectangle_11" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkModeActive}"
- class="hamburger__icon__fill" data-name="Rectangle 11" rx="2"
- transform="translate(31.5 30)"/>
- </svg>
- <img src="../../assets/oran-logo.png" width="180%" height="100%" style="position: relative; z-index: 50"/>
- <svg class="logo__icon" viewBox="150.3 22.2 400 50">
- <text [ngClass]="{'logo__text-dark': darkModeActive}" class="logo__text" fill="#432c85"
- font-size="30" font-weight="600"
- letter-spacing=".1em" transform="translate(149 56)">
- <tspan x="0" y="0">Non RT RIC Dashboard</tspan>
- </text>
- </svg>
+ <div class="left__section3Col" *ngIf="!drawer.opened">
+ <svg (click)="drawer.toggle()" class="hamburger__icon" id="Menu_Burger_Icon" data-name="Menu Burger Icon"
+ viewBox="31.5 30 49.9 32">
+ <rect id="Rectangle_9" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+ class="hamburger__icon__fill" data-name="Rectangle 9" rx="2" transform="translate(31.5 58)" />
+ <rect id="Rectangle_10" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+ class="hamburger__icon__fill" data-name="Rectangle 10" rx="2" transform="translate(31.5 44)" />
+ <rect id="Rectangle_11" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+ class="hamburger__icon__fill" data-name="Rectangle 11" rx="2" transform="translate(31.5 30)" />
+ </svg>
+ <img src="../../assets/oran-logo.png" width="180%" height="100%" style="position: relative; z-index: 50" />
+ <svg class="logo__icon" viewBox="150.3 22.2 400 50">
+ <text [ngClass]="{'logo__text-dark': darkMode}" class="logo__text" fill="#432c85" font-size="30"
+ font-weight="600" letter-spacing=".1em" transform="translate(149 56)">
+ <tspan x="0" y="0">Non RT RIC Dashboard</tspan>
+ </text>
+ </svg>
- </div>
+ </div>
- <h3 class="date__text"></h3>
+ <h3 class="date__text"></h3>
- <div class="mode-toggle__container">
- <span class="mode-toggle__text">Light</span>
- <label class="toggle-button__container">
- <input (click)="modeToggleSwitch()" type="checkbox" class="mode-toggle__input"/>
- <span [ngClass]="{'mode-toggle__bg-checked': darkModeActive}" class="mode-toggle__bg"></span>
- <span [ngClass]="{'mode-toggle__circle-checked': darkModeActive}" class="mode-toggle__circle"></span>
- </label>
- <span class="mode-toggle__text">Dark</span>
- </div>
+
<div class="mode-toggle__container">
+ <span class="mode-toggle__text">Light</span>
+ <label class="toggle-button__container">
+ <input (click)="modeToggleSwitch()" type="checkbox" class="mode-toggle__input" />
+ <span [ngClass]="{'mode-toggle__bg-checked': darkMode}" class="mode-toggle__bg"></span>
+ <span [ngClass]="{'mode-toggle__circle-checked': darkMode}" class="mode-toggle__circle"></span>
+ </label>
+ <span class="mode-toggle__text">Dark</span>
+ </div>
- </header>
+ </header>
- <!-- Main Content -->
- <main class="main__container" [ngClass]="{'main-container__bg-dark': darkModeActive}" >
- <div class = main__container__body [ngClass]="{'dark-theme': darkModeActive}">
- <div class="main-container__bg"></div>
- <router-outlet></router-outlet>
- </div>
- </main>
+ <!-- Main Content -->
+ <main class="main__container" [ngClass]="{'main-container__bg-dark': darkMode}">
+ <div class=main__container__body [ngClass]="{'dark-theme': darkMode}">
+
<div class="main-container__bg"></div>
+ <router-outlet></router-outlet>
+ </div>
+ </main>
- <!-- Footer -->
- <footer class="main__footer" [ngClass]="{'main-footer__bg-dark': darkModeActive}">
- <div class="main-footer__bg">
- <rd-footer></rd-footer>
- </div>
- </footer>
+ <!-- Footer -->
+ <footer class="main__footer" [ngClass]="{'main-footer__bg-dark': darkMode}">
+
<div class="main-footer__bg">
+ <rd-footer></rd-footer>
+ </div>
+ </footer>
-</div>
-</mat-drawer-content>
-</mat-drawer-container>
+ </div>
+ </mat-drawer-content>
+</mat-drawer-container>
\ No newline at end of file
Header
================
*/
-mat-sidenav-container, mat-sidenav-content, mat-sidenav {
- height: 100%;
+mat-sidenav-container,
+mat-sidenav-content,
+mat-sidenav {
+ height: 100%;
}
mat-sidenav {
- width: 250px;
+ width: 250px;
}
main {
- padding: 10px;
+ padding: 10px;
}
/*
.slide-menu-active {
transform: none;
}
+
.menu-header.menu-header__dark {
background: #2B244D;
}
display: grid;
grid-template-rows: 1fr 4fr;
grid-template-columns: 1fr 4fr;
- grid-template-areas: "greeting greeting" "image details";
+ grid-template-areas: "greeting greeting""image details";
box-sizing: border-box;
width: 100%;
align-content: center;
}
.menumargin-top {
- margin-top: 10px;
+ margin-top: 10px;
}
.greeting__text {
max-width: 4rem;
}
-.home_bg_image{
- height:40em;
- background-size:cover;
- width:auto;
- background-image:url('../assets/intelligence.png');
- background-position:50% 50%;
+.home_bg_image {
+ height: 40em;
+ background-size: cover;
+ width: auto;
+ background-image: url('../assets/intelligence.png');
+ background-position: 50% 50%;
}
/*Header*/
.main-container__bg-dark {
opacity: 1;
- background: linear-gradient(to bottom, #B290FF, #2E1D65);
+ background: linear-gradient(to bottom, rgb(62, 59, 68), rgb(11, 10, 15));
transition: opacity 300ms linear;
}
.main-footer__bg-dark {
opacity: 1;
- background: linear-gradient(to bottom, #B290FF, #2E1D65);
+ background: rgb(11, 10, 15);
transition: opacity 300ms linear;
}
.slide-menu {
width: 100%;
}
-}
+}
\ No newline at end of file
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
- *
+ *
* http://www.apache.org/licenses/LICENSE-2.0
- *
+ *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
})
export class RdComponent implements OnInit {
showMenu = false;
- darkModeActive: boolean;
+ darkMode: boolean;
- constructor(public ui: UiService) {
+ constructor(private ui: UiService) {
}
ngOnInit() {
this.ui.darkModeState.subscribe((value) => {
- this.darkModeActive = value;
+ this.darkMode = value;
});
}
}
modeToggleSwitch() {
- this.ui.darkModeState.next(!this.darkModeActive);
+ this.ui.darkModeState.next(!this.darkMode);
}
}
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
- *
+ *
* http://www.apache.org/licenses/LICENSE-2.0
- *
+ *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@Injectable({
providedIn: 'root'
})
-export class ConfirmDialogService {
+export class ConfirmDialogService {
darkMode: boolean;
- panelClass: string = "";
+ panelClass = '';
constructor(private dialog: MatDialog,
- public ui: UiService) { }
+ private ui: UiService) { }
openConfirmDialog(msg: string) {
this.ui.darkModeState.subscribe((isDark) => {
this.darkMode = isDark;
});
if (this.darkMode) {
- this.panelClass = "dark-theme";
+ this.panelClass = 'dark-theme';
} else {
- this.panelClass = "";
+ this.panelClass = '';
}
return this.dialog.open(ConfirmDialogComponent, {
panelClass: this.panelClass,
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
- *
+ *
* http://www.apache.org/licenses/LICENSE-2.0
- *
+ *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
export class ErrorDialogService {
darkMode: boolean;
- panelClass: string = "";
- public errorMessage: string = '';
+ panelClass = '';
+ public errorMessage = '';
constructor(private dialog: MatDialog,
- public ui: UiService) { }
+ private ui: UiService) { }
public displayError(error: string) {
this.ui.darkModeState.subscribe((isDark) => {
this.darkMode = isDark;
});
if (this.darkMode) {
- this.panelClass = "dark-theme";
+ this.panelClass = 'dark-theme';
} else {
- this.panelClass = "";
+ this.panelClass = '';
}
return this.dialog.open(ErrorDialogComponent, {
panelClass: this.panelClass,
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
- *
+ *
* http://www.apache.org/licenses/LICENSE-2.0
- *
+ *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
export class LoadingDialogService {
darkMode: boolean;
- panelClass: string = "";
+ panelClass = '';
constructor(private dialog: MatDialog,
- public ui: UiService) { }
+ private ui: UiService) { }
private loadingDialogRef: MatDialogRef<LoadingDialogComponent>;
this.darkMode = isDark;
});
if (this.darkMode) {
- this.panelClass = "dark-theme";
+ this.panelClass = 'dark-theme';
} else {
- this.panelClass = "";
+ this.panelClass = '';
}
this.loadingDialogRef = this.dialog.open(LoadingDialogComponent, {
panelClass: this.panelClass,
}
stopLoading() {
- this.loadingDialogRef.close()
+ this.loadingDialogRef.close();
}
}
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
- *
+ *
* http://www.apache.org/licenses/LICENSE-2.0
- *
+ *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* limitations under the License.
* ========================LICENSE_END===================================
*/
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {Router} from '@angular/router';
-import {UiService} from '../../services/ui/ui.service';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { UiService } from '../../services/ui/ui.service';
@Component({
selector: 'rd-policy-card',
export class PolicyCardComponent implements OnInit, OnDestroy {
darkMode: boolean;
- constructor(public router: Router, public ui: UiService) { }
+ constructor(public router: Router, private ui: UiService) { }
ngOnInit() {
this.ui.darkModeState.subscribe((isDark) => {
@import './styles/dark-theme';
/* for sidenav to take a whole page */
-html, body {
- margin: 0;
- height: 100%;
- font-family: Helvetica, Arial, sans-serif;
+html,
+body {
+ margin: 0;
+ height: 100%;
+ font-family: Helvetica, Arial, sans-serif;
}
/* notification */
color: #432c85;
font-size: 25px;
font-weight: 100;
-}
+}
\ No newline at end of file
.dark-theme {
color: white;
- $dark-primary: mat-palette($mat-yellow);
- $dark-accent: mat-palette($mat-amber, A400, A100, A700);
+ $dark-primary: mat-palette($mat-blue-grey);
+ $dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-red);
+
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
@include angular-material-theme($dark-theme);
}
.dark-theme .rd-global-page-title {
- color:white;
+ color: white;
}
\ No newline at end of file
Code Review / nonrtric.git / commitdiff