Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-04 09:01:01 +01:00
Code Issues Projects Releases Wiki Activity

control applying saved state and when to show groupings

Browse Source
This commit is contained in:
Kyle Spearrin 2018-10-29 09:29:21 -04:00
parent 0cdc343ce0
commit bc5cec82cc
3 changed files with 52 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/popup/app.component.ts
View File

@ -59,7 +59,6 @@ export class AppComponent implements OnInit {
}); });
private lastActivity: number = null; private lastActivity: number = null;
private previousUrl: string = '';
constructor(private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics, private analytics: Angulartics2, constructor(private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics, private analytics: Angulartics2,
private toasterService: ToasterService, private storageService: StorageService, private toasterService: ToasterService, private storageService: StorageService,
@ -124,14 +123,15 @@ export class AppComponent implements OnInit {
this.router.events.subscribe((event) => { this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) { if (event instanceof NavigationEnd) {
const url = event.urlAfterRedirects || event.url || ''; const url = event.urlAfterRedirects || event.url || '';
if (url.startsWith('/tabs/') && this.previousUrl.startsWith('/tabs/')) { if (url.startsWith('/tabs/') && (window as any).previousPopupUrl != null &&
(window as any).previousPopupUrl.startsWith('/tabs/')) {
this.stateService.remove('GroupingsComponent'); this.stateService.remove('GroupingsComponent');
this.stateService.remove('CiphersComponent'); this.stateService.remove('CiphersComponent');
} }
if (url.startsWith('/tabs/')) { if (url.startsWith('/tabs/')) {
this.stateService.remove('addEditCipher'); this.stateService.remove('addEditCipher');
} }
this.previousUrl = url; (window as any).previousPopupUrl = url;
// Clear route direction after animation (400ms) // Clear route direction after animation (400ms)
if ((window as any).routeDirection != null) { if ((window as any).routeDirection != null) {

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

@ -16,40 +16,42 @@
</button> </button>
</div> </div>
</header> </header>
<content [ngClass]="{'stacked-boxes': nestedFolders && nestedFolders.length || nestedCollections && nestedCollections.length}"> <content [ngClass]="{'stacked-boxes': showGroupings()}">
<div class="box list" *ngIf="nestedFolders && nestedFolders.length"> <ng-container *ngIf="showGroupings()">
<div class="box-header"> <div class="box list" *ngIf="nestedFolders && nestedFolders.length">
{{'folders' | i18n}} <div class="box-header">
</div> {{'folders' | i18n}}
<div class="box-content single-line"> </div>
<a *ngFor="let f of nestedFolders" href="#" class="box-content-row" <div class="box-content single-line">
appStopClick appBlurClick (click)="selectFolder(f.node)"> <a *ngFor="let f of nestedFolders" href="#" class="box-content-row"
<div class="row-main"> appStopClick appBlurClick (click)="selectFolder(f.node)">
<div class="icon"> <div class="row-main">
<i class="fa fa-fw fa-lg" <div class="icon">
[ngClass]="{'fa-folder-open': f.node.id, 'fa-folder-open-o': !f.node.id}"></i> <i class="fa fa-fw fa-lg"
[ngClass]="{'fa-folder-open': f.node.id, 'fa-folder-open-o': !f.node.id}"></i>
</div>
<span class="text">{{f.node.name}}</span>
</div> </div>
<span class="text">{{f.node.name}}</span> <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</div> </a>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span> </div>
</a>
</div> </div>
</div> <div class="box list" *ngIf="nestedCollections && nestedCollections.length">
<div class="box list" *ngIf="nestedCollections && nestedCollections.length"> <div class="box-header">
<div class="box-header"> {{'collections' | i18n}}
{{'collections' | i18n}} </div>
<div class="box-content single-line">
<a *ngFor="let c of nestedCollections" href="#" class="box-content-row"
appStopClick appBlurClick (click)="selectCollection(c.node)">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
<span class="text">{{c.node.name}}</span>
</div>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
</div>
</div> </div>
<div class="box-content single-line"> </ng-container>
<a *ngFor="let c of nestedCollections" href="#" class="box-content-row"
appStopClick appBlurClick (click)="selectCollection(c.node)">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
<span class="text">{{c.node.name}}</span>
</div>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
</div>
</div>
<ng-container *ngIf="(!isPaging() ? ciphers : pagedCiphers) as filteredCiphers"> <ng-container *ngIf="(!isPaging() ? ciphers : pagedCiphers) as filteredCiphers">
<div class="no-items" *ngIf="!filteredCiphers.length"> <div class="no-items" *ngIf="!filteredCiphers.length">
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i> <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>

20
src/popup/vault/ciphers.component.ts
View File

@ -56,6 +56,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
private selectedTimeout: number; private selectedTimeout: number;
private preventSelected = false; private preventSelected = false;
private pageSize = 100; private pageSize = 100;
private applySavedState = true;
constructor(searchService: SearchService, private route: ActivatedRoute, constructor(searchService: SearchService, private route: ActivatedRoute,
private router: Router, private location: Location, private router: Router, private location: Location,
@ -66,6 +67,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
private analytics: Angulartics2, private platformUtilsService: PlatformUtilsService) { private analytics: Angulartics2, private platformUtilsService: PlatformUtilsService) {
super(searchService); super(searchService);
this.pageSize = platformUtilsService.isEdge() ? 25 : 100; this.pageSize = platformUtilsService.isEdge() ? 25 : 100;
this.applySavedState = (window as any).previousPopupUrl != null &&
!(window as any).previousPopupUrl.startsWith('/ciphers');
} }
async ngOnInit() { async ngOnInit() {
@ -120,11 +123,14 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
} }
this.loadMore(); this.loadMore();
this.state = (await this.stateService.get<any>(ComponentId)) || {}; if (this.applySavedState) {
if (this.state.searchText) { this.state = (await this.stateService.get<any>(ComponentId)) || {};
this.searchText = this.state.searchText; if (this.state.searchText) {
this.searchText = this.state.searchText;
}
window.setTimeout(() => this.popupUtils.setContentScrollY(window, this.state.scrollY), 0);
} }
window.setTimeout(() => this.popupUtils.setContentScrollY(window, this.state.scrollY), 0); this.stateService.remove(ComponentId);
}); });
this.broadcasterService.subscribe(ComponentId, (message: any) => { this.broadcasterService.subscribe(ComponentId, (message: any) => {
@ -209,6 +215,12 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
this.didScroll = this.pagedCiphers.length > this.pageSize; this.didScroll = this.pagedCiphers.length > this.pageSize;
} }
showGroupings() {
return !this.isSearching() &&
((this.nestedFolders && this.nestedFolders.length) ||
(this.nestedCollections && this.nestedCollections.length));
}
isSearching() { isSearching() {
return !this.searchPending && this.searchService.isSearchable(this.searchText); return !this.searchPending && this.searchService.isSearchable(this.searchText);
} }