[REF] *: add support for RTL languages

מזל טוב

The direction parameter will now have a real impact on the web interface and
completly switch the direction of the interface.
Add the dependency rtlcss to switch the direction with a css postprocessor.

Two different assets will be generated for ltr or rtl
/web/content/<...>/web.assets_backend.0.css
and
/web/content/<...>/rtl/web.assets_backend.0.css
to be able to differentiate it easily

Adapt the css and views to be easier to switch direction

Render graph as it is, do not move y-axis right side, as per mathematical rule
value goes left from origin are considered negative, so keep graph as it is
for right to left language

add test cases for language direction specific assets bundle
if language direction is rtl then we also store css files in assets bundle
now we store two assets bundle, one for ltr and one for rtl language direction
test two assets bundles generated, also test two assets bundle generated for en_US and ar_SY

14 files changed, 96 insertions, 5 deletions

diff --git a/addons/web/static/src/js/chrome/abstract_web_client.js b/addons/web/static/src/js/chrome/abstract_web_client.js
index f88d96e4223..2ada433fbc8 100644
--- a/addons/web/static/src/js/chrome/abstract_web_client.js
+++ b/addons/web/static/src/js/chrome/abstract_web_client.js
@@ -111,6 +111,7 @@ var AbstractWebClient = Widget.extend(ServiceProviderMixin, KeyboardNavigationMi
 
         return session.is_bound
             .then(function () {
+                self.$el.toggleClass('o_rtl', _t.database.parameters.direction === "rtl");
                 self.bind_events();
                 return $.when(
                     self.set_action_manager(),
diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index 94144cb25ec..7e3cb6128b9 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -22,6 +22,7 @@ odoo.define('web.dom', function (require) {
 
 var config = require('web.config');
 var core = require('web.core');
+var _t = core._t;
 
 /**
  * Private function to notify that something has been attached in the DOM
@@ -90,14 +91,15 @@ return {
         minHeight = (options && options.min_height) || 50;
 
         $fixedTextarea = $('<textarea disabled>', {
-            class: $textarea[0].className,
-        }).css({
+            class: $textarea[0].className,});
+
+        var direction = _t.database.parameters.direction === 'rtl' ? 'right' : 'left';
+        $fixedTextarea.css({
             position: 'absolute',
             opacity: 0,
             height: 10,
             top: -10000,
-            left: -10000,
-        });
+        }).css(direction, -10000);
         $fixedTextarea.data("auto_resize", true);
 
         var style = window.getComputedStyle($textarea[0], null);
diff --git a/addons/web/static/src/js/views/calendar/calendar_renderer.js b/addons/web/static/src/js/views/calendar/calendar_renderer.js
index ffb4f41ad6b..e76a487b73b 100644
--- a/addons/web/static/src/js/views/calendar/calendar_renderer.js
+++ b/addons/web/static/src/js/views/calendar/calendar_renderer.js
@@ -413,6 +413,7 @@ return AbstractRenderer.extend({
             },
             height: 'parent',
             unselectAuto: false,
+            isRTL: _t.database.parameters.direction === "rtl",
         });
 
         this.$calendar.fullCalendar(fc_options);
diff --git a/addons/web/static/src/js/views/pivot/pivot_controller.js b/addons/web/static/src/js/views/pivot/pivot_controller.js
index 945cc132b03..94f4f3c1876 100644
--- a/addons/web/static/src/js/views/pivot/pivot_controller.js
+++ b/addons/web/static/src/js/views/pivot/pivot_controller.js
@@ -164,8 +164,11 @@ var PivotController = AbstractController.extend({
             fields: fields
         }));
 
+        var cssProps = {top: top};
+        cssProps[_t.database.parameters.direction === 'rtl' ? 'right' : 'left'] =
+            _t.database.parameters.direction === 'rtl' ? this.$el.width() - left : left;
         this.$fieldSelection.find('.dropdown-menu').first()
-            .css({top: top, left: left})
+            .css(cssProps)
             .addClass('show');
     },
     /**
diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss
index c4df0ca2ed2..a9642c91df4 100644
--- a/addons/web/static/src/scss/datepicker.scss
+++ b/addons/web/static/src/scss/datepicker.scss
@@ -79,3 +79,15 @@ div.dropdown-menu.bootstrap-datetimepicker-widget{
         }
     }
 }
+
+// This is rtl language specific fix
+// it will fix the user agent stylesheet padding
+// and transform the prev and next icons
+.o_rtl {
+    .bootstrap-datetimepicker-widget .list-unstyled {
+        padding: 0;
+        .prev , .next {
+            transform: rotate(180deg);
+        }
+    }
+}
diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss
index bec4b288f9e..105c3afedbf 100644
--- a/addons/web/static/src/scss/dropdown.scss
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -81,3 +81,9 @@
 .navbar-nav {
     @include dropdown-menu-mixin;
 }
+
+.o_rtl {
+    .dropdown-menu {
+        left: auto;
+    }
+}
\ No newline at end of file
diff --git a/addons/web/static/src/scss/fontawesome_overriden.scss b/addons/web/static/src/scss/fontawesome_overriden.scss
new file mode 100644
index 00000000000..5fde7a750cd
--- /dev/null
+++ b/addons/web/static/src/scss/fontawesome_overriden.scss
@@ -0,0 +1,36 @@
+// This is rtl language specific fix
+// It will override the font awesome symbols and flip them 180 degree
+.fa {
+    &.fa-align-right,
+    &.fa-align-left,
+    &.fa-chevron-right,
+    &.fa-chevron-left,
+    &.fa-arrow-right,
+    &.fa-arrow-left,
+    &.fa-hand-o-right,
+    &.fa-hand-o-left,
+    &.fa-arrow-circle-right,
+    &.fa-arrow-circle-left,
+    &.fa-caret-right,
+    &.fa-caret-left,
+    &.fa-rotate-right,
+    &.fa-rotate-left,
+    &.fa-angle-double-right,
+    &.fa-angle-double-left,
+    &.fa-angle-right,
+    &.fa-angle-left,
+    &.fa-quote-right,
+    &.fa-quote-left,
+    &.fa-chevron-circle-right,
+    &.fa-chevron-circle-left,
+    &.fa-long-arrow-right,
+    &.fa-long-arrow-left,
+    &.fa-toggle-right,
+    &.fa-toggle-left,
+    &.fa-caret-square-o-right,
+    &.fa-arrow-circle-o-left,
+    &.fa-arrow-circle-o-right,
+    &.fa-caret-square-o-left {
+        transform: rotate(180deg);
+    }
+}
diff --git a/addons/web/static/src/scss/graph_view.scss b/addons/web/static/src/scss/graph_view.scss
index b30e066b278..900299949e9 100644
--- a/addons/web/static/src/scss/graph_view.scss
+++ b/addons/web/static/src/scss/graph_view.scss
@@ -1,5 +1,6 @@
 .o_graph {
     .o_graph_svg_container {
+        direction: ltr#{"/*rtl:ignore*/"};
         height: 100%;
         overflow: auto;
         svg {
diff --git a/addons/web/static/src/scss/report.scss b/addons/web/static/src/scss/report.scss
index cce5c6d3be5..8e2986e331d 100644
--- a/addons/web/static/src/scss/report.scss
+++ b/addons/web/static/src/scss/report.scss
@@ -1,5 +1,6 @@
 html, body {
     height: 100%;
+    direction: ltr;
 }
 
 body {
diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss
index 15071a156b8..fc1d84d8247 100644
--- a/addons/web/static/src/scss/search_view.scss
+++ b/addons/web/static/src/scss/search_view.scss
@@ -36,6 +36,7 @@
             }
 
             .o_facet_values {
+                direction: ltr#{"/*rtl:ignore*/"};
                 padding: 0 $o-searchview-facet-remove-width 0 5px;
                 .o_facet_values_sep {
                     font-style: italic;
diff --git a/addons/web/static/src/scss/ui.scss b/addons/web/static/src/scss/ui.scss
index d8c68853c0a..7d28bf5ccae 100644
--- a/addons/web/static/src/scss/ui.scss
+++ b/addons/web/static/src/scss/ui.scss
@@ -23,3 +23,19 @@
         }
     }
 }
+
+// This is rtl language specific fix
+// It will fix the extra space in ui-autocomplete class
+// and flip the next and previous symbols of jquery ui.
+.o_rtl {
+    .ui-autocomplete {
+        direction: ltr;
+        right: 0;
+        left: auto;
+    }
+    .ui-datepicker-next, .ui-datepicker-prev {
+        -webkit-transform: rotate(180deg);
+         -o-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+}
diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss
index 8c213a57682..7b7162d986a 100644
--- a/addons/web/static/src/scss/webclient.scss
+++ b/addons/web/static/src/scss/webclient.scss
@@ -6,6 +6,7 @@
 //  General
 // ------------------------------------------------------------------
 .o_web_client {
+    direction: ltr;
     position: relative; // normally useless but required by bootstrap-datepicker
     background-color: $o-webclient-background-color;
 }
diff --git a/addons/web/static/src/scss/webclient_extra.scss b/addons/web/static/src/scss/webclient_extra.scss
index 80e9390c534..7c11ac32a84 100644
--- a/addons/web/static/src/scss/webclient_extra.scss
+++ b/addons/web/static/src/scss/webclient_extra.scss
@@ -44,3 +44,9 @@ select {
     @include o-text-overflow;
     max-width: 150px;
 }
+
+.o_rtl {
+    .navbar-right {
+        padding: 0; // fix for user agent stylesheet -webkit-padding-start: 40px in rtl language
+    }
+}
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 924c5353b9d..dd43d18e79d 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -62,6 +62,10 @@
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/banner.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/colorpicker.scss"/>
 
+        <t t-if="request and request.env['res.lang'].search([('code', '=', request.env.lang)]).direction == 'rtl'">
+            <link rel="stylesheet" type="text/less" href="/web/static/src/scss/fontawesome_overriden.scss"/>
+        </t>
+
         <script type="text/javascript" src="/web/static/lib/es5-shim/es5-shim.min.js"></script>
         <script type="text/javascript" src="/web/static/lib/underscore/underscore.js"></script>
         <script type="text/javascript" src="/web/static/lib/underscore.string/lib/underscore.string.js"></script>