blue click and focus styling

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { ToasterModule } from 'angular2-toaster';
 
 import { AddEditComponent } from './vault/add-edit.component';
 import { AppComponent } from './app.component';
+import { BlurClickDirective } from './directives/blur-click.directive';
 import { CiphersComponent } from './vault/ciphers.component';
 import { FallbackSrcDirective } from './directives/fallback-src.directive';
 import { GroupingsComponent } from './vault/groupings.component';
@@ -39,6 +40,7 @@ import { ViewComponent } from './vault/view.component';
     declarations: [
         AddEditComponent,
         AppComponent,
+        BlurClickDirective,
         CiphersComponent,
         FallbackSrcDirective,
         GroupingsComponent,

src/app/directives/blur-click.directive.ts

@@ -0,0 +1,17 @@
+import {
+    Directive,
+    ElementRef,
+    HostListener,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appBlurClick]',
+})
+export class BlurClickDirective {
+    constructor(private el: ElementRef) {
+    }
+
+    @HostListener('click') onClick() {
+        this.el.nativeElement.blur();
+    }
+}

src/app/vault/add-edit.component.html

@@ -231,13 +231,13 @@
     </div>
 </div>
 <div class="footer">
-    <button (click)="save()" class="primary" title="{{'save' | i18n}}">
+    <button appBlurClick (click)="save()" class="primary" title="{{'save' | i18n}}">
         <i class="fa fa-save fa-lg"></i> {{'save' | i18n}}
     </button>
-    <button (click)="cancel()" title="{{'cancel' | i18n}}">
+    <button appBlurClick (click)="cancel()" title="{{'cancel' | i18n}}">
         {{'cancel' | i18n}}
     </button>
-    <button (click)="delete()" class="danger right" title="{{'delete' | i18n}}" *ngIf="editMode">
+    <button appBlurClick (click)="delete()" class="danger right" title="{{'delete' | i18n}}" *ngIf="editMode">
         <i class="fa fa-trash-o fa-lg"></i>
     </button>
 </div>

src/app/vault/ciphers.component.html

@@ -4,7 +4,7 @@
         <i class="fa fa-search"></i>
     </div>
     <div class="right">
-        <a href="" title="{{'addItem' | i18n}}" appStopClick (click)="addCipher()">
+        <a href="" title="{{'addItem' | i18n}}" appBlurClick appStopClick (click)="addCipher()">
             <i class="fa fa-plus fa-lg"></i>
         </a>
     </div>
@@ -12,21 +12,21 @@
 <div class="content">
     <div class="list">
         <a *ngFor="let cipher of ciphers" appStopClick (click)="cipherClicked(cipher)"
-            href="#" title="{{'viewItem' | i18n}}">
+           href="#" title="{{'viewItem' | i18n}}">
             <app-vault-icon [cipher]="cipher"></app-vault-icon>
             <span class="text">
                 {{cipher.name}}
                 <i class="fa fa-share-alt text-muted" *ngIf="cipher.organizationId"
-                    title="{{'shared' | i18n}}"></i>
+                   title="{{'shared' | i18n}}"></i>
                 <i class="fa fa-paperclip text-muted" *ngIf="cipher.attachments"
-                    title="{{'attachments' | i18n}}"></i>
+                   title="{{'attachments' | i18n}}"></i>
             </span>
             <span class="detail">{{cipher.subTitle}}</span>
         </a>
     </div>
 </div>
 <div class="footer">
-    <button (click)="addCipher()" class="block primary" title="{{'addItem' | i18n}}">
+    <button appBlurClick (click)="addCipher()" class="block primary" title="{{'addItem' | i18n}}">
         <i class="fa fa-plus fa-lg"></i>
     </button>
 </div>

src/app/vault/view.component.html

@@ -217,5 +217,5 @@
     </div>
 </div>
 <div class="footer">
-    <button (click)="edit()" title="{{'editItem' | i18n}}">{{'edit' | i18n}}</button>
+    <button appBlurClick (click)="edit()" title="{{'editItem' | i18n}}">{{'edit' | i18n}}</button>
 </div>