diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 961467d2..0b95d8b4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -48,6 +48,7 @@ import { ViewComponent } from './vault/view.component';
IconComponent,
LoginComponent,
StopClickDirective,
+ StopPropDirective,
VaultComponent,
ViewComponent,
],
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index 48bb445c..e67de20c 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -2,56 +2,60 @@
-
{{'types' | i18n}}
+
{{'types' | i18n}}
-
{{'folders' | i18n}}
+
+ {{'folders' | i18n}}
+
+
-
{{'collections' | i18n}}
+
{{'collections' | i18n}}
-
-
+
{{c.name}}
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index c14f86a9..e7df3b25 100644
--- a/src/locales/en/messages.json
+++ b/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"
}
}
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 66ae05b1..213696cb 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -36,6 +36,10 @@ input, select, textarea, button {
font-family: $font-family-sans-serif;
}
+button {
+ padding: 0;
+}
+
textarea {
resize: vertical;
}
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
index dd45d6dc..61fc6d23 100644
--- a/src/scss/vault.scss
+++ b/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 {