diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js index fbc027ace..50c2c4020 100644 --- a/apps/common/main/lib/component/Button.js +++ b/apps/common/main/lib/component/Button.js @@ -647,8 +647,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/img/toolbar/charttypes.png b/apps/common/main/resources/img/toolbar/charttypes.png deleted file mode 100644 index e13818e76..000000000 Binary files a/apps/common/main/resources/img/toolbar/charttypes.png and /dev/null differ diff --git a/apps/common/main/resources/img/toolbar/charttypes.svg b/apps/common/main/resources/img/toolbar/charttypes.svg new file mode 100644 index 000000000..3f3289bb2 --- /dev/null +++ b/apps/common/main/resources/img/toolbar/charttypes.svg @@ -0,0 +1,157 @@ + \ No newline at end of file diff --git a/apps/common/main/resources/img/toolbar/charttypes@1.5x.png b/apps/common/main/resources/img/toolbar/charttypes@1.5x.png deleted file mode 100644 index 57a3ed1dc..000000000 Binary files a/apps/common/main/resources/img/toolbar/charttypes@1.5x.png and /dev/null differ diff --git a/apps/common/main/resources/img/toolbar/charttypes@2x.png b/apps/common/main/resources/img/toolbar/charttypes@2x.png deleted file mode 100644 index aac960d29..000000000 Binary files a/apps/common/main/resources/img/toolbar/charttypes@2x.png and /dev/null differ diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 74f9fabf5..160ccb572 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -795,6 +795,12 @@ position: relative; } + svg.icon { + vertical-align: middle; + width: 52px; + padding: 5px; + } + &:hover, .over, &:active, diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 266121c52..06917876f 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -514,135 +514,17 @@ } .item-chartlist { - .background-ximage-v2('toolbar/charttypes.png', 250px); - width: 50px; - height: 50px; + width: 40px; + height: 40px; + .icon { + width: 40px; + height: 40px; + } + + svg.icon { + display: inline-block; + vertical-align: middle; + fill: #444444; + } } -.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; -} - -.spark-line{ - background-position: 0px -250px; -} - -.spark-column{ - background-position: -50px -250px; -} - -.spark-win{ - background-position: -100px -250px; -} - -.surface-normal{ - background-position: 0px -300px; -} - -.surface-wireframe{ - background-position: -50px -300px; -} - -.contour-normal{ - background-position: -100px -300px; -} - -.contour-wireframe{ - background-position: -150px -300px; -} diff --git a/apps/documenteditor/main/app/view/ChartSettings.js b/apps/documenteditor/main/app/view/ChartSettings.js index 878effd46..3fa55df2e 100644 --- a/apps/documenteditor/main/app/view/ChartSettings.js +++ b/apps/documenteditor/main/app/view/ChartSettings.js @@ -136,7 +136,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 = this.chartProps.getType(); @@ -144,9 +144,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; } @@ -248,9 +248,9 @@ define([ this.btnChartType = new Common.UI.Button({ cls : 'btn-large-dataview', - iconCls : 'item-chartlist bar-normal', + 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('') } ] @@ -263,7 +263,7 @@ define([ restoreHeight: 421, groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()), store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()), - itemTemplate: _.template('
') + itemTemplate: _.template('
\">
') }); }); this.btnChartType.render($('#chart-button-type')); @@ -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 a75aba0e1..e62d9aab4 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -1691,7 +1691,7 @@ define([ this.paragraphControls.push(this.mnuInsertPageCount); this.btnInsertChart.setMenu( new Common.UI.Menu({ - style: 'width: 435px;', + style: 'width: 364px;', items: [ {template: _.template('')} ] @@ -1705,7 +1705,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('
') + itemTemplate: _.template('
\">
') }); picker.on('item:click', function (picker, item, record, e) { if (record) diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index 02d53c26c..3430971be 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -259,6 +259,7 @@ + diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy index 824f46de6..212a08ed6 100644 --- a/apps/documenteditor/main/index.html.deploy +++ b/apps/documenteditor/main/index.html.deploy @@ -293,6 +293,7 @@ + diff --git a/apps/documenteditor/main/index_loader.html b/apps/documenteditor/main/index_loader.html index 34239f1a4..85341cc76 100644 --- a/apps/documenteditor/main/index_loader.html +++ b/apps/documenteditor/main/index_loader.html @@ -260,6 +260,7 @@ + diff --git a/apps/documenteditor/main/index_loader.html.deploy b/apps/documenteditor/main/index_loader.html.deploy index 712aa7494..d723ba692 100644 --- a/apps/documenteditor/main/index_loader.html.deploy +++ b/apps/documenteditor/main/index_loader.html.deploy @@ -315,6 +315,7 @@ +
diff --git a/apps/presentationeditor/main/app/view/ChartSettings.js b/apps/presentationeditor/main/app/view/ChartSettings.js index c96fb8c13..7fceffff2 100644 --- a/apps/presentationeditor/main/app/view/ChartSettings.js +++ b/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('') } ] @@ -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('
') + itemTemplate: _.template('
\">
') }); }); 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) { diff --git a/apps/presentationeditor/main/app/view/DocumentHolder.js b/apps/presentationeditor/main/app/view/DocumentHolder.js index 35fe1d82e..4a51b3c0b 100644 --- a/apps/presentationeditor/main/app/view/DocumentHolder.js +++ b/apps/presentationeditor/main/app/view/DocumentHolder.js @@ -3518,7 +3518,7 @@ define([ if (!menu) { this.placeholderMenuChart = menu = new Common.UI.Menu({ - style: 'width: 435px;', + style: 'width: 364px;', items: [ {template: _.template('')} ] @@ -3540,7 +3540,7 @@ define([ // restoreHeight: 421, groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()), store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()), - itemTemplate: _.template('
') + itemTemplate: _.template('
\">
') }); picker.on('item:click', function (picker, item, record, e) { me.editChartClick(record.get('type'), me._state.placeholderObj); diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index f61475dc8..ff1228ea7 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -1140,7 +1140,7 @@ define([ ); this.btnInsertChart.setMenu( new Common.UI.Menu({ - style: 'width: 435px;', + style: 'width: 364px;', items: [ {template: _.template('')} ] @@ -1154,7 +1154,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('
') + itemTemplate: _.template('
\">
') }); picker.on('item:click', function (picker, item, record, e) { if (record) diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html index 44708b4d3..6b431247e 100644 --- a/apps/presentationeditor/main/index.html +++ b/apps/presentationeditor/main/index.html @@ -294,6 +294,7 @@ + diff --git a/apps/presentationeditor/main/index_loader.html b/apps/presentationeditor/main/index_loader.html index 3a7e023eb..d789d5680 100644 --- a/apps/presentationeditor/main/index_loader.html +++ b/apps/presentationeditor/main/index_loader.html @@ -258,6 +258,7 @@ + diff --git a/apps/spreadsheeteditor/main/index_loader.html b/apps/spreadsheeteditor/main/index_loader.html index 96dc38c17..98d4369eb 100644 --- a/apps/spreadsheeteditor/main/index_loader.html +++ b/apps/spreadsheeteditor/main/index_loader.html @@ -261,6 +261,7 @@ +