diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 1fd780939..61a9f3eab 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -634,3 +634,37 @@
border: @scaled-one-px-value solid @border-regular-control;
.background-ximage-v2('toolbar/math.png', 1500px);
}
+
+.item-databar {
+ .icon {
+ width: 20px;
+ height: 22px;
+ }
+
+ svg.icon {
+ display: inline-block;
+ vertical-align: middle;
+ fill: @icon-normal-ie;
+ fill: @icon-normal;
+ }
+
+ width: 20px;
+ height: 22px;
+}
+
+.item-colorscale {
+ .icon {
+ width: 20px;
+ height: 21px;
+ }
+
+ svg.icon {
+ display: inline-block;
+ vertical-align: middle;
+ fill: @icon-normal-ie;
+ fill: @icon-normal;
+ }
+
+ width: 20px;
+ height: 21px;
+}
diff --git a/apps/spreadsheeteditor/main/app/collection/ConditionalFormatIcons.js b/apps/spreadsheeteditor/main/app/collection/ConditionalFormatIcons.js
new file mode 100644
index 000000000..a1f2b6ec3
--- /dev/null
+++ b/apps/spreadsheeteditor/main/app/collection/ConditionalFormatIcons.js
@@ -0,0 +1,56 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2021
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ * ConditionalFormatIcons.js
+ *
+ * Created by Julia Radzhabova on 25.02.21
+ * Copyright (c) 2021 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+ 'backbone'
+], function(Backbone){ 'use strict';
+
+ SSE.Collections.ConditionalFormatIcons = Backbone.Collection.extend({
+ model: Backbone.Model.extend({
+ defaults: function() {
+ return {
+ id: Common.UI.getId(),
+ data: 0,
+ icons: null
+ }
+ }
+ })
+ });
+});
diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js
index 9303a01b3..84caa4c05 100644
--- a/apps/spreadsheeteditor/main/app/controller/Main.js
+++ b/apps/spreadsheeteditor/main/app/controller/Main.js
@@ -55,6 +55,7 @@ define([
'spreadsheeteditor/main/app/collection/ShapeGroups',
'spreadsheeteditor/main/app/collection/TableTemplates',
'spreadsheeteditor/main/app/collection/EquationGroups',
+ 'spreadsheeteditor/main/app/collection/ConditionalFormatIcons',
'spreadsheeteditor/main/app/controller/FormulaDialog'
], function () {
'use strict';
@@ -87,6 +88,7 @@ define([
'ShapeGroups',
'EquationGroups',
'TableTemplates',
+ 'ConditionalFormatIcons',
'Common.Collections.TextArt'
],
views: [],
@@ -2034,7 +2036,21 @@ define([
});
artStore.reset(arr);
},
-
+
+ fillCondFormatIcons: function(iconSets){
+ if (_.isEmpty(iconSets)) return;
+
+ var arr = [],
+ store = this.getCollection('ConditionalFormatIcons');
+ _.each(iconSets, function(iconSet, index){
+ arr.push({
+ icons : iconSet,
+ data : index
+ });
+ });
+ store.reset(arr);
+ },
+
updateThemeColors: function() {
var me = this;
setTimeout(function(){
diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
index 9dcc4e4f4..758744a96 100644
--- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
@@ -393,6 +393,7 @@ define([
});
toolbar.btnPrintTitles.on('click', _.bind(this.onPrintTitlesClick, this));
if (toolbar.btnCondFormat.rendered) {
+ toolbar.btnCondFormat.menu.on('show:before', _.bind(this.onShowBeforeCondFormat, this));
toolbar.btnCondFormat.menu.on('item:click', _.bind(this.onCondFormatMenu, this));
toolbar.btnCondFormat.menu.items[7].menu.on('item:click', _.bind(this.onCondFormatMenu, this));
toolbar.btnCondFormat.menu.items[9].menu.on('item:click', _.bind(this.onCondFormatMenu, this));
@@ -1587,6 +1588,88 @@ define([
}
},
+ onShowBeforeCondFormat: function() {
+ var collection = SSE.getCollection('ConditionalFormatIcons');
+ if (collection.length>0) return;
+
+ SSE.getController('Main').fillCondFormatIcons(this.api.asc_getCFIcons());
+
+ var me = this;
+ var menuItem = this.toolbar.mnuDataBars;
+ menuItem.menu.addItem(new Common.UI.MenuItem({
+ template: _.template('')
+ }));
+ var picker = new Common.UI.DataViewSimple({
+ el: $('#id-toolbar-menu-databar', menuItem.$el),
+ parentMenu: menuItem.menu,
+ itemTemplate: _.template('')
+ });
+ picker.on('item:click', function(picker, item, record, e) {
+ if (me.api) {
+ if (record) {
+ me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.dataBar, record.get('data').index]);
+ }
+ if (e.type !== 'click')
+ me.toolbar.btnCondFormat.menu.hide();
+ Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnCondFormat);
+ }
+ });
+ var arr = [
+ { data: {name: 'gradient-blue', index: 0} },
+ { data: {name: 'gradient-green', index: 1} },
+ { data: {name: 'gradient-red', index: 2} },
+ { data: {name: 'gradient-yellow', index: 3} },
+ { data: {name: 'gradient-lightblue', index: 4} },
+ { data: {name: 'gradient-purple', index: 5} },
+ { data: {name: 'solid-blue', index: 6} },
+ { data: {name: 'solid-green', index: 7} },
+ { data: {name: 'solid-red', index: 8} },
+ { data: {name: 'solid-yellow', index: 9} },
+ { data: {name: 'solid-lightblue', index: 10} },
+ { data: {name: 'solid-purple', index: 11} }
+ ];
+ picker.setStore(new Common.UI.DataViewStore(arr));
+
+ menuItem = this.toolbar.mnuColorScales;
+ menuItem.menu.addItem(new Common.UI.MenuItem({
+ template: _.template('')
+ }));
+ picker = new Common.UI.DataViewSimple({
+ el: $('#id-toolbar-menu-colorscales', menuItem.$el),
+ parentMenu: menuItem.menu,
+ itemTemplate: _.template('')
+ });
+ picker.on('item:click', function(picker, item, record, e) {
+ if (me.api) {
+ if (record) {
+ me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.colorScale, record.get('data').index]);
+ }
+ if (e.type !== 'click')
+ me.toolbar.btnCondFormat.menu.hide();
+ Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnCondFormat);
+ }
+ });
+ arr = [
+ { data: {name: 'green-yellow-red', index: 0} },
+ { data: {name: 'red-yellow-green', index: 1} },
+ { data: {name: 'green-white-red', index: 2} },
+ { data: {name: 'red-white-green', index: 3} },
+ { data: {name: 'blue-white-red', index: 4} },
+ { data: {name: 'red-white-blue', index: 5} },
+ { data: {name: 'white-red', index: 6} },
+ { data: {name: 'red-white', index: 7} },
+ { data: {name: 'green-white', index: 8} },
+ { data: {name: 'white-green', index: 9} },
+ { data: {name: 'green-yellow', index: 10} },
+ { data: {name: 'yellow-green', index: 11} }
+ ];
+ picker.setStore(new Common.UI.DataViewStore(arr));
+
+ this.toolbar.mnuIconSets.menu.addItem(new Common.UI.MenuItem({
+ template: _.template('')
+ }));
+ },
+
onCondFormatMenu: function(menu, item) {
var me = this;
var value = this.api.asc_getLocale();
@@ -2909,7 +2992,7 @@ define([
el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el),
store: shapesStore.at(i).get('groupStore'),
parentMenu: menu.items[i].menu,
- itemTemplate: _.template('')
+ itemTemplate: _.template('')
});
shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) {
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 23303b1c7..0cb7f67de 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -2012,30 +2012,33 @@ define([
type : Asc.c_oAscCFType.duplicateValues
},
{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,
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index b117371d5..77b37bf69 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -319,6 +319,7 @@
+ 
diff --git a/apps/spreadsheeteditor/main/index_loader.html b/apps/spreadsheeteditor/main/index_loader.html
index 8eb226bba..658170876 100644
--- a/apps/spreadsheeteditor/main/index_loader.html
+++ b/apps/spreadsheeteditor/main/index_loader.html
@@ -264,6 +264,7 @@
+