Merge pull request #52 from GSA/layout-backbtn

[review] backbutton for layout
GSA · Sep 13, 2018 · 2a08bfd · 2a08bfd
2 parents 8f4b985 + ec484b6
commit 2a08bfd
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git a/src/ui-kit/experimental/patterns/layout/components/layout-components.module.ts b/src/ui-kit/experimental/patterns/layout/components/layout-components.module.ts
@@ -32,6 +32,7 @@ import { SamComponentsModule } from '../../../../components';
 import { SamActionsListModule } from '../../../actions-list';
 import { SamReportingMainComponent } from './template/reporting-main.component';
 import { SamButtonNextModule } from '../../../button-next';
+import { SamIconsModule } from '../../../icon';
 
 @NgModule({
   imports: [
@@ -42,7 +43,8 @@ import { SamButtonNextModule } from '../../../button-next';
     MdExpansionModule,
     SamComponentsModule,
     SamActionsListModule,
-    SamButtonNextModule
+    SamButtonNextModule,
+    SamIconsModule
   ],
   declarations: [
     // Components

diff --git a/src/ui-kit/experimental/patterns/layout/components/page/page.component.ts b/src/ui-kit/experimental/patterns/layout/components/page/page.component.ts
@@ -5,8 +5,15 @@ import {
   ViewEncapsulation,
   Renderer2,
   NgZone,
+  Input,
+  Output,
+  EventEmitter,
   ContentChild
 } from '@angular/core';
+import {
+  faLongArrowAltLeft,
+  faTimes,
+} from '@fortawesome/free-solid-svg-icons';
 
 import { MdSidenavContainer, MdSidenav } from '../sidenav/sidenav';
 import { SamToolbarComponent } from '../toolbar.component';
@@ -18,14 +25,19 @@ import { SamToolbarComponent } from '../toolbar.component';
   styleUrls: ['./sam-page-next.scss'],
 })
 export class SamPageNextComponent extends MdSidenavContainer {
-
+  @Input() backButtonText = "";
+  @Output() backButton: any = new EventEmitter();
+
   @HostListener('window:resize')
   resize() { if (this.aside) { this._responsiveAside(); } }
 
   @ContentChild(MdSidenav) public aside: MdSidenav;
 
   @ContentChild(SamToolbarComponent)
   public toolbar: SamToolbarComponent;
+
+  faLongArrowAltLeft = faLongArrowAltLeft;
+  faTimes = faTimes;
 
   constructor(_element: ElementRef, _renderer: Renderer2, _ngZone: NgZone) {
     super(null, _element, _renderer, _ngZone);
@@ -69,4 +81,7 @@ export class SamPageNextComponent extends MdSidenavContainer {
     return window.innerWidth <= 600 ? true : false;
   }
 
+  backBtnClick(){
+    this.backButton.emit();
+  }
 }
diff --git a/src/ui-kit/experimental/patterns/layout/components/page/page.template.html b/src/ui-kit/experimental/patterns/layout/components/page/page.template.html
@@ -1,6 +1,12 @@
 <div class="sam-page-next-header">
+  <div *ngIf="backButtonText" class="backBtn">
+    <button (click)="backBtnClick()"><sam-icon [icon]="faLongArrowAltLeft"></sam-icon> {{backButtonText}}</button>
+  </div>
   <ng-content select="sam-page-title">
   </ng-content>
+  <div *ngIf="backButtonText" class="backBtn-right">
+      <button (click)="backBtnClick()"><sam-icon [icon]="faTimes" size="2x"></sam-icon><span class="sr-only">{{backButtonText}}</span></button>
+  </div>
 </div>
 
 

diff --git a/src/ui-kit/experimental/patterns/layout/components/page/sam-page-next.scss b/src/ui-kit/experimental/patterns/layout/components/page/sam-page-next.scss
@@ -1,6 +1,26 @@
 .sam-page-next-header{
   background-color: #323a45;
   padding: 0 15px;
+  display:flex;
+
+  .backBtn{
+    color: #fff;
+    flex-basis: 276px;
+    line-height: 105px;
+    button{
+      background: transparent;
+    }
+  }
+
+  .backBtn-right{
+    button{
+      background: transparent;
+    }
+  }
+  sam-page-title{
+    flex-grow: 1
+  }
+
   h1.sam.heading{
     .intro{
       font-size: 24px;