fix(demo): updated the demo app #298

AnthonyNahas · Jul 25, 2019 · 1d3a4fa · 1d3a4fa
1 parent 6dfc678
commit 1d3a4fa
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 22 deletions.
diff --git a/demo/src/app/examples/avatar/avatar.component.html b/demo/src/app/examples/avatar/avatar.component.html
@@ -8,15 +8,18 @@ <h1>ngx-auth-firebaseui-avatar</h1>
 <div class="container">
   <mat-toolbar color="primary">
     <span fxFlex></span>
-<!--    <ngx-auth-firebaseui-avatar [links]="links"></ngx-auth-firebaseui-avatar>-->
+    <ngx-auth-firebaseui-avatar [links]="links"></ngx-auth-firebaseui-avatar>
   </mat-toolbar>
 
   <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
 
     <mat-card fxFlexAlign.gt-xs="center">
       <mat-card-subtitle>
         <div fxLayout="row" fxLayoutAlign="space-between">
-          <pre><code [highlight]="example"></code></pre>
+          <div>
+            <pre><code [highlight]="exampleTS"></code></pre>
+            <pre><code [highlight]="example"></code></pre>
+          </div>
           <button mat-icon-button
                   ngxClipboard
                   [cbContent]="example"
@@ -26,15 +29,14 @@ <h1>ngx-auth-firebaseui-avatar</h1>
           </button>
         </div>
       </mat-card-subtitle>
-      <mat-card-content>
-        <ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>
+      <mat-card-content fxLayoutAlign="center center">
+        <ngx-auth-firebaseui-avatar [links]="links"></ngx-auth-firebaseui-avatar>
       </mat-card-content>
     </mat-card>
 
     <mat-card fxFlexAlign.gt-xs="center">
       <mat-card-subtitle>
         <div fxLayout="row" fxLayoutAlign="space-between">
-          <pre><code [highlight]="example"></code></pre>
           <button mat-icon-button
                   ngxClipboard
                   [cbContent]="example"

diff --git a/demo/src/app/examples/avatar/avatar.component.ts b/demo/src/app/examples/avatar/avatar.component.ts
@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {ExampleBaseComponent} from '../example.abstract';
-// import {LinkMenuItem} from 'ngx-auth-firebaseui';
+import {LinkMenuItem} from 'ngx-auth-firebaseui';
 
 @Component({
   selector: 'app-example-avatar',
@@ -10,19 +10,21 @@ import {ExampleBaseComponent} from '../example.abstract';
 })
 export class AvatarComponent extends ExampleBaseComponent implements OnInit {
 
-  links: any[];
+  links: LinkMenuItem[];
 
 
-  example = `<ngx-auth-firebaseui tabIndex="1"
-                             [min]="8"
-                             [max]="15"
-                             [enableLengthRule]="true"
-                             [enableLowerCaseLetterRule]="true"
-                             [enableUpperCaseLetterRule]="true"
-                             [enableDigitRule]="true"
-                             [enableSpecialCharRule]="true"
-                             (onStrengthChanged)="onStrengthChanged($event)">
-        </ngx-auth-firebaseui>`;
+  example = `<ngx-auth-firebaseui-avatar [links]="links"></ngx-auth-firebaseui-avatar>`;
+
+  exampleTS = `
+  links: LinkMenuItem[];
+
+   ngOnInit(): void {
+    this.links = [
+      {icon: 'home', text: 'Home', callback: this.printLog},
+      {icon: 'favorite', text: 'Favorite', callback: this.printLog},
+      {icon: 'add', text: 'Add', callback: this.printLog},
+    ];
+  }`;
 
   constructor(public snackBar: MatSnackBar) {
     super(snackBar);
@@ -34,7 +36,9 @@ export class AvatarComponent extends ExampleBaseComponent implements OnInit {
 
   ngOnInit(): void {
     this.links = [
-      {icon: 'home', text: 'Home', callback: this.printLog}
+      {icon: 'home', text: 'Home', callback: this.printLog},
+      {icon: 'favorite', text: 'Favorite', callback: this.printLog},
+      {icon: 'add', text: 'Add', callback: this.printLog},
     ];
   }
 

diff --git a/demo/src/app/examples/examples.module.ts b/demo/src/app/examples/examples.module.ts
@@ -18,7 +18,7 @@ import {GuardsExampleComponent} from './guards-example/guards-example.component'
 import {LoggedInComponent} from './guards-example/logged-in/logged-in.component';
 import {LoggedOutComponent} from './guards-example/logged-out/logged-out.component';
 import {AvatarComponent} from './avatar/avatar.component';
-import {NgxAuthFirebaseUIModule} from '../../../../src';
+import {NgxAuthFirebaseUIModule} from 'ngx-auth-firebaseui';
 
 @NgModule({
   imports: [

diff --git a/src/module/components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component.html b/src/module/components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component.html
@@ -22,8 +22,9 @@
   </div>
 
   <div fxLayout="column" fxFlex="100">
-    <div *ngFor="let menuItem of links">
-      <button mat-menu-item (click)="menuItem.callback">{{menuItem.text}}</button>
+    <div class="links-menu" *ngFor="let menuItem of links">
+      <button mat-menu-item (click)="menuItem?.callback()">
+        <mat-icon>{{menuItem?.icon}}</mat-icon>{{menuItem?.text}}</button>
     </div>
     <button mat-raised-button fxLayoutAlign="center" color="primary" (click)="openProfile()">Profile
     </button>

diff --git a/src/module/components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component.scss b/src/module/components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component.scss
@@ -1,3 +1,7 @@
 .mat-raised-button {
   margin: 0.2rem 1rem;
 }
+
+.links-menu {
+  text-align: center;
+}
diff --git a/src/module/ngx-auth-firebase-u-i.module.ts b/src/module/ngx-auth-firebase-u-i.module.ts
@@ -37,7 +37,7 @@ import {RouterModule} from '@angular/router';
 // components
 export {AuthComponent} from './components/ngx-auth-firebaseui/auth.component';
 export {UserComponent} from './components/ngx-auth-firebaseui-user/user.component';
-export {NgxAuthFirebaseuiAvatarComponent} from './components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component';
+export {NgxAuthFirebaseuiAvatarComponent, LinkMenuItem} from './components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component';
 export {AuthProvidersComponent, Theme, Layout} from './components/providers/auth.providers.component';
 export {LegalityDialogComponent} from './components/legality-dialog/legality-dialog.component';
 // services