From 5e7ac7a7ec15bddacd9bc5a1a98b3ec070556154 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Wed, 31 Jan 2018 17:58:06 -0500
Subject: [PATCH] no items message for ciphers

---
 src/app/vault/ciphers.component.html | 34 ++++++++++++++++------------
 src/locales/en/messages.json         |  3 +++
 src/scss/base.scss                   |  4 ++++
 src/scss/buttons.scss                |  5 ++++
 src/scss/misc.scss                   |  5 ++++
 src/scss/vault.scss                  | 15 ++++++++++++
 6 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 2a3e6f6a8e1..a1374ff6e88 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -6,20 +6,26 @@
     </div>
 </div>
 <div class="content">
-    <div class="list">
-        <a *ngFor="let c of ciphers | searchCiphers: searchText" appStopClick (click)="cipherClicked(c)"
-           href="#" title="{{'viewItem' | i18n}}" [ngClass]="{'active': c.id === activeCipherId}">
-            <app-vault-icon [cipher]="c"></app-vault-icon>
-            <span class="text">
-                {{c.name}}
-                <i class="fa fa-share-alt text-muted" *ngIf="c.organizationId"
-                   title="{{'shared' | i18n}}"></i>
-                <i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments"
-                   title="{{'attachments' | i18n}}"></i>
-            </span>
-            <span class="detail">{{c.subTitle}}</span>
-        </a>
-    </div>
+    <ng-container *ngIf="(ciphers | searchCiphers: searchText) as searchedCiphers">
+        <div class="list" *ngIf="searchedCiphers.length > 0">
+            <a *ngFor="let c of searchedCiphers" appStopClick (click)="cipherClicked(c)"
+               href="#" title="{{'viewItem' | i18n}}" [ngClass]="{'active': c.id === activeCipherId}">
+                <app-vault-icon [cipher]="c"></app-vault-icon>
+                <span class="text">
+                    {{c.name}}
+                    <i class="fa fa-share-alt text-muted" *ngIf="c.organizationId"
+                       title="{{'shared' | i18n}}"></i>
+                    <i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments"
+                       title="{{'attachments' | i18n}}"></i>
+                </span>
+                <span class="detail">{{c.subTitle}}</span>
+            </a>
+        </div>
+        <div *ngIf="searchedCiphers.length === 0" class="no-items">
+            <p>{{'noItemsInList' | i18n}}</p>
+            <button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
+        </div>
+    </ng-container>
 </div>
 <div class="footer">
     <button appBlurClick (click)="addCipher()" class="block primary" title="{{'addItem' | i18n}}">
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index fc7a2663c56..6c2635c462a 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -442,5 +442,8 @@
   },
   "itemInformation": {
     "message": "Item Information"
+  },
+  "noItemsInList": {
+    "message": "There are no items to list."
   }
 }
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 86e2c98ef27..8ba3d44c56b 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -31,6 +31,10 @@ img {
 a {
     color: $brand-primary;
     text-decoration: none;
+
+    &:hover, &:focus {
+        color: darken($brand-primary, 6%);
+    }
 }
 
 input, select, textarea, button {
diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss
index 8ef719f6ef9..7d3908d8a11 100644
--- a/src/scss/buttons.scss
+++ b/src/scss/buttons.scss
@@ -39,4 +39,9 @@
         display: block;
         width: 100%;
     }
+
+    &.link {
+        border: none !important;
+        background: none !important;
+    }
 }
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index 76c93134a73..9d5c6c63b20 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -8,6 +8,10 @@
     color: $text-muted !important;
 }
 
+.text-center {
+    text-align: center;
+}
+
 [hidden] {
     display: none !important;
 }
@@ -95,3 +99,4 @@
         margin-top: 10px;
     }
 }
+
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
index 1cf06526c59..b215d9fb4a7 100644
--- a/src/scss/vault.scss
+++ b/src/scss/vault.scss
@@ -11,6 +11,10 @@
         max-width: 250px;
         border-right: 1px solid $border-color-dark;
 
+        .inner-content {
+            padding-bottom: 0 !important;
+        }
+
         h2 {
             color: $gray-light;
             text-transform: uppercase;
@@ -102,6 +106,16 @@
         min-width: 200px;
         max-width: 350px;
         border-right: 1px solid $border-color-dark;
+
+        .no-items {
+            display: flex;
+            height: 100%;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 0 10px;
+        }
     }
 
     #details {
@@ -191,6 +205,7 @@
         flex: 1 1 auto;
         position: relative;
         overflow: auto;
+        height: 100%;
     }
 
     .footer {