redesign_user-dialog.component_v1

dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html

@@ -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 class="row">
 			<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>
 		</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>
 		</div>
 	</div>
-</form>
+</form> -->

dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.scss

@@ -6,6 +6,50 @@ $mat-card-header-size: 40px !default;
   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);
+}
+

dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts

@@ -55,4 +55,9 @@ export class UserDialogComponent implements OnInit {
 		this.dialogRef.close();
 		this.router.navigate(['/profile']);
 	}
+
+	public navigateToMyDmps() {
+		this.dialogRef.close();
+		this.router.navigate(['/plans']);
+	}
 }

dmp-frontend/src/app/ui/navbar/navbar.component.ts

@@ -14,6 +14,8 @@ import { UserService } from '@app/core/services/user/user.service';
 import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
 import { DmpInvitationDialogComponent } from '../dmp/invitation/dmp-invitation.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');
 
@@ -33,6 +35,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 	language = this.languages[0];
 	currentRoute: string;
 	selectedLanguage = 'en';
+	private user: UserListingModel;
 	@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
 
 	constructor(location: Location,
@@ -41,7 +44,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		private authentication: AuthService,
 		private dialog: MatDialog,
 		private progressIndicationService: ProgressIndicationService,
-		private languageService: LanguageService
+		private languageService: LanguageService,
+		public userService: UserService
 	) {
 		super();
 		this.location = location;
@@ -69,6 +73,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
 			setTimeout(() => { this.progressIndication = x; });
 		});
+		this.getPrincipalAsUser();
 	}
 
 	public isAuthenticated(): boolean {
@@ -79,6 +84,13 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		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() {
 		const toggleButton = this.toggleButton;
 		const body = document.getElementsByTagName('body')[0];
@@ -211,6 +223,9 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 			autoFocus: false,
 			closeOnNavigation: true,
 			disableClose: false,
+			data: {
+				user: this.user
+			},
 			position: { top: '64px', right: '1em' }
 		});
 	}

dmp-frontend/src/assets/i18n/en.json

@@ -1217,6 +1217,7 @@
 	},
 	"USER-DIALOG": {
 		"USER-PROFILE": "My Profile",
+		"USER-PROFILE-SETTINGS": "My Profile Settings...",
 		"EXIT": "Exit ",
 		"LOG-OUT": "Log Out"
 	},

dmp-frontend/src/assets/i18n/es.json

@@ -1198,6 +1198,7 @@
 	},
 	"USER-DIALOG": {
 		"USER-PROFILE": "Mi perfil",
+		"USER-PROFILE-SETTINGS": "My Profile Settings...",
 		"EXIT": "Salir ",
 		"LOG-OUT": "Cerrar la sesión"
 	},

dmp-frontend/src/assets/i18n/gr.json

@@ -1199,6 +1199,7 @@
 	},
 	"USER-DIALOG": {
 		"USER-PROFILE": "Το Προφίλ μου",
+		"USER-PROFILE-SETTINGS": "My Profile Settings...",
 		"EXIT": "Έξοδος ",
 		"LOG-OUT": "Αποσύνδεση"
 	},