[Trunk | Library]:

1. login/userMiniModule.module.ts: Created UserMiniModule to import it wherever needed.
2. navigationBar.module.ts: use UserMiniModule.
3. userMini.component.ts: [For dashboard]: Add input variable 'colors' ('dark' on light background - 'light' on dark background) & add classes according to background & show user icon when no letters in user's name.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57881 d315682c-612b-4755-9ff5-7f18f6832af3

login/userMini.component.ts

@@ -75,18 +75,27 @@ import{EnvProperties} from '../utils/properties/env-properties';
       </ng-container>
 
       <ng-container *ngIf="dashboard">
-        <a  *ngIf="!loggedIn" class="loginLink uk-light" (click)="logIn()" >
+        <a  *ngIf="!loggedIn" [class]="'loginLink '+colors" (click)="logIn()" >
-          Sign in  <span class=" uk-margin-small-left uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
+          Sign in  <span class=" uk-margin-small-left uk-margin-small-right uk-icon" >
+            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">
+              <circle [attr.class]="'loginLink userBox '+colors" cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
+              <path [attr.class]="'loginLink userBox '+colors" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
+            </svg> </span>
         </a>
-        <a *ngIf="loggedIn" class="user_action_image">
+        <a *ngIf="loggedIn" class="user_action_image uk-icon">
           <svg height="60" width="60">
-            <circle cx="30" cy="30" r="20" stroke="white" fill="white" stroke-width="3"></circle>
+            <circle [attr.class]="'userBox '+colors" cx="30" cy="30" r="20" stroke-width="2"></circle>
-            <text x="50%" y="50%" text-anchor="middle" fill="#313179" stroke="#313179"  dy=".4em" font-size="1.5em">
+            <text *ngIf="firstLetters" [attr.class]="'userBox '+colors" x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="1.5em">
               {{firstLetters}}
             </text>
+            <svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20" x="20">
+              <circle [attr.class]="'icon userBox '+colors" cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
+              <path [attr.class]="'icon userBox '+colors" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
+            </svg>
           </svg>
+          <i [class]="'material-icons md-'+colors">keyboard_arrow_down</i>
         </a>
-        <div *ngIf="loggedIn" uk-dropdown="mode: click; offset: -2; delay-hide: 0; flip: false" #userMenu
+        <div *ngIf="loggedIn" uk-dropdown="mode: click; offset: -2; delay-hide: 0; flip: false; pos: bottom-right" #userMenu
              class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
           <div class="md-card uk-dark">
             <div class="md-card-content uk-position-relative">
@@ -111,11 +120,12 @@ import{EnvProperties} from '../utils/properties/env-properties';
 
 export class UserMiniComponent implements OnInit, OnChanges{
     @Input() user: User;
-    public firstLetters: string = "";
     public loggedIn: boolean = false;
     public isAuthorized: boolean = false;
     @Input() public mobileView:boolean = false ;
+    public firstLetters: string = "";
     @Input() public dashboard: boolean = false;
+    @Input() public colors: string = "light";  // 'dark' on light background - 'light' on dark background
     public server: boolean = true;
     public routerHelper:RouterHelper = new RouterHelper();
     @Input() userMenuItems;
@@ -191,6 +201,7 @@ export class UserMiniComponent implements OnInit, OnChanges{
     }
 
     parseName() {
+      this.firstLetters = "";
       if(this.user && this.user.firstname) {
         this.firstLetters += this.user.firstname.substr(0, 1);
       }

login/userMiniModule.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from "@angular/router";
+
+import {UserMiniComponent} from "./userMini.component";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule
+  ],
+  declarations: [
+    UserMiniComponent
+  ],
+  providers: [],
+  exports: [
+    UserMiniComponent
+  ]
+})
+export class UserMiniModule {
+}

sharedComponents/navigationBar.module.ts

@@ -2,24 +2,25 @@ import { NgModule }            from '@angular/core';
 import { CommonModule }        from '@angular/common';
 import { FormsModule }         from '@angular/forms';
 
-import {  RouterModule } from "@angular/router";
+import { RouterModule } from "@angular/router";
 
-import {NavigationBarComponent} from './navigationBar.component';
+import { NavigationBarComponent} from './navigationBar.component';
 
-import {UserMiniComponent} from '../login/userMini.component';
+import { UserMiniModule} from '../login/userMiniModule.module';
- import { ConfigurationServiceModule } from '../utils/configuration/configurationService.module';
+import { ConfigurationServiceModule } from '../utils/configuration/configurationService.module';
 
 @NgModule({
   imports: [
     CommonModule, FormsModule,
-     RouterModule, ConfigurationServiceModule
+    RouterModule, ConfigurationServiceModule,
+    UserMiniModule
   ],
   declarations: [
-    NavigationBarComponent, UserMiniComponent
+    NavigationBarComponent
   ],
   providers:[],
   exports: [
-    NavigationBarComponent,UserMiniComponent
+    NavigationBarComponent
     ]
 })
 export class NavigationBarModule{ }