Fix for multiple arrow navigation bugs. (#741)
* Fix for multiple arrow navigation bugs. fixes #731 * Updating test to handle left arrow navigation. * Updating test to handle left arrow navigation. * Arrow right click fix. * Update frontend/cypress/integration/mainnet/mainnet.spec.ts Co-authored-by: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com> Co-authored-by: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
This commit is contained in:
		
							parent
							
								
									dd5d87e91e
								
							
						
					
					
						commit
						efc4e6a8ed
					
				@ -82,7 +82,7 @@ describe('Mainnet', () => {
 | 
			
		||||
                        cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
 | 
			
		||||
                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
 | 
			
		||||
                        cy.document().left();
 | 
			
		||||
                        cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
 | 
			
		||||
                        cy.get('h1').invoke('.title-block h1').should('equal', 'Next block');
 | 
			
		||||
                    });
 | 
			
		||||
                });
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -5,28 +5,28 @@
 | 
			
		||||
      <ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis 
 | 
			
		||||
        <div class="next-previous-blocks">
 | 
			
		||||
          <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
 | 
			
		||||
          </a>
 | 
			
		||||
          <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
 | 
			
		||||
          <span placement="bottom" class="disable">
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
 | 
			
		||||
          </span>
 | 
			
		||||
        </div>
 | 
			
		||||
      </ng-template>
 | 
			
		||||
      <ng-template [ngIf]="blockHeight" i18n="block.block"> Block 
 | 
			
		||||
        <div class="next-previous-blocks">
 | 
			
		||||
          <a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
 | 
			
		||||
          </a>
 | 
			
		||||
          <span *ngIf="!showNextBlocklink" placement="bottom" class="disable">
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true"></fa-icon>
 | 
			
		||||
          </span>
 | 
			
		||||
          <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
 | 
			
		||||
          <a *ngIf="showPreviousBlocklink" [routerLink]="['/block/' | relativeUrl, block?.previousblockhash]" (click)="navigateToPreviousBlock()" i18n-ngbTooltip="Previous Block" ngbTooltip="Previous Block" placement="bottom">
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
 | 
			
		||||
          <a *ngIf="showPreviousBlocklink && block" [routerLink]="['/block/' | relativeUrl, block.previousblockhash]" (click)="navigateToPreviousBlock()" i18n-ngbTooltip="Previous Block" ngbTooltip="Previous Block" placement="bottom">
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
 | 
			
		||||
          </a>
 | 
			
		||||
          <span *ngIf="!showPreviousBlocklink" placement="bottom" class="disable">
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
 | 
			
		||||
            <fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true"></fa-icon>
 | 
			
		||||
          </span>
 | 
			
		||||
        </div>
 | 
			
		||||
      </ng-template>
 | 
			
		||||
 | 
			
		||||
@ -182,8 +182,12 @@ export class BlockComponent implements OnInit, OnDestroy {
 | 
			
		||||
      if (this.showPreviousBlocklink && event.key === 'ArrowRight' && this.nextBlockHeight - 2 >= 0) {
 | 
			
		||||
        this.navigateToPreviousBlock();
 | 
			
		||||
      }
 | 
			
		||||
      if (this.showNextBlocklink && event.key === 'ArrowLeft') {
 | 
			
		||||
        this.navigateToNextBlock();
 | 
			
		||||
      if (event.key === 'ArrowLeft') {
 | 
			
		||||
        if (this.showNextBlocklink) {
 | 
			
		||||
          this.navigateToNextBlock();
 | 
			
		||||
        } else {
 | 
			
		||||
          this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + '/mempool-block/', '0']);
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
@ -261,13 +265,16 @@ export class BlockComponent implements OnInit, OnDestroy {
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  navigateToPreviousBlock() {
 | 
			
		||||
    if (!this.block) {
 | 
			
		||||
      return;
 | 
			
		||||
    }
 | 
			
		||||
    const block = this.latestBlocks.find((b) => b.height === this.nextBlockHeight - 2);
 | 
			
		||||
    this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', block ? block.id : this.block.previousblockhash], { state: { data: { block, blockHeight: this.nextBlockHeight - 2 } } });
 | 
			
		||||
    this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + '/block/', block ? block.id : this.block.previousblockhash], { state: { data: { block, blockHeight: this.nextBlockHeight - 2 } } });
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  navigateToNextBlock() {
 | 
			
		||||
    const block = this.latestBlocks.find((b) => b.height === this.nextBlockHeight);
 | 
			
		||||
    this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', block ? block.id : this.nextBlockHeight], { state: { data: { block, blockHeight: this.nextBlockHeight } } });
 | 
			
		||||
    this.router.navigate([(this.network && this.stateService.env.BASE_MODULE === 'mempool' ? '/' + this.network : '') + '/block/', block ? block.id : this.nextBlockHeight], { state: { data: { block, blockHeight: this.nextBlockHeight } } });
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  setNextAndPreviousBlockLink(){
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user