MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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
This commit is contained in:
konstantina.galouni 2019-12-13 15:40:13 +00:00
parent 879438d1e5
commit 1957c29286
3 changed files with 47 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
login/userMini.component.ts
View File

@ -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()" >
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>
<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 [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>
<text x="50%" y="50%" text-anchor="middle" fill="#313179" stroke="#313179" dy=".4em" font-size="1.5em">
<circle [attr.class]="'userBox '+colors" cx="30" cy="30" r="20" stroke-width="2"></circle>
<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);
}

21
login/userMiniModule.module.ts Normal file
View File

@ -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 {
}

15
sharedComponents/navigationBar.module.ts
View File

@ -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 { ConfigurationServiceModule } from '../utils/configuration/configurationService.module';
import { UserMiniModule} from '../login/userMiniModule.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{ }