Merge branch 'master' into flow-diagram-interactivity

frontend/src/app/components/app/app.component.ts

@@ -25,6 +25,8 @@ export class AppComponent implements OnInit {
     if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
       this.dir = 'rtl';
       this.class = 'rtl-layout';
+    } else {
+      this.class = 'ltr-layout';
     }
 
     tooltipConfig.animation = false;

frontend/src/app/components/blockchain/blockchain.component.scss

@@ -27,7 +27,6 @@
   left: 0;
   top: 75px;
   transform: translateX(50vw);
-  transition: transform 1s;
 }
 
 .position-container.liquid, .position-container.liquidtestnet {
@@ -97,14 +96,31 @@
 }
 
 .blockchain-wrapper.ltr-transition .blocks-wrapper,
+.blockchain-wrapper.ltr-transition .position-container,
 .blockchain-wrapper.ltr-transition .time-toggle {
   transition: transform 1s;
 }
 
-.blockchain-wrapper.time-ltr .blocks-wrapper {
+.blockchain-wrapper.time-ltr {
-  transform: scaleX(-1);
+  .blocks-wrapper {
+    transform: scaleX(-1);
+  }
+
+  .time-toggle {
+    transform: translateX(-50%) scaleX(-1);
+  }
 }
 
-.blockchain-wrapper.time-ltr .time-toggle {
+:host-context(.ltr-layout) {
-  transform: translateX(-50%) scaleX(-1);
+  .blockchain-wrapper.time-ltr .blocks-wrapper,
+  .blockchain-wrapper .blocks-wrapper {
+    direction: ltr;
+  }
+}
+
+:host-context(.rtl-layout) {
+  .blockchain-wrapper.time-ltr .blocks-wrapper,
+  .blockchain-wrapper .blocks-wrapper {
+    direction: rtl;
+  }
 }

frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss

@@ -147,3 +147,9 @@
     transform: scaleX(-1);
   }
 }
+
+:host-context(.rtl-layout) {
+  #arrow-up {
+    transform: translateX(70px);
+  }
+}

frontend/src/app/components/start/start.component.html

@@ -8,7 +8,7 @@
 
 <div *ngIf="countdown > 0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!</div>
 
-<div id="blockchain-container" dir="ltr" #blockchainContainer
+<div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
   (mousedown)="onMouseDown($event)"
   (dragstart)="onDragStart($event)"
 >

frontend/src/app/components/start/start.component.ts

@@ -1,4 +1,5 @@
-import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { specialBlocks } from '../../app.constants';
 
@@ -7,7 +8,7 @@ import { specialBlocks } from '../../app.constants';
   templateUrl: './start.component.html',
   styleUrls: ['./start.component.scss'],
 })
-export class StartComponent implements OnInit {
+export class StartComponent implements OnInit, OnDestroy {
   interval = 60;
   colors = ['#5E35B1', '#ffffff'];
 
@@ -16,6 +17,8 @@ export class StartComponent implements OnInit {
   eventName = '';
   mouseDragStartX: number;
   blockchainScrollLeftInit: number;
+  timeLtrSubscription: Subscription;
+  timeLtr: boolean = this.stateService.timeLtr.value;
   @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
 
   constructor(
@@ -23,6 +26,9 @@ export class StartComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
+      this.timeLtr = !!ltr;
+    });
     this.stateService.blocks$
       .subscribe((blocks: any) => {
         if (this.stateService.network !== '') {
@@ -72,4 +78,8 @@ export class StartComponent implements OnInit {
     this.mouseDragStartX = null;
     this.stateService.setBlockScrollingInProgress(false);
   }
+
+  ngOnDestroy() {
+    this.timeLtrSubscription.unsubscribe();
+  }
 }