Merge branch 'ui-redesign' of gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-redesign
This commit is contained in:
commit
367e6c33f1
|
@ -4,37 +4,45 @@
|
||||||
<h3 class="card-title title">{{'GENERAL.TITLES.SIGN-IN' | translate}}</h3>
|
<h3 class="card-title title">{{'GENERAL.TITLES.SIGN-IN' | translate}}</h3>
|
||||||
<hr class="line">
|
<hr class="line">
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center pb-4">
|
||||||
<div class="d-flex flex-column">
|
<div class="flex-column">
|
||||||
<div *ngIf="hasOpenAireOauth()" class="col-auto pb-4 pr-4">
|
<div *ngIf="hasOpenAireOauth()" class="col-auto pr-4">
|
||||||
<button mat-icon-button (click)="openaireLogin()" class="d-flex justify-content-center">
|
<button mat-icon-button (click)="openaireLogin()" class="d-flex justify-content-center">
|
||||||
<span class="openaireIcon"></span>
|
<span class="openaireIcon"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-column">
|
||||||
|
<div *ngIf="hasOrcidOauth()" class="col-auto pl-4 pr-4">
|
||||||
|
<button mat-icon-button (click)="orcidLogin()" class="d-flex justify-content-center">
|
||||||
|
<span class="orcidIconMedium"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-column">
|
||||||
|
<div *ngIf="hasB2AccessOauth()" class="col-auto pl-4">
|
||||||
|
<button mat-icon-button (click)="b2AccessLogin()" class="d-flex justify-content-center">
|
||||||
|
<span class="iconmedium"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="flex-column">
|
||||||
<div *ngIf="hasGoogleOauth()" class="col-auto pr-4">
|
<div *ngIf="hasGoogleOauth()" class="col-auto pr-4">
|
||||||
<button mat-icon-button id="googleSignInButton" class="d-flex justify-content-center">
|
<button mat-icon-button id="googleSignInButton" class="d-flex justify-content-center">
|
||||||
<span class="googleIcon"></span>
|
<span class="googleIcon"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex flex-column">
|
<div class="flex-column">
|
||||||
<div *ngIf="hasOrcidOauth()" class="col-auto pl-4 pr-4 pb-4">
|
|
||||||
<button mat-icon-button (click)="orcidLogin()" class="d-flex justify-content-center">
|
|
||||||
<span class="orcidIconMedium"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="hasFacebookOauth()" class="col-auto pl-4 pr-4">
|
<div *ngIf="hasFacebookOauth()" class="col-auto pl-4 pr-4">
|
||||||
<button mat-icon-button (click)="facebookLogin()" class="d-flex justify-content-center">
|
<button mat-icon-button (click)="facebookLogin()" class="d-flex justify-content-center">
|
||||||
<span class="facebookIcon"></span>
|
<span class="facebookIcon"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex flex-column">
|
<div class="flex-column">
|
||||||
<div *ngIf="hasB2AccessOauth()" class="col-auto pl-4 pb-4">
|
|
||||||
<button mat-icon-button (click)="b2AccessLogin()" class="d-flex justify-content-center">
|
|
||||||
<span class="iconmedium"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="hasTwitterOauth()" class="col-auto pl-4">
|
<div *ngIf="hasTwitterOauth()" class="col-auto pl-4">
|
||||||
<button mat-icon-button (click)="twitterLogin()" class="d-flex justify-content-center">
|
<button mat-icon-button (click)="twitterLogin()" class="d-flex justify-content-center">
|
||||||
<span class="twitterIcon"></span>
|
<span class="twitterIcon"></span>
|
||||||
|
|
|
@ -7,8 +7,7 @@
|
||||||
<h1 mat-dialog-title class="title">{{'DMP-LISTING.ACTIONS.INVITE-AUTHORS' | translate}}</h1>
|
<h1 mat-dialog-title class="title">{{'DMP-LISTING.ACTIONS.INVITE-AUTHORS' | translate}}</h1>
|
||||||
</div>
|
</div>
|
||||||
<div mat-dialog-content class="row content">
|
<div mat-dialog-content class="row content">
|
||||||
<mat-form-field class="col pt-2 pb-2 mb-4">
|
<mat-form-field class="col pt-0 pb-2 mb-4" appearance="standard">
|
||||||
<mat-label></mat-label>
|
|
||||||
<app-multiple-auto-complete [formControl]="formGroup.get('users')"
|
<app-multiple-auto-complete [formControl]="formGroup.get('users')"
|
||||||
placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}"
|
placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}"
|
||||||
[configuration]="usersAutoCompleteConfiguration">
|
[configuration]="usersAutoCompleteConfiguration">
|
||||||
|
|
|
@ -1,10 +1,38 @@
|
||||||
<form>
|
<form class="mb-0">
|
||||||
|
<div class="dropdown-top"></div>
|
||||||
|
<div class="dropdown-options">
|
||||||
|
<mat-divider class="col-12 top-divider"></mat-divider>
|
||||||
|
<div class="col-12 pl-2">
|
||||||
|
<a mat-button class="profile mt-2 mb-2 pl-0">
|
||||||
|
<mat-icon class="check-icon">check</mat-icon>{{ data.user.email }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<mat-divider class="col-12"></mat-divider>
|
||||||
|
<div class="col-12">
|
||||||
|
<a mat-button class="profile mt-2"
|
||||||
|
(click)="navigateToProfile()">{{'USER-DIALOG.USER-PROFILE-SETTINGS' | translate}}</a>
|
||||||
|
<a mat-button class="profile mb-2"
|
||||||
|
(click)="navigateToMyDmps()">{{'USER-PROFILE.ASSOCIATED-DMPS' | translate}}</a>
|
||||||
|
</div>
|
||||||
|
<mat-divider class="col-12"></mat-divider>
|
||||||
|
<div class="col-12">
|
||||||
|
<a mat-button class="logout mb-2" (click)="logout()">
|
||||||
|
{{ 'USER-DIALOG.LOG-OUT' | translate }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <form>
|
||||||
<div mat-dialog-title>
|
<div mat-dialog-title>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="applyFallbackAvatar($event)">
|
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="applyFallbackAvatar($event)"> -->
|
||||||
<!-- <img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()"> -->
|
<!-- <img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()"> -->
|
||||||
</div>
|
<!-- </div>
|
||||||
<span class="user-label col">{{this.getPrincipalName()}}</span>
|
<span class="user-label col">{{this.getPrincipalName()}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,4 +47,4 @@
|
||||||
<a mat-button class="logout" (click)="logout()"><mat-icon class="mr-1">exit_to_app</mat-icon>{{ 'USER-DIALOG.LOG-OUT' | translate }}</a>
|
<a mat-button class="logout" (click)="logout()"><mat-icon class="mr-1">exit_to_app</mat-icon>{{ 'USER-DIALOG.LOG-OUT' | translate }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form> -->
|
|
@ -6,6 +6,50 @@ $mat-card-header-size: 40px !default;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile, .logout {
|
.top-divider {
|
||||||
margin-left: 3em;
|
border-top-style: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile, .logout {
|
||||||
|
padding-left: 1.1875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #212121;
|
||||||
|
height: 1.875rem;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-top {
|
||||||
|
width: 0rem;
|
||||||
|
border-bottom: 0.625rem solid #FFFFFF;
|
||||||
|
border-left: 0.625rem solid transparent;
|
||||||
|
border-right: 0.625rem solid transparent;
|
||||||
|
margin: 0 87%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-options {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
min-width: 10rem;
|
||||||
|
width: 13.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-options a:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.609) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-options a:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .mat-dialog-container {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0rem;
|
||||||
|
overflow: initial;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
color: #129D99;
|
||||||
|
transform: scale(0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -55,4 +55,9 @@ export class UserDialogComponent implements OnInit {
|
||||||
this.dialogRef.close();
|
this.dialogRef.close();
|
||||||
this.router.navigate(['/profile']);
|
this.router.navigate(['/profile']);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public navigateToMyDmps() {
|
||||||
|
this.dialogRef.close();
|
||||||
|
this.router.navigate(['/plans']);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,6 +14,8 @@ import { UserService } from '@app/core/services/user/user.service';
|
||||||
import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
|
import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
|
||||||
import { DmpInvitationDialogComponent } from '../dmp/invitation/dmp-invitation.component';
|
import { DmpInvitationDialogComponent } from '../dmp/invitation/dmp-invitation.component';
|
||||||
import { StartNewDmpDialogComponent } from '../dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component';
|
import { StartNewDmpDialogComponent } from '../dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component';
|
||||||
|
import { UserListingModel } from '@app/core/model/user/user-listing';
|
||||||
|
import { Principal } from '@app/core/model/auth/principal';
|
||||||
|
|
||||||
const availableLanguages: any[] = require('../../../assets/resources/language.json');
|
const availableLanguages: any[] = require('../../../assets/resources/language.json');
|
||||||
|
|
||||||
|
@ -33,6 +35,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
|
||||||
language = this.languages[0];
|
language = this.languages[0];
|
||||||
currentRoute: string;
|
currentRoute: string;
|
||||||
selectedLanguage = 'en';
|
selectedLanguage = 'en';
|
||||||
|
private user: UserListingModel;
|
||||||
@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
|
@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
|
||||||
|
|
||||||
constructor(location: Location,
|
constructor(location: Location,
|
||||||
|
@ -41,7 +44,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
|
||||||
private authentication: AuthService,
|
private authentication: AuthService,
|
||||||
private dialog: MatDialog,
|
private dialog: MatDialog,
|
||||||
private progressIndicationService: ProgressIndicationService,
|
private progressIndicationService: ProgressIndicationService,
|
||||||
private languageService: LanguageService
|
private languageService: LanguageService,
|
||||||
|
public userService: UserService
|
||||||
) {
|
) {
|
||||||
super();
|
super();
|
||||||
this.location = location;
|
this.location = location;
|
||||||
|
@ -69,6 +73,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
|
||||||
this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
|
this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
|
||||||
setTimeout(() => { this.progressIndication = x; });
|
setTimeout(() => { this.progressIndication = x; });
|
||||||
});
|
});
|
||||||
|
this.getPrincipalAsUser();
|
||||||
}
|
}
|
||||||
|
|
||||||
public isAuthenticated(): boolean {
|
public isAuthenticated(): boolean {
|
||||||
|
@ -79,6 +84,13 @@ export class NavbarComponent extends BaseComponent implements OnInit {
|
||||||
return this.currentRoute === '/language-editor' || this.currentRoute === '/profile';
|
return this.currentRoute === '/language-editor' || this.currentRoute === '/profile';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public getPrincipalAsUser() {
|
||||||
|
const principal: Principal = this.authentication.current();
|
||||||
|
if (principal) {
|
||||||
|
this.userService.getUser(principal.id).pipe(takeUntil(this._destroyed)).subscribe(result => this.user = result);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
sidebarOpen() {
|
sidebarOpen() {
|
||||||
const toggleButton = this.toggleButton;
|
const toggleButton = this.toggleButton;
|
||||||
const body = document.getElementsByTagName('body')[0];
|
const body = document.getElementsByTagName('body')[0];
|
||||||
|
@ -211,6 +223,9 @@ export class NavbarComponent extends BaseComponent implements OnInit {
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
closeOnNavigation: true,
|
closeOnNavigation: true,
|
||||||
disableClose: false,
|
disableClose: false,
|
||||||
|
data: {
|
||||||
|
user: this.user
|
||||||
|
},
|
||||||
position: { top: '64px', right: '1em' }
|
position: { top: '64px', right: '1em' }
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -1238,6 +1238,7 @@
|
||||||
},
|
},
|
||||||
"USER-DIALOG": {
|
"USER-DIALOG": {
|
||||||
"USER-PROFILE": "My Profile",
|
"USER-PROFILE": "My Profile",
|
||||||
|
"USER-PROFILE-SETTINGS": "My Profile Settings...",
|
||||||
"EXIT": "Exit ",
|
"EXIT": "Exit ",
|
||||||
"LOG-OUT": "Log Out"
|
"LOG-OUT": "Log Out"
|
||||||
},
|
},
|
||||||
|
|
|
@ -1216,6 +1216,7 @@
|
||||||
},
|
},
|
||||||
"USER-DIALOG": {
|
"USER-DIALOG": {
|
||||||
"USER-PROFILE": "Mi perfil",
|
"USER-PROFILE": "Mi perfil",
|
||||||
|
"USER-PROFILE-SETTINGS": "My Profile Settings...",
|
||||||
"EXIT": "Salir ",
|
"EXIT": "Salir ",
|
||||||
"LOG-OUT": "Cerrar la sesión"
|
"LOG-OUT": "Cerrar la sesión"
|
||||||
},
|
},
|
||||||
|
|
|
@ -1217,6 +1217,7 @@
|
||||||
},
|
},
|
||||||
"USER-DIALOG": {
|
"USER-DIALOG": {
|
||||||
"USER-PROFILE": "Το Προφίλ μου",
|
"USER-PROFILE": "Το Προφίλ μου",
|
||||||
|
"USER-PROFILE-SETTINGS": "My Profile Settings...",
|
||||||
"EXIT": "Έξοδος ",
|
"EXIT": "Έξοδος ",
|
||||||
"LOG-OUT": "Αποσύνδεση"
|
"LOG-OUT": "Αποσύνδεση"
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue