cleanup user profile menu item

This commit is contained in:
Denys Vuika
2023-02-10 18:10:33 -05:00
parent feefdd47d6
commit b2411371d9
3 changed files with 11 additions and 46 deletions

View File

@@ -1,15 +1,10 @@
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="matMenu" class="app-menu-button">
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="matMenu">
<mat-icon title="{{'APP.TOOLTIPS.OPTIONS_SETTINGS' | translate}}">apps</mat-icon>
</button>
<mat-menu #menu="matMenu" xPosition="before">
<div mat-menu-item class="app-menu-user-details" [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
<button class="app-menu-user-details-button" aria-label="matMenu">
<mat-icon>account_circle</mat-icon>
</button>
<div class="app-menu-user-details-name-mail">
<div class="app-menu-user-details-name">{{ userName }}</div>
<div class="app-menu-user-details-name">{{ userEmail }}</div>
</div>
<div mat-menu-item [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
<mat-icon>account_circle</mat-icon>
<span>{{ displayName }}</span>
</div>
<mat-divider></mat-divider>
<button mat-menu-item data-automation-id="language-menu-button" [matMenuTriggerFor]="langMenu">

View File

@@ -1,32 +0,0 @@
app-navigation-menu {
.app-menu-button {
height: 32px;
background: none;
line-height: 24px;
}
}
.mat-menu-panel {
.app-menu-user-details {
display: flex;
height: 66px;
&-button {
height: 32px;
padding: 0;
line-height: 24px;
background: none;
border: none;
margin-top: 14px;
transform: scale(1.2);
}
&-name-mail {
line-height: 40px;
}
&-name {
height: 24px;
}
}
}

View File

@@ -12,20 +12,22 @@ import { ContentApiService } from '@alfresco/aca-shared';
@Component({
selector: 'app-navigation-menu',
templateUrl: './navigation-menu.component.html',
styleUrls: ['./navigation-menu.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class NavigationMenuComponent implements OnInit {
userName = '';
userEmail = '';
displayName = 'Unknown user';
constructor(private contentApi: ContentApiService) {}
ngOnInit() {
this.contentApi.getPerson('-me-').subscribe((person) => {
const personDetails = person?.entry;
this.userName = personDetails.displayName;
this.userEmail = personDetails.email;
this.displayName = personDetails.displayName;
if (personDetails.email) {
this.displayName = `${personDetails.displayName} (${personDetails.email})`;
}
});
}
}