Refactoring color palette (fix width, bugs 33599, 33600

This commit is contained in:
Julia Radzhabova 2022-04-22 23:18:17 +03:00
parent 4f85426deb
commit 736af63c30
6 changed files with 12 additions and 7 deletions

View file

@ -98,7 +98,7 @@ define([
cls: 'shifted-left', cls: 'shifted-left',
additionalAlign: options.additionalAlign, additionalAlign: options.additionalAlign,
items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([ items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([
{ template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + '; margin: 10px;display: inline-block;"></div>') }, { template: _.template('<div id="' + id + '-color-menu" style="width: 164px; height:' + height + '; display: inline-block;"></div>') },
{caption: '--'}, {caption: '--'},
{ {
id: id + '-color-new', id: id + '-color-new',

View file

@ -52,6 +52,7 @@ define([
dynamiccolors: 10, dynamiccolors: 10,
standardcolors: 10, standardcolors: 10,
themecolors: 10, themecolors: 10,
columns: 10,
effects: 5, effects: 5,
allowReselect: true, allowReselect: true,
transparent: false, transparent: false,
@ -62,7 +63,7 @@ define([
template : template :
_.template( _.template(
'<div style="padding: 4px 12px 12px;">' + '<div style="padding: 4px 0 0 12px;">' +
'<% var me = this; var idx = 0; %>' + '<% var me = this; var idx = 0; %>' +
'<% $(colors).each(function(num, item) { %>' + '<% $(colors).each(function(num, item) { %>' +
'<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' + '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
@ -76,6 +77,9 @@ define([
'<em><span unselectable="on">&#160;</span></em>' + '<em><span unselectable="on">&#160;</span></em>' +
'</a>' + '</a>' +
'<% } else if (me.isEffect(item)) { %>' + '<% } else if (me.isEffect(item)) { %>' +
'<% if (idx>0 && me.columns>0 && idx%me.columns===0) { %> ' +
'<div style="width:100%;height:0;float:left;"></div>' +
'<% } %>' +
'<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" idx="<%=idx++%>">' + '<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>' + '<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' +
'</a>' + '</a>' +
@ -85,7 +89,7 @@ define([
'<% }); %>' + '<% }); %>' +
'</div>' + '</div>' +
'<% if (me.options.dynamiccolors!==undefined) { %>' + '<% if (me.options.dynamiccolors!==undefined) { %>' +
'<div style="padding: 12px;">' + '<div style="padding: 4px 0 0 12px">' +
'<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' + '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
'<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=me.textRecentColors%></div>' + '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=me.textRecentColors%></div>' +
'<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' + '<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
@ -105,6 +109,7 @@ define([
el = me.$el || $(this.el); 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.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent);
this.columns = me.options.columns || 0;
this.enableKeyEvents= me.options.enableKeyEvents; this.enableKeyEvents= me.options.enableKeyEvents;
this.tabindex = me.options.tabindex || 0; this.tabindex = me.options.tabindex || 0;
this.outerMenu = me.options.outerMenu; this.outerMenu = me.options.outerMenu;

View file

@ -898,7 +898,7 @@ define([
checkable: true checkable: true
}), }),
{caption: '--'}, {caption: '--'},
{template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 169px; margin: 10px;display: inline-block;"></div>')}, {template: _.template('<div id="id-toolbar-menu-controls-color" style="width: 164px; display: inline-block;"></div>')},
{caption: '--'}, {caption: '--'},
{ {
id: 'id-toolbar-menu-new-control-color', id: 'id-toolbar-menu-new-control-color',

View file

@ -531,7 +531,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
menuAlign : 'tl-tr', menuAlign : 'tl-tr',
items : [ items : [
{ template: _.template('<div id="format-rules-borders-menu-bordercolor" style="width: 169px; margin: 10px;display: inline-block;"></div>'), stopPropagation: true }, { template: _.template('<div id="format-rules-borders-menu-bordercolor" style="width: 164px; display: inline-block;"></div>'), stopPropagation: true },
{caption: '--'}, {caption: '--'},
{ template: _.template('<a id="format-rules-borders-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'), stopPropagation: true } { template: _.template('<a id="format-rules-borders-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'), stopPropagation: true }
] ]

View file

@ -335,7 +335,7 @@ define([
menuAlign: 'tl-tr', menuAlign: 'tl-tr',
cls: 'color-tab', cls: 'color-tab',
items: [ items: [
{ template: _.template('<div id="id-tab-menu-color" style="width: 169px;display: inline-block;"></div>') }, { template: _.template('<div id="id-tab-menu-color" style="width: 164px;display: inline-block;"></div>') },
{caption: '--'}, {caption: '--'},
{ template: _.template('<a id="id-tab-menu-new-color" style="padding-left:12px;">' + me.textNewColor + '</a>') } { template: _.template('<a id="id-tab-menu-new-color" style="padding-left:12px;">' + me.textNewColor + '</a>') }
] ]

View file

@ -2120,7 +2120,7 @@ define([
stopPropagation: true stopPropagation: true
}, },
{caption: '--'}, {caption: '--'},
{ template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 169px;display: inline-block;"></div>'), stopPropagation: true }, { template: _.template('<div id="id-toolbar-menu-bordercolor" style="width: 164px;display: inline-block;"></div>'), stopPropagation: true },
{caption: '--'}, {caption: '--'},
{ template: _.template('<a id="id-toolbar-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'), stopPropagation: true } { template: _.template('<a id="id-toolbar-menu-new-bordercolor" style="padding-left:12px;">' + this.textNewColor + '</a>'), stopPropagation: true }
] ]