MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Adds: Logout on sidebar mobile mode

This commit is contained in:
apapachristou 2019-06-05 10:19:28 +03:00
parent 1eb9126d8c
commit 770fb685a8
3 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
dmp-frontend/src/app/ui/sidebar/sidebar.component.html
View File

@ -29,15 +29,21 @@
<li class="nav-item">
<a class="nav-link" *ngIf="isAuthenticated();else loginoption">
<p style="display: flex; align-items: center;" [routerLink]=" ['/profile']">
<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()">
<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()"
[src]="this.getPrincipalAvatar()">
<span class="d-lg-none d-md-block">{{ 'SIDE-BAR.ACCOUNT' | translate }}</span>
</p>
</a>
<a class="nav-link" *ngIf="isAuthenticated()" (click)="logout()">
<i class="material-icons">exit_to_app</i>
<p class="login-label">{{ 'USER-DIALOG.LOG-OUT' | translate }}</p>
</a>
</li>
<ng-template #loginoption>
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
</button>
<a class="nav-link login" [routerLink]=" ['/login'] ">
<i class="material-icons">vpn_key</i>
<p class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</p>
</a>
</ng-template>
</ul>
</div>
@ -45,12 +51,14 @@
<!-- END OF MOBILE MENU -->
<!-- Sidebar Menu -->
<ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst" [class.nav-list-item]="(isAuthenticated() || !groupMenuItem.requiresAuthentication)">
<ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst"
[class.nav-list-item]="(isAuthenticated() || !groupMenuItem.requiresAuthentication)">
<div *ngIf="showItem(groupMenuItem);">
<div class="sidebarSubtitle">
<p>{{groupMenuItem.title | translate}}</p>
</div>
<li routerLinkActive="active" *ngFor="let groupMenuRoute of groupMenuItem.routes" class="{{groupMenuRoute.class}} nav-item">
<li routerLinkActive="active" *ngFor="let groupMenuRoute of groupMenuItem.routes"
class="{{groupMenuRoute.class}} nav-item">
<a class="nav-link" [routerLink]="[groupMenuRoute.path]">
<i *ngIf="isFirst" class="material-icons">{{ groupMenuRoute.icon }}</i>
<i *ngIf="!isFirst" class="material-icons-outlined">{{ groupMenuRoute.icon }}</i>

22
dmp-frontend/src/app/ui/sidebar/sidebar.component.scss
View File

@ -1,13 +1,21 @@
$mat-card-header-size: 40px !default;
$mat-card-header-size: 30px !default;
.my-mat-card-avatar {
height: $mat-card-header-size;
width: $mat-card-header-size;
border-radius: 50%;
flex-shrink: 0;
margin-right: 7px;
height: $mat-card-header-size;
width: $mat-card-header-size;
border-radius: 50%;
flex-shrink: 0;
margin-right: 7px;
}
.nav-list-item {
margin-top: 20px;
margin-top: 20px;
}
.login {
margin-top: 15px !important;
}
.login-label {
text-transform: uppercase;
}

11
dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
View File

@ -53,7 +53,12 @@ export class SidebarComponent implements OnInit {
publicItems: GroupMenuItem;
groupMenuItems: GroupMenuItem[] = [];
constructor(public translate: TranslateService, private authentication: AuthService, private dialog: MatDialog) { }
constructor(
public translate: TranslateService,
private authentication: AuthService,
private dialog: MatDialog) {
}
ngOnInit() {
this.generalItems = {
@ -122,6 +127,10 @@ export class SidebarComponent implements OnInit {
}
}
public logout(): void {
this.authentication.logout();
}
showItem(value: GroupMenuItem) {
if (value.requiresAdmin) {
return this.isAdmin();