add/edit folder buttons

src/app/app.module.ts

@@ -48,6 +48,7 @@ import { ViewComponent } from './vault/view.component';
         IconComponent,
         LoginComponent,
         StopClickDirective,
+        StopPropDirective,
         VaultComponent,
         ViewComponent,
     ],

src/app/vault/groupings.component.html

@@ -2,56 +2,60 @@
     <div class="inner-content">
         <ul>
             <li [ngClass]="{active: selectedAll}">
-                <a href="#" appStopClick (click)="all()">
+                <a href="#" appStopClick appBlurClick (click)="all()">
-                    <i class="fa fa-fw fa-spinner"></i> {{'allItems' | i18n}}
+                    <i class="fa fa-fw fa-spinner"></i>&nbsp;{{'allItems' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedFavorites}">
-                <a href="#" appStopClick (click)="favorites()">
+                <a href="#" appStopClick appBlurClick (click)="favorites()">
-                    <i class="fa fa-fw fa-star"></i> {{'favorites' | i18n}}
+                    <i class="fa fa-fw fa-star"></i>&nbsp;{{'favorites' | i18n}}
                 </a>
             </li>
         </ul>
-        <h2><i class="fa fa-tag"></i> {{'types' | i18n}}</h2>
+        <h2>{{'types' | i18n}}</h2>
         <ul>
             <li [ngClass]="{active: selectedType === cipherType.Login}">
-                <a href="#" appStopClick (click)="type(cipherType.Login)">
+                <a href="#" appStopClick appBlurClick (click)="type(cipherType.Login)">
-                    <i class="fa fa-fw fa-globe"></i>
+                    <i class="fa fa-fw fa-globe"></i>&nbsp;{{'typeLogin' | i18n}}
-                    {{'typeLogin' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedType === cipherType.Card}">
-                <a href="#" appStopClick (click)="type(cipherType.Card)">
+                <a href="#" appStopClick appBlurClick (click)="type(cipherType.Card)">
-                    <i class="fa fa-fw fa-credit-card"></i>
+                    <i class="fa fa-fw fa-credit-card"></i>&nbsp;{{'typeCard' | i18n}}
-                    {{'typeCard' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedType === cipherType.Identity}">
-                <a href="#" appStopClick (click)="type(cipherType.Identity)">
+                <a href="#" appStopClick appBlurClick (click)="type(cipherType.Identity)">
-                    <i class="fa fa-fw fa-id-card-o"></i>
+                    <i class="fa fa-fw fa-id-card-o"></i>&nbsp;{{'typeIdentity' | i18n}}
-                    {{'typeIdentity' | i18n}}
                 </a>
             </li>
             <li [ngClass]="{active: selectedType === cipherType.SecureNote}">
-                <a href="#" appStopClick (click)="type(cipherType.SecureNote)">
+                <a href="#" appStopClick appBlurClick (click)="type(cipherType.SecureNote)">
-                    <i class="fa fa-fw fa-sticky-note-o"></i>
+                    <i class="fa fa-fw fa-sticky-note-o"></i>&nbsp;{{'typeSecureNote' | i18n}}
-                    {{'typeSecureNote' | i18n}}
                 </a>
             </li>
         </ul>
-        <h2><i class="fa fa-folder"></i> {{'folders' | i18n}}</h2>
+        <h2>
+            {{'folders' | i18n}}
+            <button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
+                <i class="fa fa-plus fa-fw"></i>
+            </button>
+        </h2>
         <ul class="fa-ul">
             <li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
-                <a href="#" appStopClick (click)="folder(f)">
+                <a href="#" appStopClick appBlurClick (click)="folder(f)">
                     <i class="fa-li fa fa-caret-right"></i> {{f.name}}
+                    <span appStopProp (click)="editFolder(f)" title="{{'editFolder' | i18n}}">
+                        <i class="fa fa-pencil fa-fw"></i>
+                    </span>
                 </a>
             </li>
         </ul>
         <div *ngIf="collections && collections.length">
-            <h2><i class="fa fa-cubes"></i> {{'collections' | i18n}}</h2>
+            <h2>{{'collections' | i18n}}</h2>
             <ul class="fa-ul">
                 <li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
-                    <a href="#" appStopClick (click)="collection(c)">
+                    <a href="#" appStopClick appBlurClick (click)="collection(c)">
                         <i class="fa-li fa fa-caret-right"></i> {{c.name}}
                     </a>
                 </li>

src/locales/en/messages.json

@@ -302,5 +302,14 @@
   "noneFolder": {
     "message": "No Folder",
     "description": "This is the folder for uncategorized items"
+  },
+  "addFolder": {
+    "message": "Add Folder"
+  },
+  "editFolder": {
+    "message": "Edit Folder"
+  },
+  "deleteFolder": {
+    "message": "Delete Folder"
   }
 }

src/scss/base.scss

@@ -36,6 +36,10 @@ input, select, textarea, button {
     font-family: $font-family-sans-serif;
 }
 
+button {
+    padding: 0;
+}
+
 textarea {
     resize: vertical;
 }

src/scss/vault.scss

@@ -12,9 +12,24 @@
         border-right: 1px solid $border-color-dark;
 
         h2 {
+            color: $gray-light;
+            text-transform: uppercase;
             font-size: $font-size-base;
-            font-weight: bold;
+            font-weight: normal;
             margin-bottom: 5px;
+            display: flex;
+
+            button {
+                margin-left: auto;
+                background: none;
+                border: none;
+                color: lighten($gray-light, 30%);
+
+                &:hover, &:focus {
+                    color: $gray-light;
+                    cursor: pointer;
+                }
+            }
         }
 
         ul:not(.fa-ul) {
@@ -48,9 +63,26 @@
 
             li {
                 a {
-                    display: block;
                     padding: 5px 0;
                     color: $text-color;
+                    display: flex;
+                    align-items: center;
+
+                    span {
+                        visibility: hidden;
+                        margin-left: auto;
+                        color: lighten($gray-light, 30%);
+
+                        &:hover {
+                            color: $text-muted;
+                        }
+                    }
+
+                    &:hover, &:focus {
+                        span {
+                            visibility: visible;
+                        }
+                    }
                 }
 
                 &.active {