split vault into components

src/app/app.module.ts

@@ -8,9 +8,12 @@ import { NgModule } from '@angular/core';
 import { ServicesModule } from './services/services.module';
 
 import { AppComponent } from './app.component';
+import { CiphersComponent } from './vault/ciphers.component';
+import { GroupingsComponent } from './vault/groupings.component';
 import { IconComponent } from './vault/icon.component';
 import { LoginComponent } from './accounts/login.component';
 import { VaultComponent } from './vault/vault.component';
+import { ViewComponent } from './vault/view.component';
 
 @NgModule({
     imports: [
@@ -21,9 +24,12 @@ import { VaultComponent } from './vault/vault.component';
     ],
     declarations: [
         AppComponent,
+        CiphersComponent,
+        GroupingsComponent,
         IconComponent,
         LoginComponent,
         VaultComponent,
+        ViewComponent,
     ],
     providers: [],
     bootstrap: [AppComponent],

src/app/vault/ciphers.component.html

@@ -0,0 +1,28 @@
+<div class="header header-search">
+    <div class="search">
+        <input type="search" placeholder="Search vault" id="search" />
+        <i class="fa fa-search"></i>
+    </div>
+    <div class="right">
+        <a href="" title="Add Item"><i class="fa fa-plus fa-lg"></i></a>
+    </div>
+</div>
+<div class="content">
+    <div class="list">
+        <div class="list-section" style="padding-top: 0; padding-bottom: 0;">
+            <a *ngFor="let cipher of ciphers"
+               href="#" class="list-section-item condensed" title="View Item">
+                <app-vault-icon [cipher]="cipher"></app-vault-icon>
+                <span class="text">
+                    {{cipher.name}}
+                    <i class="fa fa-share-alt text-muted" *ngIf="cipher.organizationId"></i>
+                    <i class="fa fa-paperclip text-muted" *ngIf="cipher.attachments"></i>
+                </span>
+                <span class="detail">{{cipher.subTitle}}</span>
+            </a>
+        </div>
+    </div>
+</div>
+<div class="footer">
+    Add Item
+</div>

src/app/vault/ciphers.component.ts

@@ -0,0 +1,23 @@
+import * as template from './ciphers.component.html';
+
+import {
+    Component,
+    Input,
+    OnChanges,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-vault-ciphers',
+    template: template,
+})
+export class CiphersComponent implements OnChanges {
+    @Input() ciphers: any[];
+
+    constructor() {
+        
+    }
+
+    ngOnChanges() {
+        
+    }
+}

src/app/vault/groupings.component.html

@@ -0,0 +1,27 @@
+<div class="content">
+    <div class="inner-content">
+        <ul>
+            <li><a href="#"><i class="fa fa-fw fa-spinner"></i> All Items</a></li>
+            <li><a href="#"><i class="fa fa-fw fa-star"></i> Favorites</a></li>
+        </ul>
+        <h2><i class="fa fa-tags"></i> Types</h2>
+        <ul>
+            <li><a href="#"><i class="fa fa-fw fa-globe"></i> Login</a></li>
+            <li><a href="#"><i class="fa fa-fw fa-credit-card"></i> Card</a></li>
+            <li><a href="#"><i class="fa fa-fw fa-id-card-o"></i> Identity</a></li>
+            <li><a href="#"><i class="fa fa-fw fa-sticky-note-o"></i> Secure Note</a></li>
+        </ul>
+        <h2><i class="fa fa-folder"></i> Folders</h2>
+        <ul class="fa-ul">
+            <li *ngFor="let folder of folders">
+                <a href="#"><i class="fa-li fa fa-caret-right"></i> {{folder.name}}</a>
+            </li>
+        </ul>
+        <h2><i class="fa fa-cubes"></i> Collections</h2>
+        <ul class="fa-ul">
+            <li *ngFor="let collection of collections">
+                <a href="#"><i class="fa-li fa fa-caret-right"></i> {{collection.name}}</a>
+            </li>
+        </ul>
+    </div>
+</div>

src/app/vault/groupings.component.ts

@@ -0,0 +1,28 @@
+import * as template from './groupings.component.html';
+
+import {
+    Component,
+    Input,
+    OnInit,
+} from '@angular/core';
+
+import { CollectionService } from 'jslib/abstractions/collection.service';
+import { FolderService } from 'jslib/abstractions/folder.service';
+
+@Component({
+    selector: 'app-vault-groupings',
+    template: template,
+})
+export class GroupingsComponent implements OnInit {
+    folders: any[];
+    collections: any[];
+
+    constructor(private collectionService: CollectionService, private folderService: FolderService) {
+
+    }
+
+    async ngOnInit() {
+        this.folders = await this.folderService.getAllDecrypted();
+        this.collections = await this.collectionService.getAllDecrypted();
+    }
+}

src/app/vault/vault.component.html

@@ -1,93 +1,5 @@
 <div id="vault">
-    <!--
-    <div id="nav">
-        <ul class="top">
-            <li><a href="#"><i class="fa fa-lg fa-lock"></i></a></li>
-            <li><a href="#"><i class="fa fa-lg fa-undo-alt fa-flip-horizontal"></i></a></li>
-            <li><a href="#"><i class="fa fa-lg fa-cog"></i></a></li>
-        </ul>
-        <ul class="bottom">
-            <li><a href="#"><i class="fa fa-lg fa-user"></i></a></li>
-        </ul>
-    </div>
-    -->
-    <div id="categories">
-        <div class="content">
-            <div class="inner-content">
-                <ul>
-                    <li><a href="#"><i class="fa fa-fw fa-spinner"></i> All Items</a></li>
-                    <li><a href="#"><i class="fa fa-fw fa-star"></i> Favorites</a></li>
-                </ul>
-                <h2><i class="fa fa-tags"></i> Types</h2>
-                <ul>
-                    <li><a href="#"><i class="fa fa-fw fa-globe"></i> Login</a></li>
-                    <li><a href="#"><i class="fa fa-fw fa-credit-card"></i> Card</a></li>
-                    <li><a href="#"><i class="fa fa-fw fa-id-card-o"></i> Identity</a></li>
-                    <li><a href="#"><i class="fa fa-fw fa-sticky-note-o"></i> Secure Note</a></li>
-                </ul>
-                <h2><i class="fa fa-folder"></i> Folders</h2>
-                <ul class="fa-ul">
-                    <li *ngFor="let folder of vaultFolders">
-                        <a href="#"><i class="fa-li fa fa-caret-right"></i> {{folder.name}}</a>
-                    </li>
-                </ul>
-                <h2><i class="fa fa-cubes"></i> Collections</h2>
-                <ul class="fa-ul">
-                    <li *ngFor="let collection of vaultCollections">
-                        <a href="#"><i class="fa-li fa fa-caret-right"></i> {{collection.name}}</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-    <div id="items">
-        <div class="header header-search">
-            <div class="search">
-                <input type="search" placeholder="Search vault" id="search" />
-                <i class="fa fa-search"></i>
-            </div>
-            <div class="right">
-                <a href="" title="Add Item"><i class="fa fa-plus fa-lg"></i></a>
-            </div>
-        </div>
-        <div class="content">
-            <div class="list">
-                <div class="list-section" style="padding-top: 0; padding-bottom: 0;">
-                    <a *ngFor="let cipher of vaultCiphers"
-                       href="#" class="list-section-item condensed" title="View Item">
-                        <app-vault-icon [cipher]="cipher"></app-vault-icon>
-                        <span class="text">
-                            {{cipher.name}}
-                            <i class="fa fa-share-alt text-muted" *ngIf="cipher.organizationId"></i>
-                            <i class="fa fa-paperclip text-muted" *ngIf="cipher.attachments"></i>
-                        </span>
-                        <span class="detail">{{cipher.subTitle}}</span>
-                    </a>
-                </div>
-            </div>
-        </div>
-        <div class="footer">
-            Add Item
-        </div>
-    </div>
-    <div id="details">
-        <div class="content">
-            <div>Something Something Something Something Something Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-            <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
-        </div>
-        <div class="footer">
-            Edit
-        </div>
-    </div>
+    <app-vault-groupings id="categories"></app-vault-groupings>
+    <app-vault-ciphers id="items" [ciphers]="vaultCiphers"></app-vault-ciphers>
+    <app-vault-view id="details" [cipherId]="null"></app-vault-view>
 </div>

src/app/vault/vault.component.ts

@@ -6,28 +6,19 @@ import {
 } from '@angular/core';
 
 import { CipherService } from 'jslib/abstractions/cipher.service';
-import { CollectionService } from 'jslib/abstractions/collection.service';
-import { FolderService } from 'jslib/abstractions/folder.service';
 
 @Component({
     selector: 'app-vault',
     template: template,
 })
 export class VaultComponent implements OnInit {
-    vaultFolders: any[];
     vaultCiphers: any[];
-    vaultCollections: any[];
 
-    constructor(private cipherService: CipherService, private collectionService: CollectionService,
-        private folderService: FolderService) {
+    constructor(private cipherService: CipherService) {
 
     }
 
     async ngOnInit() {
-        // TODO?
-
-        this.vaultFolders = await this.folderService.getAllDecrypted();
-        this.vaultCollections = await this.collectionService.getAllDecrypted();
         this.vaultCiphers = await this.cipherService.getAllDecrypted();
     }
 }

src/app/vault/view.component.html

@@ -0,0 +1,18 @@
+<div class="content">
+    <div>Something Something Something Something Something Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+    <div>Something</div><div>Something</div><div>Something</div><div>Something</div>
+</div>
+<div class="footer">
+    Edit
+</div>

src/app/vault/view.component.ts

@@ -0,0 +1,23 @@
+import * as template from './view.component.html';
+
+import {
+    Component,
+    Input,
+    OnChanges,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-vault-view',
+    template: template,
+})
+export class ViewComponent implements OnChanges {
+    @Input() cipherId: string;
+
+    constructor() {
+        
+    }
+
+    ngOnChanges() {
+        
+    }
+}

src/scss/styles.scss

@@ -44,7 +44,10 @@ div::-webkit-scrollbar-thumb {
     background-color: rgba(100,100,100,.2);
     border-radius: 10px;
     margin-right: 1px;
-    transition: opacity 300ms ease-in-out;
+
+    &:hover {
+        background-color: rgba(100,100,100,.4);
+    }
 }
 
 html, body {
@@ -77,37 +80,6 @@ a {
     height: 100vh;
     display: flex;
 
-    #nav {
-        background-color: #1a2226;
-        min-width: 50px;
-        color: white;
-        display: flex;
-        flex-direction: column;
-
-        ul {
-            padding: 0;
-            margin: 0;
-
-            li {
-                padding: 0;
-                margin: 0;
-                list-style: none;
-
-                a {
-                    display: block;
-                    text-align: center;
-                    padding: 20px 0;
-                    text-decoration: none;
-                    color: #fff;
-                }
-            }
-
-            &.top {
-                flex: 1;
-            }
-        }
-    }
-
     #categories {
         background-color: $background-color-alt;
         width: 15%;