From 3c76c88d4d3e28dbbd951a6cea89243119c107e4 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 27 Jan 2018 13:47:48 -0500
Subject: [PATCH] blue click and focus styling

---
 src/app/app.module.ts                      |  2 ++
 src/app/directives/blur-click.directive.ts | 17 +++++++++++++++++
 src/app/vault/add-edit.component.html      |  6 +++---
 src/app/vault/ciphers.component.html       | 10 +++++-----
 src/app/vault/view.component.html          |  2 +-
 src/scss/box.scss                          |  1 -
 src/scss/vault.scss                        | 10 +++++++++-
 7 files changed, 37 insertions(+), 11 deletions(-)
 create mode 100644 src/app/directives/blur-click.directive.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 10b15b01..961467d2 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/directives/blur-click.directive.ts b/src/app/directives/blur-click.directive.ts
new file mode 100644
index 00000000..48555bb9
--- /dev/null
+++ b/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();
+    }
+}
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 731fafe5..2e28076e 100644
--- a/src/app/vault/add-edit.component.html
+++ b/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>
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 65e684c9..8a099e85 100644
--- a/src/app/vault/ciphers.component.html
+++ b/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>
diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html
index 140135c8..a3c1e324 100644
--- a/src/app/vault/view.component.html
+++ b/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>
diff --git a/src/scss/box.scss b/src/scss/box.scss
index 548ef5d2..bb03e058 100644
--- a/src/scss/box.scss
+++ b/src/scss/box.scss
@@ -191,4 +191,3 @@
         color: $text-muted;
     }
 }
-
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
index 5664f3a9..dd45d6dc 100644
--- a/src/scss/vault.scss
+++ b/src/scss/vault.scss
@@ -95,6 +95,7 @@
         text-align: center;
         overflow: hidden;
         flex: 0 0 auto;
+        border-bottom: 1px solid darken($brand-primary, 7%);
 
         a, button {
             color: white !important;
@@ -231,9 +232,16 @@
             font-size: $font-size-base;
             color: $button-color;
 
-            &:hover {
+            &:hover, &:focus {
                 cursor: pointer;
                 background-color: darken($button-backgound-color, 1.5%);
+                border-color: darken($button-border-color, 17%);
+            }
+
+            &:focus {
+                background-color: darken($button-backgound-color, 6%);
+                border-color: darken($button-border-color, 25%);
+                outline: 0;
             }
 
             &.primary {