From fd5c8d5f79db159952b41f41e1fc5cf5e3df8944 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Wed, 6 May 2020 17:17:03 +0300
Subject: [PATCH] [DE] Fix svg icon for chart type

---
 apps/common/main/lib/component/Button.js           | 10 ++++++++--
 apps/common/main/resources/less/buttons.less       |  6 ++++++
 apps/documenteditor/main/app/view/ChartSettings.js | 14 +++++++-------
 apps/documenteditor/main/app/view/Toolbar.js       |  2 +-
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 12eb656b71..1e7d612181 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -646,8 +646,14 @@ define([
                 oldCls = this.iconCls;
 
             this.iconCls = cls;
-            btnIconEl.removeClass(oldCls);
-            btnIconEl.addClass(cls || '');
+            if (/svgicon/.test(this.iconCls)) {
+                var icon = /svgicon\s(\S+)/.exec(this.iconCls);
+                btnIconEl.find('use.zoom-int').attr('xlink:href', icon && icon.length>1 ? '#' + icon[1]: '');
+                btnIconEl.find('use.zoom-grit').attr('xlink:href', icon && icon.length>1 ? '#' + icon[1] + '-150' : '');
+            } else {
+                btnIconEl.removeClass(oldCls);
+                btnIconEl.addClass(cls || '');
+            }
         },
 
         changeIcon: function(opts) {
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 213acbb00d..d4db0ae965 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -777,6 +777,12 @@
         position: relative;
     }
 
+    svg.icon {
+        vertical-align: middle;
+        width: 52px;
+        padding: 5px;
+    }
+
     &:hover,
     .over,
     &:active,
diff --git a/apps/documenteditor/main/app/view/ChartSettings.js b/apps/documenteditor/main/app/view/ChartSettings.js
index 2839983303..3fa55df2ed 100644
--- a/apps/documenteditor/main/app/view/ChartSettings.js
+++ b/apps/documenteditor/main/app/view/ChartSettings.js
@@ -136,17 +136,17 @@ define([
 
                 value = props.get_SeveralChartTypes();
                 if (this._state.SeveralCharts && value) {
-                    // this.btnChartType.setIconCls('');
+                    this.btnChartType.setIconCls('svgicon');
                     this._state.ChartType = null;
                 } else {
                     var type = this.chartProps.getType();
                     if (this._state.ChartType !== type) {
                         var record = this.mnuChartTypePicker.store.findWhere({type: type});
                         this.mnuChartTypePicker.selectRecord(record, true);
-                        // if (record) {
-                        //     this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
-                        // } else
-                        //     this.btnChartType.setIconCls('');
+                        if (record) {
+                            this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
+                        } else
+                            this.btnChartType.setIconCls('svgicon');
                         this.updateChartStyles(this.api.asc_getChartPreviews(type));
                         this._state.ChartType = type;
                     }
@@ -250,7 +250,7 @@ define([
                 cls         : 'btn-large-dataview',
                 iconCls     : 'svgicon chart-column-normal',
                 menu        : new Common.UI.Menu({
-                    style: 'width: 435px; padding-top: 12px;',
+                    style: 'width: 364px; padding-top: 12px;',
                     items: [
                         { template: _.template('<div id="id-chart-menu-type" class="menu-insertchart"  style="margin: 5px 5px 5px 10px;"></div>') }
                     ]
@@ -386,7 +386,7 @@ define([
                 rawData = record;
             }
 
-            // this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls);
+            this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
             this._state.ChartType = -1;
 
             if (this.api && !this._noApply && this.chartProps) {
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 6f53ada8a6..6bac2a0657 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -1662,7 +1662,7 @@ define([
                 this.paragraphControls.push(this.mnuInsertPageCount);
 
                 this.btnInsertChart.setMenu( new Common.UI.Menu({
-                    style: 'width: 435px;',
+                    style: 'width: 364px;',
                     items: [
                         {template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
                     ]