[SSE] Add conditional formatting from right panel

This commit is contained in:
Julia Radzhabova 2021-03-15 23:10:47 +03:00
parent 33f2e287b0
commit 5609945406
4 changed files with 235 additions and 27 deletions

View file

@ -139,6 +139,9 @@ define([
'FormulaTab': { 'FormulaTab': {
'function:namedrange': this.onNamedRangeMenu, 'function:namedrange': this.onNamedRangeMenu,
'function:namedrange-open': this.onNamedRangeMenuOpen 'function:namedrange-open': this.onNamedRangeMenuOpen
},
'CellSettings': {
'cf:init': this.onShowBeforeCondFormat
} }
}); });
Common.NotificationCenter.on('page:settings', _.bind(this.onApiSheetChanged, this)); Common.NotificationCenter.on('page:settings', _.bind(this.onApiSheetChanged, this));
@ -394,12 +397,7 @@ define([
}); });
toolbar.btnPrintTitles.on('click', _.bind(this.onPrintTitlesClick, this)); toolbar.btnPrintTitles.on('click', _.bind(this.onPrintTitlesClick, this));
if (toolbar.btnCondFormat.rendered) { if (toolbar.btnCondFormat.rendered) {
toolbar.btnCondFormat.menu.on('show:before', _.bind(this.onShowBeforeCondFormat, this)); toolbar.btnCondFormat.menu.on('show:before', _.bind(this.onShowBeforeCondFormat, this, this.toolbar, 'toolbar'));
toolbar.btnCondFormat.menu.on('item:click', _.bind(this.onCondFormatMenu, this));
for (var i=0; i<7; i++) {
toolbar.btnCondFormat.menu.items[i].menu.on('item:click', _.bind(this.onCondFormatMenu, this));
}
toolbar.btnCondFormat.menu.items[15].menu.on('item:click', _.bind(this.onCondFormatMenu, this));
} }
Common.Gateway.on('insertimage', _.bind(this.insertImage, this)); Common.Gateway.on('insertimage', _.bind(this.insertImage, this));
@ -1592,10 +1590,16 @@ define([
} }
}, },
onShowBeforeCondFormat: function() { onShowBeforeCondFormat: function(cmp, id) {
if (this.toolbar.mnuDataBars.menu.items.length>0) // menu is inited if (cmp.mnuDataBars.menu.items.length>0) // menu is inited
return; return;
cmp.btnCondFormat.menu.on('item:click', _.bind(this.onCondFormatMenu, this));
for (var i=0; i<7; i++) {
cmp.btnCondFormat.menu.items[i].menu.on('item:click', _.bind(this.onCondFormatMenu, this));
}
cmp.btnCondFormat.menu.items[15].menu.on('item:click', _.bind(this.onCondFormatMenu, this));
var collectionPresets = SSE.getCollection('ConditionalFormatIconsPresets'); var collectionPresets = SSE.getCollection('ConditionalFormatIconsPresets');
if (collectionPresets.length<1) if (collectionPresets.length<1)
SSE.getController('Main').fillCondFormatIconsPresets(this.api.asc_getCFIconsByType()); SSE.getController('Main').fillCondFormatIconsPresets(this.api.asc_getCFIconsByType());
@ -1606,12 +1610,12 @@ define([
var me = this; var me = this;
var menuItem = this.toolbar.mnuDataBars; var menuItem = cmp.mnuDataBars;
menuItem.menu.addItem(new Common.UI.MenuItem({ menuItem.menu.addItem(new Common.UI.MenuItem({
template: _.template('<div id="id-toolbar-menu-databar" class="menu-shapes" style="margin-left: 5px; width: 203px;"></div>') template: _.template('<div id="id-' + id + '-menu-databar" class="menu-shapes" style="margin-left: 5px; width: 203px;"></div>')
})); }));
var picker = new Common.UI.DataViewSimple({ var picker = new Common.UI.DataViewSimple({
el: $('#id-toolbar-menu-databar', menuItem.$el), el: $('#id-' + id + '-menu-databar', menuItem.$el),
parentMenu: menuItem.menu, parentMenu: menuItem.menu,
itemTemplate: _.template('<div class="item-databar" id="<%= id %>"><svg width="25" height="25" class=\"icon\"><use xlink:href=\"#bar-<%= data.name %>\"></use></svg></div>') itemTemplate: _.template('<div class="item-databar" id="<%= id %>"><svg width="25" height="25" class=\"icon\"><use xlink:href=\"#bar-<%= data.name %>\"></use></svg></div>')
}); });
@ -1621,8 +1625,8 @@ define([
me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.dataBar, record.get('data').index]); me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.dataBar, record.get('data').index]);
} }
if (e.type !== 'click') if (e.type !== 'click')
me.toolbar.btnCondFormat.menu.hide(); cmp.btnCondFormat.menu.hide();
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnCondFormat); Common.NotificationCenter.trigger('edit:complete', cmp, cmp.btnCondFormat);
} }
}); });
var arr = [ var arr = [
@ -1641,12 +1645,12 @@ define([
]; ];
picker.setStore(new Common.UI.DataViewStore(arr)); picker.setStore(new Common.UI.DataViewStore(arr));
menuItem = this.toolbar.mnuColorScales; menuItem = cmp.mnuColorScales;
menuItem.menu.addItem(new Common.UI.MenuItem({ menuItem.menu.addItem(new Common.UI.MenuItem({
template: _.template('<div id="id-toolbar-menu-colorscales" class="menu-shapes" style="margin-left: 5px; width: 136px;"></div>') template: _.template('<div id="id-' + id + '-menu-colorscales" class="menu-shapes" style="margin-left: 5px; width: 136px;"></div>')
})); }));
picker = new Common.UI.DataViewSimple({ picker = new Common.UI.DataViewSimple({
el: $('#id-toolbar-menu-colorscales', menuItem.$el), el: $('#id-' + id + '-menu-colorscales', menuItem.$el),
parentMenu: menuItem.menu, parentMenu: menuItem.menu,
itemTemplate: _.template('<div class="item-colorscale" id="<%= id %>"><svg width="25" height="25" class=\"icon\"><use xlink:href=\"#color-scale-<%= data.name %>\"></use></svg></div>') itemTemplate: _.template('<div class="item-colorscale" id="<%= id %>"><svg width="25" height="25" class=\"icon\"><use xlink:href=\"#color-scale-<%= data.name %>\"></use></svg></div>')
}); });
@ -1656,8 +1660,8 @@ define([
me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.colorScale, record.get('data').index]); me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.colorScale, record.get('data').index]);
} }
if (e.type !== 'click') if (e.type !== 'click')
me.toolbar.btnCondFormat.menu.hide(); cmp.btnCondFormat.menu.hide();
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnCondFormat); Common.NotificationCenter.trigger('edit:complete', cmp, cmp.btnCondFormat);
} }
}); });
arr = [ arr = [
@ -1676,9 +1680,9 @@ define([
]; ];
picker.setStore(new Common.UI.DataViewStore(arr)); picker.setStore(new Common.UI.DataViewStore(arr));
menuItem = this.toolbar.mnuIconSets; menuItem = cmp.mnuIconSets;
menuItem.menu.addItem(new Common.UI.MenuItem({ menuItem.menu.addItem(new Common.UI.MenuItem({
template: _.template('<div id="id-toolbar-menu-iconsets" class="menu-iconsets" style="width: 227px;"></div>') template: _.template('<div id="id-' + id + '-menu-iconsets" class="menu-iconsets" style="width: 227px;"></div>')
})); }));
arr = []; arr = [];
var indexes = [Asc.EIconSetType.Arrows3, Asc.EIconSetType.Arrows3Gray, Asc.EIconSetType.Triangles3, Asc.EIconSetType.Arrows4Gray, Asc.EIconSetType.Arrows4, Asc.EIconSetType.Arrows5Gray, Asc.EIconSetType.Arrows5]; var indexes = [Asc.EIconSetType.Arrows3, Asc.EIconSetType.Arrows3Gray, Asc.EIconSetType.Triangles3, Asc.EIconSetType.Arrows4Gray, Asc.EIconSetType.Arrows4, Asc.EIconSetType.Arrows5Gray, Asc.EIconSetType.Arrows5];
@ -1698,7 +1702,7 @@ define([
arr.push({group: 'menu-iconset-group-rating', data: {index: indexes[i], iconSet: collectionPresets.at([indexes[i]]).get('icons'), icons: collectionIcons}}); arr.push({group: 'menu-iconset-group-rating', data: {index: indexes[i], iconSet: collectionPresets.at([indexes[i]]).get('icons'), icons: collectionIcons}});
} }
picker = new Common.UI.DataView({ picker = new Common.UI.DataView({
el: $('#id-toolbar-menu-iconsets', menuItem.$el), el: $('#id-' + id + '-menu-iconsets', menuItem.$el),
parentMenu: menuItem.menu, parentMenu: menuItem.menu,
groups: new Common.UI.DataViewGroupStore([ groups: new Common.UI.DataViewGroupStore([
{id: 'menu-iconset-group-direct', caption: this.textDirectional}, {id: 'menu-iconset-group-direct', caption: this.textDirectional},
@ -1720,8 +1724,8 @@ define([
me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.icons, record.get('data').index]); me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.icons, record.get('data').index]);
} }
if (e.type !== 'click') if (e.type !== 'click')
me.toolbar.btnCondFormat.menu.hide(); cmp.btnCondFormat.menu.hide();
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnCondFormat); Common.NotificationCenter.trigger('edit:complete', cmp, cmp.btnCondFormat);
} }
}); });
}, },

View file

@ -145,5 +145,15 @@
<div id="cell-checkbox-shrink"></div> <div id="cell-checkbox-shrink"></div>
</td> </td>
</tr> </tr>
<tr>
<td class="padding-small" colspan=2>
<div class="separator horizontal"></div>
</td>
</tr>
<tr>
<td class="padding-small" colspan=2>
<div id="cell-btn-cond-format" style="width:100%;"></div>
</td>
</tr>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>
</table> </table>

View file

@ -71,7 +71,7 @@ define([
this._state = { this._state = {
DisabledControls: true, DisabledControls: true,
DisabledFillPanels: false, DisabledFillPanels: true,
CellAngle: undefined, CellAngle: undefined,
CellIndent: undefined, CellIndent: undefined,
GradFillType: Asc.c_oAscFillGradType.GRAD_LINEAR, GradFillType: Asc.c_oAscFillGradType.GRAD_LINEAR,
@ -185,7 +185,8 @@ define([
style: 'width: 100%;', style: 'width: 100%;',
menuStyle: 'min-width: 100%;', menuStyle: 'min-width: 100%;',
editable: false, editable: false,
data: this._arrFillSrc data: this._arrFillSrc,
disabled: this._locked
}); });
this.cmbFillSrc.setValue(Asc.c_oAscFill.FILL_TYPE_NOFILL); this.cmbFillSrc.setValue(Asc.c_oAscFill.FILL_TYPE_NOFILL);
this.fillControls.push(this.cmbFillSrc); this.fillControls.push(this.cmbFillSrc);
@ -484,7 +485,7 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-add-breakpoint', iconCls: 'toolbar__icon btn-add-breakpoint',
disabled: this._locked, disabled: this._locked,
hint: this.tipAddGradientPoint, hint: this.tipAddGradientPoint
}); });
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
this.lockedControls.push(this.btnAddGradientStep); this.lockedControls.push(this.btnAddGradientStep);
@ -514,10 +515,181 @@ define([
}); });
this.lockedControls.push(this.chShrink); this.lockedControls.push(this.chShrink);
this.chShrink.on('change', this.onShrinkChange.bind(this)); this.chShrink.on('change', this.onShrinkChange.bind(this));
this.btnCondFormat = new Common.UI.Button({
parentEl: $('#cell-btn-cond-format'),
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-cond-format',
caption : this.textCondFormat,
style : 'width: 100%;text-align: left;',
menu: true,
disabled: this._locked
});
this.lockedControls.push(this.btnCondFormat);
}, },
createDelayedElements: function() { createDelayedElements: function() {
this.UpdateThemeColors(); this.UpdateThemeColors();
this.btnCondFormat.setMenu( new Common.UI.Menu({
items: [
{
caption : Common.define.conditionalData.textValue,
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
items: [
{ caption : Common.define.conditionalData.textGreater, type : Asc.c_oAscCFType.cellIs, value : Asc.c_oAscCFOperator.greaterThan },
{ caption : Common.define.conditionalData.textGreaterEq, type : Asc.c_oAscCFType.cellIs, value : Asc.c_oAscCFOperator.greaterThanOrEqual },
{ caption : Common.define.conditionalData.textLess, type : Asc.c_oAscCFType.cellIs, value : Asc.c_oAscCFOperator.lessThan },
{ caption : Common.define.conditionalData.textLessEq, type : Asc.c_oAscCFType.cellIs, value : Asc.c_oAscCFOperator.lessThanOrEqual },
{ caption : Common.define.conditionalData.textEqual, type : Asc.c_oAscCFType.cellIs, value : Asc.c_oAscCFOperator.equal },
{ caption : Common.define.conditionalData.textNotEqual, type : Asc.c_oAscCFType.cellIs, value : Asc.c_oAscCFOperator.notEqual },
{ caption : Common.define.conditionalData.textBetween, type : Asc.c_oAscCFType.cellIs, value : Asc.c_oAscCFOperator.between },
{ caption : Common.define.conditionalData.textNotBetween, type : Asc.c_oAscCFType.cellIs, value : Asc.c_oAscCFOperator.notBetween }
]
})
},
{
caption : Common.define.conditionalData.textTop + '/' + Common.define.conditionalData.textBottom,
type : Asc.c_oAscCFType.top10,
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
items: [
{ caption: Common.define.conditionalData.textTop + ' 10 ' + this.textItems, type: Asc.c_oAscCFType.top10, value: 0, percent: false },
{ caption: Common.define.conditionalData.textTop + ' 10%', type: Asc.c_oAscCFType.top10, value: 0, percent: true },
{ caption: Common.define.conditionalData.textBottom + ' 10 ' + this.textItems, type: Asc.c_oAscCFType.top10, value: 1, percent: false },
{ caption: Common.define.conditionalData.textBottom + ' 10%', type: Asc.c_oAscCFType.top10, value: 1, percent: true }
]
})
},
{
caption: Common.define.conditionalData.textAverage,
menu: new Common.UI.Menu({
menuAlign : 'tl-tr',
items: [
{ caption: Common.define.conditionalData.textAbove, type: Asc.c_oAscCFType.aboveAverage, value: 0},
{ caption: Common.define.conditionalData.textBelow, type: Asc.c_oAscCFType.aboveAverage, value: 1},
{ caption: Common.define.conditionalData.textEqAbove, type: Asc.c_oAscCFType.aboveAverage, value: 2},
{ caption: Common.define.conditionalData.textEqBelow, type: Asc.c_oAscCFType.aboveAverage,value: 3},
{ caption: Common.define.conditionalData.text1Above, type: Asc.c_oAscCFType.aboveAverage, value: 4},
{ caption: Common.define.conditionalData.text1Below, type: Asc.c_oAscCFType.aboveAverage, value: 5},
{ caption: Common.define.conditionalData.text2Above, type: Asc.c_oAscCFType.aboveAverage, value: 6},
{ caption: Common.define.conditionalData.text2Below, type: Asc.c_oAscCFType.aboveAverage, value: 7},
{ caption: Common.define.conditionalData.text3Above, type: Asc.c_oAscCFType.aboveAverage, value: 8},
{ caption: Common.define.conditionalData.text3Below, type: Asc.c_oAscCFType.aboveAverage, value: 9}
]
})
},
{
caption : Common.define.conditionalData.textText,
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
items: [
{ caption: Common.define.conditionalData.textContains, type: Asc.c_oAscCFType.containsText },
{ caption: Common.define.conditionalData.textNotContains, type: Asc.c_oAscCFType.notContainsText },
{ caption: Common.define.conditionalData.textBegins, type: Asc.c_oAscCFType.beginsWith },
{ caption: Common.define.conditionalData.textEnds, type: Asc.c_oAscCFType.endsWith }
]
})
},
{
caption : Common.define.conditionalData.textDate,
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
items: [
{ caption: Common.define.conditionalData.textYesterday, type: Asc.c_oAscCFType.timePeriod, value: Asc.c_oAscTimePeriod.yesterday },
{ caption: Common.define.conditionalData.textToday, type: Asc.c_oAscCFType.timePeriod, value: Asc.c_oAscTimePeriod.today},
{ caption: Common.define.conditionalData.textTomorrow, type: Asc.c_oAscCFType.timePeriod, value: Asc.c_oAscTimePeriod.tomorrow},
{ caption: Common.define.conditionalData.textLast7days, type: Asc.c_oAscCFType.timePeriod, value: Asc.c_oAscTimePeriod.last7Days},
{ caption: Common.define.conditionalData.textLastWeek, type: Asc.c_oAscCFType.timePeriod, value: Asc.c_oAscTimePeriod.lastWeek},
{ caption: Common.define.conditionalData.textThisWeek, type: Asc.c_oAscCFType.timePeriod, value: Asc.c_oAscTimePeriod.thisWeek},
{ caption: Common.define.conditionalData.textNextWeek, type: Asc.c_oAscCFType.timePeriod, value: Asc.c_oAscTimePeriod.nextWeek},
{ caption: Common.define.conditionalData.textLastMonth, type: Asc.c_oAscCFType.timePeriod, value: Asc.c_oAscTimePeriod.lastMonth},
{ caption: Common.define.conditionalData.textThisMonth, type: Asc.c_oAscCFType.timePeriod, value: Asc.c_oAscTimePeriod.thisMonth},
{ caption: Common.define.conditionalData.textNextMonth, type: Asc.c_oAscCFType.timePeriod, value: Asc.c_oAscTimePeriod.nextMonth}
]
})
},
{
caption: Common.define.conditionalData.textBlank + '/' + Common.define.conditionalData.textError,
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
items: [
{ caption: Common.define.conditionalData.textBlanks, type: Asc.c_oAscCFType.containsBlanks },
{ caption: Common.define.conditionalData.textNotBlanks,type: Asc.c_oAscCFType.notContainsBlanks },
{ caption: Common.define.conditionalData.textErrors, type: Asc.c_oAscCFType.containsErrors },
{ caption: Common.define.conditionalData.textNotErrors,type: Asc.c_oAscCFType.notContainsErrors }
]
})
},
{
caption: Common.define.conditionalData.textDuplicate + '/' + Common.define.conditionalData.textUnique,
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
items: [
{ caption: Common.define.conditionalData.textDuplicate, type: Asc.c_oAscCFType.duplicateValues },
{ caption: Common.define.conditionalData.textUnique, type: Asc.c_oAscCFType.uniqueValues }
]
})
},
{caption: '--'},
this.mnuDataBars = new Common.UI.MenuItem({
caption : this.textDataBars,
type : Asc.c_oAscCFType.dataBar,
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
style: 'min-width: auto;',
items: []
})
}),
this.mnuColorScales = new Common.UI.MenuItem({
caption : this.textColorScales,
type : Asc.c_oAscCFType.colorScale,
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
style: 'min-width: auto;',
items: []
})
}),
this.mnuIconSets = new Common.UI.MenuItem({
caption : Common.define.conditionalData.textIconSets,
type : Asc.c_oAscCFType.iconSet,
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
style: 'min-width: auto;',
items: []
})
}),
{caption: '--'},
{
caption : Common.define.conditionalData.textFormula,
type : Asc.c_oAscCFType.expression
},
{caption: '--'},
{
caption : this.textNewRule,
value : 'new'
},
{
caption : this.textClearRule,
menu : new Common.UI.Menu({
menuAlign : 'tl-tr',
items: [
{ value: 'clear', type: Asc.c_oAscSelectionForCFType.selection, caption: this.textSelection },
{ value: 'clear', type: Asc.c_oAscSelectionForCFType.worksheet, caption: this.textThisSheet },
{ value: 'clear', type: Asc.c_oAscSelectionForCFType.table, caption: this.textThisTable },
{ value: 'clear', type: Asc.c_oAscSelectionForCFType.pivot, caption: this.textThisPivot }
]
})
},
{
caption : this.textManageRule,
value : 'manage'
}
]
}));
this.btnCondFormat.menu.on('show:before', _.bind(function() {
this.fireEvent('cf:init', [this, 'cell']);
}, this));
this._initSettings = false; this._initSettings = false;
}, },
@ -1346,7 +1518,18 @@ define([
textPosition: 'Position', textPosition: 'Position',
tipAddGradientPoint: 'Add gradient point', tipAddGradientPoint: 'Add gradient point',
tipRemoveGradientPoint: 'Remove gradient point', tipRemoveGradientPoint: 'Remove gradient point',
textIndent: 'Indent' textIndent: 'Indent',
textCondFormat: 'Conditional formatting',
textDataBars: 'Data Bars',
textColorScales: 'Color Scales',
textNewRule: 'New Rule',
textClearRule: 'Clear Rules',
textSelection: 'From current selection',
textThisSheet: 'From this worksheet',
textThisTable: 'From this table',
textThisPivot: 'From this pivot',
textManageRule: 'Manage Rules',
textItems: 'Items'
}, SSE.Views.CellSettings || {})); }, SSE.Views.CellSettings || {}));
}); });

View file

@ -1429,6 +1429,17 @@
"SSE.Views.CellSettings.tipRemoveGradientPoint": "Remove gradient point", "SSE.Views.CellSettings.tipRemoveGradientPoint": "Remove gradient point",
"SSE.Views.CellSettings.tipRight": "Set outer right border only", "SSE.Views.CellSettings.tipRight": "Set outer right border only",
"SSE.Views.CellSettings.tipTop": "Set outer top border only", "SSE.Views.CellSettings.tipTop": "Set outer top border only",
"SSE.Views.CellSettings.textCondFormat": "Conditional formatting",
"SSE.Views.CellSettings.textDataBars": "Data Bars",
"SSE.Views.CellSettings.textColorScales": "Color Scales",
"SSE.Views.CellSettings.textNewRule": "New Rule",
"SSE.Views.CellSettings.textClearRule": "Clear Rules",
"SSE.Views.CellSettings.textSelection": "From current selection",
"SSE.Views.CellSettings.textThisSheet": "From this worksheet",
"SSE.Views.CellSettings.textThisTable": "From this table",
"SSE.Views.CellSettings.textThisPivot": "From this pivot",
"SSE.Views.CellSettings.textManageRule": "Manage Rules",
"SSE.Views.CellSettings.textItems": "Items",
"SSE.Views.ChartDataDialog.errorInFormula": "There's an error in formula you entered.", "SSE.Views.ChartDataDialog.errorInFormula": "There's an error in formula you entered.",
"SSE.Views.ChartDataDialog.errorInvalidReference": "The reference is not valid. Reference must be to an open worksheet.", "SSE.Views.ChartDataDialog.errorInvalidReference": "The reference is not valid. Reference must be to an open worksheet.",
"SSE.Views.ChartDataDialog.errorMaxPoints": "The maximum number of points in series per chart is 4096.", "SSE.Views.ChartDataDialog.errorMaxPoints": "The maximum number of points in series per chart is 4096.",