MycroftAI
/
selene-ui
mirror of https://github.com/MycroftAI/selene-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

moved account menu from sidenav to right side of toolbar

pull/1/head
Chris Veilleux 2019-02-08 17:37:46 -06:00
parent 4821b62548
commit d9cb88db1c
7 changed files with 112 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
projects/globalnav/src/lib/account-menu/account-menu.component.html Normal file
View File

@ -0,0 +1,42 @@
<button mat-button [mat-menu-trigger-for]="menu" class="account-button">
<fa-icon [icon]="accountIcon"></fa-icon>
</button>
<mat-menu #menu>
<!--
If the user is not authenticated, the menu will present them with
"Log In" or "Create Account" options
-->
<button *ngIf="!isAuthenticated" mat-menu-item>
<fa-icon [icon]="logInIcon" class="menu-item-icon"></fa-icon>
<span class="menu-item-text">Log In</span>
</button>
<button *ngIf="!isAuthenticated" mat-menu-item>
<fa-icon [icon]="accountIcon" class="menu-item-icon"></fa-icon>
<span class="menu-item-text">Create Account</span>
</button>
<!--
If the user is authenticated, the menu will present them with
account management options
-->
<button *ngIf="isAuthenticated" mat-menu-item>
<fa-icon [icon]="skillsIcon" class="menu-item-icon"></fa-icon>
<span class="menu-item-text">Skills</span>
</button>
<button *ngIf="isAuthenticated" mat-menu-item>
<fa-icon [icon]="devicesIcon" class="menu-item-icon"></fa-icon>
<span class="menu-item-text">Devices</span>
</button>
<button *ngIf="isAuthenticated" mat-menu-item>
<fa-icon [icon]="accountIcon" class="menu-item-icon"></fa-icon>
<span class="menu-item-text">Profile</span>
</button>
<mat-divider *ngIf="isAuthenticated" class="menu-divider"></mat-divider>
<button *ngIf="isAuthenticated" mat-menu-item>
<fa-icon [icon]="addDeviceIcon" class="menu-item-icon"></fa-icon>
<span class="menu-item-text">Add Device</span>
</button>
<button *ngIf="isAuthenticated" mat-menu-item>
<fa-icon [icon]="logOutIcon" class="menu-item-icon"></fa-icon>
<span class="menu-item-text">Logout</span>
</button>
</mat-menu>

20
projects/globalnav/src/lib/account-menu/account-menu.component.scss Normal file
View File

@ -0,0 +1,20 @@
.account-button {
color: #fee255;
font-size: 20px;
margin-right: -16px
}
.menu-item-icon {
color: #22a7f0;
margin-right: 8px;
}
.menu-item-text {
color: #2c3e50;
}
.menu-divider {
margin-left: auto;
margin-right: auto;
width: 80%;
}

31
projects/globalnav/src/lib/account-menu/account-menu.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { Component, Input, OnInit } from '@angular/core';
import {
faComment,
faPlusCircle,
faSignInAlt,
faSignOutAlt,
faMicrochip,
faUserCircle
} from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'globalnav-account-menu',
templateUrl: './account-menu.component.html',
styleUrls: ['./account-menu.component.scss']
})
export class AccountMenuComponent implements OnInit {
public accountIcon = faUserCircle;
public addDeviceIcon = faPlusCircle;
public devicesIcon = faMicrochip;
@Input() isAuthenticated: boolean;
public logInIcon = faSignInAlt;
public logOutIcon = faSignOutAlt;
public skillsIcon = faComment;
constructor() { }
ngOnInit() {
}
}

26
projects/globalnav/src/lib/globalnav.component.html
View File

@ -1,20 +1,18 @@
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between" color="primary">
<!-- At the start of the title bar, put the hamburger menu icon and -->
<!-- the Mycroft logo. The latter is also a link to the WordPress home page-->
<div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<button mat-icon-button class="menu-button" (click)="snav.toggle()">
<fa-icon [icon]="menuIcon"></fa-icon>
</button>
<a href="{{mycroftUrls.wordpress}}">
<div class="globalnav-logo"></div>
</a>
</div>
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" color="primary">
<!--
At the start of the title bar, put the hamburger menu icon and
the Mycroft logo. The latter is also a link to the WordPress home page
-->
<button mat-icon-button class="menu-button" (click)="snav.toggle()">
<fa-icon [icon]="menuIcon"></fa-icon>
</button>
<a href="{{mycroftUrls.wordpress}}">
<div id=mycroft-logo class="mycroft-logo"></div>
</a>
<globalnav-account-menu [isAuthenticated]="isLoggedIn"></globalnav-account-menu>
</mat-toolbar>
<mat-sidenav-container>
<!--
This is the global sidenav menu for navigating all Mycroft sites.
When the viewport is mobile device size, the menu is hidden until

20
projects/globalnav/src/lib/globalnav.component.scss
View File

@ -4,33 +4,21 @@ mat-toolbar {
z-index: 2; // Put this on top of the sidenav container
.menu-button {
margin-left: -10px;
margin-right: 10px;
margin-left: -8px;
fa-icon {
color: white;
color: #2c3e50;
font-size: 20px;
}
}
// Use inline css to display the logo at top of sidebar because Angular
// Use inline css to display the logo at top of sidebar because Angular
// libraries do not support static assets yet.
.globalnav-logo {
.mycroft-logo {
background: url("toolbar-logo.svg") no-repeat;
height: 25px;
margin-top: -5px;
width: 168px;
}
.sign-in-button {
background-color: #22a7f0;
color: white;
font-size: 16px;
fa-icon {
color: white;
font-size: 16px;
margin-right: 10px
}
}
}
mat-sidenav-container {

43
projects/globalnav/src/lib/globalnav.component.ts
View File

@ -79,8 +79,6 @@ export class GlobalnavComponent implements OnInit {
this.defineForumNav(),
this.defineContributeNav(),
this.defineMarketNav(),
this.defineAccountNav(),
this.defineAuthenticationNav()
];
this.footerItems = [
@ -156,45 +154,4 @@ export class GlobalnavComponent implements OnInit {
text: 'Marketplace'
};
}
private defineAccountNav(): PrimaryNavItem {
let deviceUrl = this.mycroftUrls.account + '/device';
let skillUrl = this.mycroftUrls.account + '/skill';
let profileUrl = this.mycroftUrls.account + '/profile';
const singleSignOnUrl = this.mycroftUrls.singleSignOn + '/login?redirect=';
if (!this.isLoggedIn) {
deviceUrl = singleSignOnUrl + deviceUrl;
skillUrl = singleSignOnUrl + skillUrl;
profileUrl = singleSignOnUrl + profileUrl;
}
return {
children: [
{text: 'Devices', url: deviceUrl},
{text: 'Skills', url: skillUrl},
{text: 'Profile', url: profileUrl},
],
icon: faUserCircle,
text: 'My Account',
};
}
private defineAuthenticationNav(): PrimaryNavItem {
let authenticateNav: PrimaryNavItem = {
icon: faSignInAlt,
text: 'Sign In',
url: this.mycroftUrls.singleSignOn + '/login?redirect=' + window.location.href
};
if (this.isLoggedIn) {
authenticateNav = {
icon: faSignOutAlt,
text: 'Sign Out',
url: this.mycroftUrls.singleSignOn + '/logout?redirect=' + window.location.href
};
}
return authenticateNav;
}
}

4
projects/globalnav/src/lib/globalnav.module.ts
View File

@ -15,6 +15,7 @@ import { GlobalnavComponent } from './globalnav.component';
import { NavItemComponent } from './nav-item/nav-item.component';
import { PrimaryNavItemComponent } from './primary-nav-item/primary-nav-item.component';
import { FooterComponent } from './footer/footer.component';
import { AccountMenuComponent } from './account-menu/account-menu.component';
@NgModule({
imports: [
@ -33,7 +34,8 @@ import { FooterComponent } from './footer/footer.component';
GlobalnavComponent,
NavItemComponent,
PrimaryNavItemComponent,
FooterComponent
FooterComponent,
AccountMenuComponent
],
exports: [
GlobalnavComponent