Merge pull request #634 from ONLYOFFICE/fix/bug-48107

[DE] Fix Bug 48107

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

@@ -61,7 +61,7 @@ define([
                 var me = this;
                 options.menu = me.getMenu(options);
                 me.on('render:after', function(btn) {
-                    me.getPicker(options.color);
+                    me.getPicker(options.color, options.colors);
                 });
             }
 
@@ -88,12 +88,13 @@ define([
             span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
         },
 
-        getPicker: function(color) {
+        getPicker: function(color, colors) {
             if (!this.colorPicker) {
                 this.colorPicker = new Common.UI.ThemeColorPalette({
                     el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
                     transparent: this.options.transparent,
-                    value: color
+                    value: color,
+                    colors: colors
                 });
                 this.colorPicker.on('select', _.bind(this.onColorSelect, this));
                 this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
@@ -104,13 +105,14 @@ define([
         getMenu: function(options) {
             if (typeof this.menu !== 'object') {
                 options = options || this.options;
+                var height = options.paletteHeight || 216;
                 var id = Common.UI.getId(),
                     menu = new Common.UI.Menu({
                     id: id,
                     cls: 'shifted-left',
                     additionalAlign: options.additionalAlign,
                     items: (options.additionalItems ? options.additionalItems : []).concat([
-                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + 'px; margin: 10px;"></div>') },
                         { template: _.template('<a id="' + id + '-color-new" style="">' + this.textNewColor + '</a>') }
                     ])
                 });
@@ -122,7 +124,7 @@ define([
         setMenu: function (m) {
             m = m || this.getMenu();
             Common.UI.Button.prototype.setMenu.call(this, m);
-            this.getPicker(this.options.color);
+            this.getPicker(this.options.color, this.options.colors);
         },
 
         addNewColor: function() {

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

@@ -60,7 +60,7 @@ define([
 
         template    :
             _.template(
-                '<div style="padding: 12px;">' +
+                '<div style="padding: 8px 12px 12px;">' +
                 '<% var me = this; %>' +
                 '<% $(colors).each(function(num, item) { %>' +
                     '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +

apps/documenteditor/main/app/controller/FormsTab.js

@@ -69,7 +69,6 @@ define([
                 this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this));
                 Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
                 this.api.asc_registerCallback('asc_onChangeSpecialFormsGlobalSettings', _.bind(this.onChangeSpecialFormsGlobalSettings, this));
-                this.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this));
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
 
                 // this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this));
@@ -90,7 +89,6 @@ define([
                     'forms:clear': this.onClearClick,
                     'forms:no-color': this.onNoControlsColor,
                     'forms:select-color': this.onSelectControlsColor,
-                    'forms:open-color': this.onColorsShow,
                     'forms:mode': this.onModeClick
                 }
             });
@@ -145,36 +143,6 @@ define([
             }
         },
 
-        onSendThemeColors: function() {
-            this._needUpdateColors = true;
-        },
-
-        updateThemeColors: function() {
-            var updateColors = function(picker, defaultColorIndex) {
-                if (picker) {
-                    var clr;
-
-                    var effectcolors = Common.Utils.ThemeColor.getEffectColors();
-                    for (var i = 0; i < effectcolors.length; i++) {
-                        if (typeof(picker.currentColor) == 'object' &&
-                            clr === undefined &&
-                            picker.currentColor.effectId == effectcolors[i].effectId)
-                            clr = effectcolors[i];
-                    }
-
-                    picker.updateColors(effectcolors, Common.Utils.ThemeColor.getStandartColors());
-                    if (picker.currentColor === undefined) {
-                        picker.currentColor = effectcolors[defaultColorIndex];
-                    } else if ( clr!==undefined ) {
-                        picker.currentColor = clr;
-                    }
-                }
-            };
-
-            this.view && this.view.mnuFormsColorPicker && updateColors(this.view.mnuFormsColorPicker, 1);
-            this.onChangeSpecialFormsGlobalSettings();
-        },
-
         onChangeSpecialFormsGlobalSettings: function() {
             if (this.view && this.view.mnuFormsColorPicker) {
                 var clr = this.api.asc_GetSpecialFormsHighlightColor(),
@@ -190,11 +158,6 @@ define([
             }
         },
 
-        onColorsShow: function(menu) {
-            this._needUpdateColors && this.updateThemeColors();
-            this._needUpdateColors = false;
-        },
-
         onControlsSelect: function(type) {
             if (!(this.toolbar.mode && this.toolbar.mode.canFeatureContentControl)) return;
 

apps/documenteditor/main/app/controller/RightMenu.js

@@ -321,7 +321,6 @@ define([
             this.rightmenu.tableSettings.UpdateThemeColors();
             this.rightmenu.shapeSettings.UpdateThemeColors();
             this.rightmenu.textartSettings.UpdateThemeColors();
-            this.rightmenu.formSettings && this.rightmenu.formSettings.UpdateThemeColors();
         },
 
         updateMetricUnit: function() {

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

@@ -2861,9 +2861,6 @@ define([
                 this.onParagraphColor(this._state.clrshd_asccolor);
             }
             this._state.clrshd_asccolor = undefined;
-
-            updateColors(this.toolbar.mnuControlsColorPicker, 1);
-            this.onChangeSdtGlobalSettings();
         },
 
         _onInitEditorStyles: function(styles) {

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

@@ -137,7 +137,13 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
                     },
                     {caption: '--'}],
                 additionalAlign: this.menuAddAlign,
-                color: '000000'
+                color: '000000',
+                colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600',
+                    '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966',
+                    '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
+                    '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
+                ],
+                paletteHeight: 94
             });
             this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
             this.colors = this.btnColor.getPicker();
@@ -381,10 +387,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
             this.isSystemColor = false;
         },
 
-        updateThemeColors: function() {
-            this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
-        },
-
         onSystemColor: function(e) {
             var color = Common.Utils.ThemeColor.getHexColor(220, 220, 220);
             this.btnColor.setColor(color);
@@ -395,7 +397,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
         },
 
         afterRender: function() {
-            this.updateThemeColors();
             this.updateMetricUnit();
             this._setDefaults(this.props);
             if (this.storageName) {

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

@@ -533,7 +533,7 @@ define([
 
         onColorPickerSelect: function(btn, color) {
             this.BorderColor = color;
-            this._state.BorderColor = this.BorderColor;
+            this._state.BorderColor = undefined;
 
             if (this.api && !this._noApply) {
                 var props   = this._originalProps || new AscCommon.CContentControlPr();
@@ -554,6 +554,20 @@ define([
             }
         },
 
+        onNoBorderClick: function(item) {
+            this.BorderColor = 'transparent';
+            this._state.BorderColor = undefined;
+
+            if (this.api && !this._noApply) {
+                var props   = this._originalProps || new AscCommon.CContentControlPr();
+                var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr();
+                formTextPr.put_CombBorder();
+                props.put_TextFormPr(formTextPr);
+                this.api.asc_SetContentControlProperties(props, this.internalId);
+                this.fireEvent('editcomplete', this);
+            }
+        },
+
         ChangeSettings: function(props) {
             if (this._initSettings)
                 this.createDelayedElements();
@@ -721,7 +735,8 @@ define([
 
                         this.btnColor.setColor(this.BorderColor);
                         this.mnuColorPicker.clearSelection();
-                        this.mnuColorPicker.selectByRGB(typeof(this.BorderColor) == 'object' ? this.BorderColor.color : this.BorderColor,true);
+                        this.mnuNoBorder.setChecked(this.BorderColor == 'transparent', true);
+                        (this.BorderColor != 'transparent') && this.mnuColorPicker.selectByRGB(typeof(this.BorderColor) == 'object' ? this.BorderColor.color : this.BorderColor,true);
                         this._state.BorderColor = this.BorderColor;
                     }
                 }
@@ -754,18 +769,27 @@ define([
             if (!this.btnColor) {
                 this.btnColor = new Common.UI.ColorButton({
                     parentEl: (this.$el || $(this.el)).findById('#form-color-btn'),
-                    transparent: true,
+                    additionalItems: [
-                    menu        : true
+                        this.mnuNoBorder = new Common.UI.MenuItem({
+                            style: 'padding-left:20px;',
+                            caption: this.textNoBorder,
+                            toggleGroup: 'form-settings-no-border',
+                            checkable: true
+                        }), {caption: '--'}],
+                    menu        : true,
+                    colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600',
+                        '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966',
+                        '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
+                        '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
+                    ],
+                    paletteHeight: 94
                 });
                 this.lockedControls.push(this.btnColor);
+                this.mnuNoBorder.on('click', _.bind(this.onNoBorderClick, this));
                 this.btnColor.on('color:select', this.onColorPickerSelect.bind(this));
                 this.btnColor.setMenu();
                 this.mnuColorPicker = this.btnColor.getPicker();
             }
-
-            this.mnuColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
-            this.mnuColorPicker.clearSelection();
-            this.BorderColor && this.mnuColorPicker.selectByRGB(typeof(this.BorderColor) == 'object' ? this.BorderColor.color : this.BorderColor,true);
         },
         
         onHideMenus: function(menu, e, isFromInputControl){
@@ -863,7 +887,8 @@ define([
         textFromStorage: 'From Storage',
         textColor: 'Border color',
         textConnected: 'Fields connected',
-        textDisconnect: 'Disconnect'
+        textDisconnect: 'Disconnect',
+        textNoBorder: 'No border'
 
     }, DE.Views.FormSettings || {}));
 });

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

@@ -207,12 +207,17 @@ define([
                                     checkable: true
                                 }),
                                 {caption: '--'},
-                                {template: _.template('<div id="id-toolbar-menu-form-color" style="width: 169px; height: 220px; margin: 10px;"></div>')},
+                                {template: _.template('<div id="id-toolbar-menu-form-color" style="width: 169px; height: 94px; margin: 10px;"></div>')},
                                 {template: _.template('<a id="id-toolbar-menu-new-form-color" style="padding-left:12px;">' + me.textNewColor + '</a>')}
                             ]
                         }));
                         me.mnuFormsColorPicker = new Common.UI.ThemeColorPalette({
-                            el: $('#id-toolbar-menu-form-color')
+                            el: $('#id-toolbar-menu-form-color'),
+                            colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600',
+                                '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966',
+                                '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
+                                '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
+                            ]
                         });
                         var colorVal = $('<div class="btn-color-value-line"></div>');
                         $('button:first-child', me.btnHighlight.cmpEl).append(colorVal);

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

@@ -268,7 +268,7 @@ define([
                                     template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>')
                                 },
                                 {caption: '--'},
-                                {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>')},
+                                {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 216px; margin: 10px;"></div>')},
                                 {template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="">' + this.textNewColor + '</a>')}
                             ]
                         })
@@ -282,7 +282,7 @@ define([
                         split: true,
                         menu: new Common.UI.Menu({
                             items: [
-                                {template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 220px; margin: 10px;"></div>')},
+                                {template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 216px; margin: 10px;"></div>')},
                                 {template: _.template('<a id="id-toolbar-menu-new-paracolor" style="padding-left:12px;">' + this.textNewColor + '</a>')}
                             ]
                         })
@@ -666,7 +666,7 @@ define([
                                                 checkable: true
                                             }),
                                             {caption: '--'},
-                                            {template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 169px; height: 220px; margin: 10px;"></div>')},
+                                            {template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 169px; height: 94px; margin: 10px;"></div>')},
                                             {template: _.template('<a id="id-toolbar-menu-new-control-color" style="padding-left:12px;">' + this.textNewColor + '</a>')}
                                         ]
                                     })
@@ -1959,7 +1959,12 @@ define([
 
                 if (this.btnContentControls.cmpEl) {
                     this.mnuControlsColorPicker = new Common.UI.ThemeColorPalette({
-                        el: $('#id-toolbar-menu-controls-color')
+                        el: $('#id-toolbar-menu-controls-color'),
+                        colors: ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600',
+                            '808000', '00FF00', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966',
+                            '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
+                            '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
+                        ]
                     });
                 }
             },

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

@@ -344,7 +344,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                         template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>')
                     },
                     {caption: '--'},
-                        { template: _.template('<div id="watermark-menu-textcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                        { template: _.template('<div id="watermark-menu-textcolor" style="width: 169px; height: 216px; margin: 10px;"></div>') },
                         { template: _.template('<a id="watermark-menu-textcolor-new">' + this.textNewColor + '</a>') }
                     ]
                 })

apps/documenteditor/main/locale/en.json

@@ -1661,6 +1661,7 @@
   "DE.Views.FormSettings.textConnected": "Fields connected",
   "DE.Views.FormSettings.textDelete": "Delete",
   "DE.Views.FormSettings.textDisconnect": "Disconnect",
+  "DE.Views.FormSettings.textNoBorder": "No border",
   "DE.Views.FormSettings.textDropDown": "Dropdown",
   "DE.Views.FormSettings.textField": "Text Field",
   "DE.Views.FormSettings.textFromFile": "From File",

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

@@ -342,7 +342,7 @@ define([
                         menu: new Common.UI.Menu({
                             cls: 'shifted-left',
                             items: [
-                                {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>')},
+                                {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 216px; margin: 10px;"></div>')},
                                 {template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="padding-left:12px;">' + me.textNewColor + '</a>')}
                             ]
                         })

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

@@ -561,7 +561,7 @@ define([
                 menu        : new Common.UI.Menu({
                     additionalAlign: this.menuAddAlign,
                     items: [
-                        { template: _.template('<div id="id-dlg-h-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                        { template: _.template('<div id="id-dlg-h-menu-fontcolor" style="width: 169px; height: 216px; margin: 10px;"></div>') },
                         { template: _.template('<a id="id-dlg-h-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
                     ]
                 })
@@ -580,7 +580,7 @@ define([
                 menu        : new Common.UI.Menu({
                     additionalAlign: this.menuAddAlign,
                     items: [
-                        { template: _.template('<div id="id-dlg-f-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                        { template: _.template('<div id="id-dlg-f-menu-fontcolor" style="width: 169px; height: 216px; margin: 10px;"></div>') },
                         { template: _.template('<a id="id-dlg-f-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
                     ]
                 })

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

@@ -305,7 +305,7 @@ define([
                     menuAlign: 'tl-tr',
                     cls: 'color-tab',
                     items: [
-                        { template: _.template('<div id="id-tab-menu-color" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                        { template: _.template('<div id="id-tab-menu-color" style="width: 169px; height: 216px; margin: 10px;"></div>') },
                         { template: _.template('<a id="id-tab-menu-new-color" style="padding-left:12px;">' + me.textNewColor + '</a>') }
                     ]
                 });

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

@@ -480,7 +480,7 @@ define([
                     lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     menu        : new Common.UI.Menu({
                         items: [
-                            { template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                            { template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 216px; margin: 10px;"></div>') },
                             { template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="padding-left:12px;">' + me.textNewColor + '</a>') }
                         ]
                     })
@@ -495,7 +495,7 @@ define([
                     lock        : [_set.selImage, _set.editCell, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect],
                     menu        : new Common.UI.Menu({
                         items: [
-                            { template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                            { template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 216px; margin: 10px;"></div>') },
                             { template: _.template('<a id="id-toolbar-menu-new-paracolor" style="padding-left:12px;">' + me.textNewColor + '</a>') }
                         ]
                     })
@@ -1843,7 +1843,7 @@ define([
                             menu        : new Common.UI.Menu({
                                 menuAlign   : 'tl-tr',
                                 items       : [
-                                    { template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 169px; height: 220px; margin: 10px;"></div>'), stopPropagation: true },
+                                    { template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 169px; height: 216px; margin: 10px;"></div>'), stopPropagation: true },
                                     { template: _.template('<a id="id-toolbar-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'),  stopPropagation: true }
                                 ]
                             })