[SSE][PE] Set svg icons for chart types

apps/common/main/resources/less/toolbar.less

@@ -515,7 +515,6 @@
 }
 
 .item-chartlist {
-    //.background-ximage-v2('toolbar/charttypes.png', 250px);
     width: 40px;
     height: 40px;
     .icon {
@@ -530,118 +529,3 @@
     }
 }
 
-.line-normal {
-    background-position: 0 0;
-}
-
-.line-stack {
-    background-position: -50px 0;
-}
-
-.line-pstack {
-    background-position: -100px 0;
-}
-
-.line-3d {
-    background-position: -150px 0;
-}
-
-.column-normal {
-    background-position: 0 -50px;
-}
-
-.column-stack{
-    background-position: -50px -50px;
-}
-
-.column-pstack{
-    background-position: -100px -50px;
-}
-
-.column-3d-normal {
-    background-position: -150px -50px;
-}
-
-.column-3d-stack{
-    background-position: -200px -50px;
-}
-
-.column-3d-pstack{
-    background-position: -150px -100px;
-}
-
-.column-3d-normal-per{
-    background-position: -200px -100px;
-}
-
-.bar-normal {
-    background-position: 0 -100px;
-}
-
-.bar-stack{
-    background-position: -50px -100px;
-}
-
-.bar-pstack{
-    background-position: -100px -100px;
-}
-
-.bar-3d-normal {
-    background-position: -150px -150px;
-}
-
-.bar-3d-stack{
-    background-position: -200px -150px;
-}
-
-.bar-3d-pstack{
-    background-position: -150px -200px;
-}
-
-.area-normal {
-    background-position: 0 -150px;
-}
-
-.area-stack{
-    background-position: -50px -150px;
-}
-
-.area-pstack{
-    background-position: -100px -150px;
-}
-
-.pie-normal {
-    background-position: 0 -200px;
-}
-
-.pie-3d-normal {
-    background-position: -200px -200px;
-}
-
-.point-normal{
-    background-position: -50px -200px;
-}
-
-.stock-normal{
-    background-position: -100px -200px;
-}
-
-.pie-doughnut{
-    background-position: -200px 0;
-}
-
-.surface-normal{
-    background-position: 0px -300px;
-}
-
-.surface-wireframe{
-    background-position: -50px -300px;
-}
-
-.contour-normal{
-    background-position: -100px -300px;
-}
-
-.contour-wireframe{
-    background-position: -150px -300px;
-}

apps/presentationeditor/main/app/view/ChartSettings.js

@@ -119,7 +119,7 @@ define([
 
                 value = props.get_SeveralChartTypes();
                 if (this._state.SeveralCharts && value) {
-                    this.btnChartType.setIconCls('');
+                    this.btnChartType.setIconCls('svgicon');
                     this._state.ChartType = null;
                 } else {
                     var type = props.getType();
@@ -127,9 +127,9 @@ define([
                         var record = this.mnuChartTypePicker.store.findWhere({type: type});
                         this.mnuChartTypePicker.selectRecord(record, true);
                         if (record) {
-                            this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
+                            this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
                         } else
-                            this.btnChartType.setIconCls('');
+                            this.btnChartType.setIconCls('svgicon');
                         this.updateChartStyles(this.api.asc_getChartPreviews(type));
                         this._state.ChartType = type;
                     }
@@ -200,9 +200,9 @@ define([
             var me = this;
             this.btnChartType = new Common.UI.Button({
                 cls         : 'btn-large-dataview',
-                iconCls     : 'item-chartlist bar-normal',
+                iconCls     : 'svgicon chart-bar-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>') }
                     ]
@@ -215,7 +215,7 @@ define([
                     restoreHeight: 421,
                     groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
                     store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
                 });
             });
             this.btnChartType.render($('#chart-button-type'));
@@ -320,7 +320,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) {

apps/presentationeditor/main/app/view/DocumentHolder.js

@@ -3458,7 +3458,7 @@ define([
 
             if (!menu) {
                 this.placeholderMenuChart = menu = new Common.UI.Menu({
-                    style: 'width: 435px;',
+                    style: 'width: 364px;',
                     items: [
                         {template: _.template('<div id="id-placeholder-menu-chart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
                     ]
@@ -3480,7 +3480,7 @@ define([
                     // restoreHeight: 421,
                     groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
                     store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
                 });
                 picker.on('item:click', function (picker, item, record, e) {
                     me.editChartClick(record.get('type'), me._state.placeholderObj);

apps/presentationeditor/main/app/view/Toolbar.js

@@ -1112,7 +1112,7 @@ define([
                 );
 
                 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>')}
                     ]
@@ -1126,7 +1126,7 @@ define([
                         restoreHeight: 421,
                         groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData(true)),
                         store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
-                        itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                        itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
                     });
                     picker.on('item:click', function (picker, item, record, e) {
                         if (record)

apps/presentationeditor/main/index.html

@@ -284,6 +284,7 @@
     <img class="inline-svg" src="../../common/main/resources/img/doc-formats/otp.svg">
     <img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);

apps/presentationeditor/main/index.html.deploy

@@ -322,6 +322,7 @@
     <inline src="resources/img/doc-formats/otp.svg" />
     <inline src="resources/img/doc-formats/blank.svg" />
     <inline src="resources/img/toolbar/shapetypes.svg" />
+    <inline src="resources/img/toolbar/charttypes.svg" />
 
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
 

apps/presentationeditor/main/index_loader.html

@@ -257,6 +257,7 @@
 <img class="inline-svg" src="../../common/main/resources/img/doc-formats/otp.svg">
 <img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
+<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
 <script>
     var svgpoints = document.querySelectorAll('img.inline-svg');
     SVGInjector(svgpoints);

apps/presentationeditor/main/index_loader.html.deploy

@@ -311,6 +311,7 @@
     <inline src="resources/img/doc-formats/otp.svg" />
     <inline src="resources/img/doc-formats/blank.svg" />
     <inline src="resources/img/toolbar/shapetypes.svg" />
+    <inline src="resources/img/toolbar/charttypes.svg" />
 
     <div id="viewport"></div>
 

apps/spreadsheeteditor/main/app/view/ChartSettings.js

@@ -151,7 +151,7 @@ define([
 
                     value = props.asc_getSeveralChartTypes();
                     if (this._state.SeveralCharts && value) {
-                        this.btnChartType.setIconCls('');
+                        this.btnChartType.setIconCls('svgicon');
                         this._state.ChartType = null;
                     } else {
                         var type = this.chartProps.getType();
@@ -159,9 +159,9 @@ define([
                             var record = this.mnuChartTypePicker.store.findWhere({type: type});
                             this.mnuChartTypePicker.selectRecord(record, true);
                             if (record) {
-                                this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
+                                this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
                             } else
-                                this.btnChartType.setIconCls('');
+                                this.btnChartType.setIconCls('svgicon');
                             this.updateChartStyles(this.api.asc_getChartPreviews(type));
                             this._state.ChartType = type;
                         }
@@ -226,9 +226,9 @@ define([
                         var record = this.mnuSparkTypePicker.store.findWhere({type: type});
                         this.mnuSparkTypePicker.selectRecord(record, true);
                         if (record) {
-                            this.btnSparkType.setIconCls('item-chartlist ' + record.get('iconCls'));
+                            this.btnSparkType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
                         } else
-                            this.btnSparkType.setIconCls('');
+                            this.btnSparkType.setIconCls('svgicon');
                         this._state.SparkType = type;
                         styleChanged = true;
                     }
@@ -654,9 +654,9 @@ define([
             // charts
             this.btnChartType = new Common.UI.Button({
                 cls         : 'btn-large-dataview',
-                iconCls     : 'item-chartlist bar-normal',
+                iconCls     : 'svgicon chart-bar-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>') }
                     ]
@@ -670,7 +670,7 @@ define([
                     restoreHeight: 421,
                     groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
                     store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
                 });
             });
             this.btnChartType.render($('#chart-button-type'));
@@ -730,9 +730,9 @@ define([
             // sparks
             this.btnSparkType = new Common.UI.Button({
                 cls         : 'btn-large-dataview',
-                iconCls     : 'item-chartlist spark-column',
+                iconCls     : 'svgicon chart-spark-column',
                 menu        : new Common.UI.Menu({
-                    style: 'width: 200px; padding-top: 12px;',
+                    style: 'width: 167px; padding-top: 12px;',
                     items: [
                         { template: _.template('<div id="id-spark-menu-type" class="menu-insertchart"  style="margin: 5px 5px 0 10px;"></div>') }
                     ]
@@ -746,7 +746,7 @@ define([
                     allowScrollbar: false,
                     groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getSparkGroupData()),
                     store: new Common.UI.DataViewStore(Common.define.chartData.getSparkData()),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
                 });
             });
             this.btnSparkType.render($('#spark-button-type'));
@@ -966,7 +966,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) {
@@ -1115,7 +1115,7 @@ define([
                 rawData = record;
             }
 
-            this.btnSparkType.setIconCls('item-chartlist ' + rawData.iconCls);
+            this.btnSparkType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
             this._state.SparkType = -1;
 
             if (this.api && !this._noApply && this._originalProps) {

apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js

@@ -115,9 +115,9 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
 
             this.btnChartType = new Common.UI.Button({
                 cls         : 'btn-large-dataview',
-                iconCls     : 'item-chartlist bar-normal',
+                iconCls     : 'svgicon chart-bar-normal',
                 menu        : new Common.UI.Menu({
-                    style: 'width: 435px; padding-top: 12px;',
+                    style: 'width: 364px; padding-top: 12px;',
                     additionalAlign: this.menuAddAlign,
                     items: [
                         { template: _.template('<div id="id-chart-dlg-menu-type" class="menu-insertchart"  style="margin: 5px 5px 5px 10px;"></div>') }
@@ -131,7 +131,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                     restoreHeight: 421,
                     groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
                     store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
                 });
             });
             this.btnChartType.render($('#chart-dlg-button-type'));
@@ -737,9 +737,9 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
             // Sparklines
             this.btnSparkType = new Common.UI.Button({
                 cls         : 'btn-large-dataview',
-                iconCls     : 'item-chartlist spark-column',
+                iconCls     : 'svgicon chart-spark-column',
                 menu        : new Common.UI.Menu({
-                    style: 'width: 200px; padding-top: 12px;',
+                    style: 'width: 167px; padding-top: 12px;',
                     additionalAlign: this.menuAddAlign,
                     items: [
                         { template: _.template('<div id="id-spark-dlg-menu-type" class="menu-insertchart"  style="margin: 5px 5px 0 10px;"></div>') }
@@ -753,7 +753,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                     restoreHeight: 120,
                     groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getSparkGroupData()),
                     store: new Common.UI.DataViewStore(Common.define.chartData.getSparkData()),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
                 });
             });
             this.btnSparkType.render($('#spark-dlg-button-type'));
@@ -1025,7 +1025,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                 rawData = record;
             }
 
-            this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls);
+            this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
             this.chartSettings.changeType(rawData.type);
             this.updateAxisProps(rawData.type, true);
             this.vertAxisProps = this.chartSettings.getVertAxisProps();
@@ -1249,7 +1249,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                 rawData = record;
             }
 
-            this.btnSparkType.setIconCls('item-chartlist ' + rawData.iconCls);
+            this.btnSparkType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
             if (this._changedProps) {
                 this._changedProps.asc_setType(rawData.type);
             }
@@ -1295,9 +1295,9 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                     var record = this.mnuChartTypePicker.store.findWhere({type: this._state.ChartType});
                     this.mnuChartTypePicker.selectRecord(record, true);
                     if (record) {
-                        this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
+                        this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
                     } else
-                        this.btnChartType.setIconCls('');
+                        this.btnChartType.setIconCls('svgicon');
 
                     this._noApply = false;
 
@@ -1366,9 +1366,9 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                     var record = this.mnuSparkTypePicker.store.findWhere({type: this._state.SparkType});
                     this.mnuSparkTypePicker.selectRecord(record, true);
                     if (record)
-                        this.btnSparkType.setIconCls('item-chartlist ' + record.get('iconCls'));
+                        this.btnSparkType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
                     else
-                        this.btnSparkType.setIconCls('');
+                        this.btnSparkType.setIconCls('svgicon');
 
                     this.updateSparkStyles((this.sparklineStyles) ? this.sparklineStyles : props.asc_getStyles());
 

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -1803,7 +1803,7 @@ define([
 
             if ( this.btnInsertChart ) {
                 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>') }
                     ]
@@ -1817,7 +1817,7 @@ define([
                         restoreHeight: 421,
                         groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData(true)/*.concat(Common.define.chartData.getSparkGroupData(true))*/),
                         store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()/*.concat(Common.define.chartData.getSparkData())*/),
-                        itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                        itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
                     });
                     picker.on('item:click', function (picker, item, record, e) {
                         if (record)

apps/spreadsheeteditor/main/index.html

@@ -262,6 +262,7 @@
     <img class="inline-svg" src="../../common/main/resources/img/doc-formats/csv.svg">
     <img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);

apps/spreadsheeteditor/main/index.html.deploy

@@ -299,6 +299,7 @@
     <inline src="resources/img/doc-formats/csv.svg" />
     <inline src="resources/img/doc-formats/blank.svg" />
     <inline src="resources/img/toolbar/shapetypes.svg" />
+    <inline src="resources/img/toolbar/charttypes.svg" />
 
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
 </body>

apps/spreadsheeteditor/main/index_loader.html

@@ -260,6 +260,7 @@
 <img class="inline-svg" src="../../common/main/resources/img/doc-formats/csv.svg">
 <img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
+<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
 <script>
     var svgpoints = document.querySelectorAll('img.inline-svg');
     SVGInjector(svgpoints);

apps/spreadsheeteditor/main/index_loader.html.deploy

@@ -311,6 +311,7 @@
     <inline src="resources/img/doc-formats/csv.svg" />
     <inline src="resources/img/doc-formats/blank.svg" />
     <inline src="resources/img/toolbar/shapetypes.svg" />
+    <inline src="resources/img/toolbar/charttypes.svg" />
 
     <div id="viewport"></div>