Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #666 from ONLYOFFICE/feature/bug-48248

Browse source 
Feature/bug 48248
This commit is contained in:
Julia Radzhabova 2021-01-21 16:00:35 +03:00 committed by GitHub
parent e6a7ab5dfb 14ad8d8aef
commit 25fb714042
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 189 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
apps/common/main/lib/component/ColorButton.js
View file

@ -71,16 +71,22 @@ define([
render: function(parentEl) {
Common.UI.Button.prototype.render.call(this, parentEl);
if (this.options.auto)
this.autocolor = (typeof this.options.auto == 'object') ? this.options.auto.color || '000000' : '000000';
if (this.options.color!==undefined)
this.setColor(this.options.color);
},
onColorSelect: function(picker, color) {
this.setColor(color);
this.setAutoColor(false);
this.trigger('color:select', this, color);
},
setColor: function(color) {
if (color == 'auto' && this.options.auto)
color = this.autocolor;
var span = $(this.cmpEl).find('button span:nth-child(1)');
this.color = color;
@ -98,6 +104,11 @@ define([
});
this.colorPicker.on('select', _.bind(this.onColorSelect, this));
this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
if (this.options.auto) {
this.cmpEl.find('#' + this.menu.id + '-color-auto').on('click', _.bind(this.onAutoColorSelect, this));
this.colorAuto = this.cmpEl.find('#' + this.menu.id + '-color-auto > a');
(color == 'auto') && this.setAutoColor(true);
}
}
return this.colorPicker;
},
@ -105,13 +116,24 @@ 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({
var height = options.paletteHeight || 216,
id = Common.UI.getId(),
auto = [];
if (options.auto) {
this.autocolor = (typeof options.auto == 'object') ? options.auto.color || '000000' : '000000';
auto.push({
id: id + '-color-auto',
caption: (typeof options.auto == 'object') ? options.auto.caption || this.textAutoColor : 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: #' + this.autocolor + ';"></span><%= caption %></a>')
});
auto.push({caption: '--'});
}
var menu = new Common.UI.Menu({
id: id,
cls: 'shifted-left',
additionalAlign: options.additionalAlign,
items: (options.additionalItems ? options.additionalItems : []).concat([
items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([
{ 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>') }
])
@ -131,7 +153,27 @@ define([
this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color);
},
textNewColor: 'Add New Custom Color'
onAutoColorSelect: function() {
this.setColor('auto');
this.setAutoColor(true);
this.colorPicker && this.colorPicker.clearSelection();
this.trigger('auto:select', this, this.autocolor);
},
setAutoColor: function(selected) {
if (!this.colorAuto) return;
if (selected && !this.colorAuto.hasClass('selected'))
this.colorAuto.addClass('selected');
else if (!selected && this.colorAuto.hasClass('selected'))
this.colorAuto.removeClass('selected');
},
isAutoColor: function() {
return this.colorAuto && this.colorAuto.hasClass('selected');
},
textNewColor: 'Add New Custom Color',
textAutoColor: 'Automatic'
}, Common.UI.ColorButton || {}));
});

12
apps/common/main/resources/less/buttons.less
View file

@ -595,6 +595,18 @@
}
}
// for color button auto color
.dropdown-menu {
li > a.selected,
li > a:hover {
span.color-auto {
outline: 1px solid #000;
border: 1px solid #fff;
}
}
}
.btn-options {
padding: 0;
margin:0;

39
apps/documenteditor/main/app/view/ControlSettingsDialog.js
View file

@ -130,14 +130,12 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
this.btnColor = new Common.UI.ColorButton({
parentEl: $('#control-settings-color-btn'),
additionalItems: [{
id: 'control-settings-system-color',
caption: this.textSystemColor,
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: #dcdcdc;"></span><%= caption %></a>')
},
{caption: '--'}],
auto: {
caption: this.textSystemColor,
color: Common.Utils.ThemeColor.getHexColor(220, 220, 220)
},
additionalAlign: this.menuAddAlign,
color: '000000',
color: 'auto',
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',
@ -145,9 +143,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
],
paletteHeight: 94
});
this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
this.colors = this.btnColor.getPicker();
$('#control-settings-system-color').on('click', _.bind(this.onSystemColor, this));
this.btnApplyAll = new Common.UI.Button({
el: $('#control-settings-btn-all')
@ -381,21 +377,6 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
}, 100);
},
onColorsSelect: function(btn, color) {
var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a');
clr_item.hasClass('selected') && clr_item.removeClass('selected');
this.isSystemColor = false;
},
onSystemColor: function(e) {
var color = Common.Utils.ThemeColor.getHexColor(220, 220, 220);
this.btnColor.setColor(color);
this.colors.clearSelection();
var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a');
!clr_item.hasClass('selected') && clr_item.addClass('selected');
this.isSystemColor = true;
},
afterRender: function() {
this.updateMetricUnit();
this._setDefaults(this.props);
@ -424,16 +405,14 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
(val!==null && val!==undefined) && this.cmbShow.setValue(val);
val = props.get_Color();
this.isSystemColor = (val===null);
if (val) {
val = Common.Utils.ThemeColor.getHexColor(val.get_r(), val.get_g(), val.get_b());
this.colors.selectByRGB(val,true);
} else {
this.colors.clearSelection();
var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a');
!clr_item.hasClass('selected') && clr_item.addClass('selected');
val = Common.Utils.ThemeColor.getHexColor(220, 220, 220);
val = 'auto';
}
this.btnColor.setAutoColor(val == 'auto');
this.btnColor.setColor(val);
val = props.get_Lock();
@ -568,7 +547,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
props.put_PlaceholderText(this.txtPlaceholder.getValue() || ' ');
props.put_Appearance(this.cmbShow.getValue());
if (this.isSystemColor) {
if (this.btnColor.isAutoColor()) {
props.put_Color(null);
} else {
var color = Common.Utils.ThemeColor.getRgbColor(this.colors.getColor());
@ -678,7 +657,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
if (this.api) {
var props = new AscCommon.CContentControlPr();
props.put_Appearance(this.cmbShow.getValue());
if (this.isSystemColor) {
if (this.btnColor.isAutoColor()) {
props.put_Color(null);
} else {
var color = Common.Utils.ThemeColor.getRgbColor(this.colors.getColor());

25
apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
View file

@ -163,11 +163,15 @@ define([
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#drop-advanced-button-bordercolor'),
additionalAlign: this.menuAddAlign,
color: '000000'
color: 'auto',
auto: true
});
this.btnBorderColor.on('color:select', _.bind(function(btn, color) {
this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
}, this));
this.btnBorderColor.on('auto:select', _.bind(function(btn, color) {
this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
}, this));
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBackColor = new Common.UI.ColorButton({
@ -668,13 +672,16 @@ define([
if (this.borderProps !== undefined) {
this.btnBorderColor.setColor(this.borderProps.borderColor);
this.tableStyler.setVirtualBorderColor((typeof(this.borderProps.borderColor) == 'object') ? this.borderProps.borderColor.color : this.borderProps.borderColor);
this.btnBorderColor.setAutoColor(this.borderProps.borderColor=='auto');
this.tableStyler.setVirtualBorderColor((typeof(this.btnBorderColor.color) == 'object') ? this.btnBorderColor.color.color : this.btnBorderColor.color);
if (this.borderProps.borderColor=='auto')
this.colorsBorder.clearSelection();
else
this.colorsBorder.select(this.borderProps.borderColor,true);
this.cmbBorderSize.setValue(this.borderProps.borderSize.ptValue);
this.BorderSize = {ptValue: this.borderProps.borderSize.ptValue, pxValue: this.borderProps.borderSize.pxValue};
this.tableStyler.setVirtualBorderSize(this.BorderSize.pxValue);
this.colorsBorder.select(this.borderProps.borderColor);
}
this.setTitle((this.isFrame) ? this.textTitleFrame : this.textTitle);
@ -775,7 +782,7 @@ define([
paragraphProps : this._changedProps,
borderProps : {
borderSize : this.BorderSize,
borderColor : this.btnBorderColor.color
borderColor : this.btnBorderColor.isAutoColor() ? 'auto' : this.btnBorderColor.color
}
};
},
@ -1086,7 +1093,13 @@ define([
var size = parseFloat(this.BorderSize.ptValue);
border.put_Value(1);
border.put_Size(size * 25.4 / 72.0);
var color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
var color;
if (this.btnBorderColor.isAutoColor()) {
color = new Asc.asc_CColor();
color.put_auto(true);
} else {
color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
}
border.put_Color(color);
}
else {

24
apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
View file

@ -376,10 +376,12 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#paragraphadv-border-color-btn'),
additionalAlign: this.menuAddAlign,
color: '000000'
color: 'auto',
auto: true
});
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
this.btnBorderColor.on('auto:select', _.bind(this.onColorsBorderSelect, this));
this.BordersImage = new Common.UI.TableStyler({
el: $('#id-deparagraphstyler'),
@ -781,7 +783,7 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
var horizontalAlign = this.cmbTextAlignment.getValue();
this._changedProps.asc_putJc((horizontalAlign !== undefined && horizontalAlign !== null) ? horizontalAlign : c_paragraphTextAlignment.LEFT);
return { paragraphProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.color} };
return { paragraphProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.isAutoColor() ? 'auto' : this.btnBorderColor.color} };
},
_setDefaults: function(props) {
@ -962,14 +964,18 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
if (this.borderProps !== undefined) {
this.btnBorderColor.setColor(this.borderProps.borderColor);
this.BordersImage.setVirtualBorderColor((typeof(this.borderProps.borderColor) == 'object') ? this.borderProps.borderColor.color : this.borderProps.borderColor);
this.btnBorderColor.setAutoColor(this.borderProps.borderColor=='auto');
this.BordersImage.setVirtualBorderColor((typeof(this.btnBorderColor.color) == 'object') ? this.btnBorderColor.color.color : this.btnBorderColor.color);
if (this.borderProps.borderColor=='auto')
this.colorsBorder.clearSelection();
else
this.colorsBorder.select(this.borderProps.borderColor,true);
this.cmbBorderSize.setValue(this.borderProps.borderSize.ptValue);
var rec = this.cmbBorderSize.getSelectedRecord();
if (rec)
this.onBorderSizeSelect(this.cmbBorderSize, rec);
this.colorsBorder.select(this.borderProps.borderColor,true);
}
for (var i=0; i<this.BordersImage.rows; i++) {
@ -1167,7 +1173,13 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
var size = parseFloat(this.BorderSize.ptValue);
border.put_Value(1);
border.put_Size(size * 25.4 / 72.0);
var color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
var color;
if (this.btnBorderColor.isAutoColor()) {
color = new Asc.asc_CColor();
color.put_auto(true);
} else {
color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
}
border.put_Color(color);
}
else {

13
apps/documenteditor/main/app/view/TableSettings.js
View file

@ -630,7 +630,13 @@ define([
var size = parseFloat(this.BorderSize);
border.put_Value(1);
border.put_Size(size * 25.4 / 72.0);
var color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
var color;
if (this.btnBorderColor.isAutoColor()) {
color = new Asc.asc_CColor();
color.put_auto(true);
} else {
color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
}
border.put_Color(color);
}
else {
@ -644,7 +650,8 @@ define([
// create color buttons
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#table-border-color-btn'),
color: '000000'
color: 'auto',
auto: true
});
this.lockedControls.push(this.btnBorderColor);
this.borderColor = this.btnBorderColor.getPicker();
@ -659,7 +666,7 @@ define([
}
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.btnBorderColor.setColor(this.borderColor.getColor());
!this.btnBorderColor.isAutoColor() && this.btnBorderColor.setColor(this.borderColor.getColor());
},
_onInitTemplates: function(Templates){

23
apps/documenteditor/main/app/view/TableSettingsAdvanced.js
View file

@ -889,9 +889,11 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#tableadv-border-color-btn'),
additionalAlign: this.menuAddAlign,
color: '000000'
color: 'auto',
auto: true
});
this.btnBorderColor.on('color:select', _.bind(me.onColorsBorderSelect, me));
this.btnBorderColor.on('auto:select', _.bind(me.onColorsBorderSelect, me));
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBackColor = new Common.UI.ColorButton({
@ -1063,16 +1065,19 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
if (this.borderProps !== undefined) {
this.btnBorderColor.setColor(this.borderProps.borderColor);
var colorstr = (typeof(this.borderProps.borderColor) == 'object') ? this.borderProps.borderColor.color : this.borderProps.borderColor;
this.btnBorderColor.setAutoColor(this.borderProps.borderColor=='auto');
var colorstr = (typeof(this.btnBorderColor.color) == 'object') ? this.btnBorderColor.color.color : this.btnBorderColor.color;
this.tableBordersImageSpacing.setVirtualBorderColor(colorstr);
this.tableBordersImage.setVirtualBorderColor(colorstr);
if (this.borderProps.borderColor=='auto')
this.colorsBorder.clearSelection();
else
this.colorsBorder.select(this.borderProps.borderColor,true);
this.cmbBorderSize.setValue(this.borderProps.borderSize.ptValue);
var rec = this.cmbBorderSize.getSelectedRecord();
if (rec)
this.onBorderSizeSelect(this.cmbBorderSize, rec);
this.colorsBorder.select(this.borderProps.borderColor, true);
}
for (var i=0; i<this.tableBordersImageSpacing.rows; i++) {
@ -1163,7 +1168,7 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
if (this.isAltDescChanged)
this._changedProps.put_TableDescription(this.textareaAltDescription.val());
return { tableProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.color} };
return { tableProps: this._changedProps, borderProps: {borderSize: this.BorderSize, borderColor: this.btnBorderColor.isAutoColor() ? 'auto' : this.btnBorderColor.color} };
},
_setDefaults: function(props) {
@ -2063,7 +2068,13 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
var size = parseFloat(this.BorderSize.ptValue);
border.put_Value(1);
border.put_Size(size * 25.4 / 72.0);
var color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
var color;
if (this.btnBorderColor.isAutoColor()) {
color = new Asc.asc_CColor();
color.put_auto(true);
} else {
color = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
}
border.put_Color(color);
}
else {

1
apps/documenteditor/main/locale/en.json
View file

@ -147,6 +147,7 @@
"Common.UI.Calendar.textShortWednesday": "We",
"Common.UI.Calendar.textYears": "Years",
"Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ColorButton.textAutoColor": "Automatic",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders",
"Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders",
"Common.UI.ComboDataView.emptyComboText": "No styles",

8
apps/documenteditor/main/resources/less/toolbar.less
View file

@ -171,12 +171,10 @@
text-overflow: ellipsis;
}
#id-toolbar-menu-auto-fontcolor > a.selected,
#control-settings-system-color > a.selected,
#control-settings-system-color > a:hover {
#id-toolbar-menu-auto-fontcolor > a.selected {
span {
outline: 1px solid #000;
border: 1px solid #fff;
outline: 1px solid @black;
border: 1px solid @body-bg;
}
}

5
apps/presentationeditor/main/app/view/TableSettings.js
View file

@ -611,7 +611,8 @@ define([
if (!this.btnBackColor) {
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#table-border-color-btn'),
color: '000000'
color: 'auto',
auto: true
});
this.lockedControls.push(this.btnBorderColor);
this.borderColor = this.btnBorderColor.getPicker();
@ -626,7 +627,7 @@ define([
}
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.btnBorderColor.setColor(this.borderColor.getColor());
!this.btnBorderColor.isAutoColor() && this.btnBorderColor.setColor(this.borderColor.getColor());
},
_onInitTemplates: function(Templates){

1
apps/presentationeditor/main/locale/en.json
View file

@ -42,6 +42,7 @@
"Common.define.chartData.textSurface": "Surface",
"Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.",
"Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ColorButton.textAutoColor": "Automatic",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders",
"Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders",
"Common.UI.ComboDataView.emptyComboText": "No styles",

30
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -315,6 +315,7 @@ define([
toolbar.btnBorders.menu.on('item:click', _.bind(this.onBordersMenu, this));
toolbar.mnuBorderWidth.on('item:toggle', _.bind(this.onBordersWidth, this));
toolbar.mnuBorderColorPicker.on('select', _.bind(this.onBordersColor, this));
$('#id-toolbar-menu-auto-bordercolor').on('click', _.bind(this.onAutoBorderColor, this));
}
toolbar.btnAlignLeft.on('click', _.bind(this.onHorizontalAlign, this, AscCommon.align_Left));
toolbar.btnAlignCenter.on('click', _.bind(this.onHorizontalAlign, this, AscCommon.align_Center));
@ -715,10 +716,26 @@ define([
},
onBordersColor: function(picker, color) {
$('#id-toolbar-mnu-item-border-color .menu-item-icon').css('border-color', '#' + ((typeof(color) == 'object') ? color.color : color));
$('#id-toolbar-mnu-item-border-color > a .menu-item-icon').css('border-color', '#' + ((typeof(color) == 'object') ? color.color : color));
this.toolbar.mnuBorderColor.onUnHoverItem();
this.toolbar.btnBorders.options.borderscolor = Common.Utils.ThemeColor.getRgbColor(color);
this.toolbar.mnuBorderColorPicker.currentColor = color;
var clr_item = this.toolbar.btnBorders.menu.$el.find('#id-toolbar-menu-auto-bordercolor > a');
clr_item.hasClass('selected') && clr_item.removeClass('selected');
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
Common.component.Analytics.trackEvent('ToolBar', 'Border Color');
},
onAutoBorderColor: function(e) {
var color = '#000';
$('#id-toolbar-mnu-item-border-color > a .menu-item-icon').css('border-color', color);
this.toolbar.mnuBorderColor.onUnHoverItem();
this.toolbar.btnBorders.options.borderscolor = Common.Utils.ThemeColor.getRgbColor(color);
this.toolbar.mnuBorderColorPicker.clearSelection();
this.toolbar.mnuBorderColorPicker.currentColor = {color: color, isAuto: true};
var clr_item = this.toolbar.btnBorders.menu.$el.find('#id-toolbar-menu-auto-bordercolor > a');
!clr_item.hasClass('selected') && clr_item.addClass('selected');
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
Common.component.Analytics.trackEvent('ToolBar', 'Border Color');
@ -2756,9 +2773,14 @@ define([
this._state.clrshd_asccolor = undefined;
if (this.toolbar.mnuBorderColorPicker) {
updateColors(this.toolbar.mnuBorderColorPicker, Common.Utils.ThemeColor.getEffectColors()[1]);
this.toolbar.btnBorders.options.borderscolor = this.toolbar.mnuBorderColorPicker.currentColor.color || this.toolbar.mnuBorderColorPicker.currentColor;
$('#id-toolbar-mnu-item-border-color .menu-item-icon').css('border-color', '#' + this.toolbar.btnBorders.options.borderscolor);
updateColors(this.toolbar.mnuBorderColorPicker, {color: '000', isAuto: true});
var currentColor = this.toolbar.mnuBorderColorPicker.currentColor;
if (currentColor && currentColor.isAuto) {
var clr_item = this.toolbar.btnBorders.menu.$el.find('#id-toolbar-menu-auto-bordercolor > a');
!clr_item.hasClass('selected') && clr_item.addClass('selected');
}
this.toolbar.btnBorders.options.borderscolor = currentColor.color || currentColor;
$('#id-toolbar-mnu-item-border-color > a .menu-item-icon').css('border-color', '#' + this.toolbar.btnBorders.options.borderscolor);
}
},

7
apps/spreadsheeteditor/main/app/view/CellSettings.js
View file

@ -111,7 +111,7 @@ define([
if (this.api) {
var new_borders = [],
bordersWidth = this.BorderType,
bordersColor = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
bordersColor = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color); // change when autocolor will be supported in sdk
if (btn.options.borderId == 'inner') {
new_borders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
@ -410,7 +410,8 @@ define([
parentEl: $('#cell-border-color-btn'),
disabled: this._locked,
menu : true,
color: '000000'
color: 'auto',
auto: true
});
this.lockedControls.push(this.btnBorderColor);
@ -856,7 +857,7 @@ define([
}
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.btnBorderColor.setColor(this.borderColor.getColor());
!this.btnBorderColor.isAutoColor() && this.btnBorderColor.setColor(this.borderColor.getColor());
this.colorsGrad.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsBG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());

11
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -1852,7 +1852,15 @@ define([
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>'),
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
cls: 'shifted-left',
items : [
{
id: 'id-toolbar-menu-auto-bordercolor',
caption: this.textAutoColor,
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>'),
stopPropagation: true
},
{caption: '--'},
{ 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 }
]
@ -2458,6 +2466,7 @@ define([
textVertical: 'Vertical Text',
textTabView: 'View',
tipEditChartData: 'Select Data',
tipEditChartType: 'Change Chart Type'
tipEditChartType: 'Change Chart Type',
textAutoColor: 'Automatic'
}, SSE.Views.Toolbar || {}));
});

2
apps/spreadsheeteditor/main/locale/en.json
View file

@ -43,6 +43,7 @@
"Common.define.chartData.textWinLossSpark": "Win/Loss",
"Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.",
"Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ColorButton.textAutoColor": "Automatic",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders",
"Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders",
"Common.UI.ComboDataView.emptyComboText": "No styles",
@ -3018,6 +3019,7 @@
"SSE.Views.Toolbar.txtTime": "Time",
"SSE.Views.Toolbar.txtUnmerge": "Unmerge Cells",
"SSE.Views.Toolbar.txtYen": "¥ Yen",
"SSE.Views.Toolbar.textAutoColor": "Automatic",
"SSE.Views.Top10FilterDialog.textType": "Show",
"SSE.Views.Top10FilterDialog.txtBottom": "Bottom",
"SSE.Views.Top10FilterDialog.txtBy": "by",

7
apps/spreadsheeteditor/main/resources/less/toolbar.less
View file

@ -135,6 +135,13 @@
}
}
#id-toolbar-menu-auto-bordercolor > a.selected {
span {
outline: 1px solid @black;
border: 1px solid @body-bg;
}
}
.item-equation {
border: 1px solid @gray;
.background-ximage-v2('toolbar/math.png', 1500px);