[rtl] Make shape settings for DE

apps/common/main/lib/component/ComboBorderSize.js

@@ -182,7 +182,7 @@ define([
 
     Common.UI.ComboBorderSizeEditable = Common.UI.ComboBox.extend(_.extend({
         template: _.template([
-            '<span class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+            '<span class="input-group combobox combo-border-size combo-border-size-ed input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<input type="text" class="form-control text" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
                 '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
                     '<span class="caret"></span>',
@@ -190,10 +190,17 @@ define([
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
+                        '<% if (!isRTL) { %>',
                             '<span><%= item.displayValue %></span>',
                             '<% if (item.offsety!==undefined) { %>',
                              '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">',
                             '<% } %>',
+                        '<% } else { %>',
+                            '<% if (item.offsety!==undefined) { %>',
+                            '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">',
+                            '<% } %>',
+                            '<span><%= item.displayValue %></span>',
+                        '<% } %>',
                         '</a></li>',
                     '<% }); %>',
                 '</ul>',

apps/common/main/lib/component/ComboBox.js

@@ -153,7 +153,8 @@ define([
                         scope       : me,
                         dataHint    : this.options.dataHint,
                         dataHintDirection: this.options.dataHintDirection,
-                        dataHintOffset: this.options.dataHintOffset
+                        dataHintOffset: this.options.dataHintOffset,
+                        isRTL       : Common.UI.isRTL()
                     }));
                     if (this.itemsTemplate)
                         this.cmpEl.find('ul').html(

apps/common/main/lib/component/ComboDataView.js

@@ -112,7 +112,7 @@ define([
             this.openButton = new Common.UI.Button({
                 cls: 'open-menu',
                 menu: new Common.UI.Menu({
-                    menuAlign: 'tl-tl',
+                    menuAlign: Common.UI.isRTL() ? 'tr-tr' : 'tl-tl',
                     offset: [0, 3],
                     items: [
                         {template: _.template('<div class="menu-picker-container"></div>')}

apps/common/main/lib/component/Menu.js

@@ -178,6 +178,8 @@ define([
                         this.menuAlign = 'tr-tl';
                     } else if (this.menuAlign === 'tl-bl') {
                         this.menuAlign = 'tr-br';
+                    } else if (this.menuAlign === 'tr-br') {
+                        this.menuAlign = 'tl-bl';
                     }
                 }
 

apps/common/main/lib/component/Slider.js

@@ -156,7 +156,7 @@ define([
                 $(document).off('mousemove', onMouseMove);
 
                 me._dragstart = undefined;
-                me.trigger('changecomplete', me, me.value, me.lastValue);
+                me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var onMouseMove = function (e) {
@@ -175,7 +175,7 @@ define([
                 me.value = pos/me.delta + me.minValue;
 
                 if (Math.abs(me.value-me.lastValue)>0.001)
-                    me.trigger('change', me, me.value, me.lastValue);
+                    me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var onMouseDown = function (e) {
@@ -201,8 +201,8 @@ define([
                 me.lastValue = me.value;
                 me.value = pos/me.delta + me.minValue;
 
-                me.trigger('change', me, me.value, me.lastValue);
+                me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
-                me.trigger('changecomplete', me, me.value, me.lastValue);
+                me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var updateslider;
@@ -211,7 +211,7 @@ define([
                 me.lastValue = me.value;
                 me.value = Math.max(me.minValue, Math.min(me.maxValue, me.value + ((increase) ? me.step : -me.step)));
                 me.setThumbPosition(Math.round((me.value-me.minValue)*me.delta));
-                me.trigger('change', me, me.value, me.lastValue);
+                me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var onKeyDown = function (e) {
@@ -234,7 +234,7 @@ define([
                     clearInterval(updateslider);
                     moveThumb(e.keyCode==Common.UI.Keys.UP || e.keyCode==Common.UI.Keys.RIGHT);
                     el.on('keydown', 'input', onKeyDown);
-                    me.trigger('changecomplete', me, me.value, me.lastValue);
+                    me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
                 }
             };
 
@@ -264,7 +264,7 @@ define([
         setValue: function(value) {
             this.lastValue = this.value;
             this.value = Math.max(this.minValue, Math.min(this.maxValue, value));
-            this.setThumbPosition(Math.round((value-this.minValue)*this.delta));
+            this.setThumbPosition(Math.round(((Common.UI.isRTL() ? this.maxValue - value : value)-this.minValue)*this.delta));
         },
 
         getValue: function() {

apps/common/main/resources/less/buttons.less

@@ -529,6 +529,10 @@
     > .dropdown-toggle:first-child {
         .inner-box-caret {
             padding: 0 4px 0 3px;
+
+            .rtl & {
+                padding: 0 3px 0 4px;
+            }
         }
     }
 
@@ -664,6 +668,11 @@
     border:@scaled-one-px-value solid @border-regular-control;
     .border-radius(@border-radius-small);
 
+    .rtl & {
+        padding: @scaled-one-px-value-ie @scaled-one-px-value-ie @scaled-one-px-value-ie 11px;
+        padding: @scaled-one-px-value @scaled-one-px-value @scaled-one-px-value 11px ;
+    }
+
     span:nth-child(1) {
         float: left;
         width: 100%;
@@ -677,6 +686,11 @@
         position: absolute;
         right: 0;
         top: 2px;
+
+        .rtl & {
+            right: auto;
+            left: 0;
+        }
     }
 
     &,
@@ -701,6 +715,12 @@
             height: 34px;
             transform: translate(16px, -9px) rotate(62deg);
             left: 0;
+
+            .rtl & {
+                left: auto;
+                right: 0;
+                transform: translate(-16px, -9px) rotate(62deg);
+            }
         }
     }
 

apps/common/main/resources/less/combo-border-size.less

@@ -34,10 +34,6 @@
             background-color: transparent;
             image-rendering: pixelated;
             float: left;
-
-            .rtl & {
-                float: right;
-            }
         }
     }
 
@@ -71,6 +67,18 @@
             background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@2x.png)";
         }
     }
+
+    &:not(.combo-border-size-ed) {
+        .rtl & li img {
+            float: right;
+        }
+    }
+}
+
+.combo-border-size-ed {
+    .dropdown-menu li a {
+        padding: 5px 20px;
+    }
 }
 
 .combo-color {

apps/common/main/resources/less/combo-dataview.less

@@ -287,6 +287,13 @@
     .view {
         margin-right: -@combo-dataview-button-width;
         padding-right: @combo-dataview-button-width;
+
+        .rtl & {
+            margin-right: 0;
+            padding-right: 0;
+            margin-left: -@combo-dataview-button-width;
+            padding-left: @combo-dataview-button-width;
+        }
     }
 
     .button {
@@ -343,6 +350,11 @@
         margin-left: 4px;
         .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
         .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
+
+        .rtl & {
+            margin: 2px 0 2px 2px;
+            margin-right: 4px;
+        }
     }
 
     &.disabled {

apps/documenteditor/main/app/template/ShapeSettings.template

@@ -101,14 +101,14 @@
     </tr>
     <tr class="no-form">
         <td>
-            <div class="padding-small" id="shape-panel-transparent-fill" style="width: 100%;">
+            <div class="padding-small" id="shape-panel-transparent-fill">
-                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
+                <label class="header"><%= scope.strTransparency %></label>
-                <div style="display: inline-block; margin-top: 3px;">
+                <div class="shape-slider">
                     <label id="shape-lbl-transparency-start">0</label>
-                    <div id="shape-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <div id="shape-slider-transparency"></div>
                     <label id="shape-lbl-transparency-end">100</label>
                 </div>
-                <div id="shape-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="shape-spin-transparency"></div>
             </div>
         </td>
     </tr>
@@ -159,15 +159,15 @@
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textRotate90 %></label>
                         <div>
-                            <div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
+                            <div id="shape-button-270"></div>
-                            <div id="shape-button-90" style="display: inline-block;"></div>
+                            <div id="shape-button-90"></div>
                         </div>
                     </td>
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textFlip %></label>
                         <div>
-                            <div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
+                            <div id="shape-button-fliph"></div>
-                            <div id="shape-button-flipv" style="display: inline-block;"></div>
+                            <div id="shape-button-flipv"></div>
                         </div>
                     </td>
                 </tr>
@@ -199,8 +199,8 @@
     </tr>
     <tr class="change-type">
         <td class="padding-small">
-            <label class="header" style="margin-top: 3px;"><%= scope.strChange %></label>
+            <label class="header"><%= scope.strChange %></label>
-            <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
+            <div id="shape-btn-change"></div>
         </td>
     </tr>
     <tr class="no-form">

apps/documenteditor/main/resources/less/rightmenu.less

@@ -12,6 +12,65 @@
     label.input-label{
         vertical-align: baseline;
     }
+
+    &#id-shape-settings {
+        #shape-panel-transparent-fill {
+            width: 100%;
+
+            .header {
+                display: block;
+            }
+
+            .shape-slider {
+                display: inline-block;
+                margin-top: 3px;
+            }
+
+            #shape-spin-transparency {
+                display: inline-block;
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+            }
+
+            #shape-slider-transparency {
+                display: inline-block;
+                margin: 0 4px;
+                vertical-align: middle;
+            }
+        }
+
+        #shape-button-270, #shape-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #shape-button-90, #shape-button-flipv {
+            display: inline-block;
+        }
+
+        .change-type {
+            .header {
+                margin-top: 3px;
+            }
+
+            #shape-btn-change {
+                display: inline-block;
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+    }
 }
 
 .ie {