diff --git a/src/popup2/app.module.ts b/src/popup2/app.module.ts index 885215d7e6f..4e5f67c8198 100644 --- a/src/popup2/app.module.ts +++ b/src/popup2/app.module.ts @@ -40,6 +40,7 @@ import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe'; import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; import { ActionButtonsComponent } from './components/action-buttons.component'; +import { CiphersListComponent } from './components/ciphers-list.component'; import { PopOutComponent } from './components/pop-out.component'; import { IconComponent } from 'jslib/angular/components/icon.component'; @@ -66,6 +67,7 @@ import { IconComponent } from 'jslib/angular/components/icon.component'; BlurClickDirective, BoxRowDirective, CiphersComponent, + CiphersListComponent, CurrentTabComponent, EnvironmentComponent, FallbackSrcDirective, diff --git a/src/popup2/components/ciphers-list.component.html b/src/popup2/components/ciphers-list.component.html new file mode 100644 index 00000000000..1dce61e2b5c --- /dev/null +++ b/src/popup2/components/ciphers-list.component.html @@ -0,0 +1,13 @@ + +
+ + + {{c.name}} + + + + {{c.subTitle}} +
+ + diff --git a/src/popup2/components/ciphers-list.component.ts b/src/popup2/components/ciphers-list.component.ts new file mode 100644 index 00000000000..015c3d3e459 --- /dev/null +++ b/src/popup2/components/ciphers-list.component.ts @@ -0,0 +1,40 @@ +import * as template from './ciphers-list.component.html'; +import { + Component, + EventEmitter, + Input, + Output, +} from '@angular/core'; + +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { BrowserApi } from '../../browser/browserApi'; + +import { CipherType } from 'jslib/enums/cipherType'; + +import { CipherView } from 'jslib/models/view/cipherView'; + +import { I18nService } from 'jslib/abstractions/i18n.service'; +import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; + +import { PopupUtilsService } from '../services/popup-utils.service'; + +@Component({ + selector: 'app-ciphers-list', + template: template, +}) +export class CiphersListComponent { + @Output() onSelected = new EventEmitter(); + @Input() ciphers: CipherView[]; + @Input() showView: boolean = false; + @Input() title: string; + + cipherType = CipherType; + + constructor() { } + + selectCipher(c: CipherView) { + this.onSelected.emit(c); + } +} diff --git a/src/popup2/vault/ciphers.component.html b/src/popup2/vault/ciphers.component.html index e21608749a2..f4c6a4c2db9 100644 --- a/src/popup2/vault/ciphers.component.html +++ b/src/popup2/vault/ciphers.component.html @@ -16,26 +16,12 @@ -
+
Some name here
- -
- - - {{c.name}} - - - - {{c.subTitle}} -
- - +
diff --git a/src/popup2/vault/groupings.component.html b/src/popup2/vault/groupings.component.html index b447edbd4a4..ff9f248ed4f 100644 --- a/src/popup2/vault/groupings.component.html +++ b/src/popup2/vault/groupings.component.html @@ -6,68 +6,107 @@ {{'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}} + {{'favorites' | i18n}} + {{favoriteCiphers.length}}
- - {{f.name}} - {{folderCounts.get(f.id) || 0}} + +
+
+
+
+ {{'types' | i18n}} + 4 +
+
+ +
+ {{'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}} + +
-
+
+
+ {{'folders' | i18n}} + {{folderCount}} +
+
+ +
+ +
+ {{f.name}} +
+ {{folderCounts.get(f.id) || 0}} + +
+ +
+
+
{{'collections' | i18n}} + {{collections.length}}
-
+
+
{{c.name}} - {{collectionCounts.get(c.id) || 0}} +
+ {{collectionCounts.get(c.id) || 0}} + +
+
+
+ {{'noneFolder' | i18n}} +
{{noFolderCiphers.length}}
+
+
+ +
+
diff --git a/src/popup2/vault/groupings.component.ts b/src/popup2/vault/groupings.component.ts index 71ac3aacfb5..4d3b00a5695 100644 --- a/src/popup2/vault/groupings.component.ts +++ b/src/popup2/vault/groupings.component.ts @@ -25,9 +25,12 @@ import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/comp export class GroupingsComponent extends BaseGroupingsComponent implements OnInit { ciphers: CipherView[]; favoriteCiphers: CipherView[]; + noFolderCiphers: CipherView[]; + folderCount: number; folderCounts = new Map(); collectionCounts = new Map(); typeCounts = new Map(); + showNoFolderCiphers = false; constructor(collectionService: CollectionService, folderService: FolderService, private cipherService: CipherService, private router: Router) { @@ -35,9 +38,20 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit } async ngOnInit() { - super.load(); + await super.load(); super.loaded = false; + await this.loadCiphers(); + this.showNoFolderCiphers = this.noFolderCiphers != null && this.noFolderCiphers.length < 100 && + this.collections.length === 0; + if (this.showNoFolderCiphers) { + // Remove "No Folder" from folder listing + this.folders.pop(); + this.folderCount = this.folders.length; + } else { + this.folderCount = this.folders.length - 1; + } + super.loaded = true; } @@ -51,6 +65,13 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit this.favoriteCiphers.push(c); } + if (c.folderId == null) { + if (this.noFolderCiphers == null) { + this.noFolderCiphers = []; + } + this.noFolderCiphers.push(c); + } + if (this.typeCounts.has(c.type)) { this.typeCounts.set(c.type, this.typeCounts.get(c.type) + 1); } else { diff --git a/src/scss/box.scss b/src/scss/box.scss index 49bf070bce7..e5fef12c808 100644 --- a/src/scss/box.scss +++ b/src/scss/box.scss @@ -12,6 +12,7 @@ margin: 0 10px 5px 10px; color: $gray-light; text-transform: uppercase; + display: flex; } .box-content { @@ -227,7 +228,7 @@ width: calc(100% - 25px); } - .row-sub-icon { + .row-sub-icon, .row-sub-label + i.fa { color: $list-icon-color; } @@ -236,6 +237,23 @@ color: $gray-light; white-space: nowrap; } + + .icon { + display: flex; + justify-content: center; + align-items: center; + float: left; + height: 36px; + width: 34px; + margin-left: -5px; + color: $text-muted; + + img { + border-radius: $border-radius; + max-height: 20px; + max-width: 20px; + } + } } &.condensed .box-content-row, .box-content-row.condensed { @@ -248,6 +266,17 @@ background-color: initial; } } + + &.single-line { + .box-content-row { + display: flex; + + .icon { + height: initial; + text-align: center; + } + } + } } .box-footer { @@ -257,8 +286,6 @@ } &.list { - margin-bottom: 0; - .box-content { .box-content-row { padding: 3px 10px; @@ -274,36 +301,34 @@ padding-left: 5px; } + .action-buttons { + .row-btn { + padding-left: 5px; + padding-right: 5px; + } + } + .text, .detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - display: block; - color: $text-color; } + } - .detail { - font-size: $font-size-small; - color: $gray-light; - } - - .icon { - display: flex; - justify-content: center; - align-items: center; - float: left; - height: 36px; - width: 34px; - margin-left: -5px; - color: $text-muted; - - img { - border-radius: $border-radius; - max-height: 20px; - max-width: 20px; - } + &.single-line { + .box-content-row { + padding-top: 10px; + padding-bottom: 10px; } } } } + + &.only-list { + margin-bottom: 0; + + .box-content { + border-bottom: none; + } + } } diff --git a/src/scss/misc.scss b/src/scss/misc.scss index d09c3ab2e1b..4a2cd82d44a 100644 --- a/src/scss/misc.scss +++ b/src/scss/misc.scss @@ -28,6 +28,10 @@ small { text-align: center; } +.flex-right { + margin-left: auto; +} + .no-margin { margin: 0 !important; }