RTL support

see #1205

app/assets/javascripts/app/controllers/_application_controller_generic.coffee

@@ -661,6 +661,7 @@ class App.Sidebar extends App.Controller
     localEl = $(App.view('generic/sidebar_tabs')(
       items:          @items
       scrollbarWidth: App.Utils.getScrollBarWidth()
+      dir:            App.i18n.dir()
     ))
 
     # init content callback

app/assets/javascripts/app/controllers/ticket_zoom.coffee

@@ -401,6 +401,7 @@ class App.TicketZoom extends App.Controller
         nav:            @nav
         isCustomer:     @permissionCheck('ticket.customer')
         scrollbarWidth: App.Utils.getScrollBarWidth()
+        dir:            App.i18n.dir()
       )
 
       new App.TicketZoomOverviewNavigator(

app/assets/javascripts/app/lib/bootstrap/modal.js

@@ -10,6 +10,8 @@
   modified by Felix Jan-2014
   - add this.$body = $(options.container || document.body)
   - adjustBackdrop: also adopt left, top and width from $body
+  modified by Felix Jul-2017
+  - add rtl support
 */
 
 
@@ -244,6 +246,10 @@
       .css('height', 0)
       .css('height', this.$element[0].scrollHeight)
 
+    if(App.i18n.dir() == 'rtl'){
+      this.$backdrop.css('right', 'auto')
+    }
+
     if(this.scrollbarWidth){
       this.$backdrop.css('width', this.$body.width() - this.scrollbarWidth)
     }
@@ -251,14 +257,22 @@
 
   Modal.prototype.adjustDialog = function () {
     var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
-
+    var css = {
-    this.$element.css({
       left: this.$body.offset().left,
       top: this.$body.offset().top,
       width: this.$body.width(),
       paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
       paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
-    })
+    }
+
+    if(App.i18n.dir() == 'rtl'){
+      css.right = 'auto'
+      var paddingLeft = css.paddingLeft
+      css.paddingLeft = css.paddingRight
+      css.paddingRight = paddingLeft
+    }
+
+    this.$element.css(css)
   }
 
   Modal.prototype.resetAdjustments = function () {

app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco

@@ -11,7 +11,7 @@
   <div class="sidebar-content"></div>
 </div>
 <% end %>
-<div class="tabsSidebar-tabs" style="margin-left: -<%- @scrollbarWidth %>px">
+<div class="tabsSidebar-tabs" style="<%- if @dir is 'rtl' then 'margin-right' else 'margin-left' %>: -<%- @scrollbarWidth %>px">
 <% for item in @items: %>
   <div class="tabsSidebar-tab" data-tab="<%= item.name %>">
     <%- @Icon(item.icon) %>

app/assets/javascripts/app/views/ticket_zoom.jst.eco

@@ -1,5 +1,5 @@
 <div class="tabsSidebar-holder">
-  <div class="scrollPageHeader tabsSidebar-sidebarSpacer" style="right: <%- @scrollbarWidth %>px">
+  <div class="scrollPageHeader tabsSidebar-sidebarSpacer" style="<%- if @dir is 'rtl' then 'left' else 'right' %>: <%- @scrollbarWidth %>px">
     <small><%- @C('ticket_hook') %> <span class="ticket-number"><%- @ticket.number %></span></small>
     <div class="js-ticketTitleContainer ticket-title"></div>
     <div class="js-highlighterContainer highlighter"></div>

app/assets/stylesheets/bootstrap.css

@@ -479,10 +479,10 @@ mark,
   background-color: #fcf8e3;
 }
 .text-left {
-  text-align: left;
+  text-align: start;
 }
 .text-right {
-  text-align: right;
+  text-align: end;
 }
 .text-center {
   text-align: center;
@@ -611,7 +611,7 @@ dd {
     width: 160px;
     overflow: hidden;
     clear: left;
-    text-align: right;
+    text-align: end;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -656,7 +656,7 @@ blockquote .small:before {
 blockquote.pull-right {
   padding-right: 15px;
   padding-left: 0;
-  text-align: right;
+  text-align: end;
   border-right: 5px solid #eee;
   border-left: 0;
 }
@@ -1368,10 +1368,10 @@ caption {
   padding-top: 8px;
   padding-bottom: 8px;
   color: #777;
-  text-align: left;
+  text-align: start;
 }
 th {
-  text-align: left;
+  text-align: start;
 }
 .table {
   width: 100%;
@@ -2020,7 +2020,7 @@ select[multiple].form-group-lg .form-control {
   .form-horizontal .control-label {
     padding-top: 7px;
     margin-bottom: 0;
-    text-align: right;
+    text-align: end;
   }
 }
 .form-horizontal .has-feedback .form-control-feedback {
@@ -2100,7 +2100,7 @@ tbody.collapse.in {
   padding: 5px 0;
   margin: 2px 0 0;
   font-size: 14px;
-  text-align: left;
+  text-align: start;
   list-style: none;
   background-color: #fff;
   -webkit-background-clip: padding-box;
@@ -3078,7 +3078,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
 }
 .pagination {
   display: inline-block;
-  padding-left: 0;
+  padding: 0;
   margin: 20px 0;
   border-radius: 4px;
 }
@@ -4114,7 +4114,7 @@ button.close {
 }
 .modal-footer {
   padding: 15px;
-  text-align: right;
+  text-align: end;
   border-top: 1px solid #e5e5e5;
 }
 .modal-footer .btn + .btn {
@@ -4268,7 +4268,7 @@ button.close {
   font-size: 14px;
   font-weight: normal;
   line-height: 1.42857143;
-  text-align: left;
+  text-align: start;
   white-space: normal;
   background-color: #fff;
   -webkit-background-clip: padding-box;