From 471200592f250c2de77cd4eb1a965da929f210fb Mon Sep 17 00:00:00 2001 From: PatrikBuhr Date: Tue, 19 Nov 2019 09:56:44 +0100 Subject: [PATCH 1/1] Dark mode default Decreased size of copyright text. Bugfix, removed minsize of instance table, Bugfix, disabling of sorting of types. This is due to a bug in angular. Change-Id: I2fdef23d700043268983decfc64830c19ad97f0d Issue-ID: NONRTRIC-61 Signed-off-by: PatrikBuhr --- .../src/app/footer/footer.component.html | 2 -- .../policy-control/policy-control.component.html | 6 ++-- .../policy-control/policy-control.component.scss | 6 ++-- .../app/policy-control/policy-control.component.ts | 42 ++++++++++------------ .../policy-control/policy-instance.component.scss | 3 +- .../policy-control/policy-instance.datasource.ts | 6 ++-- .../src/app/services/ui/ui.service.ts | 10 +++--- .../app/ui/policy-card/policy-card.component.scss | 4 +-- 8 files changed, 36 insertions(+), 43 deletions(-) diff --git a/dashboard/webapp-frontend/src/app/footer/footer.component.html b/dashboard/webapp-frontend/src/app/footer/footer.component.html index eca6cf3a..6365e3a2 100644 --- a/dashboard/webapp-frontend/src/app/footer/footer.component.html +++ b/dashboard/webapp-frontend/src/app/footer/footer.component.html @@ -22,6 +22,4 @@ Copyright (C) 2019 AT&T Intellectual Property. Licensed under the Apache License, Version 2.0.
Modifications Copyright (C) 2019 Nordix Foundation -
- Version {{dashboardVersion}} \ No newline at end of file diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html index 7bfa7f7c..1eef5c5a 100644 --- a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html +++ b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html @@ -24,11 +24,11 @@ class="policy-type-table mat-elevation-z8"> - Policy Type + Policy Type {{isInstancesShown(policyType) ? 'expand_less' : 'expand_more'}} - {{getPolicyTypeName(policyType)}} + {{policyType.name}} @@ -49,7 +49,7 @@ - + diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.scss b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.scss index f93e4ffe..fe0a7414 100644 --- a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.scss +++ b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.scss @@ -36,10 +36,10 @@ } .action-cell { - display: flex; - justify-content: flex-end; + display: flex; + justify-content: flex-end; } .display-none { display: none; -} +} \ No newline at end of file diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.ts b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.ts index 3bfe5eaa..019a637b 100644 --- a/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.ts +++ b/dashboard/webapp-frontend/src/app/policy-control/policy-control.component.ts @@ -33,13 +33,13 @@ import { PolicyInstance } from '../interfaces/policy.types'; import { NotificationService } from '../services/ui/notification.service'; import { ErrorDialogService } from '../services/ui/error-dialog.service'; import { ConfirmDialogService } from './../services/ui/confirm-dialog.service'; -import { Subject } from 'rxjs'; +import { BehaviorSubject, Observable } from 'rxjs'; import { UiService } from '../services/ui/ui.service'; class PolicyTypeInfo { - constructor(public type: PolicyType, public isExpanded: boolean) { } + constructor(public type: PolicyType) { } - isExpandedObservers: Subject = new Subject(); + isExpanded: BehaviorSubject = new BehaviorSubject(false); } @Component({ @@ -48,18 +48,20 @@ class PolicyTypeInfo { styleUrls: ['./policy-control.component.scss'], animations: [ trigger('detailExpand', [ - state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })), - state('expanded', style({ height: '*', visibility: 'visible' })), + state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })), + state('expanded', style({ height: '*' })), transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')), + transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')) ]), ], }) export class PolicyControlComponent implements OnInit { + policyTypesDataSource: PolicyTypeDataSource; @ViewChild(MatSort, { static: true }) sort: MatSort; - expandedTypes = new Map(); + policyTypeInfo = new Map(); darkMode: boolean; constructor( @@ -83,39 +85,33 @@ export class PolicyControlComponent implements OnInit { const info: PolicyTypeInfo = this.getPolicyTypeInfo(policyType); dialogRef.afterClosed().subscribe( (result: any) => { - info.isExpandedObservers.next(info.isExpanded); + info.isExpanded.next(info.isExpanded.getValue()); } ); } toggleListInstances(policyType: PolicyType): void { + console.log('1toggleListInstances ' + + policyType.name + ' ' + this.getPolicyTypeInfo(policyType).isExpanded.getValue()); const info = this.getPolicyTypeInfo(policyType); - info.isExpanded = !info.isExpanded; - info.isExpandedObservers.next(info.isExpanded); + info.isExpanded.next(!info.isExpanded.getValue()); + console.log('2toggleListInstances ' + + policyType.name + ' ' + this.getPolicyTypeInfo(policyType).isExpanded.getValue()); + } getPolicyTypeInfo(policyType: PolicyType): PolicyTypeInfo { - let info: PolicyTypeInfo = this.expandedTypes.get(policyType.name); + let info: PolicyTypeInfo = this.policyTypeInfo.get(policyType.name); if (!info) { - info = new PolicyTypeInfo(policyType, false); - this.expandedTypes.set(policyType.name, info); + info = new PolicyTypeInfo(policyType); + this.policyTypeInfo.set(policyType.name, info); } return info; } isInstancesShown(policyType: PolicyType): boolean { - return this.getPolicyTypeInfo(policyType).isExpanded; - } - - getPolicyTypeName(type: PolicyType): string { - const schema = JSON.parse(type.create_schema); - if (schema.title) { - return schema.title; - } - return type.name; + return this.getPolicyTypeInfo(policyType).isExpanded.getValue(); } - getObservable(policyType: PolicyType): Subject { - return this.getPolicyTypeInfo(policyType).isExpandedObservers; + getExpandedObserver(policyType: PolicyType): Observable { + return this.getPolicyTypeInfo(policyType).isExpanded.asObservable(); } } diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.scss b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.scss index 83f6f665..b6a29a4a 100644 --- a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.scss +++ b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.scss @@ -20,7 +20,6 @@ .instances-table { width: 60%; - min-height: 150px; min-width: 600px; margin-top: 10px; margin-bottom: 10px; @@ -28,7 +27,7 @@ } .table-dark { - background-color: #1d1d27; + background-color: #2d2d3d; } .action-cell { diff --git a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts index c74c9ab2..53a6239e 100644 --- a/dashboard/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts +++ b/dashboard/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts @@ -42,9 +42,9 @@ export class PolicyInstanceDataSource extends DataSource { public rowCount = 1; // hide footer during intial load constructor( - private policySvc: PolicyService, + private policySvc: PolicyService, public sort: MatSort, - private notificationService: NotificationService, + private notificationService: NotificationService, private policyType: PolicyType) { super(); } @@ -95,6 +95,6 @@ export class PolicyInstanceDataSource extends DataSource { } } -function compare(a: string, b: string, isAsc: boolean) { +function compare(a: string, b: string, isAsc: boolean) { return (a < b ? -1 : 1) * (isAsc ? 1 : -1); } diff --git a/dashboard/webapp-frontend/src/app/services/ui/ui.service.ts b/dashboard/webapp-frontend/src/app/services/ui/ui.service.ts index 1e2376aa..30f92d09 100644 --- a/dashboard/webapp-frontend/src/app/services/ui/ui.service.ts +++ b/dashboard/webapp-frontend/src/app/services/ui/ui.service.ts @@ -7,9 +7,9 @@ * 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. @@ -17,8 +17,8 @@ * limitations under the License. * ========================LICENSE_END=================================== */ -import {Injectable} from '@angular/core'; -import {BehaviorSubject} from 'rxjs'; +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; @Injectable() export class UiService { @@ -27,6 +27,6 @@ export class UiService { constructor() { // TODO: if the user is signed in get the default value from Firebase - this.darkModeState = new BehaviorSubject(false); + this.darkModeState = new BehaviorSubject(true); } } diff --git a/dashboard/webapp-frontend/src/app/ui/policy-card/policy-card.component.scss b/dashboard/webapp-frontend/src/app/ui/policy-card/policy-card.component.scss index 1b3c349d..5ecd5858 100644 --- a/dashboard/webapp-frontend/src/app/ui/policy-card/policy-card.component.scss +++ b/dashboard/webapp-frontend/src/app/ui/policy-card/policy-card.component.scss @@ -35,7 +35,7 @@ } .add__card-dark { - background: linear-gradient(to bottom, #711B86, #00057A); + background: linear-gradient(rgb(78, 78, 129), rgb(45, 44, 61)); color: white; } @@ -55,4 +55,4 @@ .add__icon { width: 10rem; margin-bottom: 1.15rem; -} +} \ No newline at end of file -- 2.16.6