Portal SDK UI Issues

-Tab icon
-Grid elements size correction
-Drag & Delete icons misalignment
-Left menu collapse functionality (CSS/ Arrows)
-App name in header

Change-Id: Ibcaec119a6009a5fd9305b1ed838b64a0bcfb749
Issue-ID: PORTAL-933
Signed-off-by: krutbhat@att.com

diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/bar-chart/bar-chart.component.html b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/bar-chart/bar-chart.component.html
index 16141e6..26c5c21 100644 (file)
--- a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/bar-chart/bar-chart.component.html
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/bar-chart/bar-chart.component.html
@@ -34,6 +34,6 @@
   ============LICENSE_END============================================
    
 -->
-<div>
-  <canvas id="fixes-enhancements"></canvas>
+<div style="display: block; height: 250px; width: 400px;"> 
+  <canvas id="fixes-enhancements" style="display: block; height: 250px; width: 400px;"></canvas>
 </div>

diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/pie-chart/pie-chart.component.html b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/pie-chart/pie-chart.component.html
index e4977f9..8bc4286 100644 (file)
--- a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/pie-chart/pie-chart.component.html
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/pie-chart/pie-chart.component.html
@@ -34,6 +34,6 @@
   ============LICENSE_END============================================
    
 -->
-<div  style="display: block; height: 250px; width: 450px;">
-    <canvas id="fb-root-causes" style="display: block; height: 250px; width: 450px;"></canvas>
+<div  style="display: block; height: 250px; width: 428px;">
+    <canvas id="fb-root-causes" style="display: block; height: 250px; width: 428px;"></canvas>
 </div>

diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.css b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.css
index 0124786..50a2f69 100644 (file)
--- a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.css
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.css
@@ -203,7 +203,6 @@ button {
   cursor: pointer;
   background: transparent;
   border: none;
-  padding: 10px;
   font-size: xx-large;
   outline: none;
 }

diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.html b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.html
index d010f98..a58d7e5 100644 (file)
--- a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.html
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.html
@@ -100,7 +100,7 @@
           <div class="gridster-box"> 
             <div class="gridster-box-header">
                 <h3>Important Links</h3>
-                <div class="gridster-box-content">
+                <div class="gridster-box-content" style="height:390px">
                   <div>
                     <table>
                       <thead>

diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.ts
index 47e83e9..5a56c9a 100644 (file)
--- a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.ts
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.ts
@@ -118,8 +118,8 @@ export class WelcomeDashboardComponent {
 
   ngOnInit(){  
     this.gridOptions = {
-      minCols: 6,
-      maxCols: 6,
+      minCols: 4,
+      maxCols: 4,
       minRows: 10,
       maxRows: 10,
       maxItemCols: 50,

diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/favicon.ico b/ecomp-sdk/epsdk-app-os/ngappsrc/src/favicon.ico
index 8081c7c..4d42598 100644 (file)
Binary files a/ecomp-sdk/epsdk-app-os/ngappsrc/src/favicon.ico and b/ecomp-sdk/epsdk-app-os/ngappsrc/src/favicon.ico differ

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html
index 04701ca..9523894 100644 (file)
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html
@@ -7,7 +7,7 @@
             <ul class="navbar-nav ml-auto">
                 <li class="nav-item dropdown" ngbDropdown>
                     <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
-                        <i class="fa fa-user"></i> {{userFirstName}} <b class="caret"></b>
+                        <i class="icon ion-md-person"></i> {{userFirstName}} <b class="caret"></b>
                     </a>
 
                     <div class="dropdown-menu-right" ngbDropdownMenu>
@@ -16,10 +16,10 @@
             
                     <br/>
                       <div ><span class="reg-userEmail-value-spn">
-                        <div>Email:</div>{{userEmail}}</span></div>
+                        <div style="font-weight: bold;">Email:</div>{{userEmail}}</span></div>
                        <br/>
                         <div ><span class="reg-userEmail-value-spn">
-                            <div>userId:</div>{{userId}}</span></div>
+                            <div style="font-weight: bold;">User Id:</div>{{userId}}</span></div>
                         <br/>    
                             <div id="reg-logout-div" style="padding-top: 8px">
                                     <a href="logout.htm" id="allLogout" class="btn btn-primary">

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.ts
index 7bf5c64..7d228ee 100644 (file)
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.ts
@@ -78,7 +78,7 @@ export class HeaderComponent implements OnInit {
         } 
 
         this.pushRightClass = 'push-right';
-        this.appName= 'ONAP Portal' ;
+        this.appName= 'Portal SDK' ;
         let result = this.headerService.getTopMenuItems();
           result.subscribe(res => {
               this.response = res;

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html
index e640f84..5f8a2ec 100644 (file)
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html
@@ -1,7 +1,11 @@
-<div class="sidebar" [ngClass]="{'siderbar-height': showHeader, 'siderbar-height-noHeader': !showHeader}" >
+<div class="sidebar" [ngClass]="{'siderbar-height': showHeader, 'siderbar-height-noHeader': !showHeader, collapsed:collapsed}" >
     <nav  [ngClass]="{sidebarPushRight: isActive, collapsed: collapsed}">
         <div class="toggle-button" [ngClass]="{collapsed: collapsed}" (click)="toggleCollapsed()">
-                       <i class="fa fa-angle-double-{{collapsed?'right':'left'}}"></i>&nbsp;
+                       <!--<i class="fa fa-angle-double-{{collapsed?'right':'left'}}"></i>&nbsp;-->
+                       <i class="icon ion-md-arrow-{{collapsed?'dropright':'dropleft'}}" style="float:right"></i> 
+                       <i class="icon ion-md-arrow-{{collapsed?'dropright':'dropleft'}}" style="float:right"></i>&nbsp;
+                       
+                       
                </div>
                <div class="list-group" *ngFor="let menu of menuData ; index as item">
        
@@ -23,7 +27,7 @@
                                <a href="javascript:void(0)" class="list-group-item"
                                                (click)="addExpandClass(menu.name)">
                                                <i class="{{menu.imageSrc}}"></i>&nbsp;
-                                               <i style="float: right;" class="icon ion-ios-add-circle-outline"></i>&nbsp;
+                                               <i *ngIf = "!collapsed" style="float: right;" class="icon ion-ios-add-circle-outline"></i>&nbsp;
                                                <span>{{menu.name}}</span>
                                </a>
                                <li class="nested" [class.expand]="showMenu === menu.name">
@@ -45,4 +49,4 @@
                        </div>
                </div>
     </nav>
-</div>
\ No newline at end of file
+</div> 
\ No newline at end of file

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.ts
index 6487d74..fbe38c9 100644 (file)
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.ts
@@ -144,6 +144,8 @@ export class SidebarComponent implements OnInit {
         } else {
             this.showMenu = element;
         }
+        this.collapsed=false;
+        this.collapsedEvent.emit(false);
     }
 
     toggleCollapsed() {