[DE] Fix bug 13065

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

@@ -396,7 +396,7 @@ define([
                     '</div>',
                 '</div>',
                 '<div style="position: absolute; left: <%=scope.tablePadding%>px; top: <%=scope.tablePadding%>px; right: <%=scope.tablePadding%>px; bottom: <%=scope.tablePadding%>px;">',
-                    '<table cols="<%=scope.columns%>" width="100%" height="100%" style="border-collapse: inherit; border-spacing: <%= scope.spacingMode ? scope.cellPadding : 0 %>px;">',
+                    '<table id="<%=scope.id%>-table-content" cols="<%=scope.columns%>" width="100%" height="100%" style="border-collapse: inherit; border-spacing: <%= scope.spacingMode ? scope.cellPadding : 0 %>px;">',
                         '<% for (var row = 0; row < scope.rows; row++) { %>',
                             '<tr>',
                                 '<% for (var col = 0; col < scope.columns; col++) { %>',
@@ -441,7 +441,8 @@ define([
                 topBorder, rightBorder, bottomBorder, leftBorder,
                 topBorderSelector, rightBorderSelector, bottomBorderSelector,
                 leftBorderSelector,
-                virtualBorderSize, virtualBorderColor;
+                virtualBorderSize, virtualBorderColor,
+                table_content, cells_content;
 
             me.id                   = me.options.id || Common.UI.getId();
             me.width                = me.options.width;
@@ -501,6 +502,8 @@ define([
                 rightBorderSelector     = $('#' + meId + '-table-right-border-selector');
                 bottomBorderSelector    = $('#' + meId + '-table-bottom-border-selector');
                 leftBorderSelector      = $('#' + meId + '-table-left-border-selector');
+                table_content           = $('#' + meId + '-table-content');
+                cells_content           = table_content.find('.cell-content');
 
                 topBorderSelector.on('click', function(e){
                     if (me.overwriteStyle){
@@ -671,6 +674,14 @@ define([
                 return null;
             };
 
+            me.setTableColor = function(color) {
+                table_content.css('background-color', (color == 'transparent' ) ? color : ('#'+color));
+            };
+
+            me.setCellsColor = function(color) {
+                cells_content.css('background-color', (color == 'transparent' ) ? color : ('#'+color));
+            };
+
             if (me.options.el) {
                 me.render(null, {
                     borderSize: borderSize,

apps/common/main/resources/less/table-styler.less

@@ -18,7 +18,7 @@
 
     .tablestyler-cell .cell-content .content-text {
         display: block;
-        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAECAAAAACBhLHlAAAAEUlEQVR42mM4cIABiP7/ByIAJwAG/emrCjYAAAAASUVORK5CYII=') repeat 0 0 scroll;
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAECAQAAAAO5iayAAAAAXNSR0IArs4c6QAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AkeChACzh0FVAAAABFJREFUCNdjPPCfgYGJAQUAACB0AcMrPC7hAAAAAElFTkSuQmCC') repeat 0 0 scroll;
         height: 100%;
     }
 }
\ No newline at end of file

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

@@ -217,6 +217,8 @@ define([
                             me._changedProps.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
                         }
                     }
+                    var colorstr = (typeof(color) == 'object') ? color.color : color;
+                    me.tableStyler.setCellsColor(colorstr);
                 }, me));
             });
             this.btnBackColor.render( $('#drop-advanced-button-color'));
@@ -706,6 +708,9 @@ define([
                 this._UpdateTableBordersStyle(ct, border, size, color, this.Borders);
             }, this);
 
+            var colorstr = (typeof(this.paragraphShade) == 'object') ? this.paragraphShade.color : this.paragraphShade;
+            this.tableStyler.setCellsColor(colorstr);
+
             if (this.isFrame)
                 this.setHeight(500);
 

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

@@ -733,6 +733,9 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
                 this._UpdateTableBordersStyle(ct, border, size, color, this.Borders);
             }, this);
 
+            var colorstr = (typeof(this.paragraphShade) == 'object') ? this.paragraphShade.color : this.paragraphShade;
+            this.BordersImage.setCellsColor(colorstr);
+
             if (this.storageName) {
                 var value = Common.localStorage.getItem(this.storageName);
                 this.setActiveCategory((value!==null) ? parseInt(value) : 0);
@@ -888,6 +891,8 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
                     this._changedProps.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(this.paragraphShade));
                 }
             }
+            var colorstr = (typeof(color) == 'object') ? color.color : color;
+            this.BordersImage.setCellsColor(colorstr);
         },
 
 

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

@@ -1083,6 +1083,13 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
                 this._UpdateTableBordersStyle(ct, border, size, color, (this._allTable) ? this.TableBorders : this.CellBorders, (this._allTable) ? this.ChangedTableBorders : this.ChangedCellBorders);
             }, this);
 
+            var cellcolorstr = (typeof(this.CellColor.Color) == 'object') ? this.CellColor.Color.color : this.CellColor.Color,
+                tablecolorstr = (typeof(this.TableColor.Color) == 'object') ? this.TableColor.Color.color : this.TableColor.Color;
+            this.tableBordersImageSpacing.setTableColor(tablecolorstr);
+            this.tableBordersImage.setTableColor(tablecolorstr);
+            this.tableBordersImageSpacing.setCellsColor(cellcolorstr);
+            this.tableBordersImage.setCellsColor((this._allTable) ? tablecolorstr : cellcolorstr);
+
             if (this.storageName) {
                 var value = Common.localStorage.getItem(this.storageName);
                 this.setActiveCategory((value!==null) ? parseInt(value) : 0);
@@ -1673,6 +1680,10 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
                 this._cellBackground.put_Value(0);
                 this._cellBackground.put_Color(Common.Utils.ThemeColor.getRgbColor(this.CellColor.Color));
             }
+            var colorstr = (typeof(color) == 'object') ? color.color : color;
+            this.tableBordersImageSpacing.setCellsColor(colorstr);
+            if (!this._allTable)
+                this.tableBordersImage.setCellsColor(colorstr);
         },
 
         onColorsTableBackSelect: function(picker, color) {
@@ -1693,6 +1704,11 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
                     background.put_Color(Common.Utils.ThemeColor.getRgbColor(this.TableColor.Color));
                 }
             }
+            var colorstr = (typeof(color) == 'object') ? color.color : color;
+            this.tableBordersImageSpacing.setTableColor(colorstr);
+            this.tableBordersImage.setTableColor(colorstr);
+            if (this._allTable)
+                this.tableBordersImage.setCellsColor(colorstr);
         },
 
         _UpdateBordersSpacing_: function (){