feat: clear todos input with escape key, github link

tomastrajan · May 21, 2017 · f2888d1 · f2888d1
1 parent 2ba208c
commit f2888d1
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 3 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -23,7 +23,7 @@
         <span routerLink="" class="branding spacer hidden-sm-down"><img [src]="logo" /> Angular NGrx Material Starter</span>
 
         <span class="hidden-sm-down">
-          <button md-button *ngFor="let item of navigation" [routerLink]="[item.link]" routerLinkActive="active">
+          <button md-button class="nav-button" *ngFor="let item of navigation" [routerLink]="[item.link]" routerLinkActive="active">
             {{item.label}}
           </button>
         </span>
@@ -46,6 +46,10 @@
           </button>
         </md-menu>
 
+        <button md-icon-button (click)="onGithubClick()">
+          <i class="fa fa-github fa-2x"></i>
+        </button>
+
       </md-toolbar>
 
       <router-outlet></router-outlet>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -8,7 +8,7 @@ $footer-height: 140px;
 
 .toolbar {
 
-  button {
+  .nav-button {
     margin: 0 10px 0 0;
   }
 

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -43,4 +43,9 @@ export class AppComponent implements OnDestroy {
     this.unsubscribe$.complete();
   }
 
+  onGithubClick() {
+    window.open('https://github.com/tomastrajan/angular-ngrx-material-starter',
+      '_blank');
+  }
+
 }
diff --git a/src/app/examples/todos/todos.component.html b/src/app/examples/todos/todos.component.html
@@ -4,7 +4,8 @@
       <anms-big-input placeholder="I am going to do..."
                       [value]="newTodo"
                       (keyup)="onNewTodoChange($event.target.value)"
-                      (keyup.enter)="!isAddTodoDisabled && onAddTodo()">
+                      (keyup.enter)="!isAddTodoDisabled && onAddTodo()"
+                      (keyup.escape)="onNewTodoClear()">
         <anms-big-input-action icon="add" color="accent"
                                (action)="onAddTodo()"
                                [disabled]="isAddTodoDisabled">

diff --git a/src/app/examples/todos/todos.component.ts b/src/app/examples/todos/todos.component.ts
@@ -63,6 +63,10 @@ export class TodosComponent implements OnInit, OnDestroy {
     this.newTodo = newTodo;
   }
 
+  onNewTodoClear() {
+    this.newTodo = '';
+  }
+
   onAddTodo() {
     this.store.dispatch(addTodo(this.newTodo));
     this.newTodo = '';