From 639f6e4aaed11f9c49e7d2a4767bcbc1207b07af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Thu, 30 Aug 2018 16:09:18 +0200
Subject: [PATCH] Support RTL language direction

- Use bootstrap-rtl-ondemand css rules to modify bootstrap behavior.
- Add flip class on navbar.
- Switch offcanavas direction.
- Replace right/left icon depending.
- Flip icon image

issue7388
review74291002
---
 CHANGELOG            |  1 +
 bower.json           |  3 ++-
 index.html           |  7 ++++---
 src/offcanvas.less   |  2 +-
 src/sao.js           |  8 ++++++++
 src/sao.less         | 49 ++++++++++++++++++++++++++++++++++++++++++++
 src/tab.js           |  4 ++--
 src/view/calendar.js | 28 +++++++++++++++++++------
 src/view/form.js     | 20 ++++++++++++------
 src/view/tree.js     | 11 ++++++----
 10 files changed, 110 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index 2a1389517c..68008f7854 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,3 +1,4 @@
+* Support RTL language direction
 * Apply factor on domain parser
 * Use tab name in CSV Export/Import
 * Add bus management
diff --git a/bower.json b/bower.json
index e5f5da9443..52e76fd03b 100644
--- a/bower.json
+++ b/bower.json
@@ -23,7 +23,8 @@
     "c3": "^0.6",
     "papaparse": "^4.1",
     "fullcalendar": "^3.0",
-    "mousetrap": "^1.6"
+    "mousetrap": "^1.6",
+    "bootstrap-rtl-ondemand": "^3.3.4-ondemand"
   },
   "devDependencies": {
     "qunit": "^1.18"
diff --git a/index.html b/index.html
index 14a070d65d..3d30e417a8 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,7 @@ this repository contains the full copyright notices and license terms. -->
         <script type="text/javascript" src="bower_components/mousetrap/mousetrap.min.js"></script>
 
         <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
+        <link rel="stylesheet" href="bower_components/bootstrap-rtl-ondemand/dist/css/bootstrap-rtl-ondemand.min.css">
         <link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
         <link rel="stylesheet" href="bower_components/c3/c3.min.css">
         <link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.min.css">
@@ -53,9 +54,9 @@ this repository contains the full copyright notices and license terms. -->
                     </a>
                 </div>
                 <div class="collapse navbar-collapse" id="main_navbar">
-                    <form class="navbar-form navbar-left" role="search" id="global-search">
+                    <form class="navbar-form navbar-left flip" role="search" id="global-search">
                     </form>
-                    <ul class="nav navbar-nav navbar-right">
+                    <ul class="nav navbar-nav navbar-right flip">
                         <li id="user-preferences"></li>
                         <li id="user-logout"></li>
                     </ul>
@@ -67,7 +68,7 @@ this repository contains the full copyright notices and license terms. -->
         <div id="main" class="container-fluid" style="padding: 0px;">
             <div class="row row-offcanvas row-offcanvas-left active"
                 style="height: calc(100vh - 50px - 1px - 20px); margin: 0px;">
-                <div class="col-xs-6 col-sm-3 col-lg-2 sidebar-offcanvas" id="menu" role="navigation"
+                <div class="col-xs-12 col-sm-3 col-lg-2 sidebar-offcanvas" id="menu" role="navigation"
                     style="overflow-y: auto; height: 100%;"></div>
                 <div class="col-xs-12 col-md-9 col-lg-10 main-offcanvas" style="overflow-y: auto; height: 100%;">
                     <div id="tabs" role="tabpanel">
diff --git a/src/offcanvas.less b/src/offcanvas.less
index 8c4a2522d5..dec807dd77 100644
--- a/src/offcanvas.less
+++ b/src/offcanvas.less
@@ -30,7 +30,7 @@ body {
 }
 
 .sidebar-offcanvas {
-    position: absolute;
+    position: absolute !important;
     top: 0;
 }
 
diff --git a/src/sao.js b/src/sao.js
index 708ecc9dd5..ee79048e89 100644
--- a/src/sao.js
+++ b/src/sao.js
@@ -280,6 +280,13 @@ var Sao = {};
     Sao.i18n.BC47 = function(lang) {
         return lang.replace('_', '-');
     };
+    Sao.i18n.set_direction = function(direction) {
+        Sao.i18n.rtl = (direction === 'rtl');
+        jQuery('html').attr('dir', direction);
+        jQuery('.row-offcanvas')
+            .removeClass('row-offcanvas-left row-offcanvas-right')
+            .addClass(Sao.i18n.rtl ? 'row-offcanvas-right' : 'row-offcanvas-left');
+    };
     Sao.i18n.locale = {};
 
     Sao.get_preferences = function() {
@@ -311,6 +318,7 @@ var Sao = {};
                         }
                         prm.resolve(preferences);
                     });
+                    Sao.i18n.set_direction(preferences.language_direction);
                     Sao.i18n.locale = preferences.locale;
                     return prm;
                 });
diff --git a/src/sao.less b/src/sao.less
index 01e61d4b5d..b89374b254 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -12,6 +12,10 @@
         display: block;
         margin-right: 15px;
     }
+    [dir="rtl"] & > span {
+        margin-right: 0;
+        margin-left: 15px;
+    }
 }
 
 #menu, #tabs {
@@ -21,13 +25,22 @@
 #menu {
     border-right: 2px solid @table-border-color;
 }
+[dir="rtl"] #menu {
+    border-right: none;
+    border-left: 2px solid @table-border-color;
+}
 @media screen and (max-width: @screen-sm-max) {
     #menu {
         border-right: none;
+        border-left: none;
     }
     .active #menu {
         border-right: 2px solid @table-border-color;
     }
+    [dir="rtl"] .active #menu {
+        border-right: none;
+        border-left: 2px solid @table-border-color;
+    }
 }
 
 #user-preferences > a {
@@ -118,6 +131,9 @@ input[type='color'] {
 img.icon {
     height: unit(@line-height-base, em);
 }
+[dir="rtl"] img.icon {
+    transform: scaleX(-1);
+}
 
 .filter-box {
     margin: 5px 5px;
@@ -149,9 +165,11 @@ img.icon {
             &.char, &.text, &.many2one, &.one2one, &.date, &.time, &.selection,
             &.reference, &.url, &.email, &.callto, &.sip {
                 text-align: left;
+                text-align: start;
             }
             &.timedelta, &.float, &.numeric, &.integer, &.biginteger {
                 text-align: right;
+                text-align: end;
             }
         }
         & > tbody > tr > td {
@@ -164,9 +182,17 @@ img.icon {
         & td.prefix {
             padding-right: @table-cell-padding;
         }
+        [dir="rtl"] & td.prefix {
+            padding-right: 0;
+            padding-left: @table-cell-padding;
+        }
         & td.suffix {
             padding-left: @table-cell-padding;
         }
+        [dir="rtl"] & td.suffix {
+            padding-left: 0;
+            padding-right: @table-cell-padding;
+        }
         & img.column-affix, a.column-affix > img {
             width: unit(@line-height-base, em);
             height: unit(@line-height-base, em);
@@ -210,6 +236,10 @@ img.icon {
             margin-right: 5px;
             width: 1em;
         }
+        [dir="rtl"] & > img {
+            float: right;
+            margin-left: 5px;
+        }
     }
     & label {
         font-weight: normal;
@@ -279,6 +309,9 @@ img.icon {
             float: left;
             margin: 5px;
         }
+        [dir="rtl"] & .form-one2many-string, .form-many2many-string {
+            float: right;
+        }
         & .form-one2many-toolbar, .form-many2many-toolbar {
             display: inline-table;
             float: right;
@@ -290,6 +323,9 @@ img.icon {
                 text-overflow: ellipsis;
             }
         }
+        [dir="rtl"] & .form-one2many-toolbar, .form-many2many-toolbar {
+            float: left;
+        }
     }
     & .form-one2many-content, .form-many2many-content {
         & .treeview {
@@ -351,10 +387,12 @@ img.icon {
 .editabletree-integer, .editabletree-float, .editabletree-timedelta {
     & input {
         text-align: right;
+        text-align: end;
     }
 }
 .column-integer, .column-float, .column-timedelta {
     text-align: right;
+    text-align: end;
 }
 .column-many2many, .column-one2many {
     text-align: center;
@@ -371,6 +409,7 @@ input.column-boolean {
 
 .dict-label {
     text-align: right;
+    text-align: end;
 }
 
 .calendar {
@@ -385,6 +424,7 @@ input.column-boolean {
 .window-form {
     & .window-form-toolbar {
         text-align: right;
+        text-align: end;
     }
 }
 
@@ -400,6 +440,7 @@ input.column-boolean {
 @media screen and (max-width: @screen-xs-max) {
     .dict-label {
         text-align: left;
+        text-align: start;
     }
 }
 
@@ -426,6 +467,7 @@ input.column-boolean {
         & > thead > tr,
         & > tbody > tr > td {
             text-align: left !important;
+            text-align: start !important;
             /* Force height to empty content */
             & > span:empty {
                 min-height: 20px;
@@ -466,11 +508,18 @@ input.column-boolean {
                 left: 6px;
                 padding-right: 10px;
                 text-align: left;
+                text-align: start;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 /* Label */
                 content: attr(data-title);
             }
+            [dir="rtl"] & > td:before {
+                padding-right: 0;
+                padding-left: 10px;
+                left: unset;
+                right: 6px;
+            }
             & > td.required:before {
                 font-weight: bold;
             }
diff --git a/src/tab.js b/src/tab.js
index 43570194ef..37c6c270cd 100644
--- a/src/tab.js
+++ b/src/tab.js
@@ -161,7 +161,7 @@
             }).append(jQuery('<div/>', {
                 'class': 'container-fluid'
             }).append(jQuery('<div/>', {
-                'class': 'dropdown navbar-header navbar-left'
+                'class': 'dropdown navbar-header navbar-left flip'
             }).append(jQuery('<a/>', {
                 'href': "#",
                 'class': "navbar-brand dropdown-toggle",
@@ -185,7 +185,7 @@
             }).append('&times;')).click(function() {
                 this.close();
             }.bind(this)))).append(jQuery('<div/>', {
-                'class': 'btn-toolbar navbar-right',
+                'class': 'btn-toolbar navbar-right flip',
                 'role': 'toolbar'
             })));
             var wrapper = jQuery('<div/>', {
diff --git a/src/view/calendar.js b/src/view/calendar.js
index ab7a66d9fa..102376eea5 100644
--- a/src/view/calendar.js
+++ b/src/view/calendar.js
@@ -20,18 +20,34 @@
             if (this.attributes.mode == 'week') {
                 defaultview = this.get_week_view();
             }
+            var header = {
+                left: 'today prev,next',
+                center: 'title',
+                right: 'month,' + this.get_week_view(),
+            };
+            if (Sao.i18n.rtl) {
+                var header_rtl = jQuery.extend({}, header);
+                header_rtl.left = header.right;
+                header_rtl.right = header.left;
+                header = header_rtl;
+            }
             this.el.fullCalendar({
                 defaultView: defaultview,
-                header: {
-                    left:   'prev,next',
-                    center: 'title',
-                    right: ' month,' + this.get_week_view()
-                },
+                header: header,
                 timeFormat: 'H:mm',
                 events: this.get_events.bind(this),
                 locale: lang,
-                buttonIcons: false,
+                isRTL: Sao.i18n.rtl,
                 themeSystem: 'bootstrap3',
+                bootstrapGlyphicons: {
+                    'prev': 'chevron-' + (Sao.i18n.rtl? 'right' : 'left'),
+                    'next': 'chevron-' + (Sao.i18n.rtl? 'left' : 'right'),
+                },
+                buttonTextOverride: {
+                    'today': Sao.i18n.gettext("Today"),
+                    'month': Sao.i18n.gettext("Month"),
+                    'week': Sao.i18n.gettext("Week"),
+                },
                 eventRender: this.event_render.bind(this),
                 eventResize: this.event_resize.bind(this),
                 eventDrop: this.event_drop.bind(this),
diff --git a/src/view/form.js b/src/view/form.js
index d560b4faff..5d12f19ece 100644
--- a/src/view/form.js
+++ b/src/view/form.js
@@ -157,7 +157,6 @@ function eval_pyson(value){
                     attributes.states = model.fields[name].description.states;
                 }
                 if (attributes.string === undefined) {
-                    // TODO RTL and translation
                     attributes.string = model.fields[name]
                         .description.string + ': ';
                 }
@@ -544,7 +543,13 @@ function eval_pyson(value){
 
             if (attributes.xalign !== undefined) {
                 // TODO replace by start/end when supported
-                cell.css('text-align', attributes.xalign >= 0.5? 'right': 'left');
+                var align;
+                if (Sao.i18n.rtl) {
+                    align = attributes.xalign >= 0.5? 'left': 'right';
+                } else {
+                    align = attributes.xalign >= 0.5? 'right': 'left';
+                }
+                cell.css('text-align', align);
             }
             if (xexpand) {
                 cell.addClass('xexpand');
@@ -2008,13 +2013,13 @@ function eval_pyson(value){
             add_buttons([
                     {
                         'icon': 'align-left',
-                        'command': 'justifyLeft'
+                        'command': Sao.i18n.rtl? 'justifyRight' : 'justifyLeft',
                     }, {
                         'icon': 'align-center',
                         'command': 'justifyCenter'
                     }, {
                         'icon': 'align-right',
-                        'command': 'justifyRight'
+                        'command': Sao.i18n.rtl? 'justifyLeft': 'justifyRight',
                     }, {
                         'icon': 'align-justify',
                         'command': 'justifyFull'
@@ -2087,7 +2092,11 @@ function eval_pyson(value){
                 }
                 // Some browsers set start as default align
                 if (el.attr('align') == 'start') {
-                    el.attr('align', 'left');
+                    if (Sao.i18n.rtl) {
+                        el.attr('align', 'right');
+                    } else {
+                        el.attr('align', 'left');
+                    }
                 }
             });
         },
@@ -4127,7 +4136,6 @@ function eval_pyson(value){
             this.rows[key] = row = jQuery('<div/>', {
                 'class': 'row'
             });
-            // TODO RTL
             var text = key_schema.string + Sao.i18n.gettext(':');
             var label = jQuery('<label/>', {
                 'text': text
diff --git a/src/view/tree.js b/src/view/tree.js
index 2859935dde..9047f6a424 100644
--- a/src/view/tree.js
+++ b/src/view/tree.js
@@ -250,7 +250,6 @@
             if (!attributes.sum) {
                 return;
             }
-            // TODO RTL
             var label = attributes.sum + Sao.i18n.gettext(': ');
             var sum = jQuery('<label/>', {
                 'text': label,
@@ -875,7 +874,6 @@
             for (var i = 0; i < this.tree.columns.length; i++) {
                 var column = this.tree.columns[i];
                 td = jQuery('<td/>', {
-                    // TODO RTL
                     'data-title': column.attributes.string + Sao.i18n.gettext(': ')
                 }).append(jQuery('<span/>', { // For responsive min-height
                     'aria-hidden': true
@@ -898,10 +896,15 @@
                 td.append(table);
                 if ((i === 0) && this.children_field) {
                     this.expander = jQuery('<img/>', {
-                        'tabindex': 0
+                        'tabindex': 0,
+                        'class': 'icon',
                     });
                     this.expander.html('&nbsp;');
-                    this.expander.css('margin-left', (depth - 1) + 'em');
+                    var margin = 'margin-left';
+                    if (Sao.i18n.rtl) {
+                        margin = 'margin-right';
+                    }
+                    this.expander.css(margin, (depth - 1) + 'em');
                     this.expander.on('click keypress',
                             Sao.common.click_press(this.toggle_row.bind(this)));
                     row.append(jQuery('<td/>', {