Skip to content

Commit

Permalink
Merge pull request #696 from MauroDataMapper/feature/gh-682
Browse files Browse the repository at this point in the history 
gh-682 Adjust position of elements in header
  • Loading branch information
@jamesrwelch
jamesrwelch authored Dec 7, 2022
2 parents fef2ee4 + 4292b47 commit d2ffd0d
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 188 deletions.
367 changes: 180 additions & 187 deletions src/app/navbar/navbar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,203 +17,196 @@
SPDX-License-Identifier: Apache-2.0
-->
<header id="mdm--header">
<div class="container">
<mat-toolbar id="mdm--navbar" color="primary" class="mb-0">
<nav
id="mdm--navbar-desktop"
flex
fxLayout="row"
fxLayoutAlign="space-between"
>
<div class="mdm--navbar-brand">
<a
id="mdm-logo"
class="mdm-navbar__brand--logo"
uiSref="appContainer.mainApp.home"
<mat-toolbar id="mdm--navbar" color="primary" class="mb-0">
<nav
id="mdm--navbar-desktop"
flex
fxLayout="row"
fxLayoutAlign="space-between"
>
<div fxFlex="15" class="mdm--navbar-brand">
<a
id="mdm-logo"
class="mdm-navbar__brand--logo"
uiSref="appContainer.mainApp.home"
>
<img [src]="logoUrl" [style.width]="logoWidth" alt="logo" />
</a>
</div>
<div fxFlex="65" class="mdm--navbar-items">
<a
class="nav-item nav-link"
uiSref="appContainer.mainApp.home"
uiSrefActive="active"
>Home</a
>
<a
class="nav-item nav-link"
uiSref="appContainer.mainApp.twoSidePanel.catalogue.allDataModel"
uiSrefActive="active"
>Browse</a
>
<a
class="nav-item nav-link"
uiSref="appContainer.mainApp.catalogueSearch"
uiSrefActive="active"
>Search</a
>
<a
class="nav-item nav-link"
uiSref="appContainer.mainApp.about"
uiSrefActive="active"
>About</a
>
</div>
<div class="mdm--navbar-user">
<div *ngIf="!isLoggedIn">
<!-- <button (click)="register()" mat-button class="custom inverted-button" color="primary-A700">Register</button> TODO -->
<button
(click)="login()"
mat-stroked-button
class="custom inverted-button"
color="primary-A700"
>
<img [src]="logoUrl" [style.width]="logoWidth" alt="logo" />
</a>
Log in
</button>
</div>
<div class="mdm--navbar-items">
<a
class="nav-item nav-link"
uiSref="appContainer.mainApp.home"
uiSrefActive="active"
>Home</a
>
<a
class="nav-item nav-link"
uiSref="appContainer.mainApp.twoSidePanel.catalogue.allDataModel"
uiSrefActive="active"
>Browse</a
>
<a
class="nav-item nav-link"
uiSref="appContainer.mainApp.catalogueSearch"
uiSrefActive="active"
>Search</a
<div *ngIf="isLoggedIn">
<div
*ngIf="profile"
[matMenuTriggerFor]="menu"
flex
fxLayout="row"
fxLayout.sm="column"
fxLayout.xs="column"
fxLayoutAlign="space-between"
fxLayoutGap="8px"
fxLayoutAlign="center center"
style="width: 185px"
>
<a
class="nav-item nav-link"
uiSref="appContainer.mainApp.about"
uiSrefActive="active"
>About</a
>
</div>
<div class="mdm--navbar-user">
<div *ngIf="!isLoggedIn">
<!-- <button (click)="register()" mat-button class="custom inverted-button" color="primary-A700">Register</button> TODO -->
<button
(click)="login()"
mat-stroked-button
class="custom inverted-button"
color="primary-A700"
>
Log in
</button>
</div>
<div *ngIf="isLoggedIn">
<div
*ngIf="profile"
[matMenuTriggerFor]="menu"
flex
fxLayout="row"
fxLayout.sm="column"
fxLayout.xs="column"
fxLayoutAlign="space-between"
fxLayoutGap="8px"
fxLayoutAlign="center center"
style="width: 185px"
class="profile-img"
fxFlex="30"
fxFlex.sm="100"
fxFlex.xs="100"
>
<div
class="profile-img"
fxFlex="30"
fxFlex.sm="100"
fxFlex.xs="100"
>
<img
class="img-rounded"
*ngIf="!imgChanged"
src="{{ backendURL }}/catalogueUsers/{{ profile.id }}/image"
alt="User profile"
/>
</div>
<div fxFlex="60" fxFlex.sm="100" fxFlex.xs="100">
<div class="profile-name">
{{ profile.firstName }} {{ profile.lastName }}
</div>
<div class="profile-role" *ngIf="isAdministrator">
Administrator
</div>
</div>
<div fxFlex="10" fxFlex.sm="100" fxFlex.xs="100">
<span class="fas fa-chevron-down"></span>
</div>
<img
class="img-rounded"
*ngIf="!imgChanged"
src="{{ backendURL }}/catalogueUsers/{{ profile.id }}/image"
alt="User profile"
/>
</div>
<mat-menu #menu="matMenu" yPosition="below" xPosition="before">
<div *ngIf="isLoggedIn">
<h5 class="marginless text-muted menu-label">
Account settings
</h5>
<a mat-menu-item uiSref="appContainer.userArea.profile">
<span class="fas fa-id-card"></span>
<span>My profile</span>
</a>
<a mat-menu-item uiSref="appContainer.userArea.settings">
<span class="fas fa-sliders-h"></span>
<span>Preferences</span>
</a>
<a mat-menu-item uiSref="appContainer.userArea.changePassword">
<span class="fas fa-unlock-alt"></span>
<span>Change password</span>
</a>
<a mat-menu-item uiSref="appContainer.userArea.apiKeys">
<span class="fas fa-key"></span>
<span>API keys</span>
</a>
<a mat-menu-item uiSref="appContainer.userArea.asyncJobs">
<span class="fas fa-tasks"></span>
<span>Jobs</span>
</a>
<a mat-menu-item uiSref="appContainer.userArea.domainExports">
<span class="fas fa-download"></span>
<span>Exported models</span>
</a>
<div fxFlex="60" fxFlex.sm="100" fxFlex.xs="100">
<div class="profile-name">
{{ profile.firstName }} {{ profile.lastName }}
</div>
<div *ngIf="isAdministrator">
<h5 class="marginless text-muted menu-label">Admin settings</h5>
<a mat-menu-item uiSref="appContainer.adminArea.home">
<span class="fas fa-tachometer-alt"></span>
<span>Dashboard</span>
</a>
<a
mat-menu-item
uiSref="appContainer.adminArea.modelManagement"
>
<span class="fas fa-list" aria-hidden="true"></span>
<span>Model management</span>
</a>
<a
mat-menu-item
*ngIf="features.useSubscribedCatalogues"
uiSref="appContainer.adminArea.subscribedCatalogues"
>
<span class="fas fa-rss" aria-hidden="true"></span>
<span>Subscribed catalogues</span>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.emails">
<span class="fas fa-envelope" aria-hidden="true"></span>
<span>Emails</span>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.users">
<span class="fas fa-user" aria-hidden="true"></span>
<span>Manage users</span>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.pendingUsers">
<span class="fas fa-user-clock"></span>
<span
matBadge="{{ pendingUsersCount }}"
matBadgeOverlap="false"
matBadgeColor="warn"
[matBadgeHidden]="!pendingUsersCount"
>Pending users</span
>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.groups">
<span class="fas fa-users" aria-hidden="true"></span>
<span>Manage groups</span>
</a>
<a
mat-menu-item
*ngIf="features.useOpenIdConnect"
uiSref="appContainer.adminArea.openIdConnectProviders"
>
<span class="fab fa-openid" aria-hidden="true"></span>
<span>OpenID Connect</span>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.configuration">
<span class="fas fa-cog" aria-hidden="true"></span>
<span>Configuration</span>
</a>
<div class="profile-role" *ngIf="isAdministrator">
Administrator
</div>
<button *ngIf="isLoggedIn" (click)="logout()" id="navbar-logout">
<span class="fas fa-sign-out-alt"></span>
<span>Log out</span>
</button>
</mat-menu>
</div>
<div fxFlex="10" fxFlex.sm="100" fxFlex.xs="100">
<span class="fas fa-chevron-down"></span>
</div>
</div>
<mat-menu #menu="matMenu" yPosition="below" xPosition="before">
<div *ngIf="isLoggedIn">
<h5 class="marginless text-muted menu-label">Account settings</h5>
<a mat-menu-item uiSref="appContainer.userArea.profile">
<span class="fas fa-id-card"></span>
<span>My profile</span>
</a>
<a mat-menu-item uiSref="appContainer.userArea.settings">
<span class="fas fa-sliders-h"></span>
<span>Preferences</span>
</a>
<a mat-menu-item uiSref="appContainer.userArea.changePassword">
<span class="fas fa-unlock-alt"></span>
<span>Change password</span>
</a>
<a mat-menu-item uiSref="appContainer.userArea.apiKeys">
<span class="fas fa-key"></span>
<span>API keys</span>
</a>
<a mat-menu-item uiSref="appContainer.userArea.asyncJobs">
<span class="fas fa-tasks"></span>
<span>Jobs</span>
</a>
<a mat-menu-item uiSref="appContainer.userArea.domainExports">
<span class="fas fa-download"></span>
<span>Exported models</span>
</a>
</div>
<div *ngIf="isAdministrator">
<h5 class="marginless text-muted menu-label">Admin settings</h5>
<a mat-menu-item uiSref="appContainer.adminArea.home">
<span class="fas fa-tachometer-alt"></span>
<span>Dashboard</span>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.modelManagement">
<span class="fas fa-list" aria-hidden="true"></span>
<span>Model management</span>
</a>
<a
mat-menu-item
*ngIf="features.useSubscribedCatalogues"
uiSref="appContainer.adminArea.subscribedCatalogues"
>
<span class="fas fa-rss" aria-hidden="true"></span>
<span>Subscribed catalogues</span>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.emails">
<span class="fas fa-envelope" aria-hidden="true"></span>
<span>Emails</span>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.users">
<span class="fas fa-user" aria-hidden="true"></span>
<span>Manage users</span>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.pendingUsers">
<span class="fas fa-user-clock"></span>
<span
matBadge="{{ pendingUsersCount }}"
matBadgeOverlap="false"
matBadgeColor="warn"
[matBadgeHidden]="!pendingUsersCount"
>Pending users</span
>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.groups">
<span class="fas fa-users" aria-hidden="true"></span>
<span>Manage groups</span>
</a>
<a
mat-menu-item
*ngIf="features.useOpenIdConnect"
uiSref="appContainer.adminArea.openIdConnectProviders"
>
<span class="fab fa-openid" aria-hidden="true"></span>
<span>OpenID Connect</span>
</a>
<a mat-menu-item uiSref="appContainer.adminArea.configuration">
<span class="fas fa-cog" aria-hidden="true"></span>
<span>Configuration</span>
</a>
</div>
<button *ngIf="isLoggedIn" (click)="logout()" id="navbar-logout">
<span class="fas fa-sign-out-alt"></span>
<span>Log out</span>
</button>
</mat-menu>
</div>
</nav>
<button
mat-button
id="mobile-trigger"
(click)="sidenav.toggle()"
aria-label="Toggle mobile menu"
>
<span class="fas fa-bars"></span>
</button>
</mat-toolbar>
</div>
</div>
</nav>
<button
mat-button
id="mobile-trigger"
(click)="sidenav.toggle()"
aria-label="Toggle mobile menu"
>
<span class="fas fa-bars"></span>
</button>
</mat-toolbar>
</header>

<mat-sidenav-container id="mdm--navbar-mobile" class="aside-container">
Expand Down
Loading

0 comments on commit d2ffd0d

Please sign in to comment.