You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by dy...@apache.org on 2022/02/16 09:16:51 UTC
[incubator-datalab] branch develop updated: [DATALAB-2686] changed style of log out btn
This is an automated email from the ASF dual-hosted git repository.
dyankiv pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
The following commit(s) were added to refs/heads/develop by this push:
new 76c7dd5 [DATALAB-2686] changed style of log out btn
new 2a0bc20 Merge pull request #1416 from GennadiyShpak/feat/DATALAB-2686/solution-header-improvement
76c7dd5 is described below
commit 76c7dd515700e04e8aa74155b0842decbaa9c8fd
Author: Hennadii_Shpak <bo...@gmail.com>
AuthorDate: Tue Feb 15 20:47:02 2022 +0200
[DATALAB-2686] changed style of log out btn
---
.../src/app/shared/navbar/navbar.component.html | 36 ++++++++++--
.../src/app/shared/navbar/navbar.component.scss | 67 +++++++++++++++++++++-
.../src/app/shared/navbar/navbar.component.ts | 17 +++++-
.../webapp/src/app/shared/navbar/navbar.config.ts | 5 ++
4 files changed, 115 insertions(+), 10 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
index 367c63c..2b040c6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
@@ -37,10 +37,16 @@
<!-- <a *ngIf="healthStatus.status" [routerLink]="['/environment_management']" class="statusbar">
<span class="material-icons" ngClass="{{healthStatus.status || ''}}">radio_button_checked</span>
</a> -->
- <a class="statusbar" #info (click)="actions.toggle($event, info)" *ngIf="metadata">
- <span class="material-icons meta">info</span>
+
+ <a
+ *ngIf="metadata"
+ class="statusbar about-btn--wrapper"
+ #info
+ (click)="actions.toggle($event, info)">
+ <span class="about-btn">About</span>
</a>
- <bubble-up #actions class="list-menu" position="bottom-right">
+
+ <bubble-up #actions class="list-menu" position="bottom-left">
<div class="app-info">
<p>
<strong>Version: </strong>
@@ -61,9 +67,27 @@
</p>
</div>
</bubble-up>
- <button class="btn btn-logout ani" (click)="logout_btnClick()">
- Log out <span class="user-name">{{currentUserName}}</span>
- </button>
+
+ <span class="help-link--wrapper">
+ <a class="help-link" href="https://github.com/apache/incubator-datalab/blob/master/USER_GUIDE.md" target="_blank">Help</a>
+ </span>
+
+ <span
+ class="material-icons account-icon--nav-bar account-icon" #login (click)="loginInfo.toggle($event, login)">
+ account_circle
+ </span>
+ <bubble-up class="user-info-popup__conponent" #loginInfo position="bottom-left">
+ <div class="user-info-popup--wrapper">
+ <span class="material-icons account-icon--buble">
+ account_circle
+ </span>
+ <span class="user-name">{{userData.name}}</span>
+ <span class="user-mail">{{userData.email}}</span>
+ <button type="button" class="logout-btn" (click)="logout_btnClick()">
+ Log out from account
+ </button>
+ </div>
+ </bubble-up>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
index 3d99f7d..11849b0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
@@ -129,7 +129,6 @@
p {
strong {
- display: inline-block;
width: 120px;
color: #455c74;
font-size: 14px;
@@ -145,7 +144,6 @@
}
span {
- display: inline-block;
width: 180px;
vertical-align: bottom;
}
@@ -332,3 +330,68 @@ mat-sidenav-content {
.blue {
color: #35afd5;
}
+.account-icon {
+ margin-right: 20px;
+ color: white;
+ font-size: 34px;
+ cursor: pointer;
+}
+
+.about-btn {
+ background-color: transparent;
+ color: white;
+ border: none;
+ outline: none;
+}
+
+.help-link {
+ color: white;
+ font-size: 16px;
+
+ &--wrapper {
+ margin-right: 20px;
+ }
+}
+
+.about-btn--wrapper {
+ margin-right: 20px;
+}
+
+.user-info-popup{
+ &__conponent.bubble-up {
+ width: 300px;
+ height: 180px;
+ top: 48px !important;
+ box-shadow: none;
+ border: 1px solid #36afd5;
+ }
+}
+
+.user-info-popup--wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ height: 100%;
+ padding: 15px 5px;
+}
+
+.account-icon--buble {
+ color: #36afd5;
+ font-size: 40px;
+}
+
+.logout-btn {
+ padding: 5px 10px;
+ color: white;
+ background-color: #36afd5;
+ border: none;
+ outline: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.list-menu.bubble-up {
+ width: 300px;
+ top: 48px !important;
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
index 166ed69..da813f7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
@@ -42,7 +42,7 @@ import {
} from '@angular/animations';
import {skip, take} from 'rxjs/operators';
import {ProgressBarService} from '../../core/services/progress-bar.service';
-import{ sideBarNamesConfig } from './navbar.config'
+import{ sideBarNamesConfig, UserInfo } from './navbar.config'
interface Quota {
projectQuotas: {};
@@ -94,6 +94,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
healthStatus: GeneralEnvironmentStatus;
subscriptions: Subscription = new Subscription();
sideBarNames!: Record<string, string>;
+ userData!: UserInfo;
constructor(
public toastr: ToastrService,
@@ -124,6 +125,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
this.checkVersionData();
}
});
+ this.userData = this.getUserData();
}
ngOnDestroy(): void {
@@ -194,12 +196,23 @@ export class NavbarComponent implements OnInit, OnDestroy {
} else {
this.storage.setBillingQuoteUsed('');
}
-
+
if (this.dialog.openDialogs.length > 0 || this.dialog.openDialogs.length > 0) return;
checkQuotaAlert && this.emitQuotes(checkQuotaAlert, params.totalQuotaUsed, exceedProjects, informProjects);
});
}
}
+
+ private getUserData(): UserInfo {
+ const token = localStorage.getItem('JWT_TOKEN')
+ const [_, tokenInfo] = token.split('.');
+ const {name, email} = JSON.parse(atob(tokenInfo));
+
+ return {
+ name: name || 'Jhon Doe',
+ email: email || 'Email not found'
+ }
+ }
private checkAssignment(params): void {
if (this.dialog.openDialogs.length > 0) return;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.config.ts b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.config.ts
index ad12402..38df6d2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.config.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.config.ts
@@ -28,3 +28,8 @@ export const sideBarNamesConfig: Record<string, string> = {
resources: 'Resources',
configuration: 'Configuration'
}
+
+export interface UserInfo {
+ email: string;
+ name: string;
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org