[rtl] Fix settings in header/footer dialog, chart type dialog, chart data range dialog, dialogs and menu from toolbar for SSE

apps/common/main/resources/less/toolbar.less

@@ -884,8 +884,22 @@
 .menu-iconsets {
     margin: 5px 5px 0 10px;
 
+    .rtl & {
+        margin: 5px 10px 0 5px;
+    }
+
+    .group-description {
+        text-align: right;
+    }
+
     .group-items-container > div {
         margin-right: 8px !important;
+
+        .rtl & {
+            margin-right: 4px !important;
+            margin-left: 8px !important;
+        }
+
         &:not(:hover),
         &:not(.selected) {
             .box-shadow(none);
@@ -894,6 +908,10 @@
     .item-iconset {
         img {
             margin: 2px;
+
+            .rtl & {
+                float: right;
+            }
         }
 
         width: 100px;

apps/spreadsheeteditor/main/app/view/ChartDataDialog.js

@@ -50,7 +50,8 @@ define([
     SSE.Views.ChartDataDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 370,
-            height: 490
+            height: 490,
+            id: 'window-chart-data'
         },
 
         initialize : function(options) {
@@ -81,12 +82,12 @@ define([
                                 '</tr>',
                                 '<tr>',
                                     '<td class="padding-large">',
-                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-add" style="min-width: 70px;margin-right:5px;">', me.textAdd, '</button>',
+                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-add">', me.textAdd, '</button>',
-                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-edit" style="min-width: 70px;margin-right:5px;">', me.textEdit, '</button>',
+                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-edit">', me.textEdit, '</button>',
-                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-delete" style="min-width: 70px;margin-right:5px;">', me.textDelete, '</button>',
+                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-delete">', me.textDelete, '</button>',
-                                        '<div style="display: inline-block; float: right;">',
+                                        '<div class="up-down-btns">',
-                                        '<div id="chart-dlg-btn-up" style="display: inline-block;margin-right: 2px;"></div>',
+                                        '<div id="chart-dlg-btn-up"></div>',
-                                        '<div id="chart-dlg-btn-down" style="display: inline-block;"></div>',
+                                        '<div id="chart-dlg-btn-down"></div>',
                                         '</div>',
                                     '</td>',
                                 '</tr>',

apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js

@@ -76,7 +76,7 @@ define([
                         '<div id="id-dlg-chart-range-range1"></div>',
                     '</td>',
                     '<td style="padding-bottom: 8px;">',
-                        '<label id="id-dlg-chart-range-lbl1" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;">' + this.txtChoose + '</label>',
+                        '<label id="id-dlg-chart-range-lbl1" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;">' + this.txtChoose + '</label>',
                     '</td>',
                 '</tr>',
                 '<% if (type==1) { %>',
@@ -90,7 +90,7 @@ define([
                         '<div id="id-dlg-chart-range-range2"></div>',
                     '</td>',
                     '<td style="padding-bottom: 8px;">',
-                        '<label id="id-dlg-chart-range-lbl2" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;"></label>',
+                        '<label id="id-dlg-chart-range-lbl2" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;"></label>',
                     '</td>',
                 '</tr>',
                 '<% if (isScatter) { %>',
@@ -104,7 +104,7 @@ define([
                         '<div id="id-dlg-chart-range-range3"></div>',
                     '</td>',
                     '<td style="padding-bottom: 8px;">',
-                        '<label id="id-dlg-chart-range-lbl3" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;"></label>',
+                        '<label id="id-dlg-chart-range-lbl3" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;"></label>',
                     '</td>',
                 '</tr>',
                 '<% } %>',

apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js

@@ -197,10 +197,10 @@ define([
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
                     '<div class="list-item" style="width: 100%;" id="chart-type-dlg-item-<%= seriesIndex %>">',
-                        '<div style="width:8px;height:12px;display: inline-block;vertical-align: middle;" id="chart-type-dlg-series-preview-<%= seriesIndex %>"></div>',
+                        '<div class="series-color" id="chart-type-dlg-series-preview-<%= seriesIndex %>"></div>',
-                        '<div style="width:95px;padding-left: 5px;display: inline-block;vertical-align: middle;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;"><%= value %></div>',
+                        '<div class="series-value"><%= value %></div>',
-                        '<div style="width: 110px;padding-left: 5px;display: inline-block;vertical-align: middle;"><div id="chart-type-dlg-cmb-series-<%= seriesIndex %>" class="input-group-nr" style=""></div></div>',
+                        '<div class="series-cmb"><div id="chart-type-dlg-cmb-series-<%= seriesIndex %>" class="input-group-nr" style=""></div></div>',
-                        '<div style="padding-left: 55px;display: inline-block;vertical-align: middle;"><div id="chart-type-dlg-chk-series-<%= seriesIndex %>" style=""></div></div>',
+                        '<div class="series-chk"><div id="chart-type-dlg-chk-series-<%= seriesIndex %>" style=""></div></div>',
                     '</div>'
                 ].join(''))
             });

apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js

@@ -52,7 +52,8 @@ define([
             style: 'min-width: 350px;',
             cls: 'modal-dlg enable-key-events',
             animate: {mask: false},
-            buttons: ['ok', 'cancel']
+            buttons: ['ok', 'cancel'],
+            id: 'window-header-footer'
         },
 
         initialize : function(options) {
@@ -103,24 +104,24 @@ define([
                     '<div class="input-row input-row--tabs" style="margin-bottom: 15px;">',
                         '<button type="button" class="btn btn-text-default auto" id="id-dlg-hf-btn-all" style="border-radius: 0;">', this.textAll,'</button>',
                         '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-odd" style="border-radius: 0;">', this.textOdd,'</button>',
-                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-even" style="border-radius: 0; margin-left:-1px;">', this.textEven,'</button>',
+                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-even" style="border-radius: 0;">', this.textEven,'</button>',
-                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-first" style="border-radius: 0; margin-left:-1px;">', this.textFirst,'</button>',
+                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-first" style="border-radius: 0;">', this.textFirst,'</button>',
                     '</div>',
                     '<label style="display: block; margin-bottom: 3px;">' + this.textHeader + '</label>',
                     '<div id="id-dlg-h-presets" class="input-row" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-h-insert" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
+                    '<div id="id-dlg-h-insert" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-h-fonts" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
+                    '<div id="id-dlg-h-fonts" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-h-font-size" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
+                    '<div id="id-dlg-h-font-size" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-h-textcolor" style="display: inline-block;margin-left: 6px;"></div>',
+                    '<div id="id-dlg-h-textcolor" class="margin-left-big" style="display: inline-block;"></div>',
-                    '<div id="id-dlg-h-bold" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-h-italic" style="display: inline-block;margin-left: 6px;"></div>',
+                    '<div id="id-dlg-h-bold" class="margin-left-small" style="display: inline-block;"></div>','<div id="id-dlg-h-italic" class="margin-left-big" style="display: inline-block;"></div>',
-                    '<div id="id-dlg-h-underline" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-h-strikeout" style="display: inline-block;margin-left: 6px;"></div>',
+                    '<div id="id-dlg-h-underline" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-h-strikeout" class="margin-left-big" style="display: inline-block;"></div>',
-                    '<div id="id-dlg-h-subscript" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-h-superscript" style="display: inline-block;margin-left: 6px;"></div>',
+                    '<div id="id-dlg-h-subscript" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-h-superscript" class="margin-left-big" style="display: inline-block;"></div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="header-left-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
                         '</div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="header-center-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
@@ -132,19 +133,19 @@ define([
                         '</div>',
                     '<label style="display: block; margin-top: 10px;margin-bottom: 3px;">' + this.textFooter + '</label>',
                     '<div id="id-dlg-f-presets" class="input-row" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-f-insert" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
+                    '<div id="id-dlg-f-insert" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-f-fonts" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
+                    '<div id="id-dlg-f-fonts" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-f-font-size" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
+                    '<div id="id-dlg-f-font-size" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-f-textcolor" style="display: inline-block;margin-left: 6px;"></div>',
+                    '<div id="id-dlg-f-textcolor" class="margin-left-big" style="display: inline-block;"></div>',
-                    '<div id="id-dlg-f-bold" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-f-italic" style="display: inline-block;margin-left: 6px;"></div>',
+                    '<div id="id-dlg-f-bold" class="margin-left-small" style="display: inline-block;"></div>','<div id="id-dlg-f-italic" class="margin-left-big" style="display: inline-block;"></div>',
-                    '<div id="id-dlg-f-underline" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-f-strikeout" style="display: inline-block;margin-left: 6px;"></div>',
+                    '<div id="id-dlg-f-underline" class="margin-left-big" style="display: inline-block;"></div>','<div class="margin-left-big" id="id-dlg-f-strikeout" style="display: inline-block;"></div>',
-                    '<div id="id-dlg-f-subscript" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-f-superscript" style="display: inline-block;margin-left: 6px;"></div>',
+                    '<div id="id-dlg-f-subscript" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-f-superscript" class="margin-left-big" style="display: inline-block;"></div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="footer-left-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
                         '</div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="footer-center-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -269,8 +269,8 @@ define([
                         _.template([
                             '<% _.each(items, function(item) { %>',
                             '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
-                            '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
+                            '<div style="position: relative;"><div class="display-value"><%= scope.getDisplayValue(item) %></div>',
-                            '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
+                            '<div class="example-val"><%= item.exampleval ? item.exampleval : "" %></div>',
                             '</div></a></li>',
                             '<% }); %>',
                             '<li class="divider">',
@@ -1381,8 +1381,8 @@ define([
                     _.template([
                         '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
-                        '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
+                        '<div style="position: relative;"><div class="display-value"><%= scope.getDisplayValue(item) %></div>',
-                        '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
+                        '<div class="example-val"><%= item.exampleval ? item.exampleval : "" %></div>',
                         '</div></a></li>',
                         '<% }); %>',
                         '<li class="divider">',
@@ -2527,7 +2527,7 @@ define([
                             id          : 'id-toolbar-mnu-item-border-color',
                             caption     : this.textBordersColor,
                             iconCls     : 'mnu-icon-item mnu-border-color',
-                            template    : _.template('<a id="<%= id %>"tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 2px 9px 0 -11px; border-style: solid; border-width: 3px; border-color: #000;"></span><%= caption %></a>'),
+                            template    : _.template('<a id="<%= id %>"tabindex="-1" type="menuitem"><span class="menu-item-icon"></span><%= caption %></a>'),
                             menu        : new Common.UI.Menu({
                                 menuAlign   : 'tl-tr',
                                 cls: 'shifted-left',
@@ -2535,7 +2535,7 @@ define([
                                     {
                                         id: 'id-toolbar-menu-auto-bordercolor',
                                         caption: this.textAutoColor,
-                                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>'),
+                                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto"></span><%= caption %></a>'),
                                         stopPropagation: true
                                     },
                                     {caption: '--'},
@@ -2543,7 +2543,7 @@ define([
                                     {caption: '--'},
                                     {
                                         id: "id-toolbar-menu-new-bordercolor",
-                                        template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>'),
+                                        template: _.template('<a tabindex="-1" type="menuitem">' + this.textNewColor + '</a>'),
                                         stopPropagation: true
                                     }
                                 ]

apps/spreadsheeteditor/main/resources/less/advanced-settings.less

@@ -312,4 +312,138 @@
             margin-left: 5px;
         }
     }
+}
+
+#window-chart-data {
+    .up-down-btns {
+        display: inline-block;
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+
+        #chart-dlg-btn-up {
+            display: inline-block;
+            margin-right: 2px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 2px;
+            }
+        }
+
+        #chart-dlg-btn-down {
+            display: inline-block;
+        }
+    }
+
+    #chart-dlg-btn-add,
+    #chart-dlg-btn-edit,
+    #chart-dlg-btn-delete {
+        min-width: 70px;
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+}
+
+#id-dlg-chart-range-lbl1,
+#id-dlg-chart-range-lbl2,
+#id-dlg-chart-range-lbl3 {
+    margin-left: 5px;
+
+    .rtl & {
+        margin-left: 0;
+        margin-right: 5px;
+    }
+}
+
+#chart-type-dlg-series-list {
+    .series-color {
+        width: 8px;
+        height: 12px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .series-value {
+        width: 95px;
+        padding-left: 5px;
+        display: inline-block;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    .series-cmb {
+        width: 110px;
+        padding-left: 5px;
+        display: inline-block;
+        vertical-align: middle;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    .series-chk {
+        padding-left: 55px;
+        display: inline-block;
+        vertical-align: middle;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 55px;
+        }
+    }
+}
+
+#window-header-footer {
+    #id-dlg-hf-btn-even,
+    #id-dlg-hf-btn-first {
+        margin-left: -1px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: -1px;
+        }
+    }
+
+    .margin-left-small {
+        margin-left: 2px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 2px;
+        }
+    }
+
+    .margin-left-big {
+        margin-left: 6px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 6px;
+        }
+    }
+
+    .preview-container {
+        margin-right: -1px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: -1px;
+        }
+    }
 }

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -249,3 +249,76 @@
         }
     }
 }
+
+#id-toolbar-mnu-item-border-color {
+    > span {
+        background-image: none;
+        width: 12px;
+        height: 12px;
+        margin: 2px 9px 0 -11px;
+        border-style: solid;
+        border-width: 3px;
+        border-color: #000;
+
+        .rtl & {
+            margin: 2px -11px 0 9px;
+        }
+    }
+}
+
+#id-toolbar-menu-new-bordercolor {
+    > a {
+        padding-left: 12px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 12px;
+        }
+    }
+}
+
+#id-toolbar-menu-auto-bordercolor {
+    .color-auto {
+        background-image: none;
+        width: 12px;
+        height: 12px;
+        margin: 1px 7px 0 1px;
+        background-color: #000;
+
+        .rtl & {
+            margin: 1px 1px 0 7px;
+        }
+    }
+}
+
+#slot-btn-format {
+    .display-value {
+        position: absolute;
+        left: 0;
+        width: 100px;
+
+        .rtl & {
+            left: auto;
+            right: 0;
+        }
+    }
+
+    .example-val {
+        display: inline-block;
+        width: 100%;
+        max-width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: right;
+        vertical-align: bottom;
+        padding-left: 100px;
+        color: silver;
+        white-space: nowrap;
+
+        .rtl & {
+            text-align: left;
+            padding-left: 0;
+            padding-right: 100px;
+        }
+    }
+}