Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-18 02:41:15 +02:00
Code Issues Projects Releases Wiki Activity

Basic proof of concept for cdk-virtual-scroll

Browse Source
This commit is contained in:
Thomas Rittson 2021-05-20 12:35:23 +10:00
parent b827614563
commit 9e5869773d
5 changed files with 84 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/popup/app.module.ts
View File

@ -1,4 +1,5 @@
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { ToasterModule } from 'angular2-toaster';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
@ -172,6 +173,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
ToasterModule.forRoot(),
InfiniteScrollModule,
DragDropModule,
ScrollingModule,
],
declarations: [
A11yTitleDirective,

46
src/popup/components/ciphers-list.component.html
View File

@ -1,23 +1,25 @@
<a *ngFor="let c of ciphers" (click)="selectCipher(c)" (dblclick)="launchCipher(c)" href="#" appStopClick
title="{{title}} - {{c.name}}" class="box-content-row box-content-row-flex">
<div class="row-main">
<app-vault-icon [cipher]="c"></app-vault-icon>
<div class="row-main-content">
<span class="text">
{{c.name}}
<ng-container *ngIf="c.organizationId">
<i class="fa fa-share-alt text-muted" title="{{'shared' | i18n}}" aria-hidden="true"></i>
<span class="sr-only">{{'shared' | i18n}}</span>
</ng-container>
<ng-container *ngIf="c.hasAttachments">
<i class="fa fa-paperclip text-muted" title="{{'attachments' | i18n}}" aria-hidden="true"></i>
<span class="sr-only">{{'attachments' | i18n}}</span>
</ng-container>
</span>
<span class="detail">{{c.subTitle}}</span>
<cdk-virtual-scroll-viewport itemSize="46">
<a *cdkVirtualFor="let c of ciphers" (click)="selectCipher(c)" (dblclick)="launchCipher(c)" href="#" appStopClick
title="{{title}} - {{c.name}}" class="box-content-row box-content-row-flex">
<div class="row-main">
<app-vault-icon [cipher]="c"></app-vault-icon>
<div class="row-main-content">
<span class="text">
{{c.name}}
<ng-container *ngIf="c.organizationId">
<i class="fa fa-share-alt text-muted" title="{{'shared' | i18n}}" aria-hidden="true"></i>
<span class="sr-only">{{'shared' | i18n}}</span>
</ng-container>
<ng-container *ngIf="c.hasAttachments">
<i class="fa fa-paperclip text-muted" title="{{'attachments' | i18n}}" aria-hidden="true"></i>
<span class="sr-only">{{'attachments' | i18n}}</span>
</ng-container>
</span>
<span class="detail">{{c.subTitle}}</span>
</div>
</div>
</div>
<app-action-buttons [cipher]="c" [showView]="showView" (onView)="viewCipher(c)" (launchEvent)="launchCipher(c)"
class="action-buttons">
</app-action-buttons>
</a>
<app-action-buttons [cipher]="c" [showView]="showView" (onView)="viewCipher(c)" (launchEvent)="launchCipher(c)"
class="action-buttons">
</app-action-buttons>
</a>
</cdk-virtual-scroll-viewport>

2
src/popup/components/ciphers-list.component.ts
View File

@ -34,4 +34,6 @@ export class CiphersListComponent {
viewCipher(c: CipherView) {
this.onView.emit(c);
}
async resetPaging() { }
}

51
src/popup/scss/misc.scss
View File

@ -356,3 +356,54 @@ select option {
background-color: darken(themed('inputBackgroundColor'), +1);
}
}
// TODO: this but better
cdk-virtual-scroll-viewport {
height: 500px;
width: 375px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto !important;
overflow-x: hidden !important;
&.flex {
display: flex;
flex-flow: column;
&.tab-page {
height: calc(100% - 99px);
}
}
}
// cribbed directly from base.scss
cdk-virtual-scroll-viewport::-webkit-scrollbar, cdk-virtual-scroll-viewport::-webkit-scrollbar {
width: 10px;
height: 10px;
}
cdk-virtual-scroll-viewport::-webkit-scrollbar-track, cdk-virtual-scroll-viewport::-webkit-scrollbar {
background-color: transparent;
}
cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb, cdk-virtual-scroll-viewport::-webkit-scrollbar {
border-radius: 10px;
margin-right: 1px;
@include themify($themes) {
background-color: themed('scrollbarColor');
}
&:hover {
@include themify($themes) {
background-color: themed('scrollbarHoverColor');
}
}
}
.cdk-virtual-scroll-content-wrapper {
width: 100%;
}

12
src/popup/vault/ciphers.component.html
View File

@ -53,8 +53,8 @@
</div>
</div>
</ng-container>
<ng-container *ngIf="(isPaging() ? pagedCiphers : ciphers) as filteredCiphers">
<div class="no-items" *ngIf="!filteredCiphers.length">
<ng-container *ngIf="ciphers">
<div class="no-items" *ngIf="!ciphers.length">
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
<ng-container *ngIf="loaded">
<p>{{'noItemsInList' | i18n}}</p>
@ -63,15 +63,13 @@
</button>
</ng-container>
</div>
<div class="box list only-list" *ngIf="filteredCiphers.length" infiniteScroll [infiniteScrollDistance]="1"
[infiniteScrollContainer]="'content'" [fromRoot]="true" [infiniteScrollDisabled]="!isPaging()"
(scrolled)="loadMore()">
<div class="box list only-list" *ngIf="ciphers.length">
<div class="box-header">
{{groupingTitle}}
<span class="flex-right">{{isSearching() ? filteredCiphers.length : ciphers.length}}</span>
<span class="flex-right">{{isSearching() ? ciphers.length : ciphers.length}}</span>
</div>
<div class="box-content">
<app-ciphers-list [ciphers]="filteredCiphers" title="{{'viewItem' | i18n}}"
<app-ciphers-list [ciphers]="ciphers" title="{{'viewItem' | i18n}}"
(onSelected)="selectCipher($event)" (launchEvent)="launchCipher($event)"></app-ciphers-list>
</div>
</div>