From 0cdc343ce090d892c0a1a2aea4f5ae6c29c599f2 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Mon, 29 Oct 2018 08:58:20 -0400 Subject: [PATCH] forward/back animations for nested cipher folders/cols --- jslib | 2 +- src/popup/app-routing.animations.ts | 10 +++++----- src/popup/app.component.ts | 10 +++++++++- src/popup/vault/ciphers.component.ts | 19 +++---------------- src/popup/vault/groupings.component.ts | 4 ++-- 5 files changed, 20 insertions(+), 25 deletions(-) diff --git a/jslib b/jslib index d4b3a16fd1..aa0b274f8f 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit d4b3a16fd1196abd3134c23a9fa0b6c002790458 +Subproject commit aa0b274f8fd80db620abd4a85c3086f511e19c88 diff --git a/src/popup/app-routing.animations.ts b/src/popup/app-routing.animations.ts index 849c242463..3c8c0679cf 100644 --- a/src/popup/app-routing.animations.ts +++ b/src/popup/app-routing.animations.ts @@ -103,17 +103,17 @@ export const routerTransition = trigger('routerTransition', [ transition('2fa => tabs', inSlideLeft), transition((fromState, toState) => { - if (fromState == null || toState === null || toState.indexOf('ciphers_') !== 0) { + if (fromState == null || toState === null || toState.indexOf('ciphers_') === -1) { return false; } - return fromState.indexOf('ciphers_direction=f') === 0 || fromState === 'tabs'; + return (fromState.indexOf('ciphers_') === 0 && fromState.indexOf('ciphers_direction=b') === -1) || + fromState === 'tabs'; }, inSlideLeft), transition((fromState, toState) => { - if (fromState == null || toState === null || fromState.indexOf('ciphers_') !== 0) { + if (fromState == null || toState === null || fromState.indexOf('ciphers_') === -1) { return false; } - return (fromState.indexOf('ciphers_') === 0 && fromState.indexOf('ciphers_direction=f') === -1) || - toState === 'tabs'; + return toState.indexOf('ciphers_direction=b') === 0 || toState === 'tabs'; }, outSlideRight), transition((fromState, toState) => { diff --git a/src/popup/app.component.ts b/src/popup/app.component.ts index bd0e0cead9..8a4376270f 100644 --- a/src/popup/app.component.ts +++ b/src/popup/app.component.ts @@ -132,6 +132,13 @@ export class AppComponent implements OnInit { this.stateService.remove('addEditCipher'); } this.previousUrl = url; + + // Clear route direction after animation (400ms) + if ((window as any).routeDirection != null) { + window.setTimeout(() => { + (window as any).routeDirection = null; + }, 400); + } } }); } @@ -140,7 +147,8 @@ export class AppComponent implements OnInit { if (BrowserApi.isEdge18) { return null; } else if (outlet.activatedRouteData.state === 'ciphers') { - return 'ciphers_direction=' + (outlet.activatedRoute.queryParams as any).value.direction + '_' + + const routeDirection = (window as any).routeDirection != null ? (window as any).routeDirection : ''; + return 'ciphers_direction=' + routeDirection + '_' + (outlet.activatedRoute.queryParams as any).value.folderId + '_' + (outlet.activatedRoute.queryParams as any).value.collectionId; } else { diff --git a/src/popup/vault/ciphers.component.ts b/src/popup/vault/ciphers.component.ts index 3592109484..eb4c52eeca 100644 --- a/src/popup/vault/ciphers.component.ts +++ b/src/popup/vault/ciphers.component.ts @@ -125,16 +125,6 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On this.searchText = this.state.searchText; } window.setTimeout(() => this.popupUtils.setContentScrollY(window, this.state.scrollY), 0); - - // TODO: This is pushing a new page onto the browser navigation history. Figure out how to now do that - // so that we don't have to hit back button twice - const newUrl = this.router.createUrlTree([], { - queryParams: { direction: null }, - queryParamsHandling: 'merge', - preserveFragment: true, - replaceUrl: true, - }).toString(); - this.location.go(newUrl); }); this.broadcasterService.subscribe(ComponentId, (message: any) => { @@ -173,12 +163,12 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On selectFolder(folder: FolderView) { if (folder.id != null) { - this.router.navigate(['/ciphers'], { queryParams: { folderId: folder.id, direction: 'f' } }); + this.router.navigate(['/ciphers'], { queryParams: { folderId: folder.id } }); } } selectCollection(collection: CollectionView) { - this.router.navigate(['/ciphers'], { queryParams: { collectionId: collection.id, direction: 'f' } }); + this.router.navigate(['/ciphers'], { queryParams: { collectionId: collection.id } }); } async launchCipher(cipher: CipherView) { @@ -203,6 +193,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On } back() { + (window as any).routeDirection = 'b'; this.location.back(); } @@ -230,10 +221,6 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On return !searching && this.ciphers.length > this.pageSize; } - routerCanReuse() { - return false; - } - async resetPaging() { this.pagedCiphers = []; this.loadMore(); diff --git a/src/popup/vault/groupings.component.ts b/src/popup/vault/groupings.component.ts index 3709d941f3..904e9e509b 100644 --- a/src/popup/vault/groupings.component.ts +++ b/src/popup/vault/groupings.component.ts @@ -242,12 +242,12 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit async selectFolder(folder: FolderView) { super.selectFolder(folder); - this.router.navigate(['/ciphers'], { queryParams: { folderId: folder.id || 'none', direction: 'f' } }); + this.router.navigate(['/ciphers'], { queryParams: { folderId: folder.id || 'none' } }); } async selectCollection(collection: CollectionView) { super.selectCollection(collection); - this.router.navigate(['/ciphers'], { queryParams: { collectionId: collection.id, direction: 'f' } }); + this.router.navigate(['/ciphers'], { queryParams: { collectionId: collection.id } }); } async selectCipher(cipher: CipherView) {