Dark mode default 85/1685/2
authorPatrikBuhr <patrik.buhr@est.tech>
Tue, 19 Nov 2019 08:56:44 +0000 (09:56 +0100)
committerPatrikBuhr <patrik.buhr@est.tech>
Wed, 20 Nov 2019 11:17:13 +0000 (12:17 +0100)
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 <patrik.buhr@est.tech>
dashboard/webapp-frontend/src/app/footer/footer.component.html
dashboard/webapp-frontend/src/app/policy-control/policy-control.component.html
dashboard/webapp-frontend/src/app/policy-control/policy-control.component.scss
dashboard/webapp-frontend/src/app/policy-control/policy-control.component.ts
dashboard/webapp-frontend/src/app/policy-control/policy-instance.component.scss
dashboard/webapp-frontend/src/app/policy-control/policy-instance.datasource.ts
dashboard/webapp-frontend/src/app/services/ui/ui.service.ts
dashboard/webapp-frontend/src/app/ui/policy-card/policy-card.component.scss

index eca6cf3..6365e3a 100644 (file)
@@ -22,6 +22,4 @@
   Copyright (C) 2019 AT&T Intellectual Property. Licensed under the Apache License, Version 2.0.
   <br />
   Modifications Copyright (C) 2019 Nordix Foundation
-  <br />
-  Version {{dashboardVersion}}
 </div>
\ No newline at end of file
index 7bfa7f7..1eef5c5 100644 (file)
     class="policy-type-table mat-elevation-z8">
 
     <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Policy Type</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef>Policy Type</mat-header-cell>
         <mat-cell *matCellDef="let policyType">
             <mat-icon matTooltip="Properties">{{isInstancesShown(policyType)  ? 'expand_less' : 'expand_more'}}
             </mat-icon>
-            {{getPolicyTypeName(policyType)}}
+            {{policyType.name}}
         </mat-cell>
     </ng-container>
 
@@ -49,7 +49,7 @@
     <!-- =================== 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 [policyType]=policyType [expanded]=this.getExpandedObserver(policyType)>
             </rd-policy-instance>
         </mat-cell>
     </ng-container>
index f93e4ff..fe0a741 100644 (file)
 }
 
 .action-cell {
-      display: flex;
-      justify-content: flex-end;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .display-none {
   display: none;
-}
+}
\ No newline at end of file
index 3bfe5ea..019a637 100644 (file)
@@ -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<boolean> = new Subject<boolean>();
+    isExpanded: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(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<string, PolicyTypeInfo>();
+    policyTypeInfo = new Map<string, PolicyTypeInfo>();
     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<boolean> {
-        return this.getPolicyTypeInfo(policyType).isExpandedObservers;
+    getExpandedObserver(policyType: PolicyType): Observable<boolean> {
+        return this.getPolicyTypeInfo(policyType).isExpanded.asObservable();
     }
 }
index 83f6f66..b6a29a4 100644 (file)
@@ -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 {
index c74c9ab..53a6239 100644 (file)
@@ -42,9 +42,9 @@ export class PolicyInstanceDataSource extends DataSource<PolicyInstance> {
     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<PolicyInstance> {
     }
 }
 
-function compare(a: string, b: string, isAsc: boolean) {  
+function compare(a: string, b: string, isAsc: boolean) {
     return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
index 1e2376a..30f92d0 100644 (file)
@@ -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<boolean>(false);
+    this.darkModeState = new BehaviorSubject<boolean>(true);
   }
 }
index 1b3c349..5ecd585 100644 (file)
@@ -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