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

Merge pull request #973 from ONLYOFFICE/feature/color-palette-focus

Browse source 
Feature/color palette focus
This commit is contained in:
Julia Radzhabova 2021-07-12 13:59:52 +03:00 committed by GitHub
parent b1534675c4 779f09b295
commit 79376446c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 639 additions and 486 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -39,7 +39,191 @@ define([
], function () {
'use strict';
Common.UI.ColorButton = Common.UI.Button.extend(_.extend({
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');
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);
},
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,
colors: colors,
parentButton: this
});
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;
},
setPicker: function(picker) {
this.colorPicker = picker;
},
getMenu: function(options) {
if (typeof this.menu !== 'object') {
options = options || this.options;
var height = options.paletteHeight || 240,
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(auto).concat([
{ template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + 'px; margin: 10px;"></div>') },
{
id: id + '-color-new',
template: _.template('<a tabindex="-1" type="menuitem" style="">' + this.textNewColor + '</a>')
}
])
});
this.colorPicker && (this.colorPicker.parentButton = menu);
var me = this;
menu.on('keydown:before', _.bind(this.onBeforeKeyDown, this));
menu.on('show:after', function(menu) {
me.colorPicker && _.delay(function() {
me.colorPicker.showLastSelected();
!(options.additionalItems || options.auto) && me.colorPicker.focus();
}, 10);
}).on('hide:after', function() {
if (me.options.takeFocusOnClose) {
setTimeout(function(){me.focus();}, 1);
}
});
return menu;
}
return this.menu;
},
setMenu: function (m) {
m = m || this.getMenu();
Common.UI.Button.prototype.setMenu.call(this, m);
this.getPicker(this.options.color, this.options.colors);
},
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;
this.color = color;
if (this.colorEl) {
this.colorEl.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
this.colorEl.toggleClass('bordered', color=='transparent');
}
},
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');
},
onAutoColorSelect: function() {
this.setColor('auto');
this.setAutoColor(true);
this.colorPicker && this.colorPicker.clearSelection();
this.trigger('auto:select', this, this.autocolor);
},
addNewColor: function() {
this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color);
},
onBeforeKeyDown: function(menu, e) {
if ((e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.SPACE) && !this.isMenuOpen()) {
$('button', this.cmpEl).click();
return false;
}
if (e.keyCode == Common.UI.Keys.RETURN) {
var li = $(e.target).closest('li');
if (li.length>0) {
e.preventDefault();
e.stopPropagation();
li.click();
}
Common.UI.Menu.Manager.hideAll();
} else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) {
var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a');
if (!$items.length) return;
var index = $items.index($items.filter(':focus')),
me = this,
pickerIndex = $items.length-1 ;
if (e.keyCode == Common.UI.Keys.DOWN && (index==pickerIndex-1 || pickerIndex==0) || e.keyCode == Common.UI.Keys.UP && index==pickerIndex) {
e.preventDefault();
e.stopPropagation();
_.delay(function() {
me.focusInner(e);
}, 10);
}
}
},
isMenuOpen: function() {
return this.cmpEl.hasClass('open');
},
focusInner: function(e) {
if (!this.colorPicker) return;
this.colorPicker.focus(e.keyCode == Common.UI.Keys.DOWN ? 'first' : 'last');
},
focusOuter: function(e) {
if (!this.menu) return;
var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', this.menu.$el).find('> a');
if (!$items.length) return;
$items.eq(e.keyCode == Common.UI.Keys.UP ? $items.length-2 : $items.length-1).focus();
},
textNewColor: 'Add New Custom Color',
textAutoColor: 'Automatic'
}, Common.UI.ButtonColored || {}));
Common.UI.ColorButton = Common.UI.ButtonColored.extend(_.extend({
options : {
id : null,
hint : false,
@ -90,12 +274,6 @@ define([
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;
@ -106,105 +284,9 @@ define([
span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+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,
colors: colors
});
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;
},
getMenu: function(options) {
if (typeof this.menu !== 'object') {
options = options || this.options;
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(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>') }
])
});
return menu;
}
return this.menu;
},
setMenu: function (m) {
m = m || this.getMenu();
Common.UI.Button.prototype.setMenu.call(this, m);
this.getPicker(this.options.color, this.options.colors);
},
addNewColor: function() {
this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.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 || {}));
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');
}
focus: function() {
$('button', this.cmpEl).focus();
}
}, Common.UI.ButtonColored || {}));
}, Common.UI.ColorButton || {}));
});

5
apps/common/main/lib/component/ComboBorderSize.js
View file

@ -122,6 +122,7 @@ define([
render : function(parentEl) {
Common.UI.ComboBox.prototype.render.call(this, parentEl);
this._formControl = this.cmpEl.find('.form-control');
return this;
},
@ -172,6 +173,10 @@ define([
}
},
focus: function() {
this._formControl && this._formControl.focus();
},
txtNoBorders: 'No Borders'
}, Common.UI.ComboBorderSize || {}));

242
apps/common/main/lib/component/ThemeColorPalette.js
View file

@ -55,26 +55,28 @@ define([
effects: 5,
allowReselect: true,
transparent: false,
value: '000000'
value: '000000',
enableKeyEvents: true,
keyMoveDirection: 'both' // 'vertical', 'horizontal'
},
template :
_.template(
'<div style="padding: 8px 12px 12px;">' +
'<% var me = this; %>' +
'<% var me = this; var idx = 0; %>' +
'<% $(colors).each(function(num, item) { %>' +
'<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
'<% } else if (me.isSeparator(item)) { %> </div><div class="divider" style="width:100%;float:left;"></div><div style="padding: 12px;">' +
'<% } else if (me.isColor(item)) { %> ' +
'<a class="palette-color color-<%=item%>" style="background:#<%=item%>" hidefocus="on">' +
'<a class="palette-color color-<%=item%>" style="background:#<%=item%>" idx="<%=idx++%>">' +
'<em><span style="background:#<%=item%>;" unselectable="on">&#160;</span></em>' +
'</a>' +
'<% } else if (me.isTransparent(item)) { %>' +
'<a class="color-<%=item%>" hidefocus="on">' +
'<a class="color-<%=item%>" idx="<%=idx++%>">' +
'<em><span unselectable="on">&#160;</span></em>' +
'</a>' +
'<% } else if (me.isEffect(item)) { %>' +
'<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" hidefocus="on">' +
'<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" idx="<%=idx++%>">' +
'<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' +
'</a>' +
'<% } else if (me.isCaption(item)) { %>' +
@ -85,7 +87,7 @@ define([
'<% if (me.options.dynamiccolors!==undefined) { %>' +
'<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div><div style="padding: 12px;">' +
'<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
'<a class="color-dynamic-<%=i%> dynamic-empty-color" style="background:#ffffff" color="" hidefocus="on">' +
'<a class="color-dynamic-<%=i%> dynamic-empty-color" style="background:#ffffff" color="" idx="<%=idx++%>">' +
'<em><span unselectable="on">&#160;</span></em></a>' +
'<% } %>' +
'<% } %>' +
@ -101,6 +103,18 @@ define([
el = me.$el || $(this.el);
this.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent);
this.enableKeyEvents= me.options.enableKeyEvents;
this.tabindex = me.options.tabindex || 0;
this.parentButton = me.options.parentButton;
this.lastSelectedIdx = -1;
me.colorItems = [];
if (me.options.keyMoveDirection=='vertical')
me.moveKeys = [Common.UI.Keys.UP, Common.UI.Keys.DOWN];
else if (me.options.keyMoveDirection=='horizontal')
me.moveKeys = [Common.UI.Keys.LEFT, Common.UI.Keys.RIGHT];
else
me.moveKeys = [Common.UI.Keys.UP, Common.UI.Keys.DOWN, Common.UI.Keys.LEFT, Common.UI.Keys.RIGHT];
el.addClass('theme-colorpalette');
this.render();
@ -117,6 +131,12 @@ define([
render: function () {
this.$el.html(this.template({colors: this.colors}));
var me = this;
this.moveKeys && this.$el.find('a').each(function(num, item) {
me.colorItems.push({el: item, index: num});
});
this.attachKeyEvents();
return this;
},
@ -146,7 +166,7 @@ define([
updateCustomColors: function() {
var el = this.$el || $(this.el);
if (el) {
var selected = el.find('a.' + this.selectedCls),
var selected = (this.lastSelectedIdx>=0) ? $(this.colorItems[this.lastSelectedIdx].el) : el.find('a.' + this.selectedCls),
color = (selected.length>0 && /color-dynamic/.test(selected[0].className)) ? selected.attr('color') : undefined;
if (color) { // custom color was selected
color = color.toUpperCase();
@ -165,6 +185,7 @@ define([
});
if (colors[i] == color) {
colorEl.addClass(this.selectedCls);
this.lastSelectedIdx = parseInt(colorEl.attr('idx'));
color = undefined; //select only first found color
}
}
@ -179,42 +200,55 @@ define([
if (target.length==0) return;
if (target.hasClass('color-transparent') ) {
$(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls);
me.clearSelection(true);
target.addClass(me.selectedCls);
me.value = 'transparent';
me.trigger('select', me, 'transparent');
if (!e.suppressEvent) {
me.lastSelectedIdx = parseInt(target.attr('idx'));
me.value = 'transparent';
me.trigger('select', me, 'transparent');
}
} else if ( !(target[0].className.search('color-dynamic')<0) ) {
if (!/dynamic-empty-color/.test(target[0].className)) {
$(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls);
me.clearSelection(true);
target.addClass(me.selectedCls);
color = target.attr('color');
if (color) me.trigger('select', me, color);
me.value = color.toUpperCase();
if (!e.suppressEvent) {
me.lastSelectedIdx = parseInt(target.attr('idx'));
color = target.attr('color');
me.trigger('select', me, color);
me.value = color.toUpperCase();
}
} else {
setTimeout(function(){
me.addNewColor();
}, 10);
if (e.suppressEvent) {
me.clearSelection(true);
target.addClass(me.selectedCls);
} else
setTimeout(function(){
me.addNewColor();
}, 10);
}
} else {
if (!/^[a-fA-F0-9]{6}$/.test(me.value) || _.indexOf(me.colors, me.value)<0 )
me.value = false;
$(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls);
me.clearSelection(true);
target.addClass(me.selectedCls);
color = target[0].className.match(me.colorRe)[1];
if ( target.hasClass('palette-color-effect') ) {
var effectId = parseInt(target.attr('effectid'));
if (color) {
if (color && !e.suppressEvent) {
me.value = color.toUpperCase();
me.trigger('select', me, {color: color, effectId: effectId});
me.lastSelectedIdx = parseInt(target.attr('idx'));
}
} else {
if (/#?[a-fA-F0-9]{6}/.test(color)) {
color = /#?([a-fA-F0-9]{6})/.exec(color)[1].toUpperCase();
me.value = color;
me.trigger('select', me, color);
if (color && !e.suppressEvent) {
me.value = color;
me.trigger('select', me, color);
me.lastSelectedIdx = parseInt(target.attr('idx'));
}
}
}
}
@ -225,8 +259,7 @@ define([
color = /#?([a-fA-F0-9]{6})/.exec(color);
if (color) {
this.saveCustomColor(color[1]);
el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
this.clearSelection(true);
var child = el.find('.dynamic-empty-color');
if (child.length==0) {
@ -273,7 +306,7 @@ define([
select: function(color, suppressEvent) {
var el = this.$el || $(this.el);
el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
this.clearSelection();
if (typeof(color) == 'object' ) {
var effectEl;
@ -281,6 +314,7 @@ define([
effectEl = el.find('a[effectid="'+color.effectId+'"]').first();
if (effectEl.length>0) {
effectEl.addClass(this.selectedCls);
this.lastSelectedIdx = parseInt(effectEl.attr('idx'));
this.value = effectEl[0].className.match(this.colorRe)[1].toUpperCase();
} else
this.value = false;
@ -288,6 +322,7 @@ define([
effectEl = el.find('a[effectvalue="'+color.effectValue+'"].color-' + color.color.toUpperCase()).first();
if (effectEl.length>0) {
effectEl.addClass(this.selectedCls);
this.lastSelectedIdx = parseInt(effectEl.attr('idx'));
this.value = effectEl[0].className.match(this.colorRe)[1].toUpperCase();
} else
this.value = false;
@ -302,8 +337,9 @@ define([
if (_.indexOf(this.colors, this.value)<0) this.value = false;
if (color != this.value || this.options.allowReselect) {
(color == 'transparent') ? el.find('a.color-transparent').addClass(this.selectedCls) : el.find('a.palette-color.color-' + color).first().addClass(this.selectedCls);
var co = (color == 'transparent') ? el.find('a.color-transparent').addClass(this.selectedCls) : el.find('a.palette-color.color-' + color).first().addClass(this.selectedCls);
this.value = color;
this.lastSelectedIdx = parseInt(co.attr('idx'));
if (suppressEvent !== true) {
this.fireEvent('select', this, color);
}
@ -314,6 +350,7 @@ define([
co = el.find('a[color="'+color+'"]').first();
if (co.length>0) {
co.addClass(this.selectedCls);
this.lastSelectedIdx = parseInt(co.attr('idx'));
this.value = color.toUpperCase();
}
}
@ -322,7 +359,7 @@ define([
selectByRGB: function(rgb, suppressEvent) {
var el = this.$el || $(this.el);
el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
this.clearSelection(true);
var color = (typeof(rgb) == 'object') ? rgb.color : rgb;
if (/#?[a-fA-F0-9]{6}/.test(color)) {
@ -338,6 +375,7 @@ define([
co = el.find('a[color="'+color+'"]').first();
if (co.length>0) {
co.addClass(this.selectedCls);
this.lastSelectedIdx = parseInt(co.attr('idx'));
this.value = color;
}
if (suppressEvent !== true) {
@ -417,7 +455,28 @@ define([
clearSelection: function(suppressEvent) {
this.$el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
this.value = undefined;
if (!suppressEvent) {
this.value = undefined;
this.lastSelectedIdx = -1;
}
},
showLastSelected: function() {
this.selectByIndex(this.lastSelectedIdx, true);
},
getSelectedColor: function() {
var el = this.$el || $(this.el);
var idx = el.find('a.' + this.selectedCls).attr('idx');
return (idx!==undefined) ? this.colorItems[parseInt(idx)] : null;
},
selectByIndex: function(index, suppressEvent) {
this.clearSelection(true);
if (index>=0 && index<this.colorItems.length) {
this.handleClick({target: this.colorItems[index].el, suppressEvent: suppressEvent});
}
},
generateColorData: function(themecolors, effects, standardcolors, transparent) {
@ -449,6 +508,133 @@ define([
return arr;
},
onKeyDown: function (e, data) {
if (data===undefined) data = e;
if (_.indexOf(this.moveKeys, data.keyCode)>-1 || data.keyCode==Common.UI.Keys.RETURN) {
data.preventDefault();
data.stopPropagation();
var rec = this.getSelectedColor();
if (data.keyCode==Common.UI.Keys.RETURN) {
rec && this.selectByIndex(rec.index);
if (this.parentButton && this.parentButton.menu)
this.parentButton.menu.hide();
} else {
var idx = rec ? rec.index : -1;
if (idx<0) {
idx = 0;
} else if (this.options.keyMoveDirection == 'both') {
if (this._layoutParams === undefined)
this.fillIndexesArray();
var topIdx = this.colorItems[idx].topIdx,
leftIdx = this.colorItems[idx].leftIdx;
idx = undefined;
if (data.keyCode==Common.UI.Keys.LEFT) {
while (idx===undefined) {
leftIdx--;
if (leftIdx<0) {
leftIdx = this._layoutParams.columns-1;
}
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else if (data.keyCode==Common.UI.Keys.RIGHT) {
while (idx===undefined) {
leftIdx++;
if (leftIdx>this._layoutParams.columns-1) leftIdx = 0;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else if (data.keyCode==Common.UI.Keys.UP) {
if (topIdx==0 && this.parentButton) {
this.clearSelection(true);
this.parentButton.focusOuter(data);
} else
while (idx===undefined) {
topIdx--;
if (topIdx<0) topIdx = this._layoutParams.rows-1;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else {
if (topIdx==this._layoutParams.rows-1 && this.parentButton) {
this.clearSelection(true);
this.parentButton.focusOuter(data);
} else
while (idx===undefined) {
topIdx++;
if (topIdx>this._layoutParams.rows-1) topIdx = 0;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
}
} else {
idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT)
? Math.max(0, idx-1)
: Math.min(this.colorItems.length - 1, idx + 1) ;
}
if (idx !== undefined && idx>=0) {
this._fromKeyDown = true;
this.selectByIndex(idx, true);
this._fromKeyDown = false;
}
}
}
},
fillIndexesArray: function() {
if (this.colorItems.length<=0) return;
this._layoutParams = {
itemsIndexes: [],
columns: 0,
rows: 0
};
var el = $(this.colorItems[0].el),
itemW = el.outerWidth() + parseInt(el.css('margin-left')) + parseInt(el.css('margin-right')),
offsetLeft = this.$el.offset().left,
offsetTop = el.offset().top,
prevtop = -1, topIdx = 0, leftIdx = 0;
for (var i=0; i<this.colorItems.length; i++) {
var top = $(this.colorItems[i].el).offset().top - offsetTop;
leftIdx = Math.floor(($(this.colorItems[i].el).offset().left - offsetLeft)/itemW);
if (top>prevtop) {
prevtop = top;
this._layoutParams.itemsIndexes.push([]);
topIdx = this._layoutParams.itemsIndexes.length-1;
}
this._layoutParams.itemsIndexes[topIdx][leftIdx] = i;
this.colorItems[i].topIdx = topIdx;
this.colorItems[i].leftIdx = leftIdx;
if (this._layoutParams.columns<leftIdx) this._layoutParams.columns = leftIdx;
}
this._layoutParams.rows = this._layoutParams.itemsIndexes.length;
this._layoutParams.columns++;
},
attachKeyEvents: function() {
if (this.enableKeyEvents) {
var el = this.$el || $(this.el);
el.addClass('canfocused');
el.attr('tabindex', this.tabindex.toString());
el.on('keydown', _.bind(this.onKeyDown, this));
}
},
focus: function(index) {
var el = this.$el || $(this.el);
el && el.focus();
if (typeof index == 'string') {
if (index == 'first') {
this.selectByIndex(0, true);
} else if (index == 'last') {
if (this._layoutParams === undefined)
this.fillIndexesArray();
this.selectByIndex(this._layoutParams.itemsIndexes[this._layoutParams.rows-1][0], true);
}
} else if (index !== undefined)
this.selectByIndex(index, true);
},
textThemeColors : 'Theme Colors',
textStandartColors : 'Standart Colors'
}, Common.UI.ThemeColorPalette || {}));

6
apps/common/main/lib/view/ListSettingsDialog.js
View file

@ -292,7 +292,9 @@ define([
parentEl: $window.find('#id-dlg-list-color'),
style: "width:45px;",
additionalAlign: this.menuAddAlign,
color: this.color
color: this.color,
cls: 'move-focus',
takeFocusOnClose: true
});
this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
this.colors = this.btnColor.getPicker();
@ -321,7 +323,7 @@ define([
},
getFocusedComponents: function() {
return [this.cmbNumFormat, this.cmbBulletFormat, this.spnSize, this.spnStart];
return [this.cmbNumFormat, this.cmbBulletFormat, this.spnSize, this.spnStart, this.btnColor];
},
afterRender: function() {

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

@ -679,6 +679,13 @@
.caret {
}
}
&:not(.disabled) {
&:focus, .btn-group.open &, .btn-group:active & {
border-color: @border-control-focus-ie;
border-color: @border-control-focus;
}
}
}
// for color button auto color
@ -739,6 +746,11 @@
width: 28px;
height: 28px;
}
&:focus:not(.disabled) {
box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-control-focus-ie;
box-shadow: inset 0 0 0 @scaled-one-px-value @border-control-focus;
}
}
.btn-text-default {

2
apps/common/main/resources/less/theme-colorpalette.less
View file

@ -29,7 +29,7 @@
border: @scaled-one-px-value solid @border-color-shading;
}
&:hover, &.selected {
&:hover, &:focus, &.selected {
border-color: @icon-normal-ie;
border-color: @icon-normal;
em span {

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

@ -90,7 +90,6 @@ define([
this.addListeners({
'FormsTab': {
'forms:insert': this.onControlsSelect,
'forms:new-color': this.onNewControlsColor,
'forms:clear': this.onClearClick,
'forms:no-color': this.onNoControlsColor,
'forms:select-color': this.onSelectControlsColor,
@ -206,10 +205,6 @@ define([
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
onNewControlsColor: function() {
this.view.mnuFormsColorPicker.addNewColor();
},
onNoControlsColor: function(item) {
if (!item.isChecked())
this.api.asc_SetSpecialFormsHighlightColor(201, 200, 255);

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

@ -310,14 +310,12 @@ define([
toolbar.mnuMultiChangeLevel.menu.on('item:click', _.bind(this.onChangeLevelClick, this, 2));
toolbar.btnHighlightColor.on('click', _.bind(this.onBtnHighlightColor, this));
toolbar.btnFontColor.on('click', _.bind(this.onBtnFontColor, this));
toolbar.btnFontColor.on('color:select', _.bind(this.onSelectFontColor, this));
toolbar.btnFontColor.on('auto:select', _.bind(this.onAutoFontColor, this));
toolbar.btnParagraphColor.on('click', _.bind(this.onBtnParagraphColor, this));
toolbar.btnParagraphColor.on('color:select', _.bind(this.onParagraphColorPickerSelect, this));
toolbar.mnuHighlightColorPicker.on('select', _.bind(this.onSelectHighlightColor, this));
toolbar.mnuFontColorPicker.on('select', _.bind(this.onSelectFontColor, this));
toolbar.mnuParagraphColorPicker.on('select', _.bind(this.onParagraphColorPickerSelect, this));
toolbar.mnuHighlightTransparent.on('click', _.bind(this.onHighlightTransparentClick, this));
$('#id-toolbar-menu-auto-fontcolor').on('click', _.bind(this.onAutoFontColor, this));
$('#id-toolbar-menu-new-fontcolor').on('click', _.bind(this.onNewFontColor, this));
$('#id-toolbar-menu-new-paracolor').on('click', _.bind(this.onNewParagraphColor, this));
toolbar.mnuLineSpace.on('item:toggle', _.bind(this.onLineSpaceToggle, this));
toolbar.mnuNonPrinting.on('item:toggle', _.bind(this.onMenuNonPrintingToggle, this));
toolbar.btnShowHidenChars.on('toggle', _.bind(this.onNonPrintingToggle, this));
@ -2437,10 +2435,6 @@ define([
return out_value;
},
onNewFontColor: function(picker, color) {
this.toolbar.mnuFontColorPicker.addNewColor();
},
onAutoFontColor: function(e) {
this._state.clrtext = this._state.clrtext_asccolor = undefined;
@ -2449,21 +2443,14 @@ define([
this.api.put_TextColor(color);
this.toolbar.btnFontColor.currentColor = {color: color, isAuto: true};
this.toolbar.btnFontColor.setColor('000');
this.toolbar.mnuFontColorPicker.clearSelection();
this.toolbar.mnuFontColorPicker.currentColor = {color: color, isAuto: true};
},
onNewParagraphColor: function(picker, color) {
this.toolbar.mnuParagraphColorPicker.addNewColor();
},
onSelectHighlightColor: function(picker, color) {
this._setMarkerColor(color, 'menu');
},
onSelectFontColor: function(picker, color) {
onSelectFontColor: function(btn, color) {
this._state.clrtext = this._state.clrtext_asccolor = undefined;
this.toolbar.btnFontColor.currentColor = color;
@ -2476,7 +2463,7 @@ define([
Common.component.Analytics.trackEvent('ToolBar', 'Text Color');
},
onParagraphColorPickerSelect: function(picker, color) {
onParagraphColorPickerSelect: function(btn, color) {
this._state.clrback = this._state.clrshd_asccolor = undefined;
this.toolbar.btnParagraphColor.currentColor = color;
@ -2514,9 +2501,6 @@ define([
onHighlightTransparentClick: function(item, e) {
this._setMarkerColor('transparent', 'menu');
item.setChecked(true, true);
this.toolbar.btnHighlightColor.currentColor = 'transparent';
this.toolbar.btnHighlightColor.setColor(this.toolbar.btnHighlightColor.currentColor);
},
onParagraphColor: function(shd) {
@ -2562,9 +2546,8 @@ define([
onApiTextColor: function(color) {
if (color.get_auto()) {
if (this._state.clrtext !== 'auto') {
this.toolbar.btnFontColor.setAutoColor(true);
this.toolbar.mnuFontColorPicker.clearSelection();
var clr_item = this.toolbar.btnFontColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
!clr_item.hasClass('selected') && clr_item.addClass('selected');
this._state.clrtext = 'auto';
}
} else {
@ -2583,8 +2566,7 @@ define([
(clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
(type1!='object' && this._state.clrtext.indexOf(clr)<0 )) {
var clr_item = this.toolbar.btnFontColor.menu.$el.find('#id-toolbar-menu-auto-fontcolor > a');
clr_item.hasClass('selected') && clr_item.removeClass('selected');
this.toolbar.btnFontColor.setAutoColor(false);
if ( typeof(clr) == 'object' ) {
var isselected = false;
for (var i=0; i<10; i++) {
@ -2983,7 +2965,8 @@ define([
var me = this;
if (h === 'menu') {
me.toolbar.mnuHighlightTransparent.setChecked(false);
me._state.clrhighlight = undefined;
me.onApiHighlightColor();
me.toolbar.btnHighlightColor.currentColor = strcolor;
me.toolbar.btnHighlightColor.setColor(me.toolbar.btnHighlightColor.currentColor);

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

@ -141,7 +141,9 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
'33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
'993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
],
paletteHeight: 94
paletteHeight: 94,
cls: 'move-focus',
takeFocusOnClose: true
});
this.colors = this.btnColor.getPicker();
@ -357,7 +359,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
getFocusedComponents: function() {
return [
this.txtName, this.txtTag, this.txtPlaceholder, this.cmbShow, this.btnApplyAll, // 0 tab
this.txtName, this.txtTag, this.txtPlaceholder, this.cmbShow, this.btnColor, this.btnApplyAll, // 0 tab
this.chLockDelete , this.chLockEdit, // 1 tab
this.list, // 2 tab
this.txtDate, this.listFormats, this.cmbLang // 3 tab

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

@ -112,6 +112,7 @@ define([
spacingMode: false
});
this._btnsBorderPosition = [];
_.each([
[c_tableBorder.BORDER_HORIZONTAL_TOP, 't', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-top', '00'],
[c_tableBorder.BORDER_HORIZONTAL_CENTER, 'm', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-inner', '01'],
@ -134,6 +135,7 @@ define([
_btn.on('click', function(btn) {
me._ApplyBorderPreset(btn.options.strId);
});
me._btnsBorderPosition.push( _btn );
}, this);
var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt);
@ -164,7 +166,9 @@ define([
parentEl: $('#drop-advanced-button-bordercolor'),
additionalAlign: this.menuAddAlign,
color: 'auto',
auto: true
auto: true,
cls: 'move-focus',
takeFocusOnClose: true
});
this.btnBorderColor.on('color:select', _.bind(function(btn, color) {
this.tableStyler.setVirtualBorderColor((typeof(color) == 'object') ? color.color : color);
@ -177,7 +181,9 @@ define([
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#drop-advanced-button-color'),
additionalAlign: this.menuAddAlign,
transparent: true
transparent: true,
cls: 'move-focus',
takeFocusOnClose: true
});
this.btnBackColor.on('color:select', _.bind(function(btn, color) {
var clr, border;
@ -720,8 +726,9 @@ define([
return [
this.cmbWidth, this.spnWidth, this.cmbHeight, this.spnHeight, this.cmbHAlign, this.cmbHRelative, this.spnX, this.cmbVAlign, this.cmbVRelative, this.spnY, this.chMove, // 0 tab
this.cmbFonts, this.spnRowHeight, this.numDistance, // 1 tab
this.cmbBorderSize, this.btnBorderColor].concat(this._btnsBorderPosition).concat([this.btnBackColor, // 2 tab
this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight // 3 tab
];
]);
},
onCategoryClick: function(btn, index) {
@ -729,12 +736,20 @@ define([
var me = this;
setTimeout(function(){
if (index==0) {
me.cmbWidth.focus();
} else if (index==1) {
me.cmbFonts.focus();
} else if (index==3)
me.spnMarginTop.focus();
switch (index) {
case 0:
me.cmbWidth.focus();
break;
case 1:
me.cmbFonts.focus();
break;
case 2:
me.cmbBorderSize.focus();
break;
case 3:
me.spnMarginTop.focus();
break;
}
}, 100);
},

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

@ -108,18 +108,12 @@ define([
me.fireEvent('forms:clear');
});
if (this.mnuFormsColorPicker) {
$('#id-toolbar-menu-new-form-color').on('click', function (b, e) {
me.fireEvent('forms:new-color');
this.btnHighlight.on('color:select', function(btn, color) {
me.fireEvent('forms:select-color', [color]);
});
this.mnuNoFormsColor.on('click', function (item) {
me.fireEvent('forms:no-color', [item]);
});
this.mnuFormsColorPicker.on('select', function(picker, color) {
me.fireEvent('forms:select-color', [color]);
});
this.btnHighlight.menu.on('show:after', function(picker, color) {
me.fireEvent('forms:open-color', [color]);
});
}
this.btnPrevForm && this.btnPrevForm.on('click', function (b, e) {
me.fireEvent('forms:goto', ['prev']);
@ -222,7 +216,20 @@ define([
iconCls : 'toolbar__icon btn-highlight',
caption : this.textHighlight,
menu : true,
disabled: true
disabled: true,
additionalItems: [ this.mnuNoFormsColor = new Common.UI.MenuItem({
id: 'id-toolbar-menu-no-highlight-form',
caption: this.textNoHighlight,
checkable: true,
style: 'padding-left: 20px;'
}),
{caption: '--'}],
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', 'C9C8FF', 'CC99FF', 'FFFFFF'
],
paletteHeight: 94
});
this.paragraphControls.push(this.btnHighlight);
}
@ -267,28 +274,9 @@ define([
})).then(function(){
if (config.isEdit && config.canFeatureContentControl) {
if (config.canEditContentControl) {
me.btnHighlight.setMenu(new Common.UI.Menu({
items: [
me.mnuNoFormsColor = new Common.UI.MenuItem({
id: 'id-toolbar-menu-no-highlight-form',
caption: me.textNoHighlight,
checkable: true,
checked: me.btnHighlight.currentColor === null
}),
{caption: '--'},
{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'),
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'
],
value: me.btnHighlight.currentColor
});
me.btnHighlight.setMenu();
me.mnuFormsColorPicker = me.btnHighlight.getPicker();
me.mnuNoFormsColor.setChecked(me.btnHighlight.currentColor === null);
me.btnHighlight.setColor(me.btnHighlight.currentColor || 'transparent');
} else {
me.btnHighlight.cmpEl.parents('.group').hide().prev('.separator').hide();
@ -380,7 +368,6 @@ define([
tipImageField: 'Insert image',
tipViewForm: 'View form',
textNoHighlight: 'No highlighting',
textNewColor: 'Add New Custom Color',
textClear: 'Clear Fields',
capBtnPrev: 'Previous Field',
capBtnNext: 'Next Field',

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

@ -171,7 +171,9 @@ define([
style: 'padding-left: 20px;'
},
{caption: '--'}],
additionalAlign: this.menuAddAlign
additionalAlign: this.menuAddAlign,
cls: 'move-focus',
takeFocusOnClose: true
});
this.btnColor.on('color:select', _.bind(this.onColorsSelect, this));
this.btnColor.menu.items[0].on('toggle', _.bind(this.onLikeTextColor, this));
@ -342,7 +344,7 @@ define([
},
getFocusedComponents: function() {
return [this.btnEdit, this.cmbFormat, this.cmbAlign, this.cmbSize, this.levelsList];
return [this.btnEdit, this.cmbFormat, this.cmbAlign, this.cmbSize, this.btnColor, this.levelsList];
},
getDefaultFocusableComponent: function () {

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

@ -366,7 +366,8 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.cmbBorderSize = new Common.UI.ComboBorderSize({
el: $('#paragraphadv-combo-border-size'),
style: "width: 93px;"
style: "width: 93px;",
takeFocusOnClose: true
});
var rec = this.cmbBorderSize.store.at(2);
this.BorderSize = {ptValue: rec.get('value'), pxValue: rec.get('pxValue')};
@ -377,7 +378,9 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
parentEl: $('#paragraphadv-border-color-btn'),
additionalAlign: this.menuAddAlign,
color: 'auto',
auto: true
auto: true,
cls: 'move-focus',
takeFocusOnClose: true
});
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
@ -420,7 +423,9 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#paragraphadv-back-color-btn'),
transparent: true,
additionalAlign: this.menuAddAlign
additionalAlign: this.menuAddAlign,
cls: 'move-focus',
takeFocusOnClose: true
});
this.colorsBack = this.btnBackColor.getPicker();
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
@ -682,10 +687,11 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.cmbTextAlignment, this.cmbOutlinelevel, this.numIndentsLeft, this.numIndentsRight, this.cmbSpecial, this.numSpecialBy,
this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, this.chAddInterval, // 0 tab
this.chBreakBefore, this.chKeepLines, this.chOrphan, this.chKeepNext, this.chLineNumbers, // 1 tab
this.cmbBorderSize, this.btnBorderColor].concat(this._btnsBorderPosition).concat([this.btnBackColor, // 2 tab
this.chStrike, this.chSubscript, this.chDoubleStrike, this.chSmallCaps, this.chSuperscript, this.chAllCaps, this.numSpacing, this.numPosition, // 3 tab
this.numDefaultTab, this.numTab, this.cmbAlign, this.cmbLeader, this.tabList, this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll,// 4 tab
this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight // 5 tab
];
]);
},
onCategoryClick: function(btn, index, cmp, e) {
@ -700,6 +706,9 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
case 1:
me.chBreakBefore.focus();
break;
case 2:
me.cmbBorderSize.focus();
break;
case 3:
me.chStrike.focus();
if (e && (e instanceof jQuery.Event))

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

@ -879,7 +879,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
this.cmbBorderSize = new Common.UI.ComboBorderSize({
el: $('#tableadv-combo-border-size'),
style: "width: 93px;"
style: "width: 93px;",
takeFocusOnClose: true
});
var rec = this.cmbBorderSize.store.at(1);
this.BorderSize = {ptValue: rec.get('value'), pxValue: rec.get('pxValue')};
@ -890,7 +891,9 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
parentEl: $('#tableadv-border-color-btn'),
additionalAlign: this.menuAddAlign,
color: 'auto',
auto: true
auto: true,
cls: 'move-focus',
takeFocusOnClose: true
});
this.btnBorderColor.on('color:select', _.bind(me.onColorsBorderSelect, me));
this.btnBorderColor.on('auto:select', _.bind(me.onColorsBorderSelect, me));
@ -899,7 +902,9 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#tableadv-button-back-color'),
additionalAlign: this.menuAddAlign,
transparent: true
transparent: true,
cls: 'move-focus',
takeFocusOnClose: true
});
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
this.colorsBack = this.btnBackColor.getPicker();
@ -907,7 +912,9 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
this.btnTableBackColor = new Common.UI.ColorButton({
parentEl: $('#tableadv-button-table-back-color'),
additionalAlign: this.menuAddAlign,
transparent: true
transparent: true,
cls: 'move-focus',
takeFocusOnClose: true
});
this.btnTableBackColor.on('color:select', _.bind(this.onColorsTableBackSelect, this));
this.colorsTableBack = this.btnTableBackColor.getPicker();
@ -1012,11 +1019,12 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
return [
this.chWidth, this.nfWidth, this.cmbUnit, this.chAutofit, this.spnTableMarginTop, this.spnTableMarginLeft, this.spnTableMarginBottom, this.spnTableMarginRight, this.chAllowSpacing, this.nfSpacing, // 0 tab
this.chPrefWidth, this.nfPrefWidth, this.cmbPrefWidthUnit, this.chCellMargins, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, this.chWrapText, // 1 tab
this.cmbBorderSize, this.btnBorderColor].concat(this._btnsBorderPosition).concat(this._btnsTableBorderPosition).concat([this.btnBackColor, this.btnTableBackColor,
this.radioHAlign, this.cmbHAlign , this.radioHPosition, this.cmbHRelative, this.spnX, this.cmbHPosition,
this.radioVAlign, this.cmbVAlign , this.radioVPosition, this.cmbVRelative, this.spnY, this.cmbVPosition, this.chMove, this.chOverlap, // 3 tab
this.spnIndentLeft, this.spnDistanceTop, this.spnDistanceLeft, this.spnDistanceBottom, this.spnDistanceRight, // 4 tab
this.inputAltTitle, this.textareaAltDescription // 5 tab
];
]);
},
onCategoryClick: function(btn, index) {
@ -1038,6 +1046,9 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
else
me.chPrefWidth.focus();
break;
case 2:
me.cmbBorderSize.focus();
break;
case 3:
if (!me.cmbHAlign.isDisabled())
me.cmbHAlign.focus();

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

@ -259,19 +259,8 @@ define([
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-fontcolor',
split: true,
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="">' + this.textNewColor + '</a>')}
]
})
menu: true,
auto: true
});
this.paragraphControls.push(this.btnFontColor);
@ -280,12 +269,8 @@ define([
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-paracolor',
split: true,
menu: new Common.UI.Menu({
items: [
{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>')}
]
})
transparent: true,
menu: true
});
this.paragraphControls.push(this.btnParagraphColor);
this.textOnlyControls.push(this.btnParagraphColor);
@ -2005,21 +1990,19 @@ define([
]
});
this.mnuHighlightColorPicker.select('FFFF00');
this.btnHighlightColor.setPicker(this.mnuHighlightColorPicker);
}
if (this.btnFontColor.cmpEl) {
this.btnFontColor.setMenu();
this.mnuFontColorPicker = this.btnFontColor.getPicker();
this.btnFontColor.setColor(this.btnFontColor.currentColor || 'transparent');
this.mnuFontColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-fontcolor')
});
}
if (this.btnParagraphColor.cmpEl) {
this.btnParagraphColor.setMenu();
this.mnuParagraphColorPicker = this.btnParagraphColor.getPicker();
this.btnParagraphColor.setColor(this.btnParagraphColor.currentColor || 'transparent');
this.mnuParagraphColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-paracolor'),
transparent: true
});
}
if (this.btnContentControls.cmpEl) {

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

@ -314,44 +314,24 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
});
this.textControls.push(this.btnStrikeout);
var initNewColor = function(btn, picker_el) {
if (btn && btn.cmpEl) {
btn.currentColor = 'c0c0c0';
btn.setColor( btn.currentColor);
var picker = new Common.UI.ThemeColorPalette({
el: $(picker_el)
});
}
btn.menu.cmpEl.on('click', picker_el+'-new', _.bind(function() {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
}, me));
picker.on('select', _.bind(me.onColorSelect, me));
return picker;
};
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',
caption: this.textAuto,
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: 216px; margin: 10px;"></div>') },
{ template: _.template('<a id="watermark-menu-textcolor-new">' + this.textNewColor + '</a>') }
]
})
additionalAlign: this.menuAddAlign,
auto: true,
color: 'c0c0c0',
menu: true
});
this.mnuTextColorPicker = initNewColor(this.btnTextColor, "#watermark-menu-textcolor");
$('#watermark-auto-color').on('click', _.bind(this.onAutoColor, this));
this.btnTextColor.setMenu();
this.mnuTextColorPicker = this.btnTextColor.getPicker();
this.btnTextColor.currentColor = 'c0c0c0';
this.textControls.push(this.btnTextColor);
this.btnTextColor.on('color:select', _.bind(this.onColorSelect, this));
this.btnTextColor.on('auto:select', _.bind(this.onAutoColor, this));
this.chTransparency = new Common.UI.CheckBox({
el: $('#watermark-chb-transparency'),
labelText: this.textTransparency,
@ -402,31 +382,18 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
}, 10);
},
onColorSelect: function(picker, color) {
var clr_item = this.btnTextColor.menu.$el.find('#watermark-auto-color > a');
clr_item.hasClass('selected') && clr_item.removeClass('selected');
onColorSelect: function(btn, color) {
this.isAutoColor = false;
this.btnTextColor.currentColor = color;
this.btnTextColor.setColor( this.btnTextColor.currentColor);
},
updateThemeColors: function() {
this.mnuTextColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
},
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onAutoColor: function(e) {
var clr_item = this.btnTextColor.menu.$el.find('#watermark-auto-color > a');
!clr_item.hasClass('selected') && clr_item.addClass('selected');
this.isAutoColor = true;
this.btnTextColor.currentColor = "000";
this.btnTextColor.setColor( this.btnTextColor.currentColor);
this.mnuTextColorPicker.clearSelection();
},
afterRender: function() {
@ -582,16 +549,14 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
this.btnUnderline.toggle(val.get_Underline());
this.btnStrikeout.toggle(val.get_Strikeout());
var color = val.get_Color(),
clr_item = this.btnTextColor.menu.$el.find('#watermark-auto-color > a'),
clr = "c0c0c0";
if (color.get_auto()) {
clr = "000";
this.isAutoColor = true;
this.mnuTextColorPicker.clearSelection();
!clr_item.hasClass('selected') && clr_item.addClass('selected');
this.btnTextColor.setAutoColor(true);
} else {
clr_item.hasClass('selected') && clr_item.removeClass('selected');
if (color) {
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()} :
@ -718,7 +683,6 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
textDiagonal: 'Diagonal',
textHor: 'Horizontal',
textColor: 'Text color',
textNewColor: 'Add New Custom Color',
textLanguage: 'Language',
textFromStorage: 'From Storage',
textSelect: 'Select Image'

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

@ -124,6 +124,8 @@
"Common.Translation.warnFileLocked": "You can't edit this file because it's being edited in another app.",
"Common.Translation.warnFileLockedBtnEdit": "Create a copy",
"Common.Translation.warnFileLockedBtnView": "Open for viewing",
"Common.UI.ButtonColored.textAutoColor": "Automatic",
"Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
"Common.UI.Calendar.textApril": "April",
"Common.UI.Calendar.textAugust": "August",
"Common.UI.Calendar.textDecember": "December",
@ -157,8 +159,8 @@
"Common.UI.Calendar.textShortTuesday": "Tu",
"Common.UI.Calendar.textShortWednesday": "We",
"Common.UI.Calendar.textYears": "Years",
"Common.UI.ColorButton.textAutoColor": "Automatic",
"Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"del_Common.UI.ColorButton.textAutoColor": "Automatic",
"del_Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders",
"Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders",
"Common.UI.ComboDataView.emptyComboText": "No styles",
@ -1790,7 +1792,7 @@
"DE.Views.FormsTab.textClear": "Clear Fields",
"DE.Views.FormsTab.textClearFields": "Clear All Fields",
"DE.Views.FormsTab.textHighlight": "Highlight Settings",
"DE.Views.FormsTab.textNewColor": "Add New Custom Color",
"del_DE.Views.FormsTab.textNewColor": "Add New Custom Color",
"DE.Views.FormsTab.textNoHighlight": "No highlighting",
"DE.Views.FormsTab.textRequired": "Fill all required fields to send form.",
"DE.Views.FormsTab.textSubmited": "Form submitted successfully",
@ -2752,7 +2754,7 @@
"DE.Views.WatermarkSettingsDialog.textItalic": "Italic",
"DE.Views.WatermarkSettingsDialog.textLanguage": "Language",
"DE.Views.WatermarkSettingsDialog.textLayout": "Layout",
"DE.Views.WatermarkSettingsDialog.textNewColor": "Add New Custom Color",
"del_DE.Views.WatermarkSettingsDialog.textNewColor": "Add New Custom Color",
"DE.Views.WatermarkSettingsDialog.textNone": "None",
"DE.Views.WatermarkSettingsDialog.textScale": "Scale",
"DE.Views.WatermarkSettingsDialog.textSelect": "Select Image",

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

@ -301,8 +301,7 @@ define([
toolbar.btnMarkers.menu.on('show:after', _.bind(this.onListShowAfter, this, 0, toolbar.mnuMarkersPicker));
toolbar.btnNumbers.menu.on('show:after', _.bind(this.onListShowAfter, this, 1, toolbar.mnuNumbersPicker));
toolbar.btnFontColor.on('click', _.bind(this.onBtnFontColor, this));
toolbar.mnuFontColorPicker.on('select', _.bind(this.onSelectFontColor, this));
$('#id-toolbar-menu-new-fontcolor').on('click', _.bind(this.onNewFontColor, this));
toolbar.btnFontColor.on('color:select', _.bind(this.onSelectFontColor, this));
toolbar.btnHighlightColor.on('click', _.bind(this.onBtnHighlightColor, this));
toolbar.mnuHighlightColorPicker.on('select', _.bind(this.onSelectHighlightColor, this));
toolbar.mnuHighlightTransparent.on('click', _.bind(this.onHighlightTransparentClick, this));
@ -1871,11 +1870,7 @@ define([
return out_value;
},
onNewFontColor: function(picker, color) {
this.toolbar.mnuFontColorPicker.addNewColor();
},
onSelectFontColor: function(picker, color) {
onSelectFontColor: function(btn, color) {
this._state.clrtext = this._state.clrtext_asccolor = undefined;
this.toolbar.btnFontColor.currentColor = color;
@ -1965,7 +1960,8 @@ define([
var me = this;
if (h === 'menu') {
me.toolbar.mnuHighlightTransparent.setChecked(false);
me._state.clrhighlight = undefined;
me.onApiHighlightColor();
me.toolbar.btnHighlightColor.currentColor = strcolor;
me.toolbar.btnHighlightColor.setColor(me.toolbar.btnHighlightColor.currentColor);
@ -2003,9 +1999,6 @@ define([
onHighlightTransparentClick: function(item, e) {
this._setMarkerColor('transparent', 'menu');
item.setChecked(true, true);
this.toolbar.btnHighlightColor.currentColor = 'transparent';
this.toolbar.btnHighlightColor.setColor(this.toolbar.btnHighlightColor.currentColor);
},
onResetAutoshapes: function () {

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

@ -362,13 +362,7 @@ define([
iconCls: 'toolbar__icon btn-fontcolor',
lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
split: true,
menu: new Common.UI.Menu({
cls: 'shifted-left',
items: [
{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>')}
]
})
menu: true
});
me.paragraphControls.push(me.btnFontColor);
@ -1361,10 +1355,9 @@ define([
// DataView and pickers
//
if (this.btnFontColor.cmpEl) {
this.btnFontColor.setMenu();
this.mnuFontColorPicker = this.btnFontColor.getPicker();
this.btnFontColor.setColor(this.btnFontColor.currentColor || 'transparent');
this.mnuFontColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-fontcolor')
});
}
if (this.btnHighlightColor.cmpEl) {
this.btnHighlightColor.currentColor = 'FFFF00';
@ -1377,6 +1370,7 @@ define([
]
});
this.mnuHighlightColorPicker.select('FFFF00');
this.btnHighlightColor.setPicker(this.mnuHighlightColorPicker);
}
},
@ -1733,7 +1727,6 @@ define([
txtDistribVert: 'Distribute Vertically',
tipChangeSlide: 'Change Slide Layout',
tipColorSchemas: 'Change Color Scheme',
textNewColor: 'Add New Custom Color',
mniSlideStandard: 'Standard (4:3)',
mniSlideWide: 'Widescreen (16:9)',
mniSlideAdvanced: 'Advanced Settings',

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

@ -50,8 +50,10 @@
"Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.",
"Common.Translation.warnFileLockedBtnEdit": "Create a copy",
"Common.Translation.warnFileLockedBtnView": "Open for viewing",
"Common.UI.ColorButton.textAutoColor": "Automatic",
"Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ButtonColored.textAutoColor": "Automatic",
"Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
"del_Common.UI.ColorButton.textAutoColor": "Automatic",
"del_Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders",
"Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders",
"Common.UI.ComboDataView.emptyComboText": "No styles",
@ -1909,7 +1911,7 @@
"PE.Views.Toolbar.textColumnsTwo": "Two Columns",
"PE.Views.Toolbar.textItalic": "Italic",
"PE.Views.Toolbar.textListSettings": "List Settings",
"PE.Views.Toolbar.textNewColor": "Add New Custom Color",
"del_PE.Views.Toolbar.textNewColor": "Add New Custom Color",
"PE.Views.Toolbar.textShapeAlignBottom": "Align Bottom",
"PE.Views.Toolbar.textShapeAlignCenter": "Align Center",
"PE.Views.Toolbar.textShapeAlignLeft": "Align Left",

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

@ -315,10 +315,10 @@ define([
toolbar.btnSubscript.on('click', _.bind(this.onSubscript, this));
toolbar.btnSubscript.menu.on('item:click', _.bind(this.onSubscriptMenu, this));
toolbar.btnTextColor.on('click', _.bind(this.onTextColor, this));
toolbar.btnTextColor.on('color:select', _.bind(this.onTextColorSelect, this));
toolbar.btnTextColor.on('auto:select', _.bind(this.onAutoFontColor, this));
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.btnBackColor.on('color:select', _.bind(this.onBackColorSelect, this));
toolbar.btnBorders.on('click', _.bind(this.onBorders, this));
if (toolbar.btnBorders.rendered) {
toolbar.btnBorders.menu.on('item:click', _.bind(this.onBordersMenu, this));
@ -378,8 +378,6 @@ define([
if (toolbar.cmbNumberFormat.cmpEl)
toolbar.cmbNumberFormat.cmpEl.on('click', '#id-toolbar-mnu-item-more-formats a', _.bind(this.onNumberFormatSelect, this));
toolbar.btnCurrencyStyle.menu.on('item:click', _.bind(this.onNumberFormatMenu, this));
$('#id-toolbar-menu-new-fontcolor').on('click', _.bind(this.onNewTextColor, this));
$('#id-toolbar-menu-new-paracolor').on('click', _.bind(this.onNewBackColor, this));
$('#id-toolbar-menu-new-bordercolor').on('click', _.bind(this.onNewBorderColor, this));
toolbar.btnPageOrient.menu.on('item:click', _.bind(this.onPageOrientSelect, this));
toolbar.btnPageMargins.menu.on('item:click', _.bind(this.onPageMarginsSelect, this));
@ -613,11 +611,10 @@ define([
this.toolbar.mnuBackColorPicker.trigger('select', this.toolbar.mnuBackColorPicker, this.toolbar.mnuBackColorPicker.currentColor, true);
},
onTextColorSelect: function(picker, color, fromBtn) {
onTextColorSelect: function(btn, color, fromBtn) {
this._state.clrtext_asccolor = this._state.clrtext = undefined;
this.toolbar.btnTextColor.currentColor = color;
this.toolbar.btnTextColor.setColor((typeof(color) == 'object') ? (color.isAuto ? '000' : color.color) : color);
this.toolbar.mnuTextColorPicker.currentColor = color;
if (this.api) {
@ -630,14 +627,11 @@ define([
Common.component.Analytics.trackEvent('ToolBar', 'Text Color');
},
onBackColorSelect: function(picker, color, fromBtn) {
onBackColorSelect: function(btn, color, fromBtn) {
this._state.clrshd_asccolor = this._state.clrback = undefined;
var clr = (typeof(color) == 'object') ? color.color : color;
this.toolbar.btnBackColor.currentColor = color;
this.toolbar.btnBackColor.setColor(this.toolbar.btnBackColor.currentColor);
this.toolbar.mnuBackColorPicker.currentColor = color;
if (this.api) {
this.toolbar.btnBackColor.ischanged = (fromBtn!==true);
@ -648,14 +642,6 @@ define([
Common.component.Analytics.trackEvent('ToolBar', 'Background Color');
},
onNewTextColor: function(picker, color) {
this.toolbar.mnuTextColorPicker.addNewColor();
},
onNewBackColor: function(picker, color) {
this.toolbar.mnuBackColorPicker.addNewColor();
},
onNewBorderColor: function(picker, color) {
this.toolbar.btnBorders.menu.hide();
this.toolbar.btnBorders.toggle(false, true);
@ -669,9 +655,6 @@ define([
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);
@ -2410,8 +2393,7 @@ define([
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.toolbar.btnTextColor.setAutoColor(true);
this._state.clrtext = 'auto';
}
} else {
@ -2426,8 +2408,7 @@ define([
(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');
this.toolbar.btnTextColor.setAutoColor(false);
if (_.isObject(clr)) {
var isselected = false;
for (var i = 0; i < 10; i++) {
@ -2565,8 +2546,7 @@ define([
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');
toolbar.btnTextColor.setAutoColor(true);
this._state.clrtext = 'auto';
}
} else {
@ -2581,8 +2561,7 @@ define([
(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');
toolbar.btnTextColor.setAutoColor(false);
if (_.isObject(clr)) {
var isselected = false;
for (var i = 0; i < 10; i++) {

114
apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
View file

@ -377,19 +377,11 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
});
this.btnStrikeout.on('click',_.bind(this.onStrikeoutClick, this));
var initNewColor = function(btn, picker_el, transparent) {
if (btn && btn.cmpEl) {
btn.currentColor = '#000000';
btn.setColor(btn.currentColor);
var picker = new Common.UI.ThemeColorPalette({
el: $(picker_el),
transparent: transparent
});
picker.currentColor = btn.currentColor;
}
btn.menu.cmpEl.on('click', picker_el+'-new', _.bind(function() {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
}, me));
var initNewColor = function(btn) {
btn.setMenu();
btn.currentColor = '000000';
var picker = btn.getPicker();
picker.currentColor = btn.currentColor;
return picker;
};
@ -398,36 +390,25 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-fontcolor',
hint : this.textColor,
split : true,
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="format-rules-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="format-rules-menu-fontcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
additionalAlign: this.menuAddAlign,
color: '000000',
menu : true
});
this.mnuTextColorPicker = initNewColor(this.btnTextColor, "#format-rules-menu-fontcolor");
this.mnuTextColorPicker.on('select', _.bind(me.onFormatTextColorSelect, me));
this.btnTextColor.on('click', _.bind(me.onFormatTextColor, me));
this.mnuTextColorPicker = initNewColor(this.btnTextColor);
this.btnTextColor.on('color:select', _.bind(this.onFormatTextColorSelect, this));
this.btnFillColor = new Common.UI.ButtonColored({
parentEl: $('#format-rules-fillcolor'),
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-paracolor',
hint : this.fillColor,
split : true,
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="format-rules-menu-fillcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="format-rules-menu-fillcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
additionalAlign: this.menuAddAlign,
color: '000000',
transparent: true,
menu : true
});
this.mnuFillColorPicker = initNewColor(this.btnFillColor, "#format-rules-menu-fillcolor", true);
this.mnuFillColorPicker.on('select', _.bind(me.onFormatFillColorSelect, me));
this.btnFillColor.on('click', _.bind(me.onFormatFillColor, me));
this.mnuFillColorPicker = initNewColor(this.btnFillColor);
this.btnFillColor.on('color:select', _.bind(this.onFormatFillColorSelect, this));
this.btnBorders = new Common.UI.Button({
parentEl : $('#format-rules-borders'),
@ -900,15 +881,21 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
parentEl: $('#format-rules-edit-color-pos-fill'),
style: "width:45px;",
menu : true,
color : '638EC6'
color : '638EC6',
cls: 'move-focus',
takeFocusOnClose: true
});
Common.UI.FocusManager.add(this, this.btnPosFill);
this.btnNegFill = new Common.UI.ColorButton({
parentEl: $('#format-rules-edit-color-neg-fill'),
style: "width:45px;",
menu : true,
color : 'FF0000'
color : 'FF0000',
cls: 'move-focus',
takeFocusOnClose: true
});
Common.UI.FocusManager.add(this, this.btnNegFill);
this.chFill = new Common.UI.CheckBox({
el: $('#format-rules-edit-chk-fill'),
@ -951,15 +938,21 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
parentEl: $('#format-rules-edit-color-pos-border'),
style: "width:45px;",
menu : true,
color : '000000'
color : '000000',
cls: 'move-focus',
takeFocusOnClose: true
});
Common.UI.FocusManager.add(this, this.btnPosBorder);
this.btnNegBorder = new Common.UI.ColorButton({
parentEl: $('#format-rules-edit-color-neg-border'),
style: "width:45px;",
menu : true,
color : '000000'
color : '000000',
cls: 'move-focus',
takeFocusOnClose: true
});
Common.UI.FocusManager.add(this, this.btnNegBorder);
this.chBorder = new Common.UI.CheckBox({
el: $('#format-rules-edit-chk-border'),
@ -1020,8 +1013,11 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
parentEl: $('#format-rules-edit-color-axis-color'),
style: "width:45px;",
menu : true,
color : '000000'
color : '000000',
cls: 'move-focus',
takeFocusOnClose: true
});
Common.UI.FocusManager.add(this, this.btnAxisColor);
this.panels.databar.rendered = true;
this.updateThemeColors();
@ -1075,8 +1071,11 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
parentEl: $('#format-rules-edit-color-scale-' + (i+1)),
menu : true,
type : i,
color : '000000'
color : '000000',
cls: 'move-focus',
takeFocusOnClose: true
});
Common.UI.FocusManager.add(this, color);
this.scaleControls.push({combo: combo, range: range, color: color});
}
this.panels.scale.rendered = true;
@ -1293,17 +1292,8 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
this.btnUnderline.toggle(xfs.asc_getFontUnderline() === true, true);
this.btnStrikeout.toggle(xfs.asc_getFontStrikeout() === true, true);
var color = this.setColor(xfs.asc_getFontColor(), null, this.mnuTextColorPicker);
this.btnTextColor.currentColor = color;
this.mnuTextColorPicker.currentColor = color;
color = (typeof(color) == 'object') ? color.color : color;
$('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + color);
color = this.setColor(xfs.asc_getFillColor(), null, this.mnuFillColorPicker);
this.btnFillColor.currentColor = color;
this.mnuFillColorPicker.currentColor = color;
color = (typeof(color) == 'object') ? color.color : color;
$('.btn-color-value-line', this.btnFillColor.cmpEl).css('background-color', color=='transparent' ? 'transparent' : '#' + color);
var color = this.setColor(xfs.asc_getFontColor(), this.btnTextColor, this.mnuTextColorPicker);
color = this.setColor(xfs.asc_getFillColor(), this.btnFillColor, this.mnuFillColorPicker);
var val = xfs.asc_getNumFormatInfo();
val && this.cmbNumberFormat.setValue(val.asc_getType(), this.textCustom);
@ -1697,36 +1687,24 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
}
},
onFormatTextColorSelect: function(picker, color, fromBtn) {
var clr = (typeof(color) == 'object') ? color.color : color;
onFormatTextColorSelect: function(btn, color, fromBtn) {
this.btnTextColor.currentColor = color;
$('.btn-color-value-line', this.btnTextColor.cmpEl).css('background-color', '#' + clr);
picker.currentColor = color;
this.mnuTextColorPicker.currentColor = color;
!this.xfsFormat && (this.xfsFormat = new Asc.asc_CellXfs());
this.xfsFormat.asc_setFontColor(Common.Utils.ThemeColor.getRgbColor(this.mnuTextColorPicker.currentColor));
this.previewFormat();
},
onFormatTextColor: function(btn, e) {
this.mnuTextColorPicker.trigger('select', this.mnuTextColorPicker, this.mnuTextColorPicker.currentColor, true);
},
onFormatFillColorSelect: function(picker, color, fromBtn) {
var clr = (typeof(color) == 'object') ? color.color : color;
onFormatFillColorSelect: function(btn, color, fromBtn) {
this.btnFillColor.currentColor = color;
$('.btn-color-value-line', this.btnFillColor.cmpEl).css('background-color', clr=='transparent' ? 'transparent' : '#' + clr);
picker.currentColor = color;
this.mnuFillColorPicker.currentColor = color;
!this.xfsFormat && (this.xfsFormat = new Asc.asc_CellXfs());
this.xfsFormat.asc_setFillColor(this.mnuFillColorPicker.currentColor == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(this.mnuFillColorPicker.currentColor));
this.previewFormat();
},
onFormatFillColor: function(picker, btn, e) {
this.mnuFillColorPicker.trigger('select', this.mnuFillColorPicker, this.mnuFillColorPicker.currentColor, true);
},
onNumberFormatSelect: function(combo, record) {
!this.xfsFormat && (this.xfsFormat = new Asc.asc_CellXfs());
this.xfsFormat.asc_setNumFormatInfo(record.format);

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

@ -534,19 +534,13 @@ define([
this.btnSubscript[1].on('click', _.bind(this.onSubscriptClick, this));
this.footerControls.push(this.btnSubscript[1]);
var initNewColor = function(btn, picker_el) {
if (btn && btn.cmpEl) {
btn.currentColor = '000000';
btn.setColor(btn.currentColor);
var picker = new Common.UI.ThemeColorPalette({
el: $(picker_el)
});
picker.currentColor = btn.currentColor;
}
btn.menu.cmpEl.on('click', picker_el+'-new', _.bind(function() {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
}, me));
picker.on('select', _.bind(me.onColorSelect, me, btn));
var initNewColor = function(btn) {
btn.setMenu();
btn.currentColor = '000000';
btn.setColor(btn.currentColor);
var picker = btn.getPicker();
picker.currentColor = btn.currentColor;
btn.on('color:select', _.bind(me.onColorSelect, me));
return picker;
};
this.btnTextColor = [];
@ -556,17 +550,13 @@ define([
iconCls : 'toolbar__icon btn-fontcolor',
hint : this.textColor,
split : true,
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ 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>') }
]
})
additionalAlign: this.menuAddAlign,
menu : true
}));
this.btnTextColor[0].on('click', _.bind(this.onTextColor, this));
this.mnuTextColorPicker = [];
this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[0], "#id-dlg-h-menu-fontcolor"));
this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[0]));
this.headerControls.push(this.btnTextColor[0]);
this.btnTextColor.push(new Common.UI.ButtonColored({
@ -575,16 +565,11 @@ define([
iconCls : 'toolbar__icon btn-fontcolor',
hint : this.textColor,
split : true,
menu : new Common.UI.Menu({
additionalAlign: this.menuAddAlign,
items: [
{ 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>') }
]
})
additionalAlign: this.menuAddAlign,
menu : true
}));
this.btnTextColor[1].on('click', _.bind(this.onTextColor, this));
this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[1], "#id-dlg-f-menu-fontcolor"));
this.mnuTextColorPicker.push(initNewColor(this.btnTextColor[1]));
this.footerControls.push(this.btnTextColor[1]);
this.btnOk = new Common.UI.Button({
@ -898,10 +883,9 @@ define([
mnuTextColorPicker.trigger('select', mnuTextColorPicker, mnuTextColorPicker.currentColor, true);
},
onColorSelect: function(btn, picker, color) {
onColorSelect: function(btn, color) {
btn.currentColor = color;
btn.setColor(btn.currentColor);
picker.currentColor = color;
btn.colorPicker.currentColor = color;
if (this.HFObject)
this.HFObject.setTextColor(Common.Utils.ThemeColor.getRgbColor(color));
this.onCanvasClick(this.currentCanvas);

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

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

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

@ -488,19 +488,8 @@ define([
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>') }
]
})
menu: true,
auto: true
});
me.mnuBackColorPicker = dummyCmp();
@ -510,12 +499,8 @@ define([
iconCls : 'toolbar__icon btn-paracolor',
split : true,
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: 216px; margin: 10px;"></div>') },
{ template: _.template('<a id="id-toolbar-menu-new-paracolor" style="padding-left:12px;">' + me.textNewColor + '</a>') }
]
})
transparent: true,
menu: true
});
me.btnBorders = new Common.UI.Button({
@ -1896,7 +1881,7 @@ define([
stopPropagation: true
},
{caption: '--'},
{ template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 169px; height: 216px; margin: 10px;"></div>'), stopPropagation: true },
{ template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 169px; height: 240px;"></div>'), stopPropagation: true },
{ template: _.template('<a id="id-toolbar-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'), stopPropagation: true }
]
})
@ -2154,17 +2139,14 @@ define([
// DataView and pickers
//
if (this.btnTextColor && this.btnTextColor.cmpEl) {
this.btnTextColor.setMenu();
this.mnuTextColorPicker = this.btnTextColor.getPicker();
this.btnTextColor.setColor(this.btnTextColor.currentColor || 'transparent');
this.mnuTextColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-fontcolor')
});
}
if (this.btnBackColor && this.btnBackColor.cmpEl) {
this.btnBackColor.setMenu();
this.mnuBackColorPicker = this.btnBackColor.getPicker();
this.btnBackColor.setColor(this.btnBackColor.currentColor || 'transparent');
this.mnuBackColorPicker = new Common.UI.ThemeColorPalette({
el: $('#id-toolbar-menu-paracolor'),
transparent: true
});
}
},

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

@ -102,8 +102,10 @@
"Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.",
"Common.Translation.warnFileLockedBtnEdit": "Create a copy",
"Common.Translation.warnFileLockedBtnView": "Open for viewing",
"Common.UI.ColorButton.textAutoColor": "Automatic",
"Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ButtonColored.textAutoColor": "Automatic",
"Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
"del_Common.UI.ColorButton.textAutoColor": "Automatic",
"del_Common.UI.ColorButton.textNewColor": "Add New Custom Color",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders",
"Common.UI.ComboBorderSizeEditable.txtNoBorders": "No borders",
"Common.UI.ComboDataView.emptyComboText": "No styles",