[rtl] Fix list settings, cell styles, custom color

apps/common/main/lib/template/ExtendedColorDialog.template

@@ -2,7 +2,7 @@
     <div id="id-hsb-colorpicker" style="vertical-align:top;">
     </div>
     <div class="color-info" style="">
-        <div style="margin-left:15px;">
+        <div class="color-preview">
             <label class="color-label"><%= txtNew %></label>
             <div id="field-new-color" class="color-cnt top"></div>
             <div id="field-start-color" class="color-cnt bottom"></div>

apps/common/main/resources/less/extended-color-picker.less

@@ -57,6 +57,10 @@
             &:before {
                 height: 64px;
                 transform: translate(29px, -22px) rotate(73deg);
+
+                .rtl & {
+                    transform: translate(-29px, -22px) rotate(73deg);
+                }
             }
         }
     }
@@ -78,4 +82,13 @@
             }
         }
     }
+
+    .color-preview {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
 }

apps/common/main/resources/less/hsb-colorpicker.less

@@ -82,6 +82,12 @@
         margin-left: calc(-3px - @scaled-one-px-value);
         position: absolute;
         background-position: -12px -196px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: -4px;
+            margin-right: calc(-3px - @scaled-one-px-value);
+        }
     }
 
     .empty-color {

apps/documenteditor/main/app/view/ListSettingsDialog.js

@@ -72,11 +72,11 @@ define([
         }, options || {});
 
             this.template = [
-                '<div class="box">',
+                '<div class="box list-settings">',
                 '<% if (type == 2) { %>',
                     '<table cols="4" style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<label class="input-label">' + this.txtType + '</label>',
                                 '<div id="id-dlg-numbering-format" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
@@ -88,7 +88,7 @@ define([
                                 '<label class="input-label">' + this.txtSize + '</label>',
                                 '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left">',
                                 '<label class="input-label">' + this.txtColor + '</label>',
                                 '<div id="id-dlg-bullet-color" style="margin-bottom: 10px;"></div>',
                             '</td>',
@@ -97,7 +97,7 @@ define([
                 '<% } else {%>',
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<% if (type == 0) { %>',
                                 '<label class="input-label">' + this.txtBullet + '</label>',
                                 '<button type="button" class="btn btn-text-default" id="id-dlg-bullet-font" style="width: 100%;margin-bottom: 10px;">' + this.txtFont + '</button>',
@@ -106,17 +106,17 @@ define([
                                 '<div id="id-dlg-numbering-format" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                                 '<% } %>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left">',
                                 '<label class="input-label">' + this.txtAlign + '</label>',
                                 '<div id="id-dlg-bullet-align" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
                         '</tr>',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<label class="input-label">' + this.txtSize + '</label>',
                                 '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left">',
                                 '<label class="input-label">' + this.txtColor + '</label>',
                                 '<div id="id-dlg-bullet-color" style="margin-bottom: 10px;"></div>',
                             '</td>',
@@ -125,7 +125,7 @@ define([
                 '<% } %>',
                 '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td class="<% if (type != 2) { %> hidden <% } %>" style="width: 50px; padding-right: 10px;">',
+                            '<td class="padding-right-big <% if (type != 2) { %> hidden <% } %>" style="width: 50px;">',
                                 '<label>' + this.textLevel + '</label>',
                                 '<div id="levels-list" class="no-borders" style="width:100%; height:208px;margin-top: 2px; "></div>',
                             '</td>',

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

@@ -2079,11 +2079,11 @@ define([
                         cls: 'shifted-left',
                         style: 'min-width: 145px',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 153px; margin: 0 0 0 9px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 153px;"></div>')},
                             {caption: '--'},
                             this.mnuMarkerChangeLevel = new Common.UI.MenuItem({
+                                cls: 'list-level',
                                 caption: this.textChangeLevel,
-                                style: 'padding-right:20px;',
                                 disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
                                 menu: new Common.UI.Menu({
                                     cls: 'list-settings-level',
@@ -2110,11 +2110,11 @@ define([
                     new Common.UI.Menu({
                         cls: 'shifted-left',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 361px; margin: 0 0 0 9px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 361px;"></div>')},
                             {caption: '--'},
                             this.mnuNumberChangeLevel = new Common.UI.MenuItem({
+                                cls: 'list-level',
                                 caption: this.textChangeLevel,
-                                style: 'padding-right:20px;',
                                 disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
                                 menu: new Common.UI.Menu({
                                     cls: 'list-settings-level',
@@ -2141,11 +2141,11 @@ define([
                         cls: 'shifted-left',
                         style: 'min-width: 177px',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 362px; margin: 0 0 0 9px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 362px;"></div>')},
                             {caption: '--'},
                             this.mnuMultiChangeLevel = new Common.UI.MenuItem({
+                                cls: 'list-level',
                                 caption: this.textChangeLevel,
-                                style: 'padding-right:20px;',
                                 disabled: (this.mnuMultilevelPicker.conf.index || 0)==0,
                                 menu: new Common.UI.Menu({
                                     cls: 'list-settings-level',

apps/documenteditor/main/resources/less/toolbar.less

@@ -217,3 +217,53 @@
         }
     }
 }
+
+#id-toolbar-btn-markers,
+#id-toolbar-btn-numbering,
+#id-toolbar-btn-multilevels {
+    .menu-markers {
+        margin: 0 0 0 9px;
+
+        .rtl & {
+            margin: 0 9px 0 0;
+        }
+    }
+
+    .list-level > a {
+        padding-right: 20px;
+
+        .rtl & {
+            padding-right: 12px;
+            padding-left: 20px;
+        }
+    }
+}
+
+.list-settings {
+    .padding-right {
+        padding-right: 5px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 5px;
+        }
+    }
+
+    .padding-left {
+        padding-left: 5px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    .padding-right-big {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+}

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

@@ -222,6 +222,11 @@
     .group-description {
         padding: 3px 0 3px 10px;
         .font-weight-bold();
+
+        .rtl & {
+            padding: 3px 10px 3px 0;
+            text-align: right;
+        }
     } 
     
     .group-items-container {