diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts index 4648d0792b..d3f0083f2a 100644 --- a/src/popup/app.module.ts +++ b/src/popup/app.module.ts @@ -1,6 +1,6 @@ import { DragDropModule } from '@angular/cdk/drag-drop'; +import { ScrollingModule } from '@angular/cdk/scrolling'; import { ToasterModule } from 'angular2-toaster'; -import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { AppRoutingModule } from './app-routing.module'; import { ServicesModule } from './services/services.module'; @@ -68,7 +68,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 { CipherRowComponent } from './components/cipher-row.component'; import { PopOutComponent } from './components/pop-out.component'; import { SendListComponent } from './components/send-list.component'; @@ -170,8 +170,8 @@ registerLocaleData(localeZhTw, 'zh-TW'); AppRoutingModule, ServicesModule, ToasterModule.forRoot(), - InfiniteScrollModule, DragDropModule, + ScrollingModule, ], declarations: [ A11yTitleDirective, @@ -184,8 +184,8 @@ registerLocaleData(localeZhTw, 'zh-TW'); BlurClickDirective, BoxRowDirective, CalloutComponent, + CipherRowComponent, CiphersComponent, - CiphersListComponent, CollectionsComponent, ColorPasswordPipe, CurrentTabComponent, diff --git a/src/popup/components/ciphers-list.component.html b/src/popup/components/cipher-row.component.html similarity index 52% rename from src/popup/components/ciphers-list.component.html rename to src/popup/components/cipher-row.component.html index 6c8c4a407b..19a9e87d7d 100644 --- a/src/popup/components/ciphers-list.component.html +++ b/src/popup/components/cipher-row.component.html @@ -1,23 +1,23 @@ - +
- +
- {{c.name}} - + {{cipher.name}} + {{'shared' | i18n}} - + {{'attachments' | i18n}} - {{c.subTitle}} + {{cipher.subTitle}}
-
diff --git a/src/popup/components/ciphers-list.component.ts b/src/popup/components/cipher-row.component.ts similarity index 71% rename from src/popup/components/ciphers-list.component.ts rename to src/popup/components/cipher-row.component.ts index 46fd10ddd3..f5e4a31b83 100644 --- a/src/popup/components/ciphers-list.component.ts +++ b/src/popup/components/cipher-row.component.ts @@ -5,24 +5,20 @@ import { Output, } from '@angular/core'; -import { CipherType } from 'jslib-common/enums/cipherType'; - import { CipherView } from 'jslib-common/models/view/cipherView'; @Component({ - selector: 'app-ciphers-list', - templateUrl: 'ciphers-list.component.html', + selector: 'app-cipher-row', + templateUrl: 'cipher-row.component.html', }) -export class CiphersListComponent { +export class CipherRowComponent { @Output() onSelected = new EventEmitter(); @Output() launchEvent = new EventEmitter(); @Output() onView = new EventEmitter(); - @Input() ciphers: CipherView[]; + @Input() cipher: CipherView; @Input() showView = false; @Input() title: string; - cipherType = CipherType; - selectCipher(c: CipherView) { this.onSelected.emit(c); } diff --git a/src/popup/scss/base.scss b/src/popup/scss/base.scss index 54769ebdfa..8dd54509f1 100644 --- a/src/popup/scss/base.scss +++ b/src/popup/scss/base.scss @@ -100,7 +100,7 @@ main { height: 100%; } -content::-webkit-scrollbar { +content::-webkit-scrollbar, cdk-virtual-scroll-viewport::-webkit-scrollbar { width: 10px; height: 10px; } @@ -109,7 +109,13 @@ content::-webkit-scrollbar-track { background-color: transparent; } -content::-webkit-scrollbar-thumb { +cdk-virtual-scroll-viewport::-webkit-scrollbar-track { + @include themify($themes) { + background-color: themed('backgroundColor'); + } +} + +content::-webkit-scrollbar-thumb, cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb { border-radius: 10px; margin-right: 1px; @@ -394,3 +400,15 @@ content { } } } + +// cdk-virtual-scroll +.cdk-virtual-scroll-viewport { + width: 100%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; +} + +.cdk-virtual-scroll-content-wrapper { + width: 100%; +} diff --git a/src/popup/services/popup-utils.service.ts b/src/popup/services/popup-utils.service.ts index 0ffdc3550e..8bfdb36bc4 100644 --- a/src/popup/services/popup-utils.service.ts +++ b/src/popup/services/popup-utils.service.ts @@ -25,14 +25,14 @@ export class PopupUtilsService { win.location.search.indexOf('uilocation=popup') > -1; } - getContentScrollY(win: Window): number { - const content = win.document.getElementsByTagName('content')[0]; + getContentScrollY(win: Window, scrollingContainer: string = 'content'): number { + const content = win.document.getElementsByTagName(scrollingContainer)[0]; return content.scrollTop; } - setContentScrollY(win: Window, scrollY: number): void { + setContentScrollY(win: Window, scrollY: number, scrollingContainer: string = 'content'): void { if (scrollY != null) { - const content = win.document.getElementsByTagName('content')[0]; + const content = win.document.getElementsByTagName(scrollingContainer)[0]; content.scrollTop = scrollY; } } diff --git a/src/popup/vault/ciphers.component.html b/src/popup/vault/ciphers.component.html index 3581afa21d..67cb8b398e 100644 --- a/src/popup/vault/ciphers.component.html +++ b/src/popup/vault/ciphers.component.html @@ -53,8 +53,8 @@ - -
+ +

{{'noItemsInList' | i18n}}

@@ -63,17 +63,17 @@
-
-
- {{groupingTitle}} - {{isSearching() ? filteredCiphers.length : ciphers.length}} + +
+
+ {{groupingTitle}} + {{isSearching() ? ciphers.length : ciphers.length}} +
+
+ +
-
- -
-
+ diff --git a/src/popup/vault/ciphers.component.ts b/src/popup/vault/ciphers.component.ts index b1e9da5e7e..1c221bb299 100644 --- a/src/popup/vault/ciphers.component.ts +++ b/src/popup/vault/ciphers.component.ts @@ -54,6 +54,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On private selectedTimeout: number; private preventSelected = false; private applySavedState = true; + private scrollingContainer = 'cdk-virtual-scroll-viewport'; constructor(searchService: SearchService, private route: ActivatedRoute, private router: Router, private location: Location, @@ -63,7 +64,6 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On private folderService: FolderService, private collectionService: CollectionService, private platformUtilsService: PlatformUtilsService, private cipherService: CipherService) { super(searchService); - this.pageSize = 100; this.applySavedState = (window as any).previousPopupUrl != null && !(window as any).previousPopupUrl.startsWith('/ciphers'); } @@ -132,7 +132,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On } if (this.applySavedState && this.state != null) { - window.setTimeout(() => this.popupUtils.setContentScrollY(window, this.state.scrollY), 0); + window.setTimeout(() => this.popupUtils.setContentScrollY(window, this.state.scrollY, + this.scrollingContainer), 0); } this.stateService.remove(ComponentId); if (queryParamsSub != null) { @@ -227,7 +228,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On private async saveState() { this.state = { - scrollY: this.popupUtils.getContentScrollY(window), + scrollY: this.popupUtils.getContentScrollY(window, this.scrollingContainer), searchText: this.searchText, }; await this.stateService.save(ComponentId, this.state); diff --git a/src/popup/vault/current-tab.component.html b/src/popup/vault/current-tab.component.html index 5400c82cc0..c4455992cd 100644 --- a/src/popup/vault/current-tab.component.html +++ b/src/popup/vault/current-tab.component.html @@ -27,9 +27,10 @@ {{loginCiphers.length}}
- - + +

{{'autoFillInfo' | i18n}}

- +
@@ -54,8 +55,8 @@ {{identityCiphers.length}}
- +
diff --git a/src/popup/vault/groupings.component.html b/src/popup/vault/groupings.component.html index 0aa0563202..ade7ba5593 100644 --- a/src/popup/vault/groupings.component.html +++ b/src/popup/vault/groupings.component.html @@ -29,8 +29,9 @@ {{favoriteCiphers.length}}
- +
@@ -74,7 +75,7 @@
-
+
{{'folders' | i18n}} {{folderCount}} @@ -100,13 +101,13 @@ {{nestedCollections.length}}
@@ -117,8 +118,9 @@
{{noFolderCiphers.length}}
- +
@@ -143,11 +145,14 @@

{{'noItemsInList' | i18n}}

-
-
- + +
+
+ +
-
+ diff --git a/tsconfig.json b/tsconfig.json index 577f0d92c5..73fc376634 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,8 +19,7 @@ } }, "angularCompilerOptions": { - "preserveWhitespaces": true, - "enableIvy": false + "preserveWhitespaces": true }, "include": [ "src"