From 85d4da7deffb43c9f3b9715b0718f7c7da0c3d3b Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Sat, 27 Jan 2018 08:52:39 -0500 Subject: [PATCH] selection highlights --- src/app/vault/groupings.component.html | 16 ++++++++-------- src/app/vault/groupings.component.ts | 26 ++++++++++++++++++++++++++ src/app/vault/vault.component.ts | 23 ++++++++++++++++------- src/scss/styles.scss | 9 +++++++++ 4 files changed, 59 insertions(+), 15 deletions(-) diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html index 815e4fbe96..48bb445c0e 100644 --- a/src/app/vault/groupings.component.html +++ b/src/app/vault/groupings.component.html @@ -1,12 +1,12 @@

{{'types' | i18n}}

{{'folders' | i18n}}

    -
  • +
  • {{f.name}} @@ -50,7 +50,7 @@

    {{'collections' | i18n}}

      -
    • +
    • {{c.name}} diff --git a/src/app/vault/groupings.component.ts b/src/app/vault/groupings.component.ts index d6baace8e8..03c7f62652 100644 --- a/src/app/vault/groupings.component.ts +++ b/src/app/vault/groupings.component.ts @@ -30,6 +30,12 @@ export class GroupingsComponent implements OnInit { folders: any[]; collections: any[]; cipherType = CipherType; + selectedAll: boolean = false; + selectedFavorites: boolean = false; + selectedType: CipherType = null; + selectedFolder: boolean = false; + selectedFolderId: string = null; + selectedCollectionId: string = null; constructor(private collectionService: CollectionService, private folderService: FolderService) { // ctor @@ -41,22 +47,42 @@ export class GroupingsComponent implements OnInit { } all() { + this.clearSelections(); + this.selectedAll = true; this.onAllClicked.emit(); } favorites() { + this.clearSelections(); + this.selectedFavorites = true; this.onFavoritesClicked.emit(); } type(type: CipherType) { + this.clearSelections(); + this.selectedType = type; this.onCipherTypeClicked.emit(type); } folder(folder: FolderView) { + this.clearSelections(); + this.selectedFolder = true; + this.selectedFolderId = folder.id; this.onFolderClicked.emit(folder); } collection(collection: CollectionView) { + this.clearSelections(); + this.selectedCollectionId = collection.id; this.onCollectionClicked.emit(collection); } + + clearSelections() { + this.selectedAll = false; + this.selectedFavorites = false; + this.selectedType = null; + this.selectedFolder = false; + this.selectedFolderId = null; + this.selectedCollectionId = null; + } } diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index c4c134f307..ed8c146f55 100644 --- a/src/app/vault/vault.component.ts +++ b/src/app/vault/vault.component.ts @@ -14,6 +14,7 @@ import { import { Location } from '@angular/common'; import { CiphersComponent } from './ciphers.component'; +import { GroupingsComponent } from './groupings.component'; import { CipherType } from 'jslib/enums/cipherType'; @@ -27,6 +28,7 @@ import { FolderView } from 'jslib/models/view/folderView'; }) export class VaultComponent implements OnInit { @ViewChild(CiphersComponent) ciphersComponent: CiphersComponent; + @ViewChild(GroupingsComponent) groupingsComponent: GroupingsComponent; action: string; cipherId: string = null; @@ -53,14 +55,21 @@ export class VaultComponent implements OnInit { } if (params['favorites']) { + this.groupingsComponent.selectedFavorites = true; await this.filterFavorites(); } else if (params['type']) { - await this.filterCipherType(parseInt(params['type'])); + const t = parseInt(params['type']); + this.groupingsComponent.selectedType = t; + await this.filterCipherType(t); } else if (params['folderId']) { + this.groupingsComponent.selectedFolder = true; + this.groupingsComponent.selectedFolderId = params['folderId']; await this.filterFolder(params['folderId']); } else if (params['collectionId']) { + this.groupingsComponent.selectedCollectionId = params['collectionId']; await this.filterCollection(params['collectionId']); } else { + this.groupingsComponent.selectedAll = true; await this.ciphersComponent.load(); } }); @@ -73,7 +82,7 @@ export class VaultComponent implements OnInit { this.cipherId = cipher.id; this.action = 'view'; - this.go({ action: this.action, cipherId: this.cipherId }); + this.go(); } editCipher(cipher: CipherView) { @@ -83,7 +92,7 @@ export class VaultComponent implements OnInit { this.cipherId = cipher.id; this.action = 'edit'; - this.go({ action: this.action, cipherId: this.cipherId }); + this.go(); } addCipher() { @@ -93,20 +102,20 @@ export class VaultComponent implements OnInit { this.action = 'add'; this.cipherId = null; - this.go({ action: this.action, cipherId: this.cipherId }); + this.go(); } savedCipher(cipher: CipherView) { this.cipherId = cipher.id; this.action = 'view'; - this.go({ action: this.action, cipherId: this.cipherId }); + this.go(); this.ciphersComponent.updateCipher(cipher); } deletedCipher(cipher: CipherView) { this.cipherId = null; this.action = null; - this.go({ action: this.action, cipherId: this.cipherId }); + this.go(); this.ciphersComponent.removeCipher(cipher.id); } @@ -117,7 +126,7 @@ export class VaultComponent implements OnInit { cancelledAddEdit(cipher: CipherView) { this.cipherId = cipher.id; this.action = this.cipherId != null ? 'view' : null; - this.go({ action: this.action, cipherId: this.cipherId }); + this.go(); } async clearGroupingFilters() { diff --git a/src/scss/styles.scss b/src/scss/styles.scss index e452c8d4e4..b187ee64e8 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -128,6 +128,15 @@ textarea { padding: 5px 0; color: $text-color; } + + &.active { + background-color: darken($background-color-alt, 5%); + border-radius: $border-radius; + margin-left: -15px; + margin-right: -15px; + padding-left: 15px; + padding-right: 15px; + } } } }