From fa4589c15fa53030de8aef69c49556e49faca772 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Thu, 5 Apr 2018 10:29:11 -0400 Subject: [PATCH] groupings and content --- src/_locales/en/messages.json | 3 + .../accounts/environment.component.html | 72 ++++---- src/popup2/accounts/hint.component.html | 20 ++- src/popup2/accounts/lock.component.html | 38 +++-- src/popup2/accounts/login.component.html | 46 +++--- src/popup2/accounts/register.component.html | 94 +++++------ .../two-factor-options.component.html | 26 +-- src/popup2/accounts/two-factor.component.html | 154 +++++++++--------- src/popup2/tabs.component.ts | 4 +- src/popup2/vault/groupings.component.html | 73 +++++++++ src/popup2/vault/groupings.component.ts | 74 +++++++-- src/scss/base.scss | 34 +++- src/scss/variables.scss | 7 +- 13 files changed, 407 insertions(+), 238 deletions(-) create mode 100644 src/popup2/vault/groupings.component.html diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 0cb4c61940..e5c6acb5a5 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -1052,5 +1052,8 @@ }, "loading": { "message": "Loading..." + }, + "types": { + "message": "Types" } } diff --git a/src/popup2/accounts/environment.component.html b/src/popup2/accounts/environment.component.html index 8eacaf7bf9..4f28521fdc 100644 --- a/src/popup2/accounts/environment.component.html +++ b/src/popup2/accounts/environment.component.html @@ -13,45 +13,47 @@ -
-
- {{'selfHostedEnvironment' | i18n}} -
-
-
- - + +
+
+ {{'selfHostedEnvironment' | i18n}} +
+
+
+ + +
+
+
+ {{'selfHostedEnvironmentFooter' | i18n}}
-
- {{'selfHostedEnvironmentFooter' | i18n}} -
-
-
-
- {{'customEnvironment' | i18n}} -
-
-
- - +
+
+ {{'customEnvironment' | i18n}}
-
- - +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
- - -
-
- - +
+ {{'customEnvironmentFooter' | i18n}}
-
- {{'customEnvironmentFooter' | i18n}} -
-
+ diff --git a/src/popup2/accounts/hint.component.html b/src/popup2/accounts/hint.component.html index 4a422e2ca5..4045c022db 100644 --- a/src/popup2/accounts/hint.component.html +++ b/src/popup2/accounts/hint.component.html @@ -13,15 +13,17 @@
-
-
-
- - + +
+
+
+ + +
+
+
+ {{'enterEmailToGetHint' | i18n}}
-
- {{'enterEmailToGetHint' | i18n}} -
-
+ diff --git a/src/popup2/accounts/lock.component.html b/src/popup2/accounts/lock.component.html index 176a559770..49cd59bf3f 100644 --- a/src/popup2/accounts/lock.component.html +++ b/src/popup2/accounts/lock.component.html @@ -8,25 +8,27 @@
-
-
-
-
- - -
-
- - - + +
+
+
+
+ + +
+
+ + + +
-
-

- {{'logOut' | i18n}} -

+

+ {{'logOut' | i18n}} +

+ diff --git a/src/popup2/accounts/login.component.html b/src/popup2/accounts/login.component.html index 57743af04b..33bc206fbc 100644 --- a/src/popup2/accounts/login.component.html +++ b/src/popup2/accounts/login.component.html @@ -13,30 +13,32 @@
-
-
-
- - -
-
-
- - + +
+
+
+ +
-
- - - +
+
+ + +
+
+ + + +
-
-

- {{'getMasterPasswordHint' | i18n}} -

+

+ {{'getMasterPasswordHint' | i18n}} +

+ diff --git a/src/popup2/accounts/register.component.html b/src/popup2/accounts/register.component.html index a64c1c446f..a31e2d3030 100644 --- a/src/popup2/accounts/register.component.html +++ b/src/popup2/accounts/register.component.html @@ -13,56 +13,58 @@
-
-
-
- - -
-
-
- - + +
+
+
+ +
-
- - - +
+
+ + +
+
+ + + +
-
-
- {{'masterPassDesc' | i18n}} -
-
-
-
-
-
- - -
-
- - - -
-
-
- - +
+ {{'masterPassDesc' | i18n}}
-
- {{'masterPassHintDesc' | i18n}} +
+
+
+
+ + +
+
+ + + +
+
+
+ + +
+
+
+ {{'masterPassHintDesc' | i18n}} +
-
+ diff --git a/src/popup2/accounts/two-factor-options.component.html b/src/popup2/accounts/two-factor-options.component.html index ee4ce1b6a0..d2bbd3112a 100644 --- a/src/popup2/accounts/two-factor-options.component.html +++ b/src/popup2/accounts/two-factor-options.component.html @@ -7,16 +7,18 @@
-
-
- - {{p.name}} - {{p.description}} - - - {{'recoveryCodeTitle' | i18n}} - {{'recoveryCodeDesc' | i18n}} - + +
+
+ + {{p.name}} + {{p.description}} + + + {{'recoveryCodeTitle' | i18n}} + {{'recoveryCodeDesc' | i18n}} + +
-
+ diff --git a/src/popup2/accounts/two-factor.component.html b/src/popup2/accounts/two-factor.component.html index f353552728..bd2021e1da 100644 --- a/src/popup2/accounts/two-factor.component.html +++ b/src/popup2/accounts/two-factor.component.html @@ -15,92 +15,94 @@
- -
- - {{'enterVerificationCodeApp' | i18n}} - - - {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}} - -
-
-
-
- - -
-
- - +
+ + {{'enterVerificationCodeApp' | i18n}} + + + {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}} + +
+
+
+
+ + +
+
+ + +
-
- - -
-

{{'insertYubiKey' | i18n}}

- -
-
-
-
- - -
-
- - + + +
+

{{'insertYubiKey' | i18n}}

+ +
+
+
+
+ + +
+
+ + +
-
- - -
- {{'loading' | i18n}} -
-

{{'insertU2f' | i18n}}

- -
-
-
-
-
- - + + +
+ {{'loading' | i18n}} +
+

{{'insertU2f' | i18n}}

+
-
- - +
+
+ + +
+
+
+ + -
-
- {{'twoStepNewWindowMessage' | i18n}} -
-
-
-
- - +
+
+ {{'twoStepNewWindowMessage' | i18n}} +
+
+
+
+ + +
+ +
+

{{'noTwoStepProviders' | i18n}}

+

{{'noTwoStepProviders2' | i18n}}

- -
-

{{'noTwoStepProviders' | i18n}}

-

{{'noTwoStepProviders2' | i18n}}

-
-
-

- {{'useAnotherTwoStepMethod' | i18n}} -

-

- - {{'sendVerificationCodeEmailAgain' | i18n}} - -

-
+
+

+ {{'useAnotherTwoStepMethod' | i18n}} +

+

+ + {{'sendVerificationCodeEmailAgain' | i18n}} + +

+
+ diff --git a/src/popup2/tabs.component.ts b/src/popup2/tabs.component.ts index aae3c32c22..33dba4fc60 100644 --- a/src/popup2/tabs.component.ts +++ b/src/popup2/tabs.component.ts @@ -13,6 +13,7 @@ import { Router } from '@angular/router'; @Component({ selector: 'app-tabs', template: ` +
`, + +
`, }) export class TabsComponent { } diff --git a/src/popup2/vault/groupings.component.html b/src/popup2/vault/groupings.component.html new file mode 100644 index 0000000000..6cebc13c8f --- /dev/null +++ b/src/popup2/vault/groupings.component.html @@ -0,0 +1,73 @@ +
+
+ +
+
+ {{'myVault' | i18n}} +
+
+ +
+
+ +
+
+ {{'favorites' | i18n}} +
+
+ + {{c.name}} + +
+
+
+
+ {{'types' | i18n}} +
+
+ + {{'typeLogin' | i18n}} + {{typeCounts.get(cipherType.Login) || 0}} + + + {{'typeCard' | i18n}} + {{typeCounts.get(cipherType.Card) || 0}} + + + {{'typeIdentity' | i18n}} + {{typeCounts.get(cipherType.Identity) || 0}} + + + {{'typeSecureNote' | i18n}} + {{typeCounts.get(cipherType.SecureNote) || 0}} + +
+
+

{{'loading' | i18n}}

+ +
+
+ {{'folders' | i18n}} +
+
+ + {{f.name}} + {{folderCounts.get(f.id) || 0}} + +
+
+
+
+ {{'collections' | i18n}} +
+
+ + {{c.name}} + {{collectionCounts.get(c.id) || 0}} + +
+
+ + diff --git a/src/popup2/vault/groupings.component.ts b/src/popup2/vault/groupings.component.ts index fa4ad44551..26d317c3fa 100644 --- a/src/popup2/vault/groupings.component.ts +++ b/src/popup2/vault/groupings.component.ts @@ -1,22 +1,74 @@ +import * as template from './groupings.component.html'; + import { Component, - ComponentFactoryResolver, - NgZone, - OnDestroy, OnInit, - Type, - ViewChild, - ViewContainerRef, } from '@angular/core'; -import { Router } from '@angular/router'; + +import { CipherType } from 'jslib/enums/cipherType'; + +import { CipherView } from 'jslib/models/view/cipherView'; + +import { CollectionService } from 'jslib/abstractions/collection.service'; +import { CipherService } from 'jslib/abstractions/cipher.service'; +import { FolderService } from 'jslib/abstractions/folder.service'; + +import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/components/groupings.component'; @Component({ selector: 'app-vault-groupings', - styles: [], - template: `Groupings`, + template: template, }) -export class GroupingsComponent { - constructor() { +export class GroupingsComponent extends BaseGroupingsComponent implements OnInit { + ciphers: CipherView[]; + favoriteCiphers: CipherView[]; + folderCounts = new Map(); + collectionCounts = new Map(); + typeCounts = new Map(); + constructor(collectionService: CollectionService, folderService: FolderService, + private cipherService: CipherService) { + super(collectionService, folderService); + } + + async ngOnInit() { + this.load(); + this.loaded = false; + await this.loadCiphers(); + this.loaded = true; + } + + async loadCiphers() { + this.ciphers = await this.cipherService.getAllDecrypted(); + this.ciphers.forEach((c) => { + if (c.favorite) { + if (this.favoriteCiphers == null) { + this.favoriteCiphers = []; + } + this.favoriteCiphers.push(c); + } + + if (this.typeCounts.has(c.type)) { + this.typeCounts.set(c.type, this.typeCounts.get(c.type) + 1); + } else { + this.typeCounts.set(c.type, 1); + } + + if (this.folderCounts.has(c.folderId)) { + this.folderCounts.set(c.folderId, this.folderCounts.get(c.folderId) + 1); + } else { + this.folderCounts.set(c.folderId, 1); + } + + if (c.collectionIds != null) { + c.collectionIds.forEach((colId) => { + if (this.collectionCounts.has(colId)) { + this.collectionCounts.set(colId, this.collectionCounts.get(colId) + 1); + } else { + this.collectionCounts.set(colId, 1); + } + }); + } + }); } } diff --git a/src/scss/base.scss b/src/scss/base.scss index 74b8188ac8..402dbe0855 100644 --- a/src/scss/base.scss +++ b/src/scss/base.scss @@ -7,7 +7,7 @@ } html, body { - background-color: $background-color-alt2; + background-color: $background-color; font-family: $font-family-sans-serif; font-size: $font-size-base; color: $text-color; @@ -71,16 +71,16 @@ textarea { resize: vertical; } -div::-webkit-scrollbar { +content::-webkit-scrollbar { width: 10px; height: 10px; } -div::-webkit-scrollbar-track { +content::-webkit-scrollbar-track { background-color: transparent; } -div::-webkit-scrollbar-thumb { +content::-webkit-scrollbar-thumb { background-color: rgba(100,100,100,.2); border-radius: 10px; margin-right: 1px; @@ -196,3 +196,29 @@ header { } } } + +app-root { + position: absolute; + width: 100%; + height: 100%; + z-index: 980; +} + +content { + position: absolute; + top: 44px; + bottom: 0; + left: 0; + right: 0; + overflow: auto; + + &.no-header { + top: 0; + } +} + +.tab-page { + content { + bottom: 55px; + } +} diff --git a/src/scss/variables.scss b/src/scss/variables.scss index e049dde946..499bb0898e 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -23,11 +23,10 @@ $brand-info: #555555; $brand-warning: #bf7e16; $brand-primary-accent: #286090; -$background-color: white; -$background-color-alt: #f9fafc; -$background-color-alt2: #ecf0f5; +$background-color: #f9fafc; +$background-color-alt: #ecf0f5; -$box-background-color: $background-color; +$box-background-color: white; $box-background-hover-color: $list-item-hover; $box-border-color: $border-color;