fix(translations): translate pointer on landing pages (#314)

fix(translations): translate pointer test case update

Closes #311

src/assets/i18n/en.json

@@ -24,6 +24,16 @@
     "and": "and",
     "build": "Build"
   },
+  "LANDING": {
+    "quick_access_toolbar": "Quick access to layers inspection, zooming functionalities and 3D mode, with the addition of the codegen editor (see below for more details).",
+    "quick_access_preview_download": "Quick access and download the original design as it was exported by SketchApp.",
+    "design_editor_info": "A fully fledged design viewer with both 2D and 3D inspection mode allowing you to access all the layers of your design.",
+    "sketch_layer_list": "Quickly access and inspect the layers hierarchy of the Sketch design.",
+    "property_panel": "Complementary property inspector of each layer including size and dimensions, style information and much more.",
+    "code_editor_options": "Additional export options to external editors and IDEs, and a handy archive download feature for local development.",
+    "code_editor_tech_list": "Many ouput Web technologies including but not limited to Angular, Vue.js, React, Web Components, etc...",
+    "code_editor_content": "A code editor to quickly view the generated code of the current design for the selected technology."
+  },
   "DROPZONE": {
     "text": "Drop Your Design File Here"
   },

src/assets/i18n/nl.json

@@ -24,6 +24,16 @@
     "and": "en",
     "build": "Versie"
   },
+  "LANDING": {
+    "quick_access_toolbar": "Snelle toegang om de verschillende lagen te kunnen bekijken, zoomfuncties, 3D-modues en de codegen-editor",
+    "quick_access_preview_download": "Eenvoudig het orginele ontwerp, zoals het werd geëxporteerd door de SkechtApp downloaden",
+    "design_editor_info": "Een editor met zowel 2D- als 3D modus waarmee u toegang heeft tot alle ontwerp lagen.",
+    "sketch_layer_list": "Krijg snel toegang tot de verschillende lagen van het schetsontwerp en inspecteer deze.",
+    "property_panel": "De eigenschappen van elke laag, inclusief groote en afmetingen, stijlinformatie en nog veel meer",
+    "code_editor_options": "Extra exportopties voor externe editors, IDE's en een handige download functie voor lokale ontwikkeling.",
+    "code_editor_tech_list": "De mogelijkheid om naar een aantal verschillende frameworks te kunnen exporteren",
+    "code_editor_content": "Een code-editor om snel de gegenereerde code van het huidige ontwerp voor de geselecteerde technologie te bekijken."
+  },
   "DROPZONE": {
     "text": "Sleep je sketch bestanden hierin"
   },

src/home/interactive-bg/interactive-bg.component.html

@@ -14,7 +14,7 @@
             <div
               class="xly-tooltip__body xly-compensate-type-top xly-compensate-type-bottom"
             >
-              {{ uiSection.description }}
+              {{ uiSection.description | translate  }}
             </div>
           </div>
         </div>

src/home/interactive-bg/interactive-bg.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { InteractiveBgComponent } from './interactive-bg.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('InteractiveBgComponent', () => {
   let component: InteractiveBgComponent;
@@ -10,7 +11,8 @@ describe('InteractiveBgComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
-      declarations: [InteractiveBgComponent]
+      declarations: [InteractiveBgComponent],
+      imports: [TranslateModule.forRoot()]
     }).compileComponents();
   }));
 

src/home/landing/landing.component.ts

@@ -27,7 +27,7 @@ export class LandingComponent implements OnInit {
         left: '414px'
       },
       description:
-      'Quick access to layers inspection, zooming functionalities and 3D mode, with the addition of the codegen editor (see below for more details).'
+      'LANDING.quick_access_toolbar'
     },
     {
       frame: {
@@ -46,7 +46,7 @@ export class LandingComponent implements OnInit {
         left: '100px'
       },
       description:
-        'Quickly access and inspect the layers hierarchy of the Sketch design.'
+        'LANDING.sketch_layer_list'
     },
     {
       frame: {
@@ -65,7 +65,7 @@ export class LandingComponent implements OnInit {
         left: '592px'
       },
       description:
-        'A fully fledged design viewer with both 2D and 3D inspection mode allowing you to access all the layers of your design.'
+        'LANDING.design_editor_info'
     },
     {
       frame: {
@@ -84,7 +84,7 @@ export class LandingComponent implements OnInit {
         left: '995px'
       },
       description:
-        'Quick access and download the original design as it was exported by SketchApp.'
+        'LANDING.quick_access_preview_download'
     },
     {
       frame: {
@@ -103,7 +103,7 @@ export class LandingComponent implements OnInit {
         left: '1000px'
       },
       description:
-        'Complementary property inspector of each layer including size and dimensions, style information and much more. '
+        'LANDING.property_panel'
     }
   ];
 
@@ -124,7 +124,7 @@ export class LandingComponent implements OnInit {
       left: '472px'
     },
     description:
-      'Additional export options to external editors and IDEs, and a handy archive download feature for local development.'
+      'LANDING.code_editor_options'
   }, {
     frame: {
       width: '1046px',
@@ -142,7 +142,7 @@ export class LandingComponent implements OnInit {
       left: '520px'
     },
     description:
-      'A code editor to quickly view the generated code of the current design for the selected technology.'
+      'LANDING.code_editor_content'
   }, {
     frame: {
       width: '140px',
@@ -160,7 +160,7 @@ export class LandingComponent implements OnInit {
       left: '1042px'
     },
     description:
-      'Many ouput Web technologies including but not limited to Angular, Vue.js, React, Web Components, etc...'
+      'LANDING.code_editor_tech_list'
   }];
 
   constructor() {}