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

Merge pull request #667 from ONLYOFFICE/feature/color-button

Browse source 
Feature/color button
This commit is contained in:
Julia Radzhabova 2021-01-22 11:38:17 +03:00 committed by GitHub
parent 25fb714042 c240e0e89e
commit 62fd861950
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 182 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -176,4 +176,23 @@ define([
textAutoColor: 'Automatic'
}, Common.UI.ColorButton || {}));
Common.UI.ButtonColored = Common.UI.Button.extend(_.extend({
render: function(parentEl) {
Common.UI.Button.prototype.render.call(this, parentEl);
$('button:first-child', this.cmpEl).append( $('<div class="btn-color-value-line"></div>'));
this.colorEl = this.cmpEl.find('.btn-color-value-line');
},
setColor: function(color) {
if (this.colorEl) {
this.colorEl.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
this.colorEl.toggleClass('bordered', color=='transparent');
}
}
}, Common.UI.ButtonColored || {}));
});

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

@ -362,6 +362,10 @@
width: 14px;
height: 3px;
background-color: red;
&.bordered {
border: 1px solid @gray-deep;
}
}
}

2
apps/documenteditor/main/app/controller/FormsTab.js
View file

@ -154,7 +154,7 @@ define([
this.view.mnuFormsColorPicker.selectByRGB(clr, true);
}
this.view.btnHighlight.currentColor = clr;
$('.btn-color-value-line', this.view.btnHighlight.cmpEl).css('background-color', clr ? '#' + clr : 'transparent');
this.view.btnHighlight.setColor(this.view.btnHighlight.currentColor || 'transparent');
}
},

19
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -2380,7 +2380,7 @@ define([
this.api.put_TextColor(color);
this.toolbar.btnFontColor.currentColor = {color: color, isAuto: true};
$('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#000');
this.toolbar.btnFontColor.setColor('000');
this.toolbar.mnuFontColorPicker.clearSelection();
this.toolbar.mnuFontColorPicker.currentColor = {color: color, isAuto: true};
@ -2397,10 +2397,8 @@ define([
onSelectFontColor: function(picker, color) {
this._state.clrtext = this._state.clrtext_asccolor = undefined;
var clr = (typeof(color) == 'object') ? (color.isAuto ? '#000' : color.color) : color;
this.toolbar.btnFontColor.currentColor = color;
$('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + clr);
this.toolbar.btnFontColor.setColor((typeof(color) == 'object') ? (color.isAuto ? '000' : color.color) : color);
this.toolbar.mnuFontColorPicker.currentColor = color;
if (this.api)
@ -2412,10 +2410,8 @@ define([
onParagraphColorPickerSelect: function(picker, color) {
this._state.clrback = this._state.clrshd_asccolor = undefined;
var clr = (typeof(color) == 'object') ? color.color : color;
this.toolbar.btnParagraphColor.currentColor = color;
$('.btn-color-value-line', this.toolbar.btnParagraphColor.cmpEl).css('background-color', color!='transparent'?'#'+clr:clr);
this.toolbar.btnParagraphColor.setColor(color);
this.toolbar.mnuParagraphColorPicker.currentColor = color;
if (this.api) {
@ -2451,7 +2447,7 @@ define([
this._setMarkerColor('transparent', 'menu');
item.setChecked(true, true);
this.toolbar.btnHighlightColor.currentColor = 'transparent';
$('.btn-color-value-line', this.toolbar.btnHighlightColor.cmpEl).css('background-color', 'transparent');
this.toolbar.btnHighlightColor.setColor(this.toolbar.btnHighlightColor.currentColor);
},
onParagraphColor: function(shd) {
@ -2853,7 +2849,7 @@ define([
updateColors(this.toolbar.mnuFontColorPicker, 1);
if (this.toolbar.btnFontColor.currentColor===undefined || !this.toolbar.btnFontColor.currentColor.isAuto) {
this.toolbar.btnFontColor.currentColor = this.toolbar.mnuFontColorPicker.currentColor.color || this.toolbar.mnuFontColorPicker.currentColor;
$('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + this.toolbar.btnFontColor.currentColor);
this.toolbar.btnFontColor.setColor(this.toolbar.btnFontColor.currentColor);
}
if (this._state.clrtext_asccolor!==undefined) {
this._state.clrtext = undefined;
@ -2863,7 +2859,7 @@ define([
updateColors(this.toolbar.mnuParagraphColorPicker, 0);
this.toolbar.btnParagraphColor.currentColor = this.toolbar.mnuParagraphColorPicker.currentColor.color || this.toolbar.mnuParagraphColorPicker.currentColor;
$('.btn-color-value-line', this.toolbar.btnParagraphColor.cmpEl).css('background-color', '#' + this.toolbar.btnParagraphColor.currentColor);
this.toolbar.btnParagraphColor.setColor(this.toolbar.btnParagraphColor.currentColor);
if (this._state.clrshd_asccolor!==undefined) {
this._state.clrback = undefined;
this.onParagraphColor(this._state.clrshd_asccolor);
@ -2921,8 +2917,7 @@ define([
me.toolbar.mnuHighlightTransparent.setChecked(false);
me.toolbar.btnHighlightColor.currentColor = strcolor;
$('.btn-color-value-line', me.toolbar.btnHighlightColor.cmpEl).css('background-color', '#' + strcolor);
me.toolbar.btnHighlightColor.setColor(me.toolbar.btnHighlightColor.currentColor);
me.toolbar.btnHighlightColor.toggle(true, true);
}

6
apps/documenteditor/main/app/view/FormsTab.js
View file

@ -175,7 +175,7 @@ define([
});
this.paragraphControls.push(this.btnClearFields);
this.btnHighlight = new Common.UI.Button({
this.btnHighlight = new Common.UI.ButtonColored({
parentEl : $host.find('#slot-form-highlight'),
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-highlight',
@ -221,9 +221,7 @@ define([
],
value: me.btnHighlight.currentColor
});
var colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', me.btnHighlight.cmpEl).append(colorVal);
colorVal.css('background-color', me.btnHighlight.currentColor ? '#' + me.btnHighlight.currentColor : 'transparent');
me.btnHighlight.setColor(me.btnHighlight.currentColor || 'transparent');
} else {
me.btnHighlight.cmpEl.parents('.group').hide().prev('.separator').hide();
}

18
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -232,7 +232,7 @@ define([
});
this.paragraphControls.push(this.btnSubscript);
this.btnHighlightColor = new Common.UI.Button({
this.btnHighlightColor = new Common.UI.ButtonColored({
id: 'id-toolbar-btn-highlight',
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-highlight',
@ -254,7 +254,7 @@ define([
this.paragraphControls.push(this.btnHighlightColor);
this.textOnlyControls.push(this.btnHighlightColor);
this.btnFontColor = new Common.UI.Button({
this.btnFontColor = new Common.UI.ButtonColored({
id: 'id-toolbar-btn-fontcolor',
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-fontcolor',
@ -275,7 +275,7 @@ define([
});
this.paragraphControls.push(this.btnFontColor);
this.btnParagraphColor = new Common.UI.Button({
this.btnParagraphColor = new Common.UI.ButtonColored({
id: 'id-toolbar-btn-paracolor',
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-paracolor',
@ -1948,10 +1948,8 @@ define([
//
var colorVal;
if (this.btnHighlightColor.cmpEl) {
colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', this.btnHighlightColor.cmpEl).append(colorVal);
this.btnHighlightColor.currentColor = 'FFFF00';
colorVal.css('background-color', '#' + this.btnHighlightColor.currentColor);
this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor);
this.mnuHighlightColorPicker = new Common.UI.ColorPalette({
el: $('#id-toolbar-menu-highlight'),
colors: [
@ -1963,18 +1961,14 @@ define([
}
if (this.btnFontColor.cmpEl) {
colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', this.btnFontColor.cmpEl).append(colorVal);
colorVal.css('background-color', this.btnFontColor.currentColor || 'transparent');
this.btnFontColor.setColor(this.btnFontColor.currentColor || 'transparent');
this.mnuFontColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-fontcolor')
});
}
if (this.btnParagraphColor.cmpEl) {
colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', this.btnParagraphColor.cmpEl).append(colorVal);
colorVal.css('background-color', this.btnParagraphColor.currentColor || 'transparent');
this.btnParagraphColor.setColor(this.btnParagraphColor.currentColor || 'transparent');
this.mnuParagraphColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-paracolor'),
transparent: true

19
apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
View file

@ -316,10 +316,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
var initNewColor = function(btn, picker_el) {
if (btn && btn.cmpEl) {
btn.currentColor = '#c0c0c0';
var colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', btn.cmpEl).append(colorVal);
colorVal.css('background-color', btn.currentColor);
btn.currentColor = 'c0c0c0';
btn.setColor( btn.currentColor);
var picker = new Common.UI.ThemeColorPalette({
el: $(picker_el)
});
@ -330,13 +328,14 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
picker.on('select', _.bind(me.onColorSelect, me));
return picker;
};
this.btnTextColor = new Common.UI.Button({
this.btnTextColor = new Common.UI.ButtonColored({
parentEl: $('#watermark-textcolor'),
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-fontcolor',
hint : this.textColor,
menu : new Common.UI.Menu({
cls: 'shifted-left',
additionalAlign: this.menuAddAlign,
items: [
{
id: 'watermark-auto-color',
@ -406,9 +405,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
clr_item.hasClass('selected') && clr_item.removeClass('selected');
this.isAutoColor = false;
var clr = (typeof(color) == 'object') ? color.color : color;
this.btnTextColor.currentColor = color;
$('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + clr);
this.btnTextColor.setColor( this.btnTextColor.currentColor);
},
updateThemeColors: function() {
@ -424,9 +422,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
!clr_item.hasClass('selected') && clr_item.addClass('selected');
this.isAutoColor = true;
var color = "000";
this.btnTextColor.currentColor = color;
$('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + color);
this.btnTextColor.currentColor = "000";
this.btnTextColor.setColor( this.btnTextColor.currentColor);
this.mnuTextColorPicker.clearSelection();
},
@ -613,7 +610,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
}
}
this.btnTextColor.currentColor = clr;
$('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + ((typeof(clr) == 'object') ? clr.color : clr));
this.btnTextColor.setColor( this.btnTextColor.currentColor);
}
val = props.get_Text();
val && this.cmbText.setValue(val);

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

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

6
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -1846,10 +1846,8 @@ define([
onSelectFontColor: function(picker, color) {
this._state.clrtext = this._state.clrtext_asccolor = undefined;
var clr = (typeof(color) == 'object') ? color.color : color;
this.toolbar.btnFontColor.currentColor = color;
$('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + clr);
this.toolbar.btnFontColor.setColor((typeof(color) == 'object') ? color.color : color);
this.toolbar.mnuFontColorPicker.currentColor = color;
if (this.api)
@ -2147,7 +2145,7 @@ define([
updateColors(this.toolbar.mnuFontColorPicker, 1);
if (this.toolbar.btnFontColor.currentColor===undefined) {
this.toolbar.btnFontColor.currentColor = this.toolbar.mnuFontColorPicker.currentColor.color || this.toolbar.mnuFontColorPicker.currentColor;
$('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + this.toolbar.btnFontColor.currentColor);
this.toolbar.btnFontColor.setColor(this.toolbar.btnFontColor.currentColor);
}
if (this._state.clrtext_asccolor!==undefined) {
this._state.clrtext = undefined;

6
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -334,7 +334,7 @@ define([
});
me.paragraphControls.push(me.btnSubscript);
me.btnFontColor = new Common.UI.Button({
me.btnFontColor = new Common.UI.ButtonColored({
id: 'id-toolbar-btn-fontcolor',
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-fontcolor',
@ -1316,9 +1316,7 @@ define([
// DataView and pickers
//
if (this.btnFontColor.cmpEl) {
var colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', this.btnFontColor.cmpEl).append(colorVal);
colorVal.css('background-color', this.btnFontColor.currentColor || 'transparent');
this.btnFontColor.setColor(this.btnFontColor.currentColor || 'transparent');
this.mnuFontColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-fontcolor')
});

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

@ -310,6 +310,7 @@ define([
toolbar.btnBackColor.on('click', _.bind(this.onBackColor, this));
toolbar.mnuTextColorPicker.on('select', _.bind(this.onTextColorSelect, this));
toolbar.mnuBackColorPicker.on('select', _.bind(this.onBackColorSelect, this));
$('#id-toolbar-menu-auto-fontcolor').on('click', _.bind(this.onAutoFontColor, this));
toolbar.btnBorders.on('click', _.bind(this.onBorders, this));
if (toolbar.btnBorders.rendered) {
toolbar.btnBorders.menu.on('item:click', _.bind(this.onBordersMenu, this));
@ -602,15 +603,13 @@ define([
onTextColorSelect: function(picker, color, fromBtn) {
this._state.clrtext_asccolor = this._state.clrtext = undefined;
var clr = (typeof(color) == 'object') ? color.color : color;
this.toolbar.btnTextColor.currentColor = color;
$('.btn-color-value-line', this.toolbar.btnTextColor.cmpEl).css('background-color', '#' + clr);
this.toolbar.btnTextColor.setColor((typeof(color) == 'object') ? (color.isAuto ? '000' : color.color) : color);
this.toolbar.mnuTextColorPicker.currentColor = color;
if (this.api) {
this.toolbar.btnTextColor.ischanged = (fromBtn!==true);
this.api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color));
this.api.asc_setCellTextColor(color.isAuto ? color.color : Common.Utils.ThemeColor.getRgbColor(color));
this.toolbar.btnTextColor.ischanged = false;
}
@ -624,8 +623,8 @@ define([
var clr = (typeof(color) == 'object') ? color.color : color;
this.toolbar.btnBackColor.currentColor = color;
$('.btn-color-value-line', this.toolbar.btnBackColor.cmpEl).css('background-color', clr == 'transparent' ? 'transparent' : '#' + clr);
this.toolbar.btnBackColor.setColor(this.toolbar.btnBackColor.currentColor);
this.toolbar.mnuBackColorPicker.currentColor = color;
if (this.api) {
this.toolbar.btnBackColor.ischanged = (fromBtn!==true);
@ -650,6 +649,25 @@ define([
this.toolbar.mnuBorderColorPicker.addNewColor();
},
onAutoFontColor: function(e) {
this._state.clrtext_asccolor = this._state.clrtext = undefined;
var color = new Asc.asc_CColor();
color.put_auto(true);
this.toolbar.btnTextColor.currentColor = {color: color, isAuto: true};
this.toolbar.btnTextColor.setColor('000');
this.toolbar.mnuTextColorPicker.clearSelection();
this.toolbar.mnuTextColorPicker.currentColor = {color: color, isAuto: true};
if (this.api) {
this.api.asc_setCellTextColor(color);
}
Common.NotificationCenter.trigger('edit:complete', this.toolbar, {restorefocus:true});
Common.component.Analytics.trackEvent('ToolBar', 'Text Color');
},
onBorders: function(btn) {
var menuItem;
@ -728,10 +746,11 @@ define([
},
onAutoBorderColor: function(e) {
var color = '#000';
$('#id-toolbar-mnu-item-border-color > a .menu-item-icon').css('border-color', color);
$('#id-toolbar-mnu-item-border-color > a .menu-item-icon').css('border-color', '#000');
this.toolbar.mnuBorderColor.onUnHoverItem();
this.toolbar.btnBorders.options.borderscolor = Common.Utils.ThemeColor.getRgbColor(color);
var color = new Asc.asc_CColor();
color.put_auto(true);
this.toolbar.btnBorders.options.borderscolor = 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');
@ -2164,32 +2183,43 @@ define([
if (!toolbar.btnTextColor.ischanged && !fontColorPicker.isDummy) {
color = fontobj.asc_getFontColor();
if (color) {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
} else {
clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
}
var type1 = typeof(clr),
type2 = typeof(this._state.clrtext);
if ( (type1 !== type2) || (type1=='object' &&
(clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
(type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
if (_.isObject(clr)) {
var isselected = false;
for (var i = 0; i < 10; i++) {
if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
fontColorPicker.select(clr, true);
isselected = true;
break;
}
if (color.get_auto()) {
if (this._state.clrtext !== 'auto') {
fontColorPicker.clearSelection();
var clr_item = this.toolbar.btnTextColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
!clr_item.hasClass('selected') && clr_item.addClass('selected');
this._state.clrtext = 'auto';
}
if (!isselected) fontColorPicker.clearSelection();
} else {
fontColorPicker.select(clr, true);
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
} else {
clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
var type1 = typeof(clr),
type2 = typeof(this._state.clrtext);
if ( (this._state.clrtext == 'auto') || (type1 !== type2) || (type1=='object' &&
(clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
(type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
var clr_item = this.toolbar.btnTextColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
clr_item.hasClass('selected') && clr_item.removeClass('selected');
if (_.isObject(clr)) {
var isselected = false;
for (var i = 0; i < 10; i++) {
if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
fontColorPicker.select(clr, true);
isselected = true;
break;
}
}
if (!isselected) fontColorPicker.clearSelection();
} else {
fontColorPicker.select(clr, true);
}
this._state.clrtext = clr;
}
}
this._state.clrtext = clr;
}
this._state.clrtext_asccolor = color;
}
@ -2311,32 +2341,43 @@ define([
if (!toolbar.btnTextColor.ischanged && !fontColorPicker.isDummy) {
color = xfs.asc_getFontColor();
if (color) {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
} else {
clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
}
var type1 = typeof(clr),
type2 = typeof(this._state.clrtext);
if ( (type1 !== type2) || (type1=='object' &&
(clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
(type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
if (_.isObject(clr)) {
var isselected = false;
for (var i = 0; i < 10; i++) {
if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
fontColorPicker.select(clr, true);
isselected = true;
break;
}
if (color.get_auto()) {
if (this._state.clrtext !== 'auto') {
fontColorPicker.clearSelection();
var clr_item = this.toolbar.btnTextColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
!clr_item.hasClass('selected') && clr_item.addClass('selected');
this._state.clrtext = 'auto';
}
if (!isselected) fontColorPicker.clearSelection();
} else {
fontColorPicker.select(clr, true);
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
} else {
clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
var type1 = typeof(clr),
type2 = typeof(this._state.clrtext);
if ( (this._state.clrtext == 'auto') || (type1 !== type2) || (type1=='object' &&
(clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
(type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
var clr_item = this.toolbar.btnTextColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
clr_item.hasClass('selected') && clr_item.removeClass('selected');
if (_.isObject(clr)) {
var isselected = false;
for (var i = 0; i < 10; i++) {
if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
fontColorPicker.select(clr, true);
isselected = true;
break;
}
}
if (!isselected) fontColorPicker.clearSelection();
} else {
fontColorPicker.select(clr, true);
}
this._state.clrtext = clr;
}
}
this._state.clrtext = clr;
}
this._state.clrtext_asccolor = color;
}
@ -2750,18 +2791,17 @@ define([
};
updateColors(this.toolbar.mnuTextColorPicker, Common.Utils.ThemeColor.getStandartColors()[1]);
if (this.toolbar.btnTextColor.currentColor === undefined) {
if (this.toolbar.btnTextColor.currentColor === undefined || !this.toolbar.btnTextColor.currentColor.isAuto) {
this.toolbar.btnTextColor.currentColor=Common.Utils.ThemeColor.getStandartColors()[1];
} else
this.toolbar.btnTextColor.currentColor = this.toolbar.mnuTextColorPicker.currentColor.color || this.toolbar.mnuTextColorPicker.currentColor;
$('.btn-color-value-line', this.toolbar.btnTextColor.cmpEl).css('background-color', '#' + this.toolbar.btnTextColor.currentColor);
this.toolbar.btnTextColor.setColor(this.toolbar.btnTextColor.currentColor);
}
updateColors(this.toolbar.mnuBackColorPicker, Common.Utils.ThemeColor.getStandartColors()[3]);
if (this.toolbar.btnBackColor.currentColor === undefined) {
this.toolbar.btnBackColor.currentColor=Common.Utils.ThemeColor.getStandartColors()[3];
} else
this.toolbar.btnBackColor.currentColor = this.toolbar.mnuBackColorPicker.currentColor.color || this.toolbar.mnuBackColorPicker.currentColor;
$('.btn-color-value-line', this.toolbar.btnBackColor.cmpEl).css('background-color', this.toolbar.btnBackColor.currentColor == 'transparent' ? 'transparent' : '#' + this.toolbar.btnBackColor.currentColor);
this.toolbar.btnBackColor.setColor(this.toolbar.btnBackColor.currentColor);
if (this._state.clrtext_asccolor!==undefined || this._state.clrshd_asccolor!==undefined) {
this._state.clrtext = undefined;

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

@ -111,8 +111,13 @@ define([
if (this.api) {
var new_borders = [],
bordersWidth = this.BorderType,
bordersColor = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color); // change when autocolor will be supported in sdk
bordersColor;
if (this.btnBorderColor.isAutoColor()) {
bordersColor = new Asc.asc_CColor();
bordersColor.put_auto(true);
} else {
bordersColor = Common.Utils.ThemeColor.getRgbColor(this.btnBorderColor.color);
}
if (btn.options.borderId == 'inner') {
new_borders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor);
new_borders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor);

13
apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
View file

@ -536,10 +536,8 @@ define([
var initNewColor = function(btn, picker_el) {
if (btn && btn.cmpEl) {
btn.currentColor = '#000000';
var colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', btn.cmpEl).append(colorVal);
colorVal.css('background-color', btn.currentColor);
btn.currentColor = '000000';
btn.setColor(btn.currentColor);
var picker = new Common.UI.ThemeColorPalette({
el: $(picker_el)
});
@ -552,7 +550,7 @@ define([
return picker;
};
this.btnTextColor = [];
this.btnTextColor.push(new Common.UI.Button({
this.btnTextColor.push(new Common.UI.ButtonColored({
parentEl: $('#id-dlg-h-textcolor'),
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-fontcolor',
@ -571,7 +569,7 @@ define([
this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[0], "#id-dlg-h-menu-fontcolor"));
this.headerControls.push(this.btnTextColor[0]);
this.btnTextColor.push(new Common.UI.Button({
this.btnTextColor.push(new Common.UI.ButtonColored({
parentEl: $('#id-dlg-f-textcolor'),
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-fontcolor',
@ -901,9 +899,8 @@ define([
},
onColorSelect: function(btn, picker, color) {
var clr = (typeof(color) == 'object') ? color.color : color;
btn.currentColor = color;
$('.btn-color-value-line', btn.cmpEl).css('background-color', '#' + clr);
btn.setColor(btn.currentColor);
picker.currentColor = color;
if (this.HFObject)
this.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color));

4
apps/spreadsheeteditor/main/app/view/Statusbar.js
View file

@ -340,10 +340,6 @@ define([
{caption: this.ungroupSheets, value: 'noselect'}
]
}).on('render:after', function(btn) {
var colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', btn.cmpEl).append(colorVal);
colorVal.css('background-color', btn.currentColor || 'transparent');
me.mnuTabColor = new Common.UI.ThemeColorPalette({
el: $('#id-tab-menu-color'),
transparent: true

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

@ -481,14 +481,21 @@ define([
});
me.mnuTextColorPicker = dummyCmp();
me.btnTextColor = new Common.UI.Button({
me.btnTextColor = new Common.UI.ButtonColored({
id : 'id-toolbar-btn-fontcolor',
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-fontcolor',
split : true,
lock : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect],
menu : new Common.UI.Menu({
cls: 'shifted-left',
items: [
{
id: 'id-toolbar-menu-auto-fontcolor',
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>')
},
{caption: '--'},
{ 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>') }
]
@ -496,7 +503,7 @@ define([
});
me.mnuBackColorPicker = dummyCmp();
me.btnBackColor = new Common.UI.Button({
me.btnBackColor = new Common.UI.ButtonColored({
id : 'id-toolbar-btn-fillparag',
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-paracolor',
@ -1868,11 +1875,6 @@ define([
})
]
}));
var colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', this.btnBorders.cmpEl).append(colorVal);
colorVal.css('background-color', this.btnBorders.currentColor || 'transparent');
this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-bordercolor')
});
@ -1936,18 +1938,13 @@ define([
// DataView and pickers
//
if (this.btnTextColor && this.btnTextColor.cmpEl) {
var colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', this.btnTextColor.cmpEl).append(colorVal);
colorVal.css('background-color', this.btnTextColor.currentColor || 'transparent');
this.btnTextColor.setColor(this.btnTextColor.currentColor || 'transparent');
this.mnuTextColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-fontcolor')
});
}
if (this.btnBackColor && this.btnBackColor.cmpEl) {
var colorVal = $('<div class="btn-color-value-line"></div>');
$('button:first-child', this.btnBackColor.cmpEl).append(colorVal);
colorVal.css('background-color', this.btnBackColor.currentColor || 'transparent');
this.btnBackColor.setColor(this.btnBackColor.currentColor || 'transparent');
this.mnuBackColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-paracolor'),
transparent: true

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

@ -135,7 +135,10 @@
}
}
#id-toolbar-menu-auto-bordercolor > a.selected {
#id-toolbar-menu-auto-bordercolor > a.selected,
#id-toolbar-menu-auto-bordercolor > a:hover,
#id-toolbar-menu-auto-fontcolor > a.selected,
#id-toolbar-menu-auto-fontcolor > a:hover {
span {
outline: 1px solid @black;
border: 1px solid @body-bg;