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

[SSE] Bug 48248: Add auto color for cell borders

Browse source
This commit is contained in:
Julia Radzhabova 2021-01-20 18:38:07 +03:00
parent e32c1fd3cf
commit ff43f0dc71
6 changed files with 52 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -71,6 +71,9 @@ 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);
},

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

@ -173,8 +173,8 @@
#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;
}
}

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 || {}));
});

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);