105 support rtl layout (#228)

* Add RTL layout * Change languages object structure * Add fa.ts * Add persian coverage * Update the readme * Use experimental languages for none-production * Fixed some bugs * Fixed bug when initial project * Update the code * Update the source
owsolutions · Apr 29, 2018 · f6731ff · f6731ff
1 parent 38ad140
commit f6731ff
Show file tree

Hide file tree

Showing 27 changed files with 511 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -48,10 +48,23 @@ We are trying to cover as many as languages as possible. At the moment we do cov
 Please feel free to contribute to this repository in case you want to add your language.
 
 ## Right to left Support
-We are considering to support right-to-left (rtl) support for layout and components as well. Our goal is to support:
 
-* Persian (Iran, Afghanistan)
+We do support RTL layout but some components are not integrated that well. Our focus was on layout, direction and etc.
+We do support Persian language at the moment as experimental, and it's not provided in commercial version.
+Marketting team would choose either if they want new languages or regions and it's out of the scope.
+
+Currently supporting experimental
+
+* Polish ( Poland )
+* Persian ( Iran )
+* English ( World Wide )
+
+Target to support languages:
+
 * Arabic (United Arab Emirates, Egypt)
+* Turkish ( Turkey )
+* German ( Germany, Austria )
+* Spanish ( Spain )
 
 Please feel free to contribute to the locales for your own country.
 

diff --git a/dist/assets/css/forms-style.css b/dist/assets/css/forms-style.css
@@ -149,6 +149,11 @@
   text-align: left;
   margin-bottom: 0;
 }
+
+body[dir="rtl"] .j-forms label{
+  text-align: right;
+}
+
 .j-forms .label {
   font-size: 14px;
   margin-bottom: 6px;
@@ -190,6 +195,14 @@
 .j-forms .inline-group .checkbox {
   padding: 9px 0 8px 32px;
 }
+
+body[dir="rtl"] .j-forms .radio,
+body[dir="rtl"] .j-forms .checkbox,
+body[dir="rtl"] .j-forms .inline-group .radio,
+body[dir="rtl"] .j-forms .inline-group .checkbox {
+  padding: 9px 32px 8px 0px;
+}
+
 .j-forms .radio-toggle,
 .j-forms .checkbox-toggle,
 .j-forms .inline-group .radio-toggle,
@@ -216,6 +229,15 @@
   position: absolute;
   left: -9999px;
 }
+
+body[dir="rtl"] .j-forms .radio input,
+body[dir="rtl"] .j-forms .checkbox input,
+body[dir="rtl"] .j-forms .radio-toggle input,
+body[dir="rtl"] .j-forms .checkbox-toggle input {
+  position: absolute;
+  right: -9999px;
+}
+
 .j-forms .radio i,
 .j-forms .checkbox i,
 .j-forms .checkbox-toggle i,
@@ -234,6 +256,15 @@
   -o-transition: border-color 0.2s;
   transition: border-color 0.2s;
 }
+
+body[dir="rtl"] .j-forms .radio i,
+body[dir="rtl"] .j-forms .checkbox i,
+body[dir="rtl"] .j-forms .checkbox-toggle i,
+body[dir="rtl"] .j-forms .radio-toggle i {
+  left: auto !important;
+  right: 0px;
+}
+
 .j-forms .radio i,
 .j-forms .checkbox i {
   width: 18px;
@@ -312,6 +343,12 @@
   top: 2px;
   width: 14px;
 }
+body[dir="rtl"] .j-forms .checkbox-toggle i:before,
+body[dir="rtl"] .j-forms .radio-toggle i:before {
+  left: auto !important;
+  right: 2px !important;
+}
+
 .j-forms .checkbox-toggle input:checked + i:before,
 .j-forms .radio-toggle input:checked + i:before {
   left: 28px;

diff --git a/dist/index.html b/dist/index.html
@@ -1,2 +1,2 @@
 <!doctype html><html lang="en"><head><meta charset="utf-8"><title>Iot Dashboard | Cloud-Hosted Realtime Dashboard | Angular 5 Monitoring Dashboard</title><meta name="description" content="Connect your IoT devices, temperature, humidity and other to your cloud based dashboard. Zero configuration"><!-- we have disabled html5 routing because of github pages. You can enable it
-  and remove useHash param in the routes --><!-- <base href="/"> --><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.13340e20a9f6c52b27c6.bundle.css" rel="stylesheet"/></head><body><app-root><div id="preloader" class="preloader"><div class="loader"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div><div class="bar5"></div><div class="bar6"></div></div></div></app-root><script type="text/javascript" src="inline.318b50c57b4eba3d437b.bundle.js"></script><script type="text/javascript" src="polyfills.6d78ded5571f04aefe71.bundle.js"></script><script type="text/javascript" src="scripts.e519ef3666a8a65c1b79.bundle.js"></script><script type="text/javascript" src="main.c0d37dc8ba74e9621ba3.bundle.js"></script></body></html>
+  and remove useHash param in the routes --><!-- <base href="/"> --><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.351942f94d26118e7b0e.bundle.css" rel="stylesheet"/></head><body><app-root><div id="preloader" class="preloader"><div class="loader"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div><div class="bar5"></div><div class="bar6"></div></div></div></app-root><script type="text/javascript" src="inline.318b50c57b4eba3d437b.bundle.js"></script><script type="text/javascript" src="polyfills.6d78ded5571f04aefe71.bundle.js"></script><script type="text/javascript" src="scripts.e519ef3666a8a65c1b79.bundle.js"></script><script type="text/javascript" src="main.46227e130d874dcf1423.bundle.js"></script></body></html>
diff --git a/dist/main.46227e130d874dcf1423.bundle.js b/dist/main.46227e130d874dcf1423.bundle.js
diff --git a/dist/main.c0d37dc8ba74e9621ba3.bundle.js b/dist/main.c0d37dc8ba74e9621ba3.bundle.js
diff --git a/dist/styles.13340e20a9f6c52b27c6.bundle.css b/dist/styles.13340e20a9f6c52b27c6.bundle.css
diff --git a/dist/styles.351942f94d26118e7b0e.bundle.css b/dist/styles.351942f94d26118e7b0e.bundle.css
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
@@ -78,11 +78,13 @@ import { TranslateModule } from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Ng5BasicModule } from './ng5-basic/ng5-basic.module';
 import pl from './translations/pl';
+import fa from './translations/fa';
 import { GlobalizationService } from '@app/services/globalization.service';
 import { RestfulComponent } from '@app/components/docs/restful/restful.component';
 import { IfNotEnglishComponent } from './components/if-not-english/if-not-english.component';
 import { WaterBubbleComponent } from './components/water-bubble/water-bubble.component';
 import { Co2Component } from './components/co2/co2.component';
+import { DOCUMENT } from '@angular/common';
 import { RoleSingleComponent } from '@app/components/role-single/role-single.component';
 
 declare var require: any;
@@ -93,25 +95,36 @@ window['Highcharts'] = Highcharts;
   selector: 'app-root',
   template: '<router-outlet></router-outlet>'
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   constructor (
     private realtime: RealtimeService,
     private translate: TranslateService,
-
+    private globalization: GlobalizationService,
+    @Inject(DOCUMENT) private document: Document
   ) {
     this.realtime.ActivateRealtime();
     this.RestoreLanguage();
   }
+
+  ngOnInit() {
+    this.globalization.layoutDirectionEmmiter.subscribe(direction => {
+      this.document.body.setAttribute('dir', direction);
+    });
+  }
+
   private RestoreLanguage () {
     let lang = 'en';
     const _lang = localStorage.getItem('preferedLanguage');
-     if (_lang === 'en' || _lang === 'pl') {
+     if (_lang === 'en' || _lang === 'pl' || _lang === 'fa') {
       lang = _lang;
     }
 
     this.translate.setTranslation('pl', pl);
+    this.translate.setTranslation('fa', fa);
     this.translate.use(lang);
     this.translate.setDefaultLang(lang);
+    this.globalization.setLayoutDirection(true);
+    this.document.body.setAttribute('dir', this.globalization.getLayoutDirection());
   }
 }
 

diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
@@ -28,6 +28,7 @@ footer {
       margin: 0;
       padding: 15px;
       text-align: right;
+      direction: ltr !important;
       .material-icons {
           font-size: 18px;
           position: relative;
@@ -51,4 +52,15 @@ footer {
     background: #eee;
     font-size: 14px;
     outline: none;
+}
+
+::ng-deep body[dir="rtl"] {
+    .copyright {
+        text-align: left !important;
+    }
+    @media (max-width: 768px) { 
+        .copyright{
+            text-align: center !important;
+        }
+    }
 }
diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts
@@ -23,5 +23,6 @@ export class FooterComponent implements OnInit {
     this.translate.setDefaultLang(lang);
     this.translate.use(lang);
     localStorage.setItem('preferedLanguage', lang);
+    this.globalization.setLayoutDirection();
   }
 }
diff --git a/src/app/components/locations/location-row/location-row.component.scss b/src/app/components/locations/location-row/location-row.component.scss
@@ -29,6 +29,18 @@
     padding-bottom: 7px;
 }
 
+::ng-deep body[dir="rtl"] {
+    .list-names 
+    {
+        li {
+            .status {
+                float: left !important;
+            }
+        }
+    }
+}
+
+
 @media (max-width: 991.98px) {
     .location-image {
         width: 175px;

diff --git a/src/app/components/notification-list/notification-list.component.scss b/src/app/components/notification-list/notification-list.component.scss
@@ -202,4 +202,30 @@
     .notification-overlay{
         top: 4.2em;
     }
+}
+
+::ng-deep body[dir="rtl"] {
+    .notification-list-wrapper {
+        right: auto;
+        left: 0px;
+        transform: translateX(-100%);
+        direction: rtl !important;
+
+        .search-btn {
+            &.close-search-bar{
+                right: auto !important;
+                left: 5px;
+            }
+        }
+    }
+    .notification-list{
+        ul{
+            li {
+                .notification-content {
+                    padding-left: 0px;
+                    padding-right: 15px;
+                }
+            }
+        }
+    }
 }
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
@@ -44,6 +44,7 @@ export class ProfileComponent implements OnInit {
     this.translate.setDefaultLang(lang);
     this.translate.use(lang);
     localStorage.setItem('preferedLanguage', lang);
+    this.globalization.setLayoutDirection();
   }
 
   ngOnInit() {

diff --git a/src/app/components/widgets/daily-statistics/daily-statistics.component.scss b/src/app/components/widgets/daily-statistics/daily-statistics.component.scss
@@ -36,6 +36,15 @@
     }
 }
 
+::ng-deep body[dir="rtl"] {
+    .widget-value{
+        .current-value{
+            left: auto !important;
+            right: 10px;
+        }
+    }
+}
+
 .st-bar {
     width: 100%;
     text-align: center;

diff --git a/src/app/components/widgets/daily-statistics/daily-statistics.component.ts b/src/app/components/widgets/daily-statistics/daily-statistics.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
 declare var Highcharts: any;
 import { CloudDevice, DataSource, AppState } from '@app/definitions';
 import { Store } from '@ngrx/store';
+import { GlobalizationService } from '@app/services/globalization.service';
 
 function generateMockSeries() {
   const series = [];
@@ -80,13 +81,17 @@ export class DailyStatisticsComponent implements OnInit, AfterViewInit {
           type: 'datetime',
           dateTimeLabelFormats: {
             minute: '%H:%M',
-          }
+          },
+          reversed: this.globalization.getLayoutDirection() === 'ltr' ? false : true
         },
         legend: {
             layout: 'horizontal',
             align: 'left',
             verticalAlign: 'top',
         },
+        tooltip: {
+          useHTML: true
+        },
         plotOptions: {
             series: {
                 label: {
@@ -123,8 +128,14 @@ export class DailyStatisticsComponent implements OnInit, AfterViewInit {
   }
 
   constructor(
-    private store: Store<AppState>
-  ) { }
+    private store: Store<AppState>,
+    private globalization: GlobalizationService
+  ) {
+    globalization.layoutDirectionEmmiter.subscribe(direction => {
+      this.chart.xAxis.reversed = direction === 'ltr' ? false : true;
+      this.drawChart();
+    });
+  }
 
   public pushValue (date: Date, value: number) {
     if ( !this.chart) {

diff --git a/src/app/components/widgets/history-statistics/history-statistics.component.html b/src/app/components/widgets/history-statistics/history-statistics.component.html
@@ -5,12 +5,12 @@
         <h2>{{device.name}}</h2>
         <p>{{'Show for now and others' | translate}}</p>
       </div>
-      <div class="d-2 ml-auto d-sm-block current-item">
+      <div class="d-2 d-sm-block current-item">
         <div class="d-flex flex-column" *ngIf="dailyHistory.length">
           <div class="d-2">
             {{dailyHistory[activeIndex].date | date:'fullDate'}}
           </div>
-          <div class="d-2">
+          <div class="d-2 current-item-statistic-unit">
             <span  *ngIf="dailyHistory[activeIndex].status" [class]="dailyHistory[activeIndex].status === 'up'? 'text-success changeRate' : 'text-danger changeRate'">
               <i [class]="'icon-arrow_drop_' + dailyHistory[activeIndex].status"></i>
               {{dailyHistory[activeIndex].changeRate}} %

diff --git a/src/app/components/widgets/history-statistics/history-statistics.component.scss b/src/app/components/widgets/history-statistics/history-statistics.component.scss
@@ -17,6 +17,11 @@
             margin: 0;
         }
         .current-item {
+            margin-left: auto;
+            .current-item-statistic-unit{
+                direction: ltr;
+                text-align: left;
+            }
             .changeRate {
                 background: #eaeaea;
                 padding: 3px;
@@ -91,3 +96,34 @@
         }
     }
 }
+
+
+::ng-deep body[dir="rtl"] {
+    .hs-container {
+        .hs-title{
+            .current-item {
+                margin-left: 0px !important;
+                margin-right: auto !important;
+            }
+        }
+        .hs-table {
+            border-right: 0px !important;
+            border-left: 1px solid #eee;
+            table {
+                tr td > span {
+                    direction: ltr;
+                    float: left;                
+                }
+            }
+        }
+        .hs-chart {
+            width: 100%;
+            @media (min-width: 1199.98px) {
+                position: absolute;
+                left: 0 !important;
+                right: 260px !important;
+                width: auto;
+            }
+        }
+}
+}