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

Refactoring color buttons

Browse source
This commit is contained in:
Julia Radzhabova 2021-01-21 22:48:27 +03:00
parent 25fb714042
commit c295698704
14 changed files with 69 additions and 82 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')
});

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

@ -602,10 +602,8 @@ 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(this.toolbar.btnTextColor.currentColor);
this.toolbar.mnuTextColorPicker.currentColor = color;
if (this.api) {
@ -624,8 +622,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);
@ -2754,14 +2752,14 @@ define([
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;

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

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

@ -481,7 +481,7 @@ 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',
@ -496,7 +496,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 +1868,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 +1931,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