forward/back animations for nested cipher folders/cols

jslib

@@ -1 +1 @@
-Subproject commit d4b3a16fd1196abd3134c23a9fa0b6c002790458
+Subproject commit aa0b274f8fd80db620abd4a85c3086f511e19c88

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) => {

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 {

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();

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) {